Backup-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>