Space Travel Calculator: Time to Reach Mars & Planets

Final Area Calculator

/* — TASARIM AYNI KALDI — */
#full-width-tool {
width: 100%;
background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
coloration: #fff;
font-family: ‘Inter’, sans-serif;
padding: 40px 20px;
box-sizing: border-box;
border-top: 1px stable rgba(255,255,255,0.1);
border-bottom: 1px stable rgba(255,255,255,0.1);
place: relative;
overflow: hidden;
}

.vt-header {
text-align: heart;
margin-bottom: 40px;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.vt-header h2 {
margin: 0;
font-size: 32px;
font-weight: 900;
background: linear-gradient(90deg, #fff, #e879f9);
-webkit-background-clip: textual content;
-webkit-text-fill-color: clear;
text-transform: uppercase;
letter-spacing: 1px;
}
.vt-header p {
coloration: #cbd5e1;
font-size: 16px;
margin-top: 10px;
}

/* KAYDIRMALI ALAN */
.selection-wrapper {
margin-bottom: 40px;
padding: 0 10px;
}

.area-title {
font-size: 14px;
coloration: #d8b4fe;
font-weight: daring;
text-transform: uppercase;
margin-bottom: 15px;
letter-spacing: 1.5px;
margin-left: 5px;
}

.scroll-container {
show: flex;
hole: 20px;
overflow-x: auto;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
scrollbar-width: skinny;
scrollbar-color: #a855f7 #1e1b4b;
-webkit-overflow-scrolling: contact;
align-items: flex-start;
}

.scroll-container::-webkit-scrollbar { top: 6px; }
.scroll-container::-webkit-scrollbar-track { background: #1e1b4b; border-radius: 3px; }
.scroll-container::-webkit-scrollbar-thumb { background: #a855f7; border-radius: 3px; }

/* KARTLAR */
.select-card {
flex: 0 0 auto;
width: 150px;
background: rgba(255,255,255,0.05);
border: 1px stable rgba(255,255,255,0.1);
border-radius: 16px;
padding: 20px 15px;
text-align: heart;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
user-select: none;
place: relative;
overflow: hidden;
}

.select-card:hover {
background: rgba(255,255,255,0.1);
rework: translateY(-5px);
}

.select-card.lively {
background: rgba(124, 58, 237, 0.2);
border-color: #d8b4fe;
box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
rework: scale(1.05);
}

.card-icon { font-size: 36px; margin-bottom: 12px; show: block; }
.card-title { font-size: 16px; font-weight: daring; coloration: #fff; show: block; }
.card-sub { font-size: 12px; coloration: #94a3b8; margin-top: 5px; show: block; }

/* BUTON */
.btn-area {
text-align: heart;
margin-top: 20px;
margin-bottom: 20px;
}

.neon-btn {
padding: 22px 60px;
background: linear-gradient(90deg, #9333ea 0%, #db2777 100%);
coloration: #ffffff;
font-size: 18px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(219, 39, 119, 0.6), 0 0 40px rgba(147, 51, 234, 0.4);
place: relative;
z-index: 2;
}

.neon-btn:hover {
rework: scale(1.05);
box-shadow: 0 0 30px rgba(219, 39, 119, 0.8), 0 0 60px rgba(147, 51, 234, 0.6);
}
.neon-btn:lively { rework: scale(0.95); }

/* LOADER */
.loader-wrapper {
show: none;
text-align: heart;
padding: 30px;
}

.rocket-spinner {
font-size: 60px;
show: inline-block;
animation: orbit 1s infinite linear;
}

@keyframes orbit {
from { rework: rotate(0deg) translateX(5px) rotate(0deg); }
to { rework: rotate(360deg) translateX(5px) rotate(-360deg); }
}

.loading-text {
margin-top: 15px;
font-size: 14px;
coloration: #e879f9;
font-weight: daring;
letter-spacing: 2px;
animation: pulse 1s infinite;
}

@keyframes pulse { 0% {opacity:0.6;} 50% {opacity:1;} 100% {opacity:0.6;} }

/* SONUÇ */
.result-container {
show: none;
max-width: 800px;
margin: 30px auto 0 auto;
background: rgba(0,0,0,0.3);
border: 1px stable rgba(255,255,255,0.15);
border-radius: 20px;
padding: 40px;
text-align: heart;
animation: slideUp 0.8s ease-out;
}

@keyframes slideUp {
from { opacity: 0; rework: translateY(30px); }
to { opacity: 1; rework: translateY(0); }
}

.res-big-time {
font-size: 48px;
font-weight: 900;
margin: 15px 0;
background: linear-gradient(to proper, #fff, #f0abfc);
-webkit-background-clip: textual content;
-webkit-text-fill-color: clear;
line-height: 1.1;
}

.res-desc { font-size: 18px; coloration: #cbd5e1; line-height: 1.6; }
.res-icon { font-size: 50px; margin-bottom: 10px; show: block; }

let selDest = 0;
let selSpeed = 0;

perform decide(el, sort, val) {
let contId = sort === ‘dest’ ? ‘dest-container’ : ‘spd-container’;
let cont = doc.getElementById(contId);
let playing cards = cont.getElementsByClassName(‘select-card’);

for (let c of playing cards) c.classList.take away(‘lively’);
el.classList.add(‘lively’);

if (sort === ‘dest’) selDest = val;
else selSpeed = val;
}

perform startSequence() {
if (selDest === 0 || selSpeed === 0) {
alert(“Please choose a Vacation spot and a Automobile first!”);
return;
}

// Butonu Gizle
doc.getElementById(“action-area”).model.show = “none”;
doc.getElementById(“final-result”).model.show = “none”;

// Animasyonu Başlat
doc.getElementById(“loader-area”).model.show = “block”;

// 3 saniye bekle
setTimeout(perform() {
calculateMath();
}, 3000);
}

perform calculateMath() {
let h = selDest / selSpeed;
let t = “”;
let n = “”;

if (h < 24) {
t = (Math.spherical(h * 10) / 10) + " Hours";
n = "Quick journey. Don't overlook snacks!";
} else if (h 1000000) {
t = (Math.spherical(y / 1000000 * 100) / 100) + ” Million Years”;
n = “Civilizations will vanish earlier than you arrive.”;
} else {
t = new Intl.NumberFormat(‘en-US’).format(Math.spherical(y * 100) / 100) + ” Years”;
if (y > 80) n = “This exceeds a human lifespan. Cryogenic sleep required.”;
else n = “A lifetime journey among the many stars.”;
}
}

// Işık hızı ve Yürüme için özel mesajlar
if (selSpeed > 1000000000) {
if (selDest < 500000) n = "On the spot Arrival!";
else n = "Even mild takes time within the huge universe.";
}

if (selSpeed 384400) {
n = “You may want a brand new pair of footwear… and immortality.”;
}

doc.getElementById(“loader-area”).model.show = “none”;

const resDiv = doc.getElementById(“final-result”);
const timeDiv = doc.getElementById(“res-time”);
const noteDiv = doc.getElementById(“res-note”);

timeDiv.innerText = t;
noteDiv.innerText = n;
resDiv.model.show = “block”;

// Otomatik Kaydır
resDiv.scrollIntoView({ habits: ‘clean’, block: ‘heart’ });
}

perform resetTool() {
doc.getElementById(“final-result”).model.show = “none”;
doc.getElementById(“action-area”).model.show = “block”;
doc.getElementById(“full-width-tool”).scrollIntoView({ habits: ‘clean’, block: ‘begin’ });
}

This content material was initially revealed on %Area Journey Calculator: Time to Attain Mars & Planets% by YourSiteName.

Source link