Telegram-канал movie_mvp - هوش مصنوعی | تکنولوژی: Unsorted

هوش مصنوعی | تکنولوژی

09 Jul 2024 10:14

🤍 تولدشو خاص تبریک بگو

⚪️ این کد یک روز شمار تولده که تاریخ تولد یک نفر بهش میدین و به صورت معکوس بر میگرده تا به روز تولدش برسه میتونید عکسشو بکراند بزارین و یک آهنگ هم تنظیم کنین روز تولدش پخش بشه حتی تا ثانیه هم میشه تنظیم کرد

✅ کد مورد نیاز :

html css js

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>شمارش معکوس تولد</title> // تایتل سایت اسمشو بزارین
<style>
body {
background-image: url('IMG_20240704_231102_666.jpg'); // عکس بکراند
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: white;
text-align: center;
font-family: 'Arial', sans-serif;
flex-direction: column;
}
.heart-container {
position: relative;
width: 200px;
height: 200px;
}
.heart {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: none;
stroke: pink;
stroke-width: 10;
}
.progress {
stroke: red;
stroke-linecap: round;
stroke-dasharray: 629; /* Circumference of the heart path */
stroke-dashoffset: 629;
transition: stroke-dashoffset 1s linear;
}
#countdown {
font-size: 2em;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="heart-container">
<svg viewBox="0 0 100 100" class="heart">
<path id="heart-path" d="M50,30
A20,20 0 0,1 90,50
Q90,80 50,90
Q10,80 10,50
A20,20 0 0,1 50,30 Z" />
<path id="progress-path" class="progress" d="M50,30
A20,20 0 0,1 90,50
Q90,80 50,90
Q10,80 10,50
A20,20 0 0,1 50,30 Z" />
</svg>
</div>
<div id="countdown">
<div><span id="days"></span> روز</div>
<div><span id="hours"></span> ساعت</div>
<div><span id="minutes"></span> دقیقه</div>
<div><span id="seconds"></span> ثانیه</div>
</div>
<audio id="birthday-song" src="" preload="auto"></audio> // آهنگی روز تولد پخش بشه
<script>
const countdown = () => {
const birthDate = new Date('2024-08-05T00:00:00'); //تاریخ تولد به میلادی
const now = new Date();
const diff = birthDate - now;

if (diff <= 0) {
document.getElementById('birthday-song').play();
document.getElementById('countdown').innerHTML = 'تولدت مبارک گوگولی'; // متن تبریک
document.getElementById('progress-path').style.strokeDashoffset = 0;
return;
}

const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;

const totalSeconds = (birthDate - new Date('2023-07-09T00:00:00')) / 1000;
const elapsedSeconds = totalSeconds - (diff / 1000);
const progress = (elapsedSeconds / totalSeconds) * 629;
document.getElementById('progress-path').style.strokeDashoffset = 629 - progress;
}

setInterval(countdown, 1000);
countdown();
</script>
</body>
</html>