GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Switch FWD Running Shoes - Ratings & Reviews</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body {8 margin: 0;9 padding: 0;10 background: transparent;11 font-family: -apple-system, BlinkMacSystemFont, "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: #ffffff;20 }21 22 /* Status bar */23 .status-bar {24 position: absolute;25 top: 0;26 left: 0;27 width: 1080px;28 height: 120px;29 background: #f3f3f3;30 display: flex;31 align-items: center;32 padding: 0 36px;33 box-sizing: border-box;34 }35 .status-bar .left-icons {36 display: flex;37 gap: 24px;38 align-items: center;39 color: #444;40 font-size: 28px;41 letter-spacing: 1px;42 }43 .status-bar .right-icons {44 margin-left: auto;45 display: flex;46 gap: 20px;47 align-items: center;48 }49 .icon {50 width: 36px;51 height: 36px;52 }53 54 /* Header */55 .header {56 position: absolute;57 top: 120px;58 left: 0;59 width: 1080px;60 padding: 40px 48px;61 box-sizing: border-box;62 background: #ffffff;63 display: flex;64 align-items: center;65 }66 .title {67 font-weight: 800;68 font-size: 46px;69 letter-spacing: 2px;70 }71 .price-pill {72 margin-left: auto;73 background: #000;74 color: #fff;75 font-weight: 700;76 font-size: 36px;77 padding: 18px 28px;78 border-radius: 18px;79 }80 .close-btn {81 margin-left: 24px;82 width: 60px;83 height: 60px;84 border: 2px solid #111;85 border-radius: 50%;86 display: grid;87 place-items: center;88 }89 .close-btn svg {90 width: 28px;91 height: 28px;92 }93 94 /* Color carousel */95 .color-carousel {96 position: absolute;97 top: 220px;98 left: 0;99 width: 1080px;100 padding: 24px 48px 24px 48px;101 box-sizing: border-box;102 display: flex;103 gap: 48px;104 background: #ffffff;105 }106 .thumb {107 width: 170px;108 height: 110px;109 background: #E0E0E0;110 border: 1px solid #BDBDBD;111 display: flex;112 align-items: center;113 justify-content: center;114 color: #757575;115 font-size: 24px;116 border-radius: 14px;117 }118 .thumb.active {119 outline: 4px solid #cfcfcf;120 }121 122 /* Hero image strip */123 .hero {124 position: absolute;125 top: 360px;126 left: 0;127 width: 1080px;128 height: 300px;129 background: #E0E0E0;130 border-top: 1px solid #BDBDBD;131 border-bottom: 1px solid #BDBDBD;132 display: flex;133 align-items: center;134 justify-content: center;135 color: #757575;136 font-size: 28px;137 }138 139 /* Content section */140 .content {141 position: absolute;142 top: 660px;143 left: 0;144 width: 1080px;145 padding: 60px 60px 0 60px;146 box-sizing: border-box;147 background: #fff;148 }149 .section-title {150 font-size: 64px;151 font-weight: 800;152 letter-spacing: 4px;153 margin-bottom: 40px;154 }155 156 .rating-summary {157 display: grid;158 grid-template-columns: 1fr 1fr;159 gap: 20px;160 align-items: start;161 }162 .big-score {163 font-size: 140px;164 font-weight: 800;165 line-height: 1;166 }167 .stars {168 margin-top: 16px;169 display: flex;170 gap: 14px;171 }172 .stars svg {173 width: 42px;174 height: 42px;175 fill: #000;176 }177 .reviews-link {178 margin-top: 20px;179 font-size: 32px;180 font-weight: 700;181 letter-spacing: 2px;182 border-bottom: 6px solid #000;183 display: inline-block;184 padding-bottom: 8px;185 }186 187 .recommend {188 display: flex;189 align-items: baseline;190 gap: 16px;191 }192 .recommend .percent {193 font-size: 140px;194 font-weight: 800;195 line-height: 1;196 }197 .recommend .caption {198 font-size: 36px;199 color: #222;200 max-width: 420px;201 }202 203 /* Scales */204 .scale {205 margin-top: 60px;206 }207 .scale .label {208 font-size: 36px;209 font-weight: 800;210 letter-spacing: 3px;211 margin-bottom: 22px;212 }213 .track {214 position: relative;215 height: 12px;216 background: #e6e6e6;217 border-radius: 8px;218 overflow: visible;219 }220 .indicator {221 position: absolute;222 top: -8px;223 width: 120px;224 height: 20px;225 background: #111;226 border-radius: 10px;227 }228 .scale-grid {229 display: grid;230 grid-template-columns: 1fr 1fr 1fr;231 font-size: 32px;232 color: #333;233 margin-top: 18px;234 }235 236 /* Meter bars for Comfort and Quality */237 .meter {238 margin-top: 50px;239 }240 .meter .label {241 font-size: 36px;242 font-weight: 800;243 letter-spacing: 3px;244 margin-bottom: 20px;245 }246 .meter .bar {247 position: relative;248 height: 14px;249 background: #e6e6e6;250 border-radius: 8px;251 }252 .meter .progress {253 position: absolute;254 left: 0;255 top: 0;256 height: 14px;257 background: #111;258 border-radius: 8px;259 }260 .meter .extremes {261 display: flex;262 justify-content: space-between;263 margin-top: 20px;264 font-size: 34px;265 color: #333;266 }267 268 /* Complete the look */269 .complete {270 margin-top: 80px;271 }272 .complete-title {273 font-size: 60px;274 font-weight: 800;275 letter-spacing: 3px;276 margin-bottom: 30px;277 }278 .look-grid {279 display: grid;280 grid-template-columns: repeat(3, 1fr);281 gap: 30px;282 }283 .look-item {284 width: 100%;285 height: 420px;286 background: #E0E0E0;287 border: 1px solid #BDBDBD;288 display: flex;289 align-items: center;290 justify-content: center;291 color: #757575;292 font-size: 28px;293 border-radius: 16px;294 }295 296 /* Gesture bar */297 .gesture-bar {298 position: absolute;299 bottom: 20px;300 left: 50%;301 transform: translateX(-50%);302 width: 600px;303 height: 14px;304 background: #000;305 border-radius: 10px;306 }307</style>308</head>309<body>310<div id="render-target">311 312 <!-- Status Bar -->313 <div class="status-bar">314 <div class="left-icons">315 <span>5:14</span>316 <!-- Simple circles as status icons -->317 <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#ddd"/></svg>318 <svg class="icon" viewBox="0 0 24 24"><rect x="3" y="7" width="18" height="10" rx="2" fill="#ddd"/></svg>319 <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h18L12 6z" fill="#ddd"/></svg>320 </div>321 <div class="right-icons">322 <svg class="icon" viewBox="0 0 24 24"><path d="M17 4H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V6a2 2 0 00-2-2z" fill="#ddd"/></svg>323 <svg class="icon" viewBox="0 0 24 24"><path d="M3 12h18" stroke="#ddd" stroke-width="3"/></svg>324 </div>325 </div>326 327 <!-- Header -->328 <div class="header">329 <div class="title">SWITCH FWD RUNNING SHOES</div>330 <div class="price-pill">$140.00</div>331 <div class="close-btn" aria-label="Close">332 <svg viewBox="0 0 24 24">333 <path d="M5 5L19 19M19 5L5 19" stroke="#111" stroke-width="3" stroke-linecap="round"/>334 </svg>335 </div>336 </div>337 338 <!-- Color Carousel -->339 <div class="color-carousel">340 <div class="thumb">[IMG: Lime Shoe]</div>341 <div class="thumb">[IMG: Pink Shoe]</div>342 <div class="thumb">[IMG: Black Shoe]</div>343 <div class="thumb">[IMG: Blush Shoe]</div>344 <div class="thumb active">[IMG: Grey/Green Shoe]</div>345 </div>346 347 <!-- Hero image -->348 <div class="hero">[IMG: Running shoe on pavement - hero banner]</div>349 350 <!-- Content -->351 <div class="content">352 <div class="section-title">RATINGS & REVIEWS</div>353 354 <div class="rating-summary">355 <div>356 <div class="big-score">4.7</div>357 <div class="stars" aria-label="4.7 out of 5 stars">358 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>359 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>360 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>361 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>362 <svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.3 6.9 1-5 4.9 1.2 7-6.2-3.3-6.2 3.3 1.2-7-5-4.9 6.9-1z"/></svg>363 </div>364 <div class="reviews-link">57 REVIEWS</div>365 </div>366 367 <div class="recommend">368 <div class="percent">96 %</div>369 <div class="caption">of customers recommend this product</div>370 </div>371 </div>372 373 <!-- Size scale -->374 <div class="scale">375 <div class="label">SIZE</div>376 <div class="track">377 <div class="indicator" style="left: 460px;"></div>378 </div>379 <div class="scale-grid">380 <div>Too small</div>381 <div style="text-align:center;">Perfect</div>382 <div style="text-align:right;">Too large</div>383 </div>384 </div>385 386 <!-- Width scale -->387 <div class="scale">388 <div class="label">WIDTH</div>389 <div class="track">390 <div class="indicator" style="left: 380px;"></div>391 </div>392 <div class="scale-grid">393 <div>Too narrow</div>394 <div style="text-align:center;">Perfect</div>395 <div style="text-align:right;">Too wide</div>396 </div>397 </div>398 399 <!-- Comfort meter -->400 <div class="meter">401 <div class="label">COMFORT</div>402 <div class="bar">403 <div class="progress" style="width: 88%;"></div>404 </div>405 <div class="extremes">406 <div>Uncomfortable</div>407 <div>Comfortable</div>408 </div>409 </div>410 411 <!-- Quality meter -->412 <div class="meter">413 <div class="label">QUALITY</div>414 <div class="bar">415 <div class="progress" style="width: 90%;"></div>416 </div>417 <div class="extremes">418 <div>Poor</div>419 <div>Perfect</div>420 </div>421 </div>422 423 <!-- Complete the look -->424 <div class="complete">425 <div class="complete-title">COMPLETE THE LOOK</div>426 <div class="look-grid">427 <div class="look-item">[IMG: Headbands set]</div>428 <div class="look-item">[IMG: Blue training tank]</div>429 <div class="look-item">[IMG: Grey training tee]</div>430 </div>431 </div>432 433 </div>434 435 <!-- Gesture Bar -->436 <div class="gesture-bar"></div>437</div>438</body>439</html>