GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>E-Reader Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #E4D1B6; /* warm sepia page */15    font-family: Georgia, "Times New Roman", serif;16    color: #634C35;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    left: 0; top: 0;23    width: 1080px; height: 110px;24    background: #0B0B0B;25    color: #FFFFFF;26    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;27    font-size: 38px;28  }29  .status-left {30    position: absolute; left: 38px; top: 26px;31    display: flex; align-items: center; gap: 20px;32  }33  .status-left .time { font-weight: 600; letter-spacing: 1px; }34  .status-left .dot {35    width: 28px; height: 28px; border-radius: 50%;36    background: #9AA0A6; display: inline-block;37  }38  .status-left .bell {39    width: 36px; height: 36px;40    border-radius: 50%; border: 3px solid #bbb;41    display: inline-flex; align-items: center; justify-content: center;42    color: #bbb; font-size: 22px;43  }44  .status-right {45    position: absolute; right: 34px; top: 26px;46    display: flex; align-items: center; gap: 26px;47    font-size: 36px;48  }49 50  /* Reading content */51  .page {52    position: absolute;53    left: 58px; right: 58px;54    top: 140px; bottom: 150px;55    overflow: hidden;56  }57  .content {58    column-count: 1;59    font-size: 46px;60    line-height: 1.55;61    letter-spacing: 0.2px;62  }63  .content p { margin: 0 0 30px 0; text-indent: 32px; }64  .content p.first { text-indent: 0; }65 66  /* Floating font size overlay */67  .overlay {68    position: absolute;69    left: 150px;70    top: 830px;71    width: 780px; height: 240px;72    background: #2F2F2F;73    border-radius: 22px;74    box-shadow: 0 18px 40px rgba(0,0,0,0.35);75    border: 6px solid #1F1F1F;76    color: #D8D8D8;77    display: flex;78    align-items: center;79    justify-content: space-between;80    padding: 26px 40px;81  }82  .overlay .title {83    position: absolute;84    left: 40px; top: 24px;85    font-weight: 700; letter-spacing: 2px;86    color: #BEBEBE; font-size: 34px;87  }88  .overlay .control {89    width: 120px; height: 120px;90    border-radius: 50%;91    border: 8px solid #8E8E8E;92    display: flex; align-items: center; justify-content: center;93    background: #3A3A3A;94    color: #FFFFFF; font-size: 70px; font-weight: 700;95  }96  .overlay .value {97    font-size: 64px; color: #E6E6E6; font-weight: 600;98  }99 100  /* Bottom indicators */101  .homebar {102    position: absolute;103    left: 50%; transform: translateX(-50%);104    bottom: 34px; width: 420px; height: 14px;105    background: #FFFFFF; opacity: 0.75;106    border-radius: 10px;107  }108  .prog-dot {109    position: absolute; bottom: 84px; width: 18px; height: 18px; border-radius: 50%;110    background: #9E8D75;111  }112  .prog-dot.right { right: 28px; }113  .prog-dot.left { left: 28px; }114</style>115</head>116<body>117<div id="render-target">118 119  <!-- Status Bar -->120  <div class="status-bar">121    <div class="status-left">122      <div class="time">8:16</div>123      <span class="dot"></span>124      <div class="bell">🔔</div>125    </div>126    <div class="status-right">127      <div>◆</div>128      <div>⚡</div>129    </div>130  </div>131 132  <!-- Reading page -->133  <div class="page">134    <div class="content">135      <p class="first">ross the field after it and was just in time to see it pop down a large rab‑bit‑hole, under the hedge. In another moment, down went Alice after it!</p>136 137      <p>The rabbit‑hole went straight on like a tunnel for some way and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she fo‑und herself falling down what see‑med to be a<