GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Bookstore Dark UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #0f1218;14 color: #e9edf2;15 }16 .status-bar {17 position: absolute;18 top: 0; left: 0; right: 0;19 height: 90px;20 padding: 0 28px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #cfd5df;25 font-size: 30px;26 }27 /* simple status icons */28 .status-icons { display: flex; gap: 26px; align-items: center; }29 .dot { width: 10px; height: 10px; background:#cfd5df; border-radius:50%; display:inline-block; opacity:.8; }30 .battery {31 width: 48px; height: 24px; border: 3px solid #cfd5df; border-radius: 4px; position: relative;32 }33 .battery::after {34 content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 10px; background: #cfd5df; border-radius: 1px;35 }36 .battery .level { position:absolute; left:3px; top:3px; bottom:3px; width:28px; background:#cfd5df; }37 .container {38 position: absolute; left: 40px; right: 40px; top: 120px;39 }40 .date { color:#9aa3b2; font-size: 30px; margin-bottom: 8px; }41 .greet { font-size: 44px; font-weight: 700; margin-bottom: 28px; }42 .search-bar {43 background: #161a21;44 border: 1px solid #252a33;45 border-radius: 28px;46 height: 120px;47 display: flex; align-items: center;48 padding: 0 24px;49 gap: 24px;50 }51 .seg {52 flex: 1;53 display: flex; align-items: center; gap: 16px;54 color: #d9dee6;55 font-size: 34px;56 padding: 22px 26px;57 border-radius: 22px;58 }59 .divider {60 width: 2px; height: 64px; background: #2d3440; opacity: .8;61 }62 .icon {63 width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color:#d9dee6;64 }65 .section-title {66 margin-top: 36px;67 font-size: 36px; font-weight: 700;68 }69 .cards-row {70 margin-top: 20px;71 display: flex; gap: 34px;72 }73 .book-card {74 width: 290px;75 background: transparent;76 }77 .cover {78 width: 100%;79 height: 400px;80 background: #E0E0E0;81 border: 1px solid #BDBDBD;82 border-radius: 26px;83 color:#5c5c5c;84 display:flex; align-items:center; justify-content:center;85 text-align: center;86 font-size: 26px;87 padding: 10px;88 }89 .book-title {90 font-size: 30px; margin-top: 14px; color:#cfd5df;91 }92 .author { color:#7b8697; font-size: 26px; margin-top: 4px; }93 .price-row { display: flex; align-items: baseline; gap: 16px; margin-top: 8px; }94 .old { color:#6a7383; text-decoration: line-through; font-size: 26px; }95 .new { color:#ffffff; font-size: 30px; font-weight: 700; }96 .off { color:#7a8799; font-size: 26px; }97 /* chips */98 .chips {99 margin-top: 26px;100 display: flex; gap: 24px; flex-wrap: nowrap;101 }102 .chip {103 padding: 22px 36px;104 border-radius: 40px;105 border: 2px solid #6b3cff;106 color: #e9e4ff;107 font-size: 30px;108 background: rgba(107,60,255,0.08);109 }110 .chip.alt { border-color:#6a56ff; background: transparent; color:#d3d8e1; }111 .chip.yellow { border-color:#f0b629; background: rgba(240,182,41,0.08); color:#ffe8ae; }112 .chip.purple { border-color:#9a5cff; color:#e6d6ff; background: rgba(154,92,255,0.08); }113 /* list cards */114 .list {115 margin-top: 24px;116 }117 .list-card {118 display: flex;119 gap: 26px;120 padding: 24px 18px;121 border-radius: 22px;122 background: #11161d;123 border: 1px solid #212938;124 align-items: center;125 margin-bottom: 16px;126 }127 .thumb {128 width: 220px; height: 280px;129 background: #E0E0E0; border:1px solid #BDBDBD; border-radius: 18px;130 display:flex; align-items:center; justify-content:center; color:#666; font-size: 24px; text-align: center;131 }132 .meta { flex: 1; min-width: 0; }133 .title {134 font-size: 38px; font-weight: 700; color:#f2f5fa; line-height: 1.2;135 }136 .subtitle { margin-top: 6px; font-size: 28px; color:#8b95a6; }137 .category { margin-top: 12px; font-size: 28px; color:#e06b6b; }138 .price-line { margin-top: 8px; display:flex; align-items: baseline; gap: 22px; }139 .cart-btn {140 width: 92px; height: 92px; border-radius: 20px; background:#1a2130; border:1px solid #2a3444;141 display:flex; align-items:center; justify-content:center;142 }143 /* Floating action */144 .fab {145 position: absolute;146 right: 40px;147 bottom: 410px;148 width: 150px; height: 150px; border-radius: 50%;149 background: #7a3cff;150 display:flex; align-items:center; justify-content:center;151 box-shadow: 0 10px 30px rgba(0,0,0,.45);152 }153 /* bottom nav */154 .bottom-bar {155 position: absolute; left:0; right:0; bottom: 140px;156 height: 120px; background: #10151b; border-top:1px solid #222a36;157 display:flex; align-items:center; justify-content: space-around;158 }159 .nav-item { display:flex; flex-direction: column; align-items:center; gap:10px; color:#cfd6df; font-size:24px; }160 .home-indicator {161 position: absolute; left: 320px; right: 320px; bottom: 60px;162 height: 12px; border-radius: 10px; background:#d9dbe2; opacity:.85;163 }164 /* subtle scroll area: make the content long enough */165 .spacer { height: 40px; }166</style>167</head>168<body>169<div id="render-target">170 171 <!-- Status bar -->172 <div class="status-bar">173 <div style="font-weight:600;">7:51</div>174 <div class="status-icons">175 <span class="dot"></span>176 <span class="dot"></span>177 <span class="dot"></span>178 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">179 <path d="M12 3v18M3 12h18" stroke="#cfd5df" stroke-width="2"/>180 </svg>181 <div class="battery"><div class="level"></div></div>182 </div>183 </div>184 185 <div class="container">186 <div class="date">Tuesday 25 July</div>187 <div class="greet">Hi, Cerebra Research</div>188 189 <!-- Search / action bar -->190 <div class="search-bar">191 <div class="seg">192 <span class="icon">193 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">194 <path d="M20 7H4v10h16V7ZM7 7v-2h10v2" stroke="#d9dee6" stroke-width="2"/>195 </svg>196 </span>197 <div>Order</div>198 </div>199 <div class="divider"></div>200 <div class="seg">201 <span class="icon">202 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">203 <circle cx="11" cy="11" r="6" stroke="#d9dee6" stroke-width="2"/>204 <path d="M20 20l-3.5-3.5" stroke="#d9dee6" stroke-width="2" stroke-linecap="round"/>205 </svg>206 </span>207 <div>Search</div>208 </div>209 <div class="divider"></div>210 <div class="seg">211 <span class="icon">212 <svg width="34" height="34" viewBox="0 0 24 24" fill="none">213 <path d="M6 6h15l-2 10H7L6 6Z" stroke="#d9dee6" stroke-width="2"/>214 <circle cx="9" cy="19" r="1.5" fill="#d9dee6"/>215 <circle cx="17" cy="19" r="1.5" fill="#d9dee6"/>216 </svg>217 </span>218 <div>Cart</div>219 </div>220 </div>221 222 <div class="section-title">Special Offer</div>223 224 <!-- Horizontal book cards -->225 <div class="cards-row">226 <div class="book-card">227 <div class="cover">[IMG: Orange & Yellow Book Cover]</div>228 <div class="book-title">G N Bajpai</div>229 <div class="price-row">230 <div class="old">₹399</div>231 <div class="new">₹131</div>232 <div class="off">67%</div>233 </div>234 </div>235 <div class="book-card">236 <div class="cover">[IMG: Mint Cover - The Summer I Turned Pretty]</div>237 <div class="book-title">Jenny Han</div>238 <div class="price-row">239 <div class="old">₹999</div>240 <div class="new">₹168</div>241 <div class="off">83%</div>242 </div>243 </div>244 <div class="book-card">245 <div class="cover">[IMG: Thriller Cover - Betrayal]</div>246 <div class="book-title">Fiction</div>247 <div class="price-row">248 <div class="old">₹929</div>249 <div class="new">₹—</div>250 </div>251 </div>252 </div>253 254 <!-- Chips -->255 <div class="chips">256 <div class="chip">Self-Help</div>257 <div class="chip alt">Novel</div>258 <div class="chip alt">All</div>259 <div class="chip yellow">தமிழ்</div>260 <div class="chip purple">Comics</div>261 </div>262 263 <!-- List items -->264 <div class="list">265 <div class="list-card">266 <div class="thumb">[IMG: Blue Book Cover]</div>267 <div class="meta">268 <div class="title">Who Will Cry When You Die?<br>(English, Paperback)</div>269 <div class="subtitle">Sharma Robin S.</div>270 <div class="category">Self Development</div>271 <div class="price-line">272 <div class="old">₹299</div>273 <div class="new">₹149</div>274 <div class="off">50%</div>275 </div>276 </div>277 <div class="cart-btn">278 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">279 <path d="M6 6h15l-2 10H7L6 6Z" stroke="#cfd6df" stroke-width="2"/>280 <circle cx="9" cy="19" r="2" fill="#cfd6df"/>281 <circle cx="17" cy="19" r="2" fill="#cfd6df"/>282 </svg>283 </div>284 </div>285 286 <div class="list-card">287 <div class="thumb">[IMG: Advantage India Book Cover]</div>288 <div class="meta">289 <div class="title">Advantage India: From Challenge To Opportunity</div>290 <div class="subtitle">A.P.J. Abdul Kalam, Srijan Pal Singh</div>291 <div class="category">Self Development</div>292 <div class="price-line">293 <div class="old">₹399</div>294 <div class="new">₹159</div>295 <div class="off">60%</div>296 </div>297 </div>298 <div class="cart-btn">299 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">300 <path d="M6 6h15l-2 10H7L6 6Z" stroke="#cfd6df" stroke-width="2"/>301 <circle cx="9" cy="19" r="2" fill="#cfd6df"/>302 <circle cx="17" cy="19" r="2" fill="#cfd6df"/>303 </svg>304 </div>305 </div>306 </div>307 308 <div class="spacer"></div>309 </div>310 311 <!-- Floating action button -->312 <div class="fab">313 <svg width="72" height="72" viewBox="0 0 24 24" fill="none">314 <path d="M12 5l6 6M12 5l-6 6M12 5v14" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>315 </svg>316 </div>317 318 <!-- Bottom navigation -->319 <div class="bottom-bar">320 <div class="nav-item">321 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">322 <path d="M4 10l8-6 8 6v8H4v-8Z" stroke="#cfd6df" stroke-width="2"/>323 </svg>324 </div>325 <div class="nav-item">326 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">327 <circle cx="11" cy="11" r="6" stroke="#cfd6df" stroke-width="2"/>328 <path d="M20 20l-3.5-3.5" stroke="#cfd6df" stroke-width="2" stroke-linecap="round"/>329 </svg>330 </div>331 <div class="nav-item">332 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">333 <path d="M6 6h15l-2 10H7L6 6Z" stroke="#cfd6df" stroke-width="2"/>334 <circle cx="9" cy="19" r="2" fill="#cfd6df"/>335 <circle cx="17" cy="19" r="2" fill="#cfd6df"/>336 </svg>337 </div>338 <div class="nav-item">339 <svg width="48" height="48" viewBox="0 0 24 24" fill="none">340 <circle cx="12" cy="8" r="3" stroke="#cfd6df" stroke-width="2"/>341 <path d="M5 20c1.5-4 12.5-4 14 0" stroke="#cfd6df" stroke-width="2" stroke-linecap="round"/>342 </svg>343 </div>344 </div>345 <div class="home-indicator"></div>346 347</div>348</body>349</html>