panov/hipa-fallback-site
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
yuriy.p
2026-08-25 14:09:16 +06:00
commit fccaac6ed3
12 changed files with 1515 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+178
View File
@@ -0,0 +1,178 @@
<!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&nbsp;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&nbsp;06</span>
<span class="frame-run">04:17</span>
</div>
<figcaption><span class="frame-no">REEL 11</span> Grandad&#39;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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&nbsp;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>