GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Rendering</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #FFFFFF;20  }21 22  /* Status bar */23  .status-bar {24    position: absolute;25    top: 0;26    left: 0;27    width: 1080px;28    height: 130px;29    background: #000;30    color: #fff;31    display: flex;32    align-items: center;33    padding: 0 40px;34    box-sizing: border-box;35    font-weight: 600;36  }37  .status-left { flex: 0 0 auto; font-size: 42px; }38  .status-right {39    margin-left: auto;40    display: flex;41    gap: 28px;42    align-items: center;43  }44  .status-icon {45    width: 40px; height: 40px;46    border-radius: 6px;47    background: #fff;48    opacity: 0.9;49  }50  .status-battery {51    width: 54px; height: 34px; border: 4px solid #fff; border-radius: 6px; position: relative;52  }53  .status-battery::after {54    content: "";55    position: absolute; right: -10px; top: 8px;56    width: 8px; height: 18px; background: #fff; border-radius: 2px;57  }58  .status-battery::before {59    content: "";60    position: absolute; left: 6px; top: 6px; right: 6px; bottom: 6px;61    background: #fff;62  }63 64  /* Page content */65  .page {66    position: absolute;67    top: 130px;68    left: 0;69    right: 0;70    bottom: 0;71    padding: 80px 80px 160px 80px;72    box-sizing: border-box;73  }74  .title-line {75    font-size: 160px;76    line-height: 1.05;77    font-weight: 800;78    color: #000;79    margin: 30px 0;80  }81 82  /* Author and imprint */83  .author {84    font-size: 90px;85    font-weight: 800;86    color: #8B1D22;87    text-align: center;88    margin-top: 650px;89  }90  .imprint {91    width: 880px;92    height: 190px;93    margin: 40px auto 24px auto;94    background: #E0E0E0;95    border: 1px solid #BDBDBD;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #757575;100    font-size: 46px;101    border-radius: 12px;102  }103  .cities {104    text-align: center;105    font-size: 44px;106    color: #222;107    letter-spacing: 0.5px;108  }109 110  /* Bottom progress bar */111  .progress {112    position: absolute;113    left: 220px;114    bottom: 120px;115    width: 640px;116    height: 16px;117    background: #9E9E9E;118    border-radius: 10px;119  }120 121  /* Settings overlay card */122  .settings-card {123    position: absolute;124    left: 90px;125    top: 320px;126    width: 900px;127    background: #fff;128    border-radius: 28px;129    box-shadow: 0 12px 28px rgba(0,0,0,0.18);130    border: 1px solid rgba(0,0,0,0.06);131    overflow: hidden;132  }133  .settings-header {134    display: flex;135    gap: 40px;136    padding: 28px 34px 0 34px;137    font-size: 40px;138    font-weight: 600;139    color: #666;140  }141  .tab-active {142    color: #1E73E8;143    position: relative;144    padding-bottom: 22px;145  }146  .tab-active::after {147    content: "";148    position: absolute;149    left: 0; right: 0; bottom: 0;150    height: 6px;151    background: #1E73E8;152    border-radius: 6px 6px 0 0;153  }154  .divider {155    height: 1px; background: #e6e6e6; margin: 0 0 20px 0;156  }157  .font-row {158    display: flex;159    gap: 30px;160    padding: 26px 34px 10px 34px;161  }162  .option {163    width: 200px;164    text-align: center;165  }166  .circle {167    width: 160px; height: 160px;168    border-radius: 80px;169    border: 2px solid #D0D0D0;170    display: flex; align-items: center; justify-content: center;171    margin: 0 auto 18px auto;172    font-size: 88px; font-weight: 700; color: #666;173    background: #fff;174  }175  .circle.active {176    background: #2F7DEB;177    color: #fff;178    border-color: #2F7DEB;179  }180  .option-label {181    font-size: 34px;182    color: #666;183  }184 185  .controls {186    display: grid;187    grid-template-columns: 1fr 1fr;188    gap: 30px 20px;189    padding: 16px 34px 24px 34px;190  }191  .control-box {192    border: 2px solid #D7D7D7;193    border-radius: 12px;194    height: 110px;195    display: flex;196    align-items: center;197    justify-content: center;198    font-weight: 700;199    color: #555;200    font-size: 52px;201    background: #fff;202  }203  .control-stack {204    display: flex;205    align-items: center;206    gap: 20px;207  }208  .percent {209    font-size: 40px; color: #777;210  }211 212  .footer-row {213    display: flex;214    align-items: center;215    justify-content: space-between;216    padding: 18px 34px 26px 34px;217    font-size: 40px;218    color: #555;219  }220  .footer-left {221    display: flex;222    align-items: center;223    gap: 18px;224  }225  .menu-icon {226    width: 40px; height: 40px;227  }228  .caret {229    width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;230    border-top: 16px solid #777;231    margin-right: 10px;232  }233 234  /* Simple line alignment icons */235  .svg-lines {236    width: 60px; height: 60px;237  }238  .svg-lines path { stroke: #666; stroke-width: 8; }239</style>240</head>241<body>242<div id="render-target">243 244  <div class="status-bar">245    <div class="status-left">11:05</div>246    <div class="status-right">247      <div class="status-icon"></div>248      <div class="status-icon"></div>249      <div class="status-battery"></div>250    </div>251  </div>252 253  <div class="page">254    <div class="title-line">Real</div>255    <div class="title-line">Data</div>256    <div class="title-line">Analytics</div>257 258    <div class="settings-card">259      <div class="settings-header">260        <div class="tab-active">Text</div>261        <div>Lighting</div>262      </div>263      <div class="divider"></div>264 265      <div class="font-row">266        <div class="option">267          <div class="circle active">A</div>268          <div class="option-label">Original</div>269        </div>270        <div class="option">271          <div class="circle">A</div>272          <div class="option-label">Sans</div>273        </div>274        <div class="option">275          <div class="circle">A</div>276          <div class="option-label">Literata</div>277        </div>278        <div class="option">279          <div class="circle">A</div>280          <div class="option-label">Merri…</div>281        </div>282      </div>283 284      <div class="controls">285        <div class="control-stack">286          <div class="control-box">T</div>287          <div class="percent">88%</div>288        </div>289        <div class="control-stack">290          <div class="control-box">T</div>291          <div class="percent">100%</div>292        </div>293        <div class="control-stack">294          <div class="control-box">295            <svg class="svg-lines" viewBox="0 0 100 100">296              <path d="M10 20 H90"></path>297              <path d="M20 45 H80"></path>298              <path d="M10 70 H90"></path>299            </svg>300          </div>301        </div>302        <div class="control-stack">303          <div class="control-box">304            <svg class="svg-lines" viewBox="0 0 100 100">305              <path d="M20 20 H80"></path>306              <path d="M10 45 H90"></path>307              <path d="M20 70 H80"></path>308            </svg>309          </div>310        </div>311      </div>312 313      <div class="footer-row">314        <div class="footer-left">315          <svg class="menu-icon" viewBox="0 0 100 100">316            <rect x="10" y="20" width="80" height="12" fill="#747474"></rect>317            <rect x="10" y="44" width="60" height="12" fill="#747474"></rect>318            <rect x="10" y="68" width="80" height="12" fill="#747474"></rect>319          </svg>320          <div>Default</div>321        </div>322        <div class="caret"></div>323      </div>324    </div>325 326    <div class="author">Mike Barlow</div>327 328    <div class="imprint">[IMG: O’Reilly Logo]</div>329 330    <div class="cities">Beijing · Cambridge · Farnham · Köln · Sebastopol · Tokyo</div>331  </div>332 333  <div class="progress"></div>334</div>335</body>336</html>