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 UI - Text Settings Overlay</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    color: #fff;26    font-size: 40px;27    display: flex;28    align-items: center;29    padding: 0 36px;30    box-sizing: border-box;31  }32  .status-left { flex: 1; display: flex; align-items: center; gap: 24px; }33  .status-right { display: flex; align-items: center; gap: 30px; }34 35  /* Simple icons */36  .icon {37    width: 44px; height: 44px;38    display: inline-flex; align-items: center; justify-content: center;39  }40  .icon svg { width: 44px; height: 44px; fill: #fff; }41 42  /* Page content (book cover text approximation) */43  .page {44    position: absolute;45    top: 120px; /* below status bar */46    left: 0;47    right: 0;48    bottom: 0;49    padding: 80px 72px;50    box-sizing: border-box;51    text-align: left;52  }53  .title-big {54    font-size: 160px;55    font-weight: 800;56    line-height: 1.05;57    letter-spacing: -1px;58    margin: 40px 0 10px 0;59  }60  .author {61    font-size: 86px;62    font-weight: 800;63    color: #7b1c1b;64    text-align: center;65    margin: 140px 0 60px 0;66  }67  .oreilly {68    width: 520px;69    height: 120px;70    margin: 0 auto 50px auto;71    background: #E0E0E0;72    border: 1px solid #BDBDBD;73    color: #757575;74    display: flex; align-items: center; justify-content: center;75    font-size: 44px;76  }77  .cities {78    font-size: 44px;79    color: #333;80    text-align: center;81    line-height: 1.6;82  }83 84  /* Bottom gesture pill */85  .home-pill {86    position: absolute;87    bottom: 38px;88    left: 50%;89    transform: translateX(-50%);90    width: 320px;91    height: 16px;92    background: #9E9E9E;93    border-radius: 16px;94    opacity: 0.7;95  }96 97  /* Floating settings card */98  .settings-card {99    position: absolute;100    left: 70px;101    top: 310px;102    width: 940px;103    background: #ffffff;104    border-radius: 28px;105    box-shadow: 0 18px 40px rgba(0,0,0,0.25);106    z-index: 5;107    padding: 26px 0 24px 0;108  }109  .tabs {110    display: flex;111    padding: 0 34px;112    gap: 40px;113    font-size: 44px;114    font-weight: 600;115    color: #999;116  }117  .tab-active {118    color: #1e88e5;119    position: relative;120  }121  .tab-active::after {122    content: "";123    position: absolute;124    left: 0;125    bottom: -18px;126    width: 88px;127    height: 6px;128    background: #1e88e5;129    border-radius: 3px;130  }131  .divider {132    margin-top: 28px;133    border-top: 1px solid #e5e5e5;134  }135  .font-row {136    display: flex;137    gap: 26px;138    padding: 28px 24px 10px 24px;139    overflow: hidden;140  }141  .font-option {142    width: 216px;143    text-align: center;144  }145  .font-circle {146    width: 170px;147    height: 170px;148    border-radius: 50%;149    border: 3px solid #D9D9D9;150    background: #fff;151    margin: 0 auto 14px auto;152    display: flex; align-items: center; justify-content: center;153    color: #616161;154    font-size: 96px;155    font-weight: 700;156  }157  .font-option.active .font-circle {158    background: #2f6ecf;159    color: #fff;160    border-color: #2f6ecf;161  }162  .font-label {163    font-size: 34px;164    color: #4f4f4f;165  }166 167  .controls {168    display: grid;169    grid-template-columns: 1fr 1fr;170    gap: 26px 18px;171    padding: 22px 28px;172  }173  .control-box {174    display: flex;175    align-items: center;176    gap: 18px;177  }178  .btn-rect {179    width: 170px; height: 110px;180    border-radius: 14px;181    border: 2px solid #DADADA;182    display: flex; align-items: center; justify-content: center;183    color: #555; font-weight: 700; font-size: 64px;184    background: #fff;185  }186  .percent {187    font-size: 40px; color: #7b7b7b; min-width: 100px;188  }189  .align-btn {190    width: 170px; height: 110px;191    border-radius: 14px;192    border: 2px solid #DADADA;193    display: flex; align-items: center; justify-content: center;194    background: #fff;195  }196  .align-btn svg { width: 72px; height: 72px; fill: #666; }197 198  .bottom-row {199    display: flex;200    align-items: center;201    gap: 20px;202    padding: 10px 28px 8px 28px;203    margin-top: 6px;204  }205  .bottom-row .hamburger svg { fill: #6d6d6d; }206  .bottom-row .label {207    font-size: 44px;208    color: #333;209  }210  .chevron {211    margin-left: auto;212    width: 44px; height: 44px;213  }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status bar -->220  <div class="status-bar">221    <div class="status-left">222      <div>11:05</div>223      <span class="icon">224        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm2 4h14v2H5v-2zm-1 4h16v2H4v-2z"/></svg>225      </span>226      <span class="icon">227        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5v6l5 3-.9 1.5L11 14V7h2z"/></svg>228      </span>229      <span class="icon">230        <svg viewBox="0 0 24 24"><path d="M6 2h9a2 2 0 012 2v16l-6-3-6 3V4a2 2 0 012-2z"/></svg>231      </span>232    </div>233    <div class="status-right">234      <span class="icon">235        <svg viewBox="0 0 24 24"><path d="M12 3a6 6 0 016 6h-2a4 4 0 00-8 0H6a6 6 0 016-6zm0 18c-3.3 0-6-2.7-6-6h2a4 4 0 008 0h2c0 3.3-2.7 6-6 6z"/></svg>236      </span>237      <span class="icon">238        <svg viewBox="0 0 24 24"><path d="M16 4H8a2 2 0 00-2 2v14l6-3 6 3V6a2 2 0 00-2-2z"/></svg>239      </span>240    </div>241  </div>242 243  <!-- Page (book cover approximation) -->244  <div class="page">245    <div class="title-big">Reactive</div>246    <div class="title-big">Architecture</div>247 248    <div class="author">Mike Barlow</div>249 250    <div class="oreilly">[IMG: O’Reilly Logo]</div>251 252    <div class="cities">253      Beijing · Cambridge · Farnham · Köln · Sebastopol<br>254      · Tokyo255    </div>256  </div>257 258  <!-- Floating settings card -->259  <div class="settings-card">260    <div class="tabs">261      <div class="tab-active">Text</div>262      <div>Lighting</div>263    </div>264    <div class="divider"></div>265 266    <!-- Font choices -->267    <div class="font-row">268      <div class="font-option active">269        <div class="font-circle">A</div>270        <div class="font-label">Original</div>271      </div>272      <div class="font-option">273        <div class="font-circle" style="color:#444;">A</div>274        <div class="font-label">Sans</div>275      </div>276      <div class="font-option">277        <div class="font-circle" style="color:#555;">A</div>278        <div class="font-label">Literata</div>279      </div>280      <div class="font-option">281        <div class="font-circle" style="color:#666;">A</div>282        <div class="font-label">Merri...</div>283      </div>284    </div>285 286    <!-- Controls grid -->287    <div class="controls">288      <div class="control-box">289        <div class="btn-rect">T</div>290        <div class="percent">100%</div>291      </div>292      <div class="control-box">293        <div class="btn-rect">T</div>294        <div class="percent">100%</div>295      </div>296      <div class="control-box">297        <div class="align-btn">298          <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3V4zm2 4h14v2H5V8zm-2 4h18v2H3v-2zm2 4h14v2H5v-2z"/></svg>299        </div>300        <div class="percent">100%</div>301      </div>302      <div class="control-box">303        <div class="align-btn">304          <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4V4zm0 6h12v2H4v-2zm0 6h16v2H4v-2z"/></svg>305        </div>306        <div class="percent">100%</div>307      </div>308    </div>309 310    <div class="bottom-row">311      <div class="hamburger icon" style="width:56px;height:56px;">312        <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h14v2H3v-2zm0 5h18v2H3v-2z"/></svg>313      </div>314      <div class="label">Default</div>315      <div class="chevron">316        <svg viewBox="0 0 24 24"><path fill="#888" d="M7 10l5 5 5-5H7z"/></svg>317      </div>318    </div>319  </div>320 321  <!-- Bottom gesture pill -->322  <div class="home-pill"></div>323</div>324</body>325</html>