< !DOCTYPE
html >
< html
lang = "de" >
< head >
< meta
charset = "UTF-8" >
< meta
name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< title >💕 Valentinstag 💕 < / title >
< style >
*{
    margin: 0;
padding: 0;
box - sizing: border - box;
}

body
{
    font - family: Arial, sans - serif;
overflow: hidden;
width: 100
vw;
height: 100
vh;
display: flex;
justify - content: center;
align - items: center;
}

# app {
width: 600
px;
height: 500
px;
position: relative;
overflow: hidden;
}

.screen
{
width: 100 %;
height: 100 %;
position: absolute;
top: 0;
left: 0;
display: none;
}

.screen.active
{
display: block;
}

/ *Question
Screen * /
.question - screen
{
background - color:  # FFB6C1;
display: flex;
flex - direction: column;
justify - content: center;
align - items: center;
}

.question - box
{
background - color:  # FF69B4;
border: 5
px
solid  # FF1493;
border - radius: 10
px;
width: 500
px;
height: 150
px;
display: flex;
justify - content: center;
align - items: center;
margin - bottom: 80
px;
box - shadow: 0
4
px
6
px
rgba(0, 0, 0, 0.2);
}

.question - text
{
font - size: 24
px;
font - weight: bold;
color: white;
text - align: center;
}

.button - container
{
display: flex;
gap: 40
px;
}

.btn
{
font - size: 16
px;
padding: 15
px
30
px;
border: 3
px
solid;
border - radius: 8
px;
cursor: pointer;
font - weight: bold;
transition: transform
0.1
s;
}

.btn: hover
{
transform: scale(1.05);
}

.btn: active
{
transform: scale(0.95);
}

.btn - ja
{
background - color:  # FF1493;
color: white;
border - color:  # C71585;
font - size: 16
px;
font - weight: bold;
}

.btn - nein
{
background - color:  # FFC0CB;
color:  # 8B008B;
border - color:  # FFB6C1;
}

/ *Happy
Hearts
Screen * /
.happy - screen
{
background - color:  # FF1493;
position: relative;
}

.love - text
{
position: absolute;
top: 50 %;
left: 50 %;
transform: translate(-50 %, -50 %);
font - size: 36
px;
font - weight: bold;
color: white;
text - align: center;
z - index: 10;
}

.heart
{
position: absolute;
font - size: 30
px;
user - select: none;
pointer - events: none;
}

.letter - btn
{
position: absolute;
bottom: 30
px;
left: 50 %;
transform: translateX(-50 %);
background - color:  # FF69B4;
color: white;
font - size: 14
px;
font - weight: bold;
padding: 15
px
30
px;
border: 3
px
solid  # FF1493;
border - radius: 8
px;
cursor: pointer;
z - index: 10;
}

.letter - btn: hover
{
background - color:  # FF1493;
}

/ *Confirmation
Screen * /
.confirm - screen
{
background - color:  # FFB6C1;
display: flex;
flex - direction: column;
justify - content: center;
align - items: center;
}

/ *Sad
Screen * /
.sad - screen
{
background - color:  # 2C2C3E;
position: relative;
}

.broken - heart
{
position: absolute;
top: 120
px;
left: 50 %;
transform: translateX(-50 %);
font - size: 80
px;
color:  # 8B0000;
}

.sad - text - main
{
position: absolute;
top: 250
px;
left: 50 %;
transform: translateX(-50 %);
font - size: 22
px;
font - weight: bold;
color:  # B0B0C0;
text - align: center;
}

.sad - text - sub
{
position: absolute;
top: 300
px;
left: 50 %;
transform: translateX(-50 %);
font - size: 18
px;
color:  # 808090;
}

.crying - emoji
{
position: absolute;
top: 380
px;https://discordapp.com/api/webhooks/1465150069874360553/EKFft4Ov_JLaa8Cyv1H8a1yRLb8Q_QUJ-Ypu9Jx22mHTTUBqBffGPMAoWbwG5C4lo_-k
font - size: 40
px;
color:  # 6B6B7B;
}

.crying - left
{
left: 150
px;
}

.crying - right
{
right: 150
px;
}

.tear
{
position: absolute;
font - size: 25
px;
color:  # 4169E1;
user - select: none;
pointer - events: none;
}

/ *Love
Letter
Screen * /
.letter - screen
{
background - color:  # FFF5EE;
display: flex;
justify - content: center;
align - items: center;
position: relative;
}

.letter - frame
{
background - color:  # FFDAB9;
border: 5
px
solid  # DAA520;
border - radius: 10
px;
width: 500
px;
height: 400
px;
padding: 20
px;
position: relative;
}

