affirmationsgenerator/404.html at main · DragonFireDesign/affirmationsgenerator · 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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Not Found - The Affirmation Generator</title>

  <script>
    (function(){
      const saved = localStorage.getItem("theme");
      const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
      if(saved === "dark" || (!saved && prefersDark)) {
        document.documentElement.classList.add("dark");
      }
    })();
  </script>

  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

  <script>
    tailwind.config = {
      darkMode: "class",
      theme: {
        extend: {
          colors: {
            primary: "#A3D2CA",
            "bg-light": "#E0F2F1",
            "bg-dark": "#121212",
            "card-light": "#FFFFFF",
            "card-dark": "#1E1E1E",
          },
          fontFamily: { display: ["Poppins", "sans-serif"] }
        }
      }
    };
  </script>

  <style>
    body { font-family: 'Poppins', sans-serif; }
  </style>
</head>

<body class="bg-bg-light dark:bg-bg-dark transition-colors duration-300">
  <div class="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden">

    <!-- Theme toggle -->
    <button onclick="toggleTheme()"
            class="absolute top-4 right-4 md:top-8 md:right-8 p-3 bg-card-light dark:bg-card-dark rounded-full shadow-lg hover:scale-105 transition-all z-20"
            aria-label="Toggle theme">
      <span id="theme-icon" class="material-icons text-gray-700 dark:text-gray-200"></span>
    </button>

    <!-- Decorative blobs -->
    <div class="pointer-events-none absolute top-0 left-0 -ml-16 -mt-16 w-64 h-64 bg-primary/20 dark:bg-primary/10 rounded-full blur-3xl"></div>
    <div class="pointer-events-none absolute bottom-0 right-0 -mr-16 -mb-16 w-80 h-80 bg-primary/20 dark:bg-primary/10 rounded-full blur-3xl"></div>

    <!-- Content -->
    <main class="max-w-2xl w-full bg-card-light dark:bg-card-dark rounded-3xl shadow-xl p-8 md:p-12 text-center z-10">

      <div class="mb-6">
        <span class="material-icons text-gray-400 dark:text-gray-500" style="font-size: 80px;">error_outline</span>
      </div>

      <h1 class="text-6xl font-bold text-gray-800 dark:text-gray-100 mb-4">404</h1>

      <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-4">
        Page Not Found
      </h2>

      <p class="text-gray-600 dark:text-gray-400 mb-8">
        The page you're looking for doesn't exist or has been moved. But here's an affirmation to brighten your day:
      </p>

      <div class="bg-primary/40 dark:bg-primary/20 p-6 rounded-2xl mb-8">
        <p class="text-lg text-gray-800 dark:text-gray-100 leading-relaxed italic">
          "Every detour leads me to exactly where I need to be."
        </p>
      </div>

      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="index.html"
           class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary text-gray-800 font-semibold rounded-full shadow-md hover:shadow-lg hover:scale-105 transition-all">
          <span class="material-icons">home</span>
          <span>Back to Home</span>
        </a>

        <a href="index.html"
           class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-card-light dark:bg-card-dark text-gray-800 dark:text-gray-100 font-semibold rounded-full shadow-md hover:shadow-lg hover:scale-105 transition-all border-2 border-primary">
          <span class="material-icons">spa</span>
          <span>Get an Affirmation</span>
        </a>
      </div>

    </main>

  </div>

  <script>
    function toggleTheme() {
      const html = document.documentElement;
      const isDark = html.classList.contains('dark');

      if (isDark) {
        html.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      } else {
        html.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      }
      updateThemeIcon();
    }

    function updateThemeIcon() {
      const icon = document.getElementById('theme-icon');
      const isDark = document.documentElement.classList.contains('dark');
      icon.textContent = isDark ? 'light_mode' : 'dark_mode';
    }

    updateThemeIcon();
  </script>
</body>
</html>