GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Play Books UI Mock</title>5<style>6 body {7 margin: 0;8 padding: 0;9 background: transparent;10 font-family: Arial, Helvetica, sans-serif;11 }12 #render-target {13 width: 1080px;14 height: 2400px;15 position: relative;16 overflow: hidden;17 background: #121212;18 color: #FFFFFF;19 }20 21 /* Status bar */22 .status-bar {23 height: 90px;24 padding: 0 40px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #E0E0E0;29 font-size: 38px;30 }31 .status-right {32 display: flex;33 align-items: center;34 gap: 28px;35 }36 .icon-wifi, .icon-battery {37 width: 44px;38 height: 44px;39 }40 .battery-wrap {41 display: flex;42 align-items: center;43 gap: 12px;44 font-size: 32px;45 color: #BDBDBD;46 }47 48 /* Search bar */49 .search-row {50 padding: 0 40px;51 display: flex;52 align-items: center;53 gap: 24px;54 }55 .search-bar {56 flex: 1;57 height: 120px;58 background: #1F1F1F;59 border-radius: 24px;60 display: flex;61 align-items: center;62 padding: 0 36px;63 color: #9E9E9E;64 font-size: 40px;65 }66 .search-icon {67 width: 48px;68 height: 48px;69 margin-right: 22px;70 }71 .avatar {72 width: 88px;73 height: 88px;74 border-radius: 50%;75 background: #F57C00;76 display: flex;77 align-items: center;78 justify-content: center;79 font-weight: 700;80 font-size: 42px;81 color: #121212;82 }83 84 /* Featured book card */85 .featured {86 padding: 40px;87 display: flex;88 gap: 40px;89 }90 .book-card {91 width: 320px;92 position: relative;93 }94 .book-cover {95 width: 320px;96 height: 470px;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 color: #757575;100 display: flex;101 align-items: center;102 justify-content: center;103 text-align: center;104 font-size: 34px;105 }106 .chip {107 position: absolute;108 top: 18px;109 left: 18px;110 background: #2A2A2A;111 color: #FFFFFF;112 padding: 14px 22px;113 border-radius: 16px;114 font-size: 30px;115 border: 1px solid #3A3A3A;116 }117 .price-btn {118 position: absolute;119 bottom: 110px;120 left: 24px;121 background: #216edf;122 color: #FFFFFF;123 padding: 20px 28px;124 font-size: 34px;125 border-radius: 16px;126 box-shadow: 0 8px 16px rgba(0,0,0,0.35);127 }128 .book-info {129 margin-top: 22px;130 }131 .book-title {132 font-size: 44px;133 font-weight: 700;134 }135 .book-meta {136 margin-top: 8px;137 font-size: 32px;138 color: #B0B0B0;139 }140 141 /* Tabs */142 .tabs {143 margin-top: 24px;144 padding: 0 40px;145 border-bottom: 1px solid #2A2A2A;146 display: flex;147 gap: 50px;148 }149 .tab {150 font-size: 42px;151 padding: 30px 0;152 color: #CFCFCF;153 position: relative;154 }155 .tab.active {156 color: #FFFFFF;157 font-weight: 700;158 }159 .tab.active::after {160 content: "";161 position: absolute;162 bottom: -2px;163 left: 0;164 width: 130px;165 height: 8px;166 background: #2196F3;167 border-radius: 4px;168 }169 170 /* Explore section */171 .section-title {172 font-size: 52px;173 font-weight: 700;174 padding: 40px;175 padding-top: 36px;176 }177 .explore-grid {178 padding: 0 40px;179 display: grid;180 grid-template-columns: repeat(3, 1fr);181 gap: 26px;182 }183 .explore-card {184 height: 200px;185 background: #1B1B1B;186 border-radius: 20px;187 border: 1px solid #2A2A2A;188 display: flex;189 align-items: center;190 gap: 26px;191 padding: 32px;192 }193 .explore-icon {194 width: 70px;195 height: 70px;196 color: #6EA8FF;197 }198 .explore-label {199 font-size: 40px;200 color: #EAEAEA;201 }202 203 /* Recent price drops */204 .recent-header {205 padding: 36px 40px 16px;206 display: flex;207 align-items: center;208 justify-content: space-between;209 }210 .recent-title {211 font-size: 52px;212 font-weight: 700;213 }214 .arrow {215 width: 48px;216 height: 48px;217 color: #9E9E9E;218 }219 .carousel {220 display: flex;221 gap: 28px;222 padding: 0 40px;223 overflow: hidden;224 }225 .deal-card {226 width: 330px;227 }228 .save-badge {229 position: relative;230 top: 26px;231 left: 18px;232 background: #4CAF50;233 color: #FFFFFF;234 padding: 12px 22px;235 border-radius: 30px;236 font-size: 34px;237 display: inline-block;238 z-index: 2;239 }240 .cover {241 width: 330px;242 height: 460px;243 background: #E0E0E0;244 border: 1px solid #BDBDBD;245 color: #757575;246 display: flex;247 align-items: center;248 justify-content: center;249 text-align: center;250 font-size: 32px;251 }252 253 /* Bottom nav */254 .bottom-nav {255 position: absolute;256 bottom: 0;257 left: 0;258 right: 0;259 height: 170px;260 background: #161616;261 border-top: 1px solid #2A2A2A;262 display: grid;263 grid-template-columns: repeat(4, 1fr);264 align-items: center;265 text-align: center;266 }267 .nav-item {268 display: flex;269 flex-direction: column;270 align-items: center;271 gap: 14px;272 color: #9E9E9E;273 font-size: 34px;274 }275 .nav-item .nav-icon {276 width: 56px;277 height: 56px;278 color: #9E9E9E;279 }280 .nav-item.active {281 color: #2196F3;282 font-weight: 700;283 }284 .nav-item.active .nav-icon {285 color: #2196F3;286 }287 288 /* small scroll indicator */289 .scroll-indicator {290 position: absolute;291 bottom: 180px;292 left: 50%;293 transform: translateX(-50%);294 width: 160px;295 height: 14px;296 border-radius: 7px;297 background: #2A2A2A;298 }299</style>300</head>301<body>302<div id="render-target">303 304 <!-- Status bar -->305 <div class="status-bar">306 <div>8:37</div>307 <div class="status-right">308 <!-- simple icons -->309 <svg class="icon-wifi" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">310 <path d="M2 8c5-4 15-4 20 0"/>311 <path d="M5 12c4-3 10-3 14 0"/>312 <path d="M8 16c3-2 7-2 10 0"/>313 <circle cx="12" cy="19" r="1.6" fill="#BDBDBD"></circle>314 </svg>315 <div class="battery-wrap">316 <svg class="icon-battery" viewBox="0 0 24 24" fill="none" stroke="#BDBDBD" stroke-width="2">317 <rect x="2" y="6" width="18" height="12" rx="2"></rect>318 <rect x="4" y="8" width="12" height="8" fill="#BDBDBD"></rect>319 <rect x="20" y="10" width="2" height="4" rx="1" fill="#BDBDBD"></rect>320 </svg>321 <span>95%</span>322 </div>323 </div>324 </div>325 326 <!-- Search bar -->327 <div class="search-row">328 <div class="search-bar">329 <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2">330 <circle cx="11" cy="11" r="7"></circle>331 <path d="M16 16l5 5"></path>332 </svg>333 <span>Search Play Books</span>334 </div>335 <div class="avatar">R</div>336 </div>337 338 <!-- Featured book -->339 <div class="featured">340 <div class="book-card">341 <div class="chip">Sample</div>342 <div class="book-cover">[IMG: Book Cover - The Pillars of the Earth]</div>343 <div class="price-btn">Buy ₹336.58</div>344 <div class="book-info">345 <div class="book-title">The Pillars of the Earth</div>346 <div class="book-meta">Book 1 • 1% complete</div>347 </div>348 </div>349 </div>350 351 <!-- Tabs -->352 <div class="tabs">353 <div class="tab active">Ebooks</div>354 <div class="tab">Audiobooks</div>355 </div>356 357 <!-- Explore -->358 <div class="section-title">Explore Play Books</div>359 <div class="explore-grid">360 <div class="explore-card">361 <svg class="explore-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">362 <rect x="3" y="4" width="5" height="16"></rect>363 <rect x="10" y="4" width="5" height="16"></rect>364 <rect x="17" y="4" width="4" height="16"></rect>365 </svg>366 <div class="explore-label">Genres</div>367 </div>368 <div class="explore-card">369 <svg class="explore-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">370 <path d="M12 2l3 7 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1 3-7z"></path>371 </svg>372 <div class="explore-label">Top selling</div>373 </div>374 <div class="explore-card">375 <svg class="explore-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">376 <rect x="4" y="4" width="16" height="16" rx="2"></rect>377 <path d="M8 8h8M8 12h8M8 16h6"></path>378 </svg>379 <div class="explore-label">New releases</div>380 </div>381 </div>382 383 <!-- Recent price drops -->384 <div class="recent-header">385 <div class="recent-title">Recent price drops</div>386 <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">387 <path d="M9 6l6 6-6 6"></path>388 </svg>389 </div>390 <div class="carousel">391 <div class="deal-card">392 <div class="save-badge">Save 28%</div>393 <div class="cover">[IMG: Thomas Hobbes - Collected Works]</div>394 </div>395 <div class="deal-card">396 <div class="save-badge">Save 41%</div>397 <div class="cover">[IMG: The Ultimate Guide to Drawing]</div>398 </div>399 <div class="deal-card">400 <div class="save-badge">Save 10%</div>401 <div class="cover">[IMG: Deal Book Cover]</div>402 </div>403 </div>404 405 <!-- Scroll indicator -->406 <div class="scroll-indicator"></div>407 408 <!-- Bottom navigation -->409 <div class="bottom-nav">410 <div class="nav-item active">411 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">412 <path d="M3 10l9-7 9 7"></path>413 <path d="M5 11v9h14v-9"></path>414 </svg>415 <div>Home</div>416 </div>417 <div class="nav-item">418 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">419 <rect x="4" y="3" width="16" height="18" rx="2"></rect>420 <path d="M8 7h8M8 11h8M8 15h8"></path>421 </svg>422 <div>Library</div>423 </div>424 <div class="nav-item">425 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">426 <path d="M6 4h12v16l-6-3-6 3z"></path>427 </svg>428 <div>Wishlist</div>429 </div>430 <div class="nav-item">431 <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">432 <circle cx="9" cy="12" r="7"></circle>433 <path d="M17 6l6 6-6 6"></path>434 </svg>435 <div>Shop</div>436 </div>437 </div>438 439</div>440</body>441</html>