P2B-WEB-2026_2025/block-01/week-02-html_and_the_dom/demo/index.html
2026-07-02 19:45:41 +02:00

443 lines
13 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Eternum Sanguinius | MU-TH-UR 6000</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="form.html">Form</a></li>
</ul>
</nav>
<div class="container">
<header>
<h1>MU-TH-UR 6000</h1>
<address>
Weyland-Yutani Corporation &mdash; Deep Space Relay Node
<code>USCSS-NOSTROMO-180924609</code><br />
<a href="mailto:comms@weyland-yutani.com">comms@weyland-yutani.com</a>
</address>
<p>
Uplink established:
<time datetime="2183-11-22T04:17:00Z">2183-11-22 // 04:17 UTC</time>
</p>
</header>
<hr />
<!-- Incoming transmission: video + audio -->
<section>
<h2>Incoming Transmission</h2>
<figure>
<video width="100%" controls poster="transmission-poster.svg" muted>
<source src="transmission.mp4" type="video/mp4" />
<source src="transmission.webm" type="video/webm" />
<track
kind="captions"
src="transmission.vtt"
srclang="en"
label="English"
/>
<p>
Your terminal does not support video playback.
<a href="transmission.mp4">Download transmission</a>.
</p>
</video>
<figcaption>
Encrypted burst from <code>LV-426 // ACHERON</code> &mdash; origin
timestamp unknown. Signal classified non-natural by MU-TH-UR 6000.
</figcaption>
</figure>
<audio controls>
<source src="signal.ogg" type="audio/ogg" />
<source src="signal.mp3" type="audio/mpeg" />
Raw audio feed unavailable on this terminal.
</audio>
</section>
<hr />
<!-- Sector map with clickable areas -->
<section>
<h2>Sector Chart &mdash; Zeta II Reticuli</h2>
<figure>
<img
src="sector-map.svg"
alt="Zeta II Reticuli sector map showing LV-426 and surrounding bodies"
width="800"
usemap="#sectormap"
/>
<map name="sectormap">
<!-- Derelict vessel on LV-426 surface -->
<area
shape="poly"
coords="480,286,500,246,520,286"
class="background-color: red;"
href="profile.html#log"
alt="Derelict vessel"
title="JUGGERNAUT-01 — DERELICT VESSEL"
/>
<!-- LV-426 Acheron — primary destination -->
<area
shape="circle"
coords="490,310,36"
href="profile.html"
alt="LV-426 Acheron"
title="LV-426 // ACHERON — DESTINATION"
/>
<!-- LV-223 — restricted -->
<area
shape="circle"
coords="240,80,24"
href="#"
alt="LV-223"
title="LV-223 — ACCESS RESTRICTED"
/>
<!-- Zeta II Reticuli A — primary star -->
<area
shape="circle"
coords="200,180,28"
href="#"
alt="Zeta II Reticuli A"
title="ζ² RETICULI A — STELLAR BODY"
/>
<!-- Zeta II Reticuli B — companion star -->
<area
shape="circle"
coords="290,170,20"
href="#"
alt="Zeta II Reticuli B"
title="ζ² RETICULI B — STELLAR BODY"
/>
<!-- Catch-all: uncharted deep space -->
<area
shape="default"
href="#"
alt="Uncharted sector"
title="DEEP SPACE — SECTOR UNCHARTED"
/>
</map>
<figcaption>
Interactive sector chart. Select a body for operational data.
<wbr />Coordinates expressed in
<abbr title="Galactic Standard Reference Frame">GSRF</abbr>.
</figcaption>
</figure>
</section>
<hr />
<!-- Raw MU-TH-UR terminal output -->
<section>
<h2>Terminal Output</h2>
<p>
To query MU-TH-UR directly, press
<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>M</kbd>. Last command issued:
</p>
<pre><samp>MU-TH-UR 6000 // QUERY INTERFACE v4.1
&gt; <kbd>STATUS ALL</kbd>
LIFE SUPPORT......OK
HYPERSLEEP........OK
REACTOR CORE......WARN — output at 29%
SPECIMEN HOLD.....CLASSIFIED
&gt; <kbd>DECRYPT ORDER-937</kbd>
ACCESS DENIED — SCIENCE OFFICER EYES ONLY</samp></pre>
<p>
Error code returned:
<samp>ERR_<var>MODULE</var>_<var>CLEARANCE</var>_INSUFFICIENT</samp>.
Replace <var>MODULE</var> and <var>CLEARANCE</var> with your assigned
values before resubmitting.
</p>
</section>
<hr />
<!-- Crew manifest table with colgroup -->
<section>
<h2>Crew Manifest</h2>
<table>
<caption>
USCSS Nostromo — Active Personnel
<small
>(authenticated
<time datetime="2183-11-22">2183-11-22</time>)</small
>
</caption>
<colgroup>
<col class="col-callsign" />
<col class="col-role" />
<col class="col-clearance" />
<col class="col-vitals" />
<col class="col-status" />
</colgroup>
<thead>
<tr>
<th scope="col">Callsign</th>
<th scope="col">Role</th>
<th scope="col">Clearance</th>
<th scope="col">Vitals</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Ripley</strong></td>
<td>Warrant Officer</td>
<td><code>LVL-4</code></td>
<td>
<meter
value="97"
min="0"
max="100"
low="40"
high="70"
optimum="100"
>
97%
</meter>
</td>
<td><span class="badge badge--ok">ACTIVE</span></td>
</tr>
<tr>
<td><strong>Dallas</strong></td>
<td>Captain</td>
<td><code>LVL-5</code></td>
<td>
<meter
value="94"
min="0"
max="100"
low="40"
high="70"
optimum="100"
>
94%
</meter>
</td>
<td><span class="badge badge--ok">ACTIVE</span></td>
</tr>
<tr>
<td>
<ruby>Ash<rt>HDS-0X1</rt></ruby>
</td>
<td>Science Officer</td>
<td><code>LVL-6</code></td>
<td>
<meter
value="100"
min="0"
max="100"
low="40"
high="70"
optimum="100"
>
100%
</meter>
</td>
<td><span class="badge badge--warn">SYNTHETIC</span></td>
</tr>
<tr>
<td><strong>Kane</strong></td>
<td>Executive Officer</td>
<td><code>LVL-4</code></td>
<td>
<meter
value="14"
min="0"
max="100"
low="40"
high="70"
optimum="100"
>
14%
</meter>
</td>
<td><span class="badge badge--crit">CRITICAL</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5">
Manifest sealed under MU-TH-UR authority &mdash; unauthorised
amendments constitute breach of
<abbr title="Interstellar Commerce Commission">ICC</abbr>
statute <code>12.7-ALPHA</code>.
</td>
</tr>
</tfoot>
</table>
</section>
<hr />
<!-- Debrief progress -->
<section>
<h2>Mission Debrief &mdash; Completion</h2>
<dl>
<dt>Section A &mdash; Incident report</dt>
<dd>
<progress value="100" max="100">100%</progress>
</dd>
<dt>Section B &mdash; Specimen data</dt>
<dd>
<progress value="3" max="10">30%</progress>
</dd>
<dt>Section C &mdash; Crew psychological assessment</dt>
<dd>
<progress max="10">Not started</progress>
</dd>
</dl>
<p>
Complete all sections before
<time datetime="2183-12-01">2183-12-01</time> or your service contract
will be <em>suspended</em>.
</p>
</section>
<hr />
<!-- Embedded ICC regulation iframe -->
<section>
<h2>
<abbr title="Interstellar Commerce Commission">ICC</abbr>
Regulation Reference
</h2>
<p>
Regulation ISCC By-law 182.32 requires all commercial vessels to
investigate signals of potential intelligent origin. Full text
rendered below via secure relay:
</p>
<iframe
src="bylaw-182.html"
title="ICC By-law 182.32 — Duty to Investigate"
width="100%"
height="160"
sandbox="allow-same-origin"
>
Terminal does not support inline document rendering.
<a href="bylaw-182.html">Open document directly</a>.
</iframe>
</section>
<hr />
<!-- Alert dialog trigger -->
<section>
<h2>Emergency Protocols</h2>
<p>
Initiate shipwide alert or open the emergency channel below. All
actions are logged to <code>MU-TH-UR</code>.
</p>
<button
type="button"
onclick="document.getElementById('alertDialog').showModal()"
>
Trigger Alert
</button>
<dialog id="alertDialog">
<h3>Confirm Shipwide Alert</h3>
<p>
This will broadcast a <strong>General Alert</strong> to all crew
stations and log the event under your operative
<abbr title="Identification">ID</abbr>. This action
<em>cannot</em> be undone.
</p>
<menu>
<li>
<button
type="button"
onclick="document.getElementById('alertDialog').close()"
>
Abort
</button>
</li>
<li>
<button type="button">Confirm broadcast</button>
</li>
</menu>
</dialog>
</section>
<hr />
<!-- Canvas: reactor readout -->
<section>
<h2>Reactor Output &mdash; Live Readout</h2>
<canvas id="reactorCanvas" width="400" height="80">
Canvas readout unavailable. Reactor at
<strong>29%</strong> output.
</canvas>
<script>
const canvas = document.getElementById("reactorCanvas")
if (canvas.getContext) {
const ctx = canvas.getContext("2d")
const w = canvas.width
const h = canvas.height
const pct = 0.29
ctx.strokeStyle = "#4a7a00"
ctx.lineWidth = 1
ctx.strokeRect(0, 0, w, h)
const gradient = ctx.createLinearGradient(0, 0, w * pct, 0)
gradient.addColorStop(0, "#ff4040")
gradient.addColorStop(1, "#c4ff00")
ctx.fillStyle = gradient
ctx.fillRect(1, 1, (w - 2) * pct, h - 2)
ctx.fillStyle = "#fff"
ctx.font = '12px "Share Tech Mono", monospace'
ctx.fillText("REACTOR OUTPUT: 29% ██ WARN", 8, h / 2 + 5)
}
</script>
</section>
<hr />
<aside>
<h2>MU-TH-UR Advisory</h2>
<blockquote>
<p>
This terminal is the exclusive property of
<strong>Weyland-Yutani Corporation</strong>. Unauthorised access
violates
<abbr title="Interstellar Commerce Commission">ICC</abbr>
Statute <code>12.7-ALPHA</code>.
<bdi>&#x202E;tcerroc si redrO</bdi>
&mdash; all other priorities rescinded.
</p>
<footer>
&mdash; MU-TH-UR 6000 // AUTO-DISPATCH //
<time datetime="2183-11-22T04:17:00Z">04:17 UTC</time>
</footer>
</blockquote>
</aside>
<hr />
<footer>
<small>
&copy; 2183 Weyland-Yutani Corporation. All rights reserved.
<q>Building Better Worlds</q> is a registered trademark. MU-TH-UR 6000
operates under <abbr title="Hyperdyne Systems">HDS</abbr> licence
<code>MU6K-7741-ESA</code>.
</small>
</footer>
</div>
</body>
</html>