Skip to content

[Rocket Launch Countdown System] PRASHANT S BISHT #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
prashant2007-wq wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Rocket Launch Countdown System] PRASHANT S BISHT #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAST Rocket Launch Countdown</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="stars"></div>
<div class="stars-layer"></div>
<div class="outer-wrapper">
<header class="header-section">
<h1 class="main-title">SAST Rocket Launch Control Center</h1>
<h3 class="subtitle">Mission Countdown System</h3>
</header>
<section class="countdown-section">
<div class="countdown-wrapper">
<div class="count-box">
<span id="days">0</span>
<p>Days</p>
</div>
<div class="count-box">
<span id="hours">0</span>
<p>Hours</p>
</div>
<div class="count-box">
<span id="minutes">0</span>
<p>Minutes</p>
</div>
<div class="count-box">
<span id="seconds">0</span>
<p>Seconds</p>
</div>
</div>
</section>
<section class="launch-input-section">
<div class="input-container">
<input type="datetime-local" id="launchInput">
<button id="setLaunchBtn">Set Launch Time</button>
</div>
<h2 id="status" class="launch-status"></h2>
</section>
<footer class="footer-section">
<p>© 2025 SAST Rocket Research Division</p>
<p>Mission Control | Countdown Systems | Spaceflight Technology</p>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>
36 changes: 36 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
let launchTime = new Date("2025-12-31T23:59:59").getTime();
if (localStorage.getItem("customLaunch")) {
launchTime = parseInt(localStorage.getItem("customLaunch"));
}
const timer = setInterval(updateCountdown, 1000);
function updateCountdown() {
const now = new Date().getTime();
const diff = launchTime - now;
if (diff <= 0) {
document.getElementById("status").innerText = "LAUNCHED 🚀";
document.getElementById("status").style.color = "#00ffea";
document.getElementById("status").style.textShadow =
"0 0 20px #00faff, 0 0 40px #00faff, 0 0 60px #00faff";
document.getElementById("countdown").style.display = "none";
clearInterval(timer);
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").innerText = days;
document.getElementById("hours").innerText = hours;
document.getElementById("minutes").innerText = minutes;
document.getElementById("seconds").innerText = seconds;
}
document.getElementById("setLaunchBtn").addEventListener("click", () => {
const inputVal = document.getElementById("launchInput").value;
if (!inputVal) {
alert("Please select a valid date & time!");
return;
}
launchTime = new Date(inputVal).getTime();
localStorage.setItem("customLaunch", launchTime);
});
140 changes: 140 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,140 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Orbitron", sans-serif;
background: #000;
color: white;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.stars,
.stars-layer {
position: fixed;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
background-repeat: repeat;
z-index: -1;
}

.stars {
background-image: radial-gradient(white 1px, transparent 1px);
background-size: 3px 3px;
opacity: 0.4;
animation: moveStars 90s linear infinite;
}

.stars-layer {
background-image: radial-gradient(white 1px, transparent 1px);
background-size: 2px 2px;
opacity: 0.2;
animation: moveStars 140s linear infinite;
}

@keyframes moveStars {
from { transform: translate(0, 0); }
to { transform: translate(1000px, 1000px); }
}

.outer-wrapper {
width: 90%;
max-width: 900px;
text-align: center;
}

.header-section {
margin-bottom: 30px;
}

.main-title {
font-size: 2.7rem;
letter-spacing: 4px;
}

.subtitle {
font-size: 1.2rem;
opacity: 0.8;
margin-top: 8px;
}

.countdown-section {
margin-top: 30px;
}

.countdown-wrapper {
display: flex;
justify-content: center;
gap: 25px;
}

.count-box {
background: rgba(255, 255, 255, 0.07);
padding: 28px 30px;
width: 130px;
border-radius: 14px;
backdrop-filter: blur(8px);
box-shadow: 0px 0px 18px rgba(0, 150, 255, 0.2);
}

.count-box span {
font-size: 3rem;
font-weight: bold;
}

.count-box p {
margin-top: 6px;
font-size: 1rem;
opacity: 0.9;
}

.launch-input-section {
margin-top: 40px;
}

.input-container {
display: flex;
justify-content: center;
gap: 12px;
}

input[type="datetime-local"] {
padding: 12px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
}

button {
padding: 12px 18px;
border-radius: 8px;
background: #1e88e5;
color: white;
font-size: 1rem;
cursor: pointer;
}

button:hover {
background: #0b60b3;
}

.launch-status {
margin-top: 25px;
font-size: 2rem;
letter-spacing: 3px;
}

.footer-section {
margin-top: 50px;
font-size: 0.9rem;
opacity: 0.7;
}