179 lines
7.8 KiB
HTML
179 lines
7.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>hipa — the family archive</title>
|
||
<meta name="description" content="A private archive of family photographs and home films. Sign in to open it.">
|
||
<meta name="robots" content="noindex, nofollow">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@400;500;700&family=Fraunces:SOFT,WONK,opsz,wght@0..100,0..1,9..144,300..900&family=Instrument+Sans:wght@400..700&display=swap" rel="stylesheet">
|
||
<!-- Bump ?v= when you change these; there is no build step to fingerprint them. -->
|
||
<link rel="stylesheet" href="styles.css?v=3">
|
||
</head>
|
||
<body>
|
||
|
||
<a class="skip" href="#gate">Skip to sign in</a>
|
||
|
||
<header class="topbar">
|
||
<a class="mark" href="/" aria-label="hipa, the family archive">
|
||
<svg class="mark-glyph" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||
<circle cx="12" cy="12" r="10.25" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||
<path d="M12 2v7.2M21.7 15.2l-6.9-2.6M6.3 21.2l4.3-5.9" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||
</svg>
|
||
<span class="mark-word">hipa</span>
|
||
</a>
|
||
</header>
|
||
|
||
<main class="stage">
|
||
|
||
<section class="lede">
|
||
<p class="eyebrow">Rolls 001–612 · kept since 1974</p>
|
||
<h1 class="lede-title">Every afternoon<br>we bothered<br>to photograph.</h1>
|
||
<p class="lede-sub">
|
||
Fifty-one years of family photographs and home films, scanned off the
|
||
shelf and stored in one place. Sign in to open it.
|
||
</p>
|
||
|
||
<div class="sheet" role="group" aria-label="Frames from the archive">
|
||
|
||
<figure class="frame" style="--tilt:-2.1deg; --lift:6px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/01-first-roll.jpg" alt="Sheets on a washing line in hard afternoon sun"
|
||
width="720" height="480" loading="eager" fetchpriority="high" decoding="async">
|
||
<span class="frame-stamp">'74 08</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">FR 03</span> The first roll</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame frame--film" style="--tilt:1.4deg; --lift:0px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/02-grandads-8mm.jpg" alt="The front room window, nets drawn, a plant on the sill"
|
||
width="720" height="540" loading="eager" decoding="async">
|
||
<span class="frame-stamp">'81 06</span>
|
||
<span class="frame-run">04:17</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">REEL 11</span> Grandad's 8mm</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame" style="--tilt:-0.8deg; --lift:14px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/03-issyk.jpg" alt="The lake at Issyk, footprints leading down the wet sand"
|
||
width="720" height="480" loading="eager" decoding="async">
|
||
<span class="frame-stamp">'89 07</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">FR 21</span> Issyk, every July</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame" style="--tilt:2.6deg; --lift:4px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/04-long-table.jpg" alt="A long table laid for a meal, lit by one window"
|
||
width="720" height="480" loading="lazy" decoding="async">
|
||
<span class="frame-stamp">'96 12</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">FR 08</span> The long table</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame" style="--tilt:-2.4deg; --lift:9px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/05-marta-and-ilya.jpg" alt="White flowers on a table"
|
||
width="720" height="480" loading="lazy" decoding="async">
|
||
<span class="frame-stamp">'98 09</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">FR 02</span> Marta and Ilya</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame frame--film" style="--tilt:-1.6deg; --lift:11px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/06-school-concert.jpg" alt="A lit school stage seen from the back of a dark hall"
|
||
width="720" height="540" loading="lazy" decoding="async">
|
||
<span class="frame-stamp">'03 05</span>
|
||
<span class="frame-run">21:52</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">TAPE 04</span> School concert</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame frame--film" style="--tilt:2.2deg; --lift:5px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/07-nine-candles.jpg" alt="Nine lit candles on a cake in a dark room"
|
||
width="720" height="540" loading="lazy" decoding="async">
|
||
<span class="frame-stamp">'11 03</span>
|
||
<span class="frame-run">02:38</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">CLIP 88</span> Nine candles</figcaption>
|
||
</figure>
|
||
|
||
<figure class="frame" style="--tilt:1.1deg; --lift:2px">
|
||
<div class="frame-print">
|
||
<img class="frame-img" src="img/08-chimbulak.jpg" alt="A ski slope with the chairlift running above it"
|
||
width="720" height="480" loading="lazy" decoding="async">
|
||
<span class="frame-stamp">'19 01</span>
|
||
</div>
|
||
<figcaption><span class="frame-no">FR 14</span> Chimbulak, cold</figcaption>
|
||
</figure>
|
||
|
||
</div>
|
||
|
||
<dl class="ticker">
|
||
<div class="ticker-cell"><dt>Photographs</dt><dd>12,480</dd></div>
|
||
<div class="ticker-cell"><dt>Home films</dt><dd>610</dd></div>
|
||
<div class="ticker-cell"><dt>Earliest</dt><dd>Aug 1974</dd></div>
|
||
<div class="ticker-cell"><dt>Last backup</dt><dd>18 Aug 2026</dd></div>
|
||
</dl>
|
||
</section>
|
||
|
||
<section class="gate" id="gate" aria-labelledby="gate-title">
|
||
<span class="corner corner--tl" aria-hidden="true"></span>
|
||
<span class="corner corner--tr" aria-hidden="true"></span>
|
||
<span class="corner corner--bl" aria-hidden="true"></span>
|
||
<span class="corner corner--br" aria-hidden="true"></span>
|
||
|
||
<div class="gate-inner">
|
||
<p class="gate-eyebrow">Household sign in</p>
|
||
<h2 class="gate-title" id="gate-title">Open the archive</h2>
|
||
|
||
<form class="form" id="signin" novalidate>
|
||
<div class="field">
|
||
<label for="email">Email</label>
|
||
<input id="email" name="email" type="email" inputmode="email"
|
||
autocomplete="username" placeholder="you@household" spellcheck="false">
|
||
</div>
|
||
|
||
<div class="field">
|
||
<label for="pass">Passphrase</label>
|
||
<input id="pass" name="pass" type="password" autocomplete="current-password"
|
||
placeholder="••••••••••">
|
||
<button class="reveal" type="button" data-reveal aria-pressed="false">Show</button>
|
||
</div>
|
||
|
||
<p class="notice" id="notice" role="status" aria-live="polite"></p>
|
||
|
||
<button class="unlock" type="submit">
|
||
<span class="unlock-label">Unlock</span>
|
||
<span class="unlock-blade" aria-hidden="true"></span>
|
||
</button>
|
||
</form>
|
||
|
||
<div class="gate-alt">
|
||
<button class="link" type="button" data-passkey>Use a passkey instead</button>
|
||
</div>
|
||
|
||
<p class="gate-foot">
|
||
No sign in yet? Ask whoever keeps the archive to send you an invite.
|
||
<br>Trouble getting in — <a href="mailto:archive@hipa.troptor.com">archive@hipa.troptor.com</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<footer class="footfold">
|
||
<p>hipa · a family archive</p>
|
||
<p class="footfold-mono">4.2 TB · encrypted at rest · nothing here is public</p>
|
||
</footer>
|
||
|
||
<script src="app.js?v=3"></script>
|
||
</body>
|
||
</html>
|