Tech-Blog-Website/index.html at main · Sohamsig/Tech-Blog-Website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html lang="en" class="transition-colors duration-500">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>TechForge</title>

  <!-- 1. Inline theme init BEFORE Tailwind loads to avoid flicker -->
  <script>
    (function() {
      const stored = localStorage.getItem('theme');
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      const isDark = stored
        ? (stored === 'dark')
        : prefersDark;
      document.documentElement.classList[ isDark ? 'add' : 'remove' ]('dark');
    })();
  </script>

  <!-- 2. Tailwind config & CDN -->
  <script>
    window.tailwind = window.tailwind || {};
    window.tailwind.config = { darkMode: 'class' };
  </script>
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="flex flex-col min-h-screen bg-white dark:bg-black text-gray-900 dark:text-gray-100">

  <!-- NAVBAR -->
  <header class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-black transition-colors duration-500">
    <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
      <h1 class="text-3xl font-extrabold text-blue-600 dark:text-blue-400">TechForge</h1>
      <button
        id="theme-toggle"
        aria-label="Toggle Dark Mode"
        class="w-10 h-10 flex items-center justify-center rounded-full
               bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700
               transition-colors duration-300"
      >
        <span id="theme-icon" class="text-2xl">🌙</span>
      </button>
    </div>
  </header>

  <!-- HERO + CATEGORIES -->
  <section class="w-full py-20 transition-colors duration-500
                  bg-gradient-to-r from-blue-100 to-blue-300
                  dark:from-gray-900 dark:to-gray-800">
    <div class="max-w-4xl mx-auto text-center px-6">
      <h2 class="text-5xl font-bold mb-4">Your Daily Tech Digest</h2>
      <p class="text-lg mb-8 opacity-80">Curated AI, Gadgets, Robotics & more — all in one place.</p>
      <nav class="inline-flex space-x-2">
        <button class="category-btn px-4 py-2 rounded-full text-sm font-medium bg-blue-600 text-white dark:bg-blue-400 dark:text-black transition-colors duration-300" data-category="All">All</button>
        <button class="category-btn px-4 py-2 rounded-full text-sm font-medium bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-300" data-category="AI">AI</button>
        <button class="category-btn px-4 py-2 rounded-full text-sm font-medium bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-300" data-category="Gadgets">Gadgets</button>
        <button class="category-btn px-4 py-2 rounded-full text-sm font-medium bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 transition-colors duration-300" data-category="Robotics">Robotics</button>
      </nav>
    </div>
  </section>

  <!-- NEWS GRID -->
  <main id="blog-grid" class="flex-1 max-w-6xl mx-auto px-6 py-12 grid gap-8 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
    <!-- skeletons or articles injected here -->
  </main>

  <!-- FOOTER -->
  <footer class="border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-black transition-colors duration-500">
    <div class="max-w-6xl mx-auto px-6 py-8 flex flex-col md:flex-row justify-between items-center">
      <p class="text-sm opacity-75 mb-4 md:mb-0">© 2025 TechForge. All rights reserved.</p>
      <div class="flex space-x-4 text-xl">
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">🐦</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">📸</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">▶️</a>
        <a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">📰</a>
      </div>
    </div>
  </footer>

  <!-- CONFIG & LOGIC -->
  <script src="config.js"></script>
  <script src="script.js"></script>
</body>
</html>