started site overhual

Sirdug · Oct 21, 2024 · 636b040 · 636b040
1 parent 2e556fd
commit 636b040
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 45 deletions.
diff --git a/index.html b/index.html
@@ -6,43 +6,55 @@
  <title>sirdug.dev</title>
  <link rel="icon" type="image/x-icon" href="/images/sirdug.jpg">
  <link rel="stylesheet" href="./style.css">
-
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 </head>
 
 <body>
- <nav class="navbar">
- <ul class="navbar-menu">
- <li><a class="homepage" href="index.html">Home</a></li>
- <li><a href="about.html">About</a></li>
- <li><a href="games.html">Games</a></li>
- <li><a href="servers.html">Servers</a></li>
- <li><a href="AI.html">AI Chatbot</a></li>
- </ul>
- </nav>
+ <div class="navbar-menu">
+ <button class="button-86" onclick="location.href='index.html'">Home</button>
+ <button class="button-86" onclick="toggleDropdown()">About</button>
+ <button class="button-86" onclick="location.href='games.htm'">Games</button>
+ <button class="button-86" onclick="location.href='servers.htm'">Servers</button>
+ <button class="button-86" onclick="location.href='AI.htm'">AI Chatbot</button>
+ </div>
+
+ <div id="aboutDropdown" class="dropdown-content">
+ <div class="pokemon-card">
+ <img src="/images/sirdug.jpg" alt="Pokemon" class="pokemon-image">
+ <div class="pokemon-info">
+ <h2>Sirdug</h2>
+ <p>I made this junk :)</p>
+ </div>
+ <div class="pokemon-discord">
+ <i class="fab fa-discord"></i>
+ <span>sirdug</span>
+ </div>
+ <div class="pokemon-github">
+ <i class="fab fa-github"></i>
+ <span>sirdug</span>
+ </div>
+ </div>
+ </div>
 
  <div class="card">
  <svg viewBox="0 0 100% 100%" xmlns='http://www.w3.org/2000/svg' class="noise">
  <filter id='noiseFilter'>
  <feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='6' stitchTiles='stitch' />
  </filter>
-
  <rect width='100%' height='100%' preserveAspectRatio="xMidYMid meet" filter='url(#noiseFilter)' />
  </svg>
  <div class="content">
-
  <h1>Homepage</h1>
  <p class="lol">This is under construction</p>
  <p class="lol">...also idk what to put here</p>
-
-
  </div>
  </div>
+
  <div class="gradient-bg">
  <svg viewBox="0 0 100vw 100vw" xmlns='http://www.w3.org/2000/svg' class="noiseBg">
  <filter id='noiseFilterBg'>
  <feTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch' />
  </filter>
-
  <rect width='100%' height='100%' preserveAspectRatio="xMidYMid meet" filter='url(#noiseFilterBg)' />
  </svg>
  <svg xmlns="http://www.w3.org/2000/svg" class="svgBlur">
@@ -65,7 +77,6 @@ <h1>Homepage</h1>
  </div>
 
  <script src="./script.js"></script>
-
 </body>
 
 <footer class="footer1">

diff --git a/about.html → legacy/about.html b/about.html → legacy/about.html
diff --git a/about.js → legacy/about.js b/about.js → legacy/about.js
diff --git a/script.js b/script.js
@@ -21,51 +21,36 @@ document.addEventListener('DOMContentLoaded', () => {
 });
 
 function clicktocopy() {
- // Get the text field
  var copyText = document.getElementById("sirdug");
-
- // Select the text field
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices
-
- // Copy the text inside the text field
  navigator.clipboard.writeText(copyText.value);
-
- // Alert the copied text
  alert("Copied the text: " + copyText.value);
 }
 
-
-
-
-
-
-
-
 var countDownDate = new Date("August 18, 2024 12:00:00").getTime();
-
-// Update the count down every 1 second
 var x = setInterval(function() {
-
- // Get todays date and time
  var now = new Date().getTime();
-
- // Find the distance between now an the count down date
  var distance = countDownDate - now;
-
- // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
- // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";
-
- // If the count down is finished, write some text 
  if (distance < 0) {
  clearInterval(x);
  document.getElementById("demo").innerHTML = "EXPIRED";
  }
-}, 1000);
+}, 1000);
+
+function toggleDropdown() {
+ const dropdown = document.getElementById('aboutDropdown');
+ if (dropdown.classList.contains('show')) {
+ dropdown.classList.remove('show');
+ dropdown.classList.add('hide');
+ } else {
+ dropdown.classList.remove('hide');
+ dropdown.classList.add('show');
+ }
+}
diff --git a/style.css b/style.css
@@ -336,6 +336,12 @@ p {
 }
 
 .navbar-menu {
+ position: fixed;
+ top: 0;
+ width: 100%;
+ background-color: transparent; /* Make background transparent */
+ z-index: 1000;
+ padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
@@ -351,6 +357,7 @@ p {
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  transition: color 0.3s;
+
 }
 
 .navbar-menu a:hover {
@@ -478,4 +485,61 @@ padding: 30px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
-}
+}
+
+.dropdown-content {
+ visibility: hidden;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%) scale(0.9);
+ background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
+ backdrop-filter: blur(10px); /* Blur effect */
+ min-width: 200px;
+ box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+ z-index: 1001;
+ padding: 20px;
+ border-radius: 8px;
+ opacity: 0;
+ transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.dropdown-content.show {
+ visibility: visible;
+ opacity: 1;
+ transform: translate(-50%, -50%) scale(1);
+}
+
+.dropdown-content.hide {
+ visibility: hidden;
+ opacity: 0;
+ transform: translate(-50%, -50%) scale(0.9);
+}
+
+.pokemon-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.pokemon-image {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ border: 3px solid #000;
+}
+
+.pokemon-info {
+ padding-top: 15px;
+ text-align: center;
+}
+
+.pokemon-discord,
+.pokemon-github {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding-top: 10px;
+ font-size: 24px;
+}
+
diff --git a/temppass.txt b/temppass.txt