titonova/index.html

## index.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Countdown</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
        background-image: url('https://images.unsplash.com/photo-1614850523459-c2f4c699c52e');
        background-size: cover;
        background-position: center;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Segoe UI', sans-serif;
        }
        .glass-container {
        background: rgba(255, 255, 255, 0.15);
        border-radius: 40px;
        backdrop-filter: blur(10px);
        padding: 4rem;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .neon-text {
        font-family: 'Orbitron', sans-serif;
        text-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 15px #0af;
        color: white;
        font-size: 5rem;
        font-weight: 700;
        }

        .neon-text-sub{
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 5px #0af, 0 0 10px green, 0 0 15px #0af;
            color: white;
            font-size: 5rem;
            font-weight: 700;
        }

        .header {
        background: linear-gradient(45deg, #f06, #0af);
        border: 2px solid #0af;
        padding: 10px 20px;
        border-radius: 10px;
        font-size: 2.5rem;
        margin-bottom: 1rem;
        }
        .progress-container {
        width: 100%;
        height: 10px;
        margin-top:50px;
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        overflow: hidden;
        }
        .progress-bar {
        height: 100%;
        background: linear-gradient(45deg, #f06, #0af);
        width: 0;
        }
        .floating-circles {
        pointer-events: none;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        }
        .circle {
        position: absolute;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.2);
        mix-blend-mode: overlay;
        animation: float 6s infinite linear;
        }
        .circle:nth-child(1) {
        left: 10%;
        top: 20%;
        animation-duration: 7s;
        }
        .circle:nth-child(2) {
        left: 30%;
        top: 60%;
        animation-duration: 6s;
        }
        .circle:nth-child(3) {
        left: 50%;
        top: 30%;
        animation-duration: 5s;
        }
        .circle:nth-child(4) {
        left: 70%;
        top: 80%;
        animation-duration: 8s;
        }
        @keyframes float {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-20px);
        }
        }
    </style>

    </head>
    <body>

    <div class="floating-circles">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>
    <audio autoplay loop>
        <source src="bg-music/1.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <div class="glass-container">
        <!--h1 class="header">X Days Left</h1-->
        <div id="countdown" class="neon-text text-4xl mt-4"></div>
        <div class="neon-text text-1xl mt-neon-text-sub " style="font-size:3rem; margin-top:1em"><em>You can do it!</em></div>
        <div class="progress-container">
        <div class="progress-bar" id="progress-bar"></div>
        </div>
    </div>

    <script>
        const countdownDate = new Date("April 1, 2024 00:00:00").getTime();

        function updateCountdown() {
        const now = new Date().getTime();
        const distance = countdownDate - now;
        const distanceInDays = distance / (1000 * 60 * 60 * 24);

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

        const progress = (1 - distance / (1000 * 60 * 60 * 24 * distanceInDays)) * 100;

        document.getElementById("countdown").innerHTML = `${days} days ${hours} hours left`;
        document.getElementById("progress-bar").style.width = `${progress}%`;
        }

        updateCountdown();
        setInterval(updateCountdown, 1000);
    </script>

    </body>
    </html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Countdown</title>
	<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Titillium+Web:wght@300;400;600;700&display=swap" rel="stylesheet">
	<style>
	body {
	background-image: url('https://images.unsplash.com/photo-1614850523459-c2f4c699c52e');
	background-size: cover;
	background-position: center;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Segoe UI', sans-serif;
	}
	.glass-container {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 40px;
	backdrop-filter: blur(10px);
	padding: 4rem;
	text-align: center;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	}
	.neon-text {
	font-family: 'Orbitron', sans-serif;
	text-shadow: 0 0 5px #0af, 0 0 10px #0af, 0 0 15px #0af;
	color: white;
	font-size: 5rem;
	font-weight: 700;
	}

	.neon-text-sub{
	font-family: 'Orbitron', sans-serif;
	text-shadow: 0 0 5px #0af, 0 0 10px green, 0 0 15px #0af;
	color: white;
	font-size: 5rem;
	font-weight: 700;
	}

	.header {
	background: linear-gradient(45deg, #f06, #0af);
	border: 2px solid #0af;
	padding: 10px 20px;
	border-radius: 10px;
	font-size: 2.5rem;
	margin-bottom: 1rem;
	}
	.progress-container {
	width: 100%;
	height: 10px;
	margin-top:50px;
	background-color: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
	overflow: hidden;
	}
	.progress-bar {
	height: 100%;
	background: linear-gradient(45deg, #f06, #0af);
	width: 0;
	}
	.floating-circles {
	pointer-events: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
	}
	.circle {
	position: absolute;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.2);
	mix-blend-mode: overlay;
	animation: float 6s infinite linear;
	}
	.circle:nth-child(1) {
	left: 10%;
	top: 20%;
	animation-duration: 7s;
	}
	.circle:nth-child(2) {
	left: 30%;
	top: 60%;
	animation-duration: 6s;
	}
	.circle:nth-child(3) {
	left: 50%;
	top: 30%;
	animation-duration: 5s;
	}
	.circle:nth-child(4) {
	left: 70%;
	top: 80%;
	animation-duration: 8s;
	}
	@keyframes float {
	0%, 100% {
	transform: translateY(0);
	}
	50% {
	transform: translateY(-20px);
	}
	}
	</style>

	</head>
	<body>

	<div class="floating-circles">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	</div>
	<audio autoplay loop>
	<source src="bg-music/1.mp3" type="audio/mpeg">
	Your browser does not support the audio element.
	</audio>
	<div class="glass-container">
	<!--h1 class="header">X Days Left</h1-->
	<div id="countdown" class="neon-text text-4xl mt-4"></div>
	<div class="neon-text text-1xl mt-neon-text-sub " style="font-size:3rem; margin-top:1em"><em>You can do it!</em></div>
	<div class="progress-container">
	<div class="progress-bar" id="progress-bar"></div>
	</div>
	</div>

	<script>
	const countdownDate = new Date("April 1, 2024 00:00:00").getTime();

	function updateCountdown() {
	const now = new Date().getTime();
	const distance = countdownDate - now;
	const distanceInDays = distance / (1000 * 60 * 60 * 24);

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

	const progress = (1 - distance / (1000 * 60 * 60 * 24 * distanceInDays)) * 100;

	document.getElementById("countdown").innerHTML = `${days} days ${hours} hours left`;
	document.getElementById("progress-bar").style.width = `${progress}%`;
	}

	updateCountdown();
	setInterval(updateCountdown, 1000);
	</script>

	</body>
	</html>