GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Kindle Explore UI 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: #121212;14 color: #FFFFFF;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;16 }17 18 .status-bar {19 height: 88px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 font-weight: 600;25 font-size: 38px;26 color: #FFFFFF;27 }28 .status-left {29 display: flex;30 align-items: center;31 gap: 16px;32 }33 .status-right {34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .icon { fill: none; stroke: #FFFFFF; stroke-width: 3; }39 40 /* Search area */41 .search-area {42 padding: 24px 36px 18px 36px;43 }44 .search-row {45 display: flex;46 align-items: center;47 gap: 24px;48 }49 .search-box {50 flex: 1;51 height: 110px;52 background: #2A2A2A;53 border-radius: 16px;54 display: flex;55 align-items: center;56 padding: 0 28px;57 color: #CFCFCF;58 font-size: 40px;59 gap: 22px;60 }61 .bell-wrap {62 width: 96px;63 height: 96px;64 border-radius: 16px;65 display: flex;66 align-items: center;67 justify-content: center;68 color: #FFFFFF;69 }70 71 /* Tabs */72 .tabs {73 padding: 8px 36px 18px 36px;74 display: flex;75 gap: 18px;76 }77 .tab {78 padding: 22px 28px;79 border: 2px solid #3C3C3C;80 border-radius: 10px;81 color: #DADADA;82 font-size: 34px;83 min-width: 200px;84 text-align: center;85 background: #1A1A1A;86 }87 .tab.active {88 color: #FFFFFF;89 border-color: #5A5A5A;90 box-shadow: inset 0 -4px 0 #2DA6E6;91 }92 93 .divider {94 height: 12px;95 background: #1E1E1E;96 margin-top: 6px;97 }98 99 /* Section header */100 .section-header {101 padding: 28px 36px 18px 36px;102 display: flex;103 align-items: center;104 gap: 20px;105 }106 .section-title {107 font-size: 52px;108 font-weight: 700;109 letter-spacing: 0.3px;110 }111 112 /* Book row */113 .book-row {114 padding: 0 36px 26px 36px;115 display: flex;116 gap: 28px;117 }118 .book-card {119 width: 300px;120 height: 440px;121 background: #E0E0E0;122 border: 1px solid #BDBDBD;123 display: flex;124 justify-content: center;125 align-items: center;126 color: #757575;127 position: relative;128 border-radius: 8px;129 font-size: 30px;130 text-align: center;131 }132 .corner-ribbon {133 position: absolute;134 top: 14px;135 right: -54px;136 transform: rotate(45deg);137 background: #2F2F2F;138 color: #FFFFFF;139 padding: 10px 22px;140 font-size: 26px;141 letter-spacing: 1px;142 }143 .check-badge {144 position: absolute;145 bottom: 18px;146 right: 18px;147 width: 54px;148 height: 54px;149 border-radius: 27px;150 background: #2DA6E6;151 display: flex;152 align-items: center;153 justify-content: center;154 }155 156 /* Welcome banner */157 .welcome-banner {158 position: relative;159 margin: 24px 0 14px 0;160 padding: 40px 36px 28px 36px;161 background: #141414;162 }163 .welcome-title {164 font-size: 74px;165 font-weight: 700;166 text-align: center;167 margin: 20px 0 14px 0;168 }169 .welcome-sub {170 font-size: 36px;171 color: #C9C9C9;172 text-align: center;173 line-height: 1.35;174 margin-bottom: 32px;175 }176 .confetti {177 position: absolute;178 width: 0; height: 0;179 border-left: 16px solid transparent;180 border-right: 16px solid transparent;181 border-bottom: 28px solid #2DA6E6;182 opacity: 0.85;183 }184 .confetti.alt { border-bottom-color: #3D85C6; }185 .hr-soft {186 height: 2px;187 background: #2A2A2A;188 margin: 22px 0 18px 0;189 }190 191 /* Chips */192 .chips {193 padding: 0 36px 26px 36px;194 display: flex;195 flex-wrap: wrap;196 gap: 22px;197 }198 .chip {199 height: 84px;200 padding: 0 34px;201 border-radius: 42px;202 border: 2px solid #2DA6E6;203 color: #BFE8FF;204 display: inline-flex;205 align-items: center;206 font-size: 34px;207 letter-spacing: 0.4px;208 }209 .chip.filled {210 background: #2DA6E6;211 color: #FFFFFF;212 font-weight: 700;213 }214 215 /* Second book row */216 .book-row.secondary { margin-top: 10px; }217 218 /* Bottom nav */219 .bottom-nav {220 position: absolute;221 left: 0;222 bottom: 0;223 width: 100%;224 height: 220px;225 background: #1A1A1A;226 border-top: 1px solid #2A2A2A;227 }228 .nav-content {229 height: 100%;230 display: flex;231 align-items: center;232 justify-content: space-around;233 padding: 0 36px;234 }235 .nav-item {236 width: 200px;237 display: flex;238 flex-direction: column;239 align-items: center;240 gap: 18px;241 color: #CFCFCF;242 font-size: 30px;243 }244 .nav-item.active { color: #2DA6E6; }245 .nav-icon svg { stroke: currentColor; }246 247 /* Floating current book */248 .current-book {249 position: absolute;250 bottom: 198px;251 left: 50%;252 transform: translateX(-50%);253 width: 130px;254 height: 190px;255 background: #E0E0E0;256 border: 1px solid #BDBDBD;257 color: #757575;258 display: flex;259 align-items: center;260 justify-content: center;261 font-size: 26px;262 border-radius: 6px;263 }264 265 /* Home indicator */266 .home-indicator {267 position: absolute;268 bottom: 22px;269 left: 50%;270 transform: translateX(-50%);271 width: 440px;272 height: 12px;273 background: #BDBDBD;274 border-radius: 6px;275 opacity: 0.6;276 }277</style>278</head>279<body>280<div id="render-target">281 282 <!-- Status bar -->283 <div class="status-bar">284 <div class="status-left">285 <span>9:10</span>286 <svg width="40" height="40" viewBox="0 0 24 24" class="icon" aria-label="cloud">287 <path d="M6 16h10a3 3 0 0 0 0-6h-1.2A4.8 4.8 0 0 0 6.5 9.7 3.5 3.5 0 0 0 6 16z" />288 </svg>289 </div>290 <div class="status-right">291 <svg width="40" height="40" viewBox="0 0 24 24" class="icon" aria-label="wifi">292 <path d="M2 8c6-6 14-6 20 0" />293 <path d="M5 11c4.5-4.5 9.5-4.5 14 0" />294 <path d="M8 14c3-3 5-3 8 0" />295 <circle cx="12" cy="18" r="1.5" fill="#FFFFFF"/>296 </svg>297 <svg width="38" height="38" viewBox="0 0 24 24" class="icon" aria-label="battery">298 <rect x="2" y="7" width="18" height="10" rx="2" />299 <rect x="4" y="9" width="12" height="6" fill="#FFFFFF" stroke="none"/>300 <rect x="20" y="10" width="2" height="4" rx="1" />301 </svg>302 </div>303 </div>304 305 <!-- Search -->306 <div class="search-area">307 <div class="search-row">308 <div class="search-box">309 <svg width="44" height="44" viewBox="0 0 24 24" class="icon" aria-label="search">310 <circle cx="10" cy="10" r="7" />311 <path d="M15 15l6 6" />312 </svg>313 <span>Search Kindle</span>314 </div>315 <div class="bell-wrap">316 <svg width="54" height="54" viewBox="0 0 24 24" class="icon" aria-label="notifications">317 <path d="M6 9a6 6 0 0 1 12 0v5l2 2H4l2-2z" />318 <path d="M9 19a3 3 0 0 0 6 0" />319 </svg>320 </div>321 </div>322 </div>323 324 <!-- Tabs -->325 <div class="tabs">326 <div class="tab active">Explore</div>327 <div class="tab">Romance</div>328 <div class="tab">Crime, Thriller & Mystery</div>329 </div>330 331 <div class="divider"></div>332 333 <!-- From Your Library -->334 <div class="section-header">335 <svg width="52" height="52" viewBox="0 0 24 24" class="icon" aria-label="book">336 <path d="M3 5h9a3 3 0 0 1 3 3v11H6a3 3 0 0 1-3-3V5z" />337 <path d="M12 5h9v14h-6V8a3 3 0 0 0-3-3z" />338 </svg>339 <div class="section-title">From Your Library</div>340 </div>341 342 <div class="book-row">343 <div class="book-card">344 [IMG: Book Cover — The Art of War]345 <div class="check-badge">346 <svg width="28" height="28" viewBox="0 0 24 24" class="icon" aria-label="check" style="stroke:#FFFFFF">347 <path d="M5 12l4 4 10-10" />348 </svg>349 </div>350 </div>351 <div class="book-card">352 [IMG: Book Cover — Siddhartha]353 <div class="corner-ribbon">SAMPLE</div>354 </div>355 <div class="book-card">356 [IMG: Book Cover — Never Lie]357 <div class="corner-ribbon">SAMPLE</div>358 </div>359 </div>360 361 <div class="divider"></div>362 363 <!-- Welcome Banner -->364 <div class="welcome-banner">365 <div class="confetti" style="top:12px; left:22px;"></div>366 <div class="confetti alt" style="top:18px; left:120px;"></div>367 <div class="confetti" style="top:28px; right:80px;"></div>368 <div class="confetti alt" style="bottom:40px; left:70px;"></div>369 <div class="confetti" style="bottom:32px; right:140px;"></div>370 371 <div class="welcome-title">Welcome to Kindle</div>372 <div class="welcome-sub">Discover a great read by tapping on a category or cover that you're interested in.</div>373 <div class="hr-soft"></div>374 375 <div class="chips">376 <div class="chip filled">BEST SELLERS</div>377 <div class="chip">ROMANCE</div>378 <div class="chip">LITERATURE & FICTION</div>379 <div class="chip">BIOGRAPHIES</div>380 <div class="chip">NEW RELEASES</div>381 <div class="chip">MYSTERY & THRILLER</div>382 <div class="chip">SCI-FI & FANTASY</div>383 <div class="chip">HISTORY</div>384 </div>385 </div>386 387 <!-- More books -->388 <div class="book-row secondary">389 <div class="book-card">[IMG: Book Cover — Verity]</div>390 <div class="book-card">[IMG: Book Cover — The Hidden Hindu (Hindi)]</div>391 <div class="book-card">[IMG: Book Cover — The Hidden Hindu]</div>392 <div class="book-card">[IMG: Biography Book Cover]</div>393 </div>394 395 <!-- Floating current book -->396 <div class="current-book">[IMG: The Art of War]</div>397 398 <!-- Bottom navigation -->399 <div class="bottom-nav">400 <div class="nav-content">401 <div class="nav-item active">402 <div class="nav-icon">403 <svg width="56" height="56" viewBox="0 0 24 24">404 <path d="M3 11l9-7 9 7" class="icon"/>405 <path d="M5 10v9h5v-5h4v5h5v-9" class="icon"/>406 </svg>407 </div>408 <div>HOME</div>409 </div>410 <div class="nav-item">411 <div class="nav-icon">412 <svg width="56" height="56" viewBox="0 0 24 24">413 <path d="M3 5h8v14H3z" class="icon"/>414 <path d="M13 5h8v14h-8z" class="icon"/>415 </svg>416 </div>417 <div>LIBRARY</div>418 </div>419 <div class="nav-item">420 <div class="nav-icon">421 <svg width="56" height="56" viewBox="0 0 24 24">422 <path d="M6 6h15l-2 10H7L6 6z" class="icon"/>423 <circle cx="9" cy="19" r="1.8" fill="currentColor"/>424 <circle cx="17" cy="19" r="1.8" fill="currentColor"/>425 </svg>426 </div>427 <div>STORE</div>428 </div>429 <div class="nav-item">430 <div class="nav-icon">431 <svg width="56" height="56" viewBox="0 0 24 24">432 <path d="M4 6h16" class="icon"/>433 <path d="M4 12h16" class="icon"/>434 <path d="M4 18h16" class="icon"/>435 </svg>436 </div>437 <div>MORE</div>438 </div>439 </div>440 </div>441 442 <div class="home-indicator"></div>443</div>444</body>445</html>