From 2087503781c7dfca842cb108cc1ef1f5387d7641 Mon Sep 17 00:00:00 2001
From: crt <crt@adastra7.net>
Date: Mon, 11 Mar 2024 10:05:15 +0100
Subject: [PATCH] send help

---
 css/hamburger-dumb.css |  31 ++++++++
 css/nav.css            | 167 ++++++++++++++++-------------------------
 index.html             | 124 +++++++++++++++++++++++++-----
 js/hamburger-dump.js   |  51 +++++++++++++
 4 files changed, 252 insertions(+), 121 deletions(-)
 create mode 100644 css/hamburger-dumb.css
 create mode 100644 js/hamburger-dump.js

diff --git a/css/hamburger-dumb.css b/css/hamburger-dumb.css
new file mode 100644
index 0000000..6b856c0
--- /dev/null
+++ b/css/hamburger-dumb.css
@@ -0,0 +1,31 @@
+/* Add to existing CSS */
+.hamburger {
+    display: none; /* Hide by default */
+    cursor: pointer;
+    font-size: 30px; /* Adjust based on your design preferences */
+    color: #ffffff; /* Change color as needed */
+}
+
+
+/* Mobile-specific styles */
+
+@media only screen and (max-width: 388px) {
+    .hamburger {
+        display: block; 
+    }
+    
+	   .menu {
+        flex-direction: row;
+        width: 100%;
+    }
+
+    .nav {
+        display: block; 
+        text-align: center;
+		padding: 5px;
+    }
+
+    .nav-bar {
+        align-items: flex-start;
+    }
+}
diff --git a/css/nav.css b/css/nav.css
index 978fa98..fa3e0b0 100755
--- a/css/nav.css
+++ b/css/nav.css
@@ -3,14 +3,16 @@
 	display:flex;
 	align-items:center;
 	justify-content: center;
-	height:40px;
+	height:80px;
 }
