GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Play Books Settings Overlay - Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Arial, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #0f0f0f;13 color: #fff;14 }15 16 /* Top status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1440px;22 height: 120px;23 color: #eaeaea;24 font-size: 44px;25 display: flex;26 align-items: center;27 padding: 0 40px;28 box-sizing: border-box;29 letter-spacing: 1px;30 }31 .status-left { display: flex; align-items: center; gap: 30px; }32 .status-right { margin-left: auto; display: flex; align-items: center; gap: 30px; }33 .dot { width: 18px; height: 18px; background: #cfcfcf; border-radius: 50%; display: inline-block; }34 35 /* App bar */36 .app-bar {37 position: absolute;38 top: 120px;39 left: 0;40 width: 1440px;41 height: 140px;42 display: flex;43 align-items: center;44 padding: 0 40px;45 box-sizing: border-box;46 color: #ddd;47 }48 .title {49 font-size: 56px;50 font-weight: 600;51 white-space: nowrap;52 overflow: hidden;53 text-overflow: ellipsis;54 max-width: 900px;55 }56 .app-actions { margin-left: auto; display: flex; align-items: center; gap: 40px; }57 .icon-btn { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }58 .aa-pill { font-size: 60px; color: #ddd; }59 60 /* Reading area text */61 .page-text {62 position: absolute;63 top: 300px;64 left: 80px;65 right: 80px;66 bottom: 820px;67 color: #f6f6f6;68 font-size: 68px;69 line-height: 108px;70 letter-spacing: 0.3px;71 opacity: 0.95;72 }73 .page-text p { margin: 0 0 40px 0; }74 75 /* Settings panel overlay */76 .panel {77 position: absolute;78 left: 160px;79 top: 560px;80 width: 1120px;81 background: #221d16;82 border-radius: 28px;83 box-shadow: 0 20px 60px rgba(0,0,0,0.6);84 padding: 60px;85 box-sizing: border-box;86 color: #fff;87 }88 .panel h3 {89 margin: 0 0 26px 0;90 font-size: 56px;91 font-weight: 700;92 }93 .panel .row {94 display: flex;95 align-items: center;96 margin-bottom: 46px;97 gap: 40px;98 flex-wrap: wrap;99 }100 .select {101 width: 900px;102 height: 120px;103 border: 2px solid #4a4338;104 border-radius: 20px;105 display: flex;106 align-items: center;107 justify-content: space-between;108 padding: 0 40px;109 font-size: 56px;110 background: #1c1711;111 box-sizing: border-box;112 }113 114 /* Small square options */115 .option {116 width: 200px;117 height: 160px;118 border-radius: 20px;119 background: #1c1711;120 border: 2px solid #4a4338;121 display: flex;122 align-items: center;123 justify-content: center;124 }125 .option.selected { border: 4px solid #f3e25a; box-shadow: inset 0 0 0 4px rgba(243,226,90,0.15); }126 127 /* Alignment / spacing icon boxes */128 .icon-box {129 width: 220px;130 height: 160px;131 border-radius: 18px;132 border: 2px solid #4a4338;133 background: #1c1711;134 position: relative;135 }136 .icon-box.selected { border: 4px solid #f3e25a; }137 .icon-lines {138 position: absolute; left: 32px; right: 32px; top: 36px;139 display: grid; row-gap: 18px;140 }141 .icon-lines div {142 height: 16px; background: #d9d9d9; border-radius: 8px;143 }144 .icon-lines .short { width: 70%; }145 .icon-lines .center { margin: 0 auto; }146 .icon-lines .full { width: 100%; }147 148 /* Scroll direction icons */149 .scroll-icon {150 position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;151 }152 .arrow {153 width: 140px; height: 90px;154 display: flex; align-items: center; justify-content: space-between;155 }156 .arrow span {157 width: 38px; height: 38px; border: 6px solid #d9d9d9; border-left: none;158 transform: rotate(45deg);159 }160 .arrow .left { transform: rotate(225deg); }161 .arrow .down { transform: rotate(135deg); }162 163 /* Font size controls */164 .circle {165 width: 110px; height: 110px; border-radius: 50%;166 border: 6px solid #f3e25a; color: #f3e25a;167 display: flex; align-items: center; justify-content: center;168 font-size: 70px;169 background: transparent;170 }171 .font-AA { font-size: 74px; color: #fff; font-weight: 700; }172 173 /* Theme cells */174 .theme-cell {175 width: 240px; height: 180px; border-radius: 22px;176 display: flex; align-items: center; justify-content: center;177 font-size: 60px; font-weight: 700;178 border: 2px solid #4a4338;179 }180 .theme1 { background: #f7f7f7; color: #333; }181 .theme2 { background: #f0ece6; color: #5c4c3f; }182 .theme3 { background: #4a4a4a; color: #fff; }183 .theme4 { background: #0f0f0f; color: #fff; border: 4px solid #f3e25a; }184 185 /* Brightness */186 .brightness {187 display: flex; align-items: center; gap: 40px;188 }189 .toggle {190 font-size: 50px; color: #bdb6a7; background: #1c1711;191 padding: 24px 40px; border-radius: 18px; border: 2px solid #4a4338;192 }193 .slider {194 flex: 1; height: 12px; background: #3a3328; border-radius: 8px; position: relative;195 }196 .knob {197 position: absolute; top: -16px; left: 60%; width: 36px; height: 36px;198 background: #f3e25a; border-radius: 50%;199 box-shadow: 0 0 0 6px rgba(243,226,90,0.25);200 }201 .sun {202 width: 64px; height: 64px; border-radius: 50%; background: #f3e25a;203 box-shadow: 0 0 0 8px rgba(243,226,90,0.15);204 }205 206 /* Bottom preview banner */207 .preview-banner {208 position: absolute;209 left: 0;210 bottom: 300px;211 width: 1440px;212 background: #1d1b16;213 padding: 50px 60px 70px;214 box-sizing: border-box;215 color: #eae6d4;216 text-align: center;217 font-size: 52px;218 border-top: 1px solid #2d2b24;219 }220 .cta-btn {221 margin: 40px auto 0 auto;222 width: 1240px;223 height: 140px;224 border-radius: 30px;225 background: #f6f6f6;226 color: #2b281f;227 font-weight: 700;228 font-size: 60px;229 display: flex; align-items: center; justify-content: center;230 }231 232 /* Bottom controls */233 .bottom-controls {234 position: absolute;235 left: 0;236 bottom: 100px;237 width: 1440px;238 padding: 0 60px;239 box-sizing: border-box;240 color: #eae6d4;241 }242 .progress {243 height: 16px; background: #2f2d25; border-radius: 10px; position: relative; margin-bottom: 40px;244 }245 .progress .dot {246 position: absolute; top: -18px; left: 80px; width: 40px; height: 40px; background: #e8db6a;247 border-radius: 50%;248 }249 .bottom-row { display: flex; align-items: center; }250 .left-info { font-size: 52px; color: #eae6d4; }251 .right-info { margin-left: auto; font-size: 52px; color: #eae6d4; }252 .search {253 width: 90px; height: 90px; margin-left: 28px; border-radius: 16px; border: 2px solid #8e8a7d;254 display: flex; align-items: center; justify-content: center;255 }256 /* Simple SVG icons color */257 svg { fill: none; stroke: #ddd; stroke-width: 8px; }258</style>259</head>260<body>261<div id="render-target">262 263 <!-- Status bar -->264 <div class="status-bar">265 <div class="status-left">266 <div>9:10</div>267 <div class="dot"></div>268 <div class="dot"></div>269 <div class="dot"></div>270 <div class="dot"></div>271 </div>272 <div class="status-right">273 <div class="dot"></div>274 <div class="dot"></div>275 </div>276 </div>277 278 <!-- App bar -->279 <div class="app-bar">280 <div class="icon-btn">281 <svg width="80" height="80" viewBox="0 0 80 80">282 <path d="M50 18 L26 40 L50 62" stroke-linecap="round" stroke-linejoin="round"></path>283 </svg>284 </div>285 <div class="title">Summary of Project Hail Mary:...</div>286 <div class="app-actions">287 <div class="aa-pill">Aa</div>288 <div class="icon-btn">289 <svg width="70" height="70" viewBox="0 0 70 70">290 <circle cx="35" cy="16" r="6" stroke="none" fill="#ddd"></circle>291 <circle cx="35" cy="35" r="6" stroke="none" fill="#ddd"></circle>292 <circle cx="35" cy="54" r="6" stroke="none" fill="#ddd"></circle>293 </svg>294 </div>295 </div>296 </div>297 298 <!-- Reading text -->299 <div class="page-text">300 <p>SU... HAIL MARY ...</p>301 <p>That ...</p>302 <p>prep use study and it provides a safe space for you to freely express yourself without being judged by others.</p>303 <p>Using this journal in a group study is completely up...</p>304 </div>305 306 <!-- Settings panel -->307 <div class="panel">308 <h3>Font</h3>309 <div class="row">310 <div class="select">311 <span>Contemporary</span>312 <svg width="60" height="60" viewBox="0 0 60 60">313 <path d="M16 22 L30 38 L44 22" stroke="#ddd" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"></path>314 </svg>315 </div>316 </div>317 318 <div class="row" style="margin-top: 20px;">319 <div style="width:100%; font-size:54px; margin-bottom:8px;">Alignment</div>320 <div class="icon-box selected">321 <div class="icon-lines">322 <div class="full"></div>323 <div class="full"></div>324 <div class="full"></div>325 </div>326 </div>327 <div class="icon-box">328 <div class="icon-lines">329 <div class="short center"></div>330 <div class="short center"></div>331 <div class="short center"></div>332 </div>333 </div>334 </div>335 336 <div class="row" style="margin-top: 10px;">337 <div style="width:100%; font-size:54px; margin-bottom:8px;">Line Spacing</div>338 <div class="icon-box selected">339 <div class="icon-lines">340 <div class="full" style="height: 18px;"></div>341 <div style="height: 12px;"></div>342 <div class="full" style="height: 18px;"></div>343 </div>344 </div>345 <div class="icon-box">346 <div class="icon-lines">347 <div class="full" style="height: 18px;"></div>348 <div style="height: 20px;"></div>349 <div class="full" style="height: 18px;"></div>350 </div>351 </div>352 <div class="icon-box">353 <div class="icon-lines">354 <div class="full" style="height: 18px;"></div>355 <div style="height: 28px;"></div>356 <div class="full" style="height: 18px;"></div>357 </div>358 </div>359 </div>360 361 <div class="row" style="margin-top: 10px;">362 <div style="width:100%; font-size:54px; margin-bottom:8px;">Scroll Direction</div>363 <div class="icon-box selected">364 <div class="scroll-icon">365 <div class="arrow">366 <span class="left"></span>367 <span></span>368 </div>369 </div>370 </div>371 <div class="icon-box">372 <div class="scroll-icon">373 <div class="arrow">374 <span class="down"></span>375 </div>376 </div>377 </div>378 </div>379 380 <div class="row" style="margin-top: 10px;">381 <div style="width:100%; font-size:54px; margin-bottom:8px;">Font Size</div>382 <div class="circle">–</div>383 <div class="font-AA">Aa</div>384 <div class="circle">+</div>385 </div>386 387 <div class="row" style="margin-top: 20px;">388 <div style="width:100%; font-size:54px; margin-bottom:8px;">Theme</div>389 <div class="theme-cell theme1">Aa</div>390 <div class="theme-cell theme2">Aa</div>391 <div class="theme-cell theme3">Aa</div>392 <div class="theme-cell theme4">Aa</div>393 </div>394 395 <div class="row" style="margin-top: 6px;">396 <div style="width:100%; font-size:54px; margin-bottom:8px;">Brightness</div>397 <div class="toggle">AUTO</div>398 <div class="slider"><div class="knob"></div></div>399 <div class="sun"></div>400 </div>401 </div>402 403 <!-- Preview banner -->404 <div class="preview-banner">405 <div>Enjoying your free preview?<br>Keep reading with a free trial.</div>406 <div class="cta-btn">Read Free for 30 Days</div>407 </div>408 409 <!-- Bottom controls -->410 <div class="bottom-controls">411 <div class="progress"><div class="dot"></div></div>412 <div class="bottom-row">413 <div class="left-info">4 pages left in chapter</div>414 <div class="right-info">Page 5 of 44</div>415 <div class="search">416 <svg width="60" height="60" viewBox="0 0 60 60">417 <circle cx="28" cy="28" r="16"></circle>418 <line x1="42" y1="42" x2="58" y2="58"></line>419 </svg>420 </div>421 </div>422 </div>423 424</div>425</body>426</html>