GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>UI Render - Product Details</title>6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;12 color: #111;13 }14 #render-target {15 width: 1080px;16 height: 2400px;17 position: relative;18 overflow: hidden;19 background: #fff;20 }21 22 /* Header / Search */23 .header {24 width: 1080px;25 background: linear-gradient(180deg, #9fd9cf 0%, #e6f6f1 100%);26 padding-bottom: 24px;27 box-sizing: border-box;28 }29 .status-bar {30 height: 72px;31 padding: 0 32px;32 display: flex;33 align-items: center;34 justify-content: space-between;35 color: #222;36 font-weight: 600;37 font-size: 32px;38 }39 .status-left {40 display: flex;41 align-items: center;42 gap: 16px;43 }44 .status-right {45 display: flex;46 align-items: center;47 gap: 24px;48 }49 .status-dot {50 width: 10px;51 height: 10px;52 background: #333;53 border-radius: 50%;54 opacity: 0.9;55 }56 57 .search-row {58 display: flex;59 align-items: center;60 gap: 20px;61 padding: 18px 24px 0 24px;62 }63 .back-btn {64 width: 72px;65 height: 72px;66 display: flex;67 align-items: center;68 justify-content: center;69 }70 .search-bar {71 flex: 1;72 height: 96px;73 background: #fff;74 border-radius: 24px;75 box-shadow: 0 2px 0 rgba(0,0,0,0.08);76 border: 1px solid #dcdcdc;77 display: flex;78 align-items: center;79 padding: 0 24px;80 gap: 16px;81 box-sizing: border-box;82 }83 .search-input-text {84 font-size: 34px;85 color: #333;86 flex: 1;87 }88 .scan-btn {89 width: 72px;90 height: 72px;91 border-radius: 20px;92 border: 1px solid #cfcfcf;93 background: #fff;94 display: flex;95 align-items: center;96 justify-content: center;97 }98 99 /* Tabs */100 .tabs {101 display: flex;102 align-items: flex-end;103 gap: 40px;104 padding: 22px 24px 0 24px;105 height: 110px;106 border-bottom: 1px solid #e6e6e6;107 background: linear-gradient(180deg, #eaf8f4 0%, #ffffff 100%);108 }109 .tab {110 font-size: 36px;111 color: #666;112 padding-bottom: 22px;113 position: relative;114 }115 .tab.active {116 color: #111;117 font-weight: 600;118 }119 .tab.active::after {120 content: "";121 position: absolute;122 left: 0;123 bottom: 0;124 width: 110px;125 height: 6px;126 background: #F08804;127 border-radius: 3px;128 }129 .tabs-right {130 margin-left: auto;131 margin-right: 8px;132 display: flex;133 align-items: center;134 }135 136 /* Content */137 .content {138 padding: 24px;139 }140 .kv {141 margin-bottom: 12px;142 }143 .kv .label {144 font-weight: 700;145 font-size: 34px;146 color: #222;147 margin-bottom: 6px;148 }149 .kv .value {150 font-size: 34px;151 color: #444;152 }153 154 .section-title {155 font-size: 46px;156 font-weight: 800;157 margin: 32px 0 12px;158 }159 .bullets {160 margin: 0 0 16px 28px;161 padding: 0;162 list-style: disc;163 color: #333;164 font-size: 34px;165 line-height: 1.5;166 }167 .meta {168 margin-top: 24px;169 }170 .link {171 color: #0a84ff;172 font-size: 34px;173 font-weight: 600;174 margin-top: 8px;175 display: inline-flex;176 align-items: center;177 gap: 12px;178 }179 .chevron-up {180 width: 28px;181 height: 28px;182 }183 184 /* Recommendation Card */185 .reco-card {186 margin-top: 36px;187 border-top: 1px solid #e6e6e6;188 padding-top: 20px;189 }190 .reco {191 display: flex;192 gap: 20px;193 padding: 20px 24px;194 border-bottom: 1px solid #e6e6e6;195 }196 .thumb {197 width: 240px;198 height: 240px;199 background: #E0E0E0;200 border: 1px solid #BDBDBD;201 display: flex;202 justify-content: center;203 align-items: center;204 color: #757575;205 font-size: 28px;206 text-align: center;207 border-radius: 6px;208 }209 .reco-info {210 flex: 1;211 }212 .reco-title {213 font-size: 40px;214 font-weight: 800;215 margin-bottom: 6px;216 }217 .reco-sub {218 font-size: 32px;219 color: #666;220 margin-bottom: 10px;221 }222 .rating {223 display: flex;224 align-items: center;225 gap: 8px;226 margin: 10px 0;227 }228 .rating .stars {229 display: flex;230 gap: 4px;231 font-size: 36px;232 line-height: 1;233 }234 .rating-count {235 font-size: 30px;236 color: #777;237 margin-left: 8px;238 }239 .price-row {240 display: flex;241 align-items: center;242 gap: 14px;243 margin-top: 10px;244 }245 .price {246 font-size: 44px;247 font-weight: 800;248 color: #C62828;249 }250 .prime {251 color: #0077FF;252 font-size: 34px;253 font-weight: 700;254 display: inline-flex;255 align-items: center;256 gap: 8px;257 }258 .prime-badge {259 width: 26px;260 height: 26px;261 background: #FFC107;262 border-radius: 50%;263 display: inline-flex;264 align-items: center;265 justify-content: center;266 }267 268 /* Bottom Navigation */269 .bottom-nav {270 position: absolute;271 left: 0;272 bottom: 0;273 width: 1080px;274 height: 180px;275 border-top: 1px solid #e6e6e6;276 background: #fff;277 display: flex;278 align-items: center;279 justify-content: space-around;280 }281 .nav-item {282 width: 160px;283 display: flex;284 flex-direction: column;285 align-items: center;286 gap: 8px;287 color: #333;288 }289 .nav-label {290 font-size: 28px;291 color: #3a3a3a;292 }293 .cart-badge {294 position: absolute;295 right: -6px;296 top: -6px;297 background: #0a84ff;298 color: #fff;299 font-size: 22px;300 font-weight: 700;301 padding: 2px 8px;302 border-radius: 12px;303 }304 305 /* Home indicator */306 .home-indicator {307 position: absolute;308 bottom: 14px;309 left: 50%;310 transform: translateX(-50%);311 width: 320px;312 height: 12px;313 background: #cfcfcf;314 border-radius: 8px;315 opacity: 0.8;316 }317</style>318</head>319<body>320<div id="render-target">321 <div class="header">322 <div class="status-bar">323 <div class="status-left">324 <div>11:22</div>325 <div class="status-dot"></div>326 <div class="status-dot"></div>327 <div class="status-dot"></div>328 <div class="status-dot"></div>329 </div>330 <div class="status-right">331 <!-- Signal -->332 <svg width="38" height="38" viewBox="0 0 36 36">333 <rect x="4" y="22" width="6" height="10" fill="#333"></rect>334 <rect x="14" y="18" width="6" height="14" fill="#333" opacity="0.85"></rect>335 <rect x="24" y="12" width="6" height="20" fill="#333" opacity="0.7"></rect>336 </svg>337 <!-- WiFi -->338 <svg width="38" height="38" viewBox="0 0 36 36">339 <path d="M6 14 C12 8, 24 8, 30 14" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>340 <path d="M10 18 C14 14, 22 14, 26 18" stroke="#333" stroke-width="3" fill="none" stroke-linecap="round"></path>341 <circle cx="18" cy="24" r="3" fill="#333"></circle>342 </svg>343 <!-- Battery -->344 <svg width="44" height="38" viewBox="0 0 44 36">345 <rect x="4" y="8" width="32" height="20" rx="4" ry="4" stroke="#333" stroke-width="3" fill="none"></rect>346 <rect x="7" y="11" width="24" height="14" fill="#333"></rect>347 <rect x="38" y="14" width="4" height="8" fill="#333"></rect>348 </svg>349 </div>350 </div>351 352 <div class="search-row">353 <div class="back-btn">354 <svg width="48" height="48" viewBox="0 0 48 48">355 <path d="M30 10 L18 24 L30 38" stroke="#222" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>356 </svg>357 </div>358 <div class="search-bar">359 <svg width="44" height="44" viewBox="0 0 44 44">360 <circle cx="18" cy="18" r="12" stroke="#666" stroke-width="3" fill="none"></circle>361 <line x1="30" y1="30" x2="40" y2="40" stroke="#666" stroke-width="3" stroke-linecap="round"></line>362 </svg>363 <div class="search-input-text">formal suit for women</div>364 <div class="scan-btn">365 <svg width="40" height="40" viewBox="0 0 40 40">366 <rect x="8" y="8" width="24" height="24" rx="6" ry="6" stroke="#666" stroke-width="3" fill="none"></rect>367 <rect x="14" y="14" width="12" height="12" rx="3" ry="3" stroke="#666" stroke-width="2" fill="none" opacity="0.7"></rect>368 </svg>369 </div>370 </div>371 372 <!-- Optional spacer to align visually -->373 </div>374 375 <div class="tabs">376 <div class="tab active">Details</div>377 <div class="tab">Questions</div>378 <div class="tab">Reviews</div>379 <div class="tabs-right">380 <svg width="40" height="40" viewBox="0 0 40 40">381 <path d="M10 26 L20 16 L30 26" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>382 </svg>383 </div>384 </div>385 </div>386 387 <div class="content">388 <div class="kv">389 <div class="label">Material composition</div>390 <div class="value">80% Cotton, 20% Polyester</div>391 </div>392 <div class="kv">393 <div class="label">Style</div>394 <div class="value">Single breasted</div>395 </div>396 <div class="kv">397 <div class="label">Closure Type</div>398 <div class="value">Button</div>399 </div>400 <div class="kv">401 <div class="label">Pattern</div>402 <div class="value">Solid</div>403 </div>404 <div class="kv">405 <div class="label">Country of Origin</div>406 <div class="value">India</div>407 </div>408 409 <div class="section-title">About this Item</div>410 <ul class="bullets">411 <li>High quality Imported fabric, 80% Polyester, soft and skin-friendly.</li>412 <li>Closure: Buttoned</li>413 <li>Formal/Office, Daily life, Smart Casual, Family gathering, Dating or leisure etc.</li>414 </ul>415 416 <div class="kv meta">417 <div class="label">Item Weight</div>418 <div class="value">300 g</div>419 </div>420 <div class="kv meta">421 <div class="label">Item Dimensions LxWxH</div>422 <div class="value">20 x 20 x 3 Centimeters</div>423 </div>424 <div class="link">425 <svg class="chevron-up" viewBox="0 0 28 28">426 <path d="M6 18 L14 10 L22 18" stroke="#0a84ff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>427 </svg>428 See less429 </div>430 431 <div class="reco-card">432 <div class="reco">433 <div class="thumb">[IMG: Model wearing black blazer and trousers]</div>434 <div class="reco-info">435 <div class="reco-title">Women Blazer with Trouser Set</div>436 <div class="reco-sub">Golden Kite Women Regular Fit Two piece Suit</div>437 <div class="rating">438 <div class="stars" aria-label="rating">439 <span style="color:#FFC107;">★</span>440 <span style="color:#FFC107;">★</span>441 <span style="color:#FFC107;">★</span>442 <span style="color:#FFC107;">★</span>443 <span style="color:#ddd;">★</span>444 </div>445 <div class="rating-count">72</div>446 </div>447 <div class="price-row">448 <div class="price">₹2,199.00</div>449 <div class="prime">450 <span class="prime-badge">451 <svg width="16" height="16" viewBox="0 0 16 16">452 <path d="M3 8 L6 11 L13 4" stroke="#2e2e2e" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>453 </svg>454 </span>455 prime456 </div>457 </div>458 </div>459 </div>460 </div>461 </div>462 463 <!-- Bottom Navigation -->464 <div class="bottom-nav">465 <div class="nav-item">466 <svg width="48" height="48" viewBox="0 0 48 48">467 <path d="M8 24 L24 10 L40 24" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>468 <rect x="14" y="24" width="20" height="16" rx="3" ry="3" fill="#333"></rect>469 </svg>470 <div class="nav-label">Home</div>471 </div>472 <div class="nav-item">473 <svg width="48" height="48" viewBox="0 0 48 48">474 <circle cx="24" cy="16" r="8" fill="#333"></circle>475 <path d="M10 40 C12 30, 36 30, 38 40" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round"></path>476 </svg>477 <div class="nav-label">You</div>478 </div>479 <div class="nav-item">480 <svg width="48" height="48" viewBox="0 0 48 48">481 <path d="M24 10 A14 14 0 0 1 38 24" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round"></path>482 <path d="M24 38 A14 14 0 0 1 10 24" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round"></path>483 <path d="M38 24 L34 20" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>484 <path d="M10 24 L14 28" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>485 </svg>486 <div class="nav-label">More</div>487 </div>488 <div class="nav-item" style="position:relative;">489 <svg width="48" height="48" viewBox="0 0 48 48">490 <path d="M10 12 H16 L18 28 H36 L38 16 H20" stroke="#333" stroke-width="3.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>491 <circle cx="20" cy="36" r="3" fill="#333"></circle>492 <circle cx="34" cy="36" r="3" fill="#333"></circle>493 </svg>494 <div class="cart-badge">6</div>495 <div class="nav-label">Cart</div>496 </div>497 <div class="nav-item">498 <svg width="48" height="48" viewBox="0 0 48 48">499 <rect x="10" y="12" width="28" height="4" rx="2" fill="#333"></rect>500 <rect x="10" y="22" width="28" height="4" rx="2" fill="#333"></rect>501 <rect x="10" y="32" width="28" height="4" rx="2" fill="#333"></rect>502 </svg>503 <div class="nav-label">Menu</div>504 </div>505 </div>506 507 <div class="home-indicator"></div>508</div>509</body>510</html>