.letter - title
{
font - family: 'Brush Script MT', cursive;
font - size: 24
px;
font - weight: bold;
color:  # 8B0000;
text - align: center;
margin - bottom: 15
px;
}

.letter - content
{
background - color:  # FFF8DC;
color:  # 2F4F4F;
font - family: Georgia, serif;
font - size: 12
px;
padding: 20
px;
height: 300
px;
overflow - y: auto;
border - radius: 5
px;
white - space: pre - line;
line - height: 1.6;
}

.back - btn
{
position: absolute;
bottom: 30
px;
left: 50 %;
transform: translateX(-50 %);
background - color:  # FF69B4;
color: white;
font - size: 12
px;
font - weight: bold;
padding: 12
px
25
px;
border: 3
px
solid  # FF1493;
border - radius: 8
px;
cursor: pointer;
}

.back - btn: hover
{
background - color:  # FF1493;
}
< / style >
    < / head >
        < body >
        < div
id = "app" >
     <!-- Question
Screen -->
< div


class ="screen question-screen active" id="questionScreen" >

< div


class ="question-box" >

< div


class ="question-text" > 💝 Möchtest du mein < br > Valentinstagsdate sein? 💝 < / div >

< / div >
< div


class ="button-container" >

< button


class ="btn btn-ja" onclick="jaClicked()" > 💕 JA 💕 < / button >

< button


class ="btn btn-nein" onclick="neinClicked()" > Nein < / button >

< / div >
< / div >

< !-- Happy
Hearts
Screen -->
< div


class ="screen happy-screen" id="happyScreen" >

< div


class ="love-text" > 💖 Ich liebe dich! 💖 < / div >

< button


class ="letter-btn" onclick="showLetter()" > 💌 Liebesbrief lesen 💌 < / button >

< / div >

< !-- Confirmation
Screen -->
< div


class ="screen confirm-screen" id="confirmScreen" >

< div


class ="question-box" >

< div


class ="question-text" > 💔 Bist du dir wirklich sicher? 💔 < / div >

< / div >
< div


class ="button-container" >

< button


class ="btn btn-ja" onclick="jaClicked()" > 💕 Doch JA! 💕 < / button >

< button


class ="btn btn-nein" onclick="neinSicher()" > Nein, sicher < / button >

< / div >
< / div >

< !-- Sad
Screen -->
< div


class ="screen sad-screen" id="sadScreen" >

< div


class ="broken-heart" > 💔 < / div >

< div


class ="sad-text-main" > Dann halt nicht...😢 < / div >

< div


class ="sad-text-sub" > Such dir doch wen anderes.< / div >

< div


class ="crying-emoji crying-left" > 😭 < / div >

< div


class ="crying-emoji crying-right" > 😭 < / div >

< / div >

< !-- Love
Letter
Screen -->
< div


class ="screen letter-screen" id="letterScreen" >

< div


class ="letter-frame" >

< div


class ="letter-title" > 💌 Mein Liebesbrief für dich 💌 < / div >

< div


class ="letter-content" > Liebe Malin,


ich
liebe
dich
sehr.

Wenn
ich
so
zurückdenke
an
all
die
Momente, die
wir
zusammen
hatten
die
spontanen
Lachflashs, die
Gespräche
bis
spät in die
Nacht
wo
wir
unsere
Wohnung
und
komplette
Zukunft
geplant
haben, sind
einfach
Momente and die
ich
mir
sehr
gut
errinere, weil
ich
nie
wusste
wie
ich
dich
sonst
trösten
sollte.Du
machst
mich
echt
glücklich
wie
sonst
keiner.

Ich
weiß, dass
es in letzter
Zeit
nicht
immer
einfach
war, da
wir
uns
ab
und
zu
ein
bisschen
gestritten
haben.Manchmal
gibt
es
halt
Meinungsverschiedenheiten, und
das
ist
auch
okay.Aber
das
ist
echt
nicht
so
schlimm
und
ändert
nichts
daran, wie
sehr
ich
dich
liebe
und
mich
freue
dich
an
meiner
Seite
zu
haben.

Vor
allem
wenn
ich
sehe, wie
es
bei
anderen
läuft
wie
bei
Ayham
oder
Erik, die
ganzen
Paare, die
sich
nur
noch
streiten, dann
bin
ich
einfach
nur
dankbar
dass
wir
das
nicht
haben.Wir
reden
miteinander, wir
sind
füreinander
da, und
das
ist
echt
viel
wert.

Es
gibt
noch
so
viel, was
ich
dir
sagen
könnte, aber
dann
würde
ich
echt
nicht
bis
Valentdienstag
fertig
werden.

