books/juul_paa_nesoya
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added HTML for jonasdaarke.no.

Browse Source
This commit is contained in:
Pål-Kristian Hamre
2025-08-15 14:16:17 +02:00
parent cff30611a5
commit b7a5fa9836
2 changed files with 100 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
de_som_forsvinner_i_taaken/html/frontpage.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 746 KiB

100
de_som_forsvinner_i_taaken/html/index.html Normal file
View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="no" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>De som forsvinner i tåken – Jonas Daarke</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' };
</script>
</head>
<body class="bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors">
<header class="bg-white dark:bg-gray-800 shadow">
<div class="max-w-5xl mx-auto px-6 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold">Jonas Daarke</h1>
<nav class="flex items-center space-x-4 text-gray-700 dark:text-gray-200">
<a href="#boken" class="hover:underline">Boken</a>
<a href="#om-forfatteren" class="hover:underline">Om forfatteren</a>
<button id="themeToggle" aria-pressed="true" class="ml-4 inline-flex items-center px-3 py-1 rounded-full border border-gray-400 dark:border-gray-500 bg-transparent text-gray-700 hover:bg-gray-200 dark:text-gray-200 dark:hover:bg-gray-700 transition">
<span aria-hidden="true" id="themeIcon">☀︎</span>
<span class="sr-only">Veksle lys/mørk modus</span>
</button>
</nav>
</div>
</header>
<section id="boken" class="max-w-5xl mx-auto px-6 py-16 grid md:grid-cols-2 gap-10 items-center">
<div>
<img src="/frontpage.png" alt="Bokforside" class="rounded shadow-lg">
</div>
<div>
<h2 class="text-3xl font-bold mb-4">De som forsvinner i tåken</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
En nervepirrende fortelling om tap, hemmeligheter og det uunngåelige.
Når tåken legger seg over den lille kystbyen, begynner folk å forsvinne –
én etter én. Jonas Daarkes debutroman drar deg inn i en verden der grenser
mellom virkelighet og myte viskes ut.
</p>
<form class="flex flex-col sm:flex-row gap-4">
<input type="email" placeholder="Din e-postadresse" class="flex-1 px-4 py-3 rounded-lg border border-gray-400 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500" required>
<button type="submit" class="px-6 py-3 rounded-lg border border-gray-400 dark:border-gray-600 bg-transparent text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">
Meld meg på
</button>
</form>
<p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Få nyheter om lanseringen rett i innboksen din.</p>
</div>
</section>
<section id="om-forfatteren" class="bg-gray-50 dark:bg-gray-800 py-16">
<div class="max-w-4xl mx-auto px-6 text-center">
<h2 class="text-2xl font-bold mb-4">Om forfatteren</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">
Jonas Daarke har alltid vært fascinert av grenselandet mellom det virkelige og det uvirkelige.
Med bakgrunn i både journalistikk og litteratur, bringer han en unik blanding av skarp observasjon
og poetisk stemning inn i sin debutroman. "De som forsvinner i tåken" er hans første utgivelse,
men neppe den siste.
</p>
</div>
</section>
<footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 py-6 text-center text-gray-500 dark:text-gray-400 text-sm">
&copy; 2025 Jonas Daarke. Alle rettigheter reservert.
</footer>
<script>
const html = document.documentElement;
const toggle = document.getElementById('themeToggle');
const icon = document.getElementById('themeIcon');
function applyTheme(mode){
if(mode === 'dark') {
html.classList.add('dark');
toggle.setAttribute('aria-pressed', 'true');
icon.textContent = '☀︎';
localStorage.setItem('theme', 'dark');
} else {
html.classList.remove('dark');
toggle.setAttribute('aria-pressed', 'false');
icon.textContent = '☾';
localStorage.setItem('theme', 'light');
}
}
(function init(){
const stored = localStorage.getItem('theme');
if(stored === 'light' || stored === 'dark') {
applyTheme(stored);
} else {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
applyTheme(prefersDark ? 'dark' : 'light');
}
})();
toggle.addEventListener('click', () => {
const isDark = html.classList.contains('dark');
applyTheme(isDark ? 'light' : 'dark');
});
</script>
</body>
</html>