GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Books Store Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;15 color: #111;16 }17 18 /* Status bar */19 .status-bar {20 height: 88px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 font-size: 30px;25 color: #222;26 }27 .status-right {28 margin-left: auto;29 display: flex;30 align-items: center;31 gap: 22px;32 }33 .icon {34 width: 36px; height: 36px;35 display: inline-flex; align-items: center; justify-content: center;36 }37 .icon svg { width: 100%; height: 100%; }38 39 /* Title and tabs */40 .title-row {41 padding: 8px 32px 0 32px;42 display: flex;43 align-items: center;44 }45 .tabs {46 display: flex;47 align-items: baseline;48 gap: 36px;49 flex-wrap: wrap;50 }51 .tab {52 color: #7a7a7a;53 font-weight: 600;54 font-size: 44px;55 }56 .tab.active {57 color: #111;58 font-size: 64px;59 letter-spacing: 0.2px;60 }61 .actions {62 margin-left: auto;63 display: flex;64 gap: 28px;65 align-items: center;66 }67 68 /* Chips */69 .chips {70 padding: 22px 32px;71 display: flex;72 flex-wrap: wrap;73 gap: 18px;74 }75 .chip {76 padding: 18px 28px;77 border-radius: 28px;78 border: 1px solid #e2e2e2;79 background: #fafafa;80 color: #222;81 font-size: 32px;82 }83 .chip .down {84 margin-left: 12px;85 vertical-align: middle;86 }87 88 /* Sections */89 .section {90 padding: 18px 32px 0 32px;91 }92 .section-header {93 display: flex;94 align-items: center;95 margin-bottom: 18px;96 }97 .section-title {98 font-size: 48px;99 font-weight: 800;100 }101 .section-action {102 margin-left: auto;103 color: #3f6df6;104 font-weight: 700;105 font-size: 32px;106 letter-spacing: 1px;107 }108 109 /* Cards row */110 .cards {111 display: flex;112 gap: 28px;113 padding: 10px 0 28px 0;114 }115 .card {116 width: 316px;117 height: 476px;118 border-radius: 18px;119 box-shadow: 0 4px 14px rgba(0,0,0,0.08);120 overflow: hidden;121 background: #fff;122 display: flex;123 }124 .cover {125 flex: 1;126 background: #E0E0E0;127 border: 1px solid #BDBDBD;128 display: flex;129 align-items: center;130 justify-content: center;131 color: #616161;132 font-size: 30px;133 text-align: center;134 padding: 16px;135 }136 137 /* Promo banner */138 .promo {139 margin: 14px 32px;140 height: 300px;141 background: #2B5BFF;142 border-radius: 24px;143 position: relative;144 color: #eaf0ff;145 overflow: hidden;146 display: flex;147 align-items: center;148 padding: 0 36px;149 }150 .promo .mini-book {151 position: absolute;152 right: 42px;153 width: 200px;154 height: 240px;155 background: rgba(255,255,255,0.2);156 border-radius: 14px;157 display: flex; align-items: center; justify-content: center;158 color: #ffffff;159 font-weight: 700;160 border: 1px solid rgba(255,255,255,0.35);161 }162 .promo h3 {163 margin: 0 0 8px 0; font-size: 42px; font-weight: 800;164 }165 .promo p { margin: 0; font-size: 30px; opacity: 0.9; }166 167 /* Bottom navigation */168 .bottom-nav {169 position: absolute;170 bottom: 0;171 left: 0; right: 0;172 height: 172px;173 border-top: 1px solid #eee;174 background: #fff;175 display: flex;176 justify-content: space-around;177 align-items: center;178 padding-bottom: 12px;179 }180 .nav-item {181 display: flex; flex-direction: column; align-items: center; gap: 10px;182 color: #6b6b6b; font-size: 26px;183 }184 .nav-item.active { color: #2B5BFF; }185 .nav-icon {186 width: 70px; height: 70px; border-radius: 50%;187 display: flex; align-items: center; justify-content: center;188 }189 .nav-item.active .nav-icon { background: #eaf0ff; }190 191 /* Gesture bar */192 .gesture {193 position: absolute; bottom: 8px; left: 50%;194 transform: translateX(-50%);195 width: 340px; height: 10px; border-radius: 6px; background: #111;196 opacity: 0.15;197 }198</style>199</head>200<body>201<div id="render-target">202 203 <!-- Status Bar -->204 <div class="status-bar">205 12:03206 <div class="status-right">207 <span class="icon" title="Do Not Disturb">208 <svg viewBox="0 0 24 24" fill="#444"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm5 11H7v-2h10v2z"/></svg>209 </span>210 <span class="icon" title="Search">211 <svg viewBox="0 0 24 24" fill="#444"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>212 </span>213 <span class="icon" title="Battery">214 <svg viewBox="0 0 24 24" fill="#444"><path d="M16 7H3c-1.1 0-2 .9-2 2v6c0 1.1.9 2 2 2h13c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zm5 3v4h-2v-4h2z"/></svg>215 </span>216 </div>217 </div>218 219 <!-- Title / Tabs + Action -->220 <div class="title-row">221 <div class="tabs">222 <span class="tab active">Books</span>223 <span class="tab">Audiobooks</span>224 <span class="tab">Comics</span>225 </div>226 <div class="actions">227 <span class="icon" title="Search">228 <svg viewBox="0 0 24 24" fill="#111"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21.5 21.5 20 15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>229 </span>230 </div>231 </div>232 233 <!-- Filter Chips -->234 <div class="chips">235 <div class="chip">Free</div>236 <div class="chip">Romance</div>237 <div class="chip">Thriller & Crime</div>238 <div class="chip">Young Adult239 <span class="down">240 <svg width="28" height="28" viewBox="0 0 24 24" fill="#666"><path d="M7 10l5 5 5-5z"/></svg>241 </span>242 </div>243 </div>244 245 <!-- Picks of the week -->246 <div class="section">247 <div class="section-header">248 <div class="section-title">Picks of the week</div>249 <div class="section-action">ALL</div>250 </div>251 <div class="cards">252 <div class="card">253 <div class="cover">[IMG: Book Cover - Your Brain Is Playing Tricks On You]</div>254 </div>255 <div class="card">256 <div class="cover">[IMG: Book Cover - The Seaweed Revolution]</div>257 </div>258 <div class="card">259 <div class="cover">[IMG: Book Cover - You, Me & The Sea]</div>260 </div>261 </div>262 </div>263 264 <!-- Bestsellers -->265 <div class="section" style="margin-top: 12px;">266 <div class="section-header">267 <div class="section-title">Bestsellers</div>268 <div class="section-action">ALL</div>269 </div>270 <div class="cards">271 <div class="card">272 <div class="cover">[IMG: Book Cover - Life Lessons from Literature]</div>273 </div>274 <div class="card">275 <div class="cover">[IMG: Book Cover - Arthur Hailey: Hotel]</div>276 </div>277 <div class="card">278 <div class="cover">[IMG: Manga Cover - The Apothecary Diaries Vol. 1]</div>279 </div>280 </div>281 </div>282 283 <!-- Blue promo banner -->284 <div class="promo">285 <div>286 <h3>Continue your story</h3>287 <p>Pick up where you left off and discover new favorites.</p>288 </div>289 <div class="mini-book">[Mini Book]</div>290 </div>291 292 <!-- Bottom Navigation -->293 <div class="bottom-nav">294 <div class="nav-item">295 <div class="nav-icon">296 <svg viewBox="0 0 24 24" fill="#6b6b6b" width="40" height="40"><path d="M18 2H6a2 2 0 0 0-2 2v16l8-3 8 3V4a2 2 0 0 0-2-2z"/></svg>297 </div>298 <div>My books</div>299 </div>300 <div class="nav-item active">301 <div class="nav-icon">302 <svg viewBox="0 0 24 24" fill="#2B5BFF" width="42" height="42"><path d="M3 4h18v3H3zm0 6h18v3H3zm0 6h18v3H3z"/></svg>303 </div>304 <div>Library</div>305 </div>306 <div class="nav-item">307 <div class="nav-icon">308 <svg viewBox="0 0 24 24" fill="#6b6b6b" width="40" height="40"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 11h4v2h-6V7h2v6z"/></svg>309 </div>310 <div>Activity</div>311 </div>312 <div class="nav-item">313 <div class="nav-icon">314 <svg viewBox="0 0 24 24" fill="#6b6b6b" width="40" height="40"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.418 0-8 2.239-8 5v3h16v-3c0-2.761-3.582-5-8-5z"/></svg>315 </div>316 <div>Profile</div>317 </div>318 </div>319 320 <div class="gesture"></div>321</div>322</body>323</html>