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, sans-serif; color: #111; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 }14 15 /* Global helpers */16 .row { display: flex; align-items: center; }17 .space-between { justify-content: space-between; }18 .gutter { padding: 0 48px; }19 .muted { color: #666; }20 .divider { height: 1px; background: #EEE; margin: 24px 0; }21 22 /* Status bar */23 .status-bar { height: 90px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: #333; }24 .status-bar .left { font-size: 38px; letter-spacing: 0.5px; }25 .status-bar .right { display: flex; gap: 24px; align-items: center; }26 .icon { display: inline-block; }27 .wifi { width: 40px; height: 28px; }28 .battery {29 width: 52px; height: 28px; border: 2px solid #333; border-radius: 6px; position: relative;30 }31 .battery::after { content: ""; position: absolute; right: -8px; top: 8px; width: 6px; height: 12px; background: #333; border-radius: 2px; }32 .battery .level { position: absolute; left: 3px; top: 3px; height: 20px; width: 32px; background: #333; border-radius: 4px; }33 34 /* Header */35 .header { height: 120px; }36 .header .location { gap: 16px; font-size: 48px; font-weight: 700; }37 .header .cart-btn svg { width: 48px; height: 48px; }38 39 /* Category bubbles */40 .bubble-row { padding: 18px 48px 8px; display: flex; gap: 42px; }41 .bubble { width: 150px; display: flex; flex-direction: column; align-items: center; text-align: center; }42 .bubble .circle {43 width: 120px; height: 120px; border-radius: 60px;44 background: #F4F4F4; display: flex; align-items: center; justify-content: center;45 border: 1px solid #E6E6E6;46 }47 .bubble .label { margin-top: 14px; font-size: 32px; }48 49 /* Second category row (flat icons + labels) */50 .icon-row { padding: 8px 48px 20px; display: flex; gap: 48px; }51 .icon-item { width: 140px; text-align: center; }52 .icon-item .img {53 width: 100px; height: 80px; margin: 0 auto 12px;54 background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px; border-radius: 12px;55 }56 .icon-item .text { font-size: 30px; }57 58 /* Filter chips */59 .chips { padding: 8px 48px 16px; display: flex; gap: 24px; flex-wrap: nowrap; }60 .chip {61 display: inline-flex; align-items: center; gap: 12px;62 padding: 20px 28px; background: #F1F1F1; border-radius: 40px; font-size: 32px; color: #222; border: 1px solid #E6E6E6;63 }64 .chip svg { width: 34px; height: 34px; }65 66 /* Promo card */67 .promo-card {68 margin: 24px 48px; background: #F6EFE7; border-radius: 22px; padding: 32px;69 display: flex; align-items: center; gap: 28px; border: 1px solid #E5DDD2;70 }71 .promo-left { flex: 1; }72 .promo-title { font-size: 42px; font-weight: 800; margin-bottom: 12px; }73 .promo-sub { font-size: 36px; color: #444; margin-bottom: 26px; }74 .promo-btn { display: inline-block; background: #8C2B25; color: #fff; padding: 20px 34px; border-radius: 50px; font-size: 32px; font-weight: 700; }75 .promo-right { width: 280px; }76 .promo-right .img {77 width: 100%; height: 180px; background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 16px;78 }79 80 /* Section header */81 .section { padding: 24px 48px 12px; }82 .section .title-row { display: flex; align-items: center; justify-content: space-between; }83 .section .title { font-size: 56px; font-weight: 800; }84 .section .arrow { width: 42px; height: 42px; }85 86 /* Restaurant cards */87 .cards-row { padding: 16px 48px; display: flex; gap: 28px; }88 .card {89 background: #fff; border: 1px solid #E8E8E8; border-radius: 22px; overflow: hidden;90 width: 700px;91 }92 .card.small { width: 320px; }93 .card .photo {94 width: 100%; height: 420px; background: #E0E0E0; border-bottom: 1px solid #D7D7D7;95 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px;96 }97 .card .content { padding: 22px; }98 .card .name { font-size: 42px; font-weight: 800; display: flex; align-items: center; gap: 12px; }99 .card .meta { margin-top: 8px; font-size: 30px; color: #555; }100 .rating { margin-top: 8px; font-size: 30px; color: #555; display: flex; align-items: center; gap: 10px; }101 .rating svg { width: 28px; height: 28px; }102 103 /* Bottom navigation */104 .bottom-nav {105 position: absolute; left: 0; bottom: 0; width: 1080px; height: 210px;106 border-top: 1px solid #E8E8E8; background: #fff; display: flex; align-items: center; justify-content: space-around;107 }108 .tab { width: 20%; text-align: center; }109 .tab svg { width: 54px; height: 54px; }110 .tab .label { margin-top: 12px; font-size: 28px; color: #333; }111 .tab.active .label { color: #E53935; }112 .tab.active svg { fill: #E53935; }113 114 /* Home indicator */115 .home-indicator {116 position: absolute; bottom: 220px; left: 50%; transform: translateX(-50%);117 width: 200px; height: 12px; background: #C9C9C9; border-radius: 8px;118 }119 120 /* Simple circle placeholder with text for bubble icons */121 .circle .img {122 width: 90px; height: 90px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 10px;123 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 22px;124 }125</style>126</head>127<body>128<div id="render-target">129 130 <!-- Status bar -->131 <div class="status-bar">132 <div class="left">3:47</div>133 <div class="right">134 <svg class="wifi" viewBox="0 0 24 24">135 <path d="M2 9c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 15c2-2 6-2 8 0M12 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>136 </svg>137 <div class="battery"><div class="level"></div></div>138 </div>139 </div>140 141 <!-- Header -->142 <div class="header gutter row space-between">143 <div class="location row">144 <svg width="44" height="44" viewBox="0 0 24 24">145 <path d="M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8zm0 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6z" fill="#111"/>146 </svg>147 <div>98101</div>148 <svg width="36" height="36" viewBox="0 0 24 24">149 <path d="M6 9l6 6 6-6" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>150 </svg>151 </div>152 <div class="cart-btn">153 <svg viewBox="0 0 24 24">154 <path d="M3 3h3l2 12h10l2-8H7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>155 <circle cx="9" cy="20" r="2" fill="#111"></circle>156 <circle cx="18" cy="20" r="2" fill="#111"></circle>157 </svg>158 </div>159 </div>160 161 <!-- Category bubbles -->162 <div class="bubble-row">163 <div class="bubble">164 <div class="circle"><div class="img">[IMG: Detergent]</div></div>165 <div class="label">Convenience</div>166 </div>167 <div class="bubble">168 <div class="circle"><div class="img">[IMG: Bananas]</div></div>169 <div class="label">Grocery</div>170 </div>171 <div class="bubble">172 <div class="circle"><div class="img">[IMG: Wine]</div></div>173 <div class="label">Alcohol</div>174 </div>175 <div class="bubble">176 <div class="circle"><div class="img">[IMG: Paw]</div></div>177 <div class="label">Pets</div>178 </div>179 <div class="bubble">180 <div class="circle"><div class="img">[IMG: Tomatoes]</div></div>181 <div class="label">Offers</div>182 </div>183 </div>184 185 <!-- Second category row -->186 <div class="icon-row">187 <div class="icon-item">188 <div class="img">[IMG: Rainbow Star]</div>189 <div class="text">Acclaimed</div>190 </div>191 <div class="icon-item">192 <div class="img">[IMG: Breakfast]</div>193 <div class="text">Breakfast</div>194 </div>195 <div class="icon-item">196 <div class="img">[IMG: Coffee Mug]</div>197 <div class="text">Coffee</div>198 </div>199 <div class="icon-item">200 <div class="img">[IMG: Pizza Slice]</div>201 <div class="text">Pizza</div>202 </div>203 <div class="icon-item">204 <div class="img">[IMG: Burger Box]</div>205 <div class="text">Fast Food</div>206 </div>207 <div class="icon-item">208 <div class="img">[IMG: Chinese Takeout]</div>209 <div class="text">Chinese</div>210 </div>211 </div>212 213 <!-- Filter chips -->214 <div class="chips">215 <div class="chip">216 <svg viewBox="0 0 24 24">217 <path d="M21 10l-7 7-8-8 7-7h6l2 2v6z" fill="#333"/>218 </svg>219 Offers220 </div>221 <div class="chip">Pickup</div>222 <div class="chip">223 <svg viewBox="0 0 24 24">224 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#333"/>225 </svg>226 Ratings227 <svg viewBox="0 0 24 24">228 <path d="M6 9l6 6 6-6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>229 </svg>230 </div>231 <div class="chip">Under 30 min</div>232 </div>233 234 <!-- Promo card -->235 <div class="promo-card">236 <div class="promo-left">237 <div class="promo-title">DashPass</div>238 <div class="promo-sub">$0 delivery fees + 10% off with DashPass.</div>239 <div class="promo-btn">Try It Free for 30 Days</div>240 </div>241 <div class="promo-right">242 <div class="img">[IMG: Produce & Packaging]</div>243 </div>244 </div>245 246 <!-- Section header -->247 <div class="section">248 <div class="title-row">249 <div class="title">National Favorites</div>250 <svg class="arrow" viewBox="0 0 24 24">251 <path d="M8 5l8 7-8 7" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>252 </svg>253 </div>254 </div>255 256 <!-- Restaurant cards -->257 <div class="cards-row">258 <div class="card">259 <div class="photo">[IMG: Fried foods platter]</div>260 <div class="content">261 <div class="name">Jack in the Box</div>262 <div class="meta">1.6 mi • 37 min • $0 delivery fee, first order</div>263 <div class="rating">264 <div>4.4</div>265 <svg viewBox="0 0 24 24">266 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#777"/>267 </svg>268 <div>(10,200+)</div>269 </div>270 </div>271 </div>272 273 <div class="card small">274 <div class="photo">[IMG: Burger plate]</div>275 <div class="content">276 <div class="name">Denny's</div>277 <div class="meta">2.1 mi • 46 min • —</div>278 <div class="rating">279 <div>4.2</div>280 <svg viewBox="0 0 24 24">281 <path d="M12 2l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z" fill="#777"/>282 </svg>283 <div>(1,900+)</div>284 </div>285 </div>286 </div>287 </div>288 289 <!-- Home indicator (above nav) -->290 <div class="home-indicator"></div>291 292 <!-- Bottom navigation -->293 <div class="bottom-nav">294 <div class="tab active">295 <svg viewBox="0 0 24 24">296 <path d="M3 11l9-8 9 8v9H3v-9z" fill="#E53935"/>297 </svg>298 <div class="label">Home</div>299 </div>300 <div class="tab">301 <svg viewBox="0 0 24 24">302 <path d="M6 2l4 5h8l-4 5 4 10-10-7-6 3 4-11-4-5h4z" fill="#777"/>303 </svg>304 <div class="label">Pickup</div>305 </div>306 <div class="tab">307 <svg viewBox="0 0 24 24">308 <circle cx="11" cy="11" r="7" stroke="#777" stroke-width="2" fill="none"/>309 <path d="M20 20l-4-4" stroke="#777" stroke-width="2" stroke-linecap="round"/>310 </svg>311 <div class="label">Search</div>312 </div>313 <div class="tab">314 <svg viewBox="0 0 24 24">315 <rect x="3" y="4" width="18" height="14" rx="2" ry="2" fill="#777"></rect>316 <path d="M3 8h18M7 12h6" stroke="#fff" stroke-width="2"/>317 </svg>318 <div class="label">Orders</div>319 </div>320 <div class="tab">321 <svg viewBox="0 0 24 24">322 <circle cx="12" cy="8" r="4" fill="#777"></circle>323 <path d="M4 22c0-5 4-8 8-8s8 3 8 8" stroke="#777" stroke-width="2" fill="none"/>324 </svg>325 <div class="label">Account</div>326 </div>327 </div>328 329</div>330</body>331</html>