Skip to content

Commit f90cf79

Browse files
AionSystemAionSystem
authored
Update index.html
1 parent 18c8d38 commit f90cf79

1 file changed

Lines changed: 226 additions & 0 deletions

File tree

‎simulators/index.html‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,227 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="description" content="AionSystem Simulator Suite — Physics, Engineering, and Scientific Simulators. Citation-backed. Red-teamed. AION Verified.">
7+
<title>Simulators — AionSystem · Sheldon K. Salmon</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,900;1,300&display=swap" rel="stylesheet">
10+
<style>
11+
:root {
12+
--bg: #08090b;
13+
--surface: #0e1117;
14+
--panel: #141920;
15+
--border: #1e2730;
16+
--amber: #f0a500;
17+
--amber-d: #b07800;
18+
--amber-l: #ffc947;
19+
--gold: #D4AF37;
20+
--text: #c4d4de;
21+
--muted: #4e5f6a;
22+
--dim: #2a3540;
23+
--mono: 'Share Tech Mono', monospace;
24+
--sans: 'Barlow Condensed', sans-serif;
25+
--ease: cubic-bezier(0.16, 1, 0.3, 1);
26+
}
27+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
28+
body { background: var(--bg); color: var(--text); font-family: var(--sans); overflow-x: hidden; }
29+
body::before {
30+
content:''; position:fixed; inset:0;
31+
background-image: linear-gradient(rgba(240,165,0,0.025) 1px,transparent 1px),
32+
linear-gradient(90deg,rgba(240,165,0,0.025) 1px,transparent 1px);
33+
background-size:48px 48px; pointer-events:none; z-index:0;
34+
}
35+
36+
/* NAV */
37+
nav {
38+
position: sticky; top: 0; z-index: 100;
39+
display: flex; align-items: center; justify-content: space-between;
40+
padding: 0 40px; height: 56px;
41+
background: rgba(8,9,11,0.94); backdrop-filter: blur(12px);
42+
border-bottom: 1px solid var(--border);
43+
}
44+
.nav-logo { font-family:var(--mono); font-size:13px; letter-spacing:3px; color:var(--amber); text-decoration:none; }
45+
.nav-logo span { color:var(--muted); }
46+
.nav-back { font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); text-decoration:none; text-transform:uppercase; transition:color 0.2s; }
47+
.nav-back:hover { color:var(--amber); }
48+
49+
/* WRAPPER */
50+
.wrapper { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:64px 40px 80px; }
51+
52+
/* PAGE HEADER */
53+
.page-header { margin-bottom: 56px; }
54+
.page-eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--amber); text-transform:uppercase; margin-bottom:12px; }
55+
.page-title { font-family:var(--sans); font-size:clamp(36px,6vw,72px); font-weight:900; letter-spacing:2px; text-transform:uppercase; line-height:0.95; color:var(--text); }
56+
.page-title em { color:var(--amber); font-style:normal; }
57+
.page-sub { font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:2px; margin-top:16px; line-height:1.8; }
58+
59+
/* FILTER ROW */
60+
.filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--border); }
61+
.filter-btn { font-family:var(--mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; padding:6px 14px; background:var(--surface); border:1px solid var(--border); color:var(--muted); cursor:pointer; transition:all 0.15s; }
62+
.filter-btn:hover { border-color:var(--amber-d); color:var(--text); }
63+
.filter-btn.active { background:var(--amber); color:#000; border-color:var(--amber); font-weight:700; }
64+
65+
/* SIMULATOR GRID */
66+
.sim-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border:1px solid var(--border); }
67+
@media (max-width:900px) { .sim-grid { grid-template-columns:repeat(2,1fr); } }
68+
@media (max-width:560px) { .sim-grid { grid-template-columns:1fr; } }
69+
70+
.sim-card { background:var(--surface); padding:32px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:0; transition:background 0.2s; }
71+
.sim-card.live { cursor:pointer; }
72+
.sim-card.live:hover { background:var(--panel); }
73+
.sim-card a { text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }
74+
75+
.sim-card::after {
76+
content:''; position:absolute; top:0; left:0; right:0; height:2px;
77+
background:var(--amber); transform:scaleX(0); transform-origin:left; transition:transform 0.3s var(--ease);
78+
}
79+
.sim-card.live:hover::after { transform:scaleX(1); }
80+
81+
.sim-status { position:absolute; top:20px; right:20px; font-family:var(--mono); font-size:9px; letter-spacing:1.5px; text-transform:uppercase; padding:3px 8px; }
82+
.status-live { background:rgba(0,230,118,0.1); color:#00e676; border:1px solid #00e676; }
83+
.status-soon { background:rgba(78,95,106,0.15); color:var(--muted); border:1px solid var(--dim); }
84+
85+
.sim-domain { font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--amber-d); text-transform:uppercase; margin-bottom:16px; margin-top:4px; }
86+
.sim-title { font-family:var(--sans); font-size:clamp(22px,3vw,30px); font-weight:900; letter-spacing:1px; text-transform:uppercase; color:var(--text); line-height:1.1; margin-bottom:12px; }
87+
.sim-desc { font-family:var(--sans); font-size:14px; font-weight:300; color:var(--muted); line-height:1.7; flex:1; margin-bottom:20px; }
88+
89+
.sim-meta { font-family:var(--mono); font-size:10px; color:var(--dim); letter-spacing:1px; line-height:1.9; border-top:1px solid var(--border); padding-top:14px; margin-top:auto; }
90+
.sim-meta strong { color:var(--amber-d); }
91+
92+
.sim-cta { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--amber); text-transform:uppercase; margin-top:14px; text-decoration:none; }
93+
.sim-cta:hover { text-decoration:underline; }
94+
95+
/* COMING CARD */
96+
.sim-card.coming { opacity:0.45; }
97+
98+
/* METHODOLOGY NOTE */
99+
.method-note { margin-top:40px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--amber); padding:24px 28px; display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; }
100+
.method-note-icon { font-family:var(--mono); font-size:24px; color:var(--amber); flex-shrink:0; }
101+
.method-note-text h3 { font-family:var(--sans); font-size:18px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
102+
.method-note-text p { font-family:var(--mono); font-size:11px; color:var(--muted); line-height:1.8; max-width:640px; }
103+
104+
/* FOOTER STRIP */
105+
footer { border-top:1px solid var(--border); padding:32px 40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; max-width:1200px; margin:0 auto; position:relative; z-index:1; }
106+
footer p { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; }
107+
footer a { color:var(--amber-d); text-decoration:none; }
108+
footer a:hover { color:var(--amber); }
109+
110+
@media(max-width:640px){ .wrapper { padding:48px 20px 60px; } nav { padding:0 20px; } footer { padding:24px 20px; } }
111+
</style>
112+
</head>
113+
<body>
114+
115+
<nav>
116+
<a href="/" class="nav-logo">AION<span>system</span></a>
117+
<a href="/" class="nav-back">← Back to Home</a>
118+
</nav>
119+
120+
<div class="wrapper">
121+
122+
<!-- PAGE HEADER -->
123+
<div class="page-header">
124+
<div class="page-eyebrow">// AionSystem · Simulation Suite</div>
125+
<h1 class="page-title">Verified<br><em>Simulators</em></h1>
126+
<div class="page-sub">
127+
Physics · Engineering · Medical · Financial · Environmental<br>
128+
Every simulator: citation-backed · red-teamed · peer-reviewed · AION Verified badge
129+
</div>
130+
</div>
131+
132+
<!-- FILTER -->
133+
<div class="filter-row">
134+
<button class="filter-btn active">All</button>
135+
<button class="filter-btn">Physics</button>
136+
<button class="filter-btn">Engineering</button>
137+
<button class="filter-btn">Medical</button>
138+
<button class="filter-btn">Financial</button>
139+
<button class="filter-btn">Environmental</button>
140+
</div>
141+
142+
<!-- GRID -->
143+
<div class="sim-grid">
144+
145+
<!-- LIVE: ROLLER COASTER -->
146+
<div class="sim-card live">
147+
<a href="/simulators/roller-coaster/">
148+
<span class="sim-status status-live">● Live</span>
149+
<div class="sim-domain">Physics · AP Curriculum</div>
150+
<div class="sim-title">Roller Coaster Physics</div>
151+
<div class="sim-desc">10 interactive modules — energy conservation, g-forces, loop design, hill profiling, banked curves, spring launches, and full track simulation. Citation-backed against NASA physiological limits.</div>
152+
<div class="sim-meta">
153+
<strong>Ref:</strong> Tony Wayne AP Physics Guide<br>
154+
<strong>Red team:</strong> 2 passes · 10 issues resolved<br>
155+
<strong>Client:</strong> Saleem Raja Haja · Kuwait<br>
156+
<strong>Date:</strong> March 2026
157+
</div>
158+
<span class="sim-cta">Launch Simulator →</span>
159+
</a>
160+
</div>
161+
162+
<!-- COMING: PROJECTILE -->
163+
<div class="sim-card coming">
164+
<span class="sim-status status-soon">Coming</span>
165+
<div class="sim-domain">Physics · Mechanics</div>
166+
<div class="sim-title">Projectile Motion</div>
167+
<div class="sim-desc">Cannon launch, drag coefficient, target practice mode, Mars gravity selector. Same AION design system and methodology as the roller coaster suite.</div>
168+
<div class="sim-meta"><strong>Status:</strong> Planned — Q2 2026</div>
169+
</div>
170+
171+
<!-- COMING: BRIDGE -->
172+
<div class="sim-card coming">
173+
<span class="sim-status status-soon">Coming</span>
174+
<div class="sim-domain">Engineering · Civil</div>
175+
<div class="sim-title">Bridge Structural<br>Load Simulator</div>
176+
<div class="sim-desc">Truss stress calculator, material cost estimator, load testing visualizer, failure point prediction, earthquake simulation.</div>
177+
<div class="sim-meta"><strong>Status:</strong> Planned — Q2 2026</div>
178+
</div>
179+
180+
<!-- COMING: FLUID -->
181+
<div class="sim-card coming">
182+
<span class="sim-status status-soon">Coming</span>
183+
<div class="sim-domain">Fluid Dynamics · Energy</div>
184+
<div class="sim-title">Pipeline Flow<br>Simulator</div>
185+
<div class="sim-desc">Bernoulli's principle, Venturi effect, pipe flow with obstacles, Reynolds number visualization. Directly relevant to oil &amp; gas sector infrastructure planning.</div>
186+
<div class="sim-meta"><strong>Status:</strong> Planned — Q2 2026</div>
187+
</div>
188+
189+
<!-- COMING: PHARMACOKINETICS -->
190+
<div class="sim-card coming">
191+
<span class="sim-status status-soon">Coming</span>
192+
<div class="sim-domain">Medical · Pharmacology</div>
193+
<div class="sim-title">Drug Pharma&shy;cokinetics</div>
194+
<div class="sim-desc">Absorption curves, half-life visualization, dosing schedule optimizer, overdose warning system. Pre-med curriculum tool.</div>
195+
<div class="sim-meta"><strong>Status:</strong> Planned — Q3 2026</div>
196+
</div>
197+
198+
<!-- COMING: CLIMATE -->
199+
<div class="sim-card coming">
200+
<span class="sim-status status-soon">Coming</span>
201+
<div class="sim-domain">Environmental · Climate</div>
202+
<div class="sim-title">Climate Scenario<br>Simulator</div>
203+
<div class="sim-desc">CO₂ emission scenarios, temperature projection, sea level rise visualizer, policy impact comparison, tipping point warnings.</div>
204+
<div class="sim-meta"><strong>Status:</strong> Planned — Q3 2026</div>
205+
</div>
206+
207+
</div>
208+
209+
<!-- METHODOLOGY NOTE -->
210+
<div class="method-note">
211+
<div class="method-note-icon">◈</div>
212+
<div class="method-note-text">
213+
<h3>AION Verified — What It Means</h3>
214+
<p>Every simulator in this suite carries the AION Verified Simulator badge. This means: the physics was verified against cited peer sources, the code was red-teamed for silent errors and edge cases, and the output was peer-reviewed before release. The Red Team tab inside each simulator documents every issue found and how it was resolved. Nothing ships clean without earning it.</p>
215+
</div>
216+
</div>
217+
218+
</div>
219+
220+
<footer>
221+
<p>AionSystem · <a href="/">Sheldon K. Salmon</a> · AI Reliability Architect · New York · March 2026</p>
222+
<p><a href="/certify/">Verify a badge</a> &nbsp;·&nbsp; <a href="https://github.com/AionSystem" target="_blank" rel="noopener">GitHub ↗</a></p>
223+
</footer>
224+
225+
</body>
226+
</html>
1227

0 commit comments

Comments
 (0)