<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untuk Feby Sayang</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
padding: 20px;
transition: all 0.5s ease;
}
.container {
width: 100%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
overflow: hidden;
}
h1 {
color: #ff6b6b;
margin-bottom: 20px;
font-size: 28px;
}
.input-container {
margin: 30px 0;
}
input {
padding: 12px 20px;
border: 2px solid #ff9a9e;
border-radius: 50px;
width: 100%;
max-width: 300px;
font-size: 16px;
outline: none;
margin-bottom: 15px;
text-align: center;
}
button {
background: linear-gradient(to right, #ff6b6b, #ff8e8e);
color: white;
border: none;
padding: 12px 30px;
border-radius: 50px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 7px 20px rgba(255, 107, 107, 0.6);
}
.hidden {
display: none;
}
.greeting {
font-size: 24px;
margin-bottom: 20px;
color: #ff6b6b;
font-weight: bold;
animation: fadeIn 1.5s;
}
.photo-gallery {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin: 30px 0;
}
.photo {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.photo:hover {
transform: scale(1.03);
}
.music-player {
margin-top: 30px;
background-color: #f8f8f8;
padding: 15px;
border-radius: 10px;
width: 100%;
}
.music-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 10px;
}
.date-display {
margin-top: 20px;
font-size: 18px;
color: #666;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.heart {
color: red;
font-size: 20px;
margin: 0 5px;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}
</style>
</head>
<body>
<div class="container" id="landing-page">
<h1>Masukkan Tanggal Jadian Kamu <span class="heart">❤</span></h1>
<div class="input-container">
<input type="text" id="anniversary-date" placeholder="DD-MM-YY" maxlength="8">
<button onclick="checkDate()">Masuk</button>
</div>
<p style="color: #888;">Masukan Tanggal-bulan-(2 angka terakhir tahun)</p>
</div>
<div class="container hidden" id="content-page">
<div class="greeting">
<p>Halo Feby Sayang, Semangat Yah! <span class="heart">❤</span></p>
</div>
<div class="date-display">
<p>Sejak: <span id="display-date">05-10-23</span></p>
</div>
<div class="photo-gallery">
<img src="img/1.jpg" alt="Couple smiling together at the beach during sunset with palm trees in
background" class="photo">
<img src="img/2.jpg" alt="Romantic dinner date with candlelight and wine glasses clinking
together" class="photo">
<img src="img/3.jpg" alt="Couple holding hands while walking through a park with autumn leaves
falling" class="photo">
<img src="img/4.jpg" alt="Celebration moment with cake and balloons for couple's anniversary"
class="photo">
</div>
<div class="music-player">
<p>Music Untuk Kita Berdua</p>
<iframe id="spotify-embed" style="border-radius:12px; margin-top:15px; display:none"
width="100%" height="152" frameBorder="0"
allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-
picture"
loading="lazy"></iframe>
<div class="music-controls">
<button onclick="loadSpotify()">🎵 Putar Spotify</button>
</div>
</div>
</div>
<script>
function checkDate() {
const inputDate = document.getElementById('anniversary-date').value;
const correctDate = '05-10-23';
if (inputDate === correctDate) {
document.getElementById('landing-page').classList.add('hidden');
document.getElementById('content-page').classList.remove('hidden');
document.getElementById('display-date').textContent = correctDate;
} else {
alert('Tanggal yang kamu masukkan salah, coba lagi ya!');
}
}
function loadSpotify() {
const embed = document.getElementById('spotify-embed');
embed.src = "https://open.spotify.com/embed/track/2ZzsUu74KQFwnkBIOryp0d?
utm_source=generator";
embed.style.display = 'block';
const controls = document.querySelector('.music-controls');
controls.innerHTML = '<p>🎵 Musik Spotify sedang diputar</p>';
}
// Optional: Count days together
function calculateDaysTogether(dateStr) {
const [day, month, year] = dateStr.split('-');
const anniversaryDate = new Date(20${year}-${month}-${day});
const today = new Date();
const diffTime = Math.abs(today - anniversaryDate);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
return diffDays;
}
// You can add this feature later by displaying the days count
// document.getElementById('days-count').textContent = calculateDaysTogether('05-10-23');
</script>
</body>
</html>
