GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Kindle UI - Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0e0e0f;15 color: #ffffff;16 font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0;23 width: 100%; height: 92px;24 padding: 0 36px;25 display: flex; align-items: center; justify-content: space-between;26 color: #fff; font-size: 42px; font-weight: 600;27 }28 .status-left { display: flex; align-items: center; gap: 20px; }29 .status-right { display: flex; align-items: center; gap: 26px; opacity: 0.9; }30 .icon { display: inline-block; }31 .icon svg { width: 48px; height: 48px; fill: #fff; }32 33 /* Search */34 .search-row {35 position: absolute;36 top: 118px; left: 36px; right: 36px;37 display: flex; align-items: center; justify-content: space-between;38 }39 .search {40 width: 920px; height: 96px;41 background: #1a1a1c; border: 1px solid #2e2e31; border-radius: 16px;42 display: flex; align-items: center; gap: 20px;43 padding: 0 28px; color: #9ea0a6; font-size: 38px;44 }45 .bell {46 width: 84px; height: 84px; border-radius: 50%;47 border: 1px solid #2e2e31; background: #1a1a1c;48 display: flex; align-items: center; justify-content: center;49 }50 .bell svg { width: 44px; height: 44px; fill: #c9c9c9; }51 52 /* Tabs */53 .tabs {54 position: absolute; top: 240px; left: 0; width: 100%;55 height: 96px; display: flex; align-items: center;56 border-top: 1px solid #262628; border-bottom: 1px solid #262628;57 background: #121214;58 }59 .tab {60 flex: 1; text-align: center; font-size: 36px;61 color: #a6a7ab; position: relative;62 }63 .tab + .tab { border-left: 1px solid #2a2a2d; }64 .tab.active { color: #ffffff; }65 .tab.active::after {66 content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);67 width: 140px; height: 4px; background: #ffffff; border-radius: 2px;68 }69 70 /* Section title */71 .section-title {72 position: absolute; top: 370px; left: 36px;73 display: flex; align-items: center; gap: 20px;74 font-size: 54px; font-weight: 700; color: #e9e9ea;75 }76 .section-title .icon svg { width: 60px; height: 60px; fill: #e9e9ea; }77 78 /* Book row */79 .book-row {80 position: absolute; top: 460px; left: 36px; right: 36px;81 display: flex; gap: 32px;82 }83 .book {84 width: 240px; height: 360px; position: relative;85 background: #E0E0E0; border: 1px solid #BDBDBD;86 display: flex; align-items: center; justify-content: center;87 color: #555; font-size: 32px; text-align: center;88 }89 .ribbon {90 position: absolute; top: 10px; right: -36px;91 background: #3a3a3d; color: #cfcfd3; font-size: 26px; padding: 6px 18px;92 transform: rotate(40deg); letter-spacing: 1px;93 }94 95 /* Chips section */96 .chips {97 position: absolute; top: 930px; left: 36px; right: 36px;98 display: flex; gap: 26px; flex-wrap: wrap;99 }100 .chip {101 padding: 20px 38px; border-radius: 999px;102 border: 2px solid #2c2c2f; color: #b9bac0; font-size: 34px;103 background: #131316;104 }105 .chip.primary { background: #1e313a; color: #bfe9ff; border-color: #235061; }106 107 /* Second book row */108 .book-row.row2 { top: 1160px; }109 110 /* Bottom nav */111 .bottom-nav {112 position: absolute; left: 0; bottom: 0;113 width: 100%; height: 210px; background: #121214;114 border-top: 1px solid #262628;115 display: flex; align-items: center; justify-content: space-around;116 }117 .nav-item {118 width: 180px; text-align: center; color: #9ca0a6;119 font-size: 30px;120 }121 .nav-item .icon svg { width: 58px; height: 58px; fill: #9ca0a6; }122 .nav-item.active { color: #57c6ff; }123 .nav-item.active .icon svg { fill: #57c6ff; }124 .center-cover {125 width: 120px; height: 170px; background: #E0E0E0; border: 1px solid #BDBDBD;126 display: flex; align-items: center; justify-content: center;127 color: #555; font-size: 26px; margin: 0 auto 12px;128 }129 130 /* Home indicator */131 .home-indicator {132 position: absolute; left: 50%; transform: translateX(-50%);133 bottom: 220px; width: 280px; height: 12px; background: #e7e7e7; border-radius: 8px;134 opacity: 0.9;135 }136 137 /* Modal overlay */138 .overlay {139 position: absolute; inset: 0;140 background: rgba(0,0,0,0.55);141 }142 .modal {143 position: absolute; top: 740px; left: 50%; transform: translateX(-50%);144 width: 720px; background: #2a2b2d; border-radius: 8px; box-shadow: 0 18px 32px rgba(0,0,0,0.6);145 color: #fff;146 }147 .modal-header {148 padding: 28px 36px; font-size: 42px; font-weight: 700; color: #eaeaec; border-bottom: 1px solid #6b6b6e;149 }150 .modal-list { padding: 18px 36px 30px; }151 .modal-item {152 padding: 26px 0; font-size: 40px; color: #ffffff;153 border-bottom: 1px solid transparent;154 }155 .modal-item + .modal-item { border-top: 1px solid #3d3f42; }156</style>157</head>158<body>159<div id="render-target">160 161 <!-- Status Bar -->162 <div class="status-bar">163 <div class="status-left">164 <div>9:07</div>165 <span class="icon">166 <!-- Cloud icon -->167 <svg viewBox="0 0 24 24"><path d="M7 18c-2.8 0-5-2.1-5-4.7S4.2 9 7 9c.4-2.5 2.6-4.5 5.2-4.5 2.9 0 5.3 2.3 5.5 5.1h.3c2.2 0 4 1.8 4 4 0 2.1-1.8 3.9-4 3.9H7z"/></svg>168 </span>169 </div>170 <div class="status-right">171 <span class="icon">172 <!-- Wifi icon -->173 <svg viewBox="0 0 24 24"><path d="M12 18.5c.9 0 1.5.6 1.5 1.5S12.9 21.5 12 21.5 10.5 20.9 10.5 20s.6-1.5 1.5-1.5zM4 10c4.5-4.3 11.5-4.3 16 0l-1.4 1.4c-3.7-3.6-9.5-3.6-13.2 0L4 10zm3.4 3.4c3.2-3 8.1-3 11.3 0l-1.4 1.4c-2.5-2.4-6.1-2.4-8.6 0l-1.3-1.4z"/></svg>174 </span>175 <span class="icon">176 <!-- Battery icon -->177 <svg viewBox="0 0 24 24"><path d="M18 6h1.5c.8 0 1.5.7 1.5 1.5v9c0 .8-.7 1.5-1.5 1.5H18v1H5v-1H4.5C3.7 18 3 17.3 3 16.5v-9C3 6.7 3.7 6 4.5 6H5V5h13v1z"/></svg>178 </span>179 </div>180 </div>181 182 <!-- Search -->183 <div class="search-row">184 <div class="search">185 <span class="icon">186 <!-- Search icon -->187 <svg viewBox="0 0 24 24"><path d="M10 3a7 7 0 1 1 0 14 7 7 0 0 1 0-14zm8.7 14.3 3.2 3.2-1.4 1.4-3.2-3.2 1.4-1.4z"/></svg>188 </span>189 <span>Search Kindle</span>190 </div>191 <div class="bell">192 <!-- Bell icon -->193 <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6V11c0-3.3-2.1-6-5-6S8 7.7 8 11v5l-2 2v1h14v-1l-2-2z"/></svg>194 </div>195 </div>196 197 <!-- Tabs -->198 <div class="tabs">199 <div class="tab active">Explore</div>200 <div class="tab">Romance</div>201 <div class="tab">Crime, Thriller & Mystery</div>202 </div>203 204 <!-- Section: From Your Library -->205 <div class="section-title">206 <span class="icon">207 <!-- Book icon -->208 <svg viewBox="0 0 24 24"><path d="M5 4h9c1.7 0 3 1.3 3 3v12H5c-1.7 0-3-1.3-3-3V7c0-1.7 1.3-3 3-3zm12 0h2v15h-2V4z"/></svg>209 </span>210 <span>From Your Library</span>211 </div>212 213 <!-- First row of books -->214 <div class="book-row">215 <div class="book">216 <div class="ribbon">SAMPLE</div>217 [IMG: Book Cover - The Art of War]218 </div>219 <div class="book">220 <div class="ribbon">SAMPLE</div>221 [IMG: Book Cover - Siddhartha]222 </div>223 <div class="book">224 <div class="ribbon">SAMPLE</div>225 [IMG: Book Cover - Never Lie]226 </div>227 <div class="book">228 <div class="ribbon">SAMPLE</div>229 [IMG: Book Cover]230 </div>231 </div>232 233 <!-- Decorative chips / categories -->234 <div class="chips">235 <div class="chip primary">BEST SELLERS</div>236 <div class="chip">NEW RELEASES</div>237 <div class="chip">BIOGRAPHIES</div>238 <div class="chip">HISTORY</div>239 </div>240 241 <!-- Second row of books -->242 <div class="book-row row2">243 <div class="book">[IMG: Book Cover - Verity]</div>244 <div class="book">[IMG: Book Cover - The Hidden Hindu 2]</div>245 <div class="book">[IMG: Book Cover - The Hidden Hindu]</div>246 <div class="book">[IMG: Book Cover]</div>247 </div>248 249 <!-- Home Indicator -->250 <div class="home-indicator"></div>251 252 <!-- Bottom Navigation -->253 <div class="bottom-nav">254 <div class="nav-item active">255 <div class="icon">256 <!-- Home icon -->257 <svg viewBox="0 0 24 24"><path d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3L12 3z"/></svg>258 </div>259 HOME260 </div>261 <div class="nav-item">262 <div class="icon">263 <!-- Library icon -->264 <svg viewBox="0 0 24 24"><path d="M4 5h8c1.7 0 3 1.3 3 3v11H7c-1.7 0-3-1.3-3-3V5zm12 0h4v14h-4V5z"/></svg>265 </div>266 LIBRARY267 </div>268 <div class="nav-item">269 <div class="center-cover">[IMG]</div>270 <div style="margin-top:-6px; font-size:28px; color:#b9bac0;">The Art of War</div>271 </div>272 <div class="nav-item">273 <div class="icon">274 <!-- Cart icon -->275 <svg viewBox="0 0 24 24"><path d="M7 6h13l-2 9H8L7 6zm-2 0H2V4h3l1 10h12v2H6c-1.1 0-2-.9-2-2V6zm4 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm8 0a2 2 0 1 0 .001 4A2 2 0 0 0 17 18z"/></svg>276 </div>277 STORE278 </div>279 <div class="nav-item">280 <div class="icon">281 <!-- More icon -->282 <svg viewBox="0 0 24 24"><path d="M5 7h14v2H5V7zm0 6h14v2H5v-2zm0 6h14v2H5v-2z"/></svg>283 </div>284 MORE285 </div>286 </div>287 288 <!-- Modal Overlay -->289 <div class="overlay"></div>290 <div class="modal">291 <div class="modal-header">The Art of War</div>292 <div class="modal-list">293 <div class="modal-item">VIEW IN STORE</div>294 <div class="modal-item">REMOVE DOWNLOAD</div>295 <div class="modal-item">PERMANENTLY DELETE</div>296 <div class="modal-item">ADD TO COLLECTION</div>297 <div class="modal-item">MARK AS READ</div>298 <div class="modal-item">RECOMMEND THIS BOOK</div>299 <div class="modal-item">REMOVE FROM HOME</div>300 </div>301 </div>302 303</div>304</body>305</html>