Add <noscript>

qsantos · Sep 22, 2024 · d4ec7e3 · d4ec7e3
1 parent c73b382
commit d4ec7e3
Showing 1 changed file with 25 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -13,6 +13,31 @@
     </head>
     <body>
         <div id="root"></div>
+        <noscript>
+            <nav class="navbar navbar-expand-lg">
+                <div class="container-fluid">
+                    <h1 id="main-header" class="navbar-brand" dir="ltr">
+                        <!-- Morse (−− −−− ·−· ··· ·) -->
+                        <ruby><span class="first-letter">M</span><rp>(</rp><rt>−−</rt><rp>)</rp>o<rp>(</rp><rt>−−−</rt><rp>)</rp>r<rp>(</rp><rt>·−·</rt><rp>)</rp>s<rp>(</rp><rt>···</rt><rp>)</rp>e<rp>(</rp><rt>·</rt><rp>)</rp></ruby>
+                        <!-- Cat (−·−· ·− −) -->
+                        <ruby><span class="first-letter">C</span><rp>(</rp><rt>−·−·</rt><rp>)</rp>a<rp>(</rp><rt>·−</rt><rp>)</rp>t<rp>(</rp><rt>−</rt><rp>)</rp></ruby>
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" height="50"><path fill="#FFCC4D" d="M35.734 19.929C35.375 16.66 35 15 34 13c0 0 3-9 1-12.7-.674-1.246-7.404 1.688-10 3.7 0 0-4-.998-7-.998S11 4 11 4C8.404 1.988 1.674-.946 1 .3-1 4 2 13 2 13 1 15 .625 16.66.266 19.929-.129 23.513.657 26.37 1 27c.39.716 2.367 3.025 5 5 4 3 10 4 12 4s8-1 12-4c2.633-1.975 4.61-4.284 5-5 .343-.63 1.129-3.487.734-7.071z"/><a href="ponyo.webp"><path id="nose" fill="#E75A70" d="M18 19.5c3 0 3 .5 3 1.5s-1.5 3-3 3-3-2-3-3-.001-1.5 3-1.5z"/></a><a href="https://www.youtube.com/watch?v=fVUWjoTxOU8"><path fill="#F18F26" d="M2 3c.447-1.342 5.64 1 6.64 2C8.64 5 4 8 3 11c0 0-2-5-1-8zm32 0c-.447-1.342-5.64 1-6.64 2 0 0 4.64 3 5.64 6 0 0 2-5 1-8z"/></a><path fill="#FFCC4D" d="M4.934 5.603C4.934 4.189 11 7 10 8s-2 1.603-3 2.603-2.066-4-2.066-5zm26.132 0C31.066 4.189 25 7 26 8s2 1.603 3 2.603 2.066-4 2.066-5z"/><path fill="#FEE7B8" d="M.701 25c-.148 0-.294-.065-.393-.19-.171-.217-.134-.531.083-.702.162-.127 4.02-3.12 10.648-2.605.275.02.481.261.46.536-.021.275-.257.501-.537.46-6.233-.474-9.915 2.366-9.951 2.395-.093.071-.202.106-.31.106zm8.868-4.663c-.049 0-.1-.007-.149-.022-4.79-1.497-8.737-.347-8.777-.336-.265.081-.543-.07-.623-.335-.079-.265.071-.543.335-.622.173-.052 4.286-1.247 9.362.338.264.083.411.363.328.627-.066.213-.263.35-.476.35zM35.299 25c.148 0 .294-.065.393-.19.171-.217.134-.531-.083-.702-.162-.127-4.02-3.12-10.648-2.605-.275.02-.481.261-.46.536.021.275.257.501.537.46 6.233-.474 9.915 2.366 9.951 2.395.093.071.202.106.31.106zm-8.868-4.663c.049 0 .1-.007.149-.022 4.79-1.497 8.737-.347 8.777-.336.265.081.543-.07.623-.335.079-.265-.071-.543-.335-.622-.173-.052-4.286-1.247-9.362.338-.264.083-.411.363-.328.627.065.213.263.35.476.35z"/><path fill="#292F33" d="M28.023 24.191C27.046 24.383 23 26 18 26s-9.046-1.617-10.023-1.809C7 24 6.885 25.264 7.442 27.132 8 29 11 33 18 33s10-4 10.558-5.868c.557-1.868.442-3.132-.535-2.941z"/><path fill="#F5F8FA" d="M8 25s5 2 10 2 10-2 10-2-.5 3-1.5 3-1.5-1-1.5-1-4 2-7 2-7-2-7-2-.5 1-1.5 1S8 25 8 25z"/><a href="https://en.wikipedia.org/wiki/Jeremiah_Denton"><g fill="#292F33"><ellipse cx="12" cy="14.5" rx="2" ry="3.5"/><ellipse cx="24" cy="14.5" rx="2" ry="3.5"/></g></a></svg>
+                    </h1>
+                    <ul class="navbar-nav ms-auto align-items-center">
+                        <li class="nav-item ms-2">
+                            <a href="https://github.com/qsantos/morse.cat/" class="link-secondary">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
+                                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+                                </svg>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </nav>
+            <div class="alert alert-danger alert-dismissible fade show" role="alert">
+                Sorry, JavaScript is needed for Morse Cat to work.
+            </div>
+        </noscript>
         <script type="text/html" id="template">
             <nav class="navbar navbar-expand-lg">
                 <div class="container-fluid">