GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Reader Settings Overlay</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #121212;13 }14 15 /* Status bar */16 .statusbar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #000;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 32px;27 box-sizing: border-box;28 font-weight: 600;29 }30 .status-time { font-size: 40px; letter-spacing: 0.5px; }31 .status-icons {32 margin-left: auto;33 display: flex;34 align-items: center;35 gap: 26px;36 }37 .icon {38 width: 38px; height: 38px;39 display: inline-flex; align-items: center; justify-content: center;40 }41 .icon svg { width: 100%; height: 100%; fill: #fff; }42 43 /* Dark fabric-like top area */44 .top-texture {45 position: absolute;46 top: 120px;47 left: 0;48 width: 1080px;49 height: 420px;50 background: linear-gradient(180deg, #2e2e2e 0%, #252525 100%);51 }52 53 /* White reading page */54 .page {55 position: absolute;56 left: 75px;57 top: 520px;58 width: 930px;59 background: #ffffff;60 border-radius: 4px;61 box-shadow: 0 2px 0 rgba(255,255,255,0.06);62 padding: 56px 64px;63 box-sizing: border-box;64 color: #121212;65 font-family: Georgia, "Times New Roman", serif;66 line-height: 1.6;67 }68 .page h2 {69 font-size: 34px;70 text-align: center;71 margin: 0 0 28px 0;72 text-decoration: underline;73 font-weight: 700;74 }75 .stage-note {76 font-style: italic;77 color: #333;78 font-size: 28px;79 margin-bottom: 22px;80 }81 .dialogue { font-size: 30px; color: #222; }82 .character { font-variant: small-caps; font-weight: 700; margin-right: 6px; }83 84 /* Bottom settings overlay panel */85 .overlay {86 position: absolute;87 left: 0;88 bottom: 0;89 width: 1080px;90 height: 980px;91 background: #000000;92 border-top-left-radius: 28px;93 border-top-right-radius: 28px;94 box-shadow: 0 -18px 40px rgba(0,0,0,0.6) inset;95 color: #e7e7e7;96 }97 .overlay::before {98 content: "";99 position: absolute;100 top: 16px;101 left: 50%;102 transform: translateX(-50%);103 width: 180px;104 height: 10px;105 background: #2b2b2b;106 border-radius: 5px;107 }108 .panel-scroll {109 position: absolute;110 top: 48px;111 left: 0;112 right: 0;113 bottom: 28px;114 overflow: hidden;115 }116 .panel {117 padding: 40px 48px 80px;118 box-sizing: border-box;119 }120 .section-title {121 font-size: 42px;122 font-weight: 800;123 color: #bfbfbf;124 margin-bottom: 26px;125 }126 .row {127 display: flex;128 align-items: center;129 justify-content: space-between;130 padding: 26px 0;131 border-top: 1px solid #1f1f1f;132 font-size: 34px;133 color: #EAEAEA;134 }135 .row:first-of-type { border-top: none; }136 .subtext {137 font-size: 26px;138 color: #9aa0a6;139 margin-top: 4px;140 }141 142 /* Switch */143 .toggle {144 position: relative;145 width: 150px;146 height: 66px;147 border-radius: 33px;148 background: #5a5a5a;149 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);150 }151 .toggle::after {152 content: "";153 position: absolute;154 top: 8px;155 left: 8px;156 width: 50px;157 height: 50px;158 background: #e8e8e8;159 border-radius: 25px;160 box-shadow: 0 2px 6px rgba(0,0,0,0.4);161 }162 .toggle.on {163 background: #73cfc0;164 }165 .toggle.on::after { left: 92px; }166 167 /* Brightness block */168 .brightness-header {169 display: flex;170 align-items: center;171 justify-content: space-between;172 padding: 28px 0 16px 0;173 border-top: 1px solid #1f1f1f;174 }175 .brightness-label { font-size: 34px; }176 .auto-label {177 font-size: 28px;178 color: #bdbdbd;179 margin-right: 16px;180 }181 .slider-row {182 display: flex;183 align-items: center;184 gap: 28px;185 padding-bottom: 20px;186 }187 .slider {188 width: 680px;189 height: 16px;190 background: #2a2a2a;191 border-radius: 8px;192 position: relative;193 }194 .slider .progress {195 position: absolute;196 top: 0;197 left: 0;198 height: 16px;199 width: 360px;200 background: #7ccfc2;201 border-radius: 8px 0 0 8px;202 }203 .slider .knob {204 position: absolute;205 top: 50%;206 left: 340px;207 transform: translate(-50%, -50%);208 width: 34px;209 height: 34px;210 background: #73cfc0;211 border-radius: 50%;212 box-shadow: 0 2px 6px rgba(0,0,0,0.5);213 }214 .sun-icon {215 width: 48px; height: 48px;216 display: inline-flex; align-items: center; justify-content: center;217 }218 .sun-icon svg { width: 100%; height: 100%; fill: #d7d7d7; }219 220 /* bottom gesture bar */221 .home-indicator {222 position: absolute;223 bottom: 18px;224 left: 50%;225 transform: translateX(-50%);226 width: 220px;227 height: 8px;228 background: #a0a0a0;229 border-radius: 4px;230 opacity: 0.7;231 }232</style>233</head>234<body>235<div id="render-target">236 237 <!-- Status bar -->238 <div class="statusbar">239 <div class="status-time">10:15</div>240 <div class="status-icons">241 <div class="icon">242 <!-- small sun icon -->243 <svg viewBox="0 0 24 24">244 <circle cx="12" cy="12" r="4"></circle>245 <path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8L7 17M17 7l2.8-2.8" stroke="#fff" stroke-width="2" fill="none"></path>246 </svg>247 </div>248 <div class="icon">249 <!-- simple location icon -->250 <svg viewBox="0 0 24 24">251 <path d="M12 2c-3.9 0-7 3.1-7 7 0 5.2 7 13 7 13s7-7.8 7-13c0-3.9-3.1-7-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>252 </svg>253 </div>254 <div class="icon">255 <!-- mail icon -->256 <svg viewBox="0 0 24 24">257 <path d="M3 5h18v14H3zM3 5l9 7 9-7" fill="none" stroke="#fff" stroke-width="2"></path>258 </svg>259 </div>260 <div class="icon">261 <!-- dot for notification -->262 <svg viewBox="0 0 24 24">263 <circle cx="12" cy="12" r="4"></circle>264 </svg>265 </div>266 <div class="icon">267 <!-- wifi -->268 <svg viewBox="0 0 24 24">269 <path d="M2 8c5.5-4 14.5-4 20 0M5 12c3.7-2.7 10.3-2.7 14 0M8 16c2-1.4 6-1.4 8 0M12 20l2 2-2 2-2-2 2-2" fill="none" stroke="#fff" stroke-width="2"></path>270 </svg>271 </div>272 <div class="icon">273 <!-- battery -->274 <svg viewBox="0 0 28 24">275 <rect x="2" y="6" width="22" height="12" rx="2" ry="2" stroke="#fff" fill="none" stroke-width="2"></rect>276 <rect x="24" y="9" width="3" height="6" fill="#fff"></rect>277 <rect x="4" y="8" width="12" height="8" fill="#fff"></rect>278 </svg>279 </div>280 </div>281 </div>282 283 <div class="top-texture"></div>284 285 <!-- White page content -->286 <div class="page">287 <h2>Act I Scene 1</h2>288 <div class="stage-note">(When the curtain rises Yerma is asleep with an embroidery frame at her feet. A strange dreamy light fills the stage. A shepherd enters on tiptoe, gazing fixedly at Yerma. He leads a child dressed in white by the hand. The clock sounds. The shepherd leaves and the bluish light becomes the bright light of a spring morning. Yerma wakes.)</div>289 290 <div class="dialogue">291 <div><span class="character">VOICE SINGING:</span> <em>(within)</em></div>292 <div style="margin-top:16px; margin-left:34px;">293 For a cradle, cradle, cradle<br>294 for a cradle we will make<br>295 a little cabin in the meadow<br>296 and then shelter there’ll we take.297 </div>298 </div>299 300 <div class="dialogue" style="margin-top:36px;">301 <div><span class="character">YERMA:</span> Juan. Do you hear me? Juan.</div>302 <div style="margin-top:18px;"><span class="character">JUAN:</span> I’m on my way.</div>303 <div style="margin-top:18px;"><span class="character">YERMA:</span> It’s time.</div>304 </div>305 </div>306 307 <!-- Settings overlay -->308 <div class="overlay">309 <div class="panel-scroll">310 <div class="panel">311 <div class="section-title">View</div>312 313 <div class="row">314 <div>315 Vertical Scrolling316 </div>317 <div class="toggle on"></div>318 </div>319 320 <div class="row">321 <div>Night Light</div>322 <div class="toggle"></div>323 </div>324 325 <div class="row" style="padding-bottom: 10px;">326 <div>327 <div>Quick Brightness Access</div>328 <div class="subtext">Use left side of the screen to change value</div>329 </div>330 <div class="toggle"></div>331 </div>332 333 <div class="brightness-header">334 <div class="brightness-label">Brightness</div>335 <div style="display:flex; align-items:center; gap:16px;">336 <div class="auto-label">Auto</div>337 <div class="toggle on"></div>338 </div>339 </div>340 341 <div class="slider-row">342 <div class="sun-icon">343 <svg viewBox="0 0 24 24">344 <circle cx="12" cy="12" r="4"></circle>345 <path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8L7 17M17 7l2.8-2.8" stroke="#d7d7d7" stroke-width="2" fill="none"></path>346 </svg>347 </div>348 <div class="slider">349 <div class="progress"></div>350 <div class="knob"></div>351 </div>352 <div class="sun-icon">353 <svg viewBox="0 0 24 24">354 <circle cx="12" cy="12" r="4"></circle>355 <path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M4.2 19.8L7 17M17 7l2.8-2.8" stroke="#d7d7d7" stroke-width="2" fill="none"></path>356 </svg>357 </div>358 </div>359 360 <div class="row">361 <div>Page turn animation</div>362 <div class="toggle on"></div>363 </div>364 365 <div class="row">366 <div>Show reading progress</div>367 <div class="toggle"></div>368 </div>369 370 </div>371 </div>372 373 <div class="home-indicator"></div>374 </div>375 376</div>377</body>378</html>