html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>
<div class="valentine-container">
<!-- Crush Header with name and status -->
<div class="valentine-header">
<div class="valentine-avatar">
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 64 64"><g fill="#633d19"><path d="M48.13 60.18c.186 1.613 4.361 1.438 8.824-.488c4.473-1.928 6.518-5.922 6.324-7.532c-.18-1.617-6.834-19.675-11.301-17.748c-4.466 1.924-4.03 24.15-3.847 25.768"/><path d="M58.891 28.896c0 7.911-12.1 14.333-27.02 14.333c-14.912 0-27.02-6.422-27.02-14.333V21.24c0-7.912 12.11-20.19 27.02-20.19c14.915 0 27.02 12.274 27.02 20.19v7.656"/></g><path fill="#ed307c" d="M58.53 36.629c.434 2.625-2.01 2.914-5.33 3.377c-3.318.467-6.262.926-6.699-1.697c-.436-2.625 1.906-5.127 5.227-5.594c3.322-.462 6.367 1.29 6.802 3.914"/><path fill="#633d19" d="M15.872 60.18c-.188 1.613-4.359 1.438-8.823-.488C2.577 57.764.53 53.77.722 52.16c.182-1.617 6.835-19.675 11.304-17.748c4.466 1.924 4.03 24.15 3.846 25.768"/><path fill="#ed307c" d="M5.475 36.629c-.436 2.625 2.01 2.914 5.328 3.377c3.319.467 6.264.926 6.696-1.697c.44-2.625-1.903-5.127-5.223-5.594c-3.321-.462-6.369 1.29-6.801 3.914"/><path fill="#fbbf67" d="M7.313 35.1c0 9.754 10.823 17.646 24.2 17.646c13.36 0 24.19-7.894 24.19-17.646c0-9.739-10.821-33.771-24.18-33.771c-13.373.003-24.2 24.03-24.2 33.771"/><path fill="#25333a" d="M26.825 35.697c0 2.381-1.604 4.318-3.564 4.318c-1.975 0-3.56-1.938-3.56-4.318c0-2.383 1.585-4.332 3.56-4.332c1.959 0 3.564 1.949 3.564 4.332m16.921 0c0 2.381-1.598 4.318-3.561 4.318c-1.978 0-3.563-1.938-3.563-4.318c0-2.383 1.586-4.332 3.563-4.332c1.963 0 3.561 1.949 3.561 4.332"/><path fill="#633d19" d="M52.703 27.805c.041-6.621.074-11.02.143-17.766c-11.979-11.666-29.15-12.01-41.44-.126c-.133 6.646-.266 13.14-.409 19.667c13.71-1.685 27.76-2.273 41.709-1.775"/><path fill="#633f1a" d="M40.15 43.45c0 4.774-3.873 8.651-8.654 8.651c-4.773 0-8.648-3.877-8.648-8.651"/><path fill="#fff" d="M38.67 44.32c0 1.91-3.273 3.459-7.31 3.459c-4.04 0-7.315-1.549-7.315-3.459"/><path fill="#ed307c" d="M15.09 14.393c.758-14.261 32.664-11.436 35.535-2.73c-12.996-1.827-22.71-1.559-35.535 2.73"/><path fill="#ed307c" d="M55.31 42.34c0 2.074-4.115 3.75-9.188 3.75c-5.078 0-9.191-1.676-9.191-3.75c0-2.068 4.113-3.744 9.191-3.744c5.072 0 9.188 1.675 9.188 3.744m-28.399 0c0 2.074-4.115 3.75-9.19 3.75c-5.08 0-9.19-1.676-9.19-3.75c0-2.068 4.11-3.744 9.19-3.744c5.074 0 9.19 1.675 9.19 3.744" opacity=".48"/></svg>
</div>
<div class="valentine-header-info">
<div class="valentine-name">Crush</div>
<div class="valentine-status">
<div class="status-dot"></div>
<span>online</span>
</div>
</div>
<i data-lucide="heart" size="20"></i>
</div>
<!-- Chat Messages -->
<div class="valentine-messages" id="valentine-messages">
<div class="typing-indicator" id="typing">
<span>Crush is typing</span>
<div class="typing-dots">
<div class="typing-dot"></div>
<div class="typing-dot"></div>
<div class="typing-dot"></div>
</div>
</div>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
:root {
--safe-area-top: env(safe-area-inset-top, 0px);
--safe-area-bottom: env(safe-area-inset-bottom, 0px);
}
body {
background: #f0f2f5;
font-family: "Atkinson Hyperlegible Next", serif;
display: flex;
justify-content: center;
align-items: center;
}
.valentine-container {
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #ffe6ea, #fff, #ffe6ea);
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
document.addEventListener('DOMContentLoaded', function () {
const conversation = {
start: {
message: "Hey! 👋 I've been wanting to ask you something special...",
delay: 1000,
next: {
message: "Would you like to be my Valentine? 💝",
choices: [
{
text: "Yes, I'd love to be your Valentine! ❤️",
next: "accept"
},
{
text: "I've been hoping you'd ask! Of course! 🥰",
next: "accept"
}
]
}
},
accept: {
message: "You just made me the happiest person! 🥺💕",
delay: 1000,
next: {
message: "How should we make our Valentine's Day special? 🌹",
choices: [
{
text: "I'd love to plan something magical with you! ✨",
next: "date"
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Uruchom