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>Amazon-like Mobile UI</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;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Top gradient header area */16 .top-gradient {17 position: absolute; left: 0; top: 0; width: 1080px; height: 420px;18 background: linear-gradient(180deg, #94e0d7 0%, #c7efe7 100%);19 }20 21 /* Status bar */22 .status-bar {23 position: absolute; top: 12px; left: 24px; right: 24px; height: 60px; color: #1f2a2a;24 display: flex; align-items: center; justify-content: space-between;25 font-size: 36px; font-weight: 600;26 }27 .status-icons { display: flex; align-items: center; gap: 28px; color: #2f3b3b; }28 .icon { display: inline-flex; align-items: center; justify-content: center; }29 30 /* Search bar */31 .search-wrap {32 position: absolute; top: 110px; left: 40px; right: 40px; height: 120px;33 background: #ffffff; border-radius: 28px;34 box-shadow: 0 6px 12px rgba(0,0,0,0.12);35 display: flex; align-items: center; padding: 0 32px; gap: 24px;36 }37 .search-input { flex: 1; color: #707d7d; font-size: 44px; }38 .qr-btn {39 width: 84px; height: 84px; border-radius: 20px;40 background: #f4f6f6; display: flex; align-items: center; justify-content: center;41 border: 1px solid #d9dddd;42 }43 44 /* Location bar */45 .location-bar {46 position: absolute; top: 260px; left: 0; width: 1080px; height: 90px;47 background: #bfeae3; display: flex; align-items: center; padding: 0 32px; gap: 20px;48 color: #133434; font-size: 34px; font-weight: 600;49 border-top: 1px solid rgba(0,0,0,0.05);50 border-bottom: 1px solid rgba(0,0,0,0.06);51 }52 .chevron { margin-left: auto; }53 54 /* Category row */55 .categories {56 position: absolute; top: 360px; left: 0; width: 1080px; padding: 22px 20px 26px;57 background: #ffffff; border-top: 4px solid #f5c04d;58 }59 .cat-row {60 display: flex; align-items: flex-start; justify-content: space-around;61 gap: 16px;62 }63 .cat-item {64 width: 170px;65 display: flex; flex-direction: column; align-items: center;66 color: #263333;67 }68 .cat-img {69 width: 140px; height: 140px; background: #E0E0E0; border: 1px solid #BDBDBD;70 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px; border-radius: 16px;71 }72 .cat-label { margin-top: 16px; font-size: 32px; }73 74 /* Big promo banner */75 .promo-banner {76 position: absolute; top: 560px; left: 24px; width: 1032px; height: 550px;77 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;78 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 40px; text-align: center;79 }80 81 /* Cards row */82 .cards-row {83 position: absolute; top: 1140px; left: 24px; width: 1032px;84 display: flex; gap: 24px;85 }86 .card {87 flex: 1; min-width: 0; background: #ffffff; border-radius: 22px;88 box-shadow: 0 6px 12px rgba(0,0,0,0.12);89 padding: 28px;90 }91 .card-title { font-size: 44px; color: #233333; margin-bottom: 18px; }92 .pay-grid {93 display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px;94 }95 .pay-item {96 display: flex; align-items: center; gap: 18px; padding: 16px;97 border-radius: 14px; background: #fafafa; border: 1px solid #e5e5e5;98 }99 .pay-icon {100 width: 86px; height: 86px; border-radius: 50%; background: #ffe38f; display: flex; align-items: center; justify-content: center; border: 1px solid #f1c65b;101 }102 .pay-text { font-size: 32px; color: #2a2a2a; }103 104 .card-img {105 width: 100%; height: 320px; background: #E0E0E0; border: 1px solid #BDBDBD;106 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 36px; border-radius: 16px;107 margin-top: 6px;108 }109 110 /* Benefits strip */111 .benefits {112 position: absolute; top: 1620px; left: 0; width: 1080px; height: 140px;113 background: #ffffff; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc;114 display: flex; align-items: center; justify-content: space-around;115 }116 .benefit {117 display: flex; align-items: center; gap: 18px;118 color: #263333; font-size: 34px; font-weight: 600;119 }120 .benefit .round {121 width: 76px; height: 76px; border-radius: 50%; background: #ffe38f; border: 1px solid #f1c65b;122 display: flex; align-items: center; justify-content: center;123 }124 125 /* Secondary banner */126 .secondary-banner {127 position: absolute; top: 1780px; left: 0; width: 1080px; height: 380px;128 display: flex; align-items: center; justify-content: center;129 }130 .secondary-banner .img {131 width: 1032px; height: 360px; margin: 0 auto;132 background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 16px;133 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 38px;134 }135 136 /* Bottom navigation */137 .bottom-nav {138 position: absolute; left: 0; bottom: 80px; width: 1080px; height: 170px;139 background: #ffffff; border-top: 1px solid #dcdcdc;140 display: flex; align-items: center; justify-content: space-around;141 }142 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }143 .nav-item span { font-size: 32px; color: #2a3a3a; }144 .nav-item.active span { color: #1fb7b2; font-weight: 700; }145 146 /* Home indicator */147 .home-indicator {148 position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);149 width: 320px; height: 12px; border-radius: 8px; background: #bfbfbf;150 }151</style>152</head>153<body>154<div id="render-target">155 156 <div class="top-gradient"></div>157 158 <div class="status-bar">159 <div class="time">12:25</div>160 <div class="status-icons">161 <span class="icon">162 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">163 <path d="M3 12h18" stroke="#2f3b3b" stroke-width="2" stroke-linecap="round"/>164 </svg>165 </span>166 <span class="icon">167 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">168 <circle cx="12" cy="12" r="3" stroke="#2f3b3b" stroke-width="2"/>169 <path d="M2 8l4-2 3 2 3-2 3 2 4-2 3 2v8l-4 2-3-2-3 2-3-2-4 2-3-2V8z" stroke="#2f3b3b" stroke-width="1.6"/>170 </svg>171 </span>172 <span class="icon">173 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">174 <rect x="3" y="3" width="18" height="14" rx="2" stroke="#2f3b3b" stroke-width="2"/>175 <path d="M8 20h8" stroke="#2f3b3b" stroke-width="2" stroke-linecap="round"/>176 </svg>177 </span>178 <span class="icon">179 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">180 <circle cx="3" cy="12" r="2" fill="#2f3b3b"/>181 <circle cx="9" cy="12" r="2" fill="#2f3b3b"/>182 <circle cx="15" cy="12" r="2" fill="#2f3b3b"/>183 <circle cx="21" cy="12" r="2" fill="#2f3b3b"/>184 </svg>185 </span>186 <span class="icon">187 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">188 <path d="M3 9l9-6 9 6v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V9z" stroke="#2f3b3b" stroke-width="2"/>189 </svg>190 </span>191 <span class="icon" style="display:flex; align-items:center;">192 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">193 <path d="M5 8h14v8H5z" stroke="#2f3b3b" stroke-width="2"/>194 <path d="M7 16a5 5 0 0 0 10 0" stroke="#2f3b3b" stroke-width="2"/>195 </svg>196 <span style="font-size:32px; margin-left:6px;">92%</span>197 </span>198 </div>199 </div>200 201 <div class="search-wrap">202 <svg width="64" height="64" viewBox="0 0 24 24" class="icon">203 <circle cx="11" cy="11" r="7" stroke="#4a5b5b" stroke-width="2" fill="none"/>204 <path d="M20 20l-4.5-4.5" stroke="#4a5b5b" stroke-width="2" stroke-linecap="round"/>205 </svg>206 <div class="search-input">Search Amazon.in</div>207 <div class="qr-btn">208 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">209 <rect x="3" y="3" width="7" height="7" stroke="#566" stroke-width="2"/>210 <rect x="14" y="3" width="7" height="7" stroke="#566" stroke-width="2"/>211 <rect x="3" y="14" width="7" height="7" stroke="#566" stroke-width="2"/>212 <rect x="14" y="14" width="7" height="7" stroke="#566" stroke-width="2"/>213 </svg>214 </div>215 </div>216 217 <div class="location-bar">218 <svg width="48" height="48" viewBox="0 0 24 24" class="icon">219 <path d="M12 21s-7-7-7-11a7 7 0 1 1 14 0c0 4-7 11-7 11z" stroke="#133434" stroke-width="2" fill="none"/>220 <circle cx="12" cy="10" r="2.5" fill="#133434"/>221 </svg>222 <div>Delivering to Dehradun 248001 - Update location</div>223 <div class="chevron">224 <svg width="40" height="40" viewBox="0 0 24 24">225 <path d="M6 9l6 6 6-6" stroke="#133434" stroke-width="2" fill="none" stroke-linecap="round"/>226 </svg>227 </div>228 </div>229 230 <div class="categories">231 <div class="cat-row">232 <div class="cat-item">233 <div class="cat-img">[IMG: Mobile]</div>234 <div class="cat-label">Mobiles</div>235 </div>236 <div class="cat-item">237 <div class="cat-img">[IMG: Headphones]</div>238 <div class="cat-label">Electronics</div>239 </div>240 <div class="cat-item">241 <div class="cat-img">[IMG: Home]</div>242 <div class="cat-label">Home</div>243 </div>244 <div class="cat-item">245 <div class="cat-img">[IMG: Fashion]</div>246 <div class="cat-label">Fashion</div>247 </div>248 <div class="cat-item">249 <div class="cat-img">[IMG: miniTV]</div>250 <div class="cat-label">miniTV</div>251 </div>252 <div class="cat-item">253 <div class="cat-img">[IMG: Beauty]</div>254 <div class="cat-label">Beauty</div>255 </div>256 </div>257 </div>258 259 <div class="promo-banner">[IMG: Mega Fashion Days promotion with clothes and accessories]</div>260 261 <div class="cards-row">262 <div class="card">263 <div class="pay-grid">264 <div class="pay-item">265 <div class="pay-icon">266 <svg width="42" height="42" viewBox="0 0 24 24">267 <path d="M3 7h18v10H3z" stroke="#8b6b00" stroke-width="2" fill="none"/>268 <path d="M6 11h6" stroke="#8b6b00" stroke-width="2" stroke-linecap="round"/>269 </svg>270 </div>271 <div class="pay-text">Amazon Pay</div>272 </div>273 <div class="pay-item">274 <div class="pay-icon">275 <svg width="42" height="42" viewBox="0 0 24 24">276 <path d="M7 7h10v10H7z" stroke="#8b6b00" stroke-width="2" fill="none"/>277 <path d="M12 7v10M7 12h10" stroke="#8b6b00" stroke-width="2"/>278 </svg>279 </div>280 <div class="pay-text">Send Money</div>281 </div>282 <div class="pay-item">283 <div class="pay-icon">284 <svg width="42" height="42" viewBox="0 0 24 24">285 <rect x="4" y="5" width="16" height="12" rx="2" stroke="#8b6b00" stroke-width="2"/>286 <circle cx="12" cy="11" r="3" stroke="#8b6b00" stroke-width="2"/>287 </svg>288 </div>289 <div class="pay-text">Scan any QR</div>290 </div>291 <div class="pay-item">292 <div class="pay-icon">293 <svg width="42" height="42" viewBox="0 0 24 24">294 <path d="M5 7h14v10H5z" stroke="#8b6b00" stroke-width="2" fill="none"/>295 <path d="M7 9h10M7 12h8" stroke="#8b6b00" stroke-width="2"/>296 </svg>297 </div>298 <div class="pay-text">Pay Bills</div>299 </div>300 </div>301 </div>302 303 <div class="card">304 <div class="card-title">Keep shopping for</div>305 <div class="card-img">[IMG: Black formal shoe]</div>306 </div>307 308 <div class="card">309 <div class="card-title">Deal related to your saved i...</div>310 <div class="card-img">[IMG: Black lace-up shoe]</div>311 </div>312 </div>313 314 <div class="benefits">315 <div class="benefit">316 <div class="round">317 <svg width="34" height="34" viewBox="0 0 24 24">318 <path d="M4 12l4 4 12-12" stroke="#8b6b00" stroke-width="2" fill="none"/>319 </svg>320 </div>321 <div>WIDE SELECTION</div>322 </div>323 <div class="benefit">324 <div class="round">325 <svg width="34" height="34" viewBox="0 0 24 24">326 <path d="M4 7h16v10H4z" stroke="#8b6b00" stroke-width="2" fill="none"/>327 <path d="M8 12h8" stroke="#8b6b00" stroke-width="2"/>328 </svg>329 </div>330 <div>PAY ON DELIVERY</div>331 </div>332 <div class="benefit">333 <div class="round">334 <svg width="34" height="34" viewBox="0 0 24 24">335 <path d="M6 6l12 12M18 6L6 18" stroke="#8b6b00" stroke-width="2"/>336 </svg>337 </div>338 <div>EASY RETURNS</div>339 </div>340 </div>341 342 <div class="secondary-banner">343 <div class="img">[IMG: Luxaderme product banner]</div>344 </div>345 346 <div class="bottom-nav">347 <div class="nav-item active">348 <svg width="60" height="60" viewBox="0 0 24 24">349 <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4v-6H9v6H5a2 2 0 0 1-2-2v-8z" stroke="#1fb7b2" stroke-width="2" fill="none"/>350 </svg>351 <span>Home</span>352 </div>353 <div class="nav-item">354 <svg width="60" height="60" viewBox="0 0 24 24">355 <circle cx="12" cy="8" r="4" stroke="#2a3a3a" stroke-width="2" fill="none"/>356 <path d="M4 20a8 8 0 0 1 16 0" stroke="#2a3a3a" stroke-width="2" fill="none"/>357 </svg>358 <span>You</span>359 </div>360 <div class="nav-item">361 <svg width="60" height="60" viewBox="0 0 24 24">362 <rect x="5" y="5" width="14" height="14" rx="3" stroke="#2a3a3a" stroke-width="2" fill="none"/>363 <text x="12" y="15" text-anchor="middle" font-size="8" fill="#2a3a3a">pay</text>364 </svg>365 <span>More</span>366 </div>367 <div class="nav-item">368 <svg width="60" height="60" viewBox="0 0 24 24">369 <path d="M6 6h15l-2 10H7L6 6z" stroke="#2a3a3a" stroke-width="2" fill="none"/>370 <circle cx="9" cy="20" r="1.5" fill="#2a3a3a"/>371 <circle cx="17" cy="20" r="1.5" fill="#2a3a3a"/>372 </svg>373 <span>Cart</span>374 </div>375 <div class="nav-item">376 <svg width="60" height="60" viewBox="0 0 24 24">377 <path d="M4 7h16M4 12h16M4 17h16" stroke="#2a3a3a" stroke-width="2" stroke-linecap="round"/>378 </svg>379 <span>Menu</span>380 </div>381 </div>382 383 <div class="home-indicator"></div>384 385</div>386</body>387</html>