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 Mock</title>7<style>8 body { margin:0; padding:0; background:transparent; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff; box-shadow:0 2px 12px rgba(0,0,0,0.06);13 border-radius:24px;14 font-family: Arial, Helvetica, sans-serif;15 color:#212121;16 }17 18 /* Status bar */19 .status-bar {20 height:84px;21 display:flex;22 justify-content:space-between;23 align-items:center;24 padding:0 32px;25 font-size:34px;26 color:#4b4b4b;27 }28 .sb-left { display:flex; gap:20px; align-items:center; }29 .sb-right { display:flex; gap:22px; align-items:center; }30 .sb-icon { width:32px; height:32px; opacity:0.7; }31 32 /* Search row */33 .search-row {34 display:flex;35 align-items:center;36 gap:24px;37 padding:18px 24px 10px 24px;38 }39 .back-btn {40 width:60px; height:60px; display:flex; align-items:center; justify-content:center;41 }42 .search-box {43 flex:1;44 background:#f1f3f4;45 border:1px solid #e0e0e0;46 height:90px; border-radius:18px;47 display:flex; align-items:center;48 padding:0 26px; gap:20px;49 color:#7a7a7a; font-size:36px;50 }51 .search-right {52 width:60px; height:60px; display:flex; align-items:center; justify-content:center;53 }54 .cart-top {55 width:72px; height:72px; border-radius:18px;56 display:flex; align-items:center; justify-content:center;57 margin-right:24px;58 }59 60 /* Right side vertical actions */61 .side-actions {62 position:absolute; right:32px; top:320px;63 display:flex; flex-direction:column; gap:34px;64 align-items:center;65 }66 .side-btn {67 width:72px; height:72px; border-radius:24px;68 display:flex; align-items:center; justify-content:center;69 }70 71 /* Product image */72 .image-area {73 padding:12px 32px 0 32px;74 }75 .product-img {76 width:1016px; height:520px; margin:24px auto 0;77 background:#E0E0E0; border:1px solid #BDBDBD;78 display:flex; align-items:center; justify-content:center;79 color:#757575; font-size:34px; border-radius:12px;80 }81 82 /* NEW badge */83 .new-badge {84 position:absolute; left:40px; top:1030px;85 width:160px; height:160px; border-radius:80px;86 background: radial-gradient(circle at 30% 30%, #ffd6ff, #b57cff);87 box-shadow:0 8px 18px rgba(0,0,0,0.12);88 display:flex; align-items:center; justify-content:center;89 border:1px solid rgba(255,255,255,0.6);90 flex-direction:column;91 color:#ffffff; font-weight:700;92 }93 .new-badge span { font-size:44px; line-height:1; }94 .new-badge small { font-size:26px; font-weight:600; opacity:0.9; }95 96 /* Carousel dots */97 .dots {98 display:flex; gap:16px; justify-content:center; align-items:center;99 margin:36px 0 8px;100 }101 .dot { width:22px; height:22px; border-radius:11px; background:#cfcfcf; }102 .dot.active { background:#616161; }103 104 /* Product info */105 .content {106 padding:0 32px;107 }108 .link-brand {109 color:#1976d2; font-size:42px; font-weight:700; margin-top:28px;110 }111 .title {112 font-size:40px; line-height:1.35; margin-top:16px; color:#1d1d1d;113 }114 .title b { font-weight:700; }115 .rating-row {116 margin-top:22px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;117 font-size:36px;118 }119 .stars { display:flex; gap:8px; }120 .star svg { width:40px; height:40px; }121 .rating-text { color:#1976d2; font-weight:700; }122 .sep { color:#8a8a8a; }123 .ratings-count { color:#1976d2; }124 .assured {125 margin-left:auto; display:flex; align-items:center; gap:10px; color:#8b8b8b; font-size:32px;126 }127 .assured-icon { width:34px; height:34px; }128 129 /* Deal tag */130 .deal-tag {131 margin-top:36px; position:relative; display:inline-block; padding:18px 26px 18px 28px;132 background:#7e57c2; color:#ffffff; border-radius:8px; font-size:34px; font-weight:700;133 }134 .deal-tag:after {135 content:""; position:absolute; right:-24px; top:0; width:0; height:0;136 border-top:30px solid transparent; border-bottom:30px solid transparent;137 border-left:24px solid #7e57c2;138 }139 140 /* Price section */141 .price-row {142 margin-top:26px; display:flex; align-items:baseline; gap:26px;143 }144 .off { color:#1ba672; font-size:58px; font-weight:800; }145 .old { color:#9e9e9e; font-size:46px; text-decoration:line-through; }146 .new { font-size:62px; font-weight:800; color:#212121; }147 148 /* Bottom actions */149 .bottom-bar {150 position:absolute; left:0; right:0; bottom:90px;151 display:flex; align-items:center; justify-content:space-between;152 padding:0 24px; gap:24px;153 }154 .mini-cart {155 width:240px; height:120px; background:#ffffff; border:1px solid #e0e0e0;156 border-radius:22px; display:flex; align-items:center; justify-content:center; gap:16px;157 box-shadow:0 2px 6px rgba(0,0,0,0.06);158 font-size:34px;159 }160 .emi-btn {161 flex:1; height:120px; background:#ffffff; border:1px solid #e0e0e0;162 border-radius:22px; display:flex; align-items:center; justify-content:center;163 font-size:40px; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,0.06);164 }165 .buy-btn {166 width:420px; height:120px; background:#ffc107; border:0; border-radius:22px;167 display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800; color:#212121;168 box-shadow:0 2px 6px rgba(0,0,0,0.16);169 }170 171 /* Floating help logo */172 .float-logo {173 position:absolute; right:32px; bottom:300px;174 width:150px; height:150px;175 background:#1565c0; border-radius:75px;176 display:flex; align-items:center; justify-content:center;177 box-shadow:0 10px 20px rgba(0,0,0,0.18);178 border:6px solid #ffffff;179 }180 .float-inner {181 width:120px; height:120px; background:#ffeb3b; border-radius:60px;182 display:flex; align-items:center; justify-content:center; font-weight:900; font-size:64px; color:#0d47a1;183 }184 185 /* Gesture handle */186 .handle {187 position:absolute; left:50%; transform:translateX(-50%);188 bottom:26px; width:260px; height:12px; background:#000; opacity:0.25; border-radius:6px;189 }190</style>191</head>192<body>193<div id="render-target">194 195 <!-- Status bar -->196 <div class="status-bar">197 <div class="sb-left">198 <div>11:46</div>199 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#9e9e9e"/></svg>200 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 3h18v2H3zm3 6h12v2H6zm4 6h4v2h-4z" fill="#9e9e9e"/></svg>201 <svg class="sb-icon" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#9e9e9e"/><rect x="11" y="6" width="2" height="8" fill="#fff"/></svg>202 <div style="width:10px;height:10px;background:#9e9e9e;border-radius:5px;"></div>203 </div>204 <div class="sb-right">205 <svg class="sb-icon" viewBox="0 0 24 24"><path d="M3 18h18l-2-4H5z" fill="#616161"/></svg>206 <svg class="sb-icon" viewBox="0 0 26 26"><rect x="5" y="7" width="16" height="10" rx="2" fill="#616161"/><rect x="22" y="9" width="2" height="6" fill="#616161"/></svg>207 </div>208 </div>209 210 <!-- Search row -->211 <div class="search-row">212 <div class="back-btn">213 <svg width="46" height="46" viewBox="0 0 24 24">214 <path d="M15 18l-6-6 6-6" stroke="#212121" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>215 </svg>216 </div>217 <div class="search-box">218 <svg width="40" height="40" viewBox="0 0 24 24">219 <circle cx="11" cy="11" r="7" stroke="#797979" stroke-width="2" fill="none"/>220 <path d="M20 20l-4-4" stroke="#797979" stroke-width="2" stroke-linecap="round"/>221 </svg>222 <div>Search for products</div>223 <div style="margin-left:auto;">224 <svg width="40" height="40" viewBox="0 0 24 24">225 <path d="M12 3a3 3 0 013 3v4a3 3 0 003 3H9a3 3 0 003-3V6a3 3 0 010-3z" fill="#8d8d8d"/>226 </svg>227 </div>228 </div>229 <div class="cart-top">230 <svg width="44" height="44" viewBox="0 0 24 24">231 <path d="M7 6h13l-2 8H8L7 6z" stroke="#212121" stroke-width="2" fill="none" stroke-linejoin="round"/>232 <circle cx="9" cy="19" r="2" fill="#212121"/>233 <circle cx="17" cy="19" r="2" fill="#212121"/>234 </svg>235 </div>236 </div>237 238 <!-- Right side action icons -->239 <div class="side-actions">240 <div class="side-btn">241 <svg width="44" height="44" viewBox="0 0 24 24">242 <path d="M12 21s-7-4.35-7-10a4 4 0 018 0 4 4 0 018 0c0 5.65-7 10-7 10z" fill="none" stroke="#8a8a8a" stroke-width="2"/>243 </svg>244 </div>245 <div class="side-btn">246 <svg width="44" height="44" viewBox="0 0 24 24">247 <path d="M4 12h12l-4-4m4 4l-4 4" stroke="#8a8a8a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>248 </svg>249 </div>250 </div>251 252 <!-- Product image area -->253 <div class="image-area">254 <div class="product-img">[IMG: NIKE Revolution 5 Women’s Running Shoe]</div>255 </div>256 257 <!-- NEW badge -->258 <div class="new-badge">259 <span>NEW</span>260 <small>Arrival</small>261 </div>262 263 <!-- Carousel dots -->264 <div class="dots">265 <div class="dot active"></div>266 <div class="dot"></div>267 <div class="dot"></div>268 <div class="dot"></div>269 <div class="dot"></div>270 </div>271 272 <!-- Product content -->273 <div class="content">274 <div class="link-brand">View more from NIKE</div>275 <div class="title"><b>NIKE</b> Revolution 5 Running Shoes For Women (Multicolor)</div>276 277 <div class="rating-row">278 <div class="stars">279 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 .9-5.1 4.8 1.4 7L12 18l-6.4 3.3 1.4-7L2 9.5l7-.9z" fill="#2e7d32"/></svg></div>280 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 .9-5.1 4.8 1.4 7L12 18l-6.4 3.3 1.4-7L2 9.5l7-.9z" fill="#2e7d32"/></svg></div>281 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 .9-5.1 4.8 1.4 7L12 18l-6.4 3.3 1.4-7L2 9.5l7-.9z" fill="#2e7d32"/></svg></div>282 <div class="star"><svg viewBox="0 0 24 24"><path d="M12 2l3.1 6.6 7 .9-5.1 4.8 1.4 7L12 18l-6.4 3.3 1.4-7L2 9.5l7-.9z" fill="#2e7d32"/></svg></div>283 <div class="star"><svg viewBox="0 0 24 24">284 <defs>285 <clipPath id="half"><rect x="0" y="0" width="12" height="24"/></clipPath>286 </defs>287 <path d="M12 2l3.1 6.6 7 .9-5.1 4.8 1.4 7L12 18l-6.4 3.3 1.4-7L2 9.5l7-.9z" fill="#c8e6c9"/>288 <path d="M12 2l3.1 6.6 7 .9-5.1 4.8 1.4 7L12 18l-6.4 3.3 1.4-7L2 9.5l7-.9z" fill="#2e7d32" clip-path="url(#half)"/>289 </svg></div>290 </div>291 <div class="rating-text">Very Good</div>292 <div class="sep">•</div>293 <div class="ratings-count">49 ratings</div>294 <div class="assured">295 <svg class="assured-icon" viewBox="0 0 24 24">296 <path d="M12 2l7 4v6c0 5-7 10-7 10S5 17 5 12V6z" fill="#ffeb3b" stroke="#1976d2" stroke-width="1.5"/>297 <circle cx="12" cy="10" r="3" fill="#1976d2"/>298 </svg>299 <span>Plus F-Assured</span>300 </div>301 </div>302 303 <div class="deal-tag">Big Saving Deal</div>304 305 <div class="price-row">306 <div class="off">30% off</div>307 <div class="old">3,695</div>308 <div class="new">2,586</div>309 </div>310 </div>311 312 <!-- Floating logo -->313 <div class="float-logo">314 <div class="float-inner">F</div>315 </div>316 317 <!-- Bottom bar -->318 <div class="bottom-bar">319 <div class="mini-cart">320 <svg width="40" height="40" viewBox="0 0 24 24">321 <path d="M7 6h13l-2 8H8L7 6z" stroke="#212121" stroke-width="2" fill="none" stroke-linejoin="round"/>322 </svg>323 <span>+</span>324 </div>325 <div class="emi-btn">Pay with EMI</div>326 <div class="buy-btn">Buy now</div>327 </div>328 329 <div class="handle"></div>330</div>331</body>332</html>