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>Mobile UI Render</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 border-radius: 28px;16 box-shadow: 0 20px 40px rgba(0,0,0,0.25);17 }18 /* Header gradient area */19 .header {20 width: 100%;21 height: 420px;22 background: linear-gradient(135deg, #92e0d8 0%, #6ec9c7 50%, #78d6c9 100%);23 padding: 24px;24 box-sizing: border-box;25 }26 .status-bar {27 height: 60px;28 display: flex;29 align-items: center;30 justify-content: space-between;31 color: #0d2e2e;32 font-weight: 600;33 font-size: 30px;34 opacity: 0.9;35 padding: 0 8px;36 }37 .status-icons { display: flex; gap: 26px; align-items: center; }38 .icon-circle { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(0,0,0,0.35); }39 .search-row {40 margin-top: 24px;41 display: flex;42 align-items: center;43 gap: 22px;44 }45 .back-btn {46 width: 72px; height: 72px; display: flex; align-items: center; justify-content: center;47 }48 .search-box {49 flex: 1;50 height: 96px;51 background: #fff;52 border-radius: 24px;53 box-shadow: 0 6px 12px rgba(0,0,0,0.18);54 display: flex;55 align-items: center;56 padding: 0 28px;57 box-sizing: border-box;58 gap: 18px;59 }60 .search-box input {61 border: none;62 outline: none;63 font-size: 34px;64 flex: 1;65 }66 .camera {67 width: 58px; height: 58px; border-radius: 14px;68 border: 1px solid #cfd8dc; background: #f5f7f8;69 display: flex; align-items: center; justify-content: center;70 }71 .location-row {72 margin-top: 26px;73 display: flex; align-items: center; gap: 16px;74 color: #0f2f2f; font-size: 30px; font-weight: 600;75 }76 .location-row .chev { margin-left: 10px; }77 .tabs-row {78 margin-top: 24px;79 display: flex; align-items: center; justify-content: space-between;80 background: rgba(255,255,255,0.65);81 height: 90px; border-radius: 12px;82 padding: 0 24px; box-sizing: border-box;83 border-top: 1px solid rgba(0,0,0,0.08);84 }85 .prime-toggle { display: flex; align-items: center; gap: 16px; font-size: 28px; color: #2f2f2f; }86 .toggle {87 width: 94px; height: 46px; background: #eceff1; border-radius: 26px; position: relative; border: 1px solid #cfd8dc;88 }89 .toggle::after {90 content: ""; width: 40px; height: 40px; background: #ffffff; border-radius: 50%;91 position: absolute; top: 2px; left: 2px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);92 }93 .filters { font-size: 30px; color: #1f3f3f; display: flex; align-items: center; gap: 10px; }94 /* Content area */95 .content {96 background: #ffffff;97 padding: 24px;98 box-sizing: border-box;99 padding-bottom: 210px; /* leave space for bottom nav */100 }101 .brand-row {102 display: flex; align-items: center; gap: 22px;103 color: #d33b3b; font-weight: 800; font-size: 42px;104 }105 .brand-sub { color: #263238; font-weight: 600; font-size: 30px; }106 .banner {107 margin-top: 20px;108 height: 460px;109 border-radius: 20px;110 background: #E0E0E0;111 border: 1px solid #BDBDBD;112 display: flex; align-items: center; justify-content: center;113 color: #757575; font-size: 34px; text-align: center;114 }115 .cards-row {116 margin-top: 18px;117 display: flex; gap: 22px;118 }119 .card {120 flex: 1;121 min-width: 0;122 background: #fff;123 border-radius: 18px;124 box-shadow: 0 8px 16px rgba(0,0,0,0.12);125 padding: 18px; box-sizing: border-box;126 }127 .card .img {128 width: 100%; height: 170px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px;129 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;130 }131 .deal-badge {132 display: inline-block; background: #b33a21; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 26px; margin-top: 16px;133 }134 .price { font-size: 34px; font-weight: 800; margin-top: 10px; }135 .strike { color: #777; text-decoration: line-through; font-size: 26px; margin-left: 4px; }136 .subtle { color: #757575; font-size: 26px; }137 .blue-link-row {138 display: flex; align-items: center; justify-content: space-between; margin-top: 24px;139 color: #1a73e8; font-size: 30px; font-weight: 600;140 }141 .sponsored-tag { color: #757575; font-size: 26px; display: flex; align-items: center; gap: 8px; }142 .product {143 margin-top: 18px;144 background: #fff;145 border-radius: 16px;146 box-shadow: 0 8px 16px rgba(0,0,0,0.08);147 padding: 18px; box-sizing: border-box;148 display: grid; grid-template-columns: 330px 1fr; gap: 18px;149 }150 .product .pimg { width: 100%; height: 330px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; }151 .product .title { font-size: 32px; font-weight: 700; color: #1b1b1b; line-height: 1.25; }152 .product .badge { font-size: 24px; color: #757575; margin-bottom: 8px; }153 .stars { display: flex; align-items: center; gap: 8px; margin: 8px 0; }154 .stars svg { width: 30px; height: 30px; }155 .deal-day { display: inline-block; background: #b33a21; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 26px; margin: 10px 0; }156 .price-line { font-size: 34px; font-weight: 800; margin-top: 8px; }157 /* Bottom navigation */158 .bottom-nav {159 position: absolute; left: 0; right: 0; bottom: 0;160 height: 170px; background: #ffffff; border-top: 1px solid #e0e0e0;161 display: flex; align-items: center; justify-content: space-around;162 }163 .nav-item { width: 20%; text-align: center; color: #1a1a1a; }164 .nav-item.active { color: #1a73e8; }165 .nav-item svg { width: 48px; height: 48px; display: block; margin: 0 auto 8px auto; }166 .nav-label { font-size: 26px; }167 .gesture-bar {168 position: absolute; left: 50%; transform: translateX(-50%);169 bottom: 10px; width: 300px; height: 8px; background: #b0b0b0; border-radius: 8px;170 }171</style>172</head>173<body>174<div id="render-target">175 <div class="header">176 <div class="status-bar">177 <div>10:58</div>178 <div class="status-icons">179 <div class="icon-circle"></div>180 <div class="icon-circle"></div>181 <div class="icon-circle"></div>182 <div class="icon-circle"></div>183 </div>184 </div>185 186 <div class="search-row">187 <div class="back-btn">188 <svg viewBox="0 0 24 24">189 <path d="M15.5 4l-9 8 9 8" stroke="#263238" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>190 </svg>191 </div>192 <div class="search-box">193 <svg viewBox="0 0 24 24">194 <circle cx="10" cy="10" r="7" stroke="#607d8b" stroke-width="2" fill="none"/>195 <path d="M15 15l6 6" stroke="#607d8b" stroke-width="2" fill="none" stroke-linecap="round"/>196 </svg>197 <input type="text" value="toy car for 2 years old boy">198 <div class="camera">199 <svg viewBox="0 0 24 24">200 <rect x="3" y="6" width="18" height="12" rx="3" fill="#9fa8b0"/>201 <circle cx="12" cy="12" r="4" fill="#cfd8dc"/>202 </svg>203 </div>204 </div>205 </div>206 207 <div class="location-row">208 <svg viewBox="0 0 24 24" width="32" height="32">209 <path d="M12 2c-4 0-7 3-7 7 0 5 7 13 7 13s7-8 7-13c0-4-3-7-7-7zm0 9a2 2 0 100-4 2 2 0 000 4z" fill="#1b4e4e"/>210 </svg>211 <div>Deliver to Delhi 110025</div>212 <div class="chev">213 <svg viewBox="0 0 24 24" width="30" height="30"><path d="M6 9l6 6 6-6" stroke="#1b4e4e" stroke-width="2" fill="none" stroke-linecap="round"/></svg>214 </div>215 </div>216 217 <div class="tabs-row">218 <div class="prime-toggle">219 <span style="color:#1a73e8;font-weight:700;">prime</span>220 <div class="toggle"></div>221 </div>222 <div class="filters">223 Filters224 <svg viewBox="0 0 24 24" width="24" height="24"><path d="M6 9l6 6 6-6" stroke="#243b3b" stroke-width="2" fill="none" stroke-linecap="round"/></svg>225 </div>226 </div>227 </div>228 229 <div class="content">230 <div class="brand-row">231 <div>super buddy</div>232 <div class="brand-sub">Audio storytellers for screen-free fun & learning</div>233 </div>234 235 <div class="banner">[IMG: Super Buddy banner with colorful audio players on red background]</div>236 237 <div class="cards-row">238 <div class="card">239 <div class="img">[IMG: Yellow player]</div>240 <div class="subtle" style="margin-top:12px;">Super Buddy • Yellow</div>241 </div>242 <div class="card">243 <div class="deal-badge">Limited time Deal</div>244 <div class="price">₹2,999 <span style="color:#1a73e8;font-weight:800;">prime</span></div>245 <div class="subtle">₹<span class="strike">3,999</span> (25% off)</div>246 </div>247 <div class="card">248 <div class="img">[IMG: Astronaut-themed player]</div>249 <div class="deal-badge" style="margin-top:12px;">Limited time Deal</div>250 <div class="price">₹2,249 <span style="color:#1a73e8;font-weight:800;">prime</span></div>251 <div class="subtle">₹<span class="strike">2,999</span> (25% off)</div>252 </div>253 </div>254 255 <div class="blue-link-row">256 <div>Save up to 35% on Tarbull ›</div>257 <div class="sponsored-tag">Sponsored258 <svg viewBox="0 0 24 24" width="22" height="22"><circle cx="12" cy="12" r="10" stroke="#9e9e9e" fill="none"/><text x="12" y="16" font-size="12" text-anchor="middle" fill="#9e9e9e">i</text></svg>259 </div>260 </div>261 262 <div class="product">263 <div class="pimg">[IMG: Einstein Box for 2-Year-Olds (Mickey & Minnie)]</div>264 <div>265 <div class="badge">Sponsored</div>266 <div class="title">Einstein Box for 2-Year-Old Boys/Girls | Gift Toys for 2-Year-Old Kids | Board Books and Fun Activities</div>267 <div class="subtle" style="margin-top:6px;">Cardboard</div>268 269 <div class="stars">270 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#f59e0b"/></svg>271 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#f59e0b"/></svg>272 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#f59e0b"/></svg>273 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#f59e0b"/></svg>274 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1z" fill="#f6c35b"/></svg>275 <div style="font-size:26px;color:#333;margin-left:8px;">4.1 (5,511)</div>276 </div>277 <div class="subtle">700+ bought in past month</div>278 279 <div class="deal-day">Deal of the Day</div>280 <div class="price-line">₹699</div>281 </div>282 </div>283 </div>284 285 <div class="bottom-nav">286 <div class="nav-item active">287 <svg viewBox="0 0 24 24">288 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" fill="#1a73e8"/>289 </svg>290 <div class="nav-label">Home</div>291 </div>292 <div class="nav-item">293 <svg viewBox="0 0 24 24">294 <circle cx="12" cy="8" r="4" fill="#616161"/>295 <path d="M3 22c2-5 6-6 9-6s7 1 9 6" stroke="#616161" stroke-width="2" fill="none"/>296 </svg>297 <div class="nav-label">You</div>298 </div>299 <div class="nav-item">300 <svg viewBox="0 0 24 24">301 <rect x="3" y="6" width="18" height="12" rx="2" fill="#616161"/>302 <path d="M7 10h10M7 14h10" stroke="#fff" stroke-width="2"/>303 </svg>304 <div class="nav-label">More</div>305 </div>306 <div class="nav-item">307 <svg viewBox="0 0 24 24">308 <path d="M6 6h14l-2 10H7L6 6z" stroke="#616161" stroke-width="2" fill="none"/>309 <circle cx="9" cy="20" r="2" fill="#616161"/>310 <circle cx="17" cy="20" r="2" fill="#616161"/>311 </svg>312 <div class="nav-label">Cart</div>313 </div>314 <div class="nav-item">315 <svg viewBox="0 0 24 24">316 <path d="M3 5h18M3 12h18M3 19h18" stroke="#616161" stroke-width="2"/>317 </svg>318 <div class="nav-label">Menu</div>319 </div>320 </div>321 <div class="gesture-bar"></div>322</div>323</body>324</html>