andrew/artemis-moon-mission
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Artemis moon mission overview site

Browse Source
This commit is contained in:
Hermes Agent
2026-05-03 07:29:14 +00:00
commit e8bbebe04c
3 changed files with 706 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Dockerfile
+3
View File
@@ -0,0 +1,3 @@
FROM nginx:alpine
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80
README.md
+8
View File
@@ -0,0 +1,8 @@
# Artemis Moon Mission Overview
A single-page overview of NASA's Artemis program, built as a static site for end-to-end pipeline testing:
- local artifact creation
- Git push to Gitea
- deploy from repo into Coolify
- publish on a holdetech subdomain
index.html
+695
View File
@@ -0,0 +1,695 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Artemis — Return to the Moon</title>
<meta name="description" content="A one-page visual overview of NASA's Artemis moon mission program." />
<style>
:root {
--bg: #060816;
--bg-soft: rgba(14, 19, 42, 0.78);
--panel: rgba(17, 25, 56, 0.72);
--panel-strong: rgba(20, 31, 71, 0.9);
--text: #eef3ff;
--muted: #9ba7cf;
--line: rgba(151, 173, 255, 0.18);
--glow: #81a9ff;
--accent: #e2ecff;
--accent-2: #8fd3ff;
--gold: #ffd27d;
--shadow: 0 30px 80px rgba(2, 6, 23, 0.58);
--radius: 24px;
--max: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
color: var(--text);
background:
radial-gradient(circle at 20% 20%, rgba(104, 132, 255, 0.22), transparent 0 28%),
radial-gradient(circle at 80% 16%, rgba(143, 211, 255, 0.16), transparent 0 22%),
radial-gradient(circle at 50% 100%, rgba(92, 70, 169, 0.22), transparent 0 24%),
linear-gradient(180deg, #04060f 0%, #050916 38%, #081126 100%);
min-height: 100vh;
line-height: 1.5;
overflow-x: hidden;
}
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(circle at 15% 30%, rgba(255,255,255,.85) 0 1px, transparent 1.2px),
radial-gradient(circle at 67% 12%, rgba(255,255,255,.6) 0 1px, transparent 1.2px),
radial-gradient(circle at 80% 74%, rgba(255,255,255,.7) 0 1px, transparent 1.2px),
radial-gradient(circle at 40% 82%, rgba(255,255,255,.45) 0 1px, transparent 1.2px),
radial-gradient(circle at 88% 38%, rgba(255,255,255,.72) 0 1px, transparent 1.2px),
radial-gradient(circle at 31% 11%, rgba(255,255,255,.5) 0 1px, transparent 1.2px);
opacity: .6;
}
a { color: inherit; text-decoration: none; }
.wrap {
width: min(calc(100% - 32px), var(--max));
margin: 0 auto;
position: relative;
z-index: 1;
}
.topbar {
position: sticky;
top: 16px;
z-index: 10;
margin: 16px auto 0;
width: min(calc(100% - 32px), var(--max));
backdrop-filter: blur(18px);
background: rgba(6, 8, 22, 0.48);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 999px;
box-shadow: var(--shadow);
}
.topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 18px;
}
.brand {
display: flex;
align-items: center;
gap: 12px;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.28em;
color: var(--muted);
}
.moon {
width: 16px;
height: 16px;
border-radius: 50%;
background: radial-gradient(circle at 38% 35%, #fff 0 12%, #d4deff 13%, #7c91cb 66%, #4c5f98 100%);
box-shadow: 0 0 22px rgba(170, 192, 255, 0.65);
}
nav {
display: flex;
gap: 18px;
flex-wrap: wrap;
justify-content: flex-end;
font-size: 0.9rem;
color: #d8e2ff;
}
nav a {
opacity: 0.78;
transition: opacity .2s ease, transform .2s ease;
}
nav a:hover,
nav a:focus-visible {
opacity: 1;
transform: translateY(-1px);
outline: none;
}
.hero {
padding: 88px 0 52px;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 30px;
align-items: end;
}
.eyebrow {
display: inline-flex;
gap: 10px;
align-items: center;
padding: 10px 14px;
background: rgba(123, 155, 255, 0.12);
border: 1px solid rgba(162, 188, 255, 0.16);
border-radius: 999px;
color: #dbe6ff;
font-size: 0.76rem;
letter-spacing: 0.18em;
text-transform: uppercase;
}
h1 {
margin: 20px 0 16px;
font-size: clamp(3.2rem, 9vw, 6.7rem);
line-height: 0.92;
letter-spacing: -0.04em;
font-weight: 700;
text-wrap: balance;
}
.lede {
max-width: 43rem;
color: #d3defd;
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 28px;
}
.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.12);
transition: transform .25s ease, border-color .25s ease, background .25s ease;
font-size: 0.95rem;
}
.button:hover,
.button:focus-visible {
transform: translateY(-2px);
outline: none;
}
.button.primary {
background: linear-gradient(135deg, rgba(228, 237, 255, 0.97), rgba(139, 211, 255, 0.95));
color: #061225;
border-color: rgba(255,255,255,0.44);
box-shadow: 0 18px 35px rgba(116, 172, 255, 0.28);
}
.button.secondary {
color: var(--accent);
background: rgba(255,255,255,0.03);
}
.hero-side {
min-height: 420px;
border-radius: 34px;
border: 1px solid rgba(255,255,255,.08);
background:
radial-gradient(circle at 55% 36%, rgba(255,255,255,0.95) 0 11%, rgba(214, 222, 255, 0.9) 11.2%, rgba(141, 168, 223, 0.46) 33%, rgba(8, 12, 29, 0) 33.2%),
radial-gradient(circle at 58% 30%, rgba(255, 210, 125, 0.18), rgba(255, 210, 125, 0) 28%),
linear-gradient(180deg, rgba(12, 18, 43, 0.18), rgba(6,10,26,0.78)),
linear-gradient(140deg, rgba(27, 34, 71, 0.94), rgba(10, 16, 39, 0.96));
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
padding: 24px;
}
.hero-side::after {
content: "";
position: absolute;
inset: auto -6% -12% auto;
width: 88%;
height: 26%;
background: linear-gradient(180deg, rgba(180, 189, 224, 0.06), rgba(180, 189, 224, 0.28));
border-radius: 100% 0 0 0;
transform: rotate(-6deg);
filter: blur(0.2px);
}
.orbiter {
position: absolute;
width: 112px;
aspect-ratio: 1;
top: 22%;
right: 18%;
border-radius: 50%;
border: 1px dashed rgba(255,255,255,.22);
animation: orbit 11s linear infinite;
transform-origin: center;
}
.orbiter::before {
content: "";
position: absolute;
width: 18px;
height: 18px;
top: -9px;
left: 50%;
margin-left: -9px;
border-radius: 50%;
background: linear-gradient(135deg, #ffffff, #8ecbff);
box-shadow: 0 0 18px rgba(170, 208, 255, 0.8);
}
.hero-side .caption {
position: absolute;
left: 24px;
bottom: 22px;
right: 24px;
display: flex;
justify-content: space-between;
gap: 16px;
align-items: end;
color: var(--muted);
font-size: 0.9rem;
}
.hero-side strong {
display: block;
color: #f5f8ff;
font-size: 1.05rem;
margin-top: 4px;
}
.grid {
display: grid;
gap: 18px;
}
.stats {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 10px 0 28px;
}
.card {
background: var(--panel);
backdrop-filter: blur(20px);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.stat {
padding: 22px;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.stat .label {
color: var(--muted);
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.stat .value {
font-size: clamp(1.8rem, 4vw, 2.9rem);
line-height: 1;
margin: 10px 0;
}
.stat p {
margin: 0;
color: #d3ddfb;
font-size: 0.96rem;
}
section {
padding: 24px 0;
}
.section-head {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: end;
margin-bottom: 20px;
}
h2 {
margin: 0;
font-size: clamp(2rem, 5vw, 3.2rem);
line-height: 1;
letter-spacing: -0.03em;
}
.section-head p,
.copy {
color: #cfdbff;
max-width: 40rem;
margin: 0;
font-size: 1rem;
line-height: 1.8;
}
.mission-layout {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 18px;
}
.mission-copy,
.mission-callout,
.timeline,
.stack,
.footer-card {
padding: 26px;
}
.mission-copy .copy + .copy { margin-top: 16px; }
.mission-callout {
background: linear-gradient(180deg, rgba(18, 31, 73, 0.9), rgba(13, 22, 50, 0.86));
}
.callout-label {
color: var(--gold);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.76rem;
margin-bottom: 12px;
}
.callout-quote {
font-size: 1.4rem;
line-height: 1.35;
margin-bottom: 16px;
}
.timeline-list {
list-style: none;
margin: 20px 0 0;
padding: 0 0 0 20px;
position: relative;
}
.timeline-list::before {
content: "";
position: absolute;
left: 4px;
top: 8px;
bottom: 8px;
width: 1px;
background: linear-gradient(180deg, rgba(143, 211, 255, 0.7), rgba(143, 211, 255, 0.05));
}
.timeline-list li {
position: relative;
padding: 0 0 26px 22px;
}
.timeline-list li:last-child { padding-bottom: 0; }
.timeline-list li::before {
content: "";
position: absolute;
left: -2px;
top: 8px;
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle, #ffffff 0 28%, #89b5ff 29% 100%);
box-shadow: 0 0 20px rgba(121, 167, 255, 0.5);
}
.kicker {
color: var(--gold);
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.16em;
margin-bottom: 8px;
}
.timeline-list h3,
.stack h3 {
margin: 0 0 6px;
font-size: 1.35rem;
}
.timeline-list p,
.stack p,
.footer-card p {
margin: 0;
color: #d1dbfb;
font-size: 0.98rem;
line-height: 1.7;
}
.stack-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 18px;
}
.stack-item {
padding: 18px;
border-radius: 20px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
min-height: 210px;
}
.stack-item .mini {
color: #98aee4;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
display: block;
margin-bottom: 14px;
}
.footer-card {
margin: 26px 0 64px;
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
background: linear-gradient(135deg, rgba(18, 28, 61, 0.92), rgba(13, 17, 38, 0.94));
}
.footer-card strong {
display: block;
font-size: 1.5rem;
margin-bottom: 10px;
}
.tagline {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border-radius: 999px;
background: rgba(255,255,255,.04);
color: #dce7ff;
border: 1px solid rgba(255,255,255,.1);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: .8rem;
}
@keyframes orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@media (max-width: 980px) {
.hero,
.mission-layout,
.footer-card,
.stats,
.stack-grid {
grid-template-columns: 1fr;
}
.hero { padding-top: 56px; }
.hero-side { min-height: 320px; }
.section-head { align-items: start; flex-direction: column; }
}
@media (max-width: 640px) {
.topbar { border-radius: 28px; }
.topbar-inner { align-items: start; flex-direction: column; }
nav { justify-content: start; gap: 12px 16px; }
.hero-side { min-height: 280px; }
.mission-copy,
.mission-callout,
.timeline,
.stack,
.footer-card,
.stat { padding: 20px; }
.callout-quote { font-size: 1.2rem; }
.button { width: 100%; }
.hero-actions { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.orbiter,
.button,
nav a { animation: none !important; transition: none !important; }
}
</style>
</head>
<body>
<header class="topbar">
<div class="topbar-inner">
<div class="brand"><span class="moon" aria-hidden="true"></span> Artemis Program</div>
<nav aria-label="Section navigation">
<a href="#mission">Mission</a>
<a href="#timeline">Timeline</a>
<a href="#stack">Flight Stack</a>
</nav>
</div>
</header>
<main class="wrap">
<section class="hero">
<div>
<div class="eyebrow">NASA · Artemis · Moon to Mars</div>
<h1>Return to the Moon.<br />Build the road to Mars.</h1>
<p class="lede">
Artemis is NASA’s long-horizon lunar campaign: a series of missions designed to return astronauts to the Moon,
establish a sustained human presence near the lunar south pole, and turn that experience into the operational
backbone for eventual crewed missions deeper into space.
</p>
<div class="hero-actions">
<a class="button primary" href="#timeline">Explore the timeline</a>
<a class="button secondary" href="#stack">See the mission stack</a>
</div>
</div>
<div class="hero-side card" aria-label="Illustrative lunar scene">
<div class="orbiter" aria-hidden="true"></div>
<div class="caption">
<div>
Program focus
<strong>Sustained lunar exploration</strong>
</div>
<div>
Strategic arc
<strong>Moon → Mars</strong>
</div>
</div>
</div>
</section>
<section class="stats grid" aria-label="Program highlights">
<article class="card stat">
<div class="label">First flight</div>
<div class="value">Artemis I</div>
<p>Uncrewed Orion mission that validated the Space Launch System and deep-space operations around the Moon.</p>
</article>
<article class="card stat">
<div class="label">Crewed return</div>
<div class="value">Artemis II</div>
<p>Planned crewed lunar flyby intended to prove life support, navigation, and crew systems beyond low Earth orbit.</p>
</article>
<article class="card stat">
<div class="label">Surface ambition</div>
<div class="value">South Pole</div>
<p>Future surface missions aim toward regions rich in scientific value and potential water ice resources.</p>
</article>
<article class="card stat">
<div class="label">Long game</div>
<div class="value">Mars Prep</div>
<p>Every lunar mission doubles as a rehearsal for logistics, habitation, and endurance in deeper space.</p>
</article>
</section>
<section id="mission">
<div class="section-head">
<h2>The mission in one page</h2>
<p>Artemis is more than a flags-and-footprints return. It is a systems program combining launch, crew transport, lunar infrastructure, and human surface operations into a repeatable exploration pipeline.</p>
</div>
<div class="mission-layout">
<article class="card mission-copy">
<p class="copy">
The program’s central promise is continuity. Apollo proved that humans could reach the Moon; Artemis is built to prove
that humans can keep coming back, operate longer, and use the lunar environment as a training ground for much harder missions.
</p>
<p class="copy">
That means pairing heavy-lift launch capability with a crew capsule for deep space, commercial lunar landing systems,
surface suits and mobility, and the gradual build-out of cislunar infrastructure such as Gateway. In practice, Artemis
is part exploration campaign, part engineering testbed, and part strategic bridge to the broader Moon-to-Mars architecture.
</p>
</article>
<aside class="card mission-callout">
<div class="callout-label">Why it matters</div>
<div class="callout-quote">“Live, work, and learn on and around the Moon — so the next giant leap is sustainable, not symbolic.”</div>
<p class="copy">Artemis links science, technology maturation, and operational experience into one continuous lunar program rather than a one-off spectacle.</p>
</aside>
</div>
</section>
<section id="timeline">
<div class="section-head">
<h2>Program arc</h2>
<p>Each major Artemis phase increases confidence, complexity, and permanence — from proving the hardware to rehearsing long-duration deep-space operations.</p>
</div>
<article class="card timeline">
<ol class="timeline-list">
<li>
<div class="kicker">Phase 01</div>
<h3>Artemis I — uncrewed validation</h3>
<p>Launch SLS and Orion together, perform a lunar mission without crew, and validate the integrated stack in deep space.</p>
</li>
<li>
<div class="kicker">Phase 02</div>
<h3>Artemis II — crew around the Moon</h3>
<p>Send astronauts on a lunar flyby to prove life-support, mission planning, navigation, and human operations beyond low Earth orbit.</p>
</li>
<li>
<div class="kicker">Phase 03</div>
<h3>Artemis III — lunar surface return</h3>
<p>Land astronauts on the Moon again using a commercial human landing system and begin the next era of crewed surface exploration.</p>
</li>
<li>
<div class="kicker">Phase 04</div>
<h3>Gateway, logistics, and sustained presence</h3>
<p>Expand from individual missions toward an operating cadence that supports extended lunar stays, reusable infrastructure, and deeper international/commercial participation.</p>
</li>
</ol>
</article>
</section>
<section id="stack">
<div class="section-head">
<h2>Flight stack</h2>
<p>Artemis succeeds only if multiple systems mature together. The architecture is intentionally distributed: no single vehicle is the whole mission.</p>
</div>
<article class="card stack">
<div class="stack-grid">
<div class="stack-item">
<span class="mini">Launch</span>
<h3>Space Launch System</h3>
<p>NASA’s heavy-lift rocket provides the power needed to send Orion and other large payloads beyond Earth orbit.</p>
</div>
<div class="stack-item">
<span class="mini">Crew</span>
<h3>Orion</h3>
<p>The deep-space crew capsule is designed for lunar-distance missions with life support, re-entry protection, and mission endurance beyond LEO.</p>
</div>
<div class="stack-item">
<span class="mini">Lunar ops</span>
<h3>Landing + surface systems</h3>
<p>Commercial landers, upgraded suits, and surface tools make actual lunar operations — not just transport — the center of the program.</p>
</div>
</div>
</article>
</section>
<section>
<article class="card footer-card">
<div>
<strong>Artemis is the rehearsal for living beyond Earth.</strong>
<p>Its value is not only getting back to the Moon — it is learning how to keep going farther with repeatable systems, longer mission durations, and infrastructure that outlasts a single launch.</p>
</div>
<div class="tagline">One page · Full pipeline test</div>
</article>
</section>
</main>
</body>
</html>