GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Reading Now UI Mock</title>5<style>6  body { margin: 0; padding: 0; background: transparent; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #0f2f34; /* dark teal page background */13    font-family: Arial, Helvetica, sans-serif;14    color: #ffffff;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 1080px;23    height: 120px;24    background: #000;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 32px;29    box-sizing: border-box;30  }31  .status-time {32    font-size: 46px;33    font-weight: 600;34    letter-spacing: 1px;35  }36  .status-icons {37    display: flex;38    gap: 28px;39    align-items: center;40  }41  .icon-small {42    width: 44px; height: 44px;43    display: inline-block;44  }45 46  /* App bar */47  .app-bar {48    position: absolute;49    top: 120px;50    left: 0;51    width: 1080px;52    height: 160px;53    background: #1e5f68; /* teal */54    display: flex;55    align-items: center;56    padding: 0 28px;57    box-sizing: border-box;58  }59  .hamburger {60    width: 72px;61    height: 72px;62    margin-right: 22px;63  }64  .app-title {65    font-size: 64px;66    font-weight: 700;67    letter-spacing: 0.5px;68  }69  .app-actions {70    margin-left: auto;71    display: flex;72    gap: 28px;73    align-items: center;74  }75  .action-icon {76    width: 68px; height: 68px;77  }78 79  /* Content area */80  .content {81    position: absolute;82    top: 280px;83    left: 0;84    width: 1080px;85    height: 2120px;86    padding: 30px 20px;87    box-sizing: border-box;88  }89 90  /* Book card */91  .book-card {92    width: 1040px;93    background: #1b3f45;94    border-radius: 16px;95    box-shadow: 0 4px 10px rgba(0,0,0,0.35);96    display: flex;97    padding: 26px;98    gap: 26px;99    box-sizing: border-box;100  }101  .cover {102    width: 240px;103    height: 340px;104    background: #E0E0E0;105    border: 1px solid #BDBDBD;106    color: #757575;107    display: flex;108    align-items: center;109    justify-content: center;110    text-align: center;111    font-size: 28px;112    line-height: 1.25;113    padding: 10px;114    box-sizing: border-box;115  }116  .book-info {117    flex: 1;118    display: flex;119    flex-direction: column;120  }121  .book-title {122    font-size: 58px;123    font-weight: 700;124    margin-top: 8px;125    margin-bottom: 10px;126    color: #eaf5f6;127  }128  .book-meta {129    font-size: 34px;130    color: #b7d0d4;131    margin-bottom: 22px;132  }133 134  /* Progress slider */135  .progress {136    position: relative;137    height: 30px;138    margin: 10px 0 32px 0;139  }140  .progress-line {141    position: absolute;142    top: 14px;143    left: 0;144    right: 0;145    height: 3px;146    background: rgba(255,255,255,0.35);147    border-radius: 3px;148  }149  .progress-knob, .progress-end {150    position: absolute;151    top: 6px;152    width: 16px; height: 16px;153    border: 3px solid rgba(255,255,255,0.8);154    border-radius: 50%;155    background: transparent;156  }157  .progress-knob { left: 18%; }158  .progress-end { right: 0; }159 160  /* Icon row */161  .actions-row {162    display: flex;163    align-items: center;164    gap: 44px;165  }166  .card-icon {167    width: 64px; height: 64px;168    opacity: 0.85;169  }170  .spacer {171    flex: 1;172  }173  .more-vertical {174    width: 52px; height: 52px;175    opacity: 0.85;176  }177</style>178</head>179<body>180<div id="render-target">181 182  <!-- Status Bar -->183  <div class="status-bar">184    <div class="status-time">7:45</div>185    <div class="status-icons">186      <!-- simple wifi icon -->187      <svg class="icon-small" viewBox="0 0 24 24" fill="#fff">188        <path d="M12 20l-2-2 2-2 2 2-2 2zm-6-6l-2-2c4.4-4.4 11.6-4.4 16 0l-2 2c-3.4-3.4-8.6-3.4-12 0zm3-3l-2-2c3-3 8-3 11 0l-2 2c-2.2-2.2-5.8-2.2-8 0z"/>189      </svg>190      <!-- battery icon -->191      <svg class="icon-small" viewBox="0 0 24 24" fill="#fff">192        <rect x="2" y="7" width="18" height="10" rx="2"></rect>193        <rect x="21" y="9" width="2" height="6"></rect>194      </svg>195    </div>196  </div>197 198  <!-- App Bar -->199  <div class="app-bar">200    <!-- Hamburger -->201    <svg class="hamburger" viewBox="0 0 24 24" fill="#fff">202      <rect x="3" y="5" width="18" height="2"></rect>203      <rect x="3" y="11" width="18" height="2"></rect>204      <rect x="3" y="17" width="18" height="2"></rect>205    </svg>206 207    <div class="app-title">Reading Now</div>208 209    <div class="app-actions">210      <!-- Search -->211      <svg class="action-icon" viewBox="0 0 24 24" fill="#fff">212        <circle cx="11" cy="11" r="6" stroke="#fff" stroke-width="2" fill="none"></circle>213        <rect x="16" y="16" width="6" height="2" transform="rotate(45 16 16)"></rect>214      </svg>215      <!-- More -->216      <svg class="action-icon" viewBox="0 0 24 24" fill="#fff">217        <circle cx="12" cy="5" r="2"></circle>218        <circle cx="12" cy="12" r="2"></circle>219        <circle cx="12" cy="19" r="2"></circle>220      </svg>221    </div>222  </div>223 224  <!-- Content -->225  <div class="content">226    <!-- Book Card -->227    <div class="book-card">228      <div class="cover">[IMG: Alice's Adventures cover]</div>229 230      <div class="book-info">231        <div class="book-title">Just mercy</div>232        <div class="book-meta">Lewis Carroll</div>233        <div class="book-meta">EPUB, 26 kB</div>234 235        <div class="progress">236          <div class="progress-line"></div>237          <div class="progress-knob"></div>238          <div class="progress-end"></div>239        </div>240 241        <div class="actions-row">242          <!-- star -->243          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe4e7" stroke-width="2">244            <path d="M12 3l3.5 6.9 7.5 1.1-5.5 5.2 1.3 7.4L12 19l-6.8 4 1.3-7.4-5.5-5.2 7.5-1.1L12 3z"></path>245          </svg>246          <!-- clock -->247          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe4e7" stroke-width="2">248            <circle cx="12" cy="12" r="9"></circle>249            <path d="M12 6v6l4 2"></path>250          </svg>251          <!-- check mark -->252          <svg class="card-icon" viewBox="0 0 24 24" fill="none" stroke="#cfe4e7" stroke-width="2">253            <path d="M4 12l5 5 11-11"></path>254          </svg>255          <!-- bookshelf icon -->256          <svg class="card-icon" viewBox="0 0 24 24" fill="#cfe4e7">257            <rect x="3" y="4" width="4" height="16"></rect>258            <rect x="9" y="6" width="4" height="14"></rect>259            <rect x="15" y="8" width="4" height="12"></rect>260          </svg>261 262          <div class="spacer"></div>263 264          <!-- more vertical dots -->265          <svg class="more-vertical" viewBox="0 0 24 24" fill="#cfe4e7">266            <circle cx="12" cy="5" r="2"></circle>267            <circle cx="12" cy="12" r="2"></circle>268            <circle cx="12" cy="19" r="2"></circle>269          </svg>270        </div>271      </div>272    </div>273 274    <!-- The rest of the screen is empty space (dark background) -->275  </div>276 277</div>278</body>279</html>