GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Alice's Adventures UI</title>6<style>7  body { margin:0; padding:0; background:transparent; }8  #render-target {9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#FFFFFF; color:#111;12    font-family: Georgia, "Times New Roman", serif;13  }14 15  /* Top system status bar */16  .status-bar {17    position:absolute; top:0; left:0; right:0;18    height:96px; background:#3949AB; color:#fff;19    display:flex; align-items:center; justify-content:space-between;20    padding:0 36px; box-sizing:border-box;21    font-size:34px; letter-spacing:0.5px;22  }23  .status-left, .status-right { display:flex; align-items:center; gap:22px; }24  .status-time { font-weight:600; }25 26  /* Title header */27  .titlebar {28    position:absolute; top:96px; left:0; right:0;29    height:270px; background:#3949AB; color:#fff;30    box-sizing:border-box; padding:28px 36px 16px 36px;31  }32  .title-top {33    display:flex; align-items:flex-start; justify-content:space-between;34  }35  .book-title { font-size:46px; font-weight:600; margin:0; }36  .book-sub { margin:6px 0 0 0; font-size:26px; letter-spacing:1.6px; opacity:0.9; }37  .close-btn svg { width:56px; height:56px; }38  .tool-icons {39    display:flex; justify-content:center; gap:80px;40    margin-top:30px;41  }42  .tool-icons svg { width:70px; height:70px; }43 44  /* Reading page content */45  .page {46    position:absolute; top:366px; left:0; right:0; bottom:200px;47    padding:70px 86px 0 86px; box-sizing:border-box;48  }49  .h1 {50    text-align:center; font-size:120px; font-weight:800; margin:18px 0 42px 0;51  }52  .h1.small { font-size:110px; }53  .para {54    font-size:40px; line-height:1.7; margin:36px 0; text-indent:48px;55  }56  .meta { font-size:44px; line-height:1.6; margin:40px 0; }57  .meta b { font-weight:800; }58 59  /* Bottom toolbar */60  .bottom-bar {61    position:absolute; left:0; right:0; bottom:110px;62    height:170px; background:#3949AB; color:#fff;63    display:flex; align-items:center; justify-content:center;64  }65  .bottom-inner {66    width:100%; display:flex; align-items:center; justify-content:space-between;67    padding:0 44px; box-sizing:border-box;68  }69  .bar-icons { display:flex; align-items:center; gap:60px; }70  .bar-icons svg { width:70px; height:70px; }71  .mode-label { font-size:40px; opacity:0.95; }72 73  /* Left floating tools */74  .left-floats {75    position:absolute; left:24px; bottom:300px;76    display:flex; flex-direction:column; align-items:center; gap:18px; color:#3949AB;77    font-family:Arial, Helvetica, sans-serif;78  }79  .badge {80    width:56px; height:56px; border-radius:28px; background:#E8EAF6; 81    display:flex; align-items:center; justify-content:center; border:2px solid #C5CAE9;82    font-weight:700; color:#3949AB;83  }84  .circle-btn {85    width:82px; height:82px; border-radius:41px; background:#E8EAF6; 86    display:flex; align-items:center; justify-content:center; border:2px solid #C5CAE9;87  }88 89  /* Right floating counters */90  .right-floats {91    position:absolute; right:30px; bottom:300px; color:#3949AB;92    display:flex; flex-direction:column; align-items:center; gap:16px;93    font-weight:700; font-size:46px;94  }95 96  /* Home indicator */97  .home-line {98    position:absolute; bottom:36px; left:50%; transform:translateX(-50%);99    width:320px; height:12px; background:#D9D9D9; border-radius:8px;100  }101</style>102</head>103<body>104<div id="render-target">105 106  <!-- Status Bar -->107  <div class="status-bar">108    <div class="status-left">109      <div class="status-time">9:36</div>110      <!-- small round placeholders for app icons -->111      <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="6"/></svg>112      <svg width="32" height="32" viewBox="0 0 24 24" fill="#fff"><rect x="5" y="5" width="14" height="14" rx="3"/></svg>113    </div>114    <div class="status-right">115      <!-- Wi-Fi -->116      <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">117        <path d="M2 9c4-3 16-3 20 0"/>118        <path d="M5 12c3-2 11-2 14 0"/>119        <path d="M8 15c2-1 6-1 8 0"/>120        <circle cx="12" cy="18" r="1.5" fill="#fff" stroke="none"/>121      </svg>122      <!-- Battery -->123      <svg width="52" height="52" viewBox="0 0 28 24" fill="none" stroke="#fff" stroke-width="2">124        <rect x="2" y="6" width="20" height="12" rx="2" />125        <rect x="23" y="9" width="3" height="6" fill="#fff" stroke="none"/>126        <rect x="4.5" y="8.5" width="15" height="7" fill="#fff" stroke="none"/>127      </svg>128    </div>129  </div>130 131  <!-- Title Header -->132  <div class="titlebar">133    <div class="title-top">134      <div>135        <h1 class="book-title">Alice's Adventures in Wonderland</h1>136        <div class="book-sub">ALICE'S ADVENTURES IN WONDERLAND</div>137      </div>138      <div class="close-btn">139        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round">140          <path d="M5 5L19 19M19 5L5 19"/>141        </svg>142      </div>143    </div>144    <div class="tool-icons">145      <!-- hamburger -->146      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round">147        <path d="M4 7h16M4 12h12M4 17h10"/>148      </svg>149      <!-- moon crescent -->150      <svg viewBox="0 0 24 24">151        <circle cx="12" cy="12" r="8" fill="#fff"/>152        <circle cx="15" cy="10" r="8" fill="#3949AB"/>153      </svg>154      <!-- fullscreen arrows -->155      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6" stroke-linecap="round">156        <path d="M4 10V5h5M20 10V5h-5M4 14v5h5M20 14v5h-5"/>157      </svg>158      <!-- gear (simple) -->159      <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">160        <circle cx="12" cy="12" r="3" fill="none"/>161        <circle cx="12" cy="12" r="6"/>162        <path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2.2 2.2M16.8 16.8L19 19M5 19l2.2-2.2M16.8 7.2L19 5"/>163      </svg>164    </div>165  </div>166 167  <!-- Reading Page -->168  <div class="page">169    <div class="h1">IN</div>170    <div class="h1 small">WONDERLAND</div>171 172    <div class="para">173      The Project Gutenberg EBook of Alice in Wonderland, by Lewis Carroll.174    </div>175    <div class="para">176      This eBook is for the use of anyone anywhere at no cost and with almost no restrictions whatsoever. You may copy it, give it away or re‑use it under the terms of the Project Gutenberg License included with this eBook or online at www.gutenberg.org177    </div>178 179    <div class="meta">180      <b>Title:</b> Alice in Wonderland<br/>181      <b>Author:</b> Lewis Carroll<br/>182      <b>Language:</b> English183    </div>184 185    <div class="h1 small">I—DOWN THE RABBIT‑HOLE</div>186  </div>187 188  <!-- Left floating quick tools -->189  <div class="left-floats">190    <div class="badge">1</div>191    <div class="circle-btn">192      <!-- play -->193      <svg viewBox="0 0 24 24" width="44" height="44" fill="#3949AB">194        <polygon points="8,6 19,12 8,18"/>195      </svg>196    </div>197    <div class="circle-btn">198      <!-- smile -->199      <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#3949AB" stroke-width="2">200        <circle cx="12" cy="12" r="8"/>201        <circle cx="9" cy="10" r="1.2" fill="#3949AB" stroke="none"/>202        <circle cx="15" cy="10" r="1.2" fill="#3949AB" stroke="none"/>203        <path d="M8 14c2 2 6 2 8 0"/>204      </svg>205    </div>206  </div>207 208  <!-- Right floating page count / lock -->209  <div class="right-floats">210    <div>67</div>211    <svg viewBox="0 0 24 24" width="70" height="70" fill="none" stroke="#3949AB" stroke-width="2">212      <rect x="5" y="10" width="14" height="10" rx="2" fill="none"/>213      <path d="M8 10V8a4 4 0 0 1 8 0v2" />214    </svg>215  </div>216 217  <!-- Bottom toolbar -->218  <div class="bottom-bar">219    <div class="bottom-inner">220      <div class="bar-icons">221        <!-- search -->222        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.6">223          <circle cx="11" cy="11" r="6"/>224          <path d="M20 20l-4-4"/>225        </svg>226        <!-- bookshelf -->227        <svg viewBox="0 0 24 24" fill="#fff">228          <rect x="4" y="5" width="4" height="14" rx="1"/>229          <rect x="10" y="5" width="4" height="14" rx="1"/>230          <rect x="16" y="7" width="3" height="12" rx="1"/>231        </svg>232        <!-- document -->233        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">234          <rect x="5" y="4" width="14" height="16" rx="2"/>235          <path d="M8 8h8M8 12h8M8 16h8"/>236        </svg>237        <!-- bookmark -->238        <svg viewBox="0 0 24 24" fill="#fff">239          <path d="M7 4h10v16l-5-3-5 3z"/>240        </svg>241        <!-- list -->242        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">243          <circle cx="5" cy="7" r="1.3" fill="#fff" stroke="none"/>244          <circle cx="5" cy="12" r="1.3" fill="#fff" stroke="none"/>245          <circle cx="5" cy="17" r="1.3" fill="#fff" stroke="none"/>246          <path d="M9 7h10M9 12h10M9 17h10"/>247        </svg>248        <!-- doc with 1 -->249        <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">250          <rect x="4" y="4" width="12" height="16" rx="2"/>251          <text x="20" y="14" font-size="9" fill="#fff" font-family="Arial" text-anchor="middle">1</text>252        </svg>253      </div>254      <div class="mode-label">Book mode</div>255      <div style="width:140px"></div>256    </div>257  </div>258 259  <!-- Gesture/Home Indicator -->260  <div class="home-line"></div>261</div>262</body>263</html>