GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI Mock - PurpleBooks Offer</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">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, Arial, sans-serif;16 border-radius: 36px;17 box-shadow: 0 10px 40px rgba(0,0,0,0.35);18 }19 20 /* Status bar */21 .status-bar {22 height: 90px;23 padding: 0 34px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #F5F5F5;28 font-weight: 600;29 letter-spacing: 0.5px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 26px;35 }36 .icon { width: 36px; height: 36px; }37 .battery { width: 52px; height: 26px; }38 .wifi, .signal { width: 34px; height: 34px; }39 40 /* Header */41 .header {42 padding: 0 40px;43 }44 .date {45 color: #B0B0B0;46 font-size: 28px;47 margin-top: 4px;48 }49 .greeting {50 font-size: 44px;51 font-weight: 700;52 margin-top: 18px;53 }54 55 /* Action bar (Order / Search / Cart) */56 .action-bar {57 margin-top: 26px;58 background: #1E1E1E;59 border: 1px solid #2B2B2B;60 border-radius: 24px;61 height: 120px;62 display: flex;63 align-items: center;64 justify-content: space-around;65 }66 .action-item {67 display: flex;68 align-items: center;69 gap: 16px;70 color: #DADADA;71 font-size: 34px;72 padding: 18px 26px;73 border-radius: 20px;74 }75 .action-item svg { width: 36px; height: 36px; fill: #DADADA; }76 77 .section-title {78 font-size: 40px;79 font-weight: 700;80 margin: 30px 40px 18px;81 }82 83 /* Sample book grid behind modal */84 .books-row {85 display: flex;86 gap: 26px;87 padding: 0 40px;88 }89 .book-card {90 width: 310px;91 height: 420px;92 background: #1B1B1B;93 border: 1px solid #2A2A2A;94 border-radius: 18px;95 padding: 16px;96 }97 .img-ph {98 width: 100%;99 height: 72%;100 background: #E0E0E0;101 border: 1px solid #BDBDBD;102 border-radius: 12px;103 display: flex;104 align-items: center;105 justify-content: center;106 color: #575757;107 font-size: 28px;108 text-align: center;109 padding: 6px;110 }111 .book-title {112 font-size: 26px;113 margin-top: 12px;114 color: #EAEAEA;115 line-height: 1.2;116 height: 60px;117 overflow: hidden;118 }119 .price-row {120 display: flex;121 align-items: baseline;122 gap: 12px;123 color: #8EE08E;124 margin-top: 6px;125 }126 .price-row .old { color: #8A8A8A; text-decoration: line-through; }127 .category-chip {128 margin: 24px 40px;129 display: inline-block;130 padding: 12px 22px;131 border-radius: 999px;132 background: #272727;133 border: 1px solid #333;134 color: #BDBDBD;135 font-size: 30px;136 }137 138 /* Promo modal */139 .promo-modal {140 position: absolute;141 top: 520px;142 left: 90px;143 width: 900px;144 height: 910px;145 background: #BFD4FF;146 border-radius: 28px;147 box-shadow: 0 20px 60px rgba(0,0,0,0.55);148 overflow: hidden;149 }150 .promo-inner {151 position: absolute;152 inset: 0;153 display: grid;154 grid-template-columns: 1fr 1fr;155 padding: 40px 46px;156 gap: 20px;157 }158 .promo-left {159 display: flex;160 flex-direction: column;161 align-items: center;162 justify-content: flex-start;163 }164 .promo-right {165 position: relative;166 padding-top: 20px;167 }168 .promo-logo {169 position: absolute;170 top: 10px;171 right: 0;172 width: 170px;173 height: 170px;174 border-radius: 999px;175 background: #7D49D8;176 display: flex;177 align-items: center;178 justify-content: center;179 color: #fff;180 font-weight: 800;181 font-size: 36px;182 box-shadow: 0 8px 20px rgba(125,73,216,0.35);183 }184 .promo-heading {185 margin-top: 210px;186 color: #4C3AAE;187 font-weight: 800;188 font-size: 42px;189 letter-spacing: 1px;190 }191 .promo-sub {192 color: #244;193 font-size: 28px;194 margin-top: 6px;195 }196 .price-big {197 font-size: 160px;198 font-weight: 900;199 color: #FFFFFF;200 text-shadow: 0 8px 0 rgba(0,0,0,0.12), 0 24px 40px rgba(0,0,0,0.35);201 margin-top: 40px;202 }203 .only {204 font-size: 36px;205 color: #2C3E70;206 font-weight: 700;207 margin-left: 8px;208 }209 .play-badge {210 margin-top: 34px;211 width: 280px;212 height: 80px;213 background: #E0E0E0;214 border: 1px solid #BDBDBD;215 border-radius: 10px;216 display: flex;217 align-items: center;218 justify-content: center;219 color: #575757;220 font-size: 28px;221 }222 .book-cover {223 width: 420px;224 height: 560px;225 background: #E0E0E0;226 border: 1px solid #BDBDBD;227 border-radius: 16px;228 display: flex;229 align-items: center;230 justify-content: center;231 color: #575757;232 font-size: 30px;233 text-align: center;234 box-shadow: 0 10px 30px rgba(0,0,0,0.25);235 }236 .promo-wave {237 position: absolute;238 bottom: -40px;239 right: -40px;240 width: 400px;241 height: 200px;242 background: rgba(255,255,255,0.8);243 border-radius: 80px;244 transform: rotate(-10deg);245 filter: blur(2px);246 }247 .promo-deco {248 position: absolute;249 top: -30px;250 right: 140px;251 width: 120px;252 height: 120px;253 background: rgba(255,255,255,0.9);254 border-radius: 24px;255 transform: rotate(35deg);256 }257 .promo-deco.small {258 top: 60px;259 right: 40px;260 width: 90px;261 height: 90px;262 border-radius: 20px;263 transform: rotate(15deg);264 }265 266 /* Close circle */267 .close-circle {268 position: absolute;269 top: 460px;270 left: 490px;271 width: 100px;272 height: 100px;273 border-radius: 999px;274 border: 3px solid rgba(255,255,255,0.7);275 display: flex;276 align-items: center;277 justify-content: center;278 backdrop-filter: blur(2px);279 background: rgba(18,18,18,0.4);280 z-index: 5;281 }282 .close-circle svg { width: 44px; height: 44px; stroke: #FFFFFF; stroke-width: 6; fill: none; }283 284 /* Floating up arrow */285 .fab {286 position: absolute;287 right: 46px;288 bottom: 520px;289 width: 140px;290 height: 140px;291 background: #7D49D8;292 border-radius: 999px;293 box-shadow: 0 18px 40px rgba(125,73,216,0.35);294 display: flex;295 align-items: center;296 justify-content: center;297 }298 .fab svg { width: 70px; height: 70px; fill: #fff; }299 300 /* Offer text and CTA */301 .offer-row {302 position: absolute;303 top: 1440px;304 left: 40px;305 width: 1000px;306 color: #FFFFFF;307 font-size: 42px;308 font-weight: 700;309 text-shadow: 0 3px 12px rgba(0,0,0,0.5);310 }311 .cta {312 position: absolute;313 top: 1530px;314 left: 380px;315 width: 320px;316 height: 110px;317 background: #FFFFFF;318 color: #7D49D8;319 border-radius: 24px;320 display: flex;321 align-items: center;322 justify-content: center;323 font-weight: 900;324 font-size: 40px;325 box-shadow: 0 16px 40px rgba(0,0,0,0.35);326 }327 328 /* Bottom books list preview */329 .bottom-list {330 position: absolute;331 top: 1660px;332 left: 40px;333 right: 40px;334 }335 .list-row {336 display: grid;337 grid-template-columns: 260px 1fr;338 gap: 36px;339 align-items: start;340 }341 .mini-cover {342 width: 260px;343 height: 360px;344 background: #E0E0E0;345 border: 1px solid #BDBDBD;346 border-radius: 12px;347 display: flex;348 align-items: center;349 justify-content: center;350 color: #575757;351 font-size: 26px;352 text-align: center;353 }354 .list-info .title {355 font-size: 42px;356 font-weight: 700;357 color: #FFFFFF;358 }359 .list-info .sub { color: #9E9E9E; font-size: 28px; margin-top: 8px; }360 .list-info .deal { margin-top: 14px; font-size: 36px; color: #FFFFFF; }361 .list-info .deal .old { color: #8A8A8A; text-decoration: line-through; margin-right: 16px; }362 .list-info .deal .percent { color: #7ED957; margin-left: 12px; }363 364 /* Bottom nav */365 .bottom-nav {366 position: absolute;367 left: 0;368 right: 0;369 bottom: 0;370 height: 160px;371 background: #101010;372 border-top: 1px solid #222;373 display: flex;374 align-items: center;375 justify-content: space-around;376 }377 .nav-item {378 display: flex;379 flex-direction: column;380 align-items: center;381 color: #CFCFCF;382 font-size: 24px;383 gap: 12px;384 }385 .nav-item svg { width: 56px; height: 56px; fill: #CFCFCF; }386 .nav-item.active svg, .nav-item.active { color: #7D49D8; }387 .nav-item.active svg { fill: #7D49D8; }388 389</style>390</head>391<body>392<div id="render-target">393 394 <!-- Status Bar -->395 <div class="status-bar">396 <div class="time">7:51</div>397 <div class="status-icons">398 <!-- Signal -->399 <svg class="signal viewBox='0 0 24 24'"><svg viewBox="0 0 24 24" class="signal"><path d="M3 20h2v-6H3v6zm4 0h2v-9H7v9zm4 0h2v-12h-2v12zm4 0h2V5h-2v15zm4 0h2V2h-2v18z" fill="#fff"/></svg></svg>400 <!-- Wifi -->401 <svg class="wifi viewBox='0 0 24 24'"><svg viewBox="0 0 24 24" class="wifi"><path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-6.5-7.5 1.5 1.5A8 8 0 0 1 18 14l1.5-1.5A10 10 0 0 0 5.5 12.5zm-3-3 1.6 1.6A14 14 0 0 1 20.9 11.1l1.6-1.6A16 16 0 0 0 2.5 9.5z" fill="#fff"/></svg></svg>402 <!-- Battery -->403 <svg viewBox="0 0 28 16" class="battery">404 <rect x="1" y="3" width="22" height="10" rx="2" ry="2" fill="none" stroke="#fff" stroke-width="2"/>405 <rect x="24" y="5" width="3" height="6" fill="#fff"/>406 <rect x="3" y="5" width="16" height="6" fill="#fff"/>407 </svg>408 </div>409 </div>410 411 <!-- Header & Actions -->412 <div class="header">413 <div class="date">Tuesday 25 July</div>414 <div class="greeting">Hi, Cerebra Research</div>415 416 <div class="action-bar">417 <div class="action-item">418 <svg viewBox="0 0 24 24"><path d="M20 7h-4l-2-2h-4L8 7H4l2 13h12l2-13zM9 12h6v6H9v-6z" /></svg>419 <div>Order</div>420 </div>421 <div class="action-item">422 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 4.9 14.3l5.2 5.2 1.4-1.4-5.2-5.2A8 8 0 0 0 10 2zm0 14A6 6 0 1 1 10 4a6 6 0 0 1 0 12z"/></svg>423 <div>Search</div>424 </div>425 <div class="action-item">426 <svg viewBox="0 0 24 24"><path d="M7 4h-2l-1 2H2v2h2l3 9h10l3-8H9l-1-3zM7 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>427 <div>Cart</div>428 </div>429 </div>430 </div>431 432 <div class="section-title">Special Offer</div>433 <div class="books-row">434 <div class="book-card">435 <div class="img-ph">[IMG: Orange Book Cover]</div>436 <div class="book-title">A Game Changer Memoir</div>437 <div class="price-row"><span class="old">₹399</span><span>₹299</span></div>438 </div>439 <div class="book-card">440 <div class="img-ph">[IMG: Travel/Diary Cover]</div>441 <div class="book-title">The Journey Journal</div>442 <div class="price-row"><span class="old">₹929</span><span>₹499</span></div>443 </div>444 <div class="book-card">445 <div class="img-ph">[IMG: Mystery Cover]</div>446 <div class="book-title">Good Girl: Betrayal</div>447 <div class="price-row"><span class="old">₹929</span><span>₹499</span></div>448 </div>449 </div>450 451 <span class="category-chip">Self Development</span>452 453 <!-- Close button -->454 <div class="close-circle">455 <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" /></svg>456 </div>457 458 <!-- Promo Modal -->459 <div class="promo-modal">460 <div class="promo-inner">461 <div class="promo-left">462 <div class="book-cover">[IMG: Rich Dad Poor Dad book cover]</div>463 <div class="play-badge">[IMG: Get it on Google Play]</div>464 </div>465 <div class="promo-right">466 <div class="promo-logo">Purple</div>467 <div class="promo-heading">PURPLEBOOKS</div>468 <div class="promo-sub">BEST BOOK BEST PRICE</div>469 <div class="price-big">₹99 <span class="only">only</span></div>470 </div>471 </div>472 <div class="promo-deco"></div>473 <div class="promo-deco small"></div>474 <div class="promo-wave"></div>475 </div>476 477 <!-- Offer text and CTA -->478 <div class="offer-row">Today's offer - ₹99 🔥 🔥 🔥</div>479 <div class="cta">GET NOW</div>480 481 <!-- Bottom list (behind modal area) -->482 <div class="bottom-list">483 <div class="list-row">484 <div class="mini-cover">[IMG: Who Will Cry When You Die?]</div>485 <div class="list-info">486 <div class="title">Who Will Cry When You Die? (English, Paperback)</div>487 <div class="sub">Self Development</div>488 <div class="deal"><span class="old">₹299</span><span>₹149</span><span class="percent">50%</span></div>489 </div>490 </div>491 492 <div style="height: 40px;"></div>493 494 <div class="list-row">495 <div class="mini-cover">[IMG: Advantage India Book]</div>496 <div class="list-info">497 <div class="title">Advantage India: From Challenge To Opportunity</div>498 <div class="sub">Self Development</div>499 <div class="deal"><span class="old">₹399</span><span>₹159</span><span class="percent">60%</span></div>500 </div>501 </div>502 </div>503 504 <!-- Floating Up Arrow -->505 <div class="fab">506 <svg viewBox="0 0 24 24"><path d="M12 5l7 7-1.4 1.4L13 9.8V19h-2V9.8L6.4 13.4 5 12l7-7z"/></svg>507 </div>508 509 <!-- Bottom Navigation -->510 <div class="bottom-nav">511 <div class="nav-item active">512 <svg viewBox="0 0 24 24"><path d="M12 3l10 9h-3v9h-6v-6H11v6H5v-9H2l10-9z"/></svg>513 <div>Home</div>514 </div>515 <div class="nav-item">516 <svg viewBox="0 0 24 24"><path d="M3 4h18v2H3zM3 9h18v2H3zM3 14h18v2H3zM3 19h18v2H3z"/></svg>517 <div>Categories</div>518 </div>519 <div class="nav-item">520 <svg viewBox="0 0 24 24"><path d="M10 2a8 8 0 1 0 4.9 14.3l5.2 5.2 1.4-1.4-5.2-5.2A8 8 0 0 0 10 2zm0 14A6 6 0 1 1 10 4a6 6 0 0 1 0 12z"/></svg>521 <div>Search</div>522 </div>523 <div class="nav-item">524 <svg viewBox="0 0 24 24"><path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-8 9v-2a6 6 0 0 1 12 0v2H4z"/></svg>525 <div>Account</div>526 </div>527 </div>528 529</div>530</body>531</html>