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>Food Delivery UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: #282533; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #ffffff;15 }16 .status-bar {17 height: 80px;18 padding: 0 32px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #1c1b22;23 font-weight: 600;24 font-size: 34px;25 }26 .status-icons { display: flex; align-items: center; gap: 22px; opacity: .8; }27 /* Search */28 .search-wrap {29 padding: 18px 32px 8px;30 }31 .search-bar {32 height: 124px;33 border-radius: 64px;34 background: #faf7ff;35 border: 1px solid #e6dff7;36 box-shadow: 0 6px 18px rgba(79, 55, 139, 0.08);37 display: flex;38 align-items: center;39 padding: 0 34px;40 gap: 28px;41 color: #6c6881;42 }43 .vr { width: 2px; height: 58px; background: #e8e3f5; }44 .search-text { flex: 1; font-size: 40px; color: #7d7a8f; }45 .location-text { flex: 1; font-size: 40px; color: #2f2c3c; }46 /* Chips */47 .chip-row {48 padding: 14px 32px 0;49 display: flex;50 gap: 18px;51 flex-wrap: nowrap;52 }53 .chip {54 height: 86px;55 padding: 0 30px;56 border-radius: 44px;57 border: 2px solid #d8d5e6;58 color: #4b4760;59 display: inline-flex;60 align-items: center;61 gap: 16px;62 font-weight: 700;63 font-size: 36px;64 background: #fff;65 }66 .chip svg { width: 36px; height: 36px; }67 .chip.primary {68 background: #5a5675;69 color: #ffffff;70 border-color: #5a5675;71 }72 /* Category tiles */73 .quick-tiles {74 padding: 24px 32px 10px;75 display: flex;76 gap: 24px;77 }78 .tile {79 flex: 1;80 background: #f3f1f8;81 border-radius: 28px;82 height: 150px;83 padding: 24px;84 position: relative;85 display: flex;86 align-items: center;87 font-weight: 700;88 color: #3a364a;89 font-size: 36px;90 }91 .tile .img {92 position: absolute;93 right: 18px;94 top: 26px;95 width: 160px;96 height: 100px;97 background: #E0E0E0;98 border: 1px solid #BDBDBD;99 display: flex; align-items: center; justify-content: center;100 color: #757575; font-size: 26px; border-radius: 12px;101 }102 /* Emoji categories */103 .emoji-cats {104 padding: 20px 32px 8px;105 display: grid;106 grid-template-columns: repeat(6, 1fr);107 gap: 10px;108 text-align: center;109 }110 .emoji-cats .item { padding: 8px 0; }111 .emoji { font-size: 68px; line-height: 1; }112 .emoji-label { margin-top: 14px; font-size: 32px; color: #262332; }113 /* Section header */114 .section-head {115 padding: 26px 32px 10px;116 display: flex; align-items: center; justify-content: space-between;117 }118 .section-title { font-size: 52px; font-weight: 800; color: #2e2a3d; }119 .view-all { color: #5e38ff; font-weight: 800; font-size: 36px; }120 /* Cards */121 .cards {122 padding: 10px 32px 0;123 display: grid;124 grid-template-columns: repeat(2, 1fr);125 gap: 26px;126 }127 .card {128 background: #fff;129 border-radius: 28px;130 border: 2px solid #e8e4f1;131 box-shadow: 0 10px 20px rgba(51, 38, 92, 0.08);132 overflow: hidden;133 }134 .card .img {135 height: 300px;136 background: #b8afcf;137 border-bottom: 1px solid #d5cfe6;138 display: flex; align-items: center; justify-content: center;139 color: #fff; font-weight: 700; font-size: 36px;140 position: relative;141 }142 .badge {143 position: absolute; top: 18px; left: 18px;144 background: #6b48ff; color: #fff; font-weight: 800; font-size: 28px;145 padding: 10px 22px; border-radius: 30px;146 }147 .plus-tag {148 position: absolute; top: 18px; right: 18px;149 background: #ffd54f; color: #111; font-weight: 900; font-size: 36px;150 padding: 6px 14px; border-radius: 8px;151 }152 .heart {153 position: absolute; right: 26px; bottom: -34px;154 width: 86px; height: 86px; background: #ffffff;155 border-radius: 50%;156 box-shadow: 0 10px 18px rgba(0,0,0,.18);157 display: flex; align-items: center; justify-content: center;158 border: 1px solid #ece8f5;159 }160 .card-body { padding: 40px 28px 32px; }161 .rating-row { display: flex; align-items: center; gap: 12px; color: #6a667c; font-size: 32px; }162 .card-title { font-size: 46px; font-weight: 900; margin-top: 10px; color: #262332; }163 .sub { margin-top: 6px; font-size: 34px; color: #3a3844; }164 /* Bottom nav */165 .bottom-nav {166 position: absolute; left: 0; right: 0; bottom: 0;167 height: 168px; background: #f7f6fb; border-top: 2px solid #e8e5f2;168 display: grid; grid-template-columns: repeat(4, 1fr); align-items: center;169 padding: 10px 24px 28px;170 }171 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #9a98a8; font-weight: 800; font-size: 28px; }172 .nav-item svg { width: 48px; height: 48px; }173 .nav-item.active { color: #ff7e2a; }174 .home-dot { width: 28px; height: 12px; border-radius: 10px; background: #000; opacity: .85; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }175</style>176</head>177<body>178<div id="render-target">179 <!-- Status bar -->180 <div class="status-bar">181 <div>11:13</div>182 <div class="status-icons">183 <svg viewBox="0 0 24 24" width="40" height="40" fill="#5b5774"><circle cx="4" cy="12" r="3"/><circle cx="12" cy="12" r="3"/><circle cx="20" cy="12" r="3"/></svg>184 <svg viewBox="0 0 24 24" width="40" height="40" fill="#5b5774"><path d="M3 7h18v10H3z" fill="none" stroke="#5b5774" stroke-width="2"/><rect x="5" y="9" width="8" height="6" fill="#5b5774"/></svg>185 <svg viewBox="0 0 24 24" width="40" height="40" fill="#5b5774"><path d="M2 12h4l3 4 4-8 3 4h6" stroke="#5b5774" stroke-width="2" fill="none" stroke-linecap="round"/></svg>186 </div>187 </div>188 189 <!-- Search -->190 <div class="search-wrap">191 <div class="search-bar">192 <svg viewBox="0 0 24 24" width="44" height="44" stroke="#6f6a86" fill="none" stroke-width="2"><circle cx="10" cy="10" r="6"/><path d="M15 15l6 6"/></svg>193 <div class="search-text">Search</div>194 <div class="vr"></div>195 <svg viewBox="0 0 24 24" width="44" height="44" fill="none" stroke="#5a5675" stroke-width="2"><path d="M12 21s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z"/><circle cx="12" cy="10" r="2"/></svg>196 <div class="location-text">Seattle, WA 98101</div>197 </div>198 </div>199 200 <!-- Chips -->201 <div class="chip-row">202 <div class="chip primary">203 <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">204 <circle cx="6" cy="18" r="2" fill="#fff"/><circle cx="16" cy="18" r="2" fill="#fff"/>205 <path d="M4 18H2m2-6h6l4 4h4" stroke="#fff" stroke-linecap="round"/>206 </svg>207 Delivery208 </div>209 <div class="chip">210 <svg viewBox="0 0 24 24" fill="none" stroke="#5a5675" stroke-width="2">211 <circle cx="12" cy="6" r="2"/><path d="M12 8v6M12 12l-4 4M12 12l4 4" stroke-linecap="round"/>212 </svg>213 Pickup214 </div>215 <div class="chip">216 <svg viewBox="0 0 24 24" fill="none" stroke="#5a5675" stroke-width="2">217 <path d="M4 7h10M4 12h14M4 17h8" stroke-linecap="round"/>218 </svg>219 Sort220 </div>221 <div class="chip">222 <svg viewBox="0 0 24 24" fill="none" stroke="#5a5675" stroke-width="2">223 <path d="M12 3l2.4 4.8L20 9l-4 3.8L17 19l-5-2.8L7 19l1-6.2L4 9l5.6-1.2L12 3z" />224 </svg>225 Offers226 </div>227 </div>228 229 <!-- Quick tiles -->230 <div class="quick-tiles">231 <div class="tile">Convenience232 <div class="img">[IMG: Snacks + Drink]</div>233 </div>234 <div class="tile">Grocery235 <div class="img">[IMG: Produce + Milk]</div>236 </div>237 </div>238 239 <!-- Emoji categories -->240 <div class="emoji-cats">241 <div class="item"><div class="emoji">🥡</div><div class="emoji-label">Asian</div></div>242 <div class="item"><div class="emoji">🍔</div><div class="emoji-label">Hamburgers</div></div>243 <div class="item"><div class="emoji">🥟</div><div class="emoji-label">Chinese</div></div>244 <div class="item"><div class="emoji">🍲</div><div class="emoji-label">Indian</div></div>245 <div class="item"><div class="emoji">🍕</div><div class="emoji-label">Pizza</div></div>246 <div class="item"><div class="emoji">🍟</div><div class="emoji-label">Fast Food</div></div>247 </div>248 249 <!-- Section 1 -->250 <div class="section-head">251 <div class="section-title">🌙 Late Night Cravings</div>252 <div class="view-all">View all</div>253 </div>254 <div class="cards">255 <div class="card">256 <div class="img" style="background:#a99fc4;">257 <div class="badge">Deal</div>258 <div class="plus-tag">+</div>259 [IMG: Pizza Collage]260 <div class="heart">261 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#6f6a86" stroke-width="2">262 <path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"/>263 </svg>264 </div>265 </div>266 <div class="card-body">267 <div class="rating-row">268 <svg viewBox="0 0 24 24" width="30" height="30" fill="#ffaf38"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>269 <span>4.4 (1k ratings)</span>270 </div>271 <div class="card-title">A Pizza Mart</div>272 <div class="sub">35-45 mins</div>273 </div>274 </div>275 276 <div class="card">277 <div class="img" style="background:#c1b8d6;">278 <div class="plus-tag">+</div>279 [IMG: Burger Collage]280 <div class="heart">281 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#6f6a86" stroke-width="2">282 <path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"/>283 </svg>284 </div>285 </div>286 <div class="card-body">287 <div class="rating-row">288 <svg viewBox="0 0 24 24" width="30" height="30" fill="#ffaf38"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>289 <span>3.0 (26 ratings)</span>290 </div>291 <div class="card-title">Sam's Crispy</div>292 <div class="sub">25-35 mins</div>293 </div>294 </div>295 </div>296 297 <!-- Section 2 -->298 <div class="section-head" style="margin-top: 18px;">299 <div class="section-title">Delicious Deals</div>300 <div class="view-all">View all</div>301 </div>302 <div class="cards">303 <div class="card">304 <div class="img" style="background:#b0a6ca;">305 <div class="badge">$5 off your order of $20+</div>306 <div class="plus-tag">+</div>307 [IMG: Donuts + Drink]308 <div class="heart">309 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#6f6a86" stroke-width="2">310 <path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"/>311 </svg>312 </div>313 </div>314 <div class="card-body">315 <div class="rating-row">316 <svg viewBox="0 0 24 24" width="30" height="30" fill="#ffaf38"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>317 <span>4.3 (1.9k ratings)</span>318 </div>319 <div class="card-title">Shawarma King</div>320 <div class="sub">25-35 mins</div>321 </div>322 </div>323 324 <div class="card">325 <div class="img" style="background:#c8bfd9;">326 <div class="badge">$5 off your order</div>327 <div class="plus-tag">+</div>328 [IMG: Curry Bowl]329 <div class="heart">330 <svg viewBox="0 0 24 24" width="36" height="36" fill="none" stroke="#6f6a86" stroke-width="2">331 <path d="M12 21s-8-5.5-8-10a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 4.5-8 10-8 10z"/>332 </svg>333 </div>334 </div>335 <div class="card-body">336 <div class="rating-row">337 <svg viewBox="0 0 24 24" width="30" height="30" fill="#ffaf38"><path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>338 <span>4.2 (393 ratings)</span>339 </div>340 <div class="card-title">Zaika</div>341 <div class="sub">20-30 mins</div>342 </div>343 </div>344 </div>345 346 <!-- Bottom nav -->347 <div class="bottom-nav">348 <div class="nav-item active">349 <svg viewBox="0 0 24 24" fill="none" stroke="#ff7e2a" stroke-width="2">350 <path d="M3 11l9-7 9 7v9H3z"/><path d="M9 20v-6h6v6" />351 </svg>352 Home353 </div>354 <div class="nav-item">355 <svg viewBox="0 0 24 24" fill="none" stroke="#9a98a8" stroke-width="2">356 <rect x="5" y="3" width="14" height="10" rx="2"/><path d="M8 9l8-4M4 21h16"/>357 </svg>358 Rewards359 </div>360 <div class="nav-item">361 <svg viewBox="0 0 24 24" fill="none" stroke="#9a98a8" stroke-width="2">362 <rect x="3" y="4" width="18" height="14" rx="2"/><path d="M7 8h10M7 12h10M7 16h6"/>363 </svg>364 Orders365 </div>366 <div class="nav-item">367 <svg viewBox="0 0 24 24" fill="none" stroke="#9a98a8" stroke-width="2">368 <circle cx="12" cy="8" r="4"/><path d="M4 21c2-4 14-4 16 0"/>369 </svg>370 Account371 </div>372 </div>373 <div class="home-dot"></div>374</div>375</body>376</html>