GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Product Detail - Formal Coat for Women</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 }15 16 /* Top gradient header */17 .header {18 width: 100%;19 height: 250px;20 background: linear-gradient(180deg, #bfe7e0 0%, #a9e1de 60%, #d6efe9 100%);21 position: relative;22 box-shadow: 0 2px 0 rgba(0,0,0,0.06);23 }24 25 /* Status bar */26 .status-bar {27 height: 48px;28 padding: 0 36px;29 display: flex;30 align-items: center;31 justify-content: space-between;32 color: #1e2d2f;33 font-size: 36px;34 letter-spacing: 0.3px;35 }36 .status-left {37 display: flex;38 align-items: center;39 gap: 22px;40 }41 .status-icons {42 display: flex;43 align-items: center;44 gap: 14px;45 color: #2f4a4c;46 opacity: 0.6;47 font-size: 30px;48 }49 .status-right {50 display: flex;51 align-items: center;52 gap: 24px;53 }54 .status-dot {55 width: 10px; height: 10px; background: #3c5b5f; border-radius: 50%;56 margin-left: 6px;57 opacity: 0.7;58 }59 60 /* Search row */61 .search-row {62 position: absolute;63 left: 24px;64 right: 24px;65 bottom: 24px;66 display: flex;67 align-items: center;68 gap: 18px;69 }70 .back-btn {71 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;72 }73 .search-bar {74 flex: 1;75 background: #ffffff;76 border-radius: 20px;77 box-shadow: 0 6px 12px rgba(0,0,0,0.08);78 height: 88px;79 display: flex;80 align-items: center;81 padding: 0 24px;82 gap: 18px;83 border: 1px solid #e7e7e7;84 }85 .search-input {86 flex: 1;87 font-size: 34px;88 color: #333;89 }90 .search-input span {91 color: #707070;92 }93 .camera-btn {94 width: 64px; height: 64px; border-radius: 16px; background: #f4f7f8;95 border: 1px solid #e3e7e9; display: flex; align-items: center; justify-content: center;96 }97 98 /* Product info section */99 .info {100 padding: 24px 36px;101 background: #fff;102 }103 .brand-line {104 font-size: 30px;105 color: #3b3b3b;106 margin-top: 12px;107 margin-bottom: 10px;108 }109 .brand-line .brand {110 color: #1a73e8;111 font-weight: 600;112 }113 .title-rating {114 display: flex;115 align-items: flex-start;116 justify-content: space-between;117 gap: 20px;118 }119 .product-title {120 font-size: 32px;121 line-height: 42px;122 color: #2c2c2c;123 max-width: 760px;124 }125 .rating {126 display: flex;127 align-items: center;128 gap: 8px;129 margin-top: 8px;130 }131 .rating .count {132 font-size: 28px;133 color: #555;134 margin-left: 10px;135 }136 .badge-line {137 display: flex;138 align-items: center;139 gap: 16px;140 margin-top: 20px;141 margin-bottom: 10px;142 }143 .badge {144 background: #d46e12;145 color: #fff;146 font-weight: 700;147 font-size: 28px;148 padding: 16px 22px;149 border-radius: 12px;150 position: relative;151 }152 .badge:after {153 content: "";154 position: absolute;155 right: -14px; top: 50%;156 transform: translateY(-50%);157 width: 0; height: 0;158 border-left: 14px solid #d46e12;159 border-top: 14px solid transparent;160 border-bottom: 14px solid transparent;161 }162 .category-link {163 color: #1a73e8;164 font-size: 28px;165 font-weight: 600;166 }167 168 /* Product image area */169 .image-wrap {170 position: relative;171 width: 100%;172 height: 1280px;173 background: #fff;174 }175 .product-image {176 width: 100%;177 height: 100%;178 background: #E0E0E0;179 border: 1px solid #BDBDBD;180 display: flex;181 align-items: center;182 justify-content: center;183 color: #757575;184 font-size: 34px;185 letter-spacing: 0.2px;186 }187 .share-fab {188 position: absolute;189 right: 30px; top: 30px;190 width: 96px; height: 96px; border-radius: 48px;191 background: #ffffff; border: 1px solid #e5e5e5;192 box-shadow: 0 8px 16px rgba(0,0,0,0.08);193 display: flex; align-items: center; justify-content: center;194 }195 .like-fab {196 position: absolute;197 left: 30px; bottom: 30px;198 width: 96px; height: 96px; border-radius: 48px;199 background: #ffffff; border: 1px solid #e5e5e5;200 box-shadow: 0 8px 16px rgba(0,0,0,0.08);201 display: flex; align-items: center; justify-content: center;202 }203 204 .dots {205 position: absolute;206 bottom: -10px;207 left: 0; right: 0;208 display: flex; align-items: center; justify-content: center;209 gap: 18px;210 padding: 20px 0;211 }212 .dot {213 width: 20px; height: 20px; border-radius: 50%;214 background: #cfd8dc;215 border: 1px solid #b0bec5;216 }217 .dot.active {218 background: #5c6bc0; border-color: #5c6bc0;219 }220 221 /* Colour line */222 .colour {223 margin-top: 46px;224 padding: 0 36px;225 font-size: 34px;226 color: #333;227 }228 .colour .value {229 font-weight: 800; color: #1565c0;230 }231 232 /* Bottom navigation */233 .bottom-nav {234 position: absolute;235 left: 0; right: 0; bottom: 64px;236 height: 200px;237 border-top: 1px solid #e5e5e5;238 background: #ffffff;239 display: flex;240 align-items: center;241 justify-content: space-around;242 padding: 18px 0 10px;243 }244 .nav-item {245 width: 180px;246 display: flex; flex-direction: column; align-items: center; justify-content: center;247 gap: 14px;248 color: #2b6e73;249 }250 .nav-item .label {251 font-size: 28px;252 color: #2b6e73;253 }254 .nav-item.inactive .label {255 color: #3f3f3f;256 opacity: 0.7;257 }258 259 /* Gesture bar */260 .gesture {261 position: absolute;262 bottom: 18px; left: 50%;263 transform: translateX(-50%);264 width: 220px; height: 10px; border-radius: 8px;265 background: #9e9e9e;266 opacity: 0.7;267 }268 269 /* SVG helpers */270 .icon { display: inline-block; }271 .star { width: 36px; height: 36px; }272 .star.outline path { fill: none; stroke: #f39c12; stroke-width: 3; }273 .star.filled path { fill: #f39c12; }274</style>275</head>276<body>277<div id="render-target">278 279 <div class="header">280 <div class="status-bar">281 <div class="status-left">282 <div>7:25</div>283 <div class="status-icons">🔔 🔔 🔔 🔔</div>284 <div class="status-dot"></div>285 </div>286 <div class="status-right">287 <!-- WiFi -->288 <svg class="icon" width="40" height="40" viewBox="0 0 24 24">289 <path d="M2 8c5-4 15-4 20 0" stroke="#1e2d2f" stroke-width="2" fill="none" stroke-linecap="round"/>290 <path d="M5 11c3-3 11-3 14 0" stroke="#1e2d2f" stroke-width="2" fill="none" stroke-linecap="round"/>291 <path d="M9 14c2-2 6-2 8 0" stroke="#1e2d2f" stroke-width="2" fill="none" stroke-linecap="round"/>292 <circle cx="12" cy="18" r="2" fill="#1e2d2f"/>293 </svg>294 <!-- Battery -->295 <svg class="icon" width="40" height="40" viewBox="0 0 24 24">296 <rect x="2" y="6" width="18" height="12" rx="2" ry="2" stroke="#1e2d2f" stroke-width="2" fill="none"/>297 <rect x="4" y="8" width="12" height="8" fill="#1e2d2f"/>298 <rect x="20" y="9" width="2" height="6" fill="#1e2d2f"/>299 </svg>300 </div>301 </div>302 303 <div class="search-row">304 <div class="back-btn">305 <svg width="48" height="48" viewBox="0 0 24 24">306 <path d="M15 5L8 12l7 7" stroke="#2d3a3c" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>307 </svg>308 </div>309 <div class="search-bar">310 <svg width="40" height="40" viewBox="0 0 24 24">311 <circle cx="10" cy="10" r="7" stroke="#576e73" stroke-width="2" fill="none"/>312 <path d="M21 21l-5-5" stroke="#576e73" stroke-width="2" fill="none" stroke-linecap="round"/>313 </svg>314 <div class="search-input"><span>formal coat for women</span></div>315 <div class="camera-btn">316 <svg width="32" height="32" viewBox="0 0 24 24">317 <rect x="3" y="6" width="18" height="12" rx="2" ry="2" stroke="#7d8f93" stroke-width="2" fill="none"/>318 <circle cx="12" cy="12" r="4" stroke="#7d8f93" stroke-width="2" fill="none"/>319 </svg>320 </div>321 </div>322 </div>323 </div>324 325 <div class="info">326 <div class="brand-line">Brand: <span class="brand">ROCKSY</span></div>327 328 <div class="title-rating">329 <div class="product-title">330 ROCKSY Black Smart Casual Formal Blazer for Women, Regular Fit Stylish Blazer for Women331 </div>332 <div class="rating">333 <svg class="star filled" viewBox="0 0 24 24">334 <path d="M12 2l3.2 6.5 7.1 1-5.2 5.1 1.3 7.1L12 18l-6.4 3.7 1.3-7.1L1.7 9.5l7.1-1z"/>335 </svg>336 <svg class="star filled" viewBox="0 0 24 24">337 <path d="M12 2l3.2 6.5 7.1 1-5.2 5.1 1.3 7.1L12 18l-6.4 3.7 1.3-7.1L1.7 9.5l7.1-1z"/>338 </svg>339 <svg class="star filled" viewBox="0 0 24 24">340 <path d="M12 2l3.2 6.5 7.1 1-5.2 5.1 1.3 7.1L12 18l-6.4 3.7 1.3-7.1L1.7 9.5l7.1-1z"/>341 </svg>342 <svg class="star filled" viewBox="0 0 24 24">343 <path d="M12 2l3.2 6.5 7.1 1-5.2 5.1 1.3 7.1L12 18l-6.4 3.7 1.3-7.1L1.7 9.5l7.1-1z"/>344 </svg>345 <svg class="star outline" viewBox="0 0 24 24">346 <path d="M12 2l3.2 6.5 7.1 1-5.2 5.1 1.3 7.1L12 18l-6.4 3.7 1.3-7.1L1.7 9.5l7.1-1z"/>347 </svg>348 <div class="count">13</div>349 </div>350 </div>351 352 <div class="badge-line">353 <div class="badge">#1 Best Seller</div>354 <div class="category-link">in Women's Blazers</div>355 </div>356 </div>357 358 <div class="image-wrap">359 <div class="product-image">[IMG: Women's blue formal blazer product photo]</div>360 361 <div class="share-fab" title="Share">362 <svg width="40" height="40" viewBox="0 0 24 24">363 <circle cx="6" cy="12" r="2" fill="#546E7A"/>364 <circle cx="18" cy="6" r="2" fill="#546E7A"/>365 <circle cx="18" cy="18" r="2" fill="#546E7A"/>366 <path d="M7.8 11l8.4-4.5M7.8 13l8.4 4.5" stroke="#546E7A" stroke-width="2" fill="none" stroke-linecap="round"/>367 </svg>368 </div>369 370 <div class="like-fab" title="Save">371 <svg width="42" height="42" viewBox="0 0 24 24">372 <path d="M12 21s-6.5-4.2-8.6-7A5 5 0 016.8 5c1.6 0 3 .9 3.7 2.3C11.2 5.9 12.6 5 14.2 5A5 5 0 0120.6 14c-2.1 2.8-8.6 7-8.6 7z"373 fill="none" stroke="#546E7A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>374 </svg>375 </div>376 377 <div class="dots">378 <div class="dot active"></div>379 <div class="dot"></div>380 <div class="dot"></div>381 <div class="dot"></div>382 </div>383 </div>384 385 <div class="colour">Colour: <span class="value">Blue</span></div>386 387 <div class="bottom-nav">388 <div class="nav-item">389 <svg width="56" height="56" viewBox="0 0 24 24">390 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="none" stroke="#2b6e73" stroke-width="2" stroke-linejoin="round"/>391 <path d="M9 21V12h6v9" stroke="#2b6e73" stroke-width="2" fill="none"/>392 </svg>393 <div class="label">Home</div>394 </div>395 <div class="nav-item inactive">396 <svg width="56" height="56" viewBox="0 0 24 24">397 <circle cx="12" cy="8" r="4" fill="none" stroke="#4a4a4a" stroke-width="2"/>398 <path d="M4 21c1.6-4 6.4-4 8-4s6.4 0 8 4" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>399 </svg>400 <div class="label">You</div>401 </div>402 <div class="nav-item inactive">403 <svg width="56" height="56" viewBox="0 0 24 24">404 <path d="M4 12a8 8 0 0114-4" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>405 <path d="M20 12a8 8 0 01-14 4" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>406 <path d="M12 2v4M12 18v4" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>407 </svg>408 <div class="label">More</div>409 </div>410 <div class="nav-item inactive">411 <svg width="56" height="56" viewBox="0 0 24 24">412 <path d="M6 6h15l-2 8H7L6 6z" stroke="#4a4a4a" stroke-width="2" fill="none" stroke-linecap="round"/>413 <circle cx="9" cy="20" r="2" fill="#4a4a4a"/>414 <circle cx="17" cy="20" r="2" fill="#4a4a4a"/>415 </svg>416 <div class="label">Cart</div>417 </div>418 <div class="nav-item inactive">419 <svg width="56" height="56" viewBox="0 0 24 24">420 <path d="M3 6h18M3 12h18M3 18h18" stroke="#4a4a4a" stroke-width="2" stroke-linecap="round"/>421 </svg>422 <div class="label">Menu</div>423 </div>424 </div>425 426 <div class="gesture"></div>427 428</div>429</body>430</html>