code/10028/10028_6.html

<html>
<head>
<meta charset="UTF-8">
<title>Reader With Keyboard</title>
<style>
  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }
  #render-target {
    width: 1080px;
    height: 2400px;
    position: relative;
    overflow: hidden;
    background: #0f0f10;
    color: #fff;
  }

  /* Status bar */
  .status-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 1080px;
    height: 120px;
    background: #0f0f10;
    display: flex;
    align-items: center;
    padding: 0 34px;
    box-sizing: border-box;
    font-size: 44px;
  }
  .status-left { display: flex; align-items: center; gap: 22px; }
  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }
  .dot { width: 26px; height: 26px; border-radius: 50%; background: #cfcfcf; opacity: .85; }
  .icon-small {
    width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center;
  }
  .battery {
    width: 46px; height: 22px; border: 3px solid #eaeaea; border-radius: 6px; position: relative;
  }
  .battery:after {
    content: "";
    position: absolute; right: -8px; top: 4px; width: 6px; height: 12px; background: #eaeaea; border-radius: 1px;
  }
  .battery .level {
    position: absolute; top: 3px; left: 3px; height: 14px; width: 60%; background: #eaeaea;
  }

  /* Top app bar with actions */
  .app-bar {
    position: absolute;
    top: 120px;
    left: 0;
    width: 1080px;
    height: 120px;
    background: #121214;
    display: flex;
    align-items: center;
    padding: 0 28px;
    box-sizing: border-box;
    gap: 26px;
  }
  .app-actions { margin-left: auto; display: flex; gap: 40px; align-items: center; }
  .svg-ic { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 4; }

  /* Page area */
  .page {
    position: absolute;
    top: 240px;
    left: 0;
    width: 1080px;
    height: 1260px;
    background: #ffffff;
    color: #111;
    padding: 80px 80px 40px 80px;
    box-sizing: border-box;
  }
  .page p {
    font-size: 42px;
    line-height: 68px;
    margin: 0 0 36px 0;
  }
  .finished-mark {
    position: absolute;
    right: 70px;
    bottom: 24px;
    font-size: 28px;
    letter-spacing: 2px;
    color: #7a7a7a;
  }

  /* Suggestion / accessory bar above keyboard */
  .accessory {
    position: absolute;
    bottom: 820px;
    left: 0;
    width: 1080px;
    height: 110px;
    background: #1a1a1d;
    color: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    letter-spacing: 2px;
  }
  .accessory .mic {
    position: absolute;
    right: 34px;
    width: 90px;
    height: 90px;
    background: #2b2b2f;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .mic svg { width: 40px; height: 40px; fill: #bfc7ff; }

  /* Keyboard */
  .keyboard {
    position: absolute;
    left: 0;
    bottom: 40px;
    width: 1080px;
    height: 780px;
    background: #0f0f12;
    padding: 22px 22px 10px 22px;
    box-sizing: border-box;
  }
  .row {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
  }
  .key {
    flex: 1;
    height: 130px;
    background: #2b2b2f;
    border-radius: 24px;
    color: #e7e7e7;
    font-size: 56px;
    display: flex; align-items: center; justify-content: center;
  }
  .key.small { flex: 0 0 120px; }
  .key.wide  { flex: 0 0 180px; }
  .key.xwide { flex: 1.8; }
  .key.space { flex: 4.2; font-size: 42px; color: #bdbdbd; }
  .key.dark { background: #1e1e22; }

  .backspace svg, .enter svg {
    width: 48px; height: 48px; stroke: #e7e7e7; stroke-width: 6; fill: none;
  }

  /* Gesture bar */
  .gesture {
    position: absolute;
    bottom: 10px;
    left: 50%;
    width: 360px;
    height: 10px;
    background: #e8e8e8;
    border-radius: 8px;
    transform: translateX(-50%);
    opacity: .9;
  }
</style>
</head>
<body>
<div id="render-target">

  <!-- Status Bar -->
  <div class="status-bar">
    <div class="status-left">
      <div style="font-weight:600;">12:08</div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot" style="opacity:.5;"></div>
    </div>
    <div class="status-right">
      <div class="icon-small">
        <!-- Silent/bell off -->
        <svg viewBox="0 0 24 24" class="svg-ic">
          <path d="M3 3l18 18"></path>
          <path d="M12 3c-3 0-5 2-5 6v2l-2 3h16l-2-3V9c0-4-2-6-7-6z"></path>
        </svg>
      </div>
      <div class="icon-small">
        <!-- Wifi -->
        <svg viewBox="0 0 24 24" class="svg-ic">
          <path d="M2 8c5-4 15-4 20 0"></path>
          <path d="M5 12c4-3 10-3 14 0"></path>
          <path d="M8 16c3-2 5-2 8 0"></path>
          <circle cx="12" cy="19" r="1.5" fill="#eaeaea" stroke="none"></circle>
        </svg>
      </div>
      <div class="battery"><div class="level"></div></div>
    </div>
  </div>

  <!-- App Bar -->
  <div class="app-bar">
    <!-- Back Arrow -->
    <svg viewBox="0 0 24 24" class="svg-ic" style="stroke-width:5;">
      <path d="M15 5l-7 7 7 7"></path>
    </svg>

    <div class="app-actions">
      <!-- Document icon -->
      <svg viewBox="0 0 24 24" class="svg-ic">
        <rect x="5" y="3" width="14" height="18" rx="2"></rect>
        <line x1="8" y1="8" x2="16" y2="8"></line>
        <line x1="8" y1="12" x2="16" y2="12"></line>
      </svg>

      <!-- Drop icon -->
      <svg viewBox="0 0 24 24" class="svg-ic">
        <path d="M12 2C9 7 6 9 6 13a6 6 0 0 0 12 0c0-4-3-6-6-11z"></path>
      </svg>

      <!-- Grid 2x3 -->
      <svg viewBox="0 0 24 24" class="svg-ic">
        <rect x="4" y="4" width="6" height="6"></rect>
        <rect x="14" y="4" width="6" height="6"></rect>
        <rect x="4" y="14" width="6" height="6"></rect>
        <rect x="14" y="14" width="6" height="6"></rect>
      </svg>

      <!-- Search -->
      <svg viewBox="0 0 24 24" class="svg-ic">
        <circle cx="11" cy="11" r="7"></circle>
        <line x1="16.5" y1="16.5" x2="21" y2="21"></line>
      </svg>

      <!-- Kebab -->
      <svg viewBox="0 0 24 24" class="svg-ic" style="stroke-width:6;">
        <circle cx="12" cy="5" r="1"></circle>
        <circle cx="12" cy="12" r="1"></circle>
        <circle cx="12" cy="19" r="1"></circle>
      </svg>
    </div>
  </div>

  <!-- Reading Page -->
  <div class="page">
    <p>She heard Mr. Ganz inhale sharply. After a second he said, “King to bishop one.”</p>
    <p>“That’s mate in three,” Beth said, without turning. “First check is with the knight. The king has the two dark squares, and the bishop checks it. Then the knight mates.”</p>
    <p>Mr. Ganz let out his breath slowly. “Jesus Christ!” he said.</p>

    <div class="finished-mark">FINISHED</div>
  </div>

  <!-- Accessory bar above keyboard -->
  <div class="accessory">
    FINISHED
    <div class="mic">
      <svg viewBox="0 0 24 24">
        <path d="M12 3a3 3 0 0 0-3 3v6a3 3 0 0 0 6 0V6a3 3 0 0 0-3-3z" fill="#bfc7ff"></path>
        <path d="M5 11a7 7 0 0 0 14 0" stroke="#bfc7ff" stroke-width="2" fill="none"></path>
        <line x1="12" y1="18" x2="12" y2="22" stroke="#bfc7ff" stroke-width="2"></line>
      </svg>
    </div>
  </div>

  <!-- Keyboard -->
  <div class="keyboard">
    <div class="row">
      <div class="key">q</div>
      <div class="key">w</div>
      <div class="key">e</div>
      <div class="key">r</div>
      <div class="key">t</div>
      <div class="key">y</div>
      <div class="key">u</div>
      <div class="key">i</div>
      <div class="key">o</div>
      <div class="key">p</div>
    </div>
    <div class="row">
      <div class="key">a</div>
      <div class="key">s</div>
      <div class="key">d</div>
      <div class="key">f</div>
      <div class="key">g</div>
      <div class="key">h</div>
      <div class="key">j</div>
      <div class="key">k</div>
      <div class="key">l</div>
    </div>
    <div class="row">
      <div class="key wide dark">⇧</div>
      <div class="key">z</div>
      <div class="key">x</div>
      <div class="key">c</div>
      <div class="key">v</div>
      <div class="key">b</div>
      <div class="key">n</div>
      <div class="key">m</div>
      <div class="key wide backspace">
        <svg viewBox="0 0 24 24">
          <path d="M22 6v12H9l-6-6 6-6z"></path>
          <path d="M12 9l6 6m0-6l-6 6"></path>
        </svg>
      </div>
    </div>
    <div class="row">
      <div class="key xwide dark">?123</div>
      <div class="key small">,</div>
      <div class="key small">😊</div>
      <div class="key space">space</div>
      <div class="key small">.</div>
      <div class="key xwide enter">
        <svg viewBox="0 0 24 24">
          <path d="M4 7v4h12l-3 3"></path>
        </svg>
      </div>
    </div>
  </div>

  <!-- Gesture handle -->
  <div class="gesture"></div>

</div>
</body>
</html>