Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
204 lines (194 loc) · 12.7 KB
/
Copy pathindex.html
File metadata and controls
204 lines (194 loc) · 12.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#0d171f" />
<meta
name="description"
content="An interactive showcase for Oil Data Back — an async-first oil telemetry backend foundation."
/>
<meta property="og:title" content="Oil Data Back — make the signal legible" />
<meta
property="og:description"
content="Explore the backend direction through a live, dependency-free oil telemetry playground."
/>
<meta property="og:type" content="website" />
<title>Oil Data Back — make the signal legible</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="grain" aria-hidden="true"></div>
<header class="site-header shell">
<a class="brand" href="#top" aria-label="Oil Data Back home">
<span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
<span>OIL<span class="brand-dot">.</span>DATA</span>
</a>
<nav class="nav-links" aria-label="Primary navigation">
<a class="active" href="#top">Overview</a>
<a href="#playground">Playground</a>
<a href="#architecture">Architecture</a>
<a href="development.md">Docs</a>
</nav>
<a class="nav-github" href="https://github.com/GLec1er/Oil_data_back" target="_blank" rel="noreferrer">
GitHub <span aria-hidden="true">↗</span>
</a>
</header>
<main id="top">
<section class="hero shell">
<div class="hero-copy">
<p class="eyebrow"><span class="pulse-dot"></span> ASYNC DATA PLATFORM / 01</p>
<h1>Make the<br /><em>signal</em> legible.</h1>
<p class="hero-lede">
A focused FastAPI foundation for oil-field telemetry — designed to move from raw readings to confident decisions.
</p>
<div class="hero-actions">
<a class="button button-primary" href="#playground">Explore the lab <span>↓</span></a>
<a class="text-link" href="architecture.md">Read the architecture <span>↗</span></a>
</div>
<div class="hero-note">
<span class="note-line"></span>
<span>Static docs. Real direction. Zero dependencies in the showcase.</span>
</div>
</div>
<div class="hero-console" aria-label="Sample telemetry monitor">
<div class="console-topline">
<span class="console-label">FIELD MONITOR / NORTH-07</span>
<span class="status-chip"><span class="status-dot"></span> SIMULATED</span>
</div>
<div class="console-reading">
<span class="reading-label">PRESSURE</span>
<strong><span id="hero-pressure">84.6</span><small> bar</small></strong>
<span class="reading-delta">↑ 4.2% <b>vs. last hour</b></span>
</div>
<div class="chart-wrap hero-chart-wrap">
<svg class="chart" viewBox="0 0 560 220" role="img" aria-label="Pressure trend chart">
<defs>
<linearGradient id="hero-fill" x1="0" x2="0" y1="0" y2="1">
<stop offset="0" stop-color="#f4b860" stop-opacity=".28" />
<stop offset="1" stop-color="#f4b860" stop-opacity="0" />
</linearGradient>
</defs>
<g class="chart-grid">
<line x1="0" y1="30" x2="560" y2="30" /><line x1="0" y1="85" x2="560" y2="85" />
<line x1="0" y1="140" x2="560" y2="140" /><line x1="0" y1="195" x2="560" y2="195" />
</g>
<path id="hero-area" class="chart-area" d="M0 173 L45 153 L90 161 L135 128 L180 139 L225 106 L270 117 L315 82 L360 97 L405 67 L450 78 L495 46 L540 60 L560 50 L560 220 L0 220 Z" />
<polyline id="hero-line" class="chart-line amber-line" points="0,173 45,153 90,161 135,128 180,139 225,106 270,117 315,82 360,97 405,67 450,78 495,46 540,60 560,50" />
<circle class="chart-point" cx="495" cy="46" r="5" />
</svg>
<div class="chart-axis"><span>08:00</span><span>12:00</span><span>16:00</span><span>NOW</span></div>
</div>
<div class="console-footer">
<div><span class="mini-label">INGESTION</span><strong>18.4k <small>rows/day</small></strong></div>
<div><span class="mini-label">LATENCY</span><strong>42 <small>ms p95</small></strong></div>
<div><span class="mini-label">UPTIME</span><strong>99.98<span class="unit">%</span></strong></div>
</div>
<div class="console-scan" aria-hidden="true"></div>
</div>
</section>
<section class="signal-strip shell" aria-label="Project qualities">
<div class="strip-item"><span class="strip-index">01</span><span><strong>Async-first</strong><small>built for flowing data</small></span></div>
<div class="strip-item"><span class="strip-index">02</span><span><strong>Replayable pipeline</strong><small>Kafka, Spark and Parquet marts</small></span></div>
<div class="strip-item"><span class="strip-index">03</span><span><strong>API-shaped</strong><small>clear boundaries from day one</small></span></div>
<div class="strip-item"><span class="strip-index">04</span><span><strong>Reviewable</strong><small>small surface, honest roadmap</small></span></div>
</section>
<section class="section shell" id="playground">
<div class="section-heading">
<p class="eyebrow">INTERACTIVE LAB / 02</p>
<h2>Feel the data<br /><em>change.</em></h2>
<p>Move the controls. The chart and payload respond together — a small preview of the contract the backend is being shaped around.</p>
</div>
<div class="lab-grid">
<aside class="control-panel panel">
<div class="panel-header"><span class="panel-kicker">INPUT SIGNALS</span><span class="live-label"><span class="status-dot"></span> LIVE SAMPLE</span></div>
<div class="control-block">
<div class="control-label"><label for="pressure">Pressure</label><output id="pressure-output">84.6 bar</output></div>
<input id="pressure" type="range" min="40" max="140" value="84.6" step="0.1" data-unit="bar" />
<div class="range-meta"><span>40</span><span>140 bar</span></div>
</div>
<div class="control-block">
<div class="control-label"><label for="temperature">Temperature</label><output id="temperature-output">72 °C</output></div>
<input id="temperature" type="range" min="20" max="120" value="72" step="1" data-unit="°C" />
<div class="range-meta"><span>20</span><span>120 °C</span></div>
</div>
<div class="control-block">
<div class="control-label"><label for="flow">Flow rate</label><output id="flow-output">128 m³/h</output></div>
<input id="flow" type="range" min="40" max="240" value="128" step="1" data-unit="m³/h" />
<div class="range-meta"><span>40</span><span>240 m³/h</span></div>
</div>
<div class="control-block">
<div class="control-label"><label for="water-cut">Water cut</label><output id="water-cut-output">18 %</output></div>
<input id="water-cut" type="range" min="0" max="65" value="18" step="1" data-unit="%" />
<div class="range-meta"><span>0</span><span>65 %</span></div>
</div>
<div class="control-divider"></div>
<div class="well-select-row"><label for="well">Well</label><select id="well"><option>NORTH-07</option><option>EAST-12</option><option>SOUTH-03</option></select></div>
<button id="reset-lab" class="button button-ghost" type="button">Reset sample <span>↺</span></button>
</aside>
<div class="output-panel panel">
<div class="panel-header"><span class="panel-kicker">SIGNAL PREVIEW</span><span id="signal-state" class="output-state">STABLE</span></div>
<div class="output-top">
<div><span class="mini-label">HEALTH SCORE</span><strong id="health-score">92</strong><span class="score-suffix">/100</span></div>
<div class="trend-box"><span class="mini-label">TREND</span><strong id="trend-value">+4.2%</strong><span id="trend-copy">within expected range</span></div>
</div>
<div class="chart-wrap lab-chart-wrap">
<svg class="chart" viewBox="0 0 700 260" role="img" aria-label="Interactive telemetry trend chart">
<g class="chart-grid"><line x1="0" y1="36" x2="700" y2="36" /><line x1="0" y1="98" x2="700" y2="98" /><line x1="0" y1="160" x2="700" y2="160" /><line x1="0" y1="222" x2="700" y2="222" /></g>
<path id="lab-area" class="chart-area aqua-area" d="M0 190 L58 176 L116 187 L175 146 L233 156 L291 127 L350 140 L408 98 L466 112 L525 78 L583 93 L641 57 L700 72 L700 260 L0 260 Z" />
<polyline id="lab-line" class="chart-line aqua-line" points="0,190 58,176 116,187 175,146 233,156 291,127 350,140 408,98 466,112 525,78 583,93 641,57 700,72" />
<circle id="lab-point" class="chart-point aqua-point" cx="641" cy="57" r="6" />
</svg>
<div class="chart-axis"><span>−12h</span><span>−8h</span><span>−4h</span><span>NOW</span></div>
</div>
<div class="payload-head"><span class="panel-kicker">SAMPLE PAYLOAD</span><button id="copy-payload" class="copy-button" type="button">Copy JSON <span>⧉</span></button></div>
<pre id="payload" class="payload"><code>{
"schema_version": 2,
"event_id": "sample-NORTH-07-2026-10-01T10:00:00Z",
"source_id": "sim-1",
"well_id": "NORTH-07",
"event_time": "2026-10-01T10:00:00Z",
"emitted_at": "2026-10-01T10:00:02Z",
"pressure_bar": 84.6,
"temperature_c": 72,
"flow_m3_h": 128,
"water_cut_pct": 18
}</code></pre>
<span id="copy-status" class="copy-status" role="status" aria-live="polite"></span>
</div>
</div>
</section>
<section class="section section-architecture shell" id="architecture">
<div class="section-heading compact-heading">
<p class="eyebrow">SYSTEM SHAPE / 03</p>
<h2>A small core.<br /><em>A clear path.</em></h2>
<p>The repository is intentionally legible: each layer has one job, and the next product slice is easy to see.</p>
</div>
<div class="architecture-map">
<div class="arch-node arch-source"><span class="node-number">01</span><span class="node-icon">⌁</span><h3>Telemetry</h3><p>raw field readings</p></div>
<div class="arch-connector"><span>ingest</span><i></i></div>
<div class="arch-node arch-api"><span class="node-number">02</span><span class="node-icon">⌘</span><h3>FastAPI</h3><p>versioned HTTP boundary</p></div>
<div class="arch-connector"><span>normalize</span><i></i></div>
<div class="arch-node arch-data"><span class="node-number">03</span><span class="node-icon">◒</span><h3>Pipeline</h3><p>Kafka → Spark → Parquet marts</p></div>
<div class="arch-connector"><span>explain</span><i></i></div>
<div class="arch-node arch-view"><span class="node-number">04</span><span class="node-icon">◌</span><h3>Insight</h3><p>clean data products</p></div>
</div>
<div class="architecture-foot"><span class="foot-rule"></span><p>One signal, four readable boundaries. <a href="architecture.md">See the detailed notes <span>↗</span></a></p></div>
</section>
<section class="docs-section shell">
<div class="docs-intro"><p class="eyebrow">FIELD NOTES / 04</p><h2>Everything you need<br />to <em>keep moving.</em></h2></div>
<div class="docs-grid">
<a class="doc-card" href="architecture.md"><span class="doc-number">01 / ARCHITECTURE</span><strong>How the pieces fit.</strong><span class="doc-arrow">↗</span></a>
<a class="doc-card" href="demo.md"><span class="doc-number">02 / PLAYGROUND</span><strong>What the demo proves.</strong><span class="doc-arrow">↗</span></a>
<a class="doc-card" href="development.md"><span class="doc-number">03 / DEVELOPMENT</span><strong>How to run and extend it.</strong><span class="doc-arrow">↗</span></a>
</div>
</section>
</main>
<footer class="site-footer shell">
<div class="footer-brand"><span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span><span>OIL<span class="brand-dot">.</span>DATA</span></div>
<p>Built as a clear starting point for an oil telemetry platform.</p>
<a href="https://github.com/GLec1er/Oil_data_back" target="_blank" rel="noreferrer">View repository <span>↗</span></a>
</footer>
<script src="app.js"></script>
</body>
</html>