🤖 Cannot save fiddle #2339
Description
Error code
ERRW:SS1.0
Were you logged in?
Yes
Your username (if logged in)
No response
Your HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Note Creator</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
background: linear-gradient(135deg, #ff9a9e, #fecfef, #fecfef);
color: #333;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
}
.form {
background: rgba(255, 255, 255, 0.9);
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
z-index: 10;
position: relative;
}
h1 {
color: #ff6b9d;
font-size: 2em;
margin-bottom: 20px;
}
input, textarea {
width: 100%;
border: 2px solid #ff6b9d;
border-radius: 10px;
padding: 10px;
font-size: 1em;
margin-bottom: 15px;
outline: none;
}
textarea {
height: 120px;
resize: none;
}
button {
background: #ff6b9d;
color: white;
border: none;
padding: 10px 20px;
border-radius: 10px;
font-size: 1em;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #ff4a7a;
}
.message-display {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #ff9a9e, #fecfef, #fecfef);
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 20;
}
.message-box {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 500px;
width: 90%;
}
.message-box h2 {
color: #ff6b9d;
font-size: 2.5em;
margin-bottom: 20px;
}
.message-box p {
font-size: 1.2em;
line-height: 1.5;
color: #555;
}
.hearts {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
}
.heart {
position: absolute;
color: #ff6b9d;
font-size: 2em;
animation: float 6s infinite linear;
}
.heart:nth-child(odd) {
animation-duration: 8s;
}
.heart:nth-child(even) {
animation-duration: 10s;
}
@keyframes float {
0% { transform: translateY(100vh) rotate(0deg); opacity: 1; }
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}
.kawaii {
position: absolute;
font-size: 3em;
opacity: 0.7;
animation: bounce 3s infinite;
}
.kawaii:nth-child(1) { top: 10%; left: 10%; }
.kawaii:nth-child(2) { top: 20%; right: 15%; }
.kawaii:nth-child(3) { bottom: 15%; left: 20%; }
.kawaii:nth-child(4) { bottom: 10%; right: 10%; }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-10px); }
60% { transform: translateY(-5px); }
}
</style>
</head>
<body>
<div class="form-container">
<div class="hearts" id="hearts"></div>
<div class="kawaii" id="kawaii"></div>
<div class="form">
<h1>💕 Create Your Love Note 💕</h1>
<input type="text" id="sender" placeholder="Your Name" required>
<input type="text" id="recipient" placeholder="Partner's Name" required>
<textarea id="message" placeholder="Write your sweetest message here..."></textarea>
<button onclick="createNote()">Create Love Note</button>
</div>
</div>
<div class="message-display" id="messageDisplay">
<div class="hearts" id="hearts2"></div>
<div class="kawaii" id="kawaii2"></div>
<div class="message-box">
<h2>💖 A Love Note for <span id="recipientName"></span> 💖</h2>
<p id="loveMessage"></p>
<p>From your loving <span id="senderName"></span> with all my heart! 😘</p>
<button onclick="backToForm()">Create Another</button>
</div>
<audio id="softMusic" loop>
<source src="https://www.soundjay.com/misc/sounds/bell-ringing-05.wav" type="audio/wav"> <!-- Placeholder soft music; replace with a real lovey-dovey track URL -->
Your browser does not support the audio element.
</audio>
</div>
<script>
// Generate floating hearts
function createHearts(containerId) {
const container = document.getElementById(containerId);
for (let i = 0; i < 20; i++) {
const heart = document.createElement('div');
heart.className = 'heart';
heart.innerHTML = '💖';
heart.style.left = Math.random() * 100 + '%';
heart.style.animationDelay = Math.random() * 5 + 's';
container.appendChild(heart);
}
}
createHearts('hearts');
createHearts('hearts2');
// Add kawaii elements
const kawaiiEmojis = ['🌸', '🐾', '🍭', '🦄'];
function addKawaii(containerId) {
const container = document.getElementById(containerId);
for (let i = 0; i < 4; i++) {
const kawaii = document.createElement('div');
kawaii.className = 'kawaii';
kawaii.innerHTML = kawaiiEmojis[i];
container.appendChild(kawaii);
}
}
addKawaii('kawaii');
addKawaii('kawaii2');
function createNote() {
const sender = document.getElementById('sender').value.trim();
const recipient = document.getElementById('recipient').value.trim();
const message = document.getElementById('message').value.trim();
if (!sender || !recipient || !message) {
alert('Please fill in all fields with love!');
return;
}
document.getElementById('senderName').textContent = sender;
document.getElementById('recipientName').textContent = recipient;
document.getElementById('loveMessage').textContent = message;
document.querySelector('.form-container').style.display = 'none';
document.getElementById('messageDisplay').style.display = 'flex';
const music = document.getElementById('softMusic');
music.play();
}
function backToForm() {
document.getElementById('messageDisplay').style.display = 'none';
document.querySelector('.form-container').style.display = 'flex';
document.getElementById('softMusic').pause();
document.getElementById('softMusic').currentTime = 0;
document.getElementById('sender').value = '';
document.getElementById('recipient').value = '';
document.getElementById('message').value = '';
}
</script>
</body>
</html>Your JavaScript
'_'Your CSS
'_'