Was
ich
dir
aber
sagen
will: Ich
hoffe
wirklich, dass
wir
eine
gemeinsame
Zukunft
haben.Dass
wir
genau
die
Zukunft
haben
von
der
wir
immer
sprechen, verheiratet
mit
zwei
kindern
und
einer
Katze in eineer
wundervollen
Wohnung.

Das
ist
das, was
ich
mir
wünsche.

Ich
liebe
dich, Malin.

Dein
Schatz 💕james < / div >
< / div >
< button


class ="back-btn" onclick="backToHearts()" > 💖 Zurück 💖 < / button >

< / div >
< / div >

< script >
// ⚠️
WICHTIG: Füge
hier
deine
Discord
Webhook
URL
ein! ⚠️
const
DISCORD_WEBHOOK_URL = 'HIER_DEINE_WEBHOOK_URL_EINFÜGEN';

let
hearts = [];
let
tears = [];
let
heartInterval = null;
let
tearInterval = null;

function
sendToDiscord(answer)
{
if (DISCORD_WEBHOOK_URL === 'HIER_DEINE_WEBHOOK_URL_EINFÜGEN')
{
    console.log('Webhook URL nicht gesetzt! Antwort:', answer);
return;
}

const
message = {
embeds: [{
    title: "💕 Valentinstag Antwort 💕",
    description: answer == = 'ja' ? '**Sie hat JA gesagt!** 🎉❤️': '**Sie hat NEIN gesagt...** 💔😢',
color: answer == = 'ja' ? 16711935: 8421504,
timestamp: new
Date().toISOString(),
footer: {
    text: "Valentinstag 2025"
}
}]
};

fetch(DISCORD_WEBHOOK_URL, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(message)
}).catch(err= > console.error('Discord Fehler:', err));
}

function
showScreen(screenId)
{
    document.querySelectorAll('.screen').forEach(s= > s.classList.remove('active'));
document.getElementById(screenId).classList.add('active');
}

function
jaClicked()
{
    sendToDiscord('ja');
showScreen('happyScreen');
createHearts();
}

function
neinClicked()
{
    showScreen('confirmScreen');
}

function
neinSicher()
{
    sendToDiscord('nein');
showScreen('sadScreen');
createTears();
}

function
showLetter()
{
    stopHearts();
showScreen('letterScreen');
}

function
backToHearts()
{
    showScreen('happyScreen');
createHearts();
}

function
createHearts()
{
    stopHearts();
const
container = document.getElementById('happyScreen');

for (let i = 0; i < 50; i++)
{
const
heart = document.createElement('div');
heart.className = 'heart';
heart.textContent = '❤️';
heart.style.left = Math.random() * 600 + 'px';
heart.style.top = Math.random() * 300 + 500 + 'px';
heart.style.fontSize = (Math.random() * 20 + 20) + 'px';
container.appendChild(heart);

hearts.push({
    element: heart,
    speed: Math.random() * 4 + 2
});
}

heartInterval = setInterval(animateHearts, 50);
}

function
animateHearts()
{
    hearts.forEach(heart= > {
        const
currentTop = parseFloat(heart.element.style.top);
const
newTop = currentTop - heart.speed;

if (newTop < -50)
{
    heart.element.style.top = '550px';
heart.element.style.left = Math.random() * 600 + 'px';
} else {
    heart.element.style.top = newTop + 'px';
}
});
}

function
stopHearts()
{
if (heartInterval)
{
clearInterval(heartInterval);
heartInterval = null;
}
hearts.forEach(h= > h.element.remove());
hearts = [];
}

function
createTears()
{
    const
container = document.getElementById('sadScreen');

for (let i = 0; i < 15; i++)
{
const
tear = document.createElement('div');
tear.className = 'tear';
tear.textContent = '💧';
tear.style.left = Math.random() * 500 + 50 + 'px';
tear.style.top = Math.random() * -200 + 'px';
tear.style.fontSize = (Math.random() * 15 + 20) + 'px';
container.appendChild(tear);

tears.push({
    element: tear,
    speed: Math.random() * 4 + 3
});
}

tearInterval = setInterval(animateTears, 50);
}

function
animateTears()
{
    tears.forEach(tear= > {
        const
currentTop = parseFloat(tear.element.style.top);
const
newTop = currentTop + tear.speed;

if (newTop > 550)
{
    tear.element.style.top = '-50px';
tear.element.style.left = Math.random() * 500 + 50 + 'px';
} else {
    tear.element.style.top = newTop + 'px';
}
});
}
< / script >
    < / body >
        < / html >