<!DOCTYPE html>
<html lang="da">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kyllingeklubben.dk - Danmarks førende forum for fjerkræ</title>
<style>
body {
background-color: #fff8dc; /* Cornsilk */
font-family: "Comic Sans MS", "Verdana", sans-serif;
margin: 0;
padding: 0;
color: #333;
background-image: linear-gradient(#ffe4b5 1px, transparent 1px), linear-gradient(90deg, #ffe4b5 1px, transparent 1px);
background-size: 20px 20px;
}
/* Layout */
.container {
width: 960px;
margin: 0 auto;
background-color: #fff;
border-left: 2px solid #ff8c00;
border-right: 2px solid #ff8c00;
padding: 10px;
}
/* Header */
header {
background: linear-gradient(to bottom, #ffd700, #ff8c00);
border: 3px ridge #ff4500;
padding: 15px;
text-align: center;
margin-bottom: 10px;
position: relative;
}
h1 {
margin: 0;
font-size: 3em;
color: #fff;
text-shadow: 2px 2px 0px #000;
font-family: "Impact", sans-serif;
letter-spacing: 2px;
}
.marquee-container {
background-color: #000;
color: #0f0;
font-family: "Courier New", monospace;
border: 2px inset #555;
margin-top: 10px;
padding: 5px;
}
/* Main Content Area */
.main-content {
display: flex;
gap: 10px;
}
.left-column {
flex: 3;
}
.sidebar {
flex: 1;
background-color: #ffe4b5;
border: 2px groove #ff8c00;
padding: 10px;
font-size: 0.9em;
}
/* Forum & Blog Styles */
.panel {
border: 2px solid #ff8c00;
background-color: #fffacd;
margin-bottom: 15px;
}
.panel-header {
background: linear-gradient(to right, #ff8c00, #ffa500);
color: white;
padding: 5px 10px;
font-weight: bold;
border-bottom: 2px solid #ff4500;
display: flex;
justify-content: space-between;
align-items: center;
}
.panel-body {
padding: 10px;
}
/* Form Styles */
textarea, input[type="text"], input[type="password"] {
width: 95%;
border: 2px inset #ccc;
font-family: "Verdana", sans-serif;
padding: 5px;
background-color: #ffffe0;
}
textarea {
height: 100px;
resize: vertical;
}
button {
background: linear-gradient(to bottom, #ffd700, #ff8c00);
border: 2px outset #ff4500;
color: #fff;
font-weight: bold;
padding: 5px 15px;
cursor: pointer;
font-family: "Impact", sans-serif;
text-transform: uppercase;
margin-top: 5px;
}
button:active {
border-style: inset;
}
/* Post Styles */
.post {
border: 1px dashed #ff8c00;
background-color: #fff;
padding: 10px;
margin-bottom: 10px;
position: relative;
}
.post-header {
background-color: #eee;
border-bottom: 1px solid #ccc;
padding: 5px;
font-size: 0.85em;
color: #555;
display: flex;
justify-content: space-between;
}
.post-title {
font-weight: bold;
color: #ff4500;
font-size: 1.1em;
margin-bottom: 5px;
}
.post-content {
line-height: 1.4;
white-space: pre-wrap;
}
.delete-btn {
color: red;
cursor: pointer;
font-weight: bold;
font-size: 1.2em;
text-decoration: none;
}
/* Sidebar Widgets */
.widget {
border: 1px solid #ff8c00;
background-color: #fff;
margin-bottom: 10px;
padding: 5px;
}
.widget h3 {
margin: 0 0 5px 0;
font-size: 1em;
background-color: #ff8c00;
color: white;
padding: 2px;
text-align: center;
}
.counter-box {
text-align: center;
font-family: "Courier New", monospace;
font-weight: bold;
color: red;
background: #000;
padding: 5px;
border: 2px inset #555;
}
/* Footer */
footer {
text-align: center;
font-size: 0.8em;
margin-top: 20px;
padding: 10px;
border-top: 2px solid #ff8c00;
color: #666;
}
.ie-badge {
display: inline-block;
border: 1px solid #999;
padding: 2px 5px;
background: #eee;
margin-top: 5px;
}
/* Utility */
.hidden { display: none; }
.timestamp { font-size: 0.8em; color: #666; }
</style>
</head>
<body>
<div class="container">
<header>
<h1>🐣 KYLLINGEKLUBBEN.DK 🐣</h1>
<div style="font-size: 0.9em; color: #fff; text-shadow: 1px 1px 0 #000;">
Danmarks #1 Forum for Fjerkræ, Påskeæg og Hygge siden 2026
</div>
<div class="marquee-container">
<marquee scrollamount="5" scrolldelay="100">
VELKOMMEN TIL KYLLINGEKLUBBEN! +++ Husk at fjerne fjerene før stegning +++ Ny tråd: "Hvad laver jeres høns i vinter?" +++ Påskeudsalg kommer snart! +++
</marquee>
</div>
<div style="text-align: right; font-size: 0.8em; color: #fff; margin-top: 5px; font-weight: bold;" id="clock">
--:--
</div>
</header>
<div class="main-content">
<!-- Venstre spalte: Forum & Blog -->
<div class="left-column">
<!-- Blog/Forum Editor -->
<div class="panel">
<div class="panel-header">
<span>📝 SKRIV NYT INDLÆG</span>
</div>
<div class="panel-body">
<input type="text" id="postUser" placeholder="Dit brugernavn (f.eks. KyllingeFar)" style="margin-bottom: 5px;"><br>
<input type="text" id="postTitle" placeholder="Emne / Overskrift" style="margin-bottom: 5px;"><br>
<select id="postCategory" style="margin-bottom: 5px; padding: 2px; background: #ffffe0; border: 1px inset #ccc;">
<option value="Generalt">🐔 Generalt Snak</option>
<option value="Pasning">🌾 Pasning & Foder</option>
<option value="Påske">🥚 Påske & Hygge</option>
<option value="Opskrifter">🍗 Opskrifter</option>
</select><br>
<textarea id="postContent" placeholder="Skriv din besked her... Husk at være høflig mod hønsene!"></textarea><br>
<button onclick="addPost()">POST INDLÆG!!</button>
</div>
</div>
<!-- Indlægsliste -->
<div id="postsContainer">
<!-- Indlæg vil dukke op her -->
<div style="text-align: center; padding: 20px; color: #888; font-style: italic;">
Ingen indlæg endnu... Vær den første til at skrive!
</div>
</div>
</div>
<!-- Højre spalte: Sidebar -->
<div class="sidebar">
<div class="widget">
<h3>🕒 Tid & Dato</h3>
<div id="sidebarClock" style="text-align: center; font-weight: bold; font-size: 1.1em;"></div>
<div id="sidebarDate" style="text-align: center; font-size: 0.9em;"></div>
</div>
<div class="widget">
<h3>👥 Brugere Online</h3>
<div style="text-align: center;">
<span style="color: green;">●</span> <b>1</b> gæst<br>
<span style="color: blue;">●</span> <b>0</b> medlemmer<br>
<small>Højeste rekord: 42</small>
</div>
</div>
<div class="widget">
<h3>📊 Besøgstæller</h3>
<div class="counter-box">
<!-- HitWebCounter Code Start -->
<a href="https://www.hitwebcounter.com" target="_blank">
<img src="https://hitwebcounter.com/counter/counter.php?page=17648321&style=0006&nbdigits=5&type=page&initCount=100"
alt="Visit counter"
border="0"
width="100"
style="width: 100px;">
</a>
<!-- HitWebCounter Code End -->
</div>
<div style="text-align: center; font-size: 0.7em; margin-top: 2px;">Siden start</div>
</div>
<div class="widget">
<h3>🗳️ Månedens Afstemning</h3>
<p style="font-size: 0.9em;"><b>Hvad er bedst til påskemorgen?</b></p>
<form onsubmit="event.preventDefault(); alert('Stemme gemt! (Ikke rigtig, det er bare en demo 😉)');">
<input type="radio" name="vote" id="v1"> <label for="v1">Chokoladeæg</label><br>
<input type="radio" name="vote" id="v2"> <label for="v2">Gule tulipaner</label><br>
<input type="radio" name="vote" id="v3"> <label for="v3">Ristede kyllingelår</label><br>
<button type="submit" style="font-size: 0.8em; padding: 2px 5px;">Stem!</button>
</form>
</div>
<div class="widget">
<h3>🔗 Nyttige Links</h3>
<ul style="padding-left: 20px; font-size: 0.9em;">
<li><a href="#">Køb foder billigt</a></li>
<li><a href="#">Hønsegård byggeri</a></li>
<li><a href="#">Påskelege</a></li>
<li><a href="#">Gæstebog</a></li>
</ul>
</div>
</div>
</div>
<footer>
<p>© 2026 Kyllingeklubben.dk - Alle rettigheder forbeholdes (men kopier gerne).</p>
<p>Designet med ❤️ og meget Comic Sans.</p>
<div class="ie-badge">Best viewed in Internet Explorer 6.0 at 800x600</div>
</footer>
</div>
<script>
// --- 1. URT & DATO FUNKTIONER ---
function updateClock() {
const now = new Date();
const timeString = now.toLocaleTimeString('da-DK');
const dateString = now.toLocaleDateString('da-DK', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
document.getElementById('clock').textContent = timeString;
document.getElementById('sidebarClock').textContent = timeString;
document.getElementById('sidebarDate').textContent = dateString;
}
setInterval(updateClock, 1000);
updateClock(); // Kør straks
// --- 2. BLOG / FORUM LOGIK (Lokal Storage) ---
// Vi gemmer indlæg i browserens hukommelse, så de bliver på din computer
function loadPosts() {
const posts = JSON.parse(localStorage.getItem('kyllingeklubben_posts')) || [];
const container = document.getElementById('postsContainer');
container.innerHTML = '';
if (posts.length === 0) {
container.innerHTML = '<div style="text-align: center; padding: 20px; color: #888; font-style: italic;">Ingen indlæg endnu... Vær den første til at skrive!</div>';
return;
}
// Vis nyeste først
posts.reverse().forEach((post, index) => {
// Vi skal beregne det rigtige index i det originale array for at kunne slette
const originalIndex = posts.length - 1 - index;
const postDiv = document.createElement('div');
postDiv.className = 'post';
postDiv.innerHTML = `
<div class="post-header">
<span>Af: <b>${escapeHtml(post.user)}</b> i <i>${escapeHtml(post.category)}</i> | ${post.date}</span>
<span class="delete-btn" onclick="deletePost(${originalIndex})" title="Slet indlæg">❌</span>
</div>
<div class="post-title">${escapeHtml(post.title)}</div>
<div class="post-content">${escapeHtml(post.content)}</div>
`;
container.appendChild(postDiv);
});
}
function addPost() {
const user = document.getElementById('postUser').value.trim();
const title = document.getElementById('postTitle').value.trim();
const category = document.getElementById('postCategory').value;
const content = document.getElementById('postContent').value.trim();
if (!user || !title || !content) {
alert('Åh nej! Du skal udfylde brugernavn, emne og tekst før du kan sende! 🐔');
return;
}
const now = new Date();
const dateString = now.toLocaleDateString('da-DK') + ' ' + now.toLocaleTimeString('da-DK', {hour: '2-digit', minute:'2-digit'});
const newPost = {
user: user,
title: title,
category: category,
content: content,
date: dateString
};
const posts = JSON.parse(localStorage.getItem('kyllingeklubben_posts')) || [];
posts.push(newPost);
localStorage.setItem('kyllingeklubben_posts', JSON.stringify(posts));
// Nulstil formular
document.getElementById('postTitle').value = '';
document.getElementById('postContent').value = '';
// Genindlæs liste
loadPosts();
}
function deletePost(index) {
if(confirm('Er du sikker på, du vil slette dette indlæg? Det kan ikke fortrydes!')) {
const posts = JSON.parse(localStorage.getItem('kyllingeklubben_posts')) || [];
posts.splice(index, 1);
localStorage.setItem('kyllingeklubben_posts', JSON.stringify(posts));
loadPosts();
}
}
// Sikkerhedsfunktion for at undgå HTML injection i teksten
function escapeHtml(text) {
if (!text) return text;
return text
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
// Indlæs indlæg ved start
loadPosts();
</script>
</body>
</html>