GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Women Formal Shoes - Product Page Mock</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width:1080px;10 height:2400px;11 position:relative;12 overflow:hidden;13 background: linear-gradient(180deg, #a6ded1 0%, #c7e9df 16%, #ffffff 16%);14 color:#1a1a1a;15 }16 17 /* Top status bar */18 .status-bar {19 height:80px;20 padding:0 36px;21 display:flex;22 align-items:center;23 justify-content:space-between;24 color:#1f3c34;25 font-weight:600;26 font-size:36px;27 }28 .status-icons { display:flex; gap:28px; align-items:center; }29 .status-dot { width:10px; height:10px; background:#2d6559; border-radius:50%; }30 31 /* Header search area */32 .header {33 position:relative;34 height:170px;35 padding:0 36px;36 display:flex;37 align-items:center;38 gap:22px;39 }40 .back-btn {41 width:72px; height:72px; border-radius:36px;42 display:flex; align-items:center; justify-content:center;43 background:transparent;44 }45 .search-bar {46 flex:1;47 height:108px;48 background:#ffffff;49 border-radius:60px;50 box-shadow: 0 4px 0 #e6f3ef inset;51 display:flex;52 align-items:center;53 padding:0 28px;54 gap:22px;55 border:1px solid #d9e9e4;56 }57 .search-input {58 flex:1;59 font-size:40px;60 color:#222;61 }62 .search-right {63 width:88px; height:88px; border-radius:20px;64 display:flex; align-items:center; justify-content:center;65 background:#f3fbf8; border:1px solid #cfe7df;66 }67 68 /* Content area */69 .content {70 padding:32px 36px 260px 36px;71 font-size:40px;72 line-height:1.35;73 }74 .delivery-note { color:#4d7b6f; }75 .delivery-note .bold { font-weight:700; color:#2d5a50; }76 .link { color:#2e9bb4; font-weight:600; }77 .row { display:flex; align-items:center; gap:18px; }78 .in-stock { color:#4fb26b; font-weight:700; margin:28px 0; font-size:48px; }79 .qty-box {80 margin:16px 0 28px;81 width:270px; height:110px;82 border:1px solid #d9e1e1;83 border-radius:18px;84 display:flex; align-items:center; justify-content:space-between;85 padding:0 22px;86 font-size:42px;87 color:#3a3a3a;88 }89 .btn {90 height:120px; border-radius:70px; font-size:46px; font-weight:700;91 display:flex; align-items:center; justify-content:center;92 margin:16px 0;93 }94 .btn-cart {95 background:#F8E892; border:4px solid #EAD477; color:#5f5121;96 }97 .btn-buy {98 background:#F6D7A8; border:4px solid #EECDA0; color:#5c4a27;99 }100 .secure { color:#2d5a50; margin:22px 0; }101 .sold-by { color:#2d5a50; margin-top:14px; }102 .sold-by .brand { color:#2e9bb4; font-weight:700; }103 .wish { color:#2e9bb4; font-weight:700; margin-top:16px; }104 105 /* Benefits row */106 .benefits {107 margin:30px 0 20px;108 display:flex;109 justify-content:space-between;110 gap:18px;111 }112 .benefit {113 width:240px;114 height:200px;115 border-radius:26px;116 background:#f8fbfa;117 border:1px dashed #d6e6df;118 display:flex;119 flex-direction:column;120 align-items:center;121 justify-content:center;122 text-align:center;123 color:#3b5f55;124 padding:18px;125 font-size:32px;126 gap:12px;127 }128 .benefit .icon {129 width:92px; height:92px; border-radius:50%; background:#e7f3ee; display:flex; align-items:center; justify-content:center; border:1px solid #cfe1da;130 }131 132 /* Product details */133 .section-title { font-size:48px; font-weight:800; margin:28px 0 12px; color:#3b3b3b; }134 .details-card {135 border-top:1px solid #e0e0e0;136 padding-top:16px;137 color:#3b3b3b;138 }139 .detail-row { margin:18px 0; }140 .detail-label { font-weight:700; }141 .img-placeholder {142 width: 100%; height: 0; padding-top: 40%;143 background:#E0E0E0; border:1px solid #BDBDBD;144 display:flex; align-items:center; justify-content:center; color:#757575; margin:18px 0;145 }146 147 /* Toast */148 .toast {149 position:absolute; top:1100px; left:300px;150 background:#3a3d41; color:#fff;151 padding:26px 34px;152 border-radius:50px;153 display:flex; align-items:center; gap:20px;154 font-size:44px; font-weight:800;155 box-shadow:0 8px 20px rgba(0,0,0,0.2);156 }157 158 /* Bottom navigation */159 .bottom-nav {160 position:absolute; bottom:0; left:0; right:0;161 height:180px; background:#ffffff; border-top:1px solid #e5e5e5;162 display:flex; align-items:center; justify-content:space-around;163 padding-bottom:16px;164 }165 .nav-item { display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:36px; color:#2f2f2f; }166 .nav-icon {167 width:86px; height:86px; border-radius:22px; background:#f6f6f6; border:1px solid #e1e1e1; display:flex; align-items:center; justify-content:center; margin-bottom:10px;168 }169 .badge {170 position:absolute; top:-10px; right:-10px;171 background:#2396FF; color:#fff; width:54px; height:54px; border-radius:50%;172 display:flex; align-items:center; justify-content:center; font-size:32px; font-weight:800; border:3px solid #fff;173 }174 /* Small home indicator bar above bottom nav (as in screenshot) */175 .home-indicator {176 position:absolute; bottom:188px; left:50%; transform:translateX(-50%);177 width:320px; height:12px; background:#C7C7C7; border-radius:6px;178 }179 180 /* Simple SVG styling */181 svg { display:block; }182</style>183</head>184<body>185<div id="render-target">186 187 <!-- Status Bar -->188 <div class="status-bar">189 <div>6:31</div>190 <div class="status-icons">191 <span class="status-dot"></span>192 <span class="status-dot"></span>193 <span class="status-dot"></span>194 <svg width="36" height="36" viewBox="0 0 24 24"><path d="M20 6v12" stroke="#1f3c34" stroke-width="2"/><path d="M16 8v8" stroke="#1f3c34" stroke-width="2"/><path d="M12 10v4" stroke="#1f3c34" stroke-width="2"/></svg>195 </div>196 </div>197 198 <!-- Header Search -->199 <div class="header">200 <div class="back-btn">201 <svg width="46" height="46" viewBox="0 0 24 24">202 <path d="M15 6L9 12l6 6" stroke="#204b40" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>203 </svg>204 </div>205 <div class="search-bar">206 <svg width="46" height="46" viewBox="0 0 24 24">207 <circle cx="10" cy="10" r="7" stroke="#6c8f86" stroke-width="2" fill="none"/>208 <path d="M15 15l6 6" stroke="#6c8f86" stroke-width="2" fill="none" stroke-linecap="round"/>209 </svg>210 <div class="search-input">women formal shoes</div>211 <div class="search-right">212 <svg width="42" height="42" viewBox="0 0 24 24">213 <rect x="3" y="7" width="18" height="12" rx="2" stroke="#6c8f86" stroke-width="2" fill="none"/>214 <circle cx="12" cy="13" r="3.5" stroke="#6c8f86" stroke-width="2" fill="none"/>215 <rect x="9" y="4" width="6" height="3" rx="1" fill="#6c8f86"/>216 </svg>217 </div>218 </div>219 </div>220 221 <!-- Main Content -->222 <div class="content">223 <div class="delivery-note">224 FREE delivery <span class="bold">Friday, 29 September.</span> Order within <span class="bold">18 hrs 15 mins.</span> <span class="link">Details</span>225 </div>226 227 <div class="row" style="margin-top:22px;">228 <svg width="40" height="40" viewBox="0 0 24 24">229 <path d="M12 2C8.7 2 6 4.7 6 8c0 5 6 14 6 14s6-9 6-14c0-3.3-2.7-6-6-6z" fill="#4f7f73"/>230 <circle cx="12" cy="8" r="3" fill="#ffffff"/>231 </svg>232 <div>Deliver to Loni 201102</div>233 </div>234 235 <div class="in-stock">In stock</div>236 237 <div class="qty-box">238 <div>Qty: 1</div>239 <svg width="38" height="38" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/></svg>240 </div>241 242 <div class="btn btn-cart">Add to Cart</div>243 <div class="btn btn-buy">Buy Now</div>244 245 <div class="row secure">246 <svg width="40" height="40" viewBox="0 0 24 24">247 <rect x="5" y="10" width="14" height="10" rx="2" stroke="#2d5a50" stroke-width="2" fill="none"/>248 <path d="M8 10V7a4 4 0 018 0v3" stroke="#2d5a50" stroke-width="2" fill="none"/>249 </svg>250 <div>Secure transaction</div>251 </div>252 253 <div class="sold-by">254 Sold by <span class="brand">Elegant fe...</span> on Amazon.255 </div>256 <div class="wish">Add to Wish List</div>257 258 <div class="benefits">259 <div class="benefit">260 <div class="icon">261 <svg width="56" height="56" viewBox="0 0 24 24">262 <rect x="3" y="8" width="14" height="8" fill="#5c8f82"/>263 <circle cx="7" cy="18" r="2" fill="#5c8f82"/>264 <circle cx="15" cy="18" r="2" fill="#5c8f82"/>265 <path d="M17 10h4v6" stroke="#5c8f82" stroke-width="2"/>266 </svg>267 </div>268 <div>Free Delivery</div>269 </div>270 <div class="benefit">271 <div class="icon">272 <svg width="56" height="56" viewBox="0 0 24 24">273 <path d="M3 12h10l-3 4" stroke="#5c8f82" stroke-width="2" fill="none" stroke-linecap="round" />274 <circle cx="18" cy="8" r="3" fill="#5c8f82"/>275 </svg>276 </div>277 <div>Pay on Delivery</div>278 </div>279 <div class="benefit">280 <div class="icon">281 <svg width="56" height="56" viewBox="0 0 24 24">282 <rect x="4" y="6" width="16" height="12" rx="2" stroke="#5c8f82" stroke-width="2" fill="none"/>283 <path d="M8 10h8" stroke="#5c8f82" stroke-width="2"/>284 <path d="M12 2v4" stroke="#5c8f82" stroke-width="2"/>285 <path d="M14 20l-3-3 3-3" stroke="#5c8f82" stroke-width="2" fill="none" stroke-linecap="round" />286 </svg>287 </div>288 <div>10 days Return & Exchange</div>289 </div>290 <div class="benefit">291 <div class="icon">292 <svg width="56" height="56" viewBox="0 0 24 24">293 <path d="M3 14h12l3-4v8H3z" fill="#5c8f82"/>294 <circle cx="7" cy="18" r="2" fill="#ffffff"/>295 <circle cx="15" cy="18" r="2" fill="#ffffff"/>296 </svg>297 </div>298 <div>Amazon Delivered</div>299 </div>300 </div>301 302 <div class="section-title">Product details</div>303 <div class="details-card">304 <div class="detail-row"><span class="detail-label">Material Type</span><br/>Synthetic</div>305 <div class="detail-row"><span class="detail-label">Closure Type</span><br/>Pull On</div>306 <div class="detail-row"><span class="detail-label">Heel Type</span><br/>Wedge Heel</div>307 <div class="img-placeholder">[IMG: Product Image Placeholder]</div>308 </div>309 </div>310 311 <!-- Toast: Added to cart -->312 <div class="toast">313 <svg width="48" height="48" viewBox="0 0 24 24">314 <path d="M5 13l4 4L19 7" stroke="#ffffff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>315 </svg>316 <div>Added to cart</div>317 </div>318 319 <!-- Bottom Home indicator -->320 <div class="home-indicator"></div>321 322 <!-- Bottom Navigation -->323 <div class="bottom-nav">324 <div class="nav-item">325 <div class="nav-icon">326 <svg width="40" height="40" viewBox="0 0 24 24">327 <path d="M3 10l9-7 9 7v9H3z" stroke="#4b4b4b" stroke-width="2" fill="none"/>328 </svg>329 </div>330 <div>Home</div>331 </div>332 <div class="nav-item">333 <div class="nav-icon">334 <svg width="40" height="40" viewBox="0 0 24 24">335 <circle cx="12" cy="8" r="4" stroke="#4b4b4b" stroke-width="2" fill="none"/>336 <path d="M5 20c2-4 12-4 14 0" stroke="#4b4b4b" stroke-width="2" fill="none"/>337 </svg>338 </div>339 <div>You</div>340 </div>341 <div class="nav-item">342 <div class="nav-icon">343 <svg width="40" height="40" viewBox="0 0 24 24">344 <path d="M5 12a7 7 0 0114 0M5 12a7 7 0 0014 0" stroke="#4b4b4b" stroke-width="2" fill="none" stroke-linecap="round"/>345 </svg>346 </div>347 <div>More</div>348 </div>349 <div class="nav-item" style="position:relative;">350 <div class="nav-icon" style="position:relative;">351 <svg width="40" height="40" viewBox="0 0 24 24">352 <path d="M4 6h16l-3 9H7L4 6z" stroke="#4b4b4b" stroke-width="2" fill="none"/>353 <circle cx="9" cy="19" r="2" fill="#4b4b4b"/>354 <circle cx="15" cy="19" r="2" fill="#4b4b4b"/>355 </svg>356 <div class="badge">5</div>357 </div>358 <div>Cart</div>359 </div>360 <div class="nav-item">361 <div class="nav-icon">362 <svg width="40" height="40" viewBox="0 0 24 24">363 <path d="M4 6h16M4 12h16M4 18h16" stroke="#4b4b4b" stroke-width="2" stroke-linecap="round"/>364 </svg>365 </div>366 <div>Menu</div>367 </div>368 </div>369 370</div>371</body>372</html>