Mayada

[salahnasserc-debug]

love-link/
│── index.html (Lock Screen)
│── home.html (Main Page + Countdown)
│── css/
│ └── style.css
│── js/
│ └── app.js

<title>Welcome Mayada</title>

Welcome Mayada ❤️

To enter, type our special date

Unlock ❤️

<script src="js/app.js"></script> <title>Especially For Mayada</title>

Especially For Mayada ❤️

My favorite person in the world

<div class="countdown">
  <div><span id="days">00</span><small>Days</small></div>
  <div><span id="hours">00</span><small>Hours</small></div>
  <div><span id="mins">00</span><small>Mins</small></div>
  <div><span id="secs">00</span><small>Secs</small></div>
</div>

<p class="footer">Since 01 Jan 1999 ❤️</p>

<script src="js/app.js"></script> * { box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body.bg {
margin: 0;
min-height: 100vh;
background: linear-gradient(135deg,#ff5f9e,#ff85c1);
display: flex;
justify-content: center;
align-items: center;
}

.card {
background: rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
border-radius: 20px;
padding: 30px;
text-align: center;
color: #fff;
width: 90%;
max-width: 360px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.card.big { max-width: 420px; }

h1 { margin-bottom: 10px; }

.subtitle { opacity: .9; margin-bottom: 20px; }

input {
width: 100%;
padding: 12px;
border-radius: 25px;
border: none;
outline: none;
margin: 15px 0;
text-align: center;
}

button {
background: #ff2f7d;
border: none;
color: white;
padding: 12px 30px;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
}

.countdown {
display: flex;
justify-content: space-between;
margin: 20px 0;
}

.countdown div {
background: rgba(255,255,255,0.25);
padding: 10px;
border-radius: 15px;
width: 22%;
}

.countdown span {
font-size: 22px;
font-weight: bold;
}

.footer {
margin-top: 10px;
font-size: 14px;
opacity: .9;
}
// Unlock
function unlock() {
const correct = "01011999";
const input = document.getElementById("pass").value;

if (input === correct) {
localStorage.setItem("unlocked", "yes");
window.location.href = "home.html";
} else {
alert("Wrong date 💔");
}
}

// Auto redirect if unlocked
if (localStorage.getItem("unlocked") === "yes" && location.pathname.includes("index")) {
location.href = "home.html";
}

// Countdown
const targetDate = new Date("1999-01-01T00:00:00").getTime();

setInterval(() => {
if (!document.getElementById("days")) return;

const now = new Date().getTime();
const diff = Math.abs(now - targetDate);

document.getElementById("days").innerText = Math.floor(diff / (1000606024));
document.getElementById("hours").innerText = Math.floor((diff / (10006060)) % 24);
document.getElementById("mins").innerText = Math.floor((diff / (100060)) % 60);
document.getElementById("secs").innerText = Math.floor((diff / 1000) % 60);
}, 1000);

love-link/
│── index.html
│── home.html
│── message.html
│── gallery.html
│── css/style.css
│── js/app.js
│── assets/
│ ├── music.mp3
│ └── img1.jpg img2.jpg img3.jpg

<title>Welcome Mayada</title>

Welcome Mayada ❤️

Enter our special date

Unlock ❤️

<script src="js/app.js"></script> <title>Especially For Mayada</title>

Especially For Mayada ❤️

My favorite person in the world

0Days

0Hours

0Mins

0Secs

💌 Message 🖼 Gallery

🌙 Toggle Mode

<script src="js/app.js"></script> <title>Message</title>

💌 Message

From the first moment until now,
you’ve always been special ❤️
This page exists just for you.

⬅ Back

<title>Gallery</title>

🖼 Memories

⬅ Back

body.bg{ margin:0; min-height:100vh; background:linear-gradient(135deg,#ff5f9e,#ff85c1); display:flex; align-items:center; justify-content:center; font-family:sans-serif; }

.card{
background:rgba(255,255,255,.2);
backdrop-filter:blur(12px);
border-radius:20px;
padding:25px;
text-align:center;
color:white;
width:90%;
max-width:380px;
}

.big{max-width:450px;}

input,button,a{
width:100%;
padding:12px;
margin:10px 0;
border:none;
border-radius:25px;
text-decoration:none;
}

button,a{
background:#ff2f7d;
color:white;
cursor:pointer;
}

.countdown{
display:flex;
justify-content:space-between;
}

.countdown div{
background:rgba(255,255,255,.3);
padding:10px;
border-radius:15px;
width:22%;
}

.gallery img{
width:100%;
border-radius:15px;
margin:8px 0;
}

.dark{
background:linear-gradient(135deg,#1e1e2f,#3a3a5f);
}
function unlock(){
if(document.getElementById("pass").value==="01011999"){
localStorage.setItem("unlock","yes");
location.href="home.html";
}else alert("Wrong date 💔");
}

if(localStorage.getItem("unlock") && location.pathname.includes("index")){
location.href="home.html";
}

const target=new Date("1999-01-01").getTime();
setInterval(()=>{
if(!days)return;
let d=Math.abs(Date.now()-target);
days.innerText=Math.floor(d/86400000);
hours.innerText=Math.floor(d/3600000)%24;
mins.innerText=Math.floor(d/60000)%60;
secs.innerText=Math.floor(d/1000)%60;
},1000);

function toggleTheme(){
document.body.classList.toggle("dark");
}