Love

<?xml encoding="utf-8" ?><p>&lt;!DOCTYPE html&gt;</p><p>&lt;html lang="ar"&gt;</p><p>&lt;head&gt;</p><p>&nbsp; &nbsp; &lt;meta charset="UTF-8"&gt;</p><p>&nbsp; &nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</p><p>&nbsp; &nbsp; &lt;title&gt;&#1605;&#1601;&#1575;&#1580;&#1571;&#1577; &#1604;&#1604;&#1610;&#1583;&#1585;&lt;/title&gt;</p><p>&nbsp; &nbsp; &lt;style&gt;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; body {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #fff0f3;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: flex;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex-direction: column;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; align-items: center;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; justify-content: center;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100vh;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin: 0;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; overflow: hidden;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; .container {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: white;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 30px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 20px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; box-shadow: 0 10px 25px rgba(255, 75, 110, 0.2);</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; max-width: 90%;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; h1 { color: #ff4b6e; margin-bottom: 20px; font-size: 22px; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; input {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 12px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 80%;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 2px solid #ffb3c1;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 10px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin-bottom: 15px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; outline: none;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; button {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ff4b6e;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: white;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: none;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 12px 25px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 25px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cursor: pointer;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 16px;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-weight: bold;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: 0.3s;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; button:hover { background-color: #ff758f; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; #content { display: none; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; .heart { color: #ff4b6e; font-size: 50px; margin: 20px; animation: beat 1s infinite; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; @keyframes beat {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 0%, 100% { transform: scale(1); }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 50% { transform: scale(1.2); }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; &nbsp; &nbsp; .timer { font-size: 18px; color: #555; margin-top: 15px; font-weight: bold; }</p><p>&nbsp; &nbsp; &lt;/style&gt;</p><p>&lt;/head&gt;</p><p>&lt;body&gt;</p><p>&nbsp;</p><p>&lt;div id="login-box" class="container"&gt;</p><p>&nbsp; &nbsp; &lt;h1&gt;&#1610;&#1608;&#1605; &#1605;&#1575;&#1578;&#1602;&#1576;&#1604;&#1606;&#1575; &#1575;&#1604;&#1610;&#1608;&#1605; &#1583;&#1607; &#1607;&#1601;&#1590;&#1604; &#1605;&#1588; &#1606;&#1575;&#1587;&#1610;&#1607; &#10084;&#65039;&lt;/h1&gt;</p><p>&nbsp; &nbsp; &lt;p&gt;&#1575;&#1603;&#1578;&#1576;&#1610; &#1575;&#1604;&#1578;&#1575;&#1585;&#1610;&#1582; &#1607;&#1606;&#1575; (&#1610;&#1608;&#1605;/&#1588;&#1607;&#1585;)&lt;/p&gt;</p><p>&nbsp; &nbsp; &lt;input type="text" id="pass" placeholder="&#1605;&#1579;&#1604;&#1575;&#1611;: 1/1"&gt;</p><p>&nbsp; &nbsp; &lt;br&gt;</p><p>&nbsp; &nbsp; &lt;button onclick="check()"&gt;&#1583;&#1608;&#1587;&#1610; &#1610;&#1575; &#1581;&#1578;&#1607; &#1605;&#1606;&#1610; &#10084;&#65039;&lt;/button&gt;</p><p>&lt;/div&gt;</p><p>&nbsp;</p><p>&lt;div id="content" class="container"&gt;</p><p>&nbsp; &nbsp; &lt;div class="heart"&gt;&#10084;&#65039;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;h1 id="msg"&gt;&lt;/h1&gt;</p><p>&nbsp; &nbsp; &lt;div class="timer" id="timer"&gt;&lt;/div&gt;</p><p>&nbsp; &nbsp; &lt;br&gt;</p><p>&nbsp; &nbsp; &lt;p style="color: #ff4b6e; font-weight: bold;"&gt;&#1576;&#1589;&#1610; &#1610;&#1575; &#1604;&#1610;&#1583;&#1585; &#1602;&#1604;&#1576; &#1581;&#1605;&#1608;&#1603;&#1588;&#1577;..&lt;/p&gt;</p><p>&nbsp; &nbsp; &lt;p&gt;&#1575;&#1604;&#1610;&#1608;&#1605; &#1583;&#1607; &#1603;&#1575;&#1606; &#1576;&#1583;&#1575;&#1610;&#1577; &#1571;&#1580;&#1605;&#1604; &#1581;&#1575;&#1580;&#1577; &#1601;&#1610; &#1581;&#1610;&#1575;&#1578;&#1610;&lt;/p&gt;</p><p>&lt;/div&gt;</p><p>&nbsp;</p><p>&lt;script&gt;</p><p>&nbsp; &nbsp; function check() {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; var p = document.getElementById('pass').value;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; if(p === "7/7" || p === "07/07" || p === "&#1639;/&#1639;") {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('login-box').style.display = 'none';</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('content').style.display = 'block';</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('msg').innerText = "&#1603;&#1604; &#1579;&#1575;&#1606;&#1610;&#1577; &#1608;&#1573;&#1581;&#1606;&#1575; &#1587;&#1608;&#1575; &#1610;&#1575; &#1604;&#1610;&#1583;&#1585; &#10084;&#65039;";</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; startTimer();</p><p>&nbsp; &nbsp; &nbsp; &nbsp; } else {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("&#1604;&#1575; &#1610;&#1575; &#1604;&#1610;&#1583;&#1585;.. &#1575;&#1601;&#1578;&#1603;&#1585;&#1610; &#1575;&#1604;&#1578;&#1575;&#1585;&#1610;&#1582; &#1589;&#1581;! &#128514;&#10084;&#65039;");</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }</p><p>&nbsp; &nbsp; }</p><p>&nbsp;</p><p>&nbsp; &nbsp; function startTimer() {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; var startDate = new Date("July 7, 2023 00:00:00").getTime();</p><p>&nbsp; &nbsp; &nbsp; &nbsp; setInterval(function() {</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var now = new Date().getTime();</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var diff = now - startDate;</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var days = Math.floor(diff / (1000 * 60 * 60 * 24));</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var mins = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var secs = Math.floor((diff % (1000 * 60)) / 1000);</p><p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('timer').innerHTML = "&#1576;&#1602;&#1575;&#1604;&#1610; &#1576;&#1581;&#1576;&#1603; &#1576;&#1602;&#1575;&#1604;&#1610;: &lt;br&gt;" + days + " &#1610;&#1608;&#1605; &#1608; " + hours + " &#1587;</p><p>&#1575;&#1593;&#1577; &#1608; " + mins + " &#1583;&#1602;&#1610;&#1602;&#1577; &#1608; " + secs + " &#1579;&#1575;&#1606;&#1610;&#1577;";</p><p>&nbsp; &nbsp; &nbsp; &nbsp; }, 1000);</p><p>&nbsp; &nbsp; }</p><p>&lt;/script&gt;</p><p>&nbsp;</p><p>&lt;/body&gt;</p><p>&lt;/html&gt;</p>