GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>Ebook Carousel UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #111; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #F5F6F7;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0; left: 0; width: 100%; height: 120px;21    background: #000;22    color: #fff;23    display: flex; align-items: center; justify-content: space-between;24    padding: 0 36px;25    box-sizing: border-box;26    font-size: 40px; font-weight: 600;27  }28  .status-icons { display: flex; align-items: center; gap: 24px; }29  .status-icons svg { width: 44px; height: 44px; fill: #fff; }30 31  /* Top toolbar */32  .toolbar {33    position: absolute;34    top: 120px; left: 0; width: 100%; height: 176px;35    background: #FFFFFF;36    display: flex; align-items: center; justify-content: space-between;37    padding: 0 40px;38    box-sizing: border-box;39  }40  .toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 36px; }41  .icon-btn svg { width: 56px; height: 56px; fill: #5F6368; }42  .text-aa { font-size: 52px; color: #5F6368; font-weight: 600; }43 44  /* Carousel area */45  .carousel {46    position: absolute;47    top: 320px; left: 0; right: 0;48    height: 1480px;49    padding: 0 64px;50    box-sizing: border-box;51    display: flex; align-items: stretch; gap: 44px;52  }53  .card {54    background: #fff;55    border-radius: 28px;56    box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 6px 16px rgba(0,0,0,0.1);57    height: 100%;58    overflow: hidden;59  }60  .card.small { width: 340px; }61  .card.medium { width: 840px; }62  .card .pad { padding: 80px; box-sizing: border-box; }63 64  /* Left preview card */65  .preview-left {66    position: relative;67  }68  .preview-left .stripe {69    position: absolute; top: 0; left: 0; width: 110px; height: 100%; background: #D64141;70  }71 72  /* Center book card content */73  .book-card { position: relative; text-align: center; }74  .book-title {75    font-size: 72px; line-height: 1.15; font-weight: 800; color: #111;76    margin-top: 70px; margin-bottom: 40px;77  }78  .author {79    font-size: 44px; color: #9D2D2D; font-weight: 700; margin: 40px 0 20px;80  }81  .publisher {82    font-size: 62px; letter-spacing: 1px; margin: 90px 0 20px; font-weight: 700;83  }84  .cities {85    color: #6E6E6E; font-size: 28px;86  }87  .card-bottom {88    position: absolute; left: 40px; right: 40px; bottom: 30px;89    display: flex; align-items: center; justify-content: space-between;90    color: #8A8A8A; font-size: 28px;91  }92 93  /* Right preview card with text */94  .preview-right .heading {95    font-size: 60px; font-weight: 800; margin-bottom: 24px;96  }97  .preview-right .line {98    height: 18px; background: #EEE; border-radius: 9px; margin: 20px 0;99  }100 101  /* Bottom controls */102  .bottom-controls {103    position: absolute; left: 0; right: 0; bottom: 170px;104    height: 220px; background: #FFFFFF;105    display: flex; align-items: center; justify-content: center;106  }107  .controls-inner {108    width: 100%; padding: 0 80px; box-sizing: border-box;109    display: flex; align-items: center; justify-content: space-between;110  }111  .list-icon svg { width: 64px; height: 64px; fill: #6E6E6E; }112  .page-indicator { color: #666; font-size: 40px; }113 114  .slider {115    width: 660px; height: 60px; position: relative;116    display: flex; align-items: center; justify-content: center;117  }118  .slider .track {119    position: absolute; left: 0; right: 0; height: 6px; background: #C8D6EE; border-radius: 3px;120  }121  .slider .progress {122    position: absolute; left: 0; width: 520px; height: 6px; background: #2E79D7; border-radius: 3px;123  }124  .slider .thumb {125    position: absolute; left: 500px; width: 56px; height: 56px; background: #2E79D7; border-radius: 50%;126    box-shadow: 0 4px 10px rgba(46,121,215,0.4);127  }128 129  /* Gesture bar */130  .gesture-bar {131    position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);132    width: 320px; height: 14px; background: #8F8F8F; border-radius: 10px;133  }134</style>135</head>136<body>137<div id="render-target">138 139  <!-- Status bar -->140  <div class="status-bar">141    <div>11:04</div>142    <div class="status-icons">143      <!-- Signal/WiFi -->144      <svg viewBox="0 0 24 24"><path d="M12 21l3-3H9l3 3zM2 9l2 2c4-4 12-4 16 0l2-2C17 5 7 5 2 9zm5 5l2 2c2-2 6-2 8 0l2-2c-3-3-9-3-12 0z"/></svg>145      <!-- Battery -->146      <svg viewBox="0 0 24 24"><path d="M16 7V5h-2v2H6c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2z"/></svg>147    </div>148  </div>149 150  <!-- Top toolbar -->151  <div class="toolbar">152    <div class="toolbar-left">153      <div class="icon-btn" title="Back">154        <svg viewBox="0 0 24 24"><path d="M15.5 19l-7-7 7-7" stroke="#5F6368" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>155      </div>156    </div>157    <div class="toolbar-right">158      <div class="icon-btn" title="Search">159        <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 105.2 12l4.3 4.3 1.4-1.4-4.3-4.3A7 7 0 0010 3zm0 2a5 5 0 110 10A5 5 0 0110 5z"/></svg>160      </div>161      <div class="text-aa">Aa</div>162      <div class="icon-btn" title="More">163        <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2.2"/><circle cx="12" cy="12" r="2.2"/><circle cx="12" cy="19" r="2.2"/></svg>164      </div>165    </div>166  </div>167 168  <!-- Carousel -->169  <div class="carousel">170    <!-- Left preview card (partially visible) -->171    <div class="card small preview-left">172      <div class="stripe"></div>173    </div>174 175    <!-- Center book card -->176    <div class="card medium book-card">177      <div class="pad">178        <div class="book-title">179          Real-Time Big Data<br>180          Analytics: <br>181          Emerging<br>182          Architecture183        </div>184        <div class="author">Mike Barlow</div>185        <div class="publisher">O'REILLY</div>186        <div class="cities">Beijing · Cambridge · Farnham · Köln · Sebastopol · Tokyo</div>187      </div>188 189      <div class="card-bottom">190        <div>1 page left in chapter</div>191        <div>19%</div>192      </div>193    </div>194 195    <!-- Right preview card (partially visible) -->196    <div class="card small preview-right">197      <div class="pad">198        <div class="heading">C</div>199        <div class="line" style="width: 80%;"></div>200        <div class="line" style="width: 88%;"></div>201        <div class="line" style="width: 76%;"></div>202        <div class="line" style="width: 92%;"></div>203        <div class="line" style="width: 84%;"></div>204        <div class="line" style="width: 65%;"></div>205      </div>206    </div>207  </div>208 209  <!-- Bottom controls -->210  <div class="bottom-controls">211    <div class="controls-inner">212      <div class="list-icon" title="Contents">213        <svg viewBox="0 0 24 24">214          <path d="M3 6h14v2H3V6zm0 5h14v2H3v-2zm0 5h14v2H3v-2z"/>215          <circle cx="21" cy="7" r="1.6"/>216          <circle cx="21" cy="12" r="1.6"/>217          <circle cx="21" cy="17" r="1.6"/>218        </svg>219      </div>220 221      <div class="slider">222        <div class="track"></div>223        <div class="progress"></div>224        <div class="thumb"></div>225      </div>226 227      <div class="page-indicator">4 / 16</div>228    </div>229  </div>230 231  <!-- Gesture bar -->232  <div class="gesture-bar"></div>233 234</div>235</body>236</html>