Update about.html

OnurLexa · Nov 6, 2024 · dff832a · dff832a
1 parent 44306b2
commit dff832a
Showing 1 changed file with 115 additions and 7 deletions.
diff --git a/about.html b/about.html
@@ -1,6 +1,118 @@
 <!DOCTYPE html>
 <html lang="tr0">
-    <head>
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gece ve Gündüz Modu</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+    <style>
+        /* Genel stil */
+        body {
+            font-family: 'Arial', sans-serif;
+            transition: background-color 0.3s, color 0.3s;
+            margin: 0;
+            padding: 0;
+        }
+
+        .light-mode {
+            background-color: #fff;
+            color: #333;
+        }
+
+        .dark-mode {
+            background-color: #121212;
+            color: #ddd;
+        }
+
+        /* Gece-Gündüz butonu */
+        .mode-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            background-color: #e63946;
+            color: white;
+            padding: 15px;
+            border-radius: 50%;
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: background-color 0.3s, transform 0.3s;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+        }
+
+        .mode-toggle:hover {
+            background-color: #ff4d4d;
+            transform: scale(1.1);
+        }
+
+        /* Güneş ve Ay simgeleri */
+        .sun, .moon {
+            display: none;
+        }
+
+        .sun.active, .moon.active {
+            display: inline;
+        }
+    </style>
+</head>   
+<body class="dark-mode">
+    <h1 style="text-align: center; margin-top: 50px;">Gece ve Gündüz Modu</h1>
+
+    <!-- Gece/Gündüz modu butonu -->
+    <button class="mode-toggle" id="modeToggle">
+        <i class="fas fa-sun sun"></i>
+        <i class="fas fa-moon moon active"></i>
+    </button>
+
+    <script>
+        // Gece/Gündüz modunu değiştiren fonksiyon
+        const modeToggleButton = document.getElementById('modeToggle');
+        const sunIcon = document.querySelector('.sun');
+        const moonIcon = document.querySelector('.moon');
+
+        let isDarkMode = true; // Sayfa default olarak gece modunda başlasın
+
+        modeToggleButton.addEventListener('click', function() {
+            isDarkMode = !isDarkMode;
+
+            if (isDarkMode) {
+                document.body.classList.remove('light-mode');
+                document.body.classList.add('dark-mode');
+                sunIcon.classList.remove('active');
+                moonIcon.classList.add('active');
+            } else {
+                document.body.classList.remove('dark-mode');
+                document.body.classList.add('light-mode');
+                sunIcon.classList.add('active');
+                moonIcon.classList.remove('active');
+            }
+        });
+    </script>
+</body>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Onur Çelik - Yazılım Geliştirici | Siber Güvenlik Uzmanı</title>
+    <link rel="stylesheet" href="css/style.css">
+
+    <style>
+        /* İz Efekti Stili */
+        .cursor-trail {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: radial-gradient(circle, rgba(255,255,255,0.7), transparent);
+            border-radius: 50%;
+            pointer-events: none;
+            transition: transform 0.1s ease;
+            mix-blend-mode: screen;
+            z-index: 9999;
+        }
+    </style>
+
+</head>
+
+<head>
         <meta charset="UTF-8">
         <title>Hakkımda</title>
         <link rel="stylesheet" href="css/style.css">
@@ -38,12 +150,8 @@ <h2>Hakkımda</h2>
             </section>
         </main>
         <footer>
-        <p>&copy; 2024 Onur Çelik. Tüm hakları saklıdır.</p>
-        <p>Daha Fazlası İçin: 
-            <a href="https://github.com/onurlexa" target="_blank">GitHub - onurlexa</a> | 
-            <a href="https://github.com/lexa1337" target="_blank">GitHub - lexa1337</a>
-        </p>
-    </footer>
+            <p>&copy; 2024 Onur Çelik. Tüm hakları saklıdır.</p>
+        </footer>
 
         <div class="cursor-trail" id="cursorTrail"></div>