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>UI Render</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#ffffff; border-radius:24px;12 box-shadow: 0 8px 30px rgba(0,0,0,0.15);13 }14 15 /* Header */16 .header {17 background: linear-gradient(180deg, #7adbd3 0%, #b8efe9 100%);18 height: 250px; position:relative;19 padding: 18px 24px 0 24px;20 color:#0a3c3c;21 }22 .statusbar {23 display:flex; justify-content:space-between; align-items:center;24 font-size:28px; color:#083a3a; opacity:.9;25 padding: 6px 6px 12px 6px;26 }27 .status-right { display:flex; gap:18px; align-items:center; }28 .header-row {29 display:flex; align-items:center; gap:24px;30 }31 .back-btn {32 width:70px; height:70px; border-radius:35px;33 display:flex; align-items:center; justify-content:center;34 }35 .search-bar {36 flex:1; height:92px; background:#fff; border-radius:46px;37 display:flex; align-items:center; padding:0 28px; gap:18px;38 box-shadow: 0 6px 16px rgba(0,0,0,0.15);39 }40 .search-text { flex:1; font-size:34px; color:#444; }41 .scan-icon {42 width:66px; height:66px; border-radius:18px; border:1px solid #d9d9d9;43 display:flex; align-items:center; justify-content:center; color:#555;44 background:#fff;45 }46 .divider { height:10px; background:#e9e9e9; }47 48 /* Content */49 .content { padding: 32px; color:#222; }50 .promo-muted { color:#6c6c6c; font-size:30px; }51 .delivery-info p { margin:14px 0; font-size:34px; line-height:1.35; }52 .link { color:#0583a5; }53 .green { color:#0a9c5f; }54 .select-location {55 display:flex; align-items:center; gap:16px; color:#0d7f97; font-size:36px;56 margin-top:18px;57 }58 59 .stock { color:#058c3f; font-size:52px; margin:44px 0 24px; }60 61 .qty {62 width:210px; height:86px; border-radius:20px; border:1px solid #d0d0d0;63 display:flex; align-items:center; justify-content:space-between;64 padding: 0 20px; font-size:34px; color:#444; background:#fff;65 box-shadow: 0 4px 8px rgba(0,0,0,0.06);66 margin-bottom:26px;67 }68 69 .btn {70 width: 924px; height:120px; border:none; border-radius:60px;71 font-size:40px; font-weight:bold; color:#1a1a1a; margin:24px 0;72 display:block;73 }74 .btn.add { background:#ffd335; }75 .btn.buy { background:#ff9c32; }76 77 .secure {78 display:flex; align-items:center; gap:16px; font-size:36px; margin:26px 0;79 }80 .secure .link { font-weight:500; }81 82 .seller { font-size:34px; color:#333; margin:10px 0; }83 .wishlist { font-size:34px; margin:6px 0; }84 85 .features {86 margin:36px 0 10px; padding:22px 0;87 border-top: 1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;88 display:flex; justify-content:space-around; text-align:center;89 }90 .feature {91 width:240px;92 }93 .feature .img {94 width:160px; height:120px; margin:0 auto 12px;95 background:#E0E0E0; border:1px solid #BDBDBD;96 display:flex; justify-content:center; align-items:center; color:#757575; font-size:24px;97 }98 .feature .caption { font-size:30px; color:#3a3a3a; }99 100 .section {101 padding:28px 0; border-bottom:1px solid #e6e6e6;102 }103 .section-header {104 display:flex; justify-content:space-between; align-items:center;105 font-size:46px; font-weight:700; color:#222;106 }107 .subhead { font-size:36px; color:#232323; margin-top:16px; }108 .underline { width:140px; height:6px; background:#0a9395; border-radius:3px; margin-top:8px; }109 110 /* Bottom navigation */111 .bottom-nav {112 position:absolute; left:0; right:0; bottom:110px;113 height:150px; background:#ffffff; border-top:1px solid #e3e3e3;114 display:flex; justify-content:space-around; align-items:center; text-align:center;115 }116 .nav-item { width:160px; color:#4a4a4a; }117 .nav-item .label { font-size:28px; margin-top:8px; }118 .nav-item.active { color:#117f8a; }119 .cart-badge {120 position:absolute; top:-8px; right:-10px;121 background:#f25d2f; color:#fff; font-size:22px; width:34px; height:34px; border-radius:17px;122 display:flex; align-items:center; justify-content:center;123 }124 125 /* Tiny system home indicator */126 .home-indicator {127 position:absolute; bottom:52px; left:50%; transform:translateX(-50%);128 width:240px; height:10px; background:#bfbfbf; border-radius:6px;129 opacity:.8;130 }131</style>132</head>133<body>134<div id="render-target">135 <div class="header">136 <div class="statusbar">137 <div>11:24 • • • • •</div>138 <div class="status-right">⌁ ✦ ⌁</div>139 </div>140 <div class="header-row">141 <div class="back-btn">142 <svg width="48" height="48" viewBox="0 0 48 48">143 <path d="M30 12 L18 24 L30 36" stroke="#1e2a2a" stroke-width="5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>144 </svg>145 </div>146 <div class="search-bar">147 <svg width="40" height="40" viewBox="0 0 48 48">148 <circle cx="20" cy="20" r="12" stroke="#7f7f7f" stroke-width="4" fill="none"></circle>149 <line x1="30" y1="30" x2="44" y2="44" stroke="#7f7f7f" stroke-width="4" stroke-linecap="round"></line>150 </svg>151 <div class="search-text">formal suit for women</div>152 <div class="scan-icon">153 <svg width="36" height="36" viewBox="0 0 48 48">154 <rect x="10" y="10" width="28" height="28" rx="4" ry="4" stroke="#777" stroke-width="3" fill="none"></rect>155 <circle cx="24" cy="24" r="6" stroke="#777" stroke-width="3" fill="none"></circle>156 </svg>157 </div>158 </div>159 </div>160 </div>161 <div class="divider"></div>162 163 <div class="content">164 <div class="delivery-info">165 <p><span style="color:#0a88b1; font-weight:600;">FREE delivery</span> Sunday, 3 September. <span class="link">Details</span></p>166 <p>Or fastest delivery <b>Tomorrow, 2 September.</b> Order within <span class="green">1 hr 20 mins.</span> <span class="link">Details</span></p>167 <div class="select-location">168 <svg width="40" height="40" viewBox="0 0 48 48">169 <path d="M24 6 C17 6 12 11 12 18 C12 27 24 42 24 42 C24 42 36 27 36 18 C36 11 31 6 24 6 Z" stroke="#147a8a" stroke-width="3" fill="none"></path>170 <circle cx="24" cy="18" r="5" fill="none" stroke="#147a8a" stroke-width="3"></circle>171 </svg>172 <span class="link" style="font-weight:500;">Select delivery location</span>173 </div>174 </div>175 176 <div class="stock">In stock</div>177 178 <div class="qty">179 <span>Qty: 1</span>180 <svg width="40" height="40" viewBox="0 0 40 40">181 <path d="M10 16 L20 26 L30 16" stroke="#444" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>182 </svg>183 </div>184 185 <button class="btn add">Add to Cart</button>186 <button class="btn buy">Buy Now</button>187 188 <div class="secure">189 <svg width="40" height="40" viewBox="0 0 48 48">190 <rect x="12" y="22" width="24" height="18" rx="3" ry="3" stroke="#9a9a9a" stroke-width="3" fill="none"></rect>191 <path d="M16 22 V16 C16 12 20 10 24 10 C28 10 32 12 32 16 V22" stroke="#9a9a9a" stroke-width="3" fill="none"></path>192 </svg>193 <span class="link">Secure transaction</span>194 </div>195 196 <div class="seller">Sold by <span class="link">Zolario</span> and <span class="link">Fulfilled by Amazon</span>.</div>197 <div class="wishlist"><span class="link">Add to Wish List</span></div>198 199 <div class="features">200 <div class="feature">201 <div class="img">[IMG: Free Delivery icon]</div>202 <div class="caption">Free Delivery</div>203 </div>204 <div class="feature">205 <div class="img">[IMG: Pay on Delivery icon]</div>206 <div class="caption">Pay on Delivery</div>207 </div>208 <div class="feature">209 <div class="img">[IMG: Return & Exchange icon]</div>210 <div class="caption">10 days Return & Exchange</div>211 </div>212 <div class="feature">213 <div class="img">[IMG: Amazon Delivered icon]</div>214 <div class="caption">Amazon Delivered</div>215 </div>216 </div>217 218 <div class="section">219 <div class="section-header">220 <span>Product Details</span>221 <svg width="40" height="40" viewBox="0 0 40 40">222 <path d="M10 16 L20 26 L30 16" stroke="#444" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>223 </svg>224 </div>225 <div class="subhead">Material Composition</div>226 <div class="underline"></div>227 </div>228 </div>229 230 <div class="bottom-nav">231 <div class="nav-item active">232 <div>233 <svg width="42" height="42" viewBox="0 0 48 48">234 <path d="M8 22 L24 10 L40 22 V38 H28 V28 H20 V38 H8 Z" stroke="#117f8a" stroke-width="3.5" fill="none" stroke-linejoin="round"></path>235 </svg>236 </div>237 <div class="label">Home</div>238 </div>239 <div class="nav-item">240 <div>241 <svg width="42" height="42" viewBox="0 0 48 48">242 <circle cx="24" cy="16" r="7" stroke="#666" stroke-width="3" fill="none"></circle>243 <path d="M10 38 C12 28 36 28 38 38" stroke="#666" stroke-width="3" fill="none" stroke-linecap="round"></path>244 </svg>245 </div>246 <div class="label">You</div>247 </div>248 <div class="nav-item">249 <div>250 <svg width="42" height="42" viewBox="0 0 48 48">251 <path d="M36 24 A12 12 0 1 1 24 12" stroke="#666" stroke-width="3" fill="none"></path>252 <polyline points="30,10 36,12 34,18" stroke="#666" stroke-width="3" fill="none"></polyline>253 </svg>254 </div>255 <div class="label">More</div>256 </div>257 <div class="nav-item" style="position:relative;">258 <div style="position:relative; display:inline-block;">259 <svg width="42" height="42" viewBox="0 0 48 48">260 <path d="M12 14 H40 L36 30 H18 L12 14 Z" stroke="#666" stroke-width="3" fill="none" stroke-linejoin="round"></path>261 <circle cx="20" cy="36" r="3.5" fill="none" stroke="#666" stroke-width="3"></circle>262 <circle cx="32" cy="36" r="3.5" fill="none" stroke="#666" stroke-width="3"></circle>263 </svg>264 <div class="cart-badge">6</div>265 </div>266 <div class="label">Cart</div>267 </div>268 <div class="nav-item">269 <div>270 <svg width="42" height="42" viewBox="0 0 48 48">271 <line x1="10" y1="14" x2="38" y2="14" stroke="#666" stroke-width="3" stroke-linecap="round"></line>272 <line x1="10" y1="24" x2="38" y2="24" stroke="#666" stroke-width="3" stroke-linecap="round"></line>273 <line x1="10" y1="34" x2="38" y2="34" stroke="#666" stroke-width="3" stroke-linecap="round"></line>274 </svg>275 </div>276 <div class="label">Menu</div>277 </div>278 </div>279 280 <div class="home-indicator"></div>281</div>282</body>283</html>