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 Listing UI</title>7<style>8 body { margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#312f3f; }9 #render-target{10 width:1080px; height:2400px; position:relative; overflow:hidden;11 background:#F5F3FA;12 }13 14 /* Status bar */15 .status-bar{16 height:92px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17 color:#5B586D; font-weight:600; font-size:38px;18 }19 .status-icons{ display:flex; gap:26px; align-items:center; }20 .dot{ width:10px; height:10px; background:#5B586D; border-radius:50%; display:inline-block; opacity:.6; }21 22 /* Search area */23 .search-wrap{ padding:22px 36px 8px; }24 .search-pill{25 background:#FFFFFF; border:1px solid #E5E2EE; border-radius:56px;26 height:120px; display:flex; align-items:center; padding:0 30px; gap:28px;27 box-shadow: 0 4px 10px rgba(70,60,110,0.08);28 }29 .field{ flex:1; display:flex; align-items:center; gap:18px; color:#5C5A6E; font-size:38px; white-space:nowrap; overflow:hidden; }30 .field .truncate{ text-overflow:ellipsis; overflow:hidden; }31 .divider{ width:2px; height:64px; background:#E8E6EF; }32 33 /* Chips row */34 .chips-row{ padding:26px 36px; display:flex; align-items:center; gap:22px; }35 .chip{36 display:flex; align-items:center; gap:14px; padding:20px 30px; border-radius:50px;37 border:1px solid #E3E0EC; color:#5B586D; background:#FFFFFF; font-weight:600; font-size:34px;38 }39 .chip.selected{40 background:#585374; color:#FFFFFF; border-color:#585374;41 box-shadow:0 6px 14px rgba(72,62,120,0.25) inset, 0 6px 10px rgba(72,62,120,0.12);42 }43 .chip .caret{ margin-left:8px; }44 .chip-icon{ width:38px; height:38px; display:inline-block; }45 46 /* Cards */47 .list{ padding:0 36px 220px; }48 .card{49 background:#FFFFFF; border-radius:28px; overflow:hidden; margin-bottom:34px;50 border:1px solid #ECE8F4; box-shadow:0 8px 18px rgba(40,30,90,0.1);51 }52 .img{53 height:300px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;54 display:flex; justify-content:center; align-items:center; color:#757575; font-size:36px;55 position:relative;56 }57 .img.dark::after{58 content:""; position:absolute; inset:0; background:rgba(24,22,32,0.55);59 }60 .preorder-text{61 position:absolute; inset:0; display:flex; align-items:center; justify-content:center;62 color:#FFFFFF; font-weight:800; font-size:44px; letter-spacing:.2px; text-align:center;63 pointer-events:none;64 }65 .tag-plus{66 position:absolute; right:22px; top:22px; background:#FFD42A; color:#111; 67 border-radius:12px; font-weight:900; width:78px; height:78px; display:flex; align-items:center; justify-content:center;68 box-shadow:0 4px 10px rgba(0,0,0,0.15);69 z-index:2;70 }71 72 .card-body{ padding:30px; position:relative; }73 .title-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }74 .title{ font-size:52px; font-weight:800; color:#2F2B3F; }75 .right-meta{ text-align:right; color:#6D6880; font-size:36px; line-height:1.3; }76 .sub-row{ margin-top:12px; display:flex; align-items:center; gap:14px; color:#6C6880; font-size:36px; }77 .sub-row .star{ color:#FFB74D; }78 .pill-green{ color:#2BBE69; font-weight:700; }79 80 /* Bottom nav */81 .tabbar{82 position:absolute; left:0; right:0; bottom:0; height:190px; background:#FFFFFF;83 border-top:1px solid #ECE8F4; display:flex; justify-content:space-around; align-items:center;84 box-shadow:0 -6px 22px rgba(20,10,60,0.08);85 }86 .tab{ width:25%; display:flex; flex-direction:column; align-items:center; gap:10px; color:#8A879A; font-size:32px; font-weight:700; }87 .tab .ico{ width:52px; height:52px; }88 .tab.active{ color:#FF7F2A; }89 .home-indicator{90 position:absolute; bottom:18px; left:50%; transform:translateX(-50%);91 width:360px; height:10px; background:#1A1A1A; opacity:.18; border-radius:10px;92 }93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status bar -->99 <div class="status-bar">100 <div>11:16</div>101 <div class="status-icons">102 <span class="dot"></span>103 <span class="dot"></span>104 <span class="dot"></span>105 <span class="dot" style="width:14px;height:14px;"></span>106 <!-- signal -->107 <svg width="40" height="34" viewBox="0 0 24 24" fill="#5B586D" xmlns="http://www.w3.org/2000/svg">108 <path d="M3 18h2v3H3v-3zm4-5h2v8H7v-8zm4-4h2v12h-2V9zm4-4h2v16h-2V5zm4-3h2v19h-2V2z"/>109 </svg>110 <!-- battery -->111 <svg width="54" height="34" viewBox="0 0 28 18" xmlns="http://www.w3.org/2000/svg">112 <rect x="1" y="3" width="22" height="12" rx="2" fill="none" stroke="#5B586D" stroke-width="2"/>113 <rect x="3" y="5" width="18" height="8" rx="1" fill="#5B586D"/>114 <rect x="24" y="7" width="3" height="4" rx="1" fill="#5B586D"/>115 </svg>116 </div>117 </div>118 119 <!-- Search area -->120 <div class="search-wrap">121 <div class="search-pill">122 <div class="field">123 <svg class="chip-icon" viewBox="0 0 24 24" fill="none">124 <circle cx="11" cy="11" r="7" stroke="#6A667B" stroke-width="2"/>125 <path d="M16 16l5 5" stroke="#6A667B" stroke-width="2" stroke-linecap="round"/>126 </svg>127 <span class="truncate">Papa johns resta...</span>128 </div>129 <div class="divider"></div>130 <div class="field">131 <svg class="chip-icon" viewBox="0 0 24 24" fill="none">132 <path d="M12 2a7 7 0 0 1 7 7c0 5-7 12-7 12S5 14 5 9a7 7 0 0 1 7-7z" stroke="#6A667B" stroke-width="2"/>133 <circle cx="12" cy="9" r="3" fill="#6A667B"/>134 </svg>135 <span>Seattle, WA 98101</span>136 </div>137 </div>138 </div>139 140 <!-- Chips -->141 <div class="chips-row">142 <div class="chip selected">143 <svg class="chip-icon" viewBox="0 0 24 24" fill="none">144 <path d="M3 16h11l4-6H9l-2-3H3v9z" stroke="#fff" stroke-width="2" stroke-linejoin="round"/>145 </svg>146 Delivery147 </div>148 <div class="chip">149 <svg class="chip-icon" viewBox="0 0 24 24" fill="none">150 <path d="M5 20l2-5 2 3 3-6 3 8" stroke="#5B586D" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>151 </svg>152 Pickup153 </div>154 <div class="chip selected">155 Restaurants156 <svg class="caret" width="28" height="28" viewBox="0 0 24 24" fill="none">157 <path d="M6 9l6 6 6-6" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>158 </svg>159 </div>160 <div class="chip">161 <svg class="chip-icon" viewBox="0 0 24 24" fill="none">162 <path d="M3 6h18M7 12h10M10 18h4" stroke="#5B586D" stroke-width="2" stroke-linecap="round"/>163 </svg>164 Filter165 </div>166 </div>167 168 <!-- Cards list -->169 <div class="list">170 <!-- Card 1 -->171 <div class="card">172 <div class="img">[IMG: Pizza themed banner]173 <div class="tag-plus">174 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">175 <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="3" stroke-linecap="round"/>176 </svg>177 </div>178 </div>179 <div class="card-body">180 <div class="title-row">181 <div class="title">Papa Johns</div>182 <div class="right-meta">183 <div>$2.99 delivery</div>184 <div>30-40 mins</div>185 </div>186 </div>187 <div class="sub-row">188 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFB74D" class="star">189 <path d="M12 2l2.9 6.5 7.1.7-5.3 4.6 1.6 6.9L12 17l-6.3 3.7 1.6-6.9L2 9.2l7.1-.7L12 2z"/>190 </svg>191 <span>3.7 (14) • Pizza</span>192 </div>193 </div>194 </div>195 196 <!-- Card 2 -->197 <div class="card">198 <div class="img dark">[IMG: Taco themed banner]199 <div class="preorder-text">Preorder for 5:00am</div>200 <div class="tag-plus">201 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">202 <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="3" stroke-linecap="round"/>203 </svg>204 </div>205 </div>206 <div class="card-body">207 <div class="title-row">208 <div class="title">Lily's Salvadorean Restaurant</div>209 <div class="right-meta">Closed</div>210 </div>211 <div class="sub-row">212 <span class="pill-green">New</span>213 <span>• Mexican</span>214 </div>215 </div>216 </div>217 218 <!-- Card 3 -->219 <div class="card">220 <div class="img dark">[IMG: Taco themed banner]221 <div class="preorder-text">Preorder for 12:15am</div>222 <div class="tag-plus">223 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">224 <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="3" stroke-linecap="round"/>225 </svg>226 </div>227 </div>228 <div class="card-body">229 <div class="title-row">230 <div class="title">Best Roasted Corn</div>231 <div class="right-meta">Closed</div>232 </div>233 <div class="sub-row">234 <svg width="36" height="36" viewBox="0 0 24 24" fill="#FFB74D" class="star">235 <path d="M12 2l2.9 6.5 7.1.7-5.3 4.6 1.6 6.9L12 17l-6.3 3.7 1.6-6.9L2 9.2l7.1-.7L12 2z"/>236 </svg>237 <span>4.0 (74) • Mexican</span>238 </div>239 </div>240 </div>241 242 <!-- Partial Card 4 (visible under navbar) -->243 <div class="card">244 <div class="img dark">[IMG: Pizza themed banner]245 <div class="preorder-text">Preorder for 12:00am</div>246 <div class="tag-plus">247 <svg width="40" height="40" viewBox="0 0 24 24" fill="none">248 <path d="M12 5v14M5 12h14" stroke="#111" stroke-width="3" stroke-linecap="round"/>249 </svg>250 </div>251 </div>252 </div>253 </div>254 255 <!-- Bottom navigation -->256 <div class="tabbar">257 <div class="tab active">258 <svg class="ico" viewBox="0 0 24 24" fill="none">259 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1v-9z" stroke="#FF7F2A" stroke-width="2" stroke-linejoin="round"/>260 </svg>261 <div>Home</div>262 </div>263 <div class="tab">264 <svg class="ico" viewBox="0 0 24 24" fill="none">265 <path d="M3 8h18l-2 11H5L3 8zm3-4h12l1 4H5l1-4z" stroke="#8A879A" stroke-width="2" stroke-linejoin="round"/>266 <circle cx="9" cy="14" r="1.5" fill="#8A879A"/>267 <circle cx="15" cy="14" r="1.5" fill="#8A879A"/>268 </svg>269 <div>Rewards</div>270 </div>271 <div class="tab">272 <svg class="ico" viewBox="0 0 24 24" fill="none">273 <path d="M4 6h16M4 12h16M4 18h16" stroke="#8A879A" stroke-width="2" stroke-linecap="round"/>274 </svg>275 <div>Orders</div>276 </div>277 <div class="tab">278 <svg class="ico" viewBox="0 0 24 24" fill="none">279 <circle cx="12" cy="7" r="4" stroke="#8A879A" stroke-width="2"/>280 <path d="M4 22c1.5-4 6-6 8-6s6.5 2 8 6" stroke="#8A879A" stroke-width="2" stroke-linecap="round"/>281 </svg>282 <div>Account</div>283 </div>284 <div class="home-indicator"></div>285 </div>286 287</div>288</body>289</html>