GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="utf-8">4<title>Women's Formal Shoes - Product Page Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Arial, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: linear-gradient(180deg, #a8e1d8 0%, #bfe6de 40%, #ffffff 40%, #ffffff 100%);13 color: #222;14 }15 16 /* Status bar */17 .status-bar {18 height: 90px;19 display: flex;20 align-items: center;21 padding: 0 36px;22 font-weight: 600;23 color: #2b2b2b;24 font-size: 36px;25 }26 .status-icons {27 margin-left: auto;28 display: flex;29 gap: 26px;30 align-items: center;31 }32 .dot { width: 12px; height: 12px; background:#3c3c3c; border-radius:50%; }33 34 /* Search header */35 .header {36 padding: 0 24px 24px 24px;37 }38 .search-row {39 display: flex;40 align-items: center;41 gap: 20px;42 }43 .back-btn {44 width: 72px; height: 72px; border-radius: 36px; display:flex; align-items:center; justify-content:center;45 }46 .search-box {47 flex: 1;48 background: #ffffff;49 border-radius: 60px;50 height: 96px;51 box-shadow: 0 2px 0 rgba(0,0,0,0.08) inset;52 border: 1px solid #d6d6d6;53 display: flex;54 align-items: center;55 padding: 0 28px;56 gap: 18px;57 font-size: 34px;58 color: #222;59 }60 .search-box .placeholder { color: #333; flex: 1; }61 .scan-btn {62 width: 70px; height: 70px; border-radius: 18px; border:1px solid #c9c9c9; display:flex; align-items:center; justify-content:center; background:#f7f7f7;63 }64 65 /* Content */66 .content {67 background: #fff;68 border-top-left-radius: 20px;69 border-top-right-radius: 20px;70 padding: 24px 32px 0 32px;71 }72 73 .link-store { color: #007185; font-weight: 600; font-size: 36px; margin-top: 8px; }74 .title { font-size: 36px; line-height: 1.35; color:#333; margin-top: 16px; }75 .rating-row {76 display: flex; align-items: center; gap: 12px; margin-top: 16px;77 font-size: 34px;78 }79 .stars span { color: #f59f00; font-size: 36px; }80 .best-seller {81 margin-top: 18px;82 display:flex; align-items:center; gap: 16px; flex-wrap: wrap;83 }84 .badge {85 background: #cc6a00;86 color: #fff;87 font-weight: 700;88 font-size: 28px;89 padding: 12px 20px;90 border-radius: 18px;91 }92 .cat-link { color: #007185; font-size: 32px; }93 .share-wrap {94 position: absolute; right: 40px; top: 420px; width: 90px; height: 90px; border-radius: 45px; background:#fff; border:1px solid #dcdcdc; display:flex; align-items:center; justify-content:center;95 box-shadow: 0 2px 6px rgba(0,0,0,0.06);96 }97 98 /* Product image area */99 .image-area {100 margin-top: 30px;101 position: relative;102 background:#fff;103 border-radius: 0;104 }105 .product-img {106 width: 1016px; height: 720px; margin: 0 auto;107 background:#E0E0E0; border:1px solid #BDBDBD;108 display:flex; align-items:center; justify-content:center; color:#757575; font-size: 34px; text-align:center;109 }110 .fav {111 position: absolute; left: 36px; bottom: 26px; width: 84px; height: 84px; border-radius: 42px; background:#fff; border:1px solid #dcdcdc; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,0.06);112 }113 114 .dots { display:flex; justify-content:center; gap: 24px; margin: 24px 0 8px 0; }115 .dot-i { width: 18px; height: 18px; border-radius:50%; border:2px solid #999; }116 .dot-i.active { background:#333; border-color:#333; }117 118 /* Colour section */119 .colour { margin-top: 24px; font-size: 40px; font-weight: 600; }120 .colour .value { color:#000; }121 .swatches { margin-top: 20px; display:flex; gap: 36px; align-items:center; }122 .swatch {123 width: 190px; height: 190px; border-radius: 50%;124 border: 6px solid #111; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff;125 }126 .swatch .img {127 width: 170px; height: 170px; background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; font-size: 26px;128 display:flex; align-items:center; justify-content:center; text-align:center; padding:8px;129 }130 .swatch.secondary { border-color:#b5b5b5; }131 .info-bars { margin-top: 32px; display:grid; grid-template-columns: 1fr 1fr; gap: 26px; }132 .bar { height: 32px; background:#efefef; border-radius: 8px; }133 134 /* Bottom nav */135 .bottom-nav {136 position: absolute; left: 0; bottom: 90px; width: 100%; height: 160px; background:#ffffff; border-top:1px solid #e6e6e6;137 display:flex; align-items:center; justify-content:space-around;138 }139 .nav-item { display:flex; flex-direction:column; align-items:center; gap: 10px; color:#333; font-size: 30px; }140 .nav-item.active { color:#1f86a9; }141 .badge-count {142 position: absolute; top: -6px; right: -16px;143 background:#ff6a00; color:#fff; font-weight:700; font-size:24px; padding:4px 10px; border-radius:14px;144 }145 .gesture { position:absolute; left:50%; transform:translateX(-50%); bottom: 24px; width: 420px; height: 10px; border-radius:6px; background:#777; opacity:0.6; }146 147 /* Simple icon styles */148 svg { display:block; }149</style>150</head>151<body>152<div id="render-target">153 154 <!-- Status bar -->155 <div class="status-bar">156 6:29157 <div class="status-icons">158 <span class="dot"></span>159 <span class="dot"></span>160 <span class="dot"></span>161 <!-- Battery icon -->162 <svg width="44" height="22">163 <rect x="2" y="4" width="34" height="14" rx="3" ry="3" fill="#3c3c3c"></rect>164 <rect x="38" y="8" width="4" height="6" fill="#3c3c3c"></rect>165 </svg>166 </div>167 </div>168 169 <!-- Search header -->170 <div class="header">171 <div class="search-row">172 <div class="back-btn">173 <svg width="40" height="40" viewBox="0 0 24 24">174 <path d="M15 5L7 12l8 7" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>175 </svg>176 </div>177 <div class="search-box">178 <svg width="34" height="34" viewBox="0 0 24 24">179 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"></circle>180 <line x1="15.5" y1="15.5" x2="21" y2="21" stroke="#666" stroke-width="2"></line>181 </svg>182 <div class="placeholder">women formal shoes</div>183 <div class="scan-btn">184 <svg width="32" height="32" viewBox="0 0 24 24">185 <rect x="4" y="4" width="16" height="16" stroke="#555" stroke-width="2" fill="none"></rect>186 <rect x="8" y="9" width="8" height="6" fill="#555"></rect>187 </svg>188 </div>189 </div>190 </div>191 </div>192 193 <!-- Content -->194 <div class="content">195 <div class="link-store">Visit the Elegant feet Store</div>196 <div class="title">Elegant feet Latest Collection | Comfortable Stylish Solid Wedge Heel Slip-On Formal Shoes for Womens & Girls (105)</div>197 198 <div class="rating-row">199 <div class="stars">200 <span>★ ★ ★ ★</span><span style="color:#f5c56a;">★</span>201 </div>202 <div style="color:#666;">9</div>203 </div>204 205 <div class="best-seller">206 <div class="badge">#1 Best Seller</div>207 <div class="cat-link">in Women's Formal Shoes</div>208 </div>209 210 <!-- Share button -->211 <div class="share-wrap">212 <svg width="36" height="36" viewBox="0 0 24 24">213 <circle cx="6" cy="12" r="3" fill="#5d646a"></circle>214 <circle cx="18" cy="6" r="3" fill="#5d646a"></circle>215 <circle cx="18" cy="18" r="3" fill="#5d646a"></circle>216 <path d="M8.8 11l6-3.4M8.8 13l6 3.4" stroke="#5d646a" stroke-width="2" fill="none"></path>217 </svg>218 </div>219 220 <!-- Product image area -->221 <div class="image-area">222 <div class="product-img">[IMG: Black Wedge Slip-On Formal Shoes]</div>223 <div class="fav">224 <svg width="40" height="40" viewBox="0 0 24 24">225 <path d="M12 21s-6-4.35-8.5-7.3C1.5 11.5 2.5 8.5 5.2 8.2c2-.2 3.3 1.5 3.8 2.5.5-1 1.8-2.7 3.8-2.5 2.7.3 3.7 3.3 1.7 5.5C18 16.7 12 21 12 21z" stroke="#555" stroke-width="1.6" fill="none"></path>226 </svg>227 </div>228 229 <div class="dots">230 <div class="dot-i active"></div>231 <div class="dot-i"></div>232 <div class="dot-i"></div>233 <div class="dot-i"></div>234 <div class="dot-i"></div>235 <div class="dot-i"></div>236 <div class="dot-i"></div>237 <div class="dot-i"></div>238 </div>239 </div>240 241 <!-- Colour section -->242 <div class="colour">Colour: <span class="value">Black</span></div>243 <div class="swatches">244 <div class="swatch">245 <div class="img">[IMG: Black Shoe]</div>246 </div>247 <div class="swatch secondary">248 <div class="img">[IMG: Brown Shoe]</div>249 </div>250 </div>251 252 <div class="info-bars">253 <div class="bar"></div>254 <div class="bar"></div>255 <div class="bar"></div>256 <div class="bar"></div>257 </div>258 </div>259 260 <!-- Bottom navigation -->261 <div class="bottom-nav">262 <div class="nav-item active">263 <svg width="44" height="44" viewBox="0 0 24 24">264 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" fill="#1f86a9"></path>265 </svg>266 <div>Home</div>267 </div>268 <div class="nav-item">269 <svg width="44" height="44" viewBox="0 0 24 24">270 <circle cx="12" cy="8" r="4" fill="#666"></circle>271 <path d="M4 21c0-4 4-6 8-6s8 2 8 6" fill="#666"></path>272 </svg>273 <div>You</div>274 </div>275 <div class="nav-item">276 <svg width="44" height="44" viewBox="0 0 24 24">277 <circle cx="12" cy="12" r="10" stroke="#666" stroke-width="2" fill="none"></circle>278 <circle cx="12" cy="12" r="4" fill="#666"></circle>279 </svg>280 <div>More</div>281 </div>282 <div class="nav-item" style="position:relative;">283 <svg width="44" height="44" viewBox="0 0 24 24">284 <path d="M6 6h14l-2 10H8L6 6zM6 6l-2-2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>285 </svg>286 <div>Cart</div>287 <div class="badge-count">4</div>288 </div>289 <div class="nav-item">290 <svg width="44" height="44" viewBox="0 0 24 24">291 <rect x="3" y="5" width="18" height="2" fill="#666"></rect>292 <rect x="3" y="11" width="18" height="2" fill="#666"></rect>293 <rect x="3" y="17" width="18" height="2" fill="#666"></rect>294 </svg>295 <div>Menu</div>296 </div>297 </div>298 <div class="gesture"></div>299</div>300</body>301</html>