GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - iPhone 15 Series</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background: linear-gradient(180deg,#BEE7E1 0%, #D1F0E9 25%, #FFFFFF 25%, #FFFFFF 100%);11 }12 /* Top status bar */13 .status-bar {14 position:absolute; top:0; left:0; right:0;15 height:96px; padding:0 36px;16 display:flex; align-items:center; justify-content:space-between;17 color:#1b1b1b; font-weight:600; font-size:34px;18 }19 /* Search header */20 .search-header {21 position:absolute; top:86px; left:0; right:0;22 height:140px; display:flex; align-items:center; gap:24px;23 padding:0 28px;24 }25 .search-box {26 flex:1; height:110px; background:#fff; border-radius:28px;27 box-shadow: 0 4px 10px rgba(0,0,0,0.12);28 display:flex; align-items:center;29 padding:0 28px; gap:22px; border:1px solid #dcdcdc;30 font-size:42px; color:#333;31 }32 .search-text { flex:1; color:#222; }33 .icon-btn {34 width:100px; height:100px; display:flex; align-items:center; justify-content:center;35 background:#fff; border-radius:22px; border:1px solid #e0e0e0; box-shadow:0 4px 10px rgba(0,0,0,0.08);36 }37 .img-hero {38 position:absolute; top:250px; left:0; width:1080px; height:420px;39 background:#E0E0E0; border-top:1px solid #BDBDBD; border-bottom:1px solid #BDBDBD;40 display:flex; align-items:center; justify-content:center; color:#555; font-size:36px;41 }42 .fav-icon {43 position:absolute; top:310px; left:36px; width:74px; height:74px;44 background:#fff; border-radius:50%; border:1px solid #ddd; display:flex; align-items:center; justify-content:center;45 box-shadow:0 2px 6px rgba(0,0,0,0.12);46 }47 .carousel-dots {48 position:absolute; top:650px; left:0; width:1080px; display:flex; justify-content:center; gap:24px;49 }50 .dot { width:18px; height:18px; border-radius:50%; border:2px solid #9aa1a7; }51 .dot.active { background:#2f7d89; border-color:#2f7d89; }52 /* Content section */53 .content {54 position:absolute; top:720px; left:0; right:0;55 padding:40px 36px 0 36px; background:#fff;56 }57 .title { font-size:56px; font-weight:800; color:#111; }58 .subtitle { margin-top:16px; font-size:34px; color:#555; }59 .price-block { margin-top:40px; display:flex; align-items:flex-end; gap:26px; }60 .deal-pill {61 background:#e53935; color:#fff; font-weight:700; font-size:36px;62 border-radius:16px; padding:16px 22px;63 }64 .discount { font-size:84px; color:#d32f2f; font-weight:800; line-height:1; }65 .price { font-size:76px; color:#111; font-weight:800; line-height:1; }66 .mrp { margin-top:12px; font-size:32px; color:#777; }67 .mrp s { color:#999; }68 .emi { margin-top:24px; font-size:34px; color:#333; }69 .divider { margin:28px 0; height:2px; background:#eee; }70 .section-row { display:flex; align-items:center; justify-content:space-between; }71 .section-title { font-size:42px; font-weight:800; color:#111; }72 .chev { width:38px; height:38px; transform:rotate(90deg); }73 .color-options { display:flex; gap:28px; margin-top:26px; }74 .color-card {75 width:312px; height:390px; border:1px solid #e5e5e5; border-radius:26px; background:#fff;76 display:flex; flex-direction:column; align-items:center; justify-content:flex-start;77 box-shadow:0 2px 6px rgba(0,0,0,0.06);78 }79 .color-card.selected { border:2px solid #ff8e3c; box-shadow:0 0 0 4px rgba(255,142,60,0.12) inset; }80 .swatch {81 width:230px; height:230px; border-radius:50%;82 background: #ccc; border:1px solid #d7d7d7; margin-top:36px;83 box-shadow: inset 0 10px 40px rgba(0,0,0,0.08);84 }85 .swatch.black { background:#4b4944; }86 .swatch.blue { background:#d8dde2; }87 .swatch.green { background:#d7e1cf; }88 .color-label { margin-top:26px; font-size:40px; font-weight:700; color:#222; }89 .size-row { margin-top:40px; display:flex; align-items:center; justify-content:space-between; }90 .size-title { font-size:42px; font-weight:800; color:#111; }91 .size-options { display:flex; gap:28px; margin-top:26px; }92 .size-card {93 width:324px; height:340px; border:1px solid #e5e5e5; border-radius:26px; background:#fff;94 display:flex; flex-direction:column; padding:26px;95 box-shadow:0 2px 6px rgba(0,0,0,0.06);96 }97 .size-card.selected { border:2px solid #ff8e3c; box-shadow:0 0 0 4px rgba(255,142,60,0.12) inset; }98 .size { font-size:40px; font-weight:800; color:#222; }99 .card-price { margin-top:18px; font-size:46px; font-weight:800; color:#111; }100 .strike { margin-top:8px; font-size:34px; color:#888; }101 .stock { margin-top:12px; font-size:36px; color:#1e8e3e; font-weight:700; }102 .scroll-hint { width:940px; height:10px; background:#ccc; border-radius:8px; margin:22px auto; }103 /* Bottom navigation */104 .bottom-nav {105 position:absolute; bottom:0; left:0; right:0;106 height:160px; border-top:1px solid #e6e6e6; background:#fff;107 display:flex; justify-content:space-around; align-items:center;108 }109 .nav-item { display:flex; flex-direction:column; align-items:center; gap:10px; color:#222; font-size:34px; }110 .nav-icon {111 width:86px; height:86px; display:flex; align-items:center; justify-content:center;112 color:#222;113 }114 .center-handle {115 position:absolute; bottom:170px; left:50%; transform:translateX(-50%);116 width:360px; height:12px; background:#cfcfcf; border-radius:8px;117 }118</style>119</head>120<body>121<div id="render-target">122 123 <!-- Status bar -->124 <div class="status-bar">125 <div>9:58</div>126 <div style="display:flex; align-items:center; gap:24px;">127 <!-- simple status icons -->128 <svg width="34" height="34"><circle cx="17" cy="17" r="8" fill="#333"/></svg>129 <svg width="34" height="34"><rect x="4" y="6" width="26" height="22" rx="3" fill="#333"/></svg>130 </div>131 </div>132 133 <!-- Search header -->134 <div class="search-header">135 <div class="icon-btn">136 <svg width="44" height="44" viewBox="0 0 24 24">137 <path d="M15 18l-6-6 6-6" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 </div>140 <div class="search-box">141 <svg width="44" height="44" viewBox="0 0 24 24">142 <circle cx="10" cy="10" r="7" stroke="#666" stroke-width="2" fill="none"/>143 <path d="M15 15l6 6" stroke="#666" stroke-width="2" />144 </svg>145 <div class="search-text">iphone 15</div>146 <div class="icon-btn" style="width:96px; height:96px;">147 <svg width="40" height="40" viewBox="0 0 24 24">148 <rect x="4" y="6" width="16" height="12" rx="3" fill="none" stroke="#333" stroke-width="2"/>149 <circle cx="12" cy="12" r="3.5" fill="none" stroke="#333" stroke-width="2"/>150 </svg>151 </div>152 </div>153 </div>154 155 <!-- Hero image placeholder -->156 <div class="img-hero">[IMG: iPhone 15 Hero]</div>157 <div class="fav-icon">158 <svg width="34" height="34" viewBox="0 0 24 24">159 <path d="M12 21s-6.4-4.3-8.4-7.3c-2-3 0-6.7 3.8-6.7 2 0 3.4 1.1 4.6 2.6C13.2 8.1 14.6 7 16.6 7c3.8 0 5.8 3.7 3.8 6.7C18.4 16.7 12 21 12 21z" fill="#e53935"/>160 </svg>161 </div>162 163 <!-- Carousel dots -->164 <div class="carousel-dots">165 <div class="dot"></div>166 <div class="dot active"></div>167 <div class="dot"></div>168 <div class="dot"></div>169 <div class="dot"></div>170 <div class="dot"></div>171 </div>172 173 <!-- Content -->174 <div class="content">175 <div class="title">iPhone 15 Series</div>176 <div class="subtitle">4 options to choose from</div>177 178 <div class="price-block">179 <div class="deal-pill">Deal</div>180 <div class="discount">-7%</div>181 <div class="price">₹83,999</div>182 </div>183 <div class="mrp">M.R.P.: <s>₹89,900</s></div>184 <div class="emi">EMI from ₹4,072. No Cost EMI available. <span style="color:#2e6f73; font-weight:700;">EMI options</span> Inclusive of all taxes</div>185 186 <div class="divider"></div>187 188 <div class="section-row">189 <div class="section-title">Colour: <span style="font-weight:800; color:#111;">Black</span></div>190 <svg class="chev" viewBox="0 0 24 24">191 <path d="M8 10l4 4 4-4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>192 </svg>193 </div>194 195 <div class="color-options">196 <div class="color-card selected">197 <div class="swatch black"></div>198 <div class="color-label">Black</div>199 </div>200 <div class="color-card">201 <div class="swatch blue"></div>202 <div class="color-label">Blue</div>203 </div>204 <div class="color-card">205 <div class="swatch green"></div>206 <div class="color-label">Green</div>207 </div>208 </div>209 210 <div class="scroll-hint"></div>211 212 <div class="size-row">213 <div class="size-title">Size: <span style="font-weight:800;">256 GB</span></div>214 <svg class="chev" viewBox="0 0 24 24">215 <path d="M8 10l4 4 4-4" stroke="#222" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>216 </svg>217 </div>218 219 <div class="size-options">220 <div class="size-card">221 <div class="size">128 GB</div>222 <div class="card-price">₹72,990</div>223 <div class="strike"><s>₹79,900.00</s></div>224 <div class="stock">In stock</div>225 </div>226 <div class="size-card selected">227 <div class="size">256 GB</div>228 <div class="card-price">₹83,999</div>229 <div class="strike"><s>₹89,900.00</s></div>230 <div class="stock">In stock</div>231 </div>232 <div class="size-card">233 <div class="size">512 GB</div>234 <div class="card-price">₹1,02,999</div>235 <div class="strike"><s>₹1,09,900.00</s></div>236 <div class="stock">In stock</div>237 </div>238 </div>239 240 <div class="scroll-hint" style="width:930px;"></div>241 </div>242 243 <!-- Bottom nav -->244 <div class="bottom-nav">245 <div class="nav-item">246 <div class="nav-icon">247 <svg width="44" height="44" viewBox="0 0 24 24">248 <path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2z" fill="#222"/>249 </svg>250 </div>251 <div>Home</div>252 </div>253 <div class="nav-item">254 <div class="nav-icon">255 <svg width="44" height="44" viewBox="0 0 24 24">256 <circle cx="12" cy="8" r="4" fill="#222"/>257 <path d="M4 22c0-5 4-7 8-7s8 2 8 7" stroke="#222" stroke-width="2" fill="none"/>258 </svg>259 </div>260 <div>You</div>261 </div>262 <div class="nav-item">263 <div class="nav-icon">264 <svg width="44" height="44" viewBox="0 0 24 24">265 <rect x="3" y="4" width="18" height="6" rx="2" fill="#222"/>266 <rect x="3" y="12" width="18" height="8" rx="2" fill="#222"/>267 </svg>268 </div>269 <div>More</div>270 </div>271 <div class="nav-item">272 <div class="nav-icon">273 <svg width="56" height="56" viewBox="0 0 24 24">274 <path d="M6 6h14l-2 9H7L6 6z" stroke="#222" stroke-width="2" fill="none"/>275 <circle cx="9" cy="20" r="2" fill="#222"/>276 <circle cx="17" cy="20" r="2" fill="#222"/>277 </svg>278 </div>279 <div>Cart</div>280 </div>281 <div class="nav-item">282 <div class="nav-icon">283 <svg width="44" height="44" viewBox="0 0 24 24">284 <path d="M3 6h18M3 12h18M3 18h18" stroke="#222" stroke-width="2"/>285 </svg>286 </div>287 <div>Menu</div>288 </div>289 </div>290 291 <div class="center-handle"></div>292 293</div>294</body>295</html>