GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Amazon Home UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #ffffff; color: #111;11 }12 .status-bar {13 height: 96px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;14 color: #2c5f6b;15 background: linear-gradient(180deg, #b8e9df 0%, #a7e3d7 100%);16 }17 .status-left { display: flex; align-items: center; gap: 24px; font-size: 36px; }18 .status-right { display: flex; align-items: center; gap: 28px; }19 .top-area {20 background: linear-gradient(180deg, #b8e9df 0%, #a7e3d7 60%, #ffffff 100%);21 }22 .search-wrap {23 padding: 24px 36px 24px 36px;24 }25 .search-bar {26 height: 120px; background: #fff; border-radius: 24px; box-shadow: 0 2px 0 rgba(0,0,0,0.08);27 display: flex; align-items: center; padding: 0 28px; border: 1px solid #e5e5e5;28 }29 .search-icon { width: 56px; height: 56px; margin-right: 18px; }30 .search-input {31 flex: 1; font-size: 40px; color: #666;32 }33 .scan-icon { width: 56px; height: 56px; }34 .location-bar {35 height: 100px; padding: 0 36px; display: flex; align-items: center; gap: 18px;36 background: rgba(255,255,255,0.5); border-top: 1px solid #d7e9e5; border-bottom: 1px solid #d7e9e5;37 color: #2d3d41; font-size: 36px;38 }39 .chev { width: 36px; height: 36px; margin-left: auto; }40 .categories {41 background: #fff; padding: 18px 12px; display: flex; align-items: flex-start; justify-content: space-around;42 border-bottom: 1px solid #eee;43 }44 .cat-item { width: 160px; text-align: center; color: #333; }45 .cat-img {46 width: 140px; height: 100px; margin: 0 auto 12px; background: #E0E0E0; border: 1px solid #BDBDBD;47 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;48 border-radius: 8px;49 }50 .cat-label { font-size: 30px; }51 .promo {52 height: 720px;53 background: linear-gradient(135deg, #9ed9cf 0%, #70c6b9 60%, #e2c46a 60%, #e2c46a 100%);54 position: relative; padding: 48px 36px;55 }56 .promo-content { width: 660px; color: #0b3c37; }57 .promo-badge {58 display: inline-block; background: #ff3b3b; color: #fff; font-weight: bold; font-size: 32px;59 padding: 10px 18px; border-radius: 8px; margin-bottom: 16px;60 }61 .promo-title { font-size: 80px; font-weight: bold; margin: 12px 0; }62 .promo-sub { font-size: 40px; margin-bottom: 18px; }63 .promo-bullets { display: flex; gap: 24px; font-size: 28px; color: #0b3c37; }64 .promo-img {65 position: absolute; right: 36px; bottom: 48px; width: 420px; height: 260px;66 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center;67 color: #757575; font-size: 26px; border-radius: 12px;68 }69 .bank-strip {70 position: absolute; left: 36px; bottom: 28px; width: 640px; height: 80px; background: #fff;71 border: 1px solid #dcdcdc; border-radius: 12px; display: flex; align-items: center; justify-content: center;72 font-size: 28px; color: #333;73 }74 .dots { height: 40px; display: flex; align-items: center; justify-content: center; gap: 18px; }75 .dot { width: 16px; height: 16px; border-radius: 50%; background: #cfd8dc; }76 .dot.active { background: #5aa7a0; }77 .cards-row {78 padding: 24px 24px; display: flex; gap: 24px; overflow: hidden;79 }80 .card {81 flex: 0 0 328px; background: #fff; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);82 padding: 24px; border: 1px solid #eee;83 }84 .card-title { font-size: 38px; margin-bottom: 18px; color: #222; }85 .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }86 .img-ph {87 width: 100%; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;88 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;89 }90 .big-ph {91 width: 100%; height: 200px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 8px;92 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;93 }94 .benefits {95 padding: 16px 36px; display: flex; justify-content: space-between; align-items: center;96 border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #fff;97 }98 .benefit { width: 33.33%; display: flex; align-items: center; gap: 18px; padding: 16px; }99 .benefit svg { width: 52px; height: 52px; }100 .benefit span { font-size: 32px; color: #333; }101 .deal-banner {102 margin: 18px 36px; height: 200px; border-radius: 16px;103 background: linear-gradient(90deg, #ffb64c 0%, #ff8a00 100%);104 display: flex; align-items: center; justify-content: center; color: #fff; font-size: 54px; font-weight: bold;105 }106 .bottom-nav {107 position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: #fff; border-top: 1px solid #e6e6e6;108 display: flex; justify-content: space-around; align-items: center;109 }110 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #2f6f6b; }111 .nav-item svg { width: 56px; height: 56px; }112 .nav-item span { font-size: 28px; }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status Bar -->119 <div class="status-bar">120 <div class="status-left">121 <span>6:28</span>122 <span>17°</span>123 <!-- Alarm icon -->124 <svg class="alarm" viewBox="0 0 24 24" width="36" height="36" fill="#2c5f6b">125 <path d="M7 2l-3 3 2 2 3-3L7 2zm10 0l3 3-2 2-3-3 2-2zM12 6a8 8 0 100 16 8 8 0 000-16zm0 3a1 1 0 011 1v4l3 2-1 2-4-3V10a1 1 0 011-1z"/>126 </svg>127 </div>128 <div class="status-right">129 <!-- Signal/WiFi -->130 <svg viewBox="0 0 24 24" width="36" height="36" fill="#2c5f6b">131 <path d="M12 18l-2-2a3 3 0 014 0l-2 2zm6-6a9 9 0 00-12 0l2 2a6 6 0 018 0l2-2zm4-4a14 14 0 00-20 0l2 2a11 11 0 0116 0l2-2z"/>132 </svg>133 <!-- Battery -->134 <svg viewBox="0 0 24 24" width="36" height="36" fill="#2c5f6b">135 <path d="M18 7h2v10h-2V7zM3 7h14a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V9a2 2 0 012-2zm2 2v6h10V9H5z"/>136 </svg>137 </div>138 </div>139 140 <div class="top-area">141 <!-- Search -->142 <div class="search-wrap">143 <div class="search-bar">144 <svg class="search-icon" viewBox="0 0 24 24" fill="#4b4b4b">145 <path d="M10 2a8 8 0 106.32 13.32l4.18 4.18-1.42 1.42-4.18-4.18A8 8 0 1010 2zm0 2a6 6 0 110 12 6 6 0 010-12z"/>146 </svg>147 <div class="search-input">Search Amazon.in</div>148 <!-- Scan/QR icon -->149 <svg class="scan-icon" viewBox="0 0 24 24" fill="#4b4b4b">150 <path d="M3 3h6v2H5v4H3V3zm12 0h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 0h2v6h-6v-2h4v-4zM7 7h10v10H7V7zm2 2v6h6V9H9z"/>151 </svg>152 </div>153 </div>154 155 <!-- Location bar -->156 <div class="location-bar">157 <!-- Pin icon -->158 <svg viewBox="0 0 24 24" width="40" height="40" fill="#2d3d41">159 <path d="M12 2a7 7 0 00-7 7c0 5 7 13 7 13s7-8 7-13a7 7 0 00-7-7zm0 9a2 2 0 110-4 2 2 0 010 4z"/>160 </svg>161 <span>Select a location to see product availability</span>162 <svg class="chev" viewBox="0 0 24 24" fill="#2d3d41">163 <path d="M7 10l5 5 5-5H7z"/>164 </svg>165 </div>166 167 <!-- Categories row -->168 <div class="categories">169 <div class="cat-item">170 <div class="cat-img">[IMG: Festival Badge]</div>171 <div class="cat-label">8th Oct</div>172 </div>173 <div class="cat-item">174 <div class="cat-img">[IMG: Mobiles]</div>175 <div class="cat-label">Mobiles</div>176 </div>177 <div class="cat-item">178 <div class="cat-img">[IMG: Fashion]</div>179 <div class="cat-label">Fashion</div>180 </div>181 <div class="cat-item">182 <div class="cat-img">[IMG: Deals Tag]</div>183 <div class="cat-label">Deals</div>184 </div>185 <div class="cat-item">186 <div class="cat-img">[IMG: miniTV]</div>187 <div class="cat-label">miniTV</div>188 </div>189 <div class="cat-item">190 <div class="cat-img">[IMG: Electronics]</div>191 <div class="cat-label">Elect</div>192 </div>193 </div>194 </div>195 196 <!-- Big promo section -->197 <div class="promo">198 <div class="promo-content">199 <div class="promo-badge">KICKSTARTER DEALS LIVE</div>200 <div class="promo-title">STARTING ₹7,999</div>201 <div class="promo-sub">Bestselling Tablets</div>202 <div class="promo-bullets">203 <div>UP TO 6 MONTHS NO COST EMI</div>204 <div>UP TO ₹6000 BANK DISCOUNT</div>205 </div>206 </div>207 <div class="promo-img">[IMG: Tablets Banner]</div>208 <div class="bank-strip">SBI Card • 10% Instant Discount* with SBI Debit & Credit Card</div>209 </div>210 211 <!-- Slider dots -->212 <div class="dots">213 <div class="dot"></div>214 <div class="dot active"></div>215 <div class="dot"></div>216 <div class="dot"></div>217 <div class="dot"></div>218 <div class="dot"></div>219 </div>220 221 <!-- Cards row -->222 <div class="cards-row">223 <div class="card" style="width:328px;">224 <div class="card-title">Amazon Pay</div>225 <div class="card-grid">226 <div class="img-ph">[IMG: Amazon Pay]</div>227 <div class="img-ph">[IMG: Send Money]</div>228 <div class="img-ph">[IMG: Scan any QR]</div>229 <div class="img-ph">[IMG: Pay Bills]</div>230 </div>231 </div>232 <div class="card" style="width:328px;">233 <div class="card-title">Keep shopping for</div>234 <div class="big-ph">[IMG: Camera & Lens]</div>235 </div>236 <div class="card" style="width:328px;">237 <div class="card-title">Keep browsing</div>238 <div class="big-ph">[IMG: DSLR Camera]</div>239 </div>240 </div>241 242 <!-- Benefits row -->243 <div class="benefits">244 <div class="benefit">245 <svg viewBox="0 0 24 24" fill="#333">246 <path d="M12 2l4 8H8l4-8zm0 12a8 8 0 00-8 8h16a8 8 0 00-8-8z"/>247 </svg>248 <span>WIDE SELECTION</span>249 </div>250 <div class="benefit">251 <svg viewBox="0 0 24 24" fill="#333">252 <path d="M3 6h18v12H3V6zm2 2v8h14V8H5zm6 1l3 3-3 3-3-3 3-3z"/>253 </svg>254 <span>PAY ON DELIVERY</span>255 </div>256 <div class="benefit">257 <svg viewBox="0 0 24 24" fill="#333">258 <path d="M6 2h12v20H6V2zm2 2v16h8V4H8zm-4 6h2v10H4V10zm16 0h-2v10h2V10zM9 7h6v2H9V7z"/>259 </svg>260 <span>EASY RETURNS</span>261 </div>262 </div>263 264 <!-- Deal banner -->265 <div class="deal-banner">DEAL IS LIVE</div>266 267 <!-- Bottom navigation -->268 <div class="bottom-nav">269 <div class="nav-item">270 <svg viewBox="0 0 24 24" fill="#2f6f6b">271 <path d="M12 3l9 8-1.5 1.8L18 11v8h-4v-5H10v5H6v-8l-1.5 1.8L3 11l9-8z"/>272 </svg>273 <span>Home</span>274 </div>275 <div class="nav-item">276 <svg viewBox="0 0 24 24" fill="#2f6f6b">277 <path d="M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-5 0-9 3-9 7h18c0-4-4-7-9-7z"/>278 </svg>279 <span>You</span>280 </div>281 <div class="nav-item">282 <svg viewBox="0 0 24 24" fill="#2f6f6b">283 <path d="M12 6V4l-4 4 4 4V10c3.3 0 6 2.7 6 6h-2a8 8 0 00-8-8z"/>284 </svg>285 <span>More</span>286 </div>287 <div class="nav-item">288 <svg viewBox="0 0 24 24" fill="#2f6f6b">289 <path d="M7 7h14l-1 10H8L7 7zM5 7H3V5h2v2zm1 12a2 2 0 104 0H6z"/>290 </svg>291 <span>Cart</span>292 </div>293 <div class="nav-item">294 <svg viewBox="0 0 24 24" fill="#2f6f6b">295 <path d="M4 6h16v2H4V6zm0 5h16v2H4v-2zm0 5h16v2H4v-2z"/>296 </svg>297 <span>Menu</span>298 </div>299 </div>300 301</div>302</body>303</html>