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>Details Screen Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 color: #222;16 }17 18 /* Status bar */19 .statusbar {20 height: 110px;21 background: #2D2D2D;22 color: #fff;23 display: flex;24 align-items: center;25 padding: 0 32px;26 box-sizing: border-box;27 font-weight: 600;28 }29 .statusbar .time { font-size: 44px; }30 .status-icons { margin-left: auto; display: flex; align-items: center; gap: 22px; opacity: 0.9; }31 .dot { width: 10px; height: 10px; background: #fff; border-radius: 50%; opacity: 0.7; }32 33 /* App bar */34 .appbar {35 height: 116px;36 background: #2D2D2D;37 display: flex;38 align-items: center;39 padding: 0 28px 0 20px;40 box-sizing: border-box;41 color: #fff;42 border-bottom: 1px solid rgba(0,0,0,0.3);43 }44 .appbar .title {45 font-size: 56px;46 font-weight: 700;47 margin-left: 12px;48 }49 .appbar .actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }50 51 /* Content area */52 .content {53 position: absolute;54 top: 226px; /* statusbar + appbar */55 left: 0;56 right: 0;57 bottom: 230px; /* space above sticky bar */58 overflow: hidden;59 }60 .scroll {61 height: 100%;62 overflow-y: auto;63 padding: 26px 32px 140px;64 box-sizing: border-box;65 background: #fff;66 }67 68 .select {69 height: 120px;70 border: 2px solid #E0E0E0;71 border-radius: 18px;72 padding: 0 26px;73 display: flex;74 align-items: center;75 font-size: 42px;76 margin-bottom: 22px;77 box-sizing: border-box;78 justify-content: space-between;79 }80 .select .label { color: #222; }81 .info-row {82 display: flex;83 gap: 24px;84 padding: 26px 10px;85 border-bottom: 1px solid #EFEFEF;86 }87 .icon-box {88 width: 98px;89 height: 98px;90 border: 2px solid #E6E6E6;91 border-radius: 16px;92 display: flex;93 align-items: center;94 justify-content: center;95 flex-shrink: 0;96 }97 .info-main { flex: 1; }98 .info-title {99 font-size: 42px;100 font-weight: 700;101 margin-top: 6px;102 }103 .info-sub {104 font-size: 32px;105 color: #666;106 margin-top: 8px;107 line-height: 1.35;108 }109 .info-side {110 width: 160px;111 display: flex;112 justify-content: flex-end;113 align-items: flex-start;114 padding-top: 10px;115 box-sizing: border-box;116 color: #2D69D9;117 font-size: 34px;118 font-weight: 600;119 }120 121 /* Section headers */122 .section-divider {123 background: #F1F1F1;124 color: #9E9E9E;125 font-size: 34px;126 letter-spacing: 2px;127 font-weight: 800;128 padding: 20px 32px;129 text-transform: uppercase;130 margin-top: 18px;131 }132 133 .card {134 background: #fff;135 border: 2px solid #EFEFEF;136 border-radius: 18px;137 padding: 24px;138 margin: 16px 0 22px;139 box-sizing: border-box;140 }141 .card-header {142 display: flex;143 align-items: center;144 justify-content: space-between;145 }146 .card-title {147 font-size: 44px;148 font-weight: 700;149 }150 .caret {151 width: 40px;152 height: 40px;153 }154 .card-text {155 color: #444;156 font-size: 34px;157 line-height: 1.5;158 margin-top: 14px;159 }160 161 /* Customers also viewed */162 .carousel {163 display: flex;164 gap: 26px;165 padding: 10px 0 26px;166 }167 .product {168 width: 320px;169 background: #fff;170 border-radius: 18px;171 padding: 14px;172 border: 2px solid #EFEFEF;173 box-sizing: border-box;174 }175 .img {176 width: 100%;177 height: 200px;178 background: #E0E0E0;179 border: 1px solid #BDBDBD;180 color: #757575;181 display: flex;182 align-items: center;183 justify-content: center;184 font-size: 26px;185 border-radius: 12px;186 }187 188 /* Sticky bottom bar */189 .sticky {190 position: absolute;191 left: 40px;192 right: 40px;193 bottom: 120px;194 height: 160px;195 background: #FFFFFF;196 border-radius: 22px;197 box-shadow: 0 12px 28px rgba(0,0,0,0.2);198 display: flex;199 align-items: center;200 padding: 16px;201 box-sizing: border-box;202 gap: 18px;203 }204 .mini-btn {205 width: 148px;206 height: 128px;207 border: 2px solid #EFEFEF;208 border-radius: 18px;209 display: flex;210 align-items: center;211 justify-content: center;212 background: #fff;213 }214 .cta {215 flex: 1;216 height: 128px;217 background: #F59C27;218 border-radius: 18px;219 display: flex;220 align-items: center;221 justify-content: center;222 gap: 16px;223 color: #fff;224 font-weight: 800;225 font-size: 44px;226 letter-spacing: 1px;227 }228 229 /* Bottom system bar */230 .system-bar {231 position: absolute;232 bottom: 0;233 left: 0;234 right: 0;235 height: 64px;236 background: #000;237 display: flex;238 align-items: center;239 justify-content: center;240 }241 .gesture-pill {242 width: 220px;243 height: 10px;244 background: #E0E0E0;245 border-radius: 6px;246 opacity: 0.9;247 }248 249 /* Helper */250 .muted { color: #777; }251</style>252</head>253<body>254<div id="render-target">255 256 <!-- Status bar -->257 <div class="statusbar">258 <div class="time">1:28</div>259 <div class="status-icons">260 <!-- simple placeholding icons -->261 <svg width="40" height="40" viewBox="0 0 24 24" fill="#fff" opacity="0.85"><circle cx="12" cy="12" r="10"/></svg>262 <div class="dot"></div>263 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">264 <path d="M3 8h18v10H3z"/><path d="M7 8V6a5 5 0 0 1 10 0v2"/>265 </svg>266 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M21 8H3v10h18V8z"/></svg>267 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff"><path d="M17 4h-3l-1 2H6v14h12z"/></svg>268 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">269 <path d="M18 8a6 6 0 1 0-6 6v4l4-4h2a6 6 0 0 0 0-12z"/>270 </svg>271 <svg width="50" height="26" viewBox="0 0 50 26"><rect x="1" y="1" width="42" height="24" rx="6" stroke="#fff" fill="none" stroke-width="2"/><rect x="45" y="8" width="4" height="10" rx="2" fill="#fff"/></svg>272 </div>273 </div>274 275 <!-- App bar -->276 <div class="appbar">277 <svg width="64" height="64" viewBox="0 0 24 24" stroke="#fff" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round">278 <path d="M15 18l-6-6 6-6"/>279 </svg>280 <div class="title">Details</div>281 <div class="actions">282 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">283 <circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/>284 </svg>285 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">286 <path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/>287 </svg>288 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff">289 <circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/>290 </svg>291 </div>292 </div>293 294 <!-- Content -->295 <div class="content">296 <div class="scroll">297 298 <!-- Selects -->299 <div class="select">300 <div class="label">Giza</div>301 <svg class="caret" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">302 <path d="M6 9l6 6 6-6"/>303 </svg>304 </div>305 <div class="select">306 <div class="label">6th of October</div>307 <svg class="caret" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">308 <path d="M6 9l6 6 6-6"/>309 </svg>310 </div>311 312 <!-- Door Delivery -->313 <div class="info-row">314 <div class="icon-box">315 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.8">316 <rect x="3" y="6" width="12" height="9" rx="1.5"/>317 <path d="M15 10h3l3 3v2h-6z"/>318 <circle cx="7" cy="17" r="1.5"/><circle cx="18" cy="17" r="1.5"/>319 </svg>320 </div>321 <div class="info-main">322 <div class="info-title">Door Delivery</div>323 <div class="info-sub">Delivery Fees EGP 35.00</div>324 <div class="info-sub">Ready for delivery between 8 Jan & 9 Jan when you order within next 13hrs 43mins</div>325 </div>326 <div class="info-side">Details</div>327 </div>328 329 <!-- Pickup Station -->330 <div class="info-row">331 <div class="icon-box">332 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.8">333 <rect x="4" y="4" width="16" height="10" rx="1.5"/>334 <path d="M6 14v4h12v-4"/>335 <path d="M10 8h4"/>336 </svg>337 </div>338 <div class="info-main">339 <div class="info-title">Pickup Station</div>340 <div class="info-sub">Delivery Fees EGP 20.00</div>341 <div class="info-sub">Ready for pickup between 8 Jan & 9 Jan when you order within next 13hrs 43mins</div>342 </div>343 <div class="info-side">Details</div>344 </div>345 346 <!-- Return Policy -->347 <div class="info-row">348 <div class="icon-box">349 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.8">350 <path d="M12 5v4l3-3-3-1z"/>351 <circle cx="12" cy="12" r="8"/>352 </svg>353 </div>354 <div class="info-main">355 <div class="info-title">Return Policy</div>356 <div class="info-sub">357 Free return within the legal return period from 14 to 30 days, and if they meet the terms & conditions,358 with the need to report any apparent defect within 48 hours. For more details about return policy.359 </div>360 </div>361 </div>362 363 <!-- Warranty -->364 <div class="info-row" style="border-bottom:none;">365 <div class="icon-box">366 <svg width="52" height="52" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="1.6">367 <path d="M12 3l7 3v6c0 5-3.5 7.5-7 9-3.5-1.5-7-4-7-9V6l7-3z"/>368 <path d="M12 8l1.5 3h3L14 13l1 3-3-2-3 2 1-3-2.5-2 3 0z"/>369 </svg>370 </div>371 <div class="info-main">372 <div class="info-title">Warranty</div>373 <div class="info-sub">1 Year.</div>374 </div>375 </div>376 377 <!-- Product Details -->378 <div class="section-divider">Product Details</div>379 380 <div class="card">381 <div class="card-header">382 <div class="card-title">Description</div>383 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">384 <path d="M9 6l6 6-6 6"/>385 </svg>386 </div>387 <div class="card-text">388 Size and Weight: Height: 0.44 inch (1.13 cm)<br>389 Width: 11.97 inches (30.41 cm)<br>390 Depth: 8.46 inches (21.5 cm)<br>391 Weight: 2.7 pounds (1.24 kg)…392 </div>393 </div>394 395 <div class="section-divider">Customers Also Viewed</div>396 397 <div class="carousel">398 <div class="product">399 <div class="img">[IMG: Laptop Product]</div>400 </div>401 <div class="product">402 <div class="img">[IMG: Laptop Product]</div>403 </div>404 <div class="product">405 <div class="img">[IMG: Laptop Product]</div>406 </div>407 </div>408 409 </div>410 </div>411 412 <!-- Sticky Bottom Bar -->413 <div class="sticky">414 <div class="mini-btn" title="Home">415 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">416 <path d="M3 12l9-7 9 7"/><path d="M5 10v10h14V10"/>417 </svg>418 </div>419 <div class="mini-btn" title="Call">420 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">421 <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.63 2.63a2 2 0 0 1-.45 2.11l-1.27 1.27a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.3 1.73.51 2.63.63A2 2 0 0 1 22 16.92z"/>422 </svg>423 </div>424 <div class="mini-btn" title="Cart">425 <svg width="46" height="46" viewBox="0 0 24 24" fill="none" stroke="#555" stroke-width="2">426 <path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1.4"/><circle cx="17" cy="20" r="1.4"/>427 </svg>428 </div>429 <div class="cta">430 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">431 <path d="M6 6h15l-1.5 9h-12z"/><circle cx="9" cy="20" r="1.2"/><circle cx="17" cy="20" r="1.2"/>432 </svg>433 <div>ADD TO CART</div>434 </div>435 </div>436 437 <!-- System bar -->438 <div class="system-bar">439 <div class="gesture-pill"></div>440 </div>441 442</div>443</body>444</html>