GD-ML/AndroidCode

1<html>2  <head>3    <meta charset="UTF-8" />4    <title>Reading App UI</title>5    <style>6      body {7        margin: 0;8        padding: 0;9        background: transparent;10        font-family: Georgia, "Times New Roman", serif;11      }12      #render-target {13        width: 1080px;14        height: 2400px;15        position: relative;16        overflow: hidden;17        background: #ffffff;18        border-radius: 0;19        box-shadow: none;20      }21 22      /* Status bar */23      .status-bar {24        position: absolute;25        top: 0;26        left: 0;27        width: 1080px;28        height: 120px;29        background: #0a0a0a;30        color: #ffffff;31        display: flex;32        align-items: center;33        padding: 0 32px;34        box-sizing: border-box;35      }36      .status-time {37        font-size: 44px;38        font-weight: 600;39        letter-spacing: 1px;40        margin-right: 24px;41      }42      .status-icons {43        display: flex;44        align-items: center;45        gap: 22px;46      }47      .circle-icon {48        width: 34px;49        height: 34px;50        border-radius: 50%;51        background: #cfcfcf;52        opacity: 0.9;53      }54      .signal-icon,55      .battery-icon {56        width: 44px;57        height: 28px;58      }59 60      /* Reading content */61      .page {62        position: absolute;63        top: 140px;64        left: 40px;65        right: 40px;66        bottom: 140px;67        overflow: hidden;68        color: #000;69      }70      .page p {71        font-size: 50px;72        line-height: 1.6;73        margin: 36px 0;74      }75 76      /* Bottom handle */77      .nav-handle {78        position: absolute;79        bottom: 28px;80        left: 50%;81        transform: translateX(-50%);82        width: 360px;83        height: 16px;84        background: #9e9e9e;85        border-radius: 8px;86        opacity: 0.7;87      }88 89      /* Modal card */90      .modal {91        position: absolute;92        top: 220px;93        left: 100px;94        width: 880px;95        background: #ffffff;96        border-radius: 28px;97        box-shadow: 0 12px 32px rgba(0,0,0,0.18);98        border: 1px solid #e6e6e6;99        padding: 32px 36px 40px;100        box-sizing: border-box;101      }102 103      .tabbar {104        display: flex;105        gap: 24px;106        padding-bottom: 8px;107        border-bottom: 1px solid #eeeeee;108        margin-bottom: 22px;109      }110      .tab {111        font-size: 40px;112        color: #636363;113        padding: 8px 8px 16px;114      }115      .tab.active {116        color: #1e88e5;117        border-bottom: 6px solid #1e88e5;118        border-radius: 0;119      }120 121      .section-title {122        font-size: 36px;123        color: #2b2b2b;124        margin-top: 24px;125        margin-bottom: 22px;126      }127 128      /* Brightness control */129      .brightness-row {130        display: flex;131        align-items: center;132        gap: 24px;133      }134      .slider {135        position: relative;136        width: 620px;137        height: 10px;138        background: #e0e0e0;139        border-radius: 5px;140      }141      .slider .progress {142        position: absolute;143        left: 0;144        top: 0;145        height: 10px;146        width: 320px;147        background: #c7c7c7;148        border-radius: 5px 0 0 5px;149      }150      .slider .thumb {151        position: absolute;152        left: 310px;153        top: -10px;154        width: 28px;155        height: 28px;156        background: #d9d9d9;157        border: 3px solid #bfbfbf;158        border-radius: 50%;159      }160 161      .switch {162        width: 88px;163        height: 50px;164        background: #d3d3d3;165        border-radius: 25px;166        position: relative;167        border: 1px solid #bfbfbf;168      }169      .switch .knob {170        width: 42px;171        height: 42px;172        background: #f0f0f0;173        border-radius: 50%;174        position: absolute;175        top: 3px;176        right: 3px;177        box-shadow: 0 1px 2px rgba(0,0,0,0.2);178      }179 180      /* Theme tiles */181      .theme-row {182        display: flex;183        gap: 26px;184      }185      .theme-tile {186        width: 250px;187        height: 140px;188        border-radius: 16px;189        border: 2px solid #cfcfcf;190        box-sizing: border-box;191        display: flex;192        align-items: center;193        justify-content: center;194        position: relative;195      }196      .theme-tile.light {197        background: #ffffff;198      }199      .theme-tile.sepia {200        background: #e8dcc3;201      }202      .theme-tile.dark {203        background: #000000;204      }205      .check-icon {206        position: absolute;207        top: 16px;208        left: 16px;209        width: 46px;210        height: 46px;211        background: #ffffff;212        border-radius: 10px;213        border: 2px solid #d0d0d0;214        display: flex;215        align-items: center;216        justify-content: center;217      }218 219      /* Night Light row */220      .night-row {221        margin-top: 26px;222        display: flex;223        align-items: center;224        justify-content: space-between;225      }226      .night-left {227        display: flex;228        align-items: center;229        gap: 20px;230      }231      .info-icon {232        width: 46px;233        height: 46px;234        border-radius: 50%;235        border: 2px solid #bdbdbd;236        display: flex;237        align-items: center;238        justify-content: center;239        color: #6b6b6b;240        font-weight: 700;241      }242    </style>243  </head>244  <body>245    <div id="render-target">246      <!-- Status bar -->247      <div class="status-bar">248        <div class="status-time">10:14</div>249        <div class="status-icons">250          <div class="circle-icon"></div>251          <div class="circle-icon"></div>252          <div class="circle-icon"></div>253          <svg class="signal-icon" viewBox="0 0 24 24" fill="#cfcfcf">254            <rect x="2" y="16" width="4" height="6"></rect>255            <rect x="8" y="12" width="4" height="10"></rect>256            <rect x="14" y="8" width="4" height="14"></rect>257            <rect x="20" y="4" width="4" height="18"></rect>258          </svg>259          <svg class="battery-icon" viewBox="0 0 36 20">260            <rect x="1" y="3" width="30" height="14" rx="3" ry="3" fill="#cfcfcf"></rect>261            <rect x="3" y="5" width="22" height="10" fill="#8bc34a"></rect>262            <rect x="32" y="7" width="3" height="6" fill="#cfcfcf"></rect>263          </svg>264        </div>265      </div>266 267      <!-- Reading content -->268      <div class="page">269        <p>I was<br><b>Alex P</b><br> again around prefer</p>270        <p>On a night reading my friends, young and crushed‑up — and they 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>271        <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>272      </div>273 274      <!-- Modal overlay card -->275      <div class="modal">276        <div class="tabbar">277          <div class="tab">Text</div>278          <div class="tab active">Lighting</div>279        </div>280 281        <div class="section-title">Reading brightness</div>282        <div class="brightness-row">283          <div class="slider">284            <div class="progress"></div>285            <div class="thumb"></div>286          </div>287          <div class="switch">288            <div class="knob"></div>289          </div>290        </div>291 292        <div class="section-title">Viewing theme</div>293        <div class="theme-row">294          <div class="theme-tile light">295            <div class="check-icon">296              <svg viewBox="0 0 24 24" width="28" height="28">297                <path d="M4 12l4 4 10-10" stroke="#2e7d32" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>298              </svg>299            </div>300          </div>301          <div class="theme-tile sepia"></div>302          <div class="theme-tile dark"></div>303        </div>304 305        <div class="section-title">Reading Night Light</div>306        <div class="night-row">307          <div class="night-left">308            <div class="info-icon">i</div>309          </div>310          <div class="switch">311            <div class="knob"></div>312          </div>313        </div>314      </div>315 316      <!-- Bottom gesture handle -->317      <div class="nav-handle"></div>318    </div>319  </body>320</html>