GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="utf-8">5<title>Product Detail Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;16 color: #111;17 }18 19 /* Status bar */20 .status-bar {21 position: absolute;22 top: 0; left: 0; right: 0;23 height: 140px;24 background: #d3d3d3;25 display: flex;26 align-items: center;27 padding: 0 36px;28 font-size: 36px;29 color: #333;30 }31 .status-bar .right { margin-left: auto; display: flex; gap: 28px; align-items: center; }32 33 /* Top controls */34 .top-area { position: absolute; top: 140px; left: 0; right: 0; height: 120px; }35 .back-btn {36 position: absolute; left: 36px; top: 36px; width: 72px; height: 72px; background: transparent; border: 0; cursor: default;37 }38 .learn-link {39 position: absolute; top: 44px; left: 50%; transform: translateX(-50%);40 font-size: 34px; color: #222; text-decoration: underline; font-weight: 500;41 }42 .right-icons {43 position: absolute; right: 48px; top: 270px;44 display: flex; flex-direction: column; gap: 38px; align-items: center;45 }46 .right-icons svg { width: 64px; height: 64px; stroke: #111; fill: none; }47 48 /* Content */49 .content {50 position: absolute;51 top: 240px;52 left: 48px; right: 48px;53 padding-right: 200px; /* leave room for right icons column */54 }55 h1.title {56 font-size: 58px; margin: 24px 0 10px 0; font-weight: 700; letter-spacing: 0.2px;57 }58 .rating-line {59 display: flex; align-items: center; gap: 16px;60 font-size: 34px; color: #111; margin-top: 4px;61 }62 .rating-line .reviews { text-decoration: underline; font-weight: 700; }63 .stars svg { width: 40px; height: 40px; fill: #000; }64 65 .price-row { margin-top: 28px; display: flex; align-items: baseline; gap: 22px; }66 .price-row .sale { color: #d0021b; font-weight: 700; font-size: 56px; }67 .price-row .old { color: #777; text-decoration: line-through; font-size: 40px; }68 69 .discount-badge {70 position: absolute; right: 48px; top: 640px;71 background: #c7001e; color: #fff; font-weight: 700; font-size: 42px;72 padding: 24px 32px; border-radius: 8px;73 }74 75 .variant-title { margin-top: 90px; font-size: 40px; font-weight: 700; letter-spacing: 0.3px; }76 .thumbs {77 margin-top: 26px; display: flex; gap: 26px; overflow: hidden;78 }79 .thumb {80 width: 220px; height: 280px; background: #E0E0E0; border: 2px solid #BDBDBD;81 display: flex; justify-content: center; align-items: center; color: #666; font-size: 28px;82 }83 .thumb.selected { border: 4px solid #111; }84 85 .find-row {86 margin-top: 46px; display: flex; align-items: center; gap: 20px; font-size: 38px;87 }88 .find-row a { color: #111; text-decoration: underline; font-weight: 600; }89 .info-row {90 margin-top: 28px; display: flex; align-items: center; gap: 18px; font-size: 34px; color: #333;91 }92 93 .section-big {94 margin-top: 60px; font-size: 46px; font-weight: 800;95 }96 97 .accordion {98 margin-top: 24px; border-top: 1px solid #eee;99 }100 .acc-row {101 display: flex; align-items: center; justify-content: space-between;102 padding: 46px 6px; border-bottom: 1px solid #eee; font-size: 40px; font-weight: 700;103 }104 .acc-row svg { width: 36px; height: 36px; }105 106 .style-with { margin-top: 120px; }107 .style-with h3 { font-size: 42px; font-weight: 700; margin: 0 0 28px 0; }108 .style-images { display: flex; gap: 28px; }109 .style-images .img {110 width: 300px; height: 220px; background: #F1F1F1; border: 1px solid #D0D0D0;111 display: flex; align-items: center; justify-content: center; color: #777; font-size: 26px;112 }113 114 /* Purchase bar */115 .buy-bar {116 position: absolute; left: 0; right: 0; bottom: 84px;117 background: #fff; padding: 36px 48px;118 display: flex; gap: 36px; align-items: center;119 box-shadow: 0 -12px 24px rgba(0,0,0,0.06);120 }121 .size-select {122 flex: 1; height: 124px; border: 2px solid #cfcfcf; border-radius: 8px;123 display: flex; align-items: center; justify-content: space-between;124 padding: 0 28px; font-size: 36px; color: #333; background: #fff;125 }126 .add-btn {127 width: 520px; height: 124px; border: 0; border-radius: 10px; background: #111; color: #fff;128 font-size: 42px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 18px;129 }130 .add-btn svg { width: 42px; height: 42px; stroke: #fff; }131 132 .home-indicator {133 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);134 width: 260px; height: 10px; background: #bbb; border-radius: 10px; opacity: 0.7;135 }136 137 /* Utility */138 .icon-24 { width: 48px; height: 48px; }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Status Bar -->145 <div class="status-bar">146 <div>3:52</div>147 <div class="right">148 <span>◦</span>149 <span>▵</span>150 <span>🔋</span>151 </div>152 </div>153 154 <!-- Top controls -->155 <div class="top-area">156 <button class="back-btn" aria-label="Back">157 <svg viewBox="0 0 24 24">158 <path d="M15.5 3.5L6 12l9.5 8.5" stroke="#111" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>159 </svg>160 </button>161 <div class="learn-link">Learn more</div>162 </div>163 164 <!-- Right side icon column -->165 <div class="right-icons">166 <!-- bag -->167 <svg viewBox="0 0 24 24" stroke-width="2">168 <path d="M6 8h12l-1 13H7L6 8z" />169 <path d="M9 8V6a3 3 0 0 1 6 0v2" />170 </svg>171 <!-- share -->172 <svg viewBox="0 0 24 24" stroke-width="2">173 <circle cx="6" cy="12" r="2"></circle>174 <circle cx="18" cy="6" r="2"></circle>175 <circle cx="18" cy="18" r="2"></circle>176 <path d="M8 12l8-6M8 12l8 6"></path>177 </svg>178 <!-- heart -->179 <svg viewBox="0 0 24 24" stroke-width="2">180 <path d="M12 21s-7.5-4.5-9.5-9a5.5 5.5 0 0 1 9-6 5.5 5.5 0 0 1 9 6c-2 4.5-9.5 9-9.5 9z"/>181 </svg>182 </div>183 184 <!-- Content -->185 <div class="content">186 <h1 class="title">Slim Fit Easy-iron Shirt</h1>187 188 <div class="rating-line">189 <span class="stars">190 <svg viewBox="0 0 20 20"><path d="M10 1l2.6 5.3L18 7l-4 3.9.9 5.7L10 13.8 5.1 16.6l.9-5.7L2 7l5.4-.7z"/></svg>191 <svg viewBox="0 0 20 20"><path d="M10 1l2.6 5.3L18 7l-4 3.9.9 5.7L10 13.8 5.1 16.6l.9-5.7L2 7l5.4-.7z"/></svg>192 <svg viewBox="0 0 20 20"><path d="M10 1l2.6 5.3L18 7l-4 3.9.9 5.7L10 13.8 5.1 16.6l.9-5.7L2 7l5.4-.7z"/></svg>193 <svg viewBox="0 0 20 20"><path d="M10 1l2.6 5.3L18 7l-4 3.9.9 5.7L10 13.8 5.1 16.6l.9-5.7L2 7l5.4-.7z"/></svg>194 <svg viewBox="0 0 20 20"><path d="M10 1l2.6 5.3L18 7l-4 3.9.9 5.7L10 13.8 5.1 16.6l.9-5.7L2 7l5.4-.7z"/></svg>195 </span>196 <span>(1127 reviews)</span>197 <span class="reviews"></span>198 </div>199 200 <div class="price-row">201 <div class="sale">$16.00</div>202 <div class="old">$19.99</div>203 </div>204 205 <div class="discount-badge">-20%</div>206 207 <div class="variant-title">Black</div>208 <div class="thumbs">209 <div class="thumb">[IMG: white shirt]</div>210 <div class="thumb">[IMG: pattern shirt]</div>211 <div class="thumb selected">[IMG: black shirt]</div>212 <div class="thumb">[IMG: navy dots shirt]</div>213 <div class="thumb">[IMG: blue shirt]</div>214 <div class="thumb">[IMG: dark navy shirt]</div>215 </div>216 217 <div class="find-row">218 <svg class="icon-24" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">219 <path d="M6 8h12l-1 13H7L6 8z"/>220 <path d="M9 8V6a3 3 0 0 1 6 0v2"/>221 </svg>222 <a href="#">Find in store</a>223 </div>224 225 <div class="info-row">226 <svg class="icon-24" viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2">227 <circle cx="12" cy="12" r="10"></circle>228 <path d="M12 8h0.01M11 11h2v6h-2z"></path>229 </svg>230 <span>Members get free online returns.</span>231 </div>232 233 <div class="section-big">Delivery and payment</div>234 235 <div class="accordion">236 <div class="acc-row">237 <span>Description</span>238 <svg viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>239 </div>240 <div class="acc-row">241 <span>Materials & Suppliers</span>242 <svg viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>243 </div>244 <div class="acc-row">245 <span>Care guide</span>246 <svg viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>247 </div>248 </div>249 250 <div class="style-with">251 <h3>Style with</h3>252 <div class="style-images">253 <div class="img">[IMG: matching tie]</div>254 <div class="img">[IMG: trousers]</div>255 <div class="img">[IMG: belt]</div>256 </div>257 </div>258 </div>259 260 <!-- Purchase bar -->261 <div class="buy-bar">262 <div class="size-select">263 <span>Select size</span>264 <svg viewBox="0 0 24 24" stroke="#111" fill="none" stroke-width="2" width="36" height="36"><path d="M6 9l6 6 6-6"/></svg>265 </div>266 <button class="add-btn">267 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">268 <path d="M6 8h12l-1 13H7L6 8z" stroke="#fff"/>269 <path d="M9 8V6a3 3 0 0 1 6 0v2" stroke="#fff"/>270 </svg>271 <span>Add</span>272 </button>273 </div>274 275 <div class="home-indicator"></div>276</div>277</body>278</html>