starter.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Amber Console — starter</title>
<meta name="description" content="The smallest complete Amber Console page: one stylesheet, no build step, no JavaScript — a framed panel with buttons, a toggle, a meter and an alarm, commented line by line.">

<!-- ===================================================================
     THIS IS THE WHOLE SETUP. One stylesheet, no build step, no server.
     Save this file, double-click it, start deleting things.

     There is no JavaScript on this page on purpose. Everything you see
     below — the glow, the scanlines, the cell mesh, the toggle flipping
     between ON and OFF — is CSS. The optional JS in dist/ adds the demo
     switches and a few effects that need to read the previous value of
     something; you do not need it to build with this.
     =================================================================== -->
<link rel="stylesheet" href="dist/amber-console.css">
</head>

<!-- .ac-screen is the frame. The classes after it are the screen
     simulations:
       ac-bloom      the plasma panel — glow + the cell mesh
       ac-crt        the tube — scanlines, vignette, a slow drift
       ac-afterglow  persistence — things fade out instead of vanishing
     Each <span> below is the layer one of those paints into; keep the
     span for each class you keep, and delete both together.

     PICK ONE TECHNOLOGY. ac-bloom and ac-crt are not two layers of glass,
     they are two kinds of display, and no panel is both — a screen door
     is not a scanline, and there is no scan in a plasma panel to blank.
     The optional JS enforces this and switches one off when the other
     comes on; in plain CSS nothing stops you, so it is on you here.
     Both off is fine too: that is a flat lit surface.

     ac-afterglow is not a third technology, it is what the tube's
     phosphor does after the beam has gone — so it rides with ac-crt.
     To swap this page to the amber tube, put this on <body>:

         class="ac-screen ac-crt ac-afterglow"

     and replace the ac-mesh span below with these two:

         <span class="ac-retrace"></span>
         <span class="ac-persist"></span>

     then set the palette to a phosphor — see THREE THINGS TO TRY at the
     bottom of this file. -->
