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 - Mobile UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#222; }9 #render-target {10 width:1080px; height:2400px;11 position:relative; overflow:hidden;12 background:#ffffff; border-radius:0;13 }14 15 /* Header */16 .topbar {17 background:#141414;18 color:#fff;19 height:220px;20 position:relative;21 box-sizing:border-box;22 padding:20px 34px 0 34px;23 }24 .status-row {25 height:80px;26 display:flex; align-items:center; justify-content:space-between;27 font-weight:600; font-size:40px;28 opacity:.9;29 }30 .status-icons { display:flex; align-items:center; gap:24px; }31 .nav-row {32 height:120px;33 display:flex; align-items:center; justify-content:space-between;34 padding:0 8px;35 }36 .icon-btn-top {37 width:90px; height:90px; display:flex; align-items:center; justify-content:center;38 border-radius:45px; color:#fff;39 }40 .top-actions { display:flex; align-items:center; gap:30px; }41 42 /* Content area */43 .content {44 position:absolute; left:0; right:0; top:220px; bottom:220px;45 overflow:hidden;46 background:#ffffff;47 }48 .scroller {49 height:100%;50 overflow-y:auto;51 padding:24px 28px 280px 28px; /* bottom padding to clear CTA bar */52 background:#f7f7f7;53 box-sizing:border-box;54 }55 56 .card {57 background:#fff;58 border:1px solid #e9e9e9;59 border-radius:32px;60 box-shadow:0 1px 0 rgba(0,0,0,0.02);61 padding:36px 40px;62 margin:26px 0;63 }64 .row-between { display:flex; align-items:center; justify-content:space-between; }65 66 /* 7 Days Return */67 .return-row { display:flex; align-items:center; gap:28px; }68 .return-ico {69 width:96px; height:96px; border-radius:48px;70 border:2px solid #d9d9d9;71 display:flex; align-items:center; justify-content:center;72 position:relative;73 color:#8a8a8a;74 }75 .return-text { font-size:44px; color:#333; }76 77 /* Product Specifications */78 .card-title {79 font-size:48px; font-weight:700; color:#222;80 }81 .chev {82 width:48px; height:48px; opacity:.6;83 }84 .spec-list { margin-top:28px; display:flex; flex-direction:column; gap:22px; }85 .spec-item { display:flex; align-items:center; justify-content:space-between; }86 .pill {87 min-width:280px;88 padding:18px 28px;89 border-radius:18px;90 background:linear-gradient(90deg, #bfe6e2, #eef6f6);91 color:#2b6c67;92 font-weight:700;93 font-size:38px;94 }95 .spec-value {96 flex:1; text-align:left; padding-left:28px;97 font-size:40px; color:#555;98 }99 100 /* Product Overview */101 .overview-text { margin-top:16px; font-size:38px; line-height:1.5; color:#535353; }102 103 /* Brand card */104 .brand-card {105 background:linear-gradient(180deg, #fde8ef 0%, #fff 65%);106 border:1px solid #f1c9d6;107 }108 .brand-header { display:flex; align-items:center; gap:26px; }109 .brand-logo {110 width:180px; height:72px; background:#E0E0E0; border:1px solid #BDBDBD;111 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px; border-radius:12px;112 }113 .brand-name { font-size:46px; font-weight:800; color:#333; }114 .brand-desc { margin-top:18px; font-size:38px; color:#5a5a5a; line-height:1.52; }115 .visit-btn {116 margin-top:30px;117 height:120px; border-radius:26px;118 border:4px solid #d63a69; color:#d63a69; background:#fff;119 font-size:42px; font-weight:800; letter-spacing:.5px;120 display:flex; align-items:center; justify-content:center;121 }122 123 /* Bottom CTA bar */124 .bottom-bar {125 position:absolute; left:0; right:0; bottom:0;126 background:#ffffff; border-top:2px solid #ededed;127 padding:24px 32px 34px 32px; box-sizing:border-box;128 }129 .cta-wrap { display:flex; align-items:center; gap:28px; }130 .fav-square {131 width:150px; height:150px; border:2px solid #e9e9e9; border-radius:28px;132 display:flex; align-items:center; justify-content:center;133 }134 .btn-outline {135 flex:1;136 height:150px; border-radius:26px;137 border:4px solid #d63a69;138 color:#d63a69; background:#fff;139 font-size:46px; font-weight:800; display:flex; align-items:center; justify-content:center;140 }141 .btn-primary {142 flex:1;143 height:150px; border-radius:26px;144 background:#d63a69; color:#fff; border:none;145 font-size:46px; font-weight:800; display:flex; align-items:center; justify-content:center;146 }147 148 /* Simple utility */149 .muted { color:#a0a0a0; }150 151 /* SVG alignment */152 svg { display:block; }153</style>154</head>155<body>156<div id="render-target">157 158 <!-- Dark Header -->159 <div class="topbar">160 <div class="status-row">161 <div>3:59</div>162 <div class="status-icons">163 <span class="muted">•</span>164 <span class="muted">•</span>165 <span class="muted">•</span>166 <svg width="44" height="44" viewBox="0 0 24 24" fill="#fff" opacity="0.9"><path d="M7 20h10a2 2 0 0 0 2-2v-5a7 7 0 1 0-14 0v5a2 2 0 0 0 2 2z"/></svg>167 </div>168 </div>169 <div class="nav-row">170 <div class="icon-btn-top" aria-label="Back">171 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>172 </div>173 <div class="top-actions">174 <div class="icon-btn-top">175 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>176 </div>177 <div class="icon-btn-top">178 <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M20.8 8.6a5.5 5.5 0 0 0-7.8 0L12 9.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1 7.8 7.6 7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>179 </div>180 <div class="icon-btn-top">181 <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><path d="M6 7h12l-1 12H7L6 7z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg>182 </div>183 </div>184 </div>185 </div>186 187 <!-- Content -->188 <div class="content">189 <div class="scroller">190 191 <!-- 7 Days Return row -->192 <div class="card">193 <div class="row-between">194 <div class="return-row">195 <div class="return-ico">196 <svg width="58" height="58" viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="1.8"><path d="M12 6V3l-3 3 3 3V6z"/><path d="M12 18v3l3-3-3-3v3z"/><circle cx="12" cy="12" r="8"/></svg>197 </div>198 <div class="return-text">7 Days Return</div>199 </div>200 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#9c9c9c" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg>201 </div>202 </div>203 204 <!-- Product Specifications -->205 <div class="card">206 <div class="row-between">207 <div class="card-title">Product Specifications</div>208 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>209 </div>210 211 <div class="spec-list">212 <div class="spec-item">213 <div class="pill">Ideal For</div>214 <div class="spec-value">Home</div>215 </div>216 <div class="spec-item">217 <div class="pill">Material</div>218 <div class="spec-value">Pinewood</div>219 </div>220 <div class="spec-item">221 <div class="pill">Pattern</div>222 <div class="spec-value">Solid</div>223 </div>224 <div class="spec-item">225 <div class="pill">Fabric Weave</div>226 <div class="spec-value">NA</div>227 </div>228 </div>229 </div>230 231 <!-- Product Overview -->232 <div class="card">233 <div class="row-between">234 <div class="card-title">Product Overview</div>235 <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="#8a8a8a" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>236 </div>237 <div class="overview-text">238 Bring home a luxurious seating experience with Utopia Fabric Sofa by Duroflex. Made with trusted Duroflex foam, this sofa is designed for comfort. The …239 </div>240 </div>241 242 <!-- Brand Card -->243 <div class="card brand-card">244 <div class="brand-header">245 <div class="brand-logo">[IMG: Duroflex Logo]</div>246 <div class="brand-name">Duroflex</div>247 </div>248 <div class="brand-desc">249 We are proud makers of India’s only certified orthopedic mattress range. Our wide range of innovative offerings are a result of our inherent fortitude.250 </div>251 <div class="visit-btn">Visit Store</div>252 </div>253 254 </div>255 </div>256 257 <!-- Bottom CTA -->258 <div class="bottom-bar">259 <div class="cta-wrap">260 <div class="fav-square" aria-label="Wishlist">261 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#d63a69" stroke-width="2"><path d="M20.8 8.6a5.5 5.5 0 0 0-7.8 0L12 9.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1 7.8 7.6 7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>262 </div>263 <div class="btn-outline">Buy Now</div>264 <div class="btn-primary">Add to Bag</div>265 </div>266 </div>267 268</div>269</body>270</html>