add nnoscript fallbacks

This commit is contained in:
yuzu 2025-05-04 15:16:23 -05:00
parent 045d282298
commit 056b8918d3
2 changed files with 36 additions and 3 deletions

View File

@ -8,3 +8,7 @@
font-weight: bold;
font-size: 3rem;
}
.js-only {
display: none;
}

View File

@ -3,7 +3,6 @@
<html>
<head>
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="/styles.css" />
@ -27,6 +26,28 @@
<a href="#" class="text-blue-500 hover:underline ml-4">Tor url</a>
<a href="#" class="text-blue-500 hover:underline ml-4">RSS feed</a>
<a href="mailto:me@yuzucchii.xyz" class="text-blue-500 hover:underline ml-4">E-mail</a>
<button
id="copy-button"
type="button"
onclick="navigator.clipboard.writeText('mc.yuzucchii.xyz'); showCopiedMessage();"
class="js-only text-blue-500 hover:underline ml-4 bg-transparent p-0 border-none cursor-pointer"
>
Minecraft server
</button>
<span id="copy-msg" class="js-only hidden text-green-600 ml-2 hidden">Copied!</span>
<script>
const msg = document.getElementById('copy-msg');
msg.classList.remove('js-only');
const button = document.getElementById('copy-button');
button.classList.remove('js-only')
</script>
<noscript>
<p class="text-red-500 ml-4">Minecraft server: mc.yuzucchii.xyz</p>
<hr/>
<p class="text-red-500 ml-4">This site works without JavaScript enabled, enjoy your experience</p>
</noscript>
</div>
@for (.articles) |article| {
@ -34,4 +55,12 @@
}
</div>
</body>
<script>
function showCopiedMessage() {
const msg = document.getElementById('copy-msg');
msg.classList.remove('hidden');
setTimeout(() => msg.classList.add('hidden'), 2000);
}
</script>
</html>