GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Reader UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    position: absolute;18    top: 0;19    left: 0;20    width: 1080px;21    height: 110px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #000;27    font-weight: 600;28    font-size: 40px;29    box-sizing: border-box;30  }31  .sb-right {32    display: flex;33    align-items: center;34    gap: 26px;35  }36  .dot {37    width: 22px;38    height: 22px;39    border-radius: 50%;40    background: #111;41    opacity: .9;42  }43  .battery {44    width: 54px; height: 28px; border: 3px solid #111; border-radius: 6px; position: relative;45  }46  .battery::after {47    content: "";48    position: absolute; right: -10px; top: 6px;49    width: 8px; height: 14px; background: #111; border-radius: 2px;50  }51  .battery .level {52    position: absolute; left: 3px; top: 3px; bottom: 3px; width: 32px; background: #111; border-radius: 3px;53  }54 55  /* App bar */56  .app-bar {57    position: absolute;58    top: 110px;59    left: 0;60    width: 1080px;61    height: 120px;62    display: flex;63    align-items: center;64    gap: 26px;65    padding: 0 26px;66    box-sizing: border-box;67    border-bottom: 1px solid #e5e5e5;68    background: #fff;69  }70  .title {71    font-size: 54px;72    font-weight: 700;73    color: #222;74    white-space: nowrap;75    overflow: hidden;76    text-overflow: ellipsis;77    flex: 1;78  }79  .icon-btn {80    width: 84px; height: 84px;81    display: flex; align-items: center; justify-content: center;82    color: #111;83  }84  .icon { width: 46px; height: 46px; }85 86  /* Reading content */87  .content {88    position: absolute;89    top: 230px;90    left: 40px;91    right: 40px;92    bottom: 460px; /* leave space for sheet */93    overflow: hidden;94    padding: 10px 20px 0 20px;95    box-sizing: border-box;96  }97  .para {98    font-size: 46px;99    line-height: 72px;100    color: #222;101    letter-spacing: 0.2px;102  }103  .source {104    margin-top: 20px;105    color: #2b2b2b;106    font-size: 46px;107  }108 109  /* Bottom sheet */110  .bottom-sheet {111    position: absolute;112    left: 0; right: 0; bottom: 0;113    height: 440px;114    background: #ffffff;115    border-top-left-radius: 28px;116    border-top-right-radius: 28px;117    box-shadow: 0 -8px 30px rgba(0,0,0,0.15);118    overflow: hidden;119  }120  .handle {121    position: absolute; top: 10px; left: 50%;122    transform: translateX(-50%);123    width: 60px; height: 10px; border-radius: 5px; background: #cfcfcf;124  }125  .promo {126    height: 150px;127    background: linear-gradient(90deg, #74a26a, #2b8b86);128    display: flex;129    align-items: center;130    justify-content: space-between;131    padding: 0 40px;132    color: #fff;133    font-size: 50px;134    font-weight: 700;135    box-sizing: border-box;136    margin-top: 20px;137  }138  .upgrade-btn {139    background: #ffffff;140    color: #177e72;141    font-weight: 800;142    border-radius: 80px;143    padding: 18px 36px;144    font-size: 44px;145  }146 147  .controls {148    display: grid;149    grid-template-columns: 1fr 1fr 1fr;150    column-gap: 40px;151    align-items: start;152    padding: 26px 50px 0 50px;153  }154  .font-block {155    display: flex; gap: 24px;156    align-items: center;157  }158  .round-btn {159    width: 80px; height: 80px; border-radius: 50%;160    border: 6px solid #cfcfcf; color: #333; display: flex; align-items: center; justify-content: center;161    font-size: 64px; font-weight: 600;162    background: #fff;163  }164  .center-demo {165    display: flex; flex-direction: column; align-items: center; margin-top: -10px;166  }167  .center-demo .big-aa { font-size: 160px; font-weight: 700; color: #111; line-height: 1; }168  .center-demo .label { margin-top: 8px; font-size: 40px; color: #333; }169  .center-demo .dots { margin-top: 12px; display: flex; gap: 10px; }170  .dot-small { width: 16px; height: 16px; border-radius: 50%; background: #9e9e9e; }171 172  .theme-block { display: flex; align-items: center; gap: 28px; justify-content: flex-end; }173  .circle {174    width: 100px; height: 100px; border-radius: 50%;175    border: 6px solid #9bc77a; background: #fff;176  }177  .circle.beige { border-color: #e1d3bd; background: #e1d3bd; }178  .circle.black { border-color: #000; background: #000; }179 180  .tools {181    display: flex; justify-content: space-evenly; align-items: center; padding: 26px 70px 0 70px;182  }183  .tool {184    width: 90px; height: 90px; border-radius: 14px; border: 6px solid #bdbdbd; display: flex; align-items: center; justify-content: center; background: #fff;185    color: #888;186  }187  .tool.yellow { border-color: #b8cc68; color: #a0b44e; }188</style>189</head>190<body>191<div id="render-target">192 193  <!-- Status Bar -->194  <div class="status-bar">195    <div>3:49</div>196    <div class="sb-right">197      <div class="dot"></div>198      <div class="dot" style="opacity:.6;"></div>199      <div class="battery"><div class="level"></div></div>200    </div>201  </div>202 203  <!-- App Bar -->204  <div class="app-bar">205    <div class="icon-btn" aria-label="Back">206      <svg class="icon" viewBox="0 0 24 24"><path d="M15.5 3.5L7 12l8.5 8.5" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>207    </div>208    <div class="title">The War of the Wo...</div>209    <div class="icon-btn" aria-label="Search">210      <svg class="icon" viewBox="0 0 24 24"><circle cx="10" cy="10" r="7" stroke="#111" stroke-width="2" fill="none"/><path d="M15.5 15.5L21 21" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>211    </div>212    <div class="icon-btn" aria-label="Bookmark">213      <svg class="icon" viewBox="0 0 24 24"><path d="M6 3h12v18l-6-4-6 4V3z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/></svg>214    </div>215    <div class="icon-btn" aria-label="Settings">216      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3" fill="none" stroke="#111" stroke-width="2"/><path d="M4 12h3m10 0h3M6.5 6.5l2.1 2.1M15.4 15.4l2.1 2.1M6.5 17.5l2.1-2.1M15.4 8.6l2.1-2.1" stroke="#111" stroke-width="2" stroke-linecap="round"/></svg>217    </div>218  </div>219 220  <!-- Content -->221  <div class="content">222    <div class="para">223      Herbert George Wells, better known as H. G. Wells, was an English writer best known for such science fiction novels as The Time Machine, The War of the Worlds, The Invisible Man and The Island of Doctor Moreau. He was a prolific writer of both fiction and non-fiction, and produced works in many different genres, including contemporary novels, history, and social commentary. He was also an outspoken socialist. His later works become increasingly political and didactic, and only his early science fiction novels are widely read today. Wells, along with Hugo Gernsback and Jules Verne, is sometimes referred to as "The Father of Science Fiction".224    </div>225    <div class="source">Source: Wikipedia</div>226  </div>227 228  <!-- Bottom Sheet -->229  <div class="bottom-sheet">230    <div class="handle"></div>231    <div class="promo">232      <div>Go Premium</div>233      <div class="upgrade-btn">UPGRADE</div>234    </div>235 236    <div class="controls">237      <div class="font-block">238        <div class="round-btn">−</div>239        <div class="round-btn">+</div>240      </div>241 242      <div class="center-demo">243        <div class="big-aa">Aa</div>244        <div class="label">Default</div>245        <div class="dots">246          <div class="dot-small"></div>247          <div class="dot-small" style="opacity:.6;"></div>248          <div class="dot-small" style="opacity:.3;"></div>249        </div>250      </div>251 252      <div class="theme-block">253        <div class="circle"></div>254        <div class="circle beige"></div>255        <div class="circle black"></div>256      </div>257    </div>258 259    <div class="tools">260      <div class="tool yellow">261        <!-- notes icon -->262        <svg viewBox="0 0 24 24" width="54" height="54">263          <rect x="4" y="4" width="16" height="16" fill="none" stroke="#9fb65a" stroke-width="2"/>264          <path d="M7 9h10M7 13h10M7 17h7" stroke="#9fb65a" stroke-width="2" stroke-linecap="round"/>265        </svg>266      </div>267      <div class="tool">268        <!-- brackets icon -->269        <svg viewBox="0 0 24 24" width="58" height="58">270          <path d="M7 5H4v14h3M17 5h3v14h-3" fill="none" stroke="#8a8a8a" stroke-width="2" stroke-linejoin="round"/>271        </svg>272      </div>273      <div class="tool">274        <!-- lines icon -->275        <svg viewBox="0 0 24 24" width="58" height="58">276          <rect x="5" y="4" width="14" height="16" rx="2" fill="none" stroke="#8a8a8a" stroke-width="2"/>277          <path d="M8 8h8M8 12h8M8 16h8" stroke="#8a8a8a" stroke-width="2" stroke-linecap="round"/>278        </svg>279      </div>280    </div>281  </div>282 283</div>284</body>285</html>