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 Text Settings Overlay</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    left: 0; top: 0;21    width: 100%;22    height: 120px;23    background: #000;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 32px;28    box-sizing: border-box;29    font-weight: 600;30  }31  .sb-time { font-size: 40px; letter-spacing: 1px; }32  .sb-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }33  .icon {34    width: 42px; height: 42px; display: inline-block;35  }36  .icon svg { width: 100%; height: 100%; fill: #fff; }37 38  /* Page content behind the modal */39  .page {40    position: absolute;41    left: 64px;42    top: 180px;43    right: 64px;44    color: #111;45  }46  .title-big {47    font-size: 132px;48    font-weight: 800;49    letter-spacing: -2px;50    margin: 80px 0 20px;51  }52  .subtitle {53    font-size: 88px;54    font-weight: 700;55    margin: 0 0 40px;56  }57  .author {58    font-size: 80px;59    font-weight: 800;60    color: #8D1212;61    margin: 20px 0 120px;62  }63  .publisher {64    width: 680px; height: 180px;65    background: #E0E0E0;66    border: 1px solid #BDBDBD;67    color: #757575;68    display: flex; align-items: center; justify-content: center;69    font-size: 46px;70    margin: 0 auto 40px;71  }72  .locations {73    text-align: center;74    font-size: 44px;75    color: #333;76  }77 78  /* Floating settings modal */79  .modal {80    position: absolute;81    left: 92px;82    right: 92px;83    top: 300px;84    background: #fff;85    border-radius: 28px;86    box-shadow: 0 24px 40px rgba(0,0,0,0.16), 0 8px 16px rgba(0,0,0,0.08);87    padding: 28px 0 24px;88  }89  .tabs {90    display: flex;91    gap: 40px;92    padding: 22px 40px 0;93    font-size: 42px;94    font-weight: 600;95    color: #666;96  }97  .tab {98    padding: 18px 12px;99    border-bottom: 6px solid transparent;100  }101  .tab.active {102    color: #1E88E5;103    border-color: #1E88E5;104  }105  .divider {106    height: 1px;107    background: #e6e6e6;108    margin-top: 14px;109  }110 111  .options-row {112    display: flex;113    gap: 36px;114    padding: 36px 40px 14px;115    align-items: flex-start;116  }117  .face-option {118    width: 200px;119    text-align: center;120    color: #666;121    font-size: 34px;122  }123  .face-option .circle {124    width: 180px; height: 180px;125    border-radius: 50%;126    border: 2px solid #d6d6d6;127    display: flex; align-items: center; justify-content: center;128    margin: 0 auto 18px;129    font-size: 120px; font-weight: 700; color: #666;130    background: #fff;131  }132  .face-option.active .circle {133    background: #2F7DEB;134    border-color: #2F7DEB;135    color: #fff;136  }137  .controls {138    display: grid;139    grid-template-columns: 1fr 1fr;140    gap: 28px 28px;141    padding: 8px 40px 14px;142    align-items: center;143  }144  .control-box {145    display: flex; align-items: center; gap: 24px;146  }147  .btn-square {148    width: 210px; height: 120px;149    border-radius: 14px;150    border: 2px solid #D7D7D7;151    display: flex; align-items: center; justify-content: center;152    color: #666;153    background: #fff;154    font-weight: 700; font-size: 60px;155  }156  .btn-icon { font-weight: 500; font-size: 52px; }157  .percent { font-size: 44px; color: #666; }158 159  .footer-row {160    display: flex; align-items: center;161    padding: 22px 40px 30px;162    gap: 24px;163    font-size: 44px;164    color: #333;165  }166  .footer-row .spacer { margin-left: 10px; }167  .footer-row .right { margin-left: auto; }168  .footer-row .chev {169    width: 36px; height: 36px;170  }171 172  /* Gesture bar */173  .gesture {174    position: absolute;175    bottom: 42px;176    left: 50%;177    transform: translateX(-50%);178    width: 540px;179    height: 14px;180    background: #777;181    border-radius: 8px;182    opacity: 0.8;183  }184</style>185</head>186<body>187<div id="render-target">188 189  <div class="status-bar">190    <div class="sb-time">11:04</div>191    <div class="sb-icons">192      <!-- simple placeholder icons -->193      <span class="icon" title="Notifications">194        <svg viewBox="0 0 24 24"><path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2zm6-6V11a6 6 0 1 0-12 0v5L4 18v2h16v-2l-2-2z"/></svg>195      </span>196      <span class="icon" title="Wi-Fi">197        <svg viewBox="0 0 24 24"><path d="M12 18.5l4-4a5.657 5.657 0 0 0-8 0l4 4zm8-8a12 12 0 0 0-16 0l2 2a9 9 0 0 1 12 0l2-2zm-4-4a16 16 0 0 0-8 0l2 2a12 12 0 0 1 4 0l2-2z"/></svg>198      </span>199      <span class="icon" title="Battery">200        <svg viewBox="0 0 24 24"><path d="M16 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2H8v-2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2V4h8v2zM6 8v8h12V8H6z"/></svg>201      </span>202    </div>203  </div>204 205  <div class="page">206    <div class="title-big">Real</div>207    <div class="subtitle">A ...</div>208    <div class="author">Mike Barlow</div>209    <div class="publisher">[IMG: O'Reilly Logo]</div>210    <div class="locations">Beijing · Cambridge · Farnham · Köln · Sebastopol · Tokyo</div>211  </div>212 213  <div class="modal">214    <div class="tabs">215      <div class="tab active">Text</div>216      <div class="tab">Lighting</div>217    </div>218    <div class="divider"></div>219 220    <div class="options-row">221      <div class="face-option active">222        <div class="circle">A</div>223        <div>Original</div>224      </div>225      <div class="face-option">226        <div class="circle" style="color:#444;">A</div>227        <div>Sans</div>228      </div>229      <div class="face-option">230        <div class="circle" style="color:#555;">A</div>231        <div>Literata</div>232      </div>233      <div class="face-option">234        <div class="circle" style="color:#555;">A</div>235        <div>Merri...</div>236      </div>237    </div>238 239    <div class="controls">240      <div class="control-box">241        <div class="btn-square">T</div>242        <div class="percent">75%</div>243      </div>244      <div class="control-box" style="justify-content:flex-end;">245        <div class="btn-square">T</div>246      </div>247      <div class="control-box">248        <div class="btn-square btn-icon">249          <svg width="80" height="60" viewBox="0 0 24 24"><path fill="#666" d="M3 7h18v2H3V7zm4 4h10v2H7v-2zm-4 4h18v2H3v-2z"/></svg>250        </div>251        <div class="percent">100%</div>252      </div>253      <div class="control-box" style="justify-content:flex-end;">254        <div class="btn-square btn-icon">255          <svg width="80" height="60" viewBox="0 0 24 24"><path fill="#666" d="M4 6h16v2H4V6zm2 5h12v2H6v-2zm-2 5h16v2H4v-2z"/></svg>256        </div>257      </div>258    </div>259 260    <div class="footer-row">261      <svg width="48" height="48" viewBox="0 0 24 24"><path fill="#666" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>262      <div class="spacer">Default</div>263      <div class="right">264        <svg class="chev" viewBox="0 0 24 24"><path fill="#666" d="M7 10l5 5 5-5H7z"/></svg>265      </div>266    </div>267  </div>268 269  <div class="gesture"></div>270</div>271</body>272</html>