GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Reader UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Georgia, "Times New Roman", serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14  }15 16  /* Status bar */17  .status-bar {18    position: absolute;19    top: 0; left: 0;20    width: 100%;21    height: 120px;22    background: #0A0A0A;23    color: #fff;24    display: flex;25    align-items: center;26    padding: 0 34px;27    box-sizing: border-box;28    font-family: "Roboto", Arial, sans-serif;29  }30  .status-bar .time {31    font-size: 40px;32    font-weight: 600;33    letter-spacing: 1px;34  }35  .status-bar .icons {36    margin-left: auto;37    display: flex;38    align-items: center;39    gap: 26px;40  }41  .status-dot {42    width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9;43  }44  .icon {45    width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 3;46  }47  .battery {48    width: 60px; height: 32px; position: relative;49  }50  .battery rect { fill: none; stroke: #fff; stroke-width: 4; rx: 6; }51  .battery .cap { fill: #fff; }52 53  /* Page text */54  .page {55    position: absolute;56    top: 120px;57    bottom: 0;58    left: 0;59    right: 0;60    padding: 90px 72px 140px 72px;61    box-sizing: border-box;62  }63  .page p {64    font-size: 56px;65    line-height: 1.65;66    color: #111;67    margin: 0 0 42px 0;68    letter-spacing: 0.3px;69  }70 71  /* Floating reader settings panel */72  .panel {73    position: absolute;74    top: 210px;75    left: 160px;76    width: 760px;77    background: #fff;78    border-radius: 28px;79    border: 1px solid #E5E5E5;80    box-shadow: 0 28px 90px rgba(0,0,0,0.25);81    padding: 36px 34px 34px;82    box-sizing: border-box;83  }84  .tabs {85    display: flex;86    gap: 40px;87    padding: 8px 6px 14px 6px;88    font-family: "Roboto", Arial, sans-serif;89  }90  .tab {91    font-size: 44px;92    color: #777;93    font-weight: 600;94  }95  .tab.active { color: #1E73E8; }96  .options-row {97    display: flex;98    align-items: center;99    gap: 46px;100    margin-top: 28px;101  }102  .font-option {103    display: flex;104    flex-direction: column;105    align-items: center;106    width: 170px;107  }108  .circle {109    width: 160px; height: 160px; border-radius: 50%;110    border: 2px solid #CFCFCF;111    display: flex; align-items: center; justify-content: center;112    background: #fff;113  }114  .circle .letter {115    font-size: 110px; font-family: Georgia, serif; color: #4A4A4A;116  }117  .circle.active {118    background: #2D79FF;119    border-color: #2D79FF;120  }121  .circle.active .letter { color: #fff; }122  .opt-label {123    margin-top: 16px;124    font-size: 34px;125    color: #3A3A3A;126    font-family: "Roboto", Arial, sans-serif;127  }128 129  /* Controls */130  .control-row {131    margin-top: 26px;132    display: flex;133    align-items: center;134    justify-content: space-between;135    padding: 0 8px;136  }137  .control-left {138    display: flex;139    align-items: center;140    gap: 18px;141  }142  .btn-rect {143    width: 180px; height: 96px;144    border: 2px solid #D6D6D6;145    border-radius: 12px;146    display: flex; align-items: center; justify-content: center;147    font-size: 64px;148    color: #444;149    font-family: "Roboto Slab", Georgia, serif;150    background: #FAFAFA;151  }152  .percent {153    font-size: 40px;154    font-family: "Roboto", Arial, sans-serif;155    color: #555;156    width: 150px; text-align: center;157  }158  .btn-icon {159    width: 180px; height: 96px;160    border: 2px solid #D6D6D6;161    border-radius: 12px;162    display: flex; align-items: center; justify-content: center;163    background: #FAFAFA;164  }165  .icon-lines {166    width: 70px; height: 70px;167  }168  .icon-align {169    width: 70px; height: 70px;170  }171 172  .footer-row {173    margin-top: 22px;174    display: flex;175    align-items: center;176    justify-content: space-between;177    padding: 0 8px;178    font-family: "Roboto", Arial, sans-serif;179  }180  .footer-left {181    display: flex;182    align-items: center;183    gap: 22px;184    color: #444;185  }186  .default-text { font-size: 42px; }187  .chev {188    width: 26px; height: 26px; fill: #777;189    margin-left: 6px;190  }191 192  /* Home indicator */193  .home-indicator {194    position: absolute;195    bottom: 28px;196    left: 50%;197    transform: translateX(-50%);198    width: 420px;199    height: 18px;200    background: #BEBEBE;201    border-radius: 10px;202    opacity: 0.9;203  }204</style>205</head>206<body>207<div id="render-target">208 209  <!-- Status bar -->210  <div class="status-bar">211    <div class="time">10:14</div>212    <div class="icons">213      <div class="status-dot"></div>214      <div class="status-dot"></div>215      <div class="status-dot"></div>216      <!-- WiFi -->217      <svg class="icon" viewBox="0 0 24 24">218        <path d="M2 9c5-5 15-5 20 0M5 12c3.5-3.5 10.5-3.5 14 0M8 15c2-2 6-2 8 0"></path>219        <circle cx="12" cy="19" r="1.8" fill="#fff"></circle>220      </svg>221      <!-- Signal -->222      <svg class="icon" viewBox="0 0 24 24">223        <path d="M3 20h2M7 16h2M11 12h2M15 8h2M19 4h2" stroke-linecap="round"></path>224      </svg>225      <!-- Battery -->226      <svg class="battery" viewBox="0 0 60 32">227        <rect x="2" y="2" width="48" height="28" rx="5"></rect>228        <rect x="50" y="9" width="8" height="14" class="cap"></rect>229        <rect x="6" y="6" width="38" height="20" fill="#fff"></rect>230      </svg>231    </div>232  </div>233 234  <!-- Page content -->235  <div class="page">236    <p>I was reading Alex P again around my preferred pace.</p>237    <p>On a night reading my friend; young and were gushing about how perfect Chumpy was, how special he was for being so in touch with his emotions and how good we were together.</p>238    <p>Chumpy had flown to Victoria after the party and was in Melbourne, preparing to head overseas for the snow season. I was complaining to my friends that he only had a couple of days left in the country when two of them made an executive decision. Maia and Mel hijacked my phone and booked me a flight to Melbourne for the next afternoon.</p>239  </div>240 241  <!-- Floating settings panel -->242  <div class="panel">243    <div class="tabs">244      <div class="tab active">Text</div>245      <div class="tab">Lighting</div>246    </div>247 248    <div class="options-row">249      <div class="font-option">250        <div class="circle active">251          <div class="letter">A</div>252        </div>253        <div class="opt-label">Original</div>254      </div>255      <div class="font-option">256        <div class="circle">257          <div class="letter" style="font-family: Arial, Helvetica, sans-serif;">A</div>258        </div>259        <div class="opt-label">Sans</div>260      </div>261      <div class="font-option">262        <div class="circle">263          <div class="letter" style="font-family: 'Times New Roman', serif;">A</div>264        </div>265        <div class="opt-label">Literata</div>266      </div>267      <div class="font-option">268        <div class="circle">269          <div class="letter" style="font-family: 'Merriweather', Georgia, serif;">A</div>270        </div>271        <div class="opt-label">Merri...</div>272      </div>273    </div>274 275    <div class="control-row" style="margin-top: 24px;">276      <div class="control-left">277        <div class="btn-rect">T</div>278      </div>279      <div class="percent">113%</div>280      <div class="btn-rect">T</div>281    </div>282 283    <div class="control-row">284      <div class="control-left">285        <div class="btn-icon">286          <svg class="icon-lines" viewBox="0 0 24 24" stroke="#555" fill="none" stroke-width="2">287            <path d="M3 6h18M3 10h14M3 14h18M3 18h12" stroke-linecap="round"/>288          </svg>289        </div>290      </div>291      <div class="percent">100%</div>292      <div class="btn-icon">293        <svg class="icon-align" viewBox="0 0 24 24" stroke="#555" fill="none" stroke-width="2">294          <path d="M3 6h18M7 10h10M5 14h14M9 18h6" stroke-linecap="round"/>295        </svg>296      </div>297    </div>298 299    <div class="footer-row">300      <div class="footer-left">301        <svg class="icon-lines" viewBox="0 0 24 24" stroke="#555" fill="none" stroke-width="2">302          <path d="M3 6h18M3 10h18M3 14h18M3 18h18" stroke-linecap="round"/>303        </svg>304        <div class="default-text">Default</div>305      </div>306      <svg class="chev" viewBox="0 0 24 24">307        <path d="M6 9l6 6 6-6" fill="none" stroke="#777" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>308      </svg>309    </div>310  </div>311 312  <!-- Home indicator -->313  <div class="home-indicator"></div>314</div>315</body>316</html>