FallbackJS/index.html at main · hamzaka97/FallbackJS · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="FallbackJS provides reliable fallbacks for offline usage, broken images, and runtime crashes on the web." />
  <meta name="keywords" content="FallbackJS, fallback, offline, web development, JavaScript, error handling, progressive enhancement" />
  <meta name="author" content="Dheeraz V." />
  <link rel="apple-touch-icon" sizes="180x180" href="https://dheeraz.netlify.app/assets/yabp/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://dheeraz.netlify.app/assets/yabp/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://dheeraz.netlify.app/assets/yabp/favicon-16x16.png">
  <link rel="manifest" href="https://dheeraz.netlify.app/assets/yabp/site.webmanifest">
  <link rel="icon" href="https://dheeraz.netlify.app/assets/yabp/favicon.ico" type="image/x-icon">

  <title>FallbackJS - Reliable Web Fallbacks</title>

  <!-- Tailwind CDN -->
  <script src="https://cdn.tailwindcss.com"></script>

  <!-- Apple-style font -->
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "SF Pro Display", Inter, system-ui, sans-serif;
    }
  </style>
</head>

<body class="bg-white text-gray-900 antialiased">

<!-- Offline Banner -->
<div
  id="offlineBanner"
  class="hidden fixed top-4 left-1/2 -translate-x-1/2 z-50
         rounded-full border border-gray-200 bg-white/90 backdrop-blur
         px-5 py-2 shadow-sm text-sm text-gray-700">
  You’re offline. Showing cached content.
</div>

<!-- Header -->
<header class="border-b border-gray-200">
  <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
    <a href="/" class="font-semibold text-lg tracking-tight">FallbackJS</a>
    <nav class="flex items-center gap-6 text-sm text-gray-600">
      <a href="docs.html" class="inline-flex items-center hover:text-black">Docs</a>
      <a href="#examples" class="inline-flex items-center hover:text-black">Examples</a>
      <a href="#usage" class="inline-flex items-center hover:text-black">Usage</a>
      <a href="https://github.com/dheeraz101/FallbackJS"
        target="_blank"
        class="inline-flex items-center hover:text-black">
        GitHub
      </a>

      <a href="https://buymeacoffee.com/dheeraz"
        target="_blank"
        class="inline-flex items-center
                h-8 px-3
                bg-yellow-300 text-black
                rounded hover:bg-yellow-400
                leading-none">
        ☕ Buy me a coffee
      </a>
    </nav>
  </div>
</header>

<!-- Hero -->
<section class="max-w-6xl mx-auto px-6 pt-20 pb-24 text-center">
  <h1 class="text-5xl font-semibold tracking-tight mb-6">
    Graceful fallbacks for the modern web
  </h1>
  <p class="text-gray-600 max-w-2xl mx-auto text-lg">
    FallbackJS ensures your site stays usable when users go offline,
    images fail, or network conditions break expectations.
  </p>
</section>

<!-- Code Block -->
<section id="usage" class="max-w-4xl mx-auto px-6 pb-24">
  <div class="relative rounded-xl border border-gray-200 bg-gray-50 p-6">
    <button
      id="copyBtn"
      class="absolute top-4 right-4 flex items-center gap-2
             text-sm text-gray-600 hover:text-black transition">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
           viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
          d="M8 16h8M8 12h8m-2-8H8a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V8l-4-4z"/>
      </svg>
      <span id="copyText">Copy code</span>
    </button>

<pre id="codeBlock" class="text-sm text-gray-800 overflow-x-auto">
&lt;script src="https://fallbackjs.netlify.app/fallback.min.js"&gt;&lt;/script&gt;
</pre>
  </div>
</section>

<!-- Docs -->
<section id="docs" class="bg-gray-50 border-t border-gray-200">
  <div class="max-w-6xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12">
    <div>
      <h2 class="text-3xl font-semibold mb-4">Why FallbackJS?</h2>
      <p class="text-gray-600 leading-relaxed">
        The web fails silently. Images don’t load. Networks drop.
        Users leave. FallbackJS detects failures early and replaces
        broken content with intentional, branded fallbacks.
      </p>
    </div>
    <div>
      <h3 class="font-medium mb-3">Core principles</h3>
      <ul class="space-y-2 text-gray-600">
        <li>• Zero configuration</li>
        <li>• Works offline by default</li>
        <li>• Handles broken images and runtime crashes</li>
        <li>• No backend, no tracking</li>
        <li>• Progressive enhancement, not magic</li>
      </ul>
    </div>
  </div>
</section>

<!-- Examples -->
<section id="examples" class="max-w-6xl mx-auto px-6 py-24">
  <h2 class="text-3xl font-semibold mb-10 text-center">Example pages</h2>

  <div class="grid md:grid-cols-3 gap-6">
    <a href="examples/offline.html"
       class="rounded-xl border border-gray-200 p-6 hover:shadow-md transition">
      <h3 class="font-medium mb-2">Offline fallback</h3>
      <p class="text-sm text-gray-600">
        Displays a clean, cached fallback UI when the network is unavailable.
      </p>
    </a>

    <a href="examples/image.html"
       class="rounded-xl border border-gray-200 p-6 hover:shadow-md transition">
      <h3 class="font-medium mb-2">Image fallback</h3>
      <p class="text-sm text-gray-600">
        Replaces broken images with graceful placeholders.
      </p>
    </a>

    <a href="examples/crash.html"
       class="rounded-xl border border-gray-200 p-6 hover:shadow-md transition">
      <h3 class="font-medium mb-2">Crash handling</h3>
      <p class="text-sm text-gray-600">
        Demonstrates runtime error capture and safe fallback rendering.
      </p>
    </a>
  </div>
</section>

<!-- Footer -->
<footer class="border-t border-gray-200">
  <div class="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row
              items-center justify-between gap-4 text-sm text-gray-600">
    <span>© 2026 FallbackJS</span>
    <div class="flex gap-4">
      <a href="docs.html" class="hover:text-black">Docs</a>
      <a href="https://github.com/dheeraz101/FallbackJS" class="hover:text-black">GitHub</a>
      <a href="LICENSE" class="hover:text-black">License</a>
    </div>
  </div>
</footer>

<!-- Back to top -->
<button
  id="backToTop"
  class="hidden fixed bottom-6 right-6 rounded-full border border-gray-200
         bg-white p-3 shadow hover:shadow-md transition">
  ↑
</button>

<script>
  // Offline detection
  const banner = document.getElementById("offlineBanner");
  function updateOnlineStatus() {
    banner.classList.toggle("hidden", navigator.onLine);
  }
  window.addEventListener("online", updateOnlineStatus);
  window.addEventListener("offline", updateOnlineStatus);
  updateOnlineStatus();

  // Copy button
  const btn = document.getElementById("copyBtn");
  const text = document.getElementById("copyText");
  const code = document.getElementById("codeBlock").innerText;

  btn.onclick = async () => {
    await navigator.clipboard.writeText(code);
    text.textContent = "Copied";
    setTimeout(() => (text.textContent = "Copy code"), 2000);
  };

  // Back to top
  const topBtn = document.getElementById("backToTop");
  window.addEventListener("scroll", () => {
    topBtn.classList.toggle("hidden", window.scrollY < 400);
  });
  topBtn.onclick = () => window.scrollTo({ top: 0, behavior: "smooth" });
</script>

</body>
</html>