GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Product Page 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 color: #111;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 90px;23 padding: 0 36px;24 box-sizing: border-box;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #111;29 font-size: 34px;30 }31 .status-icons {32 display: flex;33 align-items: center;34 gap: 18px;35 }36 .dot-icon {37 width: 26px;38 height: 26px;39 border-radius: 50%;40 background: #e6e6e6;41 border: 1px solid #cfcfcf;42 }43 .sys-icons {44 display: flex;45 align-items: center;46 gap: 16px;47 }48 .wifi, .battery {49 width: 38px; height: 26px;50 }51 .wifi path, .battery rect, .battery path { fill: #111; }52 53 /* Header */54 .header {55 position: absolute;56 top: 110px;57 left: 40px;58 right: 40px;59 display: flex;60 align-items: center;61 justify-content: space-between;62 }63 .title {64 font-size: 46px;65 font-weight: 700;66 letter-spacing: 2px;67 }68 .price-close {69 display: flex;70 align-items: center;71 gap: 28px;72 }73 .price-tag {74 padding: 16px 26px;75 border: 3px solid #111;76 border-radius: 12px;77 font-size: 36px;78 font-weight: 700;79 }80 .close-btn {81 width: 60px; height: 60px;82 display: flex; align-items: center; justify-content: center;83 }84 .close-btn svg { width: 44px; height: 44px; }85 86 /* Color variants strip */87 .variant-strip {88 position: absolute;89 top: 200px;90 left: 0;91 width: 100%;92 padding: 24px 40px;93 box-sizing: border-box;94 display: flex;95 gap: 26px;96 align-items: center;97 overflow: hidden;98 }99 .variant {100 width: 150px; height: 90px;101 background: #E0E0E0;102 border: 1px solid #BDBDBD;103 border-radius: 12px;104 display: flex; align-items: center; justify-content: center;105 font-size: 20px; color: #757575;106 flex-shrink: 0;107 }108 .variant.selected {109 border: 3px solid #111;110 position: relative;111 }112 .variant.selected::before,113 .variant.selected::after {114 content: "";115 position: absolute;116 width: 20px; height: 20px;117 border: 5px solid #111;118 }119 .variant.selected::before { top: -10px; left: -10px; border-right: none; border-bottom: none; }120 .variant.selected::after { bottom: -10px; right: -10px; border-left: none; border-top: none; }121 122 /* Main product image */123 .hero {124 position: absolute;125 top: 320px;126 left: 40px;127 width: 1000px;128 height: 640px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 display: flex; align-items: center; justify-content: center;132 color: #757575;133 font-size: 32px;134 border-radius: 8px;135 box-shadow: 0 2px 0 rgba(0,0,0,0.06);136 }137 .hero.secondary {138 top: 990px;139 height: 220px;140 width: 920px;141 left: 80px;142 font-size: 28px;143 }144 145 /* Ratings section */146 .ratings-section {147 position: absolute;148 top: 1230px;149 left: 40px;150 right: 40px;151 padding-bottom: 40px;152 }153 .ratings-title {154 font-size: 60px;155 font-weight: 800;156 letter-spacing: 6px;157 margin-bottom: 40px;158 }159 .ratings-grid {160 display: grid;161 grid-template-columns: 1fr 1fr;162 column-gap: 40px;163 align-items: start;164 }165 .big-score {166 font-size: 140px;167 font-weight: 800;168 letter-spacing: 6px;169 }170 .percent {171 font-size: 140px;172 font-weight: 800;173 letter-spacing: 10px;174 text-align: right;175 }176 .stars {177 margin-top: 14px;178 display: flex;179 gap: 18px;180 }181 .star {182 width: 44px; height: 44px;183 }184 .recommend-text {185 margin-top: 22px;186 font-size: 34px;187 color: #333;188 text-align: right;189 line-height: 1.2;190 }191 .reviews-count {192 margin-top: 28px;193 font-size: 34px;194 font-weight: 700;195 letter-spacing: 2px;196 display: inline-block;197 border-bottom: 4px solid #111;198 padding-bottom: 10px;199 }200 201 /* Metrics (size, width) */202 .metric {203 margin-top: 60px;204 }205 .metric-title {206 font-size: 36px;207 font-weight: 700;208 letter-spacing: 2px;209 margin-bottom: 24px;210 }211 .meter {212 position: relative;213 width: 950px;214 height: 18px;215 background: #EFEFEF;216 border-radius: 10px;217 border: 1px solid #D3D3D3;218 }219 .indicator {220 position: absolute;221 top: -10px;222 width: 120px; height: 18px;223 background: #111;224 border-radius: 10px;225 left: 43%;226 }227 .metric-labels {228 width: 950px;229 display: flex;230 justify-content: space-between;231 font-size: 30px;232 color: #555;233 margin-top: 16px;234 }235 236 /* Footer bottom bar (gesture hint) */237 .bottom-bar {238 position: absolute;239 bottom: 30px;240 left: 50%;241 transform: translateX(-50%);242 width: 380px;243 height: 16px;244 background: #D6D6D6;245 border-radius: 10px;246 }247</style>248</head>249<body>250<div id="render-target">251 252 <!-- Status Bar -->253 <div class="status-bar">254 <div style="display:flex; align-items:center; gap:30px;">255 <div>8:32</div>256 <div class="status-icons">257 <div class="dot-icon"></div>258 <div class="dot-icon"></div>259 <div class="dot-icon"></div>260 <div class="dot-icon"></div>261 <div class="dot-icon"></div>262 </div>263 </div>264 <div class="sys-icons">265 <svg class="wifi" viewBox="0 0 24 24">266 <path d="M12 18.5c.9 0 1.7.7 1.7 1.5S12.9 21.5 12 21.5 10.3 20.8 10.3 20s.8-1.5 1.7-1.5zM2 8.8C6.9 4.6 17.1 4.6 22 8.8l-2.1 2.1c-3.8-3.1-12-3.1-15.8 0L2 8.8zm3.9 4c3.6-2.9 10.6-2.9 14.2 0l-2.1 2.1c-2.5-2-7.5-2-10 0L5.9 12.8z"></path>267 </svg>268 <svg class="battery" viewBox="0 0 36 20">269 <rect x="1" y="3" width="28" height="14" rx="3"></rect>270 <path d="M31 7h4v6h-4z"></path>271 </svg>272 </div>273 </div>274 275 <!-- Header -->276 <div class="header">277 <div class="title">ULTRA 4D</div>278 <div class="price-close">279 <div class="price-tag">$220.00</div>280 <div class="close-btn">281 <svg viewBox="0 0 24 24">282 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"></path>283 </svg>284 </div>285 </div>286 </div>287 288 <!-- Color Variants -->289 <div class="variant-strip">290 <div class="variant">[IMG: Cream Variant]</div>291 <div class="variant">[IMG: Black Variant]</div>292 <div class="variant">[IMG: Pink/Cream]</div>293 <div class="variant">[IMG: Sand]</div>294 <div class="variant">[IMG: Black/Gray]</div>295 <div class="variant selected">[IMG: Black/Green]</div>296 </div>297 298 <!-- Main Product Image -->299 <div class="hero">[IMG: Ultra 4D sneakers on wooden deck]</div>300 301 <!-- Slight overlapping second image edge to mimic stack -->302 <div class="hero secondary">[IMG: Edge of second photo]</div>303 304 <!-- Ratings & Reviews -->305 <div class="ratings-section">306 <div class="ratings-title">RATINGS & REVIEWS</div>307 308 <div class="ratings-grid">309 <div>310 <div class="big-score">4.8</div>311 <div class="stars">312 <svg class="star" viewBox="0 0 24 24">313 <path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z" fill="#111"></path>314 </svg>315 <svg class="star" viewBox="0 0 24 24">316 <path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z" fill="#111"></path>317 </svg>318 <svg class="star" viewBox="0 0 24 24">319 <path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z" fill="#111"></path>320 </svg>321 <svg class="star" viewBox="0 0 24 24">322 <path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z" fill="#111"></path>323 </svg>324 <svg class="star" viewBox="0 0 24 24">325 <path d="M12 2l3.1 6.3 7 1-5 4.9 1.2 7.3L12 18l-6.3 3.5 1.2-7.3-5-4.9 7-1z" fill="#111"></path>326 </svg>327 </div>328 <div class="reviews-count">534 REVIEWS</div>329 </div>330 <div>331 <div class="percent">96 %</div>332 <div class="recommend-text">of customers recommend<br>this product</div>333 </div>334 </div>335 336 <!-- Size -->337 <div class="metric">338 <div class="metric-title">SIZE</div>339 <div class="meter">340 <div class="indicator" style="left:45%"></div>341 </div>342 <div class="metric-labels">343 <div>Too small</div>344 <div>Perfect</div>345 <div>Too large</div>346 </div>347 </div>348 349 <!-- Width -->350 <div class="metric">351 <div class="metric-title">WIDTH</div>352 <div class="meter">353 <div class="indicator" style="left:40%"></div>354 </div>355 <div class="metric-labels">356 <div>Too narrow</div>357 <div>Perfect</div>358 <div>Too wide</div>359 </div>360 </div>361 362 </div>363 364 <div class="bottom-bar"></div>365</div>366</body>367</html>