GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Reading UI - Themes Panel</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Georgia, serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #000000;13    color: #ffffff;14  }15 16  /* Book content */17  .book-text {18    position: absolute;19    left: 60px;20    right: 60px;21    top: 120px;22    bottom: 950px; /* leave room for sheet */23    font-size: 42px;24    line-height: 1.6;25    color: #ffffff;26  }27  .book-text p { margin: 0 0 32px 0; opacity: 0.95; }28 29  /* Blue bookmark ribbon */30  .bookmark {31    position: absolute;32    top: 50px;33    right: 44px;34    width: 48px;35    height: 140px;36    background: #2EA7FF;37    border-radius: 8px 8px 0 0;38  }39  .bookmark:after {40    content: "";41    position: absolute;42    bottom: -24px;43    left: 0;44    width: 0;45    height: 0;46    border-left: 24px solid transparent;47    border-right: 24px solid transparent;48    border-top: 24px solid #2EA7FF;49  }50 51  /* Bottom sheet */52  .sheet {53    position: absolute;54    left: 0;55    right: 0;56    bottom: 0;57    height: 900px;58    background: #2d2f33;59    color: #d9e1ea;60    box-shadow: 0 -12px 30px rgba(0,0,0,0.6);61    border-top: 1px solid #3a3d42;62  }63  .sheet .handle {64    position: absolute;65    top: -26px;66    left: 50%;67    transform: translateX(-50%);68    width: 120px;69    height: 12px;70    background: #74777c;71    border-radius: 8px;72    opacity: 0.6;73  }74 75  .tabs {76    display: flex;77    gap: 56px;78    padding: 36px 48px 22px 48px;79    border-bottom: 1px solid #3a3d42;80    font-family: "Helvetica Neue", Arial, sans-serif;81    font-size: 44px;82  }83  .tab {84    color: #c6cbd2;85    opacity: 0.8;86  }87  .tab.active {88    color: #ffffff;89    opacity: 1;90    position: relative;91  }92  .tab.active:after {93    content: "";94    position: absolute;95    bottom: -22px;96    left: 0;97    width: 100%;98    height: 6px;99    background: #3aa6e5;100    border-radius: 3px;101  }102 103  .panel {104    padding: 34px 48px;105    font-family: "Helvetica Neue", Arial, sans-serif;106  }107 108  .row {109    display: flex;110    align-items: center;111    gap: 28px;112    padding: 28px 0;113    border-bottom: 1px solid #3a3d42;114    font-size: 46px;115    color: #e8edf4;116  }117  .row:last-child { border-bottom: none; }118 119  .icon-square {120    width: 96px;121    height: 96px;122    border-radius: 12px;123    background: #1e1f22;124    border: 2px solid #42464d;125    display: flex;126    align-items: center;127    justify-content: center;128  }129  .icon-square.blue {130    background: #3aa6e5;131    border-color: #3aa6e5;132  }133  .icon-lines {134    width: 64px;135    height: 64px;136    position: relative;137  }138  .icon-lines span {139    position: absolute;140    left: 0; right: 0;141    height: 6px;142    background: #cfd6de;143    border-radius: 3px;144  }145  .icon-lines span:nth-child(1) { top: 6px; }146  .icon-lines span:nth-child(2) { top: 20px; }147  .icon-lines span:nth-child(3) { top: 34px; }148  .icon-lines span:nth-child(4) { top: 48px; }149 150  .row .label { flex: 1; }151  .subtext { font-size: 34px; color: #aab2bd; margin-top: 6px; }152 153  .save-btn {154    margin-left: auto;155    background: #3a3d42;156    border: 2px solid #7c8a97;157    color: #eaf3fb;158    padding: 18px 30px;159    border-radius: 12px;160    font-size: 42px;161  }162 163  /* Brightness area */164  .brightness {165    position: absolute;166    left: 0;167    right: 0;168    bottom: 90px;169    padding: 24px 44px;170    display: flex;171    align-items: center;172    gap: 24px;173  }174  .brightness .sun {175    width: 64px;176    height: 64px;177    color: #eaf3fb;178  }179  .brightness input[type="range"] {180    flex: 1;181    height: 12px;182    -webkit-appearance: none;183    appearance: none;184    background: #51606d;185    border-radius: 8px;186    outline: none;187  }188  .brightness input[type="range"]::-webkit-slider-thumb {189    -webkit-appearance: none;190    appearance: none;191    width: 36px;192    height: 36px;193    background: #3aa6e5;194    border-radius: 50%;195    border: 2px solid #87c9fb;196    margin-top: -12px;197  }198  .auto-box {199    margin-left: 18px;200    display: flex;201    align-items: center;202    gap: 16px;203  }204  .auto-checkbox {205    width: 48px;206    height: 48px;207    border: 3px solid #b9c7d5;208    border-radius: 8px;209    box-sizing: border-box;210  }211  .auto-text {212    font-size: 38px;213    color: #eaf3fb;214  }215 216  .home-indicator {217    position: absolute;218    bottom: 22px;219    left: 50%;220    transform: translateX(-50%);221    width: 560px;222    height: 12px;223    background: #e6e6e6;224    border-radius: 6px;225    opacity: 0.9;226  }227</style>228</head>229<body>230<div id="render-target">231 232  <div class="bookmark"></div>233 234  <div class="book-text">235    <p>saying what happens in each chapter and giving thumbnail sketches of the characters. But this book was not like my others.</p>236    <p>The beginning came easily but, as the story unwound over the decades, and the people grew from youth to maturity, I found it more and more difficult to invent new twists and turns in their lives. I realized that one long book is much more of a challenge than three short ones.</p>237    <p>The hero of the story had to be some kind of man of God. This was difficult for me. I would find it hard to get interested in a character who was focused on the afterlife (and so would many readers). To make Prior Philip more sympathetic, I gave him a</p>238  </div>239 240  <div class="sheet">241    <div class="handle"></div>242 243    <div class="tabs">244      <div class="tab">Font</div>245      <div class="tab">Layout</div>246      <div class="tab active">Themes</div>247      <div class="tab">More</div>248    </div>249 250    <div class="panel">251 252      <div class="row">253        <div class="icon-square">254          <div class="icon-lines">255            <span></span><span></span><span></span><span></span>256          </div>257        </div>258        <div class="label">259          <div style="font-size:46px;">Custom</div>260          <div class="subtext">Save settings as new theme</div>261        </div>262        <div class="save-btn">Save</div>263      </div>264 265      <div class="row">266        <div class="icon-square">267          <div class="icon-lines">268            <span></span><span></span><span></span><span></span>269          </div>270        </div>271        <div class="label">Compact</div>272      </div>273 274      <div class="row">275        <div class="icon-square blue">276          <div class="icon-lines">277            <span></span><span></span><span></span><span></span>278          </div>279        </div>280        <div class="label" style="color:#8fd2ff;">Standard</div>281      </div>282 283    </div>284 285    <div class="brightness">286      <!-- simple sun icons -->287      <svg class="sun" viewBox="0 0 24 24">288        <circle cx="12" cy="12" r="4" fill="currentColor"></circle>289        <g stroke="currentColor" stroke-width="2">290          <line x1="12" y1="1" x2="12" y2="5"></line>291          <line x1="12" y1="19" x2="12" y2="23"></line>292          <line x1="1" y1="12" x2="5" y2="12"></line>293          <line x1="19" y1="12" x2="23" y2="12"></line>294          <line x1="4" y1="4" x2="6.5" y2="6.5"></line>295          <line x1="17.5" y1="17.5" x2="20" y2="20"></line>296          <line x1="4" y1="20" x2="6.5" y2="17.5"></line>297          <line x1="17.5" y1="6.5" x2="20" y2="4"></line>298        </g>299      </svg>300 301      <input type="range" min="0" max="100" value="30">302 303      <svg class="sun" viewBox="0 0 24 24">304        <circle cx="12" cy="12" r="4" fill="currentColor"></circle>305        <g stroke="currentColor" stroke-width="2">306          <line x1="12" y1="1" x2="12" y2="5"></line>307          <line x1="12" y1="19" x2="12" y2="23"></line>308          <line x1="1" y1="12" x2="5" y2="12"></line>309          <line x1="19" y1="12" x2="23" y2="12"></line>310          <line x1="4" y1="4" x2="6.5" y2="6.5"></line>311          <line x1="17.5" y1="17.5" x2="20" y2="20"></line>312          <line x1="4" y1="20" x2="6.5" y2="17.5"></line>313          <line x1="17.5" y1="6.5" x2="20" y2="4"></line>314        </g>315      </svg>316 317      <div class="auto-box">318        <div class="auto-checkbox"></div>319        <div class="auto-text">Auto</div>320      </div>321    </div>322 323    <div class="home-indicator"></div>324  </div>325</div>326</body>327</html>