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

222 lines
6.1 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 | Profile</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">
<h1>Profile</h1>
<div class="profile">
<figure>
<img
src="avatar.svg"
alt="Profile picture of Eternum Sanguinius"
width="128"
/>
<figcaption>Unit ID: ES-7741</figcaption>
</figure>
<div class="profile-info">
<h2>Eternum Sanguinius</h2>
<p>
<abbr title="Electronic Mail">Email</abbr>:
<a href="mailto:eternum@sanguinius.com">eternum@sanguinius.com</a>
</p>
<p>
Status: <strong>Active</strong> &mdash;
<em>Cleared for deep-space operations</em>
</p>
<p>Designation: <code>ES-7741-ALPHA</code></p>
<p>
Last sync:
<time datetime="2183-11-22T04:17:00Z">2183-11-22 // 04:17 UTC</time>
</p>
</div>
</div>
<hr />
<section>
<h2>Clearance &amp; Ratings</h2>
<table>
<thead>
<tr>
<th scope="col">System</th>
<th scope="col">Access Level</th>
<th scope="col">Integrity</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>MU-TH-UR 6000</td>
<td>ADMIN</td>
<td>
<meter
value="91"
min="0"
max="100"
low="40"
high="75"
optimum="100"
>
91%
</meter>
</td>
<td><span class="badge badge--ok">NOMINAL</span></td>
</tr>
<tr>
<td>Atmospheric Processor</td>
<td>WRITE</td>
<td>
<meter
value="58"
min="0"
max="100"
low="40"
high="75"
optimum="100"
>
58%
</meter>
</td>
<td><span class="badge badge--warn">DEGRADED</span></td>
</tr>
<tr>
<td>Hypersleep Chamber</td>
<td>READ</td>
<td>
<meter
value="22"
min="0"
max="100"
low="40"
high="75"
optimum="100"
>
22%
</meter>
</td>
<td><span class="badge badge--crit">CRITICAL</span></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Last audit: Stardate 2183.326</td>
</tr>
</tfoot>
</table>
</section>
<hr />
<section>
<h2>Mission Log</h2>
<ol>
<li>
<article>
<header>
<h3>LV-426 Survey — Sector 7G</h3>
<p><time datetime="2183-10-31">2183-10-31</time></p>
</header>
<p>
Anomalous <mark>biosignature detected</mark> at grid reference
<code>7G-NW-04</code>. Sample extraction aborted per
<abbr title="Weyland-Yutani Corporation">W-Y</abbr> directive
Order 937.
</p>
<footer>
<details>
<summary>Classified addendum</summary>
<p>
Secondary objective: retrieve specimen. Crew expendable. All
other priorities rescinded.
</p>
</details>
</footer>
</article>
</li>
<li>
<article>
<header>
<h3>
Derelict Vessel Boarding — Ref. <code>JUGGERNAUT-01</code>
</h3>
<p><time datetime="2183-11-01">2183-11-01</time></p>
</header>
<p>
Hull breach at <code>FR-9</code>. Structural integrity
<del>within acceptable parameters</del>
<ins>below minimum threshold</ins>. Recommend immediate
evacuation.
</p>
</article>
</li>
</ol>
</section>
<hr />
<section>
<h2>Biometric Snapshot</h2>
<dl>
<dt>Heart rate</dt>
<dd>62 <abbr title="beats per minute">bpm</abbr></dd>
<dt>Core temperature</dt>
<dd>36.8 °C</dd>
<dt>O<sub>2</sub> saturation</dt>
<dd>98%</dd>
<dt>Neural load</dt>
<dd>
<meter value="74" min="0" max="100" low="60" high="85" optimum="40">
74%
</meter>
</dd>
<dt>Radiation exposure</dt>
<dd>0.4 <abbr title="millisieverts">mSv</abbr> <sup>[1]</sup></dd>
</dl>
<p>
<small>
<sup>[1]</sup> Cumulative dose since last decontamination cycle.
Acceptable limit: 20 mSv/year per
<abbr title="International Commission on Radiological Protection"
>ICRP</abbr
>.
</small>
</p>
</section>
<hr />
<aside>
<h2>System Notice</h2>
<blockquote>
<p>
You have
<strong>3 unacknowledged alerts</strong>
requiring immediate attention. Report to nearest
<abbr title="Medical Officer">M.O.</abbr> station.
</p>
<footer>&mdash; MU-TH-UR 6000 // AUTO-DISPATCH</footer>
</blockquote>
</aside>
</div>
</body>
</html>