-.nav, .nav0{
-	color:#ffffff;
-	text-decoration:none;
-	padding:15px;
+.nav, .nav0 {
+	color: #ffffff;
+	text-decoration: none;
+	padding: 10px 10px; /* Increase horizontal padding */
 	transition: all .5s ease;
-	position : relative;
+	position: relative;
+	flex: auto;
+	flex-wrap: wrap;
 }
 .nav:hover{
 	text-shadow:
@@ -25,64 +27,19 @@
 	left:0;
 	position: absolute;
 	background-color:#ffffff;
-	transform-origin: bottom;
+	transform-origin: center;
   transform: scaleX(0);
 	transition: transform 0.5s ease;
 }
 .nav:hover::before{
 	transform: scaleX(1);
 }
-.dot{
-	display:inline-block;
-	width:10px;
-	height:10px;
-	border-radius:10px;
-	background-color:#000;
-	transition: all 0.5s;
-	animation-name: blinking;
-	animation-duration: 4s;
-	animation-iteration-count: infinite;
-}
 .nav0:hover{
 	text-shadow:1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000,1px 1px 0 #000;
 }
 .nav0:hover .dot{
 	box-shadow: 0px 1px #016A70, 1px 1px #016A70;
 }
-@keyframes blinking{
-	0%{
-		height:2px;
-		transform: translateY(-100%);
-	}
-	5%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	7%{
-		height:2px;
-		transform: translateY(-100%);
-	}
-	10%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	68%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	70%{
-		height:2px;
-		transform: translateY(-100%);
-	}
-	76%{
-		height:10px;
-		transform: translateY(0%);
-	}
-	100%{
-		height:10px;
-		transform: translateY(0%);
-	}
-}
 .main {
 	color:#000;
 	display:flex;
@@ -120,70 +77,72 @@
 }
 
 
-/* Mobile compatibility */
-@media only screen and (max-width: 768px) {
-    .nav-bar {
-        flex-direction: column;
-        align-items: flex-start;
-        padding: 10px;
-    }
+@media only screen and (max-width: 485px) {
 
-    .nav, .nav0 {
-        padding: 10px;
-        font-size: 14px; /* Adjust font size for smaller screens */
-    }
+	.nav, .nav0 {
 
-    .nav-bar, .main, .container, .paragraph {
-        flex-direction: column;
-        align-items: center;
-    }
+		padding: 10px 5px; /* Increase horizontal padding */
 
-    .main {
-        font-size: 30px; /* Adjust main section font size */
-    }
+	}
 
-    .paragraph {
-        width: 85%; /* Adjust paragraph width */
-    }
 }
 
-/* Hamburger menu for smaller screens */
-@media only screen and (max-width: 768px) {
-    .hamburger-menu {
-        display: block;
-        cursor: pointer;
-    }
+@media only screen and (max-width: 380px) {
 
-    .nav-menu {
-        display: none; /* Hide nav menu by default on mobile */
-        flex-direction: column;
-        align-items: center;
-    }
+	.nav, .nav0 {
 
-    .hamburger-menu.active + .nav-menu {
-        display: flex; /* Show menu when hamburger is active */
-    }
-}
+		padding: 10px 5px; /* Increase horizontal padding */
+		margin: 0px;
+	}
 
+}
 
-.logo {
-    height: 40px; /* Adjust the height to fit your navbar's size */
-    width: auto; /* Keeps the logo's aspect ratio intact */
+/* Add to existing CSS */
+.hamburger {
+    display: none; /* Hide by default */
+    cursor: pointer;
+    font-size: 30px; /* Adjust based on your design preferences */
+    color: #ffffff; /* Change color as needed */
 }
 
-.logo-link {
-    display: inline-flex;
-    align-items: center;
-    position: relative; /* Needed for the positioning of the pseudo-element */
-    margin-right: 20px; /* Adjust if you need more space around the divider */
+/* Mobile-specific styles */
+
+@media only screen and (max-width: 340px) {
+    .hamburger {
+        display: flex;
+		padding-left: 10px;
+    }
+
+	.animate{
+	transform:skew(180deg);
+	transition: transform 0.5s ease;
+	
 }
 
-.logo-link::after {
-    content: "";
-    position: absolute;
-    right: -10px; /* Adjust this value based on your specific spacing needs */
-    top: 0;
-    bottom: 0;
-    width: 1px;
-    background-color: white; /* Set the color of the divider */
+.unanimate{
+	transform:skew(180deg);
+	transition: transform 0.5s ease;
+	
 }
+    
+	   .menu {
+        flex-direction: row;
+        width: 100%;
+    }
+
+    .nav {
+        display: flex; 
+        text-align: left;
+		padding: 10px;
+		width: fit-content;
+    }
+
+    .nav-bar {
+        align-items: flex-start;
+    }
+
+	.nav::before{
+		transform-origin: left;
+	}
+
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index f305de3..2093c06 100644
--- a/index.html
+++ b/index.html
@@ -10,6 +10,69 @@
   <link rel="stylesheet" href="css/flexboxes.css">
   <link rel="stylesheet" href="css/button.css">
   <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand&display=swap" rel="stylesheet">
+
+  <script>
+    function toggleMenu() {
+        var links = document.querySelectorAll(".nav-bar .links"); // Adjusted to select links inside .nav-bar
+        links.forEach(function(link) {
+            if (link.style.display === "flex") {
+                link.style.display = "none";
+            } else {
+                link.style.display = "flex";
+            }
+        });
+    
+        // Toggle the 'active' class for the hamburger icon
+        var hamburger = document.getElementById("hamburger");
+// Check if 'animate' class is currently applied
+if (hamburger.classList.contains("animate")) {
+    hamburger.classList.remove("animate"); // Remove 'animate' class
+    hamburger.classList.add("unanimate"); // Add 'unanimate' class
+} else {
+    hamburger.classList.remove("unanimate"); // Remove 'unanimate' class
+    hamburger.classList.add("animate"); // Add 'animate' class
+}
+
+
+    }
+    
+        
+        function closeMenu() {
+            var linksArray = document.querySelectorAll(".links"); // Select all elements with the class 'links'
+            if (window.innerWidth <= 340) { // Close the menus only on small screens
+                linksArray.forEach(function(links) {
+                    links.style.display = "none";
+                });
+            }
+        }
+        
+        // Function to check the screen width and adjust menu visibility
+        function checkScreenWidth() {
+            var linksArray = document.querySelectorAll(".links");
+            linksArray.forEach(function(links) {
+                if (window.innerWidth > 340) {
+                    links.style.display = ""; // Remove any inline display style if screen is wider than 440px
+                } else {
+                    links.style.display = "none"; // Hide the navigation links if screen is narrower than 440px
+                }
+            });
+        }
+        
+        // Add event listener for window resize
+        window.addEventListener('resize', checkScreenWidth);
+        
+        // Call checkScreenWidth on initial load
+        window.onload = function() {
+            checkScreenWidth();
+            // Attach closeMenu function to each nav item for small screens
+            var navItems = document.querySelectorAll('.nav');
+            navItems.forEach(function(item) {
+                item.addEventListener('click', closeMenu);
+            });
+        };
+        </script>
+    
+  
   <style>
     .content-div {
       opacity: 0;
@@ -33,15 +96,23 @@
   
 </head>
 <body class="silly-font">
-<div class="header">
-  <div class="nav-bar" style="font-family: 'Quicksand'">
-    <div id="links">
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('Adastra7')">Home</a>
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('Services')">Services</a>
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('About')">About</a>
-      <a href="javascript:void(0);" class="nav" onclick="changeContent('Contact')">Contact</a>
+  <div class="header">
+    
+    <div class="nav-bar" style="font-family: 'Quicksand'">  
+      
+        <div class="menu"> <!-- Hide this initially and show on hamburger click -->
+          <div id="hamburger" class="hamburger" onclick="toggleMenu()">☰</div> <!-- Hamburger Icon -->
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Adastra7')">Home</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Community')">Community</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Services')">Services</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('About')">About</a>
+            <a href="javascript:void(0);" class="nav links" onclick="changeContent('Contact')">Contact</a>
+        </div>
     </div>
-  </div>
+
+
+
+
 <div class="inner-header flex">
 <h1 id="page-title" style="font-family: 'Quicksand'">Adastra7</h1>
 </div>
@@ -71,6 +142,15 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
 <!-- nothing here lmeo just clean landing page -->
 <p></p>
 </div>
+<div id="Community" class="content content-div">
+  <div class="wrapper">
+    <ul class="flex-box cards nocent">
+      <li>
+        <p>Put like Community tab here</p>
+      </li>
+    </ul>
+  </div>
+</div>
 <div id="Services" class="content content-div">
   <div class="wrapper">
     <ul class="flex-box cards nocent">
@@ -128,12 +208,12 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
     <ul class="flex-box cards nocent">
       <li>
         <h2>crt</h2>
-        <p>🚀 The powerhouse behind our physical servers! crt not only keeps the gears turning by maintaining most of our essential services but does so with unmatched dedication and skill.</p>
-        <p>🤖 Although not frequently seen on Discord, crt has embraced the future by moving to matrix, pioneering our journey into new realms of communication!</p>
-      </li>
+        <p>🔧 The backbone of our physical servers! crt ensures our services run smoothly and efficiently, maintaining the lifeblood of our operations.</p>
+        <p>📡 Though less active on Discord, crt has shifted towards Matrix, expanding our horizons in communication!</p>
+      </li>      
       <li>
         <h2>Yessiest</h2>
-        <p>👨‍💻 Code wizard alert! Yessiest is the genius programming the bots and managing Jabber Registration for Adastra7, transforming our digital landscape one line of code at a time.</p>
+        <p>👨‍💻 Code wizard alert! Yessiest is the genius programming various things like bots and the jabber registration for Adastra7, transforming our digital landscape one line of code at a time.</p>
         <p>🎉 A cornerstone of our Discord community, Yessiest's vibrant presence and contributions keep our spirits high and our server lively!</p>
       </li>
       <li>
@@ -149,20 +229,30 @@ viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
     <h2>Updates and News:</h2>
     <ul class="flex-box cards nocent">
       <li>
-        <h2>Planned fiber upgrade:</h2>
-        <p>In the first week of May 2024 Adastra7 will be getting the long awaited fiber upgrade. Please expect some downtime while fiber is being installed and core components are replace or reconfigured for 10Gbps networking</p>
+        <h2>Exciting Fiber Upgrade on the Horizon!</h2>
+        <p>🚀 Big news! In the first week of May 2024, Adastra7 is set to receive a much-anticipated fiber upgrade. We're leveling up to lightning-fast 10Gbps networking! Please bear with us during this time as there may be some downtime while crt installs the fibers and updates core components to bring you blazing-fast speeds.</p>
         <h3>- crt</h3>
       </li>
       <li>
-        <h2>Rework of Adastra7 website:</h2>
-        <p>An ongoing project is the rework of this website. I have decided that continuing to drag along our Bootstrap 3 based DOS themed website isnt viable therefore I am working on an overhaul of the entire thing.</p>
+        <h2>Website Overhaul in Progress!</h2>
+        <p>🎨 We're revamping! The Adastra7 website is getting a complete makeover. Moving away from our nostalgic Bootstrap 3 DOS theme, we're crafting a new experience. Stay tuned !</p>
         <h3>- crt</h3>
       </li>
+      
     </ul>
   </div>
 </div>
 <div id="Contact" class="content content-div">
-  <p style="font-family: 'Quicksand'">Contact content here</p>
+  <div class="wrapper">
+    <ul class="flex-box cards nocent">
+      <li>
+        <p>Join our <a href="https://discord.adastra7.net">Discord server</a> to get started ranting about your local ISP's and Cogent</p>
+        <p>For quick responses and emergencies text crt on Matrix: <a href="https://matrix.to/#/@m1ka:qwu.ch">@m1ka:qwu.ch</a></p>
+        <p>Abuse E-Mail: <a href="mailto:abuse@adastra7.net">abuse@adastra7.net</a></p>
+      </li>            
+          <!-- ich brauche mental dringend hilfe-->
+    </ul>
+  </div>
 </div>
 <!-- Content ends -->
 <!--<div class="footer"><p style="font-family: 'Quicksand'">Adastra7 | 2017-2014</p></div>-->
diff --git a/js/hamburger-dump.js b/js/hamburger-dump.js
new file mode 100644
index 0000000..e97cadc
--- /dev/null
+++ b/js/hamburger-dump.js
@@ -0,0 +1,51 @@
+<script>
+function toggleMenu() {
+    var links = document.querySelectorAll(".nav-bar .links"); // Adjusted to select links inside .nav-bar
+    links.forEach(function(link) {
+        if (link.style.display === "block") {
+            link.style.display = "none";
+        } else {
+            link.style.display = "block";
+        }
+    });
+
+    // Toggle the 'active' class for the hamburger icon
+    var hamburger = document.getElementById("hamburger");
+    hamburger.classList.toggle("active");
+}
+
+    
+    function closeMenu() {
+        var linksArray = document.querySelectorAll(".links"); // Select all elements with the class 'links'
+        if (window.innerWidth <= 388) { // Close the menus only on small screens
+            linksArray.forEach(function(links) {
+                links.style.display = "none";
+            });
+        }
+    }
+    
+    // Function to check the screen width and adjust menu visibility
+    function checkScreenWidth() {
+        var linksArray = document.querySelectorAll(".links");
+        linksArray.forEach(function(links) {
+            if (window.innerWidth > 388) {
+                links.style.display = ""; // Remove any inline display style if screen is wider than 440px
+            } else {
+                links.style.display = "none"; // Hide the navigation links if screen is narrower than 440px
+            }
+        });
+    }
+    
+    // Add event listener for window resize
+    window.addEventListener('resize', checkScreenWidth);
+    
+    // Call checkScreenWidth on initial load
+    window.onload = function() {
+        checkScreenWidth();
+        // Attach closeMenu function to each nav item for small screens
+        var navItems = document.querySelectorAll('.nav');
+        navItems.forEach(function(item) {
+            item.addEventListener('click', closeMenu);
+        });
+    };
+    </script>
\ No newline at end of file