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 Detail - UI Recreation</title>7<style>8 body {9 margin: 0;10 padding: 0;11 background: transparent;12 font-family: Arial, Helvetica, sans-serif;13 color: #111;14 }15 #render-target {16 width: 1080px;17 height: 2400px;18 position: relative;19 overflow: hidden;20 background: #ffffff;21 }22 23 /* Status bar simulation */24 .status {25 height: 120px;26 background: #EDEDED;27 width: 100%;28 }29 30 /* Header with title, price and close */31 .header {32 position: relative;33 background: #F4F4F4;34 height: 170px;35 border-bottom: 1px solid #E0E0E0;36 }37 .title {38 position: absolute;39 left: 56px;40 bottom: 36px;41 font-weight: 800;42 letter-spacing: 4px;43 font-size: 38px;44 text-transform: uppercase;45 }46 .price {47 position: absolute;48 right: 180px;49 top: 50%;50 transform: translateY(-50%);51 padding: 22px 32px;52 border: 3px solid #111;53 font-weight: 800;54 letter-spacing: 2px;55 font-size: 34px;56 background: #fff;57 }58 .close {59 position: absolute;60 right: 56px;61 top: 50%;62 transform: translateY(-50%);63 width: 60px;64 height: 60px;65 cursor: default;66 }67 .close svg {68 width: 100%;69 height: 100%;70 }71 72 /* Carousel band */73 .carousel {74 width: 100%;75 height: 240px;76 background: #F6F6F6;77 display: flex;78 align-items: center;79 padding: 0 32px;80 gap: 24px;81 overflow: hidden;82 border-bottom: 1px solid #EDEDED;83 }84 .thumb {85 width: 200px;86 height: 200px;87 background: #E0E0E0;88 border: 1px solid #BDBDBD;89 display: flex;90 justify-content: center;91 align-items: center;92 color: #757575;93 font-size: 28px;94 }95 96 /* Content sections */97 .content {98 padding: 30px 56px 0 56px;99 }100 .section {101 margin-top: 70px;102 margin-bottom: 140px;103 }104 .section h2 {105 font-size: 64px;106 line-height: 1.1;107 margin: 0 0 28px 0;108 font-weight: 900;109 letter-spacing: 3px;110 text-transform: uppercase;111 }112 .section p {113 font-size: 34px;114 line-height: 1.5;115 color: #222;116 margin: 0;117 max-width: 900px;118 }119 120 /* Ratings */121 .ratings {122 margin-top: 60px;123 padding-bottom: 40px;124 }125 .ratings h3 {126 font-size: 60px;127 letter-spacing: 4px;128 font-weight: 900;129 text-transform: uppercase;130 margin: 0 0 40px 0;131 }132 .ratings-row {133 display: flex;134 gap: 24px;135 }136 .ratings-col {137 flex: 1;138 }139 .rating-number {140 font-size: 150px;141 font-weight: 900;142 letter-spacing: 6px;143 margin-bottom: 18px;144 }145 .stars {146 display: flex;147 gap: 14px;148 margin: 8px 0 28px 0;149 }150 .stars svg {151 width: 44px;152 height: 44px;153 fill: #111;154 }155 .reviews-link {156 font-size: 34px;157 font-weight: 800;158 letter-spacing: 3px;159 text-transform: uppercase;160 display: inline-block;161 border-bottom: 5px solid #111;162 padding-bottom: 8px;163 }164 .recommend-note {165 margin-top: 24px;166 font-size: 34px;167 color: #222;168 max-width: 420px;169 }170 171 /* Bottom system bar mimic */172 .bottom-bar {173 position: absolute;174 left: 0;175 right: 0;176 bottom: 0;177 height: 120px;178 background: #0E0E0E;179 }180 .home-pill {181 position: absolute;182 left: 50%;183 bottom: 26px;184 transform: translateX(-50%);185 width: 360px;186 height: 16px;187 background: #FFFFFF;188 border-radius: 10px;189 opacity: 0.9;190 }191</style>192</head>193<body>194<div id="render-target">195 <div class="status"></div>196 197 <div class="header">198 <div class="title">TIRO 23 LEAGUE PANTS</div>199 <div class="price">$50.00</div>200 <div class="close" aria-label="Close">201 <svg viewBox="0 0 24 24">202 <path d="M5 5 L19 19 M19 5 L5 19" stroke="#111" stroke-width="2.5" stroke-linecap="round"/>203 </svg>204 </div>205 </div>206 207 <div class="carousel">208 <div class="thumb">[IMG: Pants]</div>209 <div class="thumb">[IMG: Pants]</div>210 <div class="thumb">[IMG: Pants]</div>211 <div class="thumb">[IMG: Pants]</div>212 <div class="thumb">[IMG: Pants]</div>213 </div>214 215 <div class="content">216 <div class="section">217 <h2>FEEL DRY, STAY DRY</h2>218 <p>adidas AEROREADY manages your body's moisture to keep you dry and in the zone.</p>219 </div>220 221 <div class="section">222 <h2>ADJUSTABLE COMFORT</h2>223 <p>The drawcord on the elastic waist lets you customize the fit.</p>224 </div>225 226 <div class="section">227 <h2>STASH YOUR STUFF</h2>228 <p>Zip pockets keep your small essentials, like phone and keys, close and accessible.</p>229 </div>230 231 <div class="ratings">232 <h3>RATINGS & REVIEWS</h3>233 <div class="ratings-row">234 <div class="ratings-col">235 <div class="rating-number">4.7</div>236 <div class="stars" aria-label="5 stars">237 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>238 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>239 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>240 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>241 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>242 </div>243 <div class="reviews-link">627 Reviews</div>244 </div>245 <div class="ratings-col" style="display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start;">246 <div class="rating-number">94 %</div>247 <div class="recommend-note">of customers recommend this product</div>248 </div>249 </div>250 </div>251 </div>252 253 <div class="bottom-bar">254 <div class="home-pill"></div>255 </div>256</div>257</body>258</html>