GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="utf-8">4<title>Shopping App - Details</title>5<meta name="viewport" content="width=1440, initial-scale=1.0">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1440px;10 height: 3120px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 border-radius: 24px;15 box-shadow: 0 6px 24px rgba(0,0,0,0.15);16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 padding: 0 60px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #222;26 font-weight: 600;27 font-size: 48px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 36px;33 }34 35 /* App bar */36 .app-bar {37 height: 140px;38 padding: 0 40px;39 display: flex;40 align-items: center;41 gap: 30px;42 border-bottom: 1px solid #eee;43 background: #fff;44 }45 .round-btn {46 width: 96px; height: 96px; border-radius: 48px;47 border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;48 background: #fafafa;49 }50 .app-actions {51 margin-left: auto;52 display: flex; gap: 28px;53 }54 55 /* Tabs */56 .tabs {57 display: flex;58 gap: 24px;59 padding: 28px 40px;60 border-bottom: 1px solid #eee;61 background: #fff;62 }63 .tab {64 padding: 28px 36px;65 border-radius: 24px;66 font-size: 46px;67 color: #777;68 background: #f2f2f2;69 }70 .tab.active {71 background: #ffffff;72 border: 1px solid #ddd;73 color: #111;74 box-shadow: 0 2px 6px rgba(0,0,0,0.05);75 }76 77 /* Price card and pack label */78 .price-section {79 position: relative;80 padding: 40px;81 background: #fff;82 }83 .price-badge {84 width: 380px;85 border-radius: 24px;86 overflow: hidden;87 border: 1px solid #dfe6d9;88 }89 .price-top {90 background: #eaf6e6;91 padding: 36px;92 text-align: center;93 font-size: 64px;94 font-weight: 700;95 color: #0b6b2e;96 }97 .price-bottom {98 background: #e0f3db;99 padding: 26px 36px;100 display: flex; align-items: center; gap: 18px; color: #115d2a; font-size: 44px; font-weight: 700;101 }102 .green-check {103 width: 54px; height: 54px; border-radius: 27px; background: #16a34a; display:flex; align-items:center; justify-content:center;104 }105 .green-check svg { width: 34px; height: 34px; }106 .section {107 padding: 20px 40px;108 }109 110 /* Delivery block */111 .delivery-block {112 margin-top: 10px;113 padding: 40px;114 border-top: 1px dashed #ddd;115 border-bottom: 1px dashed #ddd;116 background: #fff;117 }118 .delivery-title {119 font-size: 64px; font-weight: 800; color: #111; margin-bottom: 28px;120 }121 .location-row {122 display: flex; align-items: center; gap: 20px; font-size: 48px; color: #333; margin-bottom: 24px;123 }124 .change-link {125 margin-left: auto; color: #2e7be8; display: flex; align-items: center; gap: 14px; font-weight: 700;126 }127 .bullet {128 display: flex; align-items: center; gap: 20px; font-size: 48px; color: #333; margin: 26px 0;129 }130 .tick {131 width: 56px; height: 56px; border-radius: 28px; background: #16a34a; display:flex; align-items:center; justify-content:center;132 }133 .tick svg { width: 34px; height: 34px; }134 135 /* Feature tiles */136 .tiles {137 display: flex; gap: 40px; padding: 40px;138 background: #fff;139 }140 .tile {141 flex: 1;142 background: #fff7f7;143 border: 1px solid #f3dcdc;144 border-radius: 28px;145 padding: 40px;146 display: flex; align-items: center; gap: 30px;147 }148 .tile .icon {149 width: 120px; height: 90px; background: #fff; border: 1px solid #ddd; border-radius: 18px; display:flex; align-items:center; justify-content:center;150 }151 .tile .text {152 font-size: 48px; color: #333; line-height: 1.2;153 }154 .tile .text .sub { color: #666; font-size: 42px; }155 156 /* Seller details */157 .seller-header {158 padding: 40px;159 display: flex; align-items: center;160 background: #fff;161 border-top: 1px solid #f0f0f0;162 }163 .seller-header h3 { font-size: 60px; margin: 0; color: #222; }164 .chevron {165 margin-left: auto;166 }167 168 /* Product details table */169 .card {170 margin: 0 40px;171 border: 1px solid #e6e6e6;172 border-radius: 28px;173 overflow: hidden;174 background: #fff;175 }176 .table {177 display: grid;178 grid-template-columns: 40% 60%;179 font-size: 48px;180 }181 .row { border-top: 1px solid #eee; }182 .cell {183 padding: 36px 40px;184 }185 .cell.head { color: #666; }186 .cell.val { color: #222; font-weight: 700; }187 .view-details {188 padding: 34px 40px;189 border-top: 1px solid #eee;190 color: #2e7be8; font-size: 48px; font-weight: 700; display:flex; align-items:center; justify-content:flex-start; gap: 20px;191 }192 193 /* Bottom buy bar */194 .bottom-bar {195 position: absolute;196 left: 0; right: 0; bottom: 0;197 height: 180px;198 display: flex; align-items: center; gap: 30px;199 padding: 0 40px;200 background: #ffffff;201 border-top: 1px solid #eee;202 }203 .cart-mini {204 width: 140px; height: 140px; border-radius: 24px; border: 1px solid #ddd; display:flex; align-items:center; justify-content:center; background:#fafafa;205 }206 .buy-btn {207 flex: 1;208 height: 140px;209 border-radius: 24px;210 background: #e63e4e;211 color: #fff;212 font-size: 62px; font-weight: 800;213 display:flex; align-items:center; justify-content:center;214 box-shadow: 0 4px 12px rgba(230,62,78,0.4);215 }216 217 /* Small helpers */218 .divider {219 height: 20px; background:#fafafa; border-top: 1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;220 }221</style>222</head>223<body>224<div id="render-target">225 226 <!-- Status Bar -->227 <div class="status-bar">228 <div>2:25</div>229 <div class="status-right">230 <!-- simple status icons -->231 <svg width="48" height="48" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="#666"/></svg>232 <svg width="48" height="48" viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2" fill="#666"/></svg>233 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#666" stroke-width="3"/></svg>234 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M5 5h14l-2 14H7L5 5z" fill="#666"/></svg>235 <svg width="48" height="48" viewBox="0 0 24 24"><path d="M20 6v12" stroke="#666" stroke-width="3"/><rect x="3" y="5" width="15" height="14" rx="2" fill="#aaa"/></svg>236 </div>237 </div>238 239 <!-- App Bar -->240 <div class="app-bar">241 <div class="round-btn">242 <!-- Back icon -->243 <svg width="54" height="54" viewBox="0 0 24 24">244 <path d="M15 6l-6 6 6 6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>245 </svg>246 </div>247 248 <div class="app-actions">249 <div class="round-btn">250 <!-- Search -->251 <svg width="56" height="56" viewBox="0 0 24 24">252 <circle cx="10" cy="10" r="6" stroke="#444" stroke-width="2" fill="none"/>253 <path d="M14.5 14.5L20 20" stroke="#444" stroke-width="2" stroke-linecap="round"/>254 </svg>255 </div>256 <div class="round-btn">257 <!-- Home -->258 <svg width="56" height="56" viewBox="0 0 24 24">259 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-9z" stroke="#444" stroke-width="2" fill="none"/>260 </svg>261 </div>262 <div class="round-btn">263 <!-- Cart -->264 <svg width="56" height="56" viewBox="0 0 24 24">265 <path d="M4 6h2l3 9h8l3-7H7" stroke="#444" stroke-width="2" fill="none"/>266 <circle cx="10" cy="20" r="2" fill="#444"/>267 <circle cx="18" cy="20" r="2" fill="#444"/>268 </svg>269 </div>270 </div>271 </div>272 273 <!-- Tabs -->274 <div class="tabs">275 <div class="tab active">Details</div>276 <div class="tab">More Like This</div>277 <div class="tab">Reviews</div>278 </div>279 280 <!-- Price Section -->281 <div class="price-section">282 <div class="price-badge">283 <div class="price-top">₹3,145</div>284 <div class="price-bottom">285 <div class="green-check">286 <svg viewBox="0 0 24 24">287 <path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>288 </svg>289 </div>290 <div>Pack of 1</div>291 </div>292 </div>293 </div>294 295 <!-- Delivery block -->296 <div class="delivery-block">297 <div class="delivery-title">Delivery by 8 Dec</div>298 299 <div class="location-row">300 <svg width="52" height="52" viewBox="0 0 24 24">301 <path d="M12 3c-3.866 0-7 3.134-7 7 0 4.667 7 11 7 11s7-6.333 7-11c0-3.866-3.134-7-7-7zm0 9a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#e74c3c"/>302 </svg>303 <div>At Gurgaon, 122003</div>304 <div class="change-link">305 <svg width="52" height="52" viewBox="0 0 24 24">306 <path d="M4 7h14M4 12h14M4 17h14" stroke="#2e7be8" stroke-width="2"/>307 </svg>308 <span>Change</span>309 </div>310 </div>311 312 <div class="bullet">313 <div class="tick">314 <svg viewBox="0 0 24 24">315 <path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>316 </svg>317 </div>318 <div>Cash on delivery available</div>319 </div>320 <div class="bullet">321 <div class="tick">322 <svg viewBox="0 0 24 24">323 <path d="M5 13l4 4L19 7" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>324 </svg>325 </div>326 <div>7 Days Easy Returns</div>327 </div>328 </div>329 330 <!-- Feature tiles -->331 <div class="tiles">332 <div class="tile">333 <div class="icon">334 <svg width="72" height="72" viewBox="0 0 24 24">335 <path d="M3 8h18v8H3z" fill="#ff6b6b"/>336 <path d="M6 12h6" stroke="#fff" stroke-width="2"/>337 </svg>338 </div>339 <div class="text">340 FREE<br>Delivery341 </div>342 </div>343 <div class="tile">344 <div class="icon">345 <svg width="72" height="72" viewBox="0 0 24 24">346 <circle cx="12" cy="9" r="5" fill="#eb5757"/>347 <path d="M5 22l7-4 7 4" stroke="#eb5757" stroke-width="2" fill="none"/>348 </svg>349 </div>350 <div class="text">351 Great Quality<br><span class="sub">at Best Price</span>352 </div>353 </div>354 </div>355 356 <div class="divider"></div>357 358 <!-- Seller details -->359 <div class="seller-header">360 <h3>Seller Details</h3>361 <div class="chevron">362 <svg width="56" height="56" viewBox="0 0 24 24">363 <path d="M6 9l6 6 6-6" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>364 </svg>365 </div>366 </div>367 368 <!-- Product details card -->369 <div class="card">370 <div class="table">371 <div class="cell head">Type</div>372 <div class="cell val">Drill Machine with Bits</div>373 374 <div class="cell head row">Hammer Type</div>375 <div class="cell val row">Yes</div>376 377 <div class="cell head row">Power</div>378 <div class="cell val row">650W</div>379 380 <div class="cell head row">Reversible Rotation</div>381 <div class="cell val row">Yes</div>382 </div>383 <div class="view-details">384 View Details385 <svg width="46" height="46" viewBox="0 0 24 24">386 <path d="M9 5l7 7-7 7" stroke="#2e7be8" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>387 </svg>388 </div>389 </div>390 391 <!-- Bottom Buy Bar -->392 <div class="bottom-bar">393 <div class="cart-mini">394 <svg width="72" height="72" viewBox="0 0 24 24">395 <path d="M4 6h2l3 9h8l3-7H7" stroke="#444" stroke-width="2" fill="none"/>396 <circle cx="10" cy="20" r="2" fill="#444"/>397 <circle cx="18" cy="20" r="2" fill="#444"/>398 </svg>399 </div>400 <div class="buy-btn">Buy Now</div>401 </div>402 403</div>404</body>405</html>