From 59393798d09b5cd59a5cb0929ca556557c109700 Mon Sep 17 00:00:00 2001 From: Prashant Date: Mon, 17 Nov 2025 10:40:36 +0530 Subject: [PATCH] feat: add rocket launch countdown timer UI and logic --- index.html | 51 +++++++++++++++++++ script.js | 36 ++++++++++++++ style.css | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 227 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7c43d4 --- /dev/null +++ b/index.html @@ -0,0 +1,51 @@ + + + + + + SAST Rocket Launch Countdown + + + +
+
+
+
+

SAST Rocket Launch Control Center

+

Mission Countdown System

+
+
+
+
+ 0 +

Days

+
+
+ 0 +

Hours

+
+
+ 0 +

Minutes

+
+
+ 0 +

Seconds

+
+
+
+
+
+ + +
+

+
+
+

© 2025 SAST Rocket Research Division

+

Mission Control | Countdown Systems | Spaceflight Technology

+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..76064be --- /dev/null +++ b/script.js @@ -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); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..7fb28e8 --- /dev/null +++ b/style.css @@ -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; +}