GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Detail - UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Top app bar */16 .topbar {17 position: relative;18 width: 100%;19 height: 180px;20 background: #121212;21 color: #fff;22 }23 .status-row {24 height: 78px;25 display: flex;26 align-items: center;27 padding: 0 36px;28 font-size: 34px;29 color: #eaeaea;30 }31 .status-icons {32 margin-left: auto;33 display: flex;34 gap: 22px;35 align-items: center;36 }37 .header-row {38 height: 102px;39 display: flex;40 align-items: center;41 padding: 0 36px;42 }43 .header-right {44 margin-left: auto;45 display: flex;46 gap: 40px;47 align-items: center;48 }49 .icon-btn svg { display: block; }50 51 /* Content area */52 .content {53 position: absolute;54 top: 180px;55 left: 0;56 right: 0;57 bottom: 220px; /* leave room for bottom bar */58 overflow-y: auto;59 }60 61 .product-code {62 padding: 22px 40px;63 font-size: 32px;64 color: #3c3c3c;65 }66 67 .section {68 padding: 34px 40px;69 border-top: 1px solid #e7e7e7;70 display: flex;71 align-items: center;72 justify-content: space-between;73 }74 .section-title {75 font-size: 40px;76 color: #1e1e1e;77 letter-spacing: 0.2px;78 }79 .chev {80 width: 36px;81 height: 36px;82 }83 84 .block-divider {85 height: 18px;86 background: #f5f5f5;87 border-top: 1px solid #ececec;88 border-bottom: 1px solid #ececec;89 }90 91 /* Non-returnable banner */92 .non-returnable {93 border-top: 1px solid #ededed;94 padding: 34px 40px 18px 40px;95 }96 .nr-card {97 display: flex;98 gap: 28px;99 align-items: flex-start;100 }101 .nr-title {102 font-size: 40px;103 color: #1b1b1b;104 margin-bottom: 16px;105 }106 .nr-desc {107 font-size: 32px;108 color: #6b6b6b;109 line-height: 1.35;110 max-width: 880px;111 }112 113 /* Ratings */114 .ratings-wrapper {115 padding: 28px 40px 40px 40px;116 }117 .ratings-header {118 font-size: 40px;119 color: #1e1e1e;120 margin-bottom: 22px;121 }122 .ratings-card {123 border: 1px solid #e1e1e1;124 border-radius: 14px;125 box-shadow: 0 2px 6px rgba(0,0,0,0.06);126 padding: 28px;127 display: grid;128 grid-template-columns: 420px 1px 1fr;129 align-items: start;130 }131 .v-divider {132 width: 1px;133 background: #e6e6e6;134 height: 100%;135 }136 .big-rating {137 display: flex;138 flex-direction: column;139 align-items: flex-start;140 gap: 16px;141 padding-left: 8px;142 }143 .big-score {144 display: flex;145 align-items: center;146 gap: 18px;147 }148 .big-score .num {149 font-size: 108px;150 font-weight: bold;151 color: #333;152 }153 .sub-info {154 font-size: 32px;155 color: #6f6f6f;156 }157 158 .bars {159 padding-left: 32px;160 }161 .bar-row {162 display: flex;163 align-items: center;164 gap: 18px;165 margin: 14px 0;166 font-size: 34px;167 color: #4a4a4a;168 }169 .bar {170 width: 520px;171 height: 16px;172 background: #ededed;173 border-radius: 10px;174 overflow: hidden;175 }176 .bar > span {177 display: block;178 height: 100%;179 background: #26a65b;180 width: 0%;181 }182 .bar-row.five .bar > span { width: 88%; }183 .bar-row.other .bar > span { width: 0%; background: #c9c9c9; }184 .count {185 margin-left: auto;186 color: #8c8c8c;187 }188 189 /* Bottom action bar */190 .bottom-bar {191 position: absolute;192 left: 0;193 right: 0;194 bottom: 0;195 height: 220px;196 background: #ffffff;197 border-top: 1px solid #e6e6e6;198 display: flex;199 align-items: center;200 gap: 28px;201 padding: 36px;202 }203 .heart-square {204 width: 120px;205 height: 120px;206 border: 1px solid #dcdcdc;207 border-radius: 28px;208 display: flex;209 align-items: center;210 justify-content: center;211 }212 .btn {213 height: 120px;214 border-radius: 24px;215 font-size: 44px;216 font-weight: 600;217 padding: 0 60px;218 display: flex;219 align-items: center;220 justify-content: center;221 cursor: default;222 }223 .btn-outline {224 border: 2px solid #e04b71;225 color: #e04b71;226 background: #ffffff;227 }228 .btn-solid {229 background: #e04b71;230 color: #ffffff;231 border: 2px solid #e04b71;232 margin-left: auto;233 }234 235 /* Utility */236 .muted { color: #9b9b9b; }237 238</style>239</head>240<body>241<div id="render-target">242 243 <!-- Top bar -->244 <div class="topbar">245 <div class="status-row">246 <span>4:12</span>247 <div class="status-icons">248 <!-- small status dots to hint connectivity/battery -->249 <svg width="28" height="28"><circle cx="14" cy="14" r="10" fill="#bfbfbf"/></svg>250 <svg width="28" height="28"><rect x="4" y="6" width="20" height="16" rx="3" ry="3" fill="#bfbfbf"/></svg>251 <svg width="28" height="28"><circle cx="14" cy="14" r="12" fill="none" stroke="#bfbfbf" stroke-width="3"/></svg>252 </div>253 </div>254 255 <div class="header-row">256 <!-- Back arrow -->257 <div class="icon-btn">258 <svg width="48" height="48" viewBox="0 0 48 48">259 <path d="M28 10 L16 24 L28 38" stroke="#ffffff" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>260 </svg>261 </div>262 263 <div class="header-right">264 <!-- Search -->265 <div class="icon-btn">266 <svg width="44" height="44" viewBox="0 0 44 44">267 <circle cx="18" cy="18" r="12" stroke="#ffffff" stroke-width="4" fill="none"/>268 <line x1="29" y1="29" x2="40" y2="40" stroke="#ffffff" stroke-width="4" stroke-linecap="round"/>269 </svg>270 </div>271 <!-- Heart -->272 <div class="icon-btn">273 <svg width="44" height="44" viewBox="0 0 44 44">274 <path d="M22 36 C22 36 8 28 8 18 C8 12 12 9 16 9 C19 9 21 11 22 13 C23 11 25 9 28 9 C32 9 36 12 36 18 C36 28 22 36 22 36 Z" fill="none" stroke="#ffffff" stroke-width="3"/>275 </svg>276 </div>277 <!-- Bag -->278 <div class="icon-btn">279 <svg width="44" height="44" viewBox="0 0 44 44">280 <rect x="9" y="14" width="26" height="22" rx="3" ry="3" fill="none" stroke="#ffffff" stroke-width="3"/>281 <path d="M15 14 C15 9 29 9 29 14" stroke="#ffffff" stroke-width="3" fill="none"/>282 </svg>283 </div>284 </div>285 </div>286 </div>287 288 <!-- Scrollable content -->289 <div class="content">290 <div class="product-code">• CE-LNV7-LA2Q</div>291 292 <div class="section">293 <div class="section-title">RETURN POLICY</div>294 <svg class="chev" viewBox="0 0 24 24">295 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>296 </svg>297 </div>298 299 <div class="section">300 <div class="section-title">BRAND INFO</div>301 <svg class="chev" viewBox="0 0 24 24">302 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>303 </svg>304 </div>305 306 <div class="section">307 <div class="section-title">GENERAL FEATURES</div>308 <svg class="chev" viewBox="0 0 24 24">309 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>310 </svg>311 </div>312 313 <div class="section">314 <div class="section-title">TECHNICAL FEATURES</div>315 <svg class="chev" viewBox="0 0 24 24">316 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>317 </svg>318 </div>319 320 <div class="section">321 <div class="section-title">BATTERY</div>322 <svg class="chev" viewBox="0 0 24 24">323 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>324 </svg>325 </div>326 327 <div class="section">328 <div class="section-title">WARRANTY</div>329 <svg class="chev" viewBox="0 0 24 24">330 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>331 </svg>332 </div>333 334 <div class="section">335 <div class="section-title">DIMENSIONS</div>336 <svg class="chev" viewBox="0 0 24 24">337 <path d="M6 8 L12 14 L18 8" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>338 </svg>339 </div>340 341 <div class="block-divider"></div>342 343 <div class="section" style="border-top:none;">344 <div class="section-title">Manufacturing, Packaging and Import Info</div>345 <svg class="chev" viewBox="0 0 24 24">346 <path d="M8 6 L16 12 L8 18" stroke="#111" stroke-width="3" fill="none" stroke-linecap="round"/>347 </svg>348 </div>349 350 <div class="non-returnable">351 <div class="nr-card">352 <svg width="74" height="74" viewBox="0 0 74 74">353 <rect x="8" y="18" width="50" height="36" rx="6" ry="6" fill="none" stroke="#2f2f2f" stroke-width="3"/>354 <path d="M34 18 C34 12 40 10 44 10 C48 10 54 12 54 18" stroke="#2f2f2f" stroke-width="3" fill="none"/>355 <path d="M12 56 L6 52 L12 48" stroke="#2f2f2f" stroke-width="3" fill="none" stroke-linecap="round"/>356 </svg>357 <div>358 <div class="nr-title">Product Non-Returnable</div>359 <div class="nr-desc">An order, once placed, can be cancelled until the seller processes it.</div>360 </div>361 </div>362 </div>363 364 <div class="ratings-wrapper">365 <div class="ratings-header">RATINGS AND REVIEWS</div>366 <div class="ratings-card">367 <div class="big-rating">368 <div class="big-score">369 <div class="num">5</div>370 <svg width="78" height="78" viewBox="0 0 50 50">371 <polygon points="25,3 31,18 47,18 34,28 39,44 25,34 11,44 16,28 3,18 19,18" fill="#26a65b"/>372 </svg>373 </div>374 <div class="sub-info">1 Rating & 1 Review</div>375 </div>376 377 <div class="v-divider"></div>378 379 <div class="bars">380 <div class="bar-row five">381 <span>5 ★</span>382 <div class="bar"><span></span></div>383 <div class="count">1</div>384 </div>385 <div class="bar-row other">386 <span>4 ★</span>387 <div class="bar"><span></span></div>388 <div class="count">0</div>389 </div>390 <div class="bar-row other">391 <span>3 ★</span>392 <div class="bar"><span></span></div>393 <div class="count">0</div>394 </div>395 <div class="bar-row other">396 <span>2 ★</span>397 <div class="bar"><span></span></div>398 <div class="count">0</div>399 </div>400 <div class="bar-row other">401 <span>1 ★</span>402 <div class="bar"><span></span></div>403 <div class="count">0</div>404 </div>405 </div>406 </div>407 </div>408 409 <!-- Spacer to mimic scroll area end -->410 <div style="height: 240px;"></div>411 </div>412 413 <!-- Bottom action bar -->414 <div class="bottom-bar">415 <div class="heart-square">416 <svg width="50" height="50" viewBox="0 0 50 50">417 <path d="M25 41 C25 41 9 32 9 20 C9 13 14 10 18 10 C21 10 23 12 25 15 C27 12 29 10 32 10 C36 10 41 13 41 20 C41 32 25 41 25 41 Z" fill="none" stroke="#565656" stroke-width="2"/>418 </svg>419 </div>420 421 <div class="btn btn-outline">Buy Now</div>422 423 <div class="btn btn-solid">Add to Bag</div>424 </div>425 426</div>427</body>428</html>