HoneyOS/web/looks/system7.html

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HoneyOS — Look: System 7</title>
    <style>
      /* ── Mac System 7 ────────────────────────────────────────────────────
         Hellgrau, 1 Bit, alles mit 1px schwarzer Kante. Keine Farbe außer
         der Auswahl. Schrift klein und eng — Chicago gibt es nicht mehr,
         Geneva/Verdana kommt am nächsten. */
      * { box-sizing: border-box; }
      html, body { height: 100%; margin: 0; }
      body {
        font: 12px/1.35 Geneva, Verdana, "DejaVu Sans", sans-serif;
        color: #000;
        /* der geditherte Schreibtisch: 2px-Schachbrett */
        background: repeating-conic-gradient(#8a8a8a 0 25%, #d0d0d0 0 50%) 0 0 / 3px 3px;
        overflow: hidden;
        -webkit-font-smoothing: none;
      }

      /* Menüleiste */
      .menubar {
        display: flex; align-items: center; gap: 18px;
        height: 21px; padding: 0 10px;
        background: #fff; border-bottom: 1px solid #000;
        position: relative; z-index: 10;
      }
      .menubar .apple { font-weight: 700; letter-spacing: -0.5px; }
      .menubar .item { cursor: default; }
      .menubar .item:hover { background: #000; color: #fff; }
      .menubar .right { margin-left: auto; display: flex; gap: 14px; align-items: center; }

      /* Fenster */
      .win {
        position: absolute;
        background: #fff;
        border: 1px solid #000;
        box-shadow: 2px 2px 0 rgba(0,0,0,.45);
      }
      .titlebar {
        display: flex; align-items: center; gap: 6px;
        height: 19px; padding: 0 5px;
        border-bottom: 1px solid #000;
        /* die sechs Streifen links und rechts des Titels */
        background: repeating-linear-gradient(to bottom, #000 0 1px, #fff 1px 2px);
      }
      .titlebar .box {
        width: 11px; height: 11px; background: #fff; border: 1px solid #000; flex: none;
      }
      .titlebar .name {
        background: #fff; padding: 0 7px; font-weight: 700; white-space: nowrap;
        margin: 0 auto; letter-spacing: -0.2px;
      }
      .win-body { padding: 10px 12px; }

      /* Statusfenster */
      #status { left: 26px; top: 44px; width: 268px; }
      #status h1 { font-size: 12px; font-weight: 700; margin: 0 0 8px; }
      .rows { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; }
      .rows span:nth-child(odd) { color: #444; }
      .rows span:nth-child(even) { font-weight: 700; }
      .sep { border: 0; border-top: 1px solid #000; margin: 9px 0; }
      .note { color: #555; font-size: 11px; }

      /* Fenster mit den Programmen — ein Finder-Fenster, kein Kachelraster */
      #apps { left: 330px; top: 44px; width: 372px; }
      .shelf { display: flex; gap: 6px; padding: 14px 10px 18px; }
      .icon {
        width: 104px; padding: 6px 4px 4px; text-align: center; cursor: default;
        border: 1px solid transparent;
      }
      .icon svg { display: block; margin: 0 auto 5px; image-rendering: pixelated; }
      .icon .label { display: inline-block; padding: 0 3px; }
      .icon:hover .label { background: #000; color: #fff; }
      .icon.sel svg { filter: invert(1); }
      .icon.sel .label { background: #000; color: #fff; }
      .shelf-foot {
        border-top: 1px solid #000; padding: 2px 8px; font-size: 11px; color: #333;
        display: flex; justify-content: space-between;
      }

      /* Leiste, wie sie in Aether/InkNote aussähe */
      #bar { left: 26px; top: 296px; width: 676px; }
      .bardemo {
        display: flex; align-items: center; gap: 14px;
        height: 21px; padding: 0 8px; background: #fff; border-bottom: 1px solid #000;
        font-size: 11px;
      }
      .bardemo .cur { background: #000; color: #fff; padding: 0 5px; }
      .bardemo .right { margin-left: auto; }
      .barhost { padding: 12px; color: #333; font-size: 11px; background: #efefef; }

      /* Papierkorb unten rechts, weil ohne den ist es kein Mac */
      .trash { position: absolute; right: 30px; bottom: 26px; width: 90px; text-align: center; }
      .trash .label { background: #d0d0d0; padding: 0 3px; }

      .switch {
        position: absolute; left: 26px; bottom: 20px;
        font-size: 11px; background: #d0d0d0; padding: 2px 6px; border: 1px solid #000;
      }
      .switch a { color: #000; }
    </style>
  </head>
  <body>
    <div class="menubar">
      <span class="apple">&#9670;</span>
      <span class="item">Ablage</span>
      <span class="item">Bearbeiten</span>
      <span class="item">Ansicht</span>
      <span class="item">Spezial</span>
      <span class="right"><span class="item">Di. 02:47</span><span class="item">HoneyOS &#9662;</span></span>
    </div>

    <!-- Statusfenster -->
    <div class="win" id="status">
      <div class="titlebar"><span class="box"></span><span class="name">HoneyOS</span></div>
      <div class="win-body">
        <h1>Willkommen zurück, marc.</h1>
        <div class="rows">
          <span>Programme</span><span>2</span>
          <span>erreichbar</span><span>2 von 2</span>
          <span>Version</span><span>0.1</span>
        </div>
        <hr class="sep" />
        <p class="note">Jedes Programm läuft auf seiner eigenen Domain. HoneyOS öffnet sie nur.</p>
      </div>
    </div>

    <!-- Programme -->
    <div class="win" id="apps">
      <div class="titlebar"><span class="box"></span><span class="name">Programme</span><span class="box"></span></div>
      <div class="shelf">
        <div class="icon sel">
          <svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
            <path fill="#000" d="M6 5h8v1h1v1h1v1h1v6h-1v1H3v-1H2V9h1V8h1V7h1V6h1z"/>
            <path fill="#fff" d="M6 6h8v1h1v1h1v5H3V9h1V8h1V7h1z"/>
            
          </svg>
          <span class="label">Aether</span>
        </div>
        <div class="icon">
          <svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
            <path fill="#000" d="M4 2h12v16H4z"/>
            <path fill="#fff" d="M5 3h10v14H5z"/>
            <path fill="#000" d="M7 5h6v1H7zm0 3h6v1H7zm0 3h6v1H7zm0 3h4v1H7z"/>
          </svg>
          <span class="label">InkNote</span>
        </div>
        <div class="icon">
          <svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
            <path fill="#000" d="M9 4h2v5h5v2h-5v5H9v-5H4V9h5z"/>
          </svg>
          <span class="label">hinzufügen</span>
        </div>
      </div>
      <div class="shelf-foot"><span>3 Objekte</span><span>alles bereit</span></div>
    </div>

    <!-- Leiste -->
    <div class="win" id="bar">
      <div class="titlebar"><span class="box"></span><span class="name">so sähe die Leiste in InkNote aus</span></div>
      <div class="bardemo">
        <b>&#9670; HoneyOS</b>
        <span>Aether</span>
        <span class="cur">InkNote</span>
        <span class="right">marc &nbsp; 02:47</span>
      </div>
      <div class="barhost">… hier beginnt die App selbst, mit ihrem eigenen Aussehen.</div>
    </div>

    <div class="trash">
      <svg width="40" height="40" viewBox="0 0 20 20" shape-rendering="crispEdges">
        <path fill="#000" d="M7 3h6v1h4v1H3V4h4zm-2 3h10v12H5z"/>
        <path fill="#d0d0d0" d="M6 7h8v10H6z"/>
        <path fill="#000" d="M8 9h1v6H8zm3 0h1v6h-1z"/>
      </svg>
      <span class="label">Papierkorb</span>
    </div>

    <div class="switch">Look: <b>System 7</b> &nbsp;·&nbsp; <a href="../index.html">Amber-CRT</a> &nbsp;·&nbsp; <a href="./win95.html">Windows 95</a></div>
  </body>
</html>