feat(frontend): add noscript fallback message
Amolith
created 2 months ago
Users without JavaScript enabled now see a helpful message explaining
that Sift requires JavaScript to function, with an explanation about
WebSocket requirements.
Implements: 6a9a677
Assisted-by: Claude Sonnet 4.5 via Crush
Change summary
static/index.html | 7 +++++++
static/style.css | 27 +++++++++++++++++++++++++++
2 files changed, 34 insertions(+)
Detailed changes
@@ -14,6 +14,13 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<link rel="stylesheet" href="/style.css">
</head>
<body>
+ <noscript>
+ <div class="noscript-message">
+ <h1>JavaScript Required</h1>
+ <p>Sift requires JavaScript to function. Please enable JavaScript in your browser settings and reload this page.</p>
+ <p>Sift is a collaborative list application that uses WebSockets for real-time updates, which requires JavaScript to work.</p>
+ </div>
+ </noscript>
<div id="app">
<div id="start-screen">
<h1>Sift</h1>
@@ -33,6 +33,33 @@ body {
display: none !important;
}
+/* Noscript message */
+.noscript-message {
+ max-width: 600px;
+ margin: 4rem auto;
+ padding: 2rem;
+ text-align: center;
+ background: var(--surface-2);
+ border: 2px solid var(--brand-color);
+ border-radius: 8px;
+}
+
+.noscript-message h1 {
+ color: var(--avocado-11);
+ margin-bottom: 1.5rem;
+}
+
+.noscript-message p {
+ margin-bottom: 1rem;
+ line-height: 1.7;
+}
+
+.noscript-message p:last-child {
+ margin-bottom: 0;
+ color: var(--text-2);
+ font-size: 0.9rem;
+}
+
/* Start screen */
#start-screen {
text-align: center;