GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Ebook Reader UI</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: 'Georgia', serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #f5e8d6;14  }15 16  /* Status bar */17  .statusbar {18    position: absolute;19    top: 0;20    left: 0;21    width: 1080px;22    height: 120px;23    background: #0a0a0a;24    color: #fff;25    display: flex;26    align-items: center;27    padding: 0 36px;28    box-sizing: border-box;29    font-family: Arial, Helvetica, sans-serif;30  }31  .status-left { display: flex; align-items: center; gap: 20px; }32  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }33 34  /* App bar */35  .appbar {36    position: absolute;37    top: 120px;38    left: 0;39    width: 1080px;40    height: 160px;41    background: #2b6e77;42    color: #fff;43    box-sizing: border-box;44    padding: 18px 24px;45  }46  .app-icons {47    position: absolute;48    top: 18px;49    left: 18px;50    right: 18px;51    display: flex;52    align-items: center;53    gap: 34px;54  }55  .app-icons .spacer { flex: 1; }56  .title-wrap {57    position: absolute;58    left: 24px;59    bottom: 16px;60  }61  .title {62    font-size: 42px;63    font-weight: 700;64    line-height: 1.2;65  }66  .subtitle {67    font-size: 26px;68    opacity: 0.95;69  }70  .section-line {71    font-size: 24px;72    color: #cfe3e6;73  }74 75  /* Reading area */76  .reading {77    position: absolute;78    top: 280px;79    left: 0;80    width: 1080px;81    height: 1720px;82    background: #eadcc7;83    color: #2a2a2a;84    box-sizing: border-box;85    padding: 32px 48px 120px 48px;86  }87  .small-a {88    position: absolute;89    top: 20px;90    left: 20px;91    width: 44px;92    height: 44px;93    background: #d8c9ad;94    border-radius: 6px;95    border: 1px solid #bfae8e;96    display: flex;97    align-items: center;98    justify-content: center;99    color: #7a694d;100    font-weight: 700;101    font-family: Arial, Helvetica, sans-serif;102  }103  .slider {104    position: absolute;105    top: 50px;106    left: 140px;107    width: 800px;108    height: 8px;109    background: #d1c2a7;110    border-radius: 8px;111  }112  .slider .knob {113    position: absolute;114    left: 360px;115    top: -12px;116    width: 32px;117    height: 32px;118    background: #c3b394;119    border-radius: 50%;120    border: 3px solid #cfc2ad;121  }122  .chevron {123    position: absolute;124    right: 20px;125    top: 40px;126    width: 26px;127    height: 26px;128    border-right: 4px solid #9c8b6e;129    border-bottom: 4px solid #9c8b6e;130    transform: rotate(45deg);131    opacity: 0.8;132  }133  .book-text {134    margin-top: 90px;135    font-size: 38px;136    line-height: 1.45;137  }138 139  /* Bottom control bar */140  .bottom-bar {141    position: absolute;142    bottom: 60px;143    left: 0;144    width: 1080px;145    height: 180px;146    background: #2b6e77;147    color: #e8f5f7;148    box-sizing: border-box;149    padding: 22px 28px;150  }151  .bottom-progress {152    position: absolute;153    top: 92px;154    left: 40px;155    right: 40px;156    height: 8px;157    background: rgba(255,255,255,0.25);158    border-radius: 10px;159  }160  .bottom-progress .indicator {161    position: absolute;162    left: 60px;163    width: 160px;164    height: 8px;165    background: #77aeb6;166    border-radius: 10px;167  }168  .ticks {169    position: absolute;170    top: 124px;171    left: 40px;172    right: 40px;173    height: 20px;174    display: flex;175    align-items: flex-start;176    gap: 30px;177  }178  .ticks span {179    width: 2px;180    height: 12px;181    background: rgba(255,255,255,0.4);182  }183  .bottom-label {184    text-align: center;185    font-size: 36px;186    font-weight: 600;187    letter-spacing: 1px;188  }189  .bottom-icons {190    position: absolute;191    right: 28px;192    bottom: 24px;193    display: flex;194    gap: 34px;195  }196 197  /* Gesture bar */198  .gesture {199    position: absolute;200    bottom: 16px;201    left: 342px;202    width: 396px;203    height: 16px;204    background: #9aa3aa;205    border-radius: 12px;206    opacity: 0.6;207  }208 209  /* Simple icon styling */210  svg { display: block; }211  .icon { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 3; }212  .icon-fill { fill: #fff; }213  .kebab circle { fill: #fff; }214</style>215</head>216<body>217<div id="render-target">218 219  <!-- Status bar -->220  <div class="statusbar">221    <div class="status-left">222      <div style="font-size:40px; font-weight:600;">8:14</div>223      <div style="font-size:34px; color:#fff;">☺</div>224    </div>225    <div class="status-right">226      <!-- WiFi -->227      <svg class="icon" viewBox="0 0 24 24">228        <path d="M2 8c5-5 15-5 20 0" />229        <path d="M5 11c3.7-3.7 10.3-3.7 14 0" />230        <path d="M8 14c2.3-2.3 6.7-2.3 9 0" />231        <circle cx="12" cy="18" r="2" class="icon-fill"></circle>232      </svg>233      <!-- Battery -->234      <svg class="icon" viewBox="0 0 24 24">235        <rect x="2" y="6" width="18" height="12" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="3"></rect>236        <rect x="4" y="8" width="12" height="8" class="icon-fill"></rect>237        <rect x="20" y="10" width="2.6" height="4" class="icon-fill"></rect>238      </svg>239    </div>240  </div>241 242  <!-- App bar -->243  <div class="appbar">244    <div class="app-icons">245      <!-- Back arrow -->246      <svg class="icon" viewBox="0 0 24 24">247        <path d="M15 4 L7 12 L15 20" stroke-linecap="round" stroke-linejoin="round"></path>248      </svg>249      <!-- Speaker icon -->250      <svg class="icon" viewBox="0 0 24 24">251        <path d="M4 9h5l5-4v14l-5-4H4z" fill="#fff" stroke="none"></path>252        <path d="M16 9c2 2 2 4 0 6" />253      </svg>254      <!-- spacer then right-side icons -->255      <div class="spacer"></div>256      <!-- Search -->257      <svg class="icon" viewBox="0 0 24 24">258        <circle cx="11" cy="11" r="6"></circle>259        <path d="M16 16 L22 22" />260      </svg>261      <!-- List icon -->262      <svg class="icon" viewBox="0 0 24 24">263        <path d="M3 6h18M3 12h18M3 18h18" stroke-linecap="round"></path>264      </svg>265      <!-- Settings gear -->266      <svg class="icon" viewBox="0 0 24 24">267        <circle cx="12" cy="12" r="3" class="icon-fill"></circle>268        <path d="M12 2v4M12 18v4M2 12h4M18 12h4M5 5l3 3M16 16l3 3M19 5l-3 3M5 19l3-3" stroke-linecap="round"></path>269      </svg>270      <!-- Kebab -->271      <svg class="kebab" viewBox="0 0 24 24" width="42" height="42">272        <circle cx="12" cy="5" r="2.2"></circle>273        <circle cx="12" cy="12" r="2.2"></circle>274        <circle cx="12" cy="19" r="2.2"></circle>275      </svg>276    </div>277 278    <div class="title-wrap">279      <div class="title">Alice's Adventures in Wonderland</div>280      <div class="subtitle">Lewis Carroll</div>281      <div class="section-line">Section: I—DOWN THE RABBIT-HOLE. - page