← back to Hormuzy
mockups/009-particle-physics.html
240 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1440, initial-scale=0.9" />
<title>particle-physics-lab — Four Horsemen Studio</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter+Tight:wght@400;600&display=swap" />
<style>
:root {
--bg: #06070a;
--primary: #7afcff;
--accent1: #fffd72;
--accent2: #bd6bff;
--text: #e0e0e0;
--footer: #1a1c22;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: 'Inter Tight', sans-serif;
color: var(--text);
background: linear-gradient(135deg, var(--bg) 0%, #0a0b10 100%);
min-height: 900px;
display: flex;
flex-direction: column;
overflow: hidden;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
background: radial-gradient(circle at 30% 30%, var(--primary) 0%, transparent 70%);
color: var(--bg);
font-family: 'JetBrains Mono', monospace;
font-size: 24px;
letter-spacing: 0.05em;
position: relative;
z-index: 1;
}
header::after {
content: '';
position: absolute;
inset: 0;
background: var(--primary);
opacity: 0.1;
pointer-events: none;
mix-blend-mode: screen;
}
.project-picker {
padding: 8px 16px;
background: var(--accent1);
border-radius: 6px;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}
.project-picker:hover {
background: var(--accent2);
}
.status-indicator {
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
background: var(--accent1);
color: var(--bg);
box-shadow: 0 0 8px rgba(122, 252, 255, 0.3);
}
.main {
display: flex;
flex: 1;
overflow: hidden;
}
.chat-pane {
width: 40%;
display: flex;
flex-direction: column;
background: var(--bg);
padding: 24px;
overflow-y: auto;
position: relative;
}
.chat-messages {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.message {
padding: 12px 16px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
font-size: 14px;
line-height: 1.4;
position: relative;
}
.message::before {
content: '→ ';
color: var(--accent1);
font-weight: 600;
}
.slash-command {
color: var(--accent2);
font-weight: 700;
}
.chat-input {
display: flex;
gap: 12px;
background: var(--accent1);
border-radius: 12px;
padding: 8px 16px;
font-size: 14px;
position: relative;
}
.chat-input input {
flex: 1;
background: transparent;
border: none;
color: var(--bg);
outline: none;
font-family: 'JetBrains Mono', monospace;
}
.chat-input button {
background: none;
border: none;
color: var(--accent2);
font-size: 16px;
cursor: pointer;
}
.workspace {
width: 60%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 24px;
padding: 24px;
overflow-y: auto;
}
.panel {
background: rgba(255, 255, 255, 0.01);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 10px;
display: flex;
flex-direction: column;
padding: 16px;
position: relative;
}
.panel-header {
font-family: 'JetBrains Mono', monospace;
font-size: 18px;
color: var(--primary);
margin-bottom: 12px;
}
.panel-body {
font-size: 14px;
line-height: 1.6;
color: var(--text);
display: flex;
flex-direction: column;
gap: 8px;
}
.panel-body code {
color: var(--accent2);
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
}
.panel-body .footnote {
font-size: 12px;
color: rgba(255, 255, 255, 0.4);
margin-top: 4px;
}
footer {
padding: 12px 32px;
font-size: 12px;
color: rgba(255, 255, 255, 0.3);
text-align: right;
}
</style>
</head>
<body>
<header>
<span>FOUR HORSEMEN STUDIO</span>
<div>
<div class="project-picker">PROJECT ▼</div>
<div class="status-indicator">idle</div>
</div>
</header>
<div class="main">
<div class="chat-pane">
<div class="chat-messages">
<div class="message">User: /run-topic "Quantum Foam Topology"</div>
<div class="message">Agent: Initializing lattice symmetry analysis... σ ∈ Σ<sub>3</sub> → Σ<sub>7</sub> (see <a href="#">arXiv:2304.12345</a>)</div>
<div class="message">User: /stampede "Lattice Perturbation"</div>
<div class="message">Agent: Engaging 10<sup>6</sup> parallel simulations. Expected runtime: 4.7 ± 0.3 τ<sub>Planck</sub></div>
</div>
<div class="chat-input">
<input type="text" placeholder="→ /help" />
<button>⏎</button>
</div>
</div>
<div class="workspace">
<div class="panel">
<div class="panel-header">Preview</div>
<div class="panel-body">
<p>Rendering 3D manifold with <code>χ = 2.718</code> curvature. Visualizing spin network states at <code>ε = 10<sup>-18</sup></code> resolution.</p>
<p class="footnote">Footnote: This is not a simulation of actual spacetime.</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Paper</div>
<div class="panel-body">
<p>Section 3.1: <em>Noncommutative Geometry in Loop Quantum Gravity</em> (draft v2.1)</p>
<p><code>Lemma 3.2:</code> If <code>θ ∈ Θ</code> then <code>∃φ ∈ Φ</code> such that <code>φ(θ) ≡ 0 mod ℤ</code>.</p>
<p class="footnote">Footnote: Theorem 3.1 requires <code>ℏ = 1</code> normalization.</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Figma</div>
<div class="panel-body">
<p>Design system component: <code>ParticleVector</code> with <code>α = 0.7</code> opacity and <code>β = 1.2</code> scattering.</p>
<p>Mockup: 3D lattice grid with <code>δ = 0.001</code> edge distortion.</p>
<p class="footnote">Footnote: Not to scale with actual quantum foam.</p>
</div>
</div>
<div class="panel">
<div class="panel-header">Canva</div>
<div class="panel-body">
<p>Poster template: "Quantum Cosmology 2024" with <code>γ = 0.23</code> color saturation.</p>
<p>Includes placeholder for <code>ρ_c = 0.92</code> critical density visualization.</p>
<p class="footnote">Footnote: Poster does not imply endorsement by any spacetime continuum.</p>
</div>
</div>
</div>
</div>
<footer>
particle-physics-lab — Four Horsemen Studio (β v0.9.7)
</footer>
</body>
</html>