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>Reader Settings 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: #000000;15    font-family: Georgia, "Times New Roman", serif;16    color: #ffffff;17  }18 19  /* Reading area */20  .reading {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 1500px;26    background: #000000;27    padding: 70px 70px 120px 70px;28    box-sizing: border-box;29  }30  .reading p {31    font-size: 44px;32    line-height: 1.6;33    letter-spacing: 0.1px;34    margin: 0 0 40px 0;35  }36  .reading p.indent { text-indent: 38px; }37  .reading strong {38    font-weight: 700;39  }40 41  /* Overlay settings panel */42  .panel {43    position: absolute;44    bottom: 0;45    left: 0;46    width: 1080px;47    height: 900px;48    background: #2e2f33;49    color: #e9eef4;50    box-sizing: border-box;51    padding: 32px 40px 0 40px;52  }53  .handle {54    position: absolute;55    top: -26px;56    left: 50%;57    transform: translateX(-50%);58    width: 110px;59    height: 14px;60    background: #7a7d82;61    border-radius: 12px;62    opacity: 0.85;63  }64 65  /* Tabs */66  .tabs {67    display: flex;68    gap: 40px;69    font-size: 38px;70    align-items: center;71  }72  .tab {73    color: #cfd3d9;74  }75  .tab.active { color: #44a3d7; }76  .active-underline {77    width: 110px;78    height: 5px;79    background: #44a3d7;80    margin-top: 18px;81    border-radius: 3px;82  }83 84  /* Font options */85  .font-row {86    display: flex;87    justify-content: space-between;88    margin-top: 40px;89    padding-right: 20px;90  }91  .font-item {92    width: 230px;93    text-align: center;94  }95  .font-item .sample {96    font-size: 84px;97    color: #ffffff;98  }99  .font-item.active .sample { color: #44a3d7; }100  .font-item .label {101    margin-top: 10px;102    font-size: 34px;103    color: #aeb4bb;104  }105  .font-item.active .label { color: #44a3d7; }106 107  .divider {108    height: 2px;109    background: #3a3c40;110    margin: 34px 0 26px 0;111  }112 113  /* Sliders */114  .slider-row {115    display: flex;116    align-items: center;117    gap: 26px;118    padding: 0 20px;119  }120  .slider-row .smallA,121  .slider-row .bigA {122    font-size: 44px;123    color: #ffffff;124  }125  .track {126    position: relative;127    height: 10px;128    flex: 1;129    background: #4a4d52;130    border-radius: 6px;131    overflow: hidden;132  }133  .track .ticks {134    position: absolute;135    top: 0;136    left: 0;137    right: 0;138    bottom: 0;139    background: repeating-linear-gradient(140      to right,141      rgba(255,255,255,0.15) 0,142      rgba(255,255,255,0.15) 4px,143      transparent 4px,144      transparent 28px145    );146    pointer-events: none;147  }148  .thumb {149    position: absolute;150    top: -10px;151    width: 28px;152    height: 28px;153    background: #44a3d7;154    border-radius: 50%;155    box-shadow: 0 0 0 4px rgba(68,163,215,0.25);156  }157  /* font size thumb position (approx mid) */158  .font-size .thumb { left: 42%; }159 160  /* Brightness section */161  .bottom-bar {162    position: absolute;163    left: 0;164    right: 0;165    bottom: 0;166    background: #25272b;167    height: 230px;168    padding: 26px 40px;169    box-sizing: border-box;170    border-top: 1px solid #3a3c40;171  }172  .bright-row {173    display: flex;174    align-items: center;175    gap: 26px;176    margin-top: 24px;177  }178  .sun {179    width: 48px;180    height: 48px;181  }182  .sun path, .sun circle { stroke: #e9eef4; fill: none; stroke-width: 2.2; stroke-linecap: round; }183  .bright-track {184    position: relative;185    height: 12px;186    flex: 1;187    background: #4a4d52;188    border-radius: 7px;189  }190  .bright-thumb {191    position: absolute;192    top: -12px;193    left: 72%;194    width: 32px;195    height: 32px;196    background: #44a3d7;197    border-radius: 50%;198    box-shadow: 0 0 0 4px rgba(68,163,215,0.25);199  }200  .auto {201    display: flex;202    align-items: center;203    gap: 16px;204    font-size: 34px;205    color: #cfd3d9;206    margin-left: 26px;207  }208  .checkbox {209    width: 42px;210    height: 42px;211    border: 3px solid #7a7d82;212    border-radius: 8px;213    position: relative;214  }215  .checkbox:after {216    content: "";217    position: absolute;218    left: 9px;219    top: 3px;220    width: 20px;221    height: 30px;222    border-right: 5px solid #44a3d7;223    border-bottom: 5px solid #44a3d7;224    transform: rotate(40deg);225  }226</style>227</head>228<body>229<div id="render-target">230 231  <div class="reading">232    <p>antitrust suit we brought against the National Football League ruled that the NFL was a monopoly, but awarded us only token damages of one dollar. I’ve already let the better players on my team, the New Jersey Generals, sign with the NFL. But the ruling was ridiculous.</p>233    <p class="indent">We argue about the approach we should take. I want to be more aggressive. “What worries me,” I say to Harry, “is that no one is pushing hard enough on an appeal.”</p>234    <p><strong>12:00 noon</strong> Gerry Schoenfeld, head of the Shubert Organization, the biggest Broadway theater owners, calls to recommend</p>235  </div>236 237  <div class="panel">238    <div class="handle"></div>239 240    <div class="tabs">241      <div class="tab active">Font</div>242      <div class="tab">Layout</div>243      <div class="tab">Themes</div>244      <div class="tab">More</div>245    </div>246    <div class="active-underline"></div>247 248    <div class="font-row">249      <div class="font-item active">250        <div class="sample">Aa</div>251        <div class="label">Bookerly</div>252      </div>253      <div class="font-item">254        <div class="sample">Aa</div>255        <div class="label">Caecilia</div>256      </div>257      <div class="font-item">258        <div class="sample">Aa</div>259        <div class="label">Droid Serif</div>260      </div>261      <div class="font-item">262        <div class="sample">Aa</div>263        <div class="label">Georgia</div>264      </div>265    </div>266 267    <div class="divider"></div>268 269    <div class="slider-row font-size">270      <div class="smallA">A</div>271      <div class="track">272        <div class="ticks"></div>273        <div class="thumb"></div>274      </div>275      <div class="bigA">A</div>276    </div>277 278    <div class="bottom-bar">279      <div class="bright-row">280        <!-- Dim sun icon -->281        <svg class="sun" viewBox="0 0 24 24">282          <circle cx="12" cy="12" r="4"></circle>283          <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"></path>284        </svg>285 286        <div class="bright-track">287          <div class="bright-thumb"></div>288        </div>289 290        <!-- Bright sun icon -->291        <svg class="sun" viewBox="0 0 24 24">292          <circle cx="12" cy="12" r="5"></circle>293          <path d="M12 1v3M12 20v3M1 12h3M20 12h3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1"></path>294        </svg>295 296        <div class="auto">297          <div class="checkbox"></div>298          <span>Auto</span>299        </div>300      </div>301    </div>302 303  </div>304 305</div>306</body>307</html>