<body class="ac-screen ac-bloom">
  <span class="ac-mesh"></span>

  <!-- .ac-screen__body is the padded content area inside the frame. It is
       styled by class, so make it your <main> and the page gets a landmark
       for free — screen-reader users can jump straight here. -->
  <main class="ac-screen__body">

    <!-- .ac-grid--console is the canonical split: what the operator DOES on
         the left, what the panel REPORTS on the right. It folds to one
         column below 900px on its own, so there is nothing to write for
         the phone. Delete the wrapper and both panels simply stack. -->
    <div class="ac-grid ac-grid--console">

      <!-- ------------------------------------------------ operate -- -->
      <!-- A panel is the basic box. The title sits in the border. -->
      <div class="ac-panel">
        <span class="ac-panel__title">Reactor Control</span>

        <!-- NOTHING SPACES A PANEL'S CHILDREN FOR YOU. The panel draws a
             border and pads it; the gaps between the rows inside come from
             a layout box, and .ac-stack is that box — a flex column whose
             gap is --ac-gap, defaulting to 16px. Take this wrapper out and
             everything below it sits flush against its neighbour. -->
        <div class="ac-stack">

          <!-- A status bar is the machine talking: inverse video, always. -->
          <div class="ac-statusbar" role="status"><span>STATUS:AUTO MODE</span></div>

          <!-- .ac-row lays things out in a line. --ac-gap sets the spacing;
               every token this framework owns starts with --ac- so it can
               never collide with your own CSS. -->
          <div class="ac-row ac-row--center ac-row--wrap" style="--ac-gap: 12px">
            <button class="ac-btn ac-btn--filled">Run</button>
            <button class="ac-btn">Hold</button>
            <button class="ac-btn ac-btn--dim">Standby</button>
            <button class="ac-btn" disabled>Offline</button>
          </div>

          <!-- An input is a recessed well, and what you type in it is the
               brightest ink on the panel — it is the one part a human wrote.
               The label goes inside the .ac-field, so the whole thing is one
               <label> and the click target includes the text. -->
          <div class="ac-row ac-row--wrap" style="--ac-gap: 12px">
            <label class="ac-field ac-grow">
              <span class="ac-field__label">Setpoint:</span>
              <input class="ac-input" type="text" value="740" inputmode="numeric">
            </label>
            <label class="ac-field">
              <span class="ac-field__label">Mode:</span>
              <!-- The wrapper exists only to hang the ▼ on. That glyph is a
                   character in the terminal font, never an icon. -->
              <span class="ac-select">
                <select class="ac-input">
                  <option>Auto</option>
                  <option>Manual</option>
                  <option>Test</option>
                </select>
              </span>
            </label>
          </div>

          <!-- A toggle that works with no JavaScript: it is a <label> wrapping
               a real checkbox, so the browser does the state. The ON/OFF text
               is required — on a one-colour screen the thumb position alone is
               ambiguous. -->
          <label class="ac-toggle ac-toggle--input">
            <span>Coolant Pump</span>
            <input type="checkbox" checked>
            <span class="ac-toggle__track"><span class="ac-toggle__thumb"></span></span>
            <span class="ac-toggle__state"></span>
          </label>

          <!-- Checkboxes are STATUS BITS, not to-do ticks: a set bit fills the
               square solid, the way an indicator lamp lights, and there is no
               tick glyph anywhere in the system. Group them in a fieldset; the
               legend can be hidden with .ac-sr-only when the panel title
               already says what they are. -->
          <fieldset class="ac-row ac-row--wrap" style="--ac-gap: 20px; border: none; padding: 0; margin: 0">
            <legend class="ac-sr-only">Interlocks</legend>
            <label class="ac-check"><input type="checkbox" checked><span>Door</span></label>
            <label class="ac-check"><input type="checkbox" checked><span>Pressure</span></label>
            <label class="ac-check"><input type="checkbox"><span>Bypass</span></label>
          </fieldset>

          <!-- A bar graph. The value is a 0-100 number on the TRACK, and the
               aria attributes carry the same number for anyone who cannot see
               the bar. The fill is stepped at every size on purpose: a smooth
               bar would claim a precision the instrument does not have. -->
          <div class="ac-meter">
            <div class="ac-meter__track" style="--ac-meter-value: 62"
                 role="progressbar" aria-valuenow="62" aria-valuemin="0" aria-valuemax="100"
                 aria-label="Core temperature">
              <div class="ac-meter__bar"></div>
            </div>
            <div class="ac-meter__scale"><span>0</span><span>50</span><span>100</span></div>
          </div>

          <!-- Alarms have no red to use, so danger is inverse video plus a
               blink. Add ac-blink to make it flash. -->
          <div class="ac-banner ac-banner--filled ac-blink" role="alert">Pressure High</div>
        </div>
      </div>

      <!-- --------------------------------------------- instrument -- -->
      <!-- Same panel, dimmed. --dim is a DRIVE LEVEL and not a grey: the
           halo drops with the ink, so the region scatters less light and
           recedes behind the column you are working in. -->
      <div class="ac-panel ac-panel--dim">
        <span class="ac-panel__title">Core Instrumentation</span>

        <div class="ac-stack">

          <!-- A readout is a number to be read across the room. The label
               rides in inverse video above it, the unit at body size beside
               it so the digits keep the eye. -->
          <div class="ac-row ac-row--wrap" style="--ac-gap: 24px">
            <div class="ac-readout">
              <div class="ac-readout__label">Core Temp</div>
              <div class="ac-readout__value">618<span class="ac-readout__unit">C</span></div>
            </div>
            <div class="ac-readout">
              <div class="ac-readout__label">Flow</div>
              <div class="ac-readout__value">12.4<span class="ac-readout__unit">M3/S</span></div>
            </div>
          </div>

          <!-- The only divider in the system, at the 2px stroke. -->
          <hr class="ac-hr">

          <!-- A list is a fixed set of named readings, joined by leader dots.
               If it is sortable, or has more than one value per key, it is a
               table instead. -->
          <dl class="ac-list">
            <div class="ac-list__item">
              <dt class="ac-list__key">Rod Position</dt>
              <span class="ac-list__fill"></span>
              <dd class="ac-list__value">48%</dd>
            </div>
            <div class="ac-list__item">
              <dt class="ac-list__key">Loop Pressure</dt>
              <span class="ac-list__fill"></span>
              <dd class="ac-list__value">7.1 MPA</dd>
            </div>
            <div class="ac-list__item">
              <dt class="ac-list__key">Uptime</dt>
              <span class="ac-list__fill"></span>
              <dd class="ac-list__value">0412:07</dd>
            </div>
          </dl>

          <!-- Badges are micro tags in the pixel face — a label, never a
               message. This is the one place in the system with a 1px
               border, because 2px on something 8px tall reads as a block. -->
          <div class="ac-row ac-row--wrap ac-row--center" style="--ac-gap: 8px">
            <span class="ac-badge">Loop A</span>
            <span class="ac-badge ac-badge--filled">Armed</span>
            <span class="ac-badge ac-badge--dim">Spare</span>
          </div>
        </div>
      </div>

    </div>

    <!-- Corners are chamfered by default, the way a coarse panel could
         actually draw them. Add .ac-rounded to any element or region to
         get a smooth arc instead. -->
    <div class="ac-panel ac-rounded">
      <span class="ac-panel__title">Rounded Region</span>
      <div class="ac-row ac-row--wrap" style="--ac-gap: 12px">
        <button class="ac-btn">Softer</button>
        <button class="ac-btn ac-btn--filled">Corners</button>
      </div>
    </div>

  </main>
</body>
</html>

<!-- ======================================================================
     THREE THINGS TO TRY NEXT

     1. CHANGE THE HARDWARE. Put these on the <html> tag above:
            <html lang="en" data-ac-tech="crt" data-ac-emitter="p3">
        That is the classic amber terminal. Also try:
            plasma / neon      the default, orange
            plasma / helium    pale pink
            plasma / argon     lavender
            crt / p1           green
            crt / p7           blue text, green afterglow (radar)
            crt / p39          yellow-green, very long persistence

     2. TURN THE BLINKING OFF. On the <html> tag:
            data-ac-style-blink="off"
        Alarms still read — they keep the inverse fill.

     3. OVERRIDE ANYTHING. Every colour, size and space is a custom
        property you can set yourself. In a <style> block:
            :root { --ac-radius: 0px; --ac-type-body: 20px; }
        The full list is in README.md.

     ACCESSIBILITY IS ALREADY HANDLED. The framework respects reduced-motion,
     high-contrast mode and print, and every colour pair is contrast-checked.
     You do not have to do anything to get that.
     ====================================================================== -->