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>Product Details UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #FFFFFF;15 }16 17 /* Top gradient header */18 .header {19 position: absolute;20 top: 0;21 left: 0;22 width: 1080px;23 height: 300px;24 background: linear-gradient(90deg, #7DD3CF, #C7F0E1);25 }26 27 .status-top {28 display: flex;29 align-items: center;30 justify-content: space-between;31 padding: 26px 40px 0 40px;32 color: #0a0a0a;33 font-size: 38px;34 opacity: 0.9;35 }36 .status-icons {37 display: flex;38 align-items: center;39 gap: 24px;40 }41 .dot { width: 10px; height: 10px; background: #2c2c2c; border-radius: 50%; display: inline-block; }42 43 /* Search row */44 .search-row {45 display: flex;46 align-items: center;47 gap: 28px;48 padding: 28px 36px 0 24px;49 }50 .icon-btn {51 width: 84px;52 height: 84px;53 border-radius: 42px;54 display: flex;55 align-items: center;56 justify-content: center;57 }58 .icon-btn svg { width: 44px; height: 44px; stroke: #1f2937; }59 .search-box {60 flex: 1;61 height: 96px;62 background: #FFFFFF;63 border: 1px solid rgba(0,0,0,0.12);64 border-radius: 48px;65 box-shadow: 0 2px 0 rgba(0,0,0,0.08);66 display: flex;67 align-items: center;68 padding: 0 36px;69 gap: 24px;70 }71 .search-input {72 flex: 1;73 font-size: 40px;74 color: #111827;75 opacity: 0.9;76 white-space: nowrap;77 overflow: hidden;78 text-overflow: ellipsis;79 }80 .scan-btn {81 width: 72px;82 height: 72px;83 border-radius: 36px;84 display: flex;85 align-items: center;86 justify-content: center;87 }88 .scan-btn svg { width: 42px; height: 42px; fill: none; stroke: #374151; }89 90 /* Tabs */91 .tabs {92 position: absolute;93 left: 0;94 right: 0;95 top: 300px;96 height: 120px;97 background: linear-gradient(90deg, #F4FFFB, #E9FFF6);98 display: flex;99 align-items: flex-end;100 border-bottom: 1px solid #E5E7EB;101 }102 .tab {103 flex: 1;104 text-align: center;105 padding-bottom: 26px;106 font-size: 44px;107 color: #6B7280;108 position: relative;109 }110 .tab.active {111 color: #D97706;112 font-weight: 700;113 }114 .tab.active::after {115 content: "";116 position: absolute;117 bottom: 0;118 left: 50%;119 transform: translateX(-50%);120 width: 140px;121 height: 10px;122 background: #EB6D1D;123 border-radius: 5px;124 }125 .tabs-right {126 width: 140px;127 display: flex;128 align-items: center;129 justify-content: center;130 padding-bottom: 26px;131 }132 .tabs-right svg { width: 40px; height: 40px; stroke: #111; }133 134 /* Content */135 .content {136 position: absolute;137 top: 420px;138 left: 0;139 right: 0;140 bottom: 240px;141 overflow: hidden;142 }143 .scroll {144 height: 100%;145 overflow-y: auto;146 padding: 24px 48px 240px 48px;147 }148 .label {149 font-size: 46px;150 color: #111827;151 font-weight: 700;152 margin-top: 32px;153 }154 .value {155 font-size: 44px;156 color: #374151;157 margin-top: 10px;158 margin-bottom: 26px;159 }160 .section-title {161 font-size: 56px;162 font-weight: 800;163 color: #111827;164 margin-top: 36px;165 margin-bottom: 12px;166 }167 ul.points {168 padding-left: 48px;169 margin: 0;170 }171 ul.points li {172 font-size: 44px;173 color: #374151;174 margin: 26px 0;175 }176 177 .see-less {178 color: #1E88E5;179 font-size: 46px;180 margin-top: 22px;181 display: inline-flex;182 align-items: center;183 gap: 14px;184 }185 .see-less svg { width: 34px; height: 34px; stroke: #1E88E5; }186 187 /* Bottom card above nav */188 .bottom-card {189 position: absolute;190 left: 0;191 right: 0;192 bottom: 190px;193 height: 180px;194 background: #FFFFFF;195 border-top: 1px solid #E5E7EB;196 border-bottom: 1px solid #E5E7EB;197 display: flex;198 align-items: center;199 padding: 0 24px;200 gap: 24px;201 }202 .img-ph {203 width: 160px;204 height: 140px;205 background: #E0E0E0;206 border: 1px solid #BDBDBD;207 display: flex;208 align-items: center;209 justify-content: center;210 color: #757575;211 font-size: 32px;212 }213 .card-text {214 font-size: 40px;215 color: #374151;216 line-height: 1.25;217 }218 219 /* Bottom navigation */220 .nav {221 position: absolute;222 left: 0;223 right: 0;224 bottom: 60px;225 height: 130px;226 background: #FFFFFF;227 border-top: 1px solid #E5E7EB;228 display: flex;229 align-items: center;230 justify-content: space-around;231 }232 .nav-item {233 width: 180px;234 text-align: center;235 color: #6B7280;236 font-size: 36px;237 }238 .nav-item.active { color: #0EA5E9; }239 .nav-item svg { width: 52px; height: 52px; stroke: #2E2E2E; margin-bottom: 8px; }240 241 /* Gesture bar */242 .gesture {243 position: absolute;244 bottom: 16px;245 left: 50%;246 transform: translateX(-50%);247 width: 320px;248 height: 16px;249 background: #AFAFAF;250 border-radius: 8px;251 opacity: 0.8;252 }253</style>254</head>255<body>256<div id="render-target">257 <!-- Gradient header -->258 <div class="header">259 <div class="status-top">260 <div>7:28</div>261 <div class="status-icons">262 <span class="dot"></span>263 <span class="dot"></span>264 <span class="dot"></span>265 <span class="dot"></span>266 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">267 <path d="M3 18h18M3 6h18M3 12h18"></path>268 </svg>269 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">270 <path d="M3 18h18"></path>271 <path d="M7 18V6l10 6-10 6z"></path>272 </svg>273 </div>274 </div>275 276 <div class="search-row">277 <div class="icon-btn">278 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">279 <path d="M15 6 L9 12 L15 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>280 </svg>281 </div>282 <div class="search-box">283 <svg viewBox="0 0 24 24" fill="none" stroke="#6B7280">284 <circle cx="11" cy="11" r="7" stroke-width="2"></circle>285 <path d="M20 20 L16.5 16.5" stroke-width="2" stroke-linecap="round"></path>286 </svg>287 <div class="search-input">formal coat for women</div>288 <div class="scan-btn">289 <svg viewBox="0 0 24 24">290 <rect x="5" y="5" width="14" height="14" rx="2"></rect>291 <path d="M2 7h2M2 17h2M20 7h2M20 17h2" stroke-linecap="round"></path>292 </svg>293 </div>294 </div>295 </div>296 </div>297 298 <!-- Tabs -->299 <div class="tabs">300 <div class="tab active">Details</div>301 <div class="tab">Questions</div>302 <div class="tab">Reviews</div>303 <div class="tabs-right">304 <svg viewBox="0 0 24 24" fill="none">305 <path d="M12 8 L7 13 H17 Z" stroke-width="2" stroke-linejoin="round"></path>306 </svg>307 </div>308 </div>309 310 <!-- Content area -->311 <div class="content">312 <div class="scroll">313 <div class="label">Closure Type</div>314 <div class="value">Button</div>315 316 <div class="label">Pattern</div>317 <div class="value">All Over Print</div>318 319 <div class="label">Country of Origin</div>320 <div class="value">India</div>321 322 <div class="section-title">About this item</div>323 <ul class="points">324 <li>M: Chest: 38, Shoulder: 15, Length: 23.5, Waist: 34, Sleeves: 22</li>325 <li>High quality Imported fabric, 80% Polyester, soft and skin-friendly.</li>326 <li>Care Instructions: This casual blazer women is easy to wash in washing machine or by hand wash</li>327 <li>Fit Type: This smart casual blazer for women is Regular Size</li>328 <li>Best as Formal Wear, Lounge Wear, Smart Casual Wear, College Students, Party and Events</li>329 </ul>330 331 <div class="label">Item Weight</div>332 <div class="value">300 g</div>333 334 <div class="label">Item Dimensions LxWxH</div>335 <div class="value">20 x 20 x 3 Centimeters</div>336 337 <div class="label">Net Quantity</div>338 <div class="value">1.00 count</div>339 340 <div class="see-less">341 <span>See less</span>342 <svg viewBox="0 0 24 24" fill="none">343 <path d="M7 15 L12 10 L17 15" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>344 </svg>345 </div>346 </div>347 </div>348 349 <!-- Thin card above navigation -->350 <div class="bottom-card">351 <div class="img-ph">[IMG: Product Thumbnail]</div>352 <div class="card-text">Similar items you may like • Explore more styles and colors</div>353 </div>354 355 <!-- Bottom Navigation -->356 <div class="nav">357 <div class="nav-item active">358 <svg viewBox="0 0 24 24" fill="none">359 <path d="M3 11 L12 4 L21 11" stroke-width="2" stroke-linecap="round"></path>360 <path d="M5 10 V20 H19 V10" stroke-width="2"></path>361 </svg>362 <div>Home</div>363 </div>364 <div class="nav-item">365 <svg viewBox="0 0 24 24" fill="none">366 <circle cx="12" cy="8" r="4" stroke-width="2"></circle>367 <path d="M4 21 C4 16 8 14 12 14 C16 14 20 16 20 21" stroke-width="2" stroke-linecap="round"></path>368 </svg>369 <div>You</div>370 </div>371 <div class="nav-item">372 <svg viewBox="0 0 24 24" fill="none">373 <path d="M4 12a8 8 0 0 1 12.5-6M20 12a8 8 0 0 1-12.5 6" stroke-width="2" stroke-linecap="round"></path>374 <path d="M8 4v4H4" stroke-width="2" stroke-linecap="round"></path>375 <path d="M16 20v-4h4" stroke-width="2" stroke-linecap="round"></path>376 </svg>377 <div>More</div>378 </div>379 <div class="nav-item">380 <svg viewBox="0 0 24 24" fill="none">381 <path d="M6 6 H21 L19 13 H8 L6 6 Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>382 <circle cx="9" cy="18" r="2" stroke-width="2"></circle>383 <circle cx="17" cy="18" r="2" stroke-width="2"></circle>384 </svg>385 <div>Cart</div>386 </div>387 <div class="nav-item">388 <svg viewBox="0 0 24 24" fill="none">389 <path d="M3 6 H21" stroke-width="2" stroke-linecap="round"></path>390 <path d="M3 12 H21" stroke-width="2" stroke-linecap="round"></path>391 <path d="M3 18 H21" stroke-width="2" stroke-linecap="round"></path>392 </svg>393 <div>Menu</div>394 </div>395 </div>396 397 <div class="gesture"></div>398</div>399</body>400</html>