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=1440, initial-scale=1.0">6<title>Product Details - UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; color: #333; }9 #render-target {10 position: relative;11 width: 1440px;12 height: 3120px;13 overflow: hidden;14 background: #FFFFFF;15 border-radius: 0;16 }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #E0E0E0;22 display: flex;23 align-items: center;24 padding: 0 36px;25 color: #fff;26 font-weight: 600;27 letter-spacing: 1px;28 font-size: 38px;29 }30 .status-icons {31 margin-left: auto;32 display: flex;33 gap: 28px;34 align-items: center;35 }36 .header {37 height: 180px;38 background: #fff;39 display: flex;40 align-items: center;41 padding: 0 36px;42 border-bottom: 1px solid #EEE;43 }44 .header .title-space {45 flex: 1;46 }47 .icon-btn {48 width: 84px;49 height: 84px;50 display: flex;51 align-items: center;52 justify-content: center;53 margin-left: 18px;54 }55 .back-btn { margin-right: 18px; }56 57 /* Price carousel stub and total section */58 .combo-area {59 background: #F2F6F9;60 padding: 36px;61 border-bottom: 16px solid #F0F0F0;62 }63 .card-row {64 display: flex;65 gap: 36px;66 padding: 12px 0 24px;67 }68 .price-card {69 flex: 1;70 min-width: 0;71 background: #fff;72 border: 1px solid #E5E5E5;73 border-radius: 12px;74 height: 220px;75 padding: 24px;76 position: relative;77 }78 .price-chip {79 display: inline-block;80 background: #FFEB3B;81 padding: 12px 18px;82 border-radius: 8px;83 font-weight: 800;84 font-size: 40px;85 }86 .strike {87 color: #9E9E9E; text-decoration: line-through; margin-left: 18px; font-size: 34px;88 }89 .offer { color: #D32F2F; font-size: 34px; margin-left: 10px; }90 .progress {91 height: 12px;92 background: #E6ECF2;93 border-radius: 8px;94 overflow: hidden;95 margin: 24px 6px 36px;96 }97 .progress span { display: block; height: 100%; width: 40%; background: #1E88E5; }98 99 .total-select {100 background: #E9EFF3;101 border: 1px solid #E0E6EA;102 border-radius: 16px;103 padding: 42px 36px;104 display: flex;105 align-items: center;106 gap: 36px;107 }108 .total-text {109 font-size: 56px;110 font-weight: 800;111 color: #455A64;112 }113 .select-btn {114 margin-left: auto;115 background: #0B71B9;116 color: #fff;117 font-weight: 800;118 letter-spacing: 1px;119 font-size: 48px;120 padding: 46px 72px;121 border-radius: 22px;122 border: none;123 box-shadow: inset 0 -4px 0 rgba(0,0,0,0.08);124 cursor: default;125 }126 127 /* Tabs */128 .tabs {129 display: flex;130 gap: 48px;131 align-items: flex-end;132 padding: 30px 36px 0;133 border-bottom: 2px solid #EAEAEA;134 position: relative;135 }136 .tab {137 padding: 24px 12px;138 font-size: 54px;139 font-weight: 800;140 color: #757575;141 }142 .tab.active { color: #0B71B9; position: relative; }143 .tab-underline {144 position: absolute;145 left: 36px;146 bottom: -2px;147 height: 8px;148 width: 480px;149 background: #0B71B9;150 border-radius: 8px;151 }152 153 /* Content */154 .content {155 padding: 48px 36px 0;156 }157 .section-title {158 font-size: 52px;159 font-weight: 800;160 margin: 24px 0;161 color: #37474F;162 }163 .paragraph {164 font-size: 46px;165 line-height: 1.45;166 color: #616161;167 margin: 12px 0 36px;168 max-width: 1300px;169 }170 .divRow {171 display: flex;172 align-items: center;173 gap: 36px;174 margin: 36px 0;175 }176 .hr {177 flex: 1;178 height: 2px;179 background: #E5E5E5;180 }181 182 .adv-row {183 display: grid;184 grid-template-columns: 1fr 1fr;185 gap: 36px 24px;186 margin: 36px 0 48px;187 align-items: start;188 }189 .adv {190 display: grid;191 grid-template-columns: 120px 1fr;192 gap: 24px;193 }194 .adv .adv-title {195 font-size: 48px;196 font-weight: 800;197 color: #424242;198 margin-bottom: 6px;199 }200 .adv .adv-desc {201 font-size: 40px;202 color: #616161;203 }204 .divider-big { height: 24px; background: #F0F0F0; margin: 18px -36px; }205 206 /* Similar products */207 .similar-title {208 font-size: 54px;209 font-weight: 900;210 color: #37474F;211 margin: 54px 0 24px;212 }213 .product-grid {214 display: grid;215 grid-template-columns: 1fr 1fr;216 gap: 36px;217 }218 .product-card {219 border: 1px solid #E5E5E5;220 border-radius: 16px;221 background: #fff;222 padding: 18px;223 position: relative;224 }225 .badge {226 position: absolute;227 top: 18px;228 left: 18px;229 background: #0B71B9;230 color: #fff;231 font-weight: 800;232 font-size: 32px;233 padding: 10px 20px;234 border-radius: 10px;235 }236 .img-ph {237 width: 100%;238 height: 520px;239 background: #E0E0E0;240 border: 1px solid #BDBDBD;241 display: flex;242 align-items: center;243 justify-content: center;244 color: #757575;245 font-size: 40px;246 border-radius: 12px;247 }248 .card-footer {249 margin-top: 18px;250 display: flex;251 justify-content: space-between;252 align-items: center;253 }254 .rating {255 display: inline-flex;256 align-items: center;257 gap: 10px;258 padding: 10px 18px;259 border: 2px solid #E0E0E0;260 border-radius: 12px;261 font-weight: 700;262 color: #1976D2;263 background: #fff;264 font-size: 34px;265 }266 .fav-icon {267 width: 88px;268 height: 88px;269 border: 2px solid #E0E0E0;270 border-radius: 50%;271 display: flex;272 align-items: center;273 justify-content: center;274 }275 276 /* Sticky Add To Cart */277 .cta-bar {278 position: absolute;279 left: 24px;280 right: 24px;281 bottom: 96px;282 background: #FFFFFF;283 border-radius: 22px;284 box-shadow: 0 14px 30px rgba(0,0,0,0.08), 0 3px 8px rgba(0,0,0,0.06);285 display: flex;286 align-items: center;287 padding: 18px;288 gap: 18px;289 }290 .cta-fav {291 width: 240px;292 height: 140px;293 border: 4px solid #E8EEF5;294 border-radius: 20px;295 display: flex; align-items: center; justify-content: center;296 color: #0B71B9;297 background: #fff;298 }299 .cta-main {300 flex: 1;301 height: 140px;302 background: #FFEB3B;303 border-radius: 20px;304 display: flex; align-items: center; justify-content: center;305 color: #1A1A1A;306 font-size: 56px;307 font-weight: 900;308 letter-spacing: 2px;309 gap: 20px;310 border: 2px solid #F4D700;311 }312 313 /* Small helper SVG color */314 svg { display: block; }315</style>316</head>317<body>318<div id="render-target">319 320 <!-- Status bar -->321 <div class="status-bar">322 <div>1:24</div>323 <div class="status-icons">324 <!-- simple circles to imply status icons -->325 <svg width="24" height="24"><circle cx="12" cy="12" r="6" fill="#fff" opacity="0.8"/></svg>326 <svg width="24" height="24"><circle cx="12" cy="12" r="6" fill="#fff" opacity="0.8"/></svg>327 <svg width="24" height="24"><circle cx="12" cy="12" r="6" fill="#fff" opacity="0.8"/></svg>328 <svg width="34" height="24">329 <rect x="2" y="6" width="24" height="12" rx="2" fill="#fff"/>330 <rect x="28" y="9" width="4" height="6" fill="#fff" opacity="0.6"/>331 </svg>332 </div>333 </div>334 335 <!-- Header -->336 <div class="header">337 <div class="back-btn icon-btn">338 <!-- Back arrow -->339 <svg width="64" height="64" viewBox="0 0 24 24">340 <path d="M14 6l-6 6 6 6" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>341 </svg>342 </div>343 <div class="title-space"></div>344 <div class="icon-btn">345 <!-- Search -->346 <svg width="64" height="64" viewBox="0 0 24 24">347 <circle cx="11" cy="11" r="6.5" stroke="#000" stroke-width="2" fill="none"/>348 <path d="M16 16l5 5" stroke="#000" stroke-width="2" stroke-linecap="round"/>349 </svg>350 </div>351 <div class="icon-btn">352 <!-- Heart -->353 <svg width="64" height="64" viewBox="0 0 24 24">354 <path d="M12 20s-7-4.4-7-9.5S9 3 12 7c3-4 7-1.5 7 3.5S12 20 12 20z" stroke="#000" stroke-width="2" fill="none" stroke-linejoin="round"/>355 </svg>356 </div>357 <div class="icon-btn">358 <!-- Cart -->359 <svg width="64" height="64" viewBox="0 0 24 24">360 <circle cx="9" cy="20" r="1.5" fill="#000"/>361 <circle cx="17" cy="20" r="1.5" fill="#000"/>362 <path d="M3 4h2l2 12h10l2-8H7" stroke="#000" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>363 </svg>364 </div>365 </div>366 367 <!-- Combo area with cards and select button -->368 <div class="combo-area">369 <div class="card-row">370 <div class="price-card">371 <div class="price-chip">₹899</div>372 <span class="strike">₹1,199</span>373 <span class="offer">(+1 Offer)</span>374 </div>375 <div class="price-card"></div>376 <div class="price-card">377 <div class="price-chip">₹199</div>378 <span class="strike">₹399</span>379 <span class="offer">(+1 Offer)</span>380 </div>381 </div>382 <div class="progress"><span></span></div>383 384 <div class="total-select">385 <div class="total-text">Total Price: ₹1,796</div>386 <button class="select-btn">SELECT PRODUCTS</button>387 </div>388 </div>389 390 <!-- Tabs -->391 <div class="tabs">392 <div class="tab active">PRODUCT DETAILS</div>393 <div class="tab">TECHNICAL INFORMATION</div>394 <div class="tab-underline"></div>395 </div>396 397 <!-- Content -->398 <div class="content">399 <div class="section-title">Made For</div>400 <div class="paragraph">401 This is a lightweight men's running shoes with cushioning for running up to 10km per week.402 </div>403 404 <div class="divRow">405 <div class="section-title" style="margin:0">Advantages</div>406 <div class="hr"></div>407 </div>408 409 <div class="adv-row">410 <div class="adv">411 <!-- simple feather-like icon -->412 <svg width="120" height="120" viewBox="0 0 24 24">413 <path d="M3 15c6-7 12-7 16-4l-8 8-8 1 0-5z" stroke="#000" fill="none" stroke-width="1.5"/>414 <path d="M9 14l2 2" stroke="#000" stroke-width="1.5"/>415 </svg>416 <div>417 <div class="adv-title">lightweight</div>418 <div class="adv-desc">Very lightweight shoes: 180g in size 9.</div>419 </div>420 </div>421 422 <div class="adv">423 <!-- pillow icon -->424 <svg width="120" height="120" viewBox="0 0 24 24">425 <rect x="4" y="6" width="16" height="12" rx="4" stroke="#0B71B9" fill="none" stroke-width="1.8"/>426 <path d="M12 6v12" stroke="#0B71B9" stroke-width="1.8"/>427 </svg>428 <div>429 <div class="adv-title">fitting comfort</div>430 <div class="adv-desc">The shoe has first-level comfort for running beginners.</div>431 </div>432 </div>433 </div>434 435 <div class="divider-big"></div>436 437 <div class="similar-title">SIMILAR PRODUCTS</div>438 439 <div class="product-grid">440 <div class="product-card">441 <div class="badge">BESTSELLER</div>442 <div class="img-ph">[IMG: Black running shoe]</div>443 <div class="card-footer">444 <div class="rating">445 <!-- star -->446 <svg width="28" height="28" viewBox="0 0 24 24">447 <path d="M12 3l2.8 5.6L21 10l-4.5 4.2L17 21l-5-2.6L7 21l.5-6.8L3 10l6.2-1.4L12 3z" fill="#FFC107"/>448 </svg>449 4.5450 </div>451 <div class="fav-icon">452 <svg width="44" height="44" viewBox="0 0 24 24">453 <path d="M12 20s-7-4.4-7-9.5S9 3 12 7c3-4 7-1.5 7 3.5S12 20 12 20z" stroke="#0B71B9" stroke-width="2" fill="none" stroke-linejoin="round"/>454 </svg>455 </div>456 </div>457 </div>458 459 <div class="product-card">460 <div class="img-ph">[IMG: Navy running shoes pair]</div>461 <div class="card-footer">462 <div class="rating">463 <svg width="28" height="28" viewBox="0 0 24 24">464 <path d="M12 3l2.8 5.6L21 10l-4.5 4.2L17 21l-5-2.6L7 21l.5-6.8L3 10l6.2-1.4L12 3z" fill="#FFC107"/>465 </svg>466 4.5467 </div>468 <div class="fav-icon">469 <svg width="44" height="44" viewBox="0 0 24 24">470 <path d="M12 20s-7-4.4-7-9.5S9 3 12 7c3-4 7-1.5 7 3.5S12 20 12 20z" stroke="#0B71B9" stroke-width="2" fill="none" stroke-linejoin="round"/>471 </svg>472 </div>473 </div>474 </div>475 </div>476 477 </div>478 479 <!-- Sticky Add To Cart -->480 <div class="cta-bar">481 <div class="cta-fav">482 <svg width="64" height="64" viewBox="0 0 24 24">483 <path d="M12 21s-7-4.4-7-9.5S9 4 12 8c3-4 7-1.5 7 3.5S12 21 12 21z" stroke="#0B71B9" stroke-width="2" fill="none" stroke-linejoin="round"/>484 <path d="M7 7l3 3" stroke="#0B71B9" stroke-width="2"/>485 </svg>486 </div>487 <div class="cta-main">488 <span>ADD TO CART</span>489 <svg width="56" height="56" viewBox="0 0 24 24">490 <circle cx="9" cy="20" r="1.5" fill="#1A1A1A"/>491 <circle cx="17" cy="20" r="1.5" fill="#1A1A1A"/>492 <path d="M3 4h2l2 12h10l2-8H7" stroke="#1A1A1A" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>493 </svg>494 </div>495 </div>496 497</div>498</body>499</html>