<!-- CODERS100 · part 30 -->
ion(){
    var b = document.getElementById('transceiver-btn');
    if(b){ b.style.top = '120px'; b.style.left = '12px'; b.style.zIndex = '10001'; }
  })();


===== FILE: public/coders100/images/index.html =====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coders100 — Image File</title>
<style>
  body { background: #0b0906; color: #ffd700; font-family: Georgia, serif; margin: 0; padding: 20px; }
  h1 { text-align: center; letter-spacing: 3px; }
  h2 { color: #d8a920; border-bottom: 1px solid #8a6a1c; padding-bottom: 8px; margin-top: 40px; }
  .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin: 20px 0; }
  .item { text-align: center; }
  .item img { width: 100%; max-width: 140px; border-radius: 12px; border: 1px solid #8a6a1c; }
  .item .label { font-size: 12px; color: #caa64b; margin-top: 6px; }
  .sheets .item img { max-width: 100%; }
  .sheets { display: flex; flex-direction: column; gap: 24px; }
  .sheets .item img { width: 100%; max-width: 600px; }
</style>
</head>
<body>
<h1>CODERS100 — IMAGE FILE</h1>
<p style="text-align:center;color:#8a6a1c;">All button icons and reference sheets, banknote gold on dark.</p>

<h2>Button Icons (13)</h2>
<div class="grid">
  <div class="item"><img src="btn-district.webp"><div class="label">district</div></div>
  <div class="item"><img src="btn-map.webp"><div class="label">map</div></div>
  <div class="item"><img src="btn-camera.webp"><div class="label">camera</div></div>
  <div class="item"><img src="btn-day.webp"><div class="label">day</div></div>
  <div class="item"><img src="btn-night.webp"><div class="label">night</div></div>
  <div class="item"><img src="btn-whereami.webp"><div class="label">whereami</div></div>
  <div class="item"><img src="btn-continuum.webp"><div class="label">continuum</div></div>
  <div class="item"><img src="btn-place.webp"><div class="label">place</div></div>
  <div class="item"><img src="btn-help.webp"><div class="label">help</div></div>
  <div class="item"><img src="btn-export.webp"><div class="label">export</div></div>
  <div class="item"><img src="btn-playa20.webp"><div class="label">playa 2.0</div></div>
  <div class="item"><img src="toggle-camera.webp"><div class="label">toggle camera</div></div>
  <div class="item"><img src="toggle-body.webp"><div class="label">toggle body</div></div>
</div>

<h2>Reference Sheets (6)</h2>
<div class="sheets">
  <div class="item"><img src="ref-perfect-control.webp"><div class="label">perfect control vision</div></div>
  <div class="item"><img src="ref-os-risen.webp"><div class="label">os risen</div></div>
  <div class="item"><img src="ref-page1.webp"><div class="label">page 1 — 20 buttons</div></div>
  <div class="item"><img src="ref-page2.webp"><div class="label">page 2 — 12 buttons</div></div>
  <div class="item"><img src="ref-page3.webp"><div class="label">page 3 — 12 buttons</div></div>
  <div class="item"><img src="ref-page4.webp"><div class="label">page 4 — 12 buttons</div></div>
</div>

<p style="text-align:center;color:#8a6a1c;margin-top:40px;">19 images total — 13 icons, 6 sheets. No duplicates.</p>
</body>
</html>


===== FILE: public/coders100/index.html =====
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Coders100</title>
<style>
  /* ===== FOUNDATION ===== */
  html, body {
    margin: 0; padding: 0; height: 100%;
    overflow: hidden; background: #0b0906;
    font-family: Georgia, serif;
  }
  #view {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    display: block; touch-action: none;
  }

  /* ===== CODE BAR — the line to punch in ===== */
  #codebar {
    position: fixed; top: 12px; left: 12px; right: 12px;
    z-index: 20; display: flex; gap: 8px;
  }
  #codeinput {
    flex: 1; height: 40px; border-radius: 20px;
    border: 1px solid #ffd700; background: rgba(0,0,0,0.7);
    color: #ffd700; padding: 0 16px; font-size: 14px;
    outline: none;
  }
  #codeinput::placeholder { color: #8a6a1c; }
  #codesend {
    width: 60px; height: 40px; border-radius: 20px;
    border: 1px solid #ffd700; background: #ffd700;
    color: #000; font-weight: bold; font-size: 14px;
    cursor: pointer;
  }

  /* ===== THE OS — every control lives here ===== */
  #os {
    position: fixed; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    z-index: 100; display: none;
    flex-direction: row; flex-wrap: wrap;
    gap: 12px; justify-content: center; align-items: center;
    max-width: 94vw; max-height: 60vh; overflow-y: auto;
    padding: 18px;
    background: rgba(10,8,4,0.95);
    border: 2px solid #8a6a1c; border-radius: 24px;
  }
  #os.open { display: flex; }
  #os button {
    width: 60px; height: 60px; border-radius: 50%;
    background: rgba(20,14,6,0.9); border: 1px s