Compare commits
1 Commits
main
...
improvemen
| Author | SHA1 | Date | |
|---|---|---|---|
| 5b4a057a00 |
30
.htaccess
Normal file
@@ -0,0 +1,30 @@
|
||||
# Atomaste Static Site
|
||||
Options -Indexes
|
||||
|
||||
# Redirect old broken URLs to homepage
|
||||
RedirectMatch 301 ^/custom-telescope-mirror-support.*$ /
|
||||
RedirectMatch 301 ^/product.*$ /
|
||||
RedirectMatch 301 ^/shop.*$ /
|
||||
|
||||
# Redirect to index.html as default
|
||||
DirectoryIndex index.html
|
||||
|
||||
# Enable GZIP compression
|
||||
<IfModule mod_deflate.c>
|
||||
AddOutputFilterByType DEFLATE text/html text/css application/javascript image/svg+xml
|
||||
</IfModule>
|
||||
|
||||
# Cache static assets
|
||||
<IfModule mod_expires.c>
|
||||
ExpiresActive On
|
||||
ExpiresByType image/png "access plus 1 month"
|
||||
ExpiresByType image/svg+xml "access plus 1 month"
|
||||
ExpiresByType text/css "access plus 1 week"
|
||||
</IfModule>
|
||||
|
||||
# Security Headers
|
||||
<IfModule mod_headers.c>
|
||||
Header set X-Content-Type-Options "nosniff"
|
||||
Header set X-Frame-Options "SAMEORIGIN"
|
||||
Header set Referrer-Policy "strict-origin-when-cross-origin"
|
||||
</IfModule>
|
||||
@@ -1,16 +0,0 @@
|
||||
# Gigabit Optique Fullum — CDR Deck (Reveal.js)
|
||||
|
||||
URLs (once deployed to Hostinger):
|
||||
- Gate: `https://atomaste.ca/decks/gigabit-optique-fullum-cdr/enter.html`
|
||||
- Deck: `https://atomaste.ca/decks/gigabit-optique-fullum-cdr/`
|
||||
|
||||
## Security note
|
||||
`enter.html` is a lightweight client-side code gate (not strong security). Use for "share link + code" only.
|
||||
|
||||
## To customize
|
||||
- Edit the access code in `enter.html` (`const CODE = ...`). Current: `stratosphere`.
|
||||
- Replace placeholders in `index.html`.
|
||||
- Add images/plots under `assets/` and reference with `./assets/...`.
|
||||
|
||||
## PDF export
|
||||
Open the deck and print to PDF (browser print) or use Reveal's built-in PDF mode.
|
||||
|
Before Width: | Height: | Size: 831 KiB |
|
Before Width: | Height: | Size: 813 KiB |
|
Before Width: | Height: | Size: 55 KiB |
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 811 KiB |
|
Before Width: | Height: | Size: 790 KiB |
|
Before Width: | Height: | Size: 470 KiB |
|
Before Width: | Height: | Size: 255 KiB |
|
Before Width: | Height: | Size: 2.0 MiB |
|
Before Width: | Height: | Size: 23 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 548 KiB |
|
Before Width: | Height: | Size: 46 KiB |
|
Before Width: | Height: | Size: 401 KiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 1.8 MiB |
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 1.7 MiB |
|
Before Width: | Height: | Size: 527 KiB |
|
Before Width: | Height: | Size: 757 KiB |
|
Before Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 386 KiB |
|
Before Width: | Height: | Size: 919 KiB |
|
Before Width: | Height: | Size: 954 KiB |
|
Before Width: | Height: | Size: 964 KiB |
|
Before Width: | Height: | Size: 448 KiB |
|
Before Width: | Height: | Size: 735 KiB |
|
Before Width: | Height: | Size: 631 KiB |
|
Before Width: | Height: | Size: 1.0 MiB |
|
Before Width: | Height: | Size: 391 KiB |
|
Before Width: | Height: | Size: 791 KiB |
|
Before Width: | Height: | Size: 101 KiB |
|
Before Width: | Height: | Size: 153 KiB |
|
Before Width: | Height: | Size: 228 KiB |
|
Before Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 197 KiB |
|
Before Width: | Height: | Size: 229 KiB |
|
Before Width: | Height: | Size: 200 KiB |
|
Before Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 92 KiB |
|
Before Width: | Height: | Size: 90 KiB |
|
Before Width: | Height: | Size: 86 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
Before Width: | Height: | Size: 193 KiB |
|
Before Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 138 KiB |
|
Before Width: | Height: | Size: 132 KiB |
|
Before Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 64 KiB |
|
Before Width: | Height: | Size: 50 KiB |
|
Before Width: | Height: | Size: 28 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 963 KiB |
|
Before Width: | Height: | Size: 1.1 MiB |
@@ -1,60 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Enter code — Atomaste CDR</title>
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<link rel="icon" type="image/svg+xml" href="/Media/Atomaste_logo_A.svg?v=2">
|
||||
<style>
|
||||
:root { --bg:#0b0f14; --fg:#e8eef7; --muted:#a8b3c2; --accent:#7dd3fc; }
|
||||
body{ margin:0; min-height:100vh; display:grid; place-items:center; background: radial-gradient(900px 600px at 15% 10%, rgba(125,211,252,0.14), transparent 55%), linear-gradient(180deg,#070a0f 0%, var(--bg) 100%); color:var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }
|
||||
.card{ width:min(520px, 92vw); border:1px solid rgba(232,238,247,0.14); border-radius:16px; background: rgba(255,255,255,0.03); padding: 24px; }
|
||||
.row{ display:flex; gap:10px; margin-top:12px; }
|
||||
input{ flex:1; padding:12px 14px; border-radius:12px; border:1px solid rgba(232,238,247,0.14); background: rgba(0,0,0,0.25); color:var(--fg); font-size:16px; }
|
||||
button{ padding:12px 14px; border-radius:12px; border:1px solid rgba(232,238,247,0.14); background: rgba(125,211,252,0.14); color:var(--fg); font-size:16px; cursor:pointer; }
|
||||
.hint{ color: rgba(232,238,247,0.65); font-size: 13px; margin-top: 10px; }
|
||||
.error{ color:#fca5a5; margin-top:10px; display:none; }
|
||||
img{ height:22px; opacity:0.9; }
|
||||
.brand{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<div class="brand">
|
||||
<img src="/Media/Atomaste_light_grey_Logo.svg" alt="Atomaste" />
|
||||
<div style="font-weight:600">CDR Deck Access</div>
|
||||
</div>
|
||||
<div style="font-size: 14px; color: rgba(232,238,247,0.75)">Enter the access code to open the presentation.</div>
|
||||
|
||||
<div class="row">
|
||||
<input id="code" type="password" placeholder="Access code" autocomplete="off" />
|
||||
<button id="go">Open</button>
|
||||
</div>
|
||||
|
||||
<div class="error" id="err">Incorrect code.</div>
|
||||
<div class="hint">Note: this is a lightweight gate (link + code), not strong security.</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// NOTE: This is intentionally simple. Not real security.
|
||||
// Change the CODE value before sharing.
|
||||
const CODE = 'stratosphere';
|
||||
|
||||
const $ = (id) => document.getElementById(id);
|
||||
const go = () => {
|
||||
const val = $('code').value.trim();
|
||||
if (val === CODE) {
|
||||
// Lightweight gate: store a marker then redirect.
|
||||
try { localStorage.setItem('atomaste_deck_gof_cdr', CODE); } catch (e) {}
|
||||
window.location.href = './index.html';
|
||||
} else {
|
||||
$('err').style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
$('go').addEventListener('click', go);
|
||||
$('code').addEventListener('keydown', (e) => { if (e.key === 'Enter') go(); });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,877 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>GigaBIT M1 — Critical Design Review</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/black.css">
|
||||
<link rel="icon" type="image/svg+xml" href="/Media/Atomaste_logo_A.svg?v=2">
|
||||
<style>
|
||||
:root {
|
||||
--r-heading-color: #e8eef7;
|
||||
--r-main-color: #c8d4e4;
|
||||
--r-link-color: #7dd3fc;
|
||||
--accent: #f87171;
|
||||
--accent2: #4ade80;
|
||||
--accent3: #7dd3fc;
|
||||
--accent4: #a78bfa;
|
||||
--bg: #0b0f14;
|
||||
--bg-card: rgba(255,255,255,0.04);
|
||||
--border: rgba(232,238,247,0.12);
|
||||
}
|
||||
.reveal { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: var(--r-main-color); }
|
||||
.reveal h1, .reveal h2, .reveal h3 { font-weight: 700; letter-spacing: -0.02em; color: var(--r-heading-color); }
|
||||
.reveal h1 { font-size: 2.0em; }
|
||||
.reveal h2 { font-size: 1.5em; }
|
||||
.reveal h3 { font-size: 1.1em; color: var(--accent3); }
|
||||
.reveal p, .reveal li { font-size: 0.72em; line-height: 1.55; }
|
||||
.reveal table { font-size: 0.62em; margin: 0.4em auto; border-collapse: collapse; }
|
||||
.reveal th { background: rgba(125,211,252,0.15); color: #e8eef7; padding: 6px 14px; border-bottom: 2px solid rgba(125,211,252,0.3); }
|
||||
.reveal td { padding: 5px 14px; border-bottom: 1px solid var(--border); color: #c8d4e4; }
|
||||
.reveal tr:nth-child(even) { background: rgba(255,255,255,0.02); }
|
||||
|
||||
.reveal-viewport {
|
||||
background: radial-gradient(1200px 800px at 15% 10%, rgba(125,211,252,0.12), transparent 55%),
|
||||
radial-gradient(900px 600px at 85% 30%, rgba(167,139,250,0.10), transparent 60%),
|
||||
linear-gradient(180deg, #070a0f 0%, #0b0f14 100%);
|
||||
}
|
||||
.reveal-viewport::before {
|
||||
content: "";
|
||||
position: fixed; inset: 0; pointer-events: none;
|
||||
background:
|
||||
radial-gradient(500px 320px at 10% 20%, rgba(125,211,252,0.08), transparent 60%),
|
||||
radial-gradient(420px 280px at 90% 40%, rgba(167,139,250,0.06), transparent 62%);
|
||||
animation: atomasteFloat 18s ease-in-out infinite;
|
||||
}
|
||||
@keyframes atomasteFloat {
|
||||
0% { transform: translate3d(0,0,0); }
|
||||
50% { transform: translate3d(18px,-10px,0); }
|
||||
100% { transform: translate3d(0,0,0); }
|
||||
}
|
||||
|
||||
.title-slide h1 { font-size: 2.2em; margin-bottom: 0.1em; }
|
||||
.title-slide .subtitle { font-size: 1.1em; color: var(--accent3); margin-bottom: 0.6em; }
|
||||
.title-slide .meta { font-size: 0.65em; color: rgba(232,238,247,0.6); }
|
||||
|
||||
.highlight-box {
|
||||
background: rgba(125,211,252,0.08);
|
||||
border-left: 4px solid var(--accent3);
|
||||
padding: 14px 20px; margin: 12px 0; border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
.highlight-box p { margin: 0.2em 0; }
|
||||
|
||||
.success-box {
|
||||
background: rgba(74,222,128,0.08);
|
||||
border-left: 4px solid var(--accent2);
|
||||
padding: 14px 20px; margin: 12px 0; border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.warn-box {
|
||||
background: rgba(251,191,36,0.08);
|
||||
border-left: 4px solid #fbbf24;
|
||||
padding: 14px 20px; margin: 12px 0; border-radius: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.metric-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }
|
||||
.metric-card {
|
||||
background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 14px 22px; text-align: center; min-width: 140px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
}
|
||||
.metric-card .value { font-size: 1.6em; font-weight: 800; color: #e8eef7; }
|
||||
.metric-card .label { font-size: 0.55em; color: rgba(232,238,247,0.6); margin-top: 2px; }
|
||||
.metric-card.green .value { color: var(--accent2); }
|
||||
.metric-card.blue .value { color: var(--accent3); }
|
||||
.metric-card.red .value { color: var(--accent); }
|
||||
|
||||
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
|
||||
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
|
||||
|
||||
.reveal img.slide-img { max-height: 420px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
|
||||
.reveal img.small-img { max-height: 300px; border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.25); }
|
||||
.reveal img.thumb { max-height: 220px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
|
||||
|
||||
.caption { font-size: 0.52em; color: rgba(232,238,247,0.5); margin-top: 4px; font-style: italic; }
|
||||
|
||||
.tag { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 0.55em; font-weight: 600; }
|
||||
.tag-done { background: rgba(74,222,128,0.15); color: #4ade80; }
|
||||
.tag-open { background: rgba(251,191,36,0.15); color: #fbbf24; }
|
||||
.tag-new { background: rgba(125,211,252,0.15); color: #7dd3fc; }
|
||||
|
||||
.timeline { text-align: left; margin: 0 auto; max-width: 600px; }
|
||||
.timeline-item {
|
||||
position: relative; padding-left: 28px; margin-bottom: 14px;
|
||||
border-left: 3px solid var(--accent3);
|
||||
}
|
||||
.timeline-item::before {
|
||||
content: ''; position: absolute; left: -7px; top: 4px;
|
||||
width: 11px; height: 11px; border-radius: 50%;
|
||||
background: var(--accent3); border: 2px solid var(--bg);
|
||||
}
|
||||
.timeline-item.done { border-left-color: var(--accent2); }
|
||||
.timeline-item.done::before { background: var(--accent2); }
|
||||
.timeline-item .date { font-size: 0.55em; color: rgba(232,238,247,0.5); }
|
||||
.timeline-item .desc { font-size: 0.65em; }
|
||||
|
||||
.slide-number { font-size: 0.5em !important; }
|
||||
|
||||
.reveal .footer-bar {
|
||||
position: fixed; bottom: 0; left: 0; right: 0;
|
||||
background: rgba(11,15,20,0.85); color: rgba(232,238,247,0.5);
|
||||
font-size: 0.4em; padding: 4px 24px;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
z-index: 100; backdrop-filter: blur(8px);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
.footer-bar img { height: 16px; opacity: 0.7; margin-right: 8px; vertical-align: middle; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="reveal">
|
||||
<div class="slides">
|
||||
|
||||
<!-- ===== TITLE ===== -->
|
||||
<section class="title-slide" data-background-gradient="linear-gradient(135deg, #0b0f14 0%, #111827 50%, #0b0f14 100%)">
|
||||
<h1 style="color:white;">GigaBIT M1 Primary Mirror</h1>
|
||||
<div class="subtitle">Critical Design Review</div>
|
||||
<hr style="border:none; height:2px; background:rgba(125,211,252,0.25); width:40%; margin:0.6em auto;">
|
||||
<div class="meta">
|
||||
<p>Optiques Fullum & Atomaste Solution</p>
|
||||
<p>January 2026</p>
|
||||
<p style="margin-top:1em; font-size:0.85em;">Presented to StarSpec</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== AGENDA ===== -->
|
||||
<section>
|
||||
<h2>Agenda</h2>
|
||||
<div style="text-align:left; max-width:600px; margin:0 auto;">
|
||||
<ol style="font-size:0.75em; line-height:2;">
|
||||
<li class="fragment fade-up">CDR Objectives & Scope</li>
|
||||
<li class="fragment fade-up">M1 Design Overview</li>
|
||||
<li class="fragment fade-up">Support System Architecture</li>
|
||||
<li class="fragment fade-up">Optimization & Cost Reduction Campaign</li>
|
||||
<li class="fragment fade-up">Selected Design — Option B Performance</li>
|
||||
<li class="fragment fade-up">Recent Development: Refined Contact Model</li>
|
||||
<li class="fragment fade-up">Boundary Condition Strategy</li>
|
||||
<li class="fragment fade-up">Reference Frame — Scope & Requirements</li>
|
||||
<li class="fragment fade-up">Risk Assessment</li>
|
||||
<li class="fragment fade-up">Path Forward & Recommendation</li>
|
||||
</ol>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CDR OBJECTIVES ===== -->
|
||||
<section>
|
||||
<h2>CDR Objectives</h2>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.8em; font-weight:600;">Goal: Establish design maturity sufficient to authorize blank procurement from Schott.</p>
|
||||
</div>
|
||||
<br>
|
||||
<div style="text-align:left; max-width:650px; margin:0 auto;">
|
||||
<ol style="font-size:0.68em; line-height:1.8;">
|
||||
<li class="fragment fade-up">Validate M1 design meets optical & mechanical requirements</li>
|
||||
<li class="fragment fade-up">Document cost reduction campaign & trade-off analysis</li>
|
||||
<li class="fragment fade-up">Present final design selection with supporting data</li>
|
||||
<li class="fragment fade-up">Define support system architecture & reference frame concept</li>
|
||||
<li class="fragment fade-up">Establish procurement path & timeline</li>
|
||||
</ol>
|
||||
</div>
|
||||
<br>
|
||||
<p style="font-size:0.6em; color:rgba(232,238,247,0.5);">Scope: M1 blank design + support system architecture.<br>
|
||||
Reference frame detailed design & STOP analysis → FDR phase.</p>
|
||||
</section>
|
||||
|
||||
<!-- ===== M1 DESIGN OVERVIEW ===== -->
|
||||
<section>
|
||||
<h2>M1 Mirror Blank — Design Overview</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/components/M1-Blank/hero.png" class="slide-img" alt="M1 Blank">
|
||||
<div class="caption">M1 blank — lightweighted back face with honeycomb rib structure</div>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<h3>Optical Prescription</h3>
|
||||
<table>
|
||||
<tr><td><b>Surface</b></td><td>Near-parabolic (k = −0.9886)</td></tr>
|
||||
<tr><td><b>Radius of curvature</b></td><td>2893.6 mm ± 3 mm</td></tr>
|
||||
<tr><td><b>Clear aperture</b></td><td>1202 mm</td></tr>
|
||||
<tr><td><b>Material</b></td><td>ZERODUR Class 0</td></tr>
|
||||
</table>
|
||||
<h3 style="margin-top:0.6em;">Option B Geometry</h3>
|
||||
<table>
|
||||
<tr><td><b>Back face angle</b></td><td>4.01°</td></tr>
|
||||
<tr><td><b>Center thickness</b></td><td>85 mm</td></tr>
|
||||
<tr><td><b>Mass</b></td><td>95.81 kg</td></tr>
|
||||
<tr><td><b>Support bosses</b></td><td>54 (30 mm Ø)</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== M1 WITH SUPPORT ===== -->
|
||||
<section>
|
||||
<h2>M1 Assembly</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/components/M1-Blank/with-vertical-iso.png" class="small-img" alt="M1 with vertical support">
|
||||
<div class="caption">M1 with 54-point whiffletree support</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Full-Assembly/isometric.png" class="small-img" alt="Full assembly">
|
||||
<div class="caption">Full M1 assembly — blank + supports + reference frame</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== SUPPORT SYSTEM ===== -->
|
||||
<section>
|
||||
<h2>Support System Architecture</h2>
|
||||
<div class="two-col">
|
||||
<div style="text-align:left;">
|
||||
<h3>Vertical Support — 54-Point Whiffletree</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up">3-stage hierarchy (18 contact points × 3)</li>
|
||||
<li class="fragment fade-up">Carbon fiber plates for thermal isolation</li>
|
||||
<li class="fragment fade-up">RDOF joints: 150 Nm·m stiffness (negligible WFE impact)</li>
|
||||
<li class="fragment fade-up">Spherical joints for self-alignment</li>
|
||||
</ul>
|
||||
<h3 style="margin-top:0.6em;">Lateral Support — 3-Point System</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up">Roll restraint ±7.5°</li>
|
||||
<li class="fragment fade-up">Low-friction sliding interface (Teflon-like)</li>
|
||||
<li class="fragment fade-up">Minimizes parasitic frame distortion transfer</li>
|
||||
<li class="fragment fade-up">Parameterized pivot positions (inner/outer/middle)</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Vertical-Support/isometric.png" class="small-img" alt="Vertical support isometric">
|
||||
<div class="caption">Vertical support — whiffletree isometric view</div>
|
||||
<br>
|
||||
<img src="./assets/components/Lateral-Support/detail.png" class="thumb" alt="Lateral support">
|
||||
<div class="caption">Lateral support detail</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== SUPPORT SYSTEM DETAILS ===== -->
|
||||
<section>
|
||||
<h2>Support System — Detail Views</h2>
|
||||
<div class="three-col">
|
||||
<div>
|
||||
<img src="./assets/components/Vertical-Support/stage-1.png" class="thumb" alt="Stage 1">
|
||||
<div class="caption">Stage 1 — Pads</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Vertical-Support/stage-2.png" class="thumb" alt="Stage 2">
|
||||
<div class="caption">Stage 2 — Intermediate lever</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Vertical-Support/stage-3.png" class="thumb" alt="Stage 3">
|
||||
<div class="caption">Stage 3 — Frame interface arm</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/components/Vertical-Support/spherical-joint.png" class="thumb" alt="Spherical joint">
|
||||
<div class="caption">Spherical joint — self-alignment</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Stage-3-Arm/detail.png" class="thumb" alt="Stage 3 arm">
|
||||
<div class="caption">Stage 3 arm — connection detail</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== REFERENCE FRAME ===== -->
|
||||
<section>
|
||||
<h2>Reference Frame — Concept</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/components/Reference-Frame/hero.png" class="small-img" alt="Reference frame">
|
||||
<div class="caption">CFRP reference frame concept</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Reference-Frame/top.png" class="small-img" alt="Reference frame top">
|
||||
<div class="caption">Top view — interface point layout</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.65em;">Conceptual design provided by Optiques Fullum as a <b>good-faith proposal</b> to facilitate integration. Detailed design & manufacturing = StarSpec responsibility.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== OPTIMIZATION CAMPAIGN ===== -->
|
||||
<section>
|
||||
<h2>Optimization Campaign — Scale</h2>
|
||||
<div class="metric-row">
|
||||
<div class="metric-card blue"><div class="value">3,770+</div><div class="label">FEA Simulations</div></div>
|
||||
<div class="metric-card"><div class="value">14</div><div class="label">Design Variables</div></div>
|
||||
<div class="metric-card"><div class="value">5</div><div class="label">Algorithms Tested</div></div>
|
||||
<div class="metric-card green"><div class="value">Confirmed</div><div class="label">Convergence</div></div>
|
||||
</div>
|
||||
<br>
|
||||
<table>
|
||||
<thead>
|
||||
<tr><th>Campaign</th><th>FEA Trials</th><th>Algorithms</th><th>Focus</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td>Adaptive Support</td><td>~1,400</td><td>GNN+TuRBO, TPE, NSGA-II</td><td>Support position optimization</td></tr>
|
||||
<tr><td>Cost Reduction</td><td>~900</td><td>TPE, CMA-ES</td><td>Geometry simplification</td></tr>
|
||||
<tr><td>Flat Back Exploration</td><td>1,470</td><td>TPE, SAT v3, L-BFGS</td><td>Manufacturing trade study</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<div class="success-box">
|
||||
<p style="font-size:0.65em;">✅ Design space thoroughly explored. Multiple algorithms converge to same solution.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== ATOMIZER FRAMEWORK ===== -->
|
||||
<section>
|
||||
<h2>Atomizer — Custom Optimization Framework</h2>
|
||||
<div style="text-align:left; max-width:650px; margin:0 auto;">
|
||||
<h3>Evolution since PDR</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up">Transitioned from HEEDS MDO → <b>Atomizer</b> (fully custom)</li>
|
||||
<li class="fragment fade-up">Full control over algorithm selection & tuning</li>
|
||||
<li class="fragment fade-up"><b>OPD-based Zernike extraction</b> — accounts for lateral (X,Y) displacement, not just axial (Z)</li>
|
||||
<li class="fragment fade-up">Complete traceability through version-controlled studies</li>
|
||||
</ul>
|
||||
<h3 style="margin-top:0.6em;">Key Algorithms</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li><b>TPE</b> — Bayesian optimization baseline</li>
|
||||
<li><b>GNN Surrogate</b> — Graph Neural Network (~0.95 R² on Zernike coefficients)</li>
|
||||
<li><b>SAT v3</b> — Self-Aware TuRBO with adaptive exploration schedule</li>
|
||||
<li><b>L-BFGS</b> — Gradient-based polish for final refinement</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== COST REDUCTION ===== -->
|
||||
<section>
|
||||
<h2>Cost Reduction Campaign</h2>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.7em;"><b>Problem:</b> Schott quote $625K vs. $523K budget → $102K gap to close</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="two-col">
|
||||
<div style="text-align:left;">
|
||||
<h3>Strategy 1: Geometry Simplifications</h3>
|
||||
<table>
|
||||
<tr><th>Modification</th><th>Impact</th><th>Verdict</th></tr>
|
||||
<tr><td>Remove structural ribs</td><td>+92% WFE</td><td style="color:var(--accent);">✗ Rejected</td></tr>
|
||||
<tr><td>Support cone → 0°</td><td>+3.3%</td><td style="color:var(--accent2);">✓ Acceptable</td></tr>
|
||||
<tr><td>Remove center mini ribs</td><td><b>−1.6%</b></td><td style="color:var(--accent2);">✓ Recommended</td></tr>
|
||||
<tr><td>Center thickness 85→80</td><td>+8.2%</td><td style="color:var(--accent);">✗ Rejected</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<h3>Strategy 2: Flat Back Variant</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li>Eliminates taper machining entirely</li>
|
||||
<li>No jig required</li>
|
||||
<li>1,470 FEA trials across 10 versions</li>
|
||||
<li>49% improvement in MFG deformation</li>
|
||||
<li>Mass trade-off: +16 kg</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="success-box">
|
||||
<p style="font-size:0.65em;">✅ Campaign closed the cost gap. Option B: $525K (+0.4% of budget). Option C: $520K.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== KEY FINDING ===== -->
|
||||
<section>
|
||||
<h2>Key Finding — Structural Ribs Are Non-Negotiable</h2>
|
||||
<div style="text-align:left; max-width:650px; margin:0 auto;">
|
||||
<p style="font-size:0.72em;">The sensitivity analysis revealed a <b>critical design hierarchy</b>:</p>
|
||||
<table>
|
||||
<thead><tr><th>Rank</th><th>Parameter</th><th>Sensitivity</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td>Structural Rib Topology</td><td style="color:var(--accent);font-weight:700;">CRITICAL (67–92% degradation)</td></tr>
|
||||
<tr><td>2</td><td>Center Thickness</td><td style="color:var(--accent);font-weight:700;">CRITICAL (+106% MFG)</td></tr>
|
||||
<tr><td>3</td><td>Pocket Radii</td><td style="color:#fbbf24;font-weight:600;">HIGH (requires re-optimization)</td></tr>
|
||||
<tr><td>4</td><td>Center Mini Ribs</td><td style="color:var(--accent2);font-weight:600;">POSITIVE (7–9% improvement)</td></tr>
|
||||
<tr><td>5</td><td>Support Cone Angle</td><td>Low-Moderate</td></tr>
|
||||
<tr><td>6</td><td>RDOF Stiffness</td><td>Negligible (<0.2%)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<div class="warn-box">
|
||||
<p style="font-size:0.65em;">⚠️ The ribs provide stiffness against asymmetric gravity deflection. Removing them increases high-order aberrations (J4+) by 2.4×. This finding de-risked the design decision.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== SELECTED DESIGN ===== -->
|
||||
<section>
|
||||
<h2>Selected Design — Option B (Conical V14)</h2>
|
||||
<div class="metric-row">
|
||||
<div class="metric-card green"><div class="value">7.70 nm</div><div class="label">WFE 40° (65% margin)</div></div>
|
||||
<div class="metric-card green"><div class="value">17.69 nm</div><div class="label">WFE 60° (20% margin)</div></div>
|
||||
<div class="metric-card"><div class="value">37.06 nm</div><div class="label">MFG 90° (acceptable)</div></div>
|
||||
</div>
|
||||
<div class="metric-row">
|
||||
<div class="metric-card green"><div class="value">95.81 kg</div><div class="label">Mass (7.4% margin)</div></div>
|
||||
<div class="metric-card blue"><div class="value">$525K</div><div class="label">Schott Quote (+0.4%)</div></div>
|
||||
<div class="metric-card"><div class="value">22 nm</div><div class="label">Requirement (λ/25)</div></div>
|
||||
</div>
|
||||
<br>
|
||||
<table>
|
||||
<thead><tr><th>Factor</th><th>Option B (Selected)</th><th>Option C (Trade Study)</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>WFE 40°</b></td><td>7.70 nm</td><td>8.09 nm</td></tr>
|
||||
<tr><td><b>WFE 60°</b></td><td>17.69 nm</td><td>18.81 nm</td></tr>
|
||||
<tr><td><b>Mass</b></td><td style="color:var(--accent2);">95.81 kg ✓</td><td>102.38 kg</td></tr>
|
||||
<tr><td><b>Quote</b></td><td>$525,000</td><td>$520,000</td></tr>
|
||||
<tr><td><b>Risk</b></td><td style="color:var(--accent2);">Lower (proven geometry)</td><td>Moderate (new variant)</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- ===== RECENT DEV: CONTACT MODEL ===== -->
|
||||
<section>
|
||||
<h2>Recent Development — Refined Lateral Contact Model</h2>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.7em;"><b>Design decision (Jan 30, 2026):</b> Changed lateral shoe-blank interface from silicone adhesive to low-friction sliding material (Teflon-like).</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="two-col">
|
||||
<div style="text-align:left;">
|
||||
<h3>Why this change?</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up"><b>Mirror independence</b> — blank floats freely within lateral supports</li>
|
||||
<li class="fragment fade-up"><b>No parasitic transfer</b> — frame distortions decoupled from mirror</li>
|
||||
<li class="fragment fade-up"><b>Conservative</b> — worst-case for self-support; actual friction → <i>better</i> performance</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<table>
|
||||
<thead><tr><th>Metric</th><th>Previous</th><th>Refined</th><th>Δ</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td><b>WFE 40°</b></td><td>6.12 nm</td><td>7.70 nm</td><td>+26%</td></tr>
|
||||
<tr><td><b>WFE 60°</b></td><td>13.41 nm</td><td>17.69 nm</td><td>+32%</td></tr>
|
||||
<tr><td><b>MFG 90°</b></td><td>27.01 nm</td><td>37.06 nm</td><td>+37%</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div class="success-box">
|
||||
<p style="font-size:0.65em;">✅ All values remain compliant with 22 nm requirement. Higher values = more physically accurate, not design degradation.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== WFE FIGURES ===== -->
|
||||
<section>
|
||||
<h2>Optical Performance — WFE Surface Maps</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/plots/html2.png" class="small-img" alt="WFE 40 vs 20">
|
||||
<div class="caption">WFE surface — 40° vs 20° (7.70 nm RMS)</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/plots/html3.png" class="small-img" alt="WFE 60 vs 20">
|
||||
<div class="caption">WFE surface — 60° vs 20° (17.69 nm RMS)</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p style="font-size:0.6em; color:rgba(232,238,247,0.5);">Refined contact model (Jan 30, 2026). J1–J4 removed (piston, tip, tilt, defocus corrected by active optics).</p>
|
||||
</section>
|
||||
|
||||
<!-- ===== MFG + BAR CHART ===== -->
|
||||
<section>
|
||||
<h2>Manufacturing & Analysis Summary</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/plots/html4.png" class="small-img" alt="MFG 90">
|
||||
<div class="caption">Manufacturing residual at 90° — 37.06 nm RMS</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/plots/html1.png" class="small-img" alt="Summary bar chart">
|
||||
<div class="caption">Per-angle RMS WFE bar chart (Atomizer report)</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== ZERNIKE & PSD ===== -->
|
||||
<section>
|
||||
<h2>Zernike Trajectory & PSD Analysis</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<img src="./assets/plots/html5.png" class="small-img" alt="Zernike trajectory">
|
||||
<div class="caption">Zernike mode RMS vs. elevation — Spherical (Z11) dominates. Linear R² = 1.0000</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/plots/html7.png" class="small-img" alt="Surface PSD">
|
||||
<div class="caption">Surface PSD — gravity signature, support print-through, high-frequency bands</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p style="font-size:0.6em; color:rgba(232,238,247,0.5);">PSD analysis confirms support print-through dominates (71–85% of total WFE). Predictable and well-characterized behavior.</p>
|
||||
</section>
|
||||
|
||||
<!-- ===== ZERNIKE COEFFICIENTS ===== -->
|
||||
<section>
|
||||
<h2>Zernike Coefficient Breakdown</h2>
|
||||
<div class="three-col">
|
||||
<div>
|
||||
<img src="./assets/plots/html10.png" class="thumb" alt="Zernike 40">
|
||||
<div class="caption">40° vs 20° — Defocus (J04) dominant</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/plots/html11.png" class="thumb" alt="Zernike 60">
|
||||
<div class="caption">60° vs 20° — Secondary Astigmatism (J13) rises</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/plots/html12.png" class="thumb" alt="Zernike 90">
|
||||
<div class="caption">90° absolute — Spherical (J11) at 37.5 nm</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== MODAL ANALYSIS ===== -->
|
||||
<section>
|
||||
<h2>Modal Analysis — Natural Frequencies</h2>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.7em;"><b>First mode: 250.4 Hz</b> — exceeds 150 Hz requirement by 67% margin.</p>
|
||||
</div>
|
||||
<br>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<table>
|
||||
<thead><tr><th>Mode</th><th>Freq (Hz)</th><th>Description</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>1</td><td><b>250.4</b></td><td>Trefoil bending (3-nodal dia.)</td></tr>
|
||||
<tr><td>2</td><td>259.3</td><td>Astigmatic bending (2-nodal dia.)</td></tr>
|
||||
<tr><td>3</td><td>466.2</td><td>Rocking/tilting</td></tr>
|
||||
<tr><td>4</td><td>668.8</td><td>Higher-order bending</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/plots/Mode1.png" class="small-img" alt="Mode 1 shape">
|
||||
<div class="caption">Mode 1 (250.4 Hz) — trefoil bending, 3-nodal diameter pattern</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<p style="font-size:0.6em; color:rgba(232,238,247,0.5);">SOL 103 analysis with fixed BCs at all 54 whiffletree + 3 lateral support points. All 10 modes well above 150 Hz.</p>
|
||||
</section>
|
||||
|
||||
<!-- ===== BOUNDARY CONDITION STRATEGY ===== -->
|
||||
<section>
|
||||
<h2>Boundary Condition Strategy</h2>
|
||||
<div style="text-align:left; max-width:680px; margin:0 auto;">
|
||||
<h3>The Decoupling Approach</h3>
|
||||
<p style="font-size:0.68em;">We deliberately decouple two problems that can be solved independently:</p>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.68em;"><b>Step 1:</b> Optimize blank for ideal fixed BCs → <span class="tag tag-done">Complete (CDR)</span></p>
|
||||
<p style="font-size:0.68em;"><b>Step 2:</b> Engineer reference frame to approach ideal BCs → <span class="tag tag-open">In progress (FDR)</span></p>
|
||||
</div>
|
||||
<br>
|
||||
<h3>Why this works</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up">Reduces complexity: 14 variables vs. 60+ (blank + frame coupled)</li>
|
||||
<li class="fragment fade-up">Blank procurement & frame design proceed <b>in parallel</b></li>
|
||||
<li class="fragment fade-up">Clear success criteria: frame stiffness targets derived from WFE sensitivity</li>
|
||||
<li class="fragment fade-up">Standard practice in large telescope projects (TMT, GMT, E-ELT)</li>
|
||||
</ul>
|
||||
<br>
|
||||
<h3>The self-maintaining structure</h3>
|
||||
<p style="font-size:0.65em;">The optimized blank is a <b>self-maintaining structure</b> — ribs aligned with gravity load paths, mass placed where stiffness is needed. Even with moderate support compliance, inherent structural efficiency limits WFE growth.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== REFERENCE FRAME SCOPE ===== -->
|
||||
<section>
|
||||
<h2>Reference Frame — Scope & Requirements</h2>
|
||||
<div class="two-col">
|
||||
<div style="text-align:left;">
|
||||
<h3>Scope Boundary</h3>
|
||||
<table>
|
||||
<tr><th>Deliverable</th><th>Owner</th><th>Status</th></tr>
|
||||
<tr><td>M1 Blank (Zerodur)</td><td>Optiques Fullum</td><td><span class="tag tag-done">CDR ✓</span></td></tr>
|
||||
<tr><td>Vertical Support (54-pt)</td><td>Optiques Fullum</td><td><span class="tag tag-done">CDR ✓</span></td></tr>
|
||||
<tr><td>Lateral Support (3-pt)</td><td>Optiques Fullum</td><td><span class="tag tag-done">CDR ✓</span></td></tr>
|
||||
<tr><td>Reference Frame</td><td>StarSpec</td><td><span class="tag tag-new">Concept proposed</span></td></tr>
|
||||
</table>
|
||||
<br>
|
||||
<h3>Frame Stiffness Targets</h3>
|
||||
<table>
|
||||
<tr><th>Parameter</th><th>Requirement</th></tr>
|
||||
<tr><td>Support point deflection</td><td>< 1 μm</td></tr>
|
||||
<tr><td>First mode (frame + mirror)</td><td>> 150 Hz</td></tr>
|
||||
<tr><td>Mass (frame only)</td><td>< 20 kg</td></tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<img src="./assets/components/Reference-Frame/side.png" class="small-img" alt="Reference frame side">
|
||||
<div class="caption">Reference frame — side view</div>
|
||||
<br>
|
||||
<div class="warn-box">
|
||||
<p style="font-size:0.6em;">⚠️ <b>CDR Open Item:</b> ΔWFE vs. stiffness sweep not yet executed. Method is defined; execution is highest-priority post-CDR task.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== WHY ORDER NOW ===== -->
|
||||
<section>
|
||||
<h2>Why It's Safe to Order the Blank Now</h2>
|
||||
<div style="text-align:left; max-width:680px; margin:0 auto;">
|
||||
<h3>Evidence of Convergence</h3>
|
||||
<table>
|
||||
<tr><th>Campaign</th><th>Improvement</th><th>Trials After Plateau</th></tr>
|
||||
<tr><td>Flat Back V9 → V10</td><td>+1.3% (worse)</td><td>296</td></tr>
|
||||
<tr><td>Adaptive V13 → V14</td><td>−5.9% (better)</td><td>785</td></tr>
|
||||
<tr><td>Adaptive V14 → V15</td><td>0% (none)</td><td>126</td></tr>
|
||||
</table>
|
||||
<br>
|
||||
<h3>The Frame is a Solvable Problem</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up">Known physics — CFRP structural engineering, not research</li>
|
||||
<li class="fragment fade-up">Conservative stiffness target (<1 μm) with margin</li>
|
||||
<li class="fragment fade-up">Mitigation options exist if needed (local stiffening, shimming)</li>
|
||||
<li class="fragment fade-up">Frame development is <b>independent</b> of blank design</li>
|
||||
</ul>
|
||||
<br>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.7em;">🕐 <b>Schedule driver:</b> 18-week Schott lead time. Quote valid until <b>March 4, 2026</b>. Delaying for coupled optimization would extend program by months with uncertain benefit.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== RISK ASSESSMENT ===== -->
|
||||
<section>
|
||||
<h2>Risk Assessment</h2>
|
||||
<div class="two-col">
|
||||
<div>
|
||||
<table>
|
||||
<thead><tr><th>Risk</th><th>L</th><th>I</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Design convergence</td><td>1</td><td>3</td><td><span class="tag tag-done">Closed</span></td></tr>
|
||||
<tr><td>Cost exceeds budget</td><td>2</td><td>2</td><td><span class="tag tag-done">Reduced</span></td></tr>
|
||||
<tr><td>Schott delivery delay</td><td>2</td><td>3</td><td><span class="tag tag-open">Open</span></td></tr>
|
||||
<tr><td>Frame stiffness</td><td>2</td><td>2</td><td><span class="tag tag-new">New</span></td></tr>
|
||||
<tr><td>Mass exceedance</td><td>1</td><td>2</td><td><span class="tag tag-done">Closed</span></td></tr>
|
||||
<tr><td>Polishing difficulty</td><td>1</td><td>3</td><td><span class="tag tag-done">Reduced</span></td></tr>
|
||||
<tr><td>Interface incompatibility</td><td>2</td><td>2</td><td><span class="tag tag-open">Open</span></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<h3>Trend Since PDR</h3>
|
||||
<table>
|
||||
<tr><th>Category</th><th>PDR</th><th>CDR</th><th></th></tr>
|
||||
<tr><td>Technical</td><td>Medium</td><td style="color:var(--accent2);">Low-Med</td><td>↓</td></tr>
|
||||
<tr><td>Schedule</td><td>Medium</td><td>Medium</td><td>→</td></tr>
|
||||
<tr><td>Cost</td><td>High</td><td style="color:var(--accent2);">Medium</td><td>↓</td></tr>
|
||||
<tr><td>Integration</td><td>Medium</td><td>Medium</td><td>→</td></tr>
|
||||
</table>
|
||||
<br>
|
||||
<div class="success-box">
|
||||
<p style="font-size:0.6em;">Technical and cost risks significantly improved since PDR. Risk posture supports procurement.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== WHAT'S DONE / WHAT'S NEXT ===== -->
|
||||
<section>
|
||||
<h2>What's Done & What's Next</h2>
|
||||
<div class="two-col">
|
||||
<div style="text-align:left;">
|
||||
<h3 style="color:var(--accent2);">✅ Completed at CDR</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li>Mirror blank geometry — optimized & validated</li>
|
||||
<li>Support positions — optimized (14 variables)</li>
|
||||
<li>Cost reduction campaign — closed $102K gap</li>
|
||||
<li>Design selection — Option B confirmed</li>
|
||||
<li>Whiffletree architecture — defined</li>
|
||||
<li>Lateral support architecture — defined</li>
|
||||
<li>Refined contact model — conservative basis</li>
|
||||
<li>Schott quote received — $525K</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div style="text-align:left;">
|
||||
<h3 style="color:var(--accent3);">🔜 Post-CDR Priorities</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li><b>Frame stiffness characterization</b> (ΔWFE vs. K sweep)</li>
|
||||
<li>Reference frame preliminary design</li>
|
||||
<li>Whiffletree detailed design</li>
|
||||
<li>Lateral support detailed design</li>
|
||||
<li>ICD finalization with StarSpec</li>
|
||||
<li>Modal analysis (frame + mirror)</li>
|
||||
<li>STOP analysis (StarSpec scope)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== TIMELINE ===== -->
|
||||
<section>
|
||||
<h2>Path to FDR — Timeline</h2>
|
||||
<div class="timeline">
|
||||
<div class="timeline-item done">
|
||||
<div class="date">January 2026</div>
|
||||
<div class="desc"><b>CDR Approval</b> & Design Selection</div>
|
||||
</div>
|
||||
<div class="timeline-item done">
|
||||
<div class="date">February 2026</div>
|
||||
<div class="desc"><b>Blank Order</b> — Schott PO placement</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="date">February 2026</div>
|
||||
<div class="desc"><b>Frame stiffness characterization</b> — Highest priority post-CDR</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="date">Feb–March 2026</div>
|
||||
<div class="desc"><b>Reference frame preliminary design</b> + ICD coordination</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="date">April–June 2026</div>
|
||||
<div class="desc"><b>Support hardware detailed design</b></div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="date">June 2026</div>
|
||||
<div class="desc"><b>Blank delivery</b> from Schott (~18 weeks)</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="date">June–August 2026</div>
|
||||
<div class="desc"><b>Polishing</b> at Optiques Fullum</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="date">Q4 2026</div>
|
||||
<div class="desc"><b>FDR</b> — Final Design Review</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== REQUIREMENT COMPLIANCE ===== -->
|
||||
<section>
|
||||
<h2>Requirement Compliance Summary</h2>
|
||||
<table>
|
||||
<thead><tr><th>Category</th><th>Metric</th><th>Achieved</th><th>Requirement</th><th>Margin</th><th>Status</th></tr></thead>
|
||||
<tbody>
|
||||
<tr><td>Optical</td><td>WFE 40°</td><td>7.70 nm</td><td>22 nm</td><td>65%</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
<tr><td>Optical</td><td>WFE 60°</td><td>17.69 nm</td><td>22 nm</td><td>20%</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
<tr><td>Optical</td><td>MFG 90°</td><td>37.06 nm</td><td>—</td><td>Acceptable</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
<tr><td>Mechanical</td><td>Mass</td><td>95.81 kg</td><td>103.5 kg</td><td>+7.4%</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
<tr><td>Mechanical</td><td>Clear Aperture</td><td>1202 mm</td><td>1200 mm</td><td>—</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
<tr><td>Cost</td><td>Blank Quote</td><td>$525K</td><td>$523K</td><td>+0.4%</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
<tr><td>Dynamic</td><td>Mode 1</td><td>250.4 Hz</td><td>> 150 Hz</td><td>67%</td><td style="color:var(--accent2);">✓</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<br>
|
||||
<div class="success-box">
|
||||
<p style="font-size:0.7em;">All requirements met with margin. Design is mature and validated.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== RECOMMENDATION ===== -->
|
||||
<section data-background-gradient="linear-gradient(135deg, #0b0f14 0%, #111827 50%, #0b0f14 100%)">
|
||||
<h2 style="color:white;">Recommendation</h2>
|
||||
<div style="background:rgba(255,255,255,0.05); border:1px solid rgba(232,238,247,0.12); border-radius:12px; padding:30px; max-width:650px; margin:0 auto;">
|
||||
<p style="font-size:1.0em; color:white; font-weight:700;">Approve CDR & proceed with blank procurement</p>
|
||||
<hr style="border:none; height:1px; background:rgba(232,238,247,0.15); margin:16px 0;">
|
||||
<div style="text-align:left;">
|
||||
<ul style="font-size:0.68em; color:rgba(255,255,255,0.9); line-height:1.8;">
|
||||
<li><b>Design maturity:</b> 3,770+ FEA simulations, confirmed convergence</li>
|
||||
<li><b>Performance:</b> WFE 20–65% margin (conservative contact model)</li>
|
||||
<li><b>Mass:</b> 7.4% under allocation</li>
|
||||
<li><b>Cost:</b> Within 0.4% of budget ($525K)</li>
|
||||
<li><b>Schedule critical:</b> 18-week lead time — quote valid until March 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr style="border:none; height:1px; background:rgba(232,238,247,0.15); margin:16px 0;">
|
||||
<p style="font-size:0.75em; color:var(--accent3);">Next investment: Reference frame characterization + detailed support design → FDR Q4 2026</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== INVESTMENT CASE ===== -->
|
||||
<section>
|
||||
<h2>The Investment Case — Continuing to FDR</h2>
|
||||
<div style="text-align:left; max-width:680px; margin:0 auto;">
|
||||
<h3>What the next phase delivers</h3>
|
||||
<div class="three-col" style="margin-top:12px;">
|
||||
<div class="metric-card" style="text-align:left; padding:12px;">
|
||||
<p style="font-size:0.6em; font-weight:700; color:var(--accent3);">Frame Characterization</p>
|
||||
<p style="font-size:0.55em;">ΔWFE vs. stiffness curve — converts "reference frame risk" into a quantified, verifiable engineering requirement</p>
|
||||
</div>
|
||||
<div class="metric-card" style="text-align:left; padding:12px;">
|
||||
<p style="font-size:0.6em; font-weight:700; color:var(--accent3);">Detailed Hardware Design</p>
|
||||
<p style="font-size:0.55em;">Whiffletree + lateral supports ready for fabrication. ICD locked with StarSpec.</p>
|
||||
</div>
|
||||
<div class="metric-card" style="text-align:left; padding:12px;">
|
||||
<p style="font-size:0.6em; font-weight:700; color:var(--accent3);">Polished Mirror</p>
|
||||
<p style="font-size:0.55em;">Finished M1 primary mirror, verified against optical specs. Ready for integration.</p>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<h3>Why continue now</h3>
|
||||
<ul style="font-size:0.65em;">
|
||||
<li class="fragment fade-up">3,770+ simulations have <b>retired the major technical risk</b> — blank design is settled</li>
|
||||
<li class="fragment fade-up">The path from CDR → FDR is <b>known engineering</b>, not research</li>
|
||||
<li class="fragment fade-up">Schott quote expires March 4 — delay means re-quoting at likely higher cost</li>
|
||||
<li class="fragment fade-up">Parallel development maximizes schedule efficiency</li>
|
||||
</ul>
|
||||
<br>
|
||||
<div class="highlight-box">
|
||||
<p style="font-size:0.68em;"><b>Bottom line:</b> The hard part is done. Proceeding now converts 4 months of computational investment into a validated, flight-ready mirror assembly.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== CLOSING ===== -->
|
||||
<section data-background-gradient="linear-gradient(135deg, #0b0f14 0%, #111827 50%, #0b0f14 100%)">
|
||||
<h1 style="color:white;">Thank You</h1>
|
||||
<p style="color:rgba(232,238,247,0.6); font-size:0.75em;">Questions & Discussion</p>
|
||||
<br>
|
||||
<p style="color:rgba(232,238,247,0.4); font-size:0.55em;">Optiques Fullum & Atomaste Solution — January 2026</p>
|
||||
<p style="color:rgba(232,238,247,0.4); font-size:0.55em;">GigaBIT M1 Primary Mirror — Critical Design Review</p>
|
||||
</section>
|
||||
|
||||
</div><!-- /slides -->
|
||||
|
||||
<!-- Footer bar -->
|
||||
<div class="footer-bar">
|
||||
<span><img src="/Media/Atomaste_light_grey_Logo.svg" alt="Atomaste">GigaBIT M1 — Critical Design Review</span>
|
||||
<span>Optiques Fullum / Atomaste</span>
|
||||
</div>
|
||||
</div><!-- /reveal -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.js"></script>
|
||||
<script>
|
||||
// Lightweight gate
|
||||
try {
|
||||
const ok = localStorage.getItem('atomaste_deck_gof_cdr') === 'stratosphere';
|
||||
if (!ok) window.location.href = './enter.html';
|
||||
} catch (e) {
|
||||
window.location.href = './enter.html';
|
||||
}
|
||||
|
||||
Reveal.initialize({
|
||||
hash: true,
|
||||
slideNumber: 'c/t',
|
||||
width: 1280,
|
||||
height: 720,
|
||||
margin: 0.08,
|
||||
transition: 'fade',
|
||||
transitionSpeed: 'default',
|
||||
controlsTutorial: false,
|
||||
progress: true,
|
||||
center: true,
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,128 +0,0 @@
|
||||
/* ══════════════════════════════════════════════
|
||||
Atomaste Reveal.js Dark Theme (v2)
|
||||
CDR Deck — GigaBIT M1 Primary Mirror
|
||||
══════════════════════════════════════════════ */
|
||||
|
||||
:root {
|
||||
--atomaste-bg: #0b0f14;
|
||||
--atomaste-fg: #e8eef7;
|
||||
--atomaste-muted: #a8b3c2;
|
||||
--atomaste-accent: #7dd3fc; /* cyan */
|
||||
--atomaste-accent-2: #a78bfa; /* violet */
|
||||
--atomaste-green: #4ade80;
|
||||
--atomaste-amber: #fbbf24;
|
||||
--atomaste-red: #f87171;
|
||||
--atomaste-surface: rgba(255,255,255,0.04);
|
||||
--atomaste-border: rgba(232,238,247,0.10);
|
||||
}
|
||||
|
||||
/* ── Base ── */
|
||||
.reveal {
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
|
||||
color: var(--atomaste-fg);
|
||||
}
|
||||
|
||||
.reveal .slides { text-align: left; }
|
||||
|
||||
/* ── Background ── */
|
||||
.reveal-viewport {
|
||||
background:
|
||||
radial-gradient(1200px 800px at 15% 10%, rgba(125,211,252,0.14), transparent 55%),
|
||||
radial-gradient(900px 600px at 85% 30%, rgba(167,139,250,0.12), transparent 60%),
|
||||
linear-gradient(180deg, #070a0f 0%, #0b0f14 100%);
|
||||
}
|
||||
|
||||
/* subtle floating glow */
|
||||
.reveal-viewport::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background:
|
||||
radial-gradient(500px 320px at 10% 20%, rgba(125,211,252,0.10), transparent 60%),
|
||||
radial-gradient(420px 280px at 90% 40%, rgba(167,139,250,0.08), transparent 62%),
|
||||
radial-gradient(520px 360px at 40% 95%, rgba(125,211,252,0.06), transparent 65%);
|
||||
opacity: 0.9;
|
||||
transform: translate3d(0,0,0);
|
||||
animation: atomasteFloat 18s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes atomasteFloat {
|
||||
0% { transform: translate3d(0,0,0); }
|
||||
50% { transform: translate3d(18px,-10px,0); }
|
||||
100% { transform: translate3d(0,0,0); }
|
||||
}
|
||||
|
||||
/* ── Typography ── */
|
||||
.reveal h1, .reveal h2, .reveal h3 {
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.025em;
|
||||
color: var(--atomaste-fg);
|
||||
margin-bottom: 0.35em;
|
||||
}
|
||||
|
||||
.reveal h1 { font-size: 2.25em; }
|
||||
.reveal h2 { font-size: 1.65em; }
|
||||
.reveal h3 { font-size: 1.15em; color: var(--atomaste-accent); font-weight: 600; }
|
||||
|
||||
.reveal p, .reveal li {
|
||||
font-size: 0.76em;
|
||||
line-height: 1.55;
|
||||
color: var(--atomaste-fg);
|
||||
}
|
||||
|
||||
.reveal a { color: var(--atomaste-accent); text-decoration: none; }
|
||||
.reveal a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Lists ── */
|
||||
.reveal ul { margin-left: 1.1em; }
|
||||
.reveal ol { margin-left: 1.1em; }
|
||||
.reveal li { margin: 0.35em 0; }
|
||||
|
||||
/* ── Images ── */
|
||||
.reveal img {
|
||||
max-height: 62vh;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--atomaste-border);
|
||||
}
|
||||
|
||||
/* ── Footer ── */
|
||||
.atomaste-footer {
|
||||
position: absolute;
|
||||
left: 36px; right: 36px; bottom: 22px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
color: rgba(232,238,247,0.65);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.atomaste-footer img { height: 22px; opacity: 0.9; }
|
||||
|
||||
.atomaste-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--atomaste-border);
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
}
|
||||
|
||||
/* ── Section dividers ── */
|
||||
.section-divider { display: grid; gap: 18px; }
|
||||
.section-divider .kicker {
|
||||
font-size: 0.9em;
|
||||
color: var(--atomaste-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.12em;
|
||||
}
|
||||
.section-divider .title { font-size: 2.1em; line-height: 1.1; }
|
||||
|
||||
/* ── Fragment animation ── */
|
||||
.reveal .fragment.fade-up { transform: translateY(6px); }
|
||||
|
||||
/* ── Code blocks ── */
|
||||
.reveal pre code { font-size: 0.8em; line-height: 1.3; }
|
||||
225
fr.html
@@ -258,9 +258,119 @@ body {
|
||||
@media (max-width: 768px) {
|
||||
.hero-title { font-size: 2.5rem; }
|
||||
}
|
||||
|
||||
/* Accessibility: Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
.grid-bg { animation: none; }
|
||||
.glow-orb { animation: none; }
|
||||
.float, .float-delay, .float-reverse { animation: none; }
|
||||
.pulse-glow { animation: none; }
|
||||
.neural-dot { animation: none; }
|
||||
.scan-line::after { animation: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
/* Accessibility: Focus States */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--cyan-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus-visible, button:focus-visible {
|
||||
outline: 2px solid var(--cyan-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Skip to Content Link */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--cyan-primary);
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
z-index: 100;
|
||||
font-weight: 600;
|
||||
transition: top 0.3s;
|
||||
}
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Back to Top Button */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 212, 230, 0.9);
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 50;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-to-top.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.back-to-top:hover {
|
||||
background: var(--cyan-primary);
|
||||
box-shadow: 0 0 20px rgba(0, 212, 230, 0.5);
|
||||
}
|
||||
|
||||
/* Contact Form Styles */
|
||||
.contact-form input,
|
||||
.contact-form textarea,
|
||||
.contact-form select {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: rgba(10, 20, 35, 0.6);
|
||||
border: 1px solid rgba(0, 212, 230, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus,
|
||||
.contact-form select:focus {
|
||||
outline: none;
|
||||
border-color: var(--cyan-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 212, 230, 0.1);
|
||||
}
|
||||
.contact-form input::placeholder,
|
||||
.contact-form textarea::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
.contact-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.contact-form select option {
|
||||
background: #0a1428;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-gray-400 antialiased relative overflow-x-hidden">
|
||||
<a href="#main-content" class="skip-link">Aller au contenu principal</a>
|
||||
|
||||
<!-- Particle Background Canvas -->
|
||||
<canvas id="particles-canvas"></canvas>
|
||||
@@ -277,7 +387,7 @@ body {
|
||||
<nav class="fixed top-0 left-0 w-full z-50 glass-strong overflow-x-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12">
|
||||
<a href="/fr.html" aria-label="Accueil Atomaste"><img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12"></a>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
||||
<a href="#about" class="hover:text-cyan-400 transition-colors relative group">
|
||||
@@ -332,7 +442,7 @@ body {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-20">
|
||||
<main id="main-content" class="relative z-10 pt-20">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen flex flex-col justify-center px-6 max-w-7xl mx-auto relative py-20">
|
||||
@@ -730,7 +840,7 @@ body {
|
||||
</div>
|
||||
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
||||
<i data-lucide="users" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
|
||||
<h5 class="text-white font-semibold mb-2">Consultation</h5>
|
||||
<h5 class="text-white font-semibold mb-2">Consultation & GP</h5>
|
||||
<p class="text-xs text-gray-500">Accompagnement technique</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -825,7 +935,7 @@ body {
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-400 leading-relaxed mb-6">
|
||||
Ma démarche d'optimisation allie analyse rigoureuse et algorithmes de recherche performants.
|
||||
Notre démarche d'optimisation allie analyse rigoureuse et algorithmes de recherche performants.
|
||||
Stabilité thermique, déformation de surface, réponse dynamique, coût de fabrication, objectifs multiples :
|
||||
l'approche s'adapte à vos exigences.
|
||||
</p>
|
||||
@@ -1087,46 +1197,79 @@ body {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<!-- Section Contact -->
|
||||
<section id="contact" class="py-32 relative border-t border-white/5">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-cyan-500/5 via-transparent to-transparent"></div>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
||||
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
||||
</span>
|
||||
<span class="text-green-400 font-mono text-sm">DISPONIBLE POUR PROJETS</span>
|
||||
<div class="max-w-4xl mx-auto px-6 relative z-10">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
||||
</span>
|
||||
<span class="text-green-400 font-mono text-sm">DISPONIBLE POUR PROJETS</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
||||
<span class="text-gradient">Optimisons</span> ensemble
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
Prêt à améliorer vos conceptions grâce à une analyse ÉF rigoureuse et à l'optimisation?
|
||||
Discutons de vos besoins de projet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
||||
<span class="text-gradient">Optimisons</span> ensemble
|
||||
</h2>
|
||||
<!-- Formulaire de contact -->
|
||||
<form action="https://formspree.io/f/xbddjnrr" method="POST" class="contact-form glass-strong p-8 rounded-2xl max-w-2xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label for="name">Nom *</label>
|
||||
<input type="text" id="name" name="name" required placeholder="Votre nom">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Courriel *</label>
|
||||
<input type="email" id="email" name="email" required placeholder="votre@courriel.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="company">Entreprise</label>
|
||||
<input type="text" id="company" name="company" placeholder="Votre entreprise (optionnel)">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="service">Service d'intérêt</label>
|
||||
<select id="service" name="service">
|
||||
<option value="">Sélectionnez un service...</option>
|
||||
<option value="fea">Analyse ÉF & Simulation</option>
|
||||
<option value="optimization">Optimisation structurelle</option>
|
||||
<option value="optomech">Analyse opto-mécanique</option>
|
||||
<option value="cad">Conception CAO</option>
|
||||
<option value="consulting">Consultation technique</option>
|
||||
<option value="other">Autre</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="message">Message *</label>
|
||||
<textarea id="message" name="message" rows="5" required placeholder="Parlez-nous de votre projet..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center justify-center gap-3">
|
||||
<i data-lucide="send" class="w-5 h-5"></i>
|
||||
Envoyer le message
|
||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-xl text-gray-400 max-w-2xl mx-auto mb-12">
|
||||
Prêt à améliorer vos conceptions grâce à une analyse ÉF rigoureuse et à l'optimisation?
|
||||
Discutons de vos besoins de projet.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16">
|
||||
<a href="mailto:contact@atomaste.ca" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-10 py-5 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
|
||||
<div class="flex items-center justify-center gap-8 mt-12">
|
||||
<a href="mailto:contact@atomaste.ca" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
||||
<i data-lucide="mail" class="w-5 h-5"></i>
|
||||
contact@atomaste.ca
|
||||
<i data-lucide="arrow-up-right" class="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center gap-8">
|
||||
<div class="w-px h-4 bg-white/10"></div>
|
||||
<a href="https://www.linkedin.com/company/atomaste/" target="_blank" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
||||
<i data-lucide="linkedin" class="w-5 h-5"></i>
|
||||
LinkedIn
|
||||
</a>
|
||||
<div class="w-px h-4 bg-white/10"></div>
|
||||
<a href="https://atomaste.ca" class="text-gray-500 hover:text-white transition-colors flex items-center gap-2">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i>
|
||||
atomaste.ca
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1277,6 +1420,26 @@ body {
|
||||
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Back to Top Button
|
||||
const backToTopBtn = document.getElementById('back-to-top');
|
||||
if (backToTopBtn) {
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 500) {
|
||||
backToTopBtn.classList.add('visible');
|
||||
} else {
|
||||
backToTopBtn.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
backToTopBtn.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Back to Top Button -->
|
||||
<button id="back-to-top" class="back-to-top" aria-label="Retour en haut">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
|
||||
</button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
234
index.html
@@ -258,9 +258,118 @@ body {
|
||||
@media (max-width: 768px) {
|
||||
.hero-title { font-size: 2.5rem; }
|
||||
}
|
||||
/* Accessibility: Reduced Motion */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
.grid-bg { animation: none; }
|
||||
.glow-orb { animation: none; }
|
||||
.float, .float-delay, .float-reverse { animation: none; }
|
||||
.pulse-glow { animation: none; }
|
||||
.neural-dot { animation: none; }
|
||||
.scan-line::after { animation: none; }
|
||||
html { scroll-behavior: auto; }
|
||||
}
|
||||
|
||||
/* Accessibility: Focus States */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--cyan-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
a:focus-visible, button:focus-visible {
|
||||
outline: 2px solid var(--cyan-primary);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Skip to Content Link */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
background: var(--cyan-primary);
|
||||
color: #000;
|
||||
padding: 8px 16px;
|
||||
z-index: 100;
|
||||
font-weight: 600;
|
||||
transition: top 0.3s;
|
||||
}
|
||||
.skip-link:focus {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* Back to Top Button */
|
||||
.back-to-top {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 212, 230, 0.9);
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 50;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.back-to-top.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
.back-to-top:hover {
|
||||
background: var(--cyan-primary);
|
||||
box-shadow: 0 0 20px rgba(0, 212, 230, 0.5);
|
||||
}
|
||||
|
||||
/* Contact Form Styles */
|
||||
.contact-form input,
|
||||
.contact-form textarea,
|
||||
.contact-form select {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
background: rgba(10, 20, 35, 0.6);
|
||||
border: 1px solid rgba(0, 212, 230, 0.2);
|
||||
border-radius: 0.75rem;
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus,
|
||||
.contact-form select:focus {
|
||||
outline: none;
|
||||
border-color: var(--cyan-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 212, 230, 0.1);
|
||||
}
|
||||
.contact-form input::placeholder,
|
||||
.contact-form textarea::placeholder {
|
||||
color: #6b7280;
|
||||
}
|
||||
.contact-form label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #9ca3af;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.contact-form select option {
|
||||
background: #0a1428;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="text-gray-400 antialiased relative overflow-x-hidden">
|
||||
<a href="#main-content" class="skip-link">Skip to main content</a>
|
||||
|
||||
<!-- Particle Background Canvas -->
|
||||
<canvas id="particles-canvas"></canvas>
|
||||
@@ -277,7 +386,7 @@ body {
|
||||
<nav class="fixed top-0 left-0 w-full z-50 glass-strong overflow-x-hidden">
|
||||
<div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12">
|
||||
<a href="/" aria-label="Atomaste Home"><img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste Logo" class="h-10 md:h-12"></a>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center gap-8 text-sm font-medium">
|
||||
<a href="#about" class="hover:text-cyan-400 transition-colors relative group">
|
||||
@@ -332,7 +441,7 @@ body {
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="relative z-10 pt-20">
|
||||
<main id="main-content" class="relative z-10 pt-20">
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="min-h-screen flex flex-col justify-center px-6 max-w-7xl mx-auto relative py-20">
|
||||
@@ -353,7 +462,7 @@ body {
|
||||
<!-- Main Headline -->
|
||||
<h1 class="hero-title text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold text-white tracking-tighter leading-[0.9]">
|
||||
<span class="text-gradient">Validate.</span><br>
|
||||
<span class="text-gray-600">Optimize.</span><br>
|
||||
<span class="text-gray-500">Optimize.</span><br>
|
||||
<span class="text-gradient-subtle">Deliver.</span>
|
||||
</h1>
|
||||
|
||||
@@ -730,8 +839,8 @@ body {
|
||||
</div>
|
||||
<div class="glass p-6 rounded-xl hover:bg-white/5 transition-all group">
|
||||
<i data-lucide="users" class="w-6 h-6 text-gray-500 group-hover:text-cyan-400 transition-colors mb-4"></i>
|
||||
<h5 class="text-white font-semibold mb-2">Consulting</h5>
|
||||
<p class="text-xs text-gray-500">Technical guidance</p>
|
||||
<h5 class="text-white font-semibold mb-2">Consulting & PM</h5>
|
||||
<p class="text-xs text-gray-500">Guidance & project coordination</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -825,7 +934,7 @@ body {
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-400 leading-relaxed mb-6">
|
||||
My optimization workflow combines rigorous engineering analysis with efficient search algorithms.
|
||||
Our optimization workflow combines rigorous engineering analysis with efficient search algorithms.
|
||||
Whether targeting thermal stability, minimizing surface deformation, improving dynamic response,
|
||||
reducing manufacturing cost, or balancing multiple competing objectives simultaneously,
|
||||
the approach adapts to your specific engineering requirements.
|
||||
@@ -1196,7 +1305,7 @@ body {
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="text-lg font-bold text-white">Fully Integrated Workflow</h5>
|
||||
<p class="text-sm text-gray-400">CAD → FEA → Optimization → Results</p>
|
||||
<p class="text-sm text-gray-400">CAD → FEA → Optimization → Results</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden md:block h-12 w-px bg-white/10"></div>
|
||||
@@ -1211,46 +1320,79 @@ body {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-32 relative border-t border-white/5">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-cyan-500/5 via-transparent to-transparent"></div>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-6 text-center relative z-10">
|
||||
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
||||
</span>
|
||||
<span class="text-green-400 font-mono text-sm">AVAILABLE FOR PROJECTS</span>
|
||||
<div class="max-w-4xl mx-auto px-6 relative z-10">
|
||||
<div class="text-center mb-12">
|
||||
<div class="inline-flex items-center gap-2 glass px-4 py-2 rounded-full mb-8">
|
||||
<span class="relative flex h-2 w-2">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2 w-2 bg-green-400"></span>
|
||||
</span>
|
||||
<span class="text-green-400 font-mono text-sm">AVAILABLE FOR PROJECTS</span>
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
||||
Let's <span class="text-gradient">optimize</span> together
|
||||
</h2>
|
||||
|
||||
<p class="text-xl text-gray-400 max-w-2xl mx-auto">
|
||||
Ready to improve your designs through rigorous FEA and optimization?
|
||||
Let's discuss your project requirements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white tracking-tight mb-8">
|
||||
Let's <span class="text-gradient">optimize</span> together
|
||||
</h2>
|
||||
<!-- Contact Form -->
|
||||
<form action="https://formspree.io/f/xbddjnrr" method="POST" class="contact-form glass-strong p-8 rounded-2xl max-w-2xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<label for="name">Name *</label>
|
||||
<input type="text" id="name" name="name" required placeholder="Your name">
|
||||
</div>
|
||||
<div>
|
||||
<label for="email">Email *</label>
|
||||
<input type="email" id="email" name="email" required placeholder="your@email.com">
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="company">Company</label>
|
||||
<input type="text" id="company" name="company" placeholder="Your company (optional)">
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="service">Service Interest</label>
|
||||
<select id="service" name="service">
|
||||
<option value="">Select a service...</option>
|
||||
<option value="fea">FEA & Simulation</option>
|
||||
<option value="optimization">Structural Optimization</option>
|
||||
<option value="optomech">Opto-Mechanical Analysis</option>
|
||||
<option value="cad">CAD Design</option>
|
||||
<option value="consulting">Technical Consulting</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-6">
|
||||
<label for="message">Message *</label>
|
||||
<textarea id="message" name="message" rows="5" required placeholder="Tell us about your project..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="w-full group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-8 py-4 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center justify-center gap-3">
|
||||
<i data-lucide="send" class="w-5 h-5"></i>
|
||||
Send Message
|
||||
<i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p class="text-xl text-gray-400 max-w-2xl mx-auto mb-12">
|
||||
Ready to improve your designs through rigorous FEA and optimization?
|
||||
Let's discuss your project requirements.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-6 mb-16">
|
||||
<a href="mailto:contact@atomaste.ca" class="group bg-gradient-to-r from-cyan-500 to-cyan-400 text-black px-10 py-5 rounded-xl font-bold text-lg hover:shadow-2xl hover:shadow-cyan-500/25 transition-all transform hover:-translate-y-1 flex items-center gap-3">
|
||||
<div class="flex items-center justify-center gap-8 mt-12">
|
||||
<a href="mailto:contact@atomaste.ca" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
||||
<i data-lucide="mail" class="w-5 h-5"></i>
|
||||
contact@atomaste.ca
|
||||
<i data-lucide="arrow-up-right" class="w-5 h-5 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center gap-8">
|
||||
<div class="w-px h-4 bg-white/10"></div>
|
||||
<a href="https://www.linkedin.com/company/atomaste/" target="_blank" class="text-gray-500 hover:text-cyan-400 transition-colors flex items-center gap-2">
|
||||
<i data-lucide="linkedin" class="w-5 h-5"></i>
|
||||
LinkedIn
|
||||
</a>
|
||||
<div class="w-px h-4 bg-white/10"></div>
|
||||
<a href="https://atomaste.ca" class="text-gray-500 hover:text-white transition-colors flex items-center gap-2">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i>
|
||||
atomaste.ca
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1261,10 +1403,10 @@ body {
|
||||
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="Media/Atomaste_light_grey_Logo.svg" alt="Atomaste" class="h-8">
|
||||
<span class="text-gray-600 font-mono text-sm">© 2025 Atomaste</span>
|
||||
<span class="text-gray-600 font-mono text-sm">© 2025 Atomaste</span>
|
||||
</div>
|
||||
<div class="text-gray-600 font-mono text-sm">
|
||||
Rouyn-Noranda, Québec
|
||||
Rouyn-Noranda, Québec
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1401,6 +1543,26 @@ body {
|
||||
document.querySelectorAll('.glass, .glass-strong').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Back to Top Button
|
||||
const backToTopBtn = document.getElementById('back-to-top');
|
||||
if (backToTopBtn) {
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > 500) {
|
||||
backToTopBtn.classList.add('visible');
|
||||
} else {
|
||||
backToTopBtn.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
backToTopBtn.addEventListener('click', () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Back to Top Button -->
|
||||
<button id="back-to-top" class="back-to-top" aria-label="Back to top">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
|
||||
</button>
|
||||
</body>
|
||||
</html>
|
||||
|
||||