GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<title>Reader Settings Mock</title>6<style>7  body { margin:0; padding:0; background:transparent; font-family: Arial, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #f2e6cc; /* sepia page under everything */14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 90px;23    background: #0b0b0b;24    color: #fff;25    font-size: 36px;26    display: flex;27    align-items: center;28    padding: 0 28px;29    box-sizing: border-box;30    z-index: 5;31  }32  .status-right {33    margin-left: auto;34    display: flex;35    gap: 18px;36    align-items: center;37    opacity: .9;38  }39  /* Simple status icons */40  .dot-icon {41    width: 18px; height: 18px; background:#fff; border-radius:50%;42  }43  .battery {44    width: 38px; height: 20px; border:2px solid #fff; border-radius:4px; position: relative;45  }46  .battery::after {47    content:"";48    position:absolute; right:-6px; top:5px; width:6px; height:10px; background:#fff; border-radius:1px;49  }50  .battery .level {51    position:absolute; left:2px; top:2px; bottom:2px; width:70%; background:#fff;52  }53 54  /* App bar */55  .app-bar {56    position: absolute;57    top: 90px;58    left: 0;59    width: 1080px;60    height: 160px;61    background: #1b6a75;62    color: #e9f5f7;63    display: flex;64    align-items: center;65    padding: 0 26px;66    box-sizing: border-box;67    z-index: 4;68  }69  .app-actions {70    margin-left: auto;71    display: flex;72    gap: 40px;73    align-items: center;74  }75  .icon-btn {76    width: 56px; height: 56px; display: inline-flex; align-items:center; justify-content:center;77  }78  .icon-btn svg { fill: #e9f5f7; }79 80  .title-wrap {81    margin-left: 18px;82    line-height: 1.1;83  }84  .title {85    font-size: 50px;86    font-weight: 700;87    letter-spacing: .2px;88  }89  .subtitle {90    font-size: 28px; opacity: .85;91  }92  .subline {93    font-size: 26px; opacity: .75;94  }95 96  /* Page/content */97  .page {98    position: absolute;99    top: 250px;100    left: 0;101    right: 0;102    bottom: 180px;103    background: #efe2c6;104    padding: 60px 60px 220px 60px;105    box-sizing: border-box;106    color: #4b3b29;107    font-family: "Georgia", "Times New Roman", serif;108    font-size: 42px;109    line-height: 1.6;110  }111  .dropcap { font-weight: bold; font-size: 48px; }112 113  /* Bottom progress bar */114  .bottom-bar {115    position: absolute;116    left: 0;117    bottom: 0;118    width: 1080px;119    height: 180px;120    background: #1f6c79;121    color: #e8f7fb;122    box-shadow: 0 -2px 6px rgba(0,0,0,.25);123    z-index: 2;124  }125  .progress-label {126    text-align: center;127    font-size: 40px;128    margin-top: 26px;129    margin-bottom: 22px;130  }131  .progress-track {132    position: relative;133    height: 8px;134    margin: 0 40px;135    background: rgba(255,255,255,.35);136    border-radius: 4px;137  }138  .progress-fill {139    position: absolute; left: 0; top: 0; bottom: 0; width: 80px; background: #87c5d1; border-radius: 4px;140  }141  .progress-knob {142    position: absolute; top: -16px; left: 40px; width: 32px; height: 32px; border-radius: 50%;143    background: #87c5d1; border: 4px solid #e8f7fb;144  }145  .bottom-icons {146    position: absolute;147    right: 36px;148    bottom: 26px;149    display: flex; gap: 40px; align-items: center;150  }151  .bottom-icons svg { fill: #e8f7fb; }152 153  /* Modal settings panel */154  .modal {155    position: absolute;156    top: 360px;157    left: 130px;158    width: 820px;159    background: #2d2d2f;160    border-radius: 16px;161    box-shadow: 0 18px 40px rgba(0,0,0,.55);162    color: #e9e9ea;163    z-index: 6;164    padding-bottom: 22px;165  }166  .modal-header {167    background: transparent;168    padding: 24px 28px 10px 28px;169    font-weight: 800;170    font-size: 34px;171    color: #8fd6e0;172    text-transform: uppercase;173    letter-spacing: .5px;174  }175  .section {176    padding: 14px 24px;177  }178  .label {179    font-size: 26px;180    color: #a7a7a9;181    margin-bottom: 8px;182  }183  .select-row, .control-row {184    background: #3a3a3c;185    padding: 24px;186    border-radius: 10px;187    font-size: 36px;188    display: flex; align-items: center; justify-content: space-between;189  }190  .caret {191    width: 0; height: 0;192    border-left: 12px solid transparent;193    border-right: 12px solid transparent;194    border-top: 14px solid #bdbdbd;195  }196  .range-row {197    background: #3a3a3c;198    padding: 28px 24px;199    border-radius: 10px;200  }201  .range {202    height: 10px; background: #4b4b4d; border-radius: 5px; position: relative;203  }204  .range .thumb {205    position: absolute; top: -10px; left: 340px; width: 26px; height: 26px; border-radius: 50%;206    background: #f2b632;207  }208  .mini {209    display: flex; align-items: center; gap: 20px; justify-content: space-between;210  }211  .chip {212    width: 54px; height: 54px; border-radius: 50%;213    border: 3px solid #bdbdbd; color: #bdbdbd; display:flex; align-items:center; justify-content:center; font-size: 38px;214  }215  .value {216    font-size: 40px;217    color: #ffffff;218  }219  .toggle {220    width: 100px; height: 56px; background: #6d6d71; border-radius: 28px; position: relative;221  }222  .toggle.on { background: #caa61b; }223  .toggle .knob {224    position: absolute; top: 6px; left: 8px; width: 44px; height: 44px; background:#2d2d2f; border-radius:50%;225    transition: left .2s;226  }227  .toggle.on .knob { left: 48px; background:#2d2d2f; }228  .foot-link {229    text-align: center; color:#a6d0d7; font-weight: 700; font-size: 32px; padding: 10px 0 18px 0;230  }231 232  /* Small helper for tight spacing between rows */233  .between { height: 8px; }234 235  /* Underlying page text slightly visible around modal */236  .page p { margin: 22px 0; }237</style>238</head>239<body>240<div id="render-target">241 242  <!-- Status bar -->243  <div class="status-bar">244    8:14245    <div class="status-right">246      <div class="dot-icon"></div>247      <div class="battery"><div class="level"></div></div>248    </div>249  </div>250 251  <!-- App bar -->252  <div class="app-bar">253    <!-- back icon -->254    <div class="icon-btn" aria-label="Back">255      <svg width="44" height="44" viewBox="0 0 24 24">256        <path d="M14.5 5l-7 7 7 7 1.5-1.5-5.5-5.5 5.5-5.5z"/>257      </svg>258    </div>259    <div class="title-wrap">260      <div class="title">Alice's Adventur...</div>261      <div class="subtitle">Lewis Carroll</div>262      <div class="subline">Section: I—DOWN THE...</div>263    </div>264    <div class="app-actions">265      <div class="icon-btn" aria-label="Sound">266        <svg width="44" height="44" viewBox="0 0 24 24">267          <path d="M3 10v4h4l5 5V5L7 10H3zm12.5 2a4.5 4.5 0 0 0-2.3-3.9l-.7 1.4a3 3 0 0 1 0 5l.7 1.4A4.5 4.5 0 0 0 15.5 12z"/>268        </svg>269      </div>270      <div class="icon-btn" aria-label="Search">271        <svg width="44" height="44" viewBox="0 0 24 24">272          <path d="M15.5 14h-.8l-.3-.3A6 6 0 1 0 14 15.5l.3.3v.8L20 22l2-2-6.5-6zM6 10a4 4 0 1 1 8 0 4 4 0 0 1-8 0z"/>273        </svg>274      </div>275      <div class="icon-btn" aria-label="List">276        <svg width="44" height="44" viewBox="0 0 24 24">277          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>278        </svg>279      </div>280      <div class="icon-btn" aria-label="Settings">281        <svg width="44" height="44" viewBox="0 0 24 24">282          <path d="M19.4 12.9a7.3 7.3 0 0 0 0-1.8l2-1.5-2-3.5-2.3 1a7.2 7.2 0 0 0-1.6-.9l-.3-2.5h-4l-.3 2.5c-.6.2-1.1.5-1.6.9l-2.3-1-2 3.5 2 1.5a7.3 7.3 0 0 0 0 1.8l-2 1.5 2 3.5 2.3-1c.5.4 1 .7 1.6.9l.3 2.5h4l.3-2.5c.6-.2 1.1-.5 1.6-.9l2.3 1 2-3.5-2-1.5zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>283        </svg>284      </div>285      <div class="icon-btn" aria-label="More">286        <svg width="44" height="44" viewBox="0 0 24 24">287