Spaces:

GarGerry
/

Flux-web

Running

App Files Files Community

GarGerry commited on Jan 14

Commit

4bda677

verified ·

1 Parent(s): 337f1de

Update Backup-html

Browse files

Files changed (1) hide show

Backup-html +77 -94

Backup-html CHANGED Viewed

@@ -1,110 +1,93 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Futuristic Catch Game</title>
-    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-    <div class="game-container">
-        <div class="ball"></div>
-        <div class="platform"></div>
-        <div class="score-board">Score: <span id="score">0</span></div>
-    </div>
-    <div class="controls">
-        <button id="left-button">◀</button>
-        <button id="right-button">▶</button>
-    </div>
-    <script>
-        const platform = document.querySelector('.platform');
-        const ball = document.querySelector('.ball');
-        const leftButton = document.getElementById('left-button');
-        const rightButton = document.getElementById('right-button');
-        const scoreDisplay = document.getElementById('score');
-        const gameContainer = document.querySelector('.game-container');
-        let platformPosition = 50; // Platform awal di tengah.
-        let ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul secara acak.
-        let isCaught = false; // Apakah bola ditangkap.
-        let score = 0; // Skor awal.
-        // Fungsi untuk memindahkan platform ke kiri
-        function movePlatformLeft() {
-            if (platformPosition > 0) {
-                platformPosition -= 5;
-            }
-            platform.style.left = platformPosition + '%';
-        }
-        // Fungsi untuk memindahkan platform ke kanan
-        function movePlatformRight() {
-            if (platformPosition < 90) {
-                platformPosition += 5;
-            }
-            platform.style.left = platformPosition + '%';
-        }
-        // Keyboard controls
-        window.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowLeft') movePlatformLeft();
-            if (e.key === 'ArrowRight') movePlatformRight();
-        });
-        // Button controls
-        leftButton.addEventListener('click', movePlatformLeft);
-        rightButton.addEventListener('click', movePlatformRight);
-        // Mouse/Touch controls
-        gameContainer.addEventListener('mousemove', (e) => {
-            const containerWidth = gameContainer.offsetWidth;
-            platformPosition = (e.clientX / containerWidth) * 100;
-            platform.style.left = platformPosition + '%';
-        });
-        gameContainer.addEventListener('touchmove', (e) => {
-            const touch = e.touches[0];
-            const containerWidth = gameContainer.offsetWidth;
-            platformPosition = (touch.clientX / containerWidth) * 100;
-            platform.style.left = platformPosition + '%';
-        });
-        // Fungsi untuk menggerakkan bola
-        function moveBall() {
-            if (isCaught) return; // Jangan lanjut jika bola ditangkap.
-            ballPosition.top += 2; // Bola turun.
-            ball.style.top = ballPosition.top + '%';
-            ball.style.left = ballPosition.left + '%';
-            // Deteksi tabrakan (collision detection)
-            if (ballPosition.top >= 90 && Math.abs(ballPosition.left - platformPosition) < 10) {
-                isCaught = true;
-                score++; // Tambahkan skor.
-                scoreDisplay.textContent = score; // Update skor di layar.
-                resetGame();
-            }
-            // Game over jika bola melewati platform
-            if (ballPosition.top >= 100) {
-                if (!isCaught) {
-                    alert('Game Over! Final Score: ' + score);
-                    score = 0; // Reset skor.
-                    scoreDisplay.textContent = score; // Update skor.
-                }
-                resetGame();
-            }
-            requestAnimationFrame(moveBall);
-        }
-        // Fungsi untuk mereset permainan
-        function resetGame() {
-            isCaught = false;
-            ballPosition = { top: 0, left: Math.random() * 90 }; // Bola muncul ulang.
-        }
-        // Memulai permainan
-        moveBall();
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Portfolio Interaktif</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <header>
+    <h1>Selamat Datang di Portfolio Saya</h1>
+    <nav>
+      <ul>
+        <li><a href="#home">Home</a></li>
+        <li><a href="#skills">Skills</a></li>
+        <li><a href="#projects">Projects</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+    <!-- Tombol Mode Gelap dengan Ikon -->
+    <button id="toggleDarkMode" aria-label="Toggle Dark Mode">🌙</button>
+  </header>
+  <section id="home">
+    <h2>Hi, Saya [Nama Kamu]</h2>
+    <p>Seorang developer AI dan Blockchain yang selalu belajar.</p>
+    <button id="chatButton">Tanya Saya</button>
+    <div id="chatbox" class="hidden">
+      <p id="chatMessage">Halo! Saya adalah chatbot mini. Tanyakan apa saja tentang saya!</p>
+    </div>
+  </section>
+  <section id="skills">
+    <h2>Skills</h2>
+    <ul>
+      <li>Generative AI</li>
+      <li>Blockchain</li>
+      <li>Software Engineering</li>
+    </ul>
+  </section>
+  <section id="projects">
+    <h2>Projects</h2>
+    <div class="project">
+      <h3>Sentiment Analysis</h3>
+      <p>Web app untuk analisis sentimen dalam Bahasa Indonesia.</p>
+    </div>
+    <div class="project">
+      <h3>Visualisasi Squad Sepak Bola</h3>
+      <p>Tools untuk membuat formasi tim sepak bola dengan statistik pemain.</p>
+    </div>
+  </section>
+  <section id="contact">
+    <h2>Contact</h2>
+    <form>
+      <input type="text" placeholder="Nama" required>
+      <input type="email" placeholder="Email" required>
+      <textarea placeholder="Pesan"></textarea>
+      <button type="submit">Kirim</button>
+    </form>
+  </section>
+  <footer>
+    <p>&copy; 2025 [Nama Kamu]</p>
+  </footer>
+  <!-- JavaScript -->
+  <script>
+    // Fungsi untuk mengubah mode gelap
+    const toggleDarkModeButton = document.getElementById("toggleDarkMode");
+    // Cek apakah mode gelap sudah dipilih sebelumnya
+    if (localStorage.getItem('darkMode') === 'enabled') {
+      document.body.classList.add('dark-mode');
+      toggleDarkModeButton.textContent = '☀️'; // Ubah ikon ke matahari
+    }
+    // Event listener untuk tombol mode gelap
+    toggleDarkModeButton.addEventListener("click", function () {
+      document.body.classList.toggle("dark-mode");
+      if (document.body.classList.contains("dark-mode")) {
+        localStorage.setItem("darkMode", "enabled");
+        toggleDarkModeButton.textContent = '☀️'; // Ubah ikon ke matahari
+      } else {
+        localStorage.setItem("darkMode", "disabled");
+        toggleDarkModeButton.textContent = '🌙'; // Ubah ikon ke bulan
+      }
+    });
+  </script>
 </body>
 </html>