GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Reader Settings Overlay</title>5<meta name="viewport" content="width=1440, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif;}8 #render-target{9 position:relative;10 overflow:hidden;11 width:1440px;12 height:3120px;13 background:#0f0f0f;14 color:#ffffff;15 }16 17 /* Background reading page */18 .book-area{19 position:absolute;20 left:80px;21 right:80px;22 top:360px;23 bottom:520px;24 overflow:hidden;25 }26 .book-text{27 font-family: "Georgia", "Times New Roman", serif;28 font-size:64px;29 line-height:1.5;30 color:#f5f5f5;31 opacity:.9;32 }33 34 /* Status bar and top app bar */35 .status-bar{36 position:absolute;37 top:0; left:0; right:0;38 height:120px;39 background:#101010;40 color:#dcdcdc;41 display:flex;42 align-items:center;43 padding:0 36px;44 font-size:44px;45 letter-spacing:1px;46 }47 .status-icons{48 margin-left:auto;49 display:flex;50 gap:28px;51 }52 .app-bar{53 position:absolute;54 top:120px; left:0; right:0;55 height:170px;56 background:#1a1a1a;57 border-bottom:1px solid #2c2c2c;58 display:flex;59 align-items:center;60 padding:0 36px;61 }62 .app-title{63 font-size:56px;64 color:#e8e8e8;65 margin-left:24px;66 white-space:nowrap;67 overflow:hidden;68 text-overflow:ellipsis;69 max-width:900px;70 }71 .app-actions{72 margin-left:auto;73 display:flex;74 align-items:center;75 gap:36px;76 }77 .icon-btn svg{ display:block; }78 79 /* Settings panel */80 .panel{81 position:absolute;82 top:540px;83 left:200px;84 width:1040px;85 background:#1c1a16;86 border:1px solid #2a281f;87 border-radius:28px;88 padding:56px;89 box-shadow:0 30px 80px rgba(0,0,0,.6);90 }91 .panel h3{92 margin:0 0 18px 0;93 font-size:46px;94 color:#e9e6cf;95 }96 .dropdown{97 width:920px;98 height:120px;99 border-radius:16px;100 border:1px solid #333129;101 background:#201e18;102 display:flex; align-items:center; justify-content:space-between;103 padding:0 36px;104 font-size:52px;105 color:#efe9d0;106 margin-bottom:40px;107 }108 .section{109 display:flex;110 gap:60px;111 margin-bottom:36px;112 }113 .group{114 width:48%;115 }116 .options-row{117 display:flex; gap:28px; flex-wrap:wrap;118 }119 120 .square{121 width:160px; height:130px;122 background:#24221c;123 border-radius:18px;124 border:1px solid #343129;125 position:relative;126 display:flex; align-items:center; justify-content:center;127 }128 .square.selected{129 outline:6px solid #f0e25c;130 background:#262319;131 }132 133 /* tiny glyphs inside squares */134 .align-left .bar{position:absolute; height:6px; background:#e9e6cf; left:26px; right:36px;}135 .align-left .bar:nth-child(1){ top:30px; width:70%;}136 .align-left .bar:nth-child(2){ top:56px; width:85%;}137 .align-left .bar:nth-child(3){ top:82px; width:55%;}138 .align-center .bar{position:absolute; height:6px; background:#e9e6cf; left:26px; right:26px;}139 .align-center .bar:nth-child(1){ top:30px; left:40px; right:40px;}140 .align-center .bar:nth-child(2){ top:56px; left:26px; right:26px;}141 .align-center .bar:nth-child(3){ top:82px; left:60px; right:60px;}142 143 .lines-compact .line{width:108px; height:10px; background:#e9e6cf; margin:8px 0;}144 .lines-medium .line{width:108px; height:10px; background:#e9e6cf; margin:14px 0;}145 .lines-wide .line{width:108px; height:10px; background:#e9e6cf; margin:22px 0;}146 147 .scroll-hor .chev{148 width:0;height:0;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:22px solid #e9e6cf;margin-right:10px;149 }150 .scroll-hor .chev.rev{ transform:rotate(180deg);}151 .scroll-vert .arrow{152 width:24px;height:24px;border:4px solid #e9e6cf;border-top:none;border-left:none;transform:rotate(45deg); margin-bottom:6px;153 }154 155 .font-size-row{156 display:flex; align-items:center; gap:28px; margin:8px 0 40px 0;157 }158 .circle{159 width:86px; height:86px; border-radius:50%;160 background:#24221c; border:1px solid #343129; display:flex; align-items:center; justify-content:center;161 }162 .circle.selected{ outline:6px solid #f0e25c; }163 .fsA{ font-size:72px; color:#efe9d0; }164 165 /* Theme tiles */166 .theme-row{ display:flex; gap:28px; margin:10px 0 34px 0;}167 .theme{168 width:220px; height:160px; border-radius:22px; border:1px solid #333129; display:flex; align-items:center; justify-content:center; font-size:72px;169 }170 .theme:nth-child(1){ background:#f6f6f6; color:#111;}171 .theme:nth-child(2){ background:#ede7df; color:#2b2b2b;}172 .theme:nth-child(3){ background:#5b5b5b; color:#fff;}173 .theme:nth-child(4){ background:#111; color:#fff;}174 .theme.selected{ outline:6px solid #f0e25c; }175 176 /* Brightness */177 .brightness{178 display:grid;179 grid-template-columns: 150px 1fr 120px;180 align-items:center;181 gap:22px;182 margin-top:10px;183 }184 .toggle-small{185 width:180px; height:62px; border-radius:34px; background:#2b2a22; border:1px solid #3a372f;186 color:#c9c3a9; display:flex; align-items:center; justify-content:center; font-size:36px;187 }188 .slider{189 height:14px; background:#343129; border-radius:10px; position:relative;190 }191 .slider::after{192 content:""; position:absolute; top:-10px; left:62%; width:28px; height:34px; background:#f0e25c; border-radius:14px;193 box-shadow:0 0 0 10px rgba(240,226,92,.12);194 }195 .sun{196 width:54px; height:54px; border-radius:50%; background:#f0e25c; box-shadow:0 0 0 6px rgba(240,226,92,.3);197 margin-left:auto;198 }199 200 /* Bottom trial banner */201 .trial{202 position:absolute;203 left:0; right:0;204 bottom:390px;205 background:#1b1813;206 border-top:1px solid #2a271f;207 padding:46px 36px 60px;208 text-align:center;209 color:#e6e2ca;210 }211 .trial .line1{ font-size:46px; }212 .trial .line2{ font-size:40px; opacity:.9; margin-top:8px;}213 .cta{214 margin:30px auto 0;215 width:1200px; height:130px; background:#f1efe6; color:#1c1c1c; border-radius:26px;216 display:flex; align-items:center; justify-content:center; font-size:56px; font-weight:600;217 }218 219 /* Bottom progress section */220 .progress{221 position:absolute;222 left:0; right:0; bottom:140px;223 padding:0 60px;224 }225 .progress .seek{226 height:18px; background:#343129; border-radius:14px; position:relative; margin:0 100px 30px 0;227 }228 .progress .seek::before{229 content:""; position:absolute; left:70px; right:380px; top:0; bottom:0; background:#e6dc74; border-radius:14px;230 }231 .progress .seek::after{232 content:""; position:absolute; left:70px; top:-14px; width:42px; height:46px; background:#f0e25c; border-radius:18px;233 }234 .progress .meta{235 display:flex; justify-content:space-between; align-items:center;236 color:#ddd8c2; font-size:44px;237 }238 .search-fab{239 position:absolute; right:60px; bottom:210px; width:120px; height:120px; border-radius:60px;240 background:#29261f; border:1px solid #39362e; display:flex; align-items:center; justify-content:center;241 }242 243 /* helper */244 .subhead{ font-size:44px; color:#e9e6cf; margin-bottom:14px;}245</style>246</head>247<body>248<div id="render-target">249 250 <!-- Status bar -->251 <div class="status-bar">252 9:11253 <div class="status-icons">254 <span>◯</span>255 <span>🔍</span>256 <span>⬤</span>257 <span>•</span>258 </div>259 </div>260 261 <!-- App bar -->262 <div class="app-bar">263 <div class="icon-btn">264 <svg width="72" height="72" viewBox="0 0 24 24">265 <path d="M15 4 L7 12 L15 20" stroke="#ffffff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>266 </svg>267 </div>268 <div class="app-title">Summary of Project Hail Mary:...</div>269 <div class="app-actions">270 <div class="icon-btn" title="Aa">271 <span style="font-size:60px; color:#dcdcdc;">Aa</span>272 </div>273 <div class="icon-btn" title="More">274 <svg width="50" height="50" viewBox="0 0 24 24">275 <circle cx="12" cy="5" r="2" fill="#dcdcdc"/>276 <circle cx="12" cy="12" r="2" fill="#dcdcdc"/>277 <circle cx="12" cy="19" r="2" fill="#dcdcdc"/>278 </svg>279 </div>280 </div>281 </div>282 283 <!-- Reading background -->284 <div class="book-area">285 <div class="book-text">286 SU<br>287 HAIL<br>288 The ...<br><br>289 prep use study and it provides a safe space for you to freely express yourself without being judged by others. Using this journal in a group study is completely up...290 </div>291 </div>292 293 <!-- Settings panel -->294 <div class="panel">295 <h3>Font</h3>296 <div class="dropdown">297 Contemporary298 <svg width="48" height="48" viewBox="0 0 24 24">299 <path d="M6 9 L12 15 L18 9" fill="none" stroke="#e9e6cf" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>300 </svg>301 </div>302 303 <div class="section">304 <div class="group">305 <div class="subhead">Alignment</div>306 <div class="options-row">307 <div class="square selected align-left">308 <div class="bar"></div><div class="bar"></div><div class="bar"></div>309 </div>310 <div class="square align-center">311 <div class="bar"></div><div class="bar"></div><div class="bar"></div>312 </div>313 </div>314 </div>315 316 <div class="group">317 <div class="subhead">Line Spacing</div>318 <div class="options-row">319 <div class="square selected lines-compact">320 <div class="line"></div><div class="line"></div><div class="line"></div>321 </div>322 <div class="square lines-medium">323 <div class="line"></div><div class="line"></div><div class="line"></div>324 </div>325 <div class="square lines-wide">326 <div class="line"></div><div class="line"></div><div class="line"></div>327 </div>328 </div>329 </div>330 </div>331 332 <div class="section">333 <div class="group">334 <div class="subhead">Scroll Direction</div>335 <div class="options-row">336 <div class="square selected" style="display:flex; align-items:center; justify-content:center;">337 <div class="chev"></div><div class="chev rev"></div>338 </div>339 <div class="square scroll-vert" style="display:flex; flex-direction:column; align-items:center; justify-content:center;">340 <div class="arrow"></div>341 <div class="arrow" style="transform:rotate(225deg);"></div>342 </div>343 </div>344 </div>345 346 <div class="group">347 <div class="subhead">Font Size</div>348 <div class="font-size-row">349 <div class="circle"><span style="font-size:56px; color:#efe9d0;">−</span></div>350 <div class="fsA">Aa</div>351 <div class="circle selected"><span style="font-size:56px; color:#1e1c15; background:#f0e25c; border-radius:50%; width:80px; height:80px; display:flex; align-items:center; justify-content:center;">+</span></div>352 </div>353 </div>354 </div>355 356 <div class="subhead">Theme</div>357 <div class="theme-row">358 <div class="theme">Aa</div>359 <div class="theme">Aa</div>360 <div class="theme">Aa</div>361 <div class="theme selected">Aa</div>362 </div>363 364 <div class="subhead">Brightness</div>365 <div class="brightness">366 <div class="toggle-small">AUTO</div>367 <div class="slider"></div>368 <div class="sun"></div>369 </div>370 </div>371 372 <!-- Trial banner -->373 <div class="trial">374 <div class="line1">Enjoying your free preview?</div>375 <div class="line2">Keep reading with a free trial.</div>376 <div class="cta">Read Free for 30 Days</div>377 </div>378 379 <!-- Bottom progress -->380 <div class="progress">381 <div class="seek"></div>382 <div class="meta">383 <div>4 pages left in chapter</div>384 <div>Page 5 of 44</div>385 </div>386 <div class="search-fab">387 <svg width="58" height="58" viewBox="0 0 24 24">388 <circle cx="10" cy="10" r="7" stroke="#e9e6cf" stroke-width="2.2" fill="none"/>389 <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#e9e6cf" stroke-width="2.2" stroke-linecap="round"/>390 </svg>391 </div>392 </div>393 394</div>395</body>396</html>