<!DOCTYPE html>

<head>

<title>ThrillMe | Unik Kunst af Trille</title>

<style>

/* Custom Font Setup */

h1, h2, h3, h4, .serif {

font-family: 'Playfair Display', serif;

}

body {

font-family: 'Lato', sans-serif;

}

/* Smooth Scrolling */

html {

scroll-behavior: smooth;

}

/* Hide scrollbar for gallery but allow scroll */

.hide-scrollbar::-webkit-scrollbar {

display: none;

}

.hide-scrollbar {

-ms-overflow-style: none;

scrollbar-width: none;

}

/* Cart Animation */

@keyframes slideIn {

from { transform: translateX(100%); }

to { transform: translateX(0); }

}

.cart-slide-in {

animation: slideIn 0.3s ease-out forwards;

}

/* Image Hover Effect */

.art-card:hover .art-overlay {

opacity: 1;

}

.art-card img {

transition: transform 0.5s ease;

}

.art-card:hover img {

transform: scale(1.05);

}

/* Loading Spinner */

.loader {

border: 3px solid #f3f3f3;

border-radius: 50%;

border-top: 3px solid #d97706; /* amber-600 */

width: 20px;

height: 20px;

-webkit-animation: spin 1s linear infinite; /* Safari */

animation: spin 1s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

/* AI Gradient Text */

.ai-gradient-text {

background: linear-gradient(to right, #d97706, #92400e);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

}

</style>

</head>

ThrillMe<span class="text-amber-600">.</span>dk

</a>

</div>

<a href="#home" class="hover:text-amber-600 transition-colors">Forside</a>

<a href="#gallery" class="hover:text-amber-600 transition-colors">Galleri</a>

<a href="#about" class="hover:text-amber-600 transition-colors">Om Trille</a>

<a href="#contact" class="hover:text-amber-600 transition-colors">Kontakt</a>

</div>

<i class="fas fa-sparkles"></i> AI Konsulent

</button>

</button>

</button>

</div>

<a href="#home" class="block px-3 py-2 text-base font-medium hover:text-amber-600" onclick="toggleMobileMenu()">Forside</a>

<a href="#gallery" class="block px-3 py-2 text-base font-medium hover:text-amber-600" onclick="toggleMobileMenu()">Galleri</a>

<a href="#about" class="block px-3 py-2 text-base font-medium hover:text-amber-600" onclick="toggleMobileMenu()">Om Trille</a>

<a href="#contact" class="block px-3 py-2 text-base font-medium hover:text-amber-600" onclick="toggleMobileMenu()">Kontakt</a>

<i class="fas fa-sparkles"></i> AI Konsulent

</button>

</div>

</nav>

</button>

</div>

</div>

<span>Total</span>

</div>

Gå til kassen

</button>

</div>

<div>

<i class="fas fa-sparkles text-amber-500"></i> Kunst-Konsulenten

</h2>

<p class="text-stone-400 text-sm mt-1">Fortæl mig om din stil, så finder jeg det perfekte værk fra Trille.</p>

</div>

</button>

</div>

</div>

<p>Hej! Jeg kender hele Trilles kollektion. Hvad leder du efter?</p>

<button onclick="setAIPrompt('Jeg søger et stort farverigt maleri til stuen.')" class="bg-stone-100 hover:bg-stone-200 px-3 py-1 rounded-full text-xs text-stone-600 transition-colors">Farverigt maleri</button>

<button onclick="setAIPrompt('Jeg mangler en unik gave i form af smykker.')" class="bg-stone-100 hover:bg-stone-200 px-3 py-1 rounded-full text-xs text-stone-600 transition-colors">Unika smykker</button>

<button onclick="setAIPrompt('Har du noget flot brugskunst til hjemmet?')" class="bg-stone-100 hover:bg-stone-200 px-3 py-1 rounded-full text-xs text-stone-600 transition-colors">Brugskunst</button>

</div>

</button>

</form>

</div>

<span id="toast-message">Værket er lagt i kurven!</span>

</div>

</div>

<p class="text-stone-900 uppercase tracking-[0.3em] mb-4 font-bold text-sm bg-white/70 inline-block px-4 py-2 backdrop-blur-sm rounded-sm">Malerier, Smykker & Brugskunst</p>

ThrillMe<br> <span class="italic text-amber-700">by Trille</span>

</h1>

Unika kunsthåndværk der skaber glæde og personlighed i dit hjem.

</p>

Se Kollektionen

</a>

<i class="fas fa-sparkles text-amber-600"></i> Find det rette værk

</button>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Mine Kreationer</h2>

<button class="filter-btn px-6 py-2 rounded-full border border-stone-300 text-stone-600 transition-all hover:border-stone-900 hover:text-stone-900" data-filter="maleri">Malerier</button>

<button class="filter-btn px-6 py-2 rounded-full border border-stone-300 text-stone-600 transition-all hover:border-stone-900 hover:text-stone-900" data-filter="brugskunst">Brugskunst</button>

<button class="filter-btn px-6 py-2 rounded-full border border-stone-300 text-stone-600 transition-all hover:border-stone-900 hover:text-stone-900" data-filter="smykker">Smykker</button>

</div>

</div>

</section>

</div>

<h2 class="text-4xl font-bold serif">Om Trille</h2>

<h3 class="text-xl text-amber-700 italic serif">"Kunst skal kunne mærkes og bruges i hverdagen."</h3>

Hej, jeg er Trille. Velkommen til ThrillMe. Jeg skaber kunst, der ikke kun skal hænge på væggen, men også bæres og bruges. Min passion spænder fra store, udtryksfulde lærreder til fint forarbejdede smykker og unik brugskunst.

</p>

Alt hvad du finder her, er håndlavet af mig. Jeg elsker at eksperimentere med materialer og former, uanset om det er olie på lærred, keramik til bordet eller ædelmetaller til smykker. Tak fordi du kigger med.

</p>

<span class="font-serif text-4xl italic text-stone-400">Trille</span>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Kontakt Mig</h2>

<p class="text-stone-600">Har du spørgsmål om et maleri, et smykke eller ønsker du en bestillingsopgave?</p>

</div>

<div>

</div>

<div>

<label class="block text-sm font-medium text-stone-700 mb-2">Email</label>

</div>

<div>

<label class="block text-sm font-medium text-stone-700 mb-2">Besked</label>

</div>

Send Besked

</button>

</form>

</div>

</section>

<div class="text-2xl font-bold serif text-white uppercase">ThrillMe<span class="text-amber-600">.</span>dk</div>

</div>

</div>

</footer>

</button>

</div>

<i class="fas fa-sparkles"></i> <span>Generer poetisk beskrivelse med AI</span>

</button>

</div>

<span id="modal-stock" class="text-sm text-green-600 font-medium bg-green-100 px-3 py-1 rounded-full">På lager</span>

</div>

Læg i kurv

</button>

</div>

</button>

</div>

Luk

</button>

</div>

// API Key (Empty as per instructions)

const apiKey = "";

const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;

// ------------------------------------------------------------------

// HER STYRER DU DINE KUNSTVÆRKER (DIN "DATABASE")

// ------------------------------------------------------------------

// Kategorier: 'maleri', 'brugskunst', 'smykker'

const artworks = [

{

id: 1,

title: "Morgenstund ved Havet",

category: "maleri",

price: 2500,

image: "https://images.unsplash.com/photo-1578301978693-85fa9c0320b9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",

description: "Et stemningsfuldt oliemaleri på lærred, der fanger det tidlige morgenlys.",

dimensions: "60x80 cm"

{

id: 2,

title: "Rustik Vase 'Jord'",

category: "brugskunst",

price: 450,

// Ceramic vase image

image: "https://images.unsplash.com/photo-1578749556935-ef3893fb895f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",

description: "Hånddrejet keramikvase i mørke jordfarver. Perfekt til tørrede blomster.",

dimensions: "H: 22 cm"

{

id: 3,

title: "Sølvhalskæde 'Dråbe'",

category: "smykker",

price: 850,

// Necklace image

image: "https://images.unsplash.com/photo-1599643478518-17488fbbcd75?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",

description: "Håndlavet halskæde i sterling sølv med en organisk formet dråbe.",

dimensions: "45 cm kæde"

{

id: 4,

title: "Skovens Dyb",

category: "maleri",

price: 3200,

image: "https://images.unsplash.com/photo-1551732998-957e29725e2f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",

description: "Akryl på lærred. Et dybt og beroligende værk i grønne nuancer.",

dimensions: "100x100 cm"

{

id: 5,

title: "Keramikskål 'Ocean'",

category: "brugskunst",

price: 550,

// Bowl image

image: "https://images.unsplash.com/photo-1610701596007-11502861dcfa?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",

description: "Unika skål med en glasur, der minder om havets bølger. Tåler opvaskemaskine.",

dimensions: "Ø: 18 cm"

{

id: 6,

title: "Øreringe 'Guldblad'",

category: "smykker",

price: 1200,

// Earrings image

image: "https://images.unsplash.com/photo-1535632066927-ab7c9ab60908?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",

description: "Forgyldte sølvøreringe formet som små blade. Meget lette og elegante.",

dimensions: "2 cm vedhæng"

}

];

// ------------------------------------------------------------------

// SLUT PÅ KUNSTVÆRKER

// ------------------------------------------------------------------

// State

let cart = [];

let currentFilter = 'all';

// DOM Elements

const grid = document.getElementById('art-grid');

const cartSidebar = document.getElementById('cart-sidebar');

const cartItemsContainer = document.getElementById('cart-items');

const cartTotalEl = document.getElementById('cart-total');

const cartCountEl = document.getElementById('cart-count');

const toast = document.getElementById('toast');

const modal = document.getElementById('product-modal');

const aiModal = document.getElementById('ai-modal');

const aiChatArea = document.getElementById('ai-chat-area');

const aiInput = document.getElementById('ai-input');

const aiSubmitBtn = document.getElementById('ai-submit-btn');

// Initialize

function init() {

renderGallery();

setupFilters();

updateCartUI();

}

// Render Gallery

function renderGallery() {

grid.innerHTML = '';

const filtered = currentFilter === 'all'

? artworks

: artworks.filter(art => art.category === currentFilter);

filtered.forEach(art => {

const card = document.createElement('div');

card.className = 'group cursor-pointer';

card.onclick = (e) => {

// Prevent opening modal if clicking add to cart button directly

if(!e.target.closest('button')) openModal(art.id);

};

card.innerHTML = `

Læg i kurv

</button>

</div>

<div>

<h3 class="text-lg font-bold text-stone-900 group-hover:text-amber-700 transition-colors serif">${art.title}</h3>

<p class="text-sm text-stone-500 capitalize">${art.category} - ${art.dimensions}</p>

</div>

<span class="text-stone-900 font-medium">${art.price} DKK</span>

</div>

grid.appendChild(card);

});

}

// Filters

function setupFilters() {

const buttons = document.querySelectorAll('.filter-btn');

buttons.forEach(btn => {

btn.addEventListener('click', () => {

buttons.forEach(b => {

b.classList.remove('bg-stone-900', 'text-white', 'border-stone-900');

b.classList.add('text-stone-600', 'border-stone-300');

});

btn.classList.remove('text-stone-600', 'border-stone-300');

btn.classList.add('bg-stone-900', 'text-white', 'border-stone-900');

currentFilter = btn.dataset.filter;

renderGallery();

});

}

// Cart Logic

function addToCart(id) {

const art = artworks.find(a => a.id === id);

cart.push(art);

updateCartUI();

showToast(`"${art.title}" er lagt i kurven`);

closeModal();

cartSidebar.classList.remove('hidden');

}

function removeFromCart(index) {

cart.splice(index, 1);

updateCartUI();

}

function updateCartUI() {

cartCountEl.innerText = cart.length;

cartCountEl.style.opacity = cart.length > 0 ? '1' : '0';

const total = cart.reduce((sum, item) => sum + item.price, 0);

cartTotalEl.innerText = total + " DKK";

cartItemsContainer.innerHTML = '';

if (cart.length === 0) {

cartItemsContainer.innerHTML = `

</div>

} else {

cart.forEach((item, index) => {

const el = document.createElement('div');

el.className = 'flex gap-4 items-center';

el.innerHTML = `

<h4 class="font-bold text-stone-900 serif text-sm">${item.title}</h4>

<p class="text-xs text-stone-500 capitalize">${item.category}</p>

<p class="text-sm font-medium mt-1">${item.price} DKK</p>

</div>

</button>

cartItemsContainer.appendChild(el);

});

}

function toggleCart() {

cartSidebar.classList.toggle('hidden');

}

// Updated Checkout Function

function checkout() {

if(cart.length === 0) return;

// Use custom modal instead of alert

showMessage("Demo Kasse", "Tak for din interesse! Dette er en demo-side. I en rigtig version ville du nu blive sendt til betaling (f.eks. via Stripe eller MobilePay).");

}

// Modal Logic

function openModal(id) {

const art = artworks.find(a => a.id === id);

document.getElementById('modal-img').src = art.image;

document.getElementById('modal-category').innerText = art.category;

document.getElementById('modal-title').innerText = art.title;

document.getElementById('modal-desc').innerText = art.description + " Dimensioner: " + art.dimensions;

document.getElementById('modal-price').innerText = art.price + " DKK";

// Reset AI stuff

const aiOutput = document.getElementById('ai-desc-output');

aiOutput.innerHTML = '';

aiOutput.classList.add('hidden');

const aiBtn = document.getElementById('ai-desc-btn');

aiBtn.onclick = () => generatePoeticDescription(art);

aiBtn.innerHTML = `<i class="fas fa-sparkles"></i> <span>Generer poetisk beskrivelse med AI</span>`;

aiBtn.disabled = false;

// Reset button

const btn = document.getElementById('modal-add-btn');

btn.onclick = () => addToCart(art.id);

modal.classList.remove('hidden');

document.body.style.overflow = 'hidden';

}

function closeModal() {

modal.classList.add('hidden');

document.body.style.overflow = 'auto';

}

// ------------------------------------------------------------------

// GEMINI API LOGIC

// ------------------------------------------------------------------

// Generic Function to Call Gemini

async function callGeminiAPI(prompt, systemInstruction = "") {

try {

const payload = {

contents: [{

parts: [{ text: prompt }]

}],

systemInstruction: {

parts: [{ text: systemInstruction }]

}

};

const response = await fetch(apiUrl, {

method: 'POST',

headers: { 'Content-Type': 'application/json' },

body: JSON.stringify(payload)

});

const data = await response.json();

if (data.error) {

console.error("Gemini API Error:", data.error);

throw new Error(data.error.message || "Unknown error");

}

return data.candidates[0].content.parts[0].text;

} catch (error) {

console.error("Call failed:", error);

return "Beklager, AI-tjenesten er midlertidigt utilgængelig. Prøv igen senere.";

}

// Feature 1: Poetic Description Generator

async function generatePoeticDescription(art) {

const btn = document.getElementById('ai-desc-btn');

const output = document.getElementById('ai-desc-output');

// UI Loading State

btn.disabled = true;

btn.innerHTML = `<span class="loader mr-2"></span> Skriver poesi...`;

// Prompt

const prompt = `Skriv en kort, dyb og poetisk beskrivelse (max 40 ord) af dette kunstværk. Svar på dansk.

Titel: ${art.title}

Kategori: ${art.category}

Nuværende beskrivelse: ${art.description}`;

// Call API

const result = await callGeminiAPI(prompt, "Du er en kunstkritiker og poet.");

// Update UI

btn.innerHTML = `<i class="fas fa-check"></i> <span>Beskrivelse genereret</span>`;

output.innerHTML = `"${result}"`;

output.classList.remove('hidden');

}

// Feature 2: Art Consultant (Chat)

function toggleAIConsultant() {

aiModal.classList.toggle('hidden');

if(!aiModal.classList.contains('hidden')) {

// Focus input when opened

setTimeout(() => document.getElementById('ai-input').focus(), 100);

}

function setAIPrompt(text) {

document.getElementById('ai-input').value = text;

}

async function handleAIConsultantSubmit(e) {

e.preventDefault();

const input = document.getElementById('ai-input');

const userText = input.value.trim();

if (!userText) return;

// Add User Message to Chat

addChatMessage('user', userText);

input.value = '';

// Show Loading Bubble

const loadingId = addChatMessage('ai', '<span class="loader"></span> Tænker...');

// Prepare Data for Gemini

// We strip images to save tokens, just sending metadata

const artCatalog = artworks.map(a => ({id: a.id, title: a.title, category: a.category, price: a.price, desc: a.description}));

const systemPrompt = `Du er en ekspert kunst-kurator og indretningsarkitekt for ThrillMe.dk.

Din opgave er at anbefale kunstværker (malerier, smykker eller brugskunst) fra den vedlagte liste baseret på brugerens forespørgsel.

Her er listen af tilgængelige værker (JSON):

${JSON.stringify(artCatalog)}

Regler:

1. Vælg 1-2 værker der passer bedst.

2. Forklar kort HVORFOR de passer til brugerens rum, stil eller gavebehov.

3. Svar i Markdown format.

4. Brug en venlig, professionel tone (som Trille).

5. Hvis intet passer perfekt, foreslå det tætteste match eller foreslå en "Bestillingsopgave" via kontaktsiden.

6. Svar altid på Dansk.

const aiResponseText = await callGeminiAPI(userText, systemPrompt);

// Replace loading bubble with actual response

const responseContainer = document.getElementById(loadingId);

if(responseContainer) {

// Parse Markdown

responseContainer.innerHTML = marked.parse(aiResponseText);

}

function addChatMessage(role, html) {

const id = 'msg-' + Date.now();

const div = document.createElement('div');

div.className = 'flex gap-4 ' + (role === 'user' ? 'flex-row-reverse' : '');

const avatar = role === 'user'

? `<div class="w-10 h-10 rounded-full bg-stone-900 flex items-center justify-center flex-shrink-0 text-white"><i class="fas fa-user"></i></div>`

: `<div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0 text-amber-700"><i class="fas fa-robot"></i></div>`;

const bubbleColor = role === 'user' ? 'bg-stone-900 text-white' : 'bg-white border border-stone-100 text-stone-700 shadow-sm';

div.innerHTML = `

${avatar}

${html}

</div>

aiChatArea.appendChild(div);

aiChatArea.scrollTop = aiChatArea.scrollHeight;

return id;

}

// Utilities

function showToast(msg) {

const tMsg = document.getElementById('toast-message');

tMsg.innerText = msg;

toast.classList.remove('translate-y-20', 'opacity-0');

setTimeout(() => {

toast.classList.add('translate-y-20', 'opacity-0');

}, 3000);

}

function toggleMobileMenu() {

document.getElementById('mobile-menu').classList.toggle('hidden');

}

// Updated Submit Form Function to work with Netlify

function submitForm(e) {

e.preventDefault();

const myForm = e.target;

const formData = new FormData(myForm);

// Send data to Netlify via AJAX

fetch("/", {

method: "POST",

headers: { "Content-Type": "application/x-www-form-urlencoded" },

body: new URLSearchParams(formData).toString(),

})

.then(() => {

showMessage("Besked Sendt", "Tak for din besked! Jeg vender tilbage hurtigst muligt.");

myForm.reset();

})

.catch((error) => {

console.error("Form error:", error);

showMessage("Hovsa", "Der skete en teknisk fejl. Prøv at sende en almindelig email i stedet.");

});

}

// Message Modal Helpers (New)

function showMessage(title, text) {

document.getElementById('msg-modal-title').innerText = title;

document.getElementById('msg-modal-text').innerText = text;

document.getElementById('message-modal').classList.remove('hidden');

}

function closeMessageModal() {

document.getElementById('message-modal').classList.add('hidden');

}

// Start

init();

</script>

</body>

</html>