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>Restaurant Listings UI</title>7<style>8 :root{9 --bg:#ffffff;10 --text:#2e3438;11 --muted:#6b7076;12 --line:#e5e6e8;13 --chip:#f5f6f7;14 --red:#e53935;15 --shadow:0 8px 24px rgba(0,0,0,0.12);16 --radius:24px;17 }18 body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }19 #render-target{20 width:1080px; height:2400px;21 position:relative; overflow:hidden;22 background:var(--bg);23 }24 /* Status bar */25 .status-bar{26 height:96px; padding:0 36px;27 display:flex; align-items:flex-end; justify-content:space-between;28 color:#61676b; font-size:42px; line-height:1;29 }30 .status-icons{ display:flex; gap:20px; align-items:center; padding-bottom:10px;}31 .icon{ width:40px; height:40px; display:inline-block;}32 /* Main content */33 .content{ padding:24px 48px 180px 48px; }34 .greeting-row{35 display:flex; align-items:center; justify-content:space-between;36 margin-top:12px;37 }38 .greeting-title{39 font-size:76px; font-weight:700; color:var(--text); margin:18px 0 12px 0;40 }41 .avatar{42 width:96px; height:96px; border-radius:50%;43 background:#E0E0E0; border:1px solid #BDBDBD;44 display:flex; align-items:center; justify-content:center; color:#757575; font-size:26px;45 }46 .tabs{47 display:flex; gap:52px; align-items:flex-end;48 border-bottom:1px solid var(--line);49 margin-top:18px; padding-bottom:12px;50 }51 .tab{ font-size:44px; color:var(--muted); padding-bottom:18px; }52 .tab.active{ color:var(--red); border-bottom:6px solid var(--red); }53 /* chips row */54 .chips{ display:flex; gap:18px; margin:28px 0 20px; }55 .chip{56 display:flex; align-items:center; gap:16px;57 border:1px solid #dadcdf; padding:20px 26px;58 border-radius:50px; background:#fff; color:#3c4248; font-size:36px;59 box-shadow:0 2px 0 rgba(0,0,0,0.02);60 }61 .chip .icon{ width:44px; height:44px; }62 /* Section header */63 .section-header{64 display:flex; align-items:center; justify-content:space-between;65 margin-top:36px; margin-bottom:18px;66 }67 .section-title{ font-size:56px; font-weight:700; color:var(--text); }68 .view-all{ font-size:40px; color:var(--red); font-weight:600; }69 /* Carousel */70 .carousel{71 display:flex; gap:28px; overflow:hidden; padding-bottom:8px;72 }73 .card{74 width:940px; border-radius:28px; background:#fff; box-shadow:var(--shadow);75 overflow:hidden; border:1px solid #f0f1f2;76 }77 .card .img{78 height:360px; background:#E0E0E0; border-bottom:1px solid #BDBDBD;79 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px; position:relative;80 }81 .img .dots{82 position:absolute; top:20px; right:22px; display:flex; gap:10px;83 }84 .dot{ width:12px; height:12px; background:#fff; border-radius:50%; opacity:0.95; }85 .card-body{ padding:22px 26px 26px; }86 .title-row{ display:flex; align-items:center; justify-content:space-between; }87 .card-title{ font-size:52px; font-weight:800; letter-spacing:1px; color:#31363b; }88 .bookmark{89 width:48px; height:48px; stroke:var(--red); fill:none;90 }91 .meta{ color:#6b7076; font-size:34px; margin-top:6px; }92 .meta .star{ color:var(--red); font-weight:700; }93 .times{ display:flex; gap:16px; margin-top:18px; }94 .time-chip{95 padding:18px 26px; border-radius:12px; font-size:36px; font-weight:700;96 }97 .time-chip.gray{ background:#e9eaec; color:#98a0a6; }98 .time-chip.red{ background:var(--red); color:#fff; }99 /* Second section spacing */100 .spacer-xxl{ height:28px; }101 .section-gap{ height:40px; }102 /* Bottom navigation */103 .bottom-nav{104 position:absolute; left:0; right:0; bottom:40px; height:140px;105 border-top:1px solid var(--line); background:#fff;106 display:flex; align-items:center; justify-content:space-around;107 padding:0 24px;108 }109 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:6px; color:#646b70; font-size:30px; }110 .nav-item svg{ width:50px; height:50px; }111 .nav-item.active{ color:var(--red); }112 .active .indicator{ width:16px; height:16px; background:var(--red); border-radius:50%; margin-bottom:6px; }113 /* Home indicator bar */114 .home-indicator{115 position:absolute; left:50%; transform:translateX(-50%);116 bottom:8px; width:320px; height:12px; background:#1a1a1a; border-radius:12px; opacity:0.85;117 }118</style>119</head>120<body>121<div id="render-target">122 <!-- Status bar -->123 <div class="status-bar">124 <div style="padding-bottom:10px;">6:44</div>125 <div class="status-icons">126 <!-- WiFi -->127 <svg class="icon" viewBox="0 0 24 24" fill="#61676b"><path d="M12 20a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2zm6-5a8 8 0 0 0-12 0l1.5 1.1a6 6 0 0 1 9 0L18 15zM21 10a13 13 0 0 0-18 0l1.7 1.3a11 11 0 0 1 14.6 0L21 10z"/></svg>128 <!-- Battery -->129 <svg class="icon" viewBox="0 0 28 14">130 <rect x="1" y="3" width="22" height="8" rx="2" ry="2" stroke="#61676b" fill="none" stroke-width="2"/>131 <rect x="3" y="5" width="18" height="4" fill="#61676b"/>132 <rect x="24" y="5" width="3" height="4" rx="1" fill="#61676b"/>133 </svg>134 </div>135 </div>136 137 <div class="content">138 <div class="greeting-row">139 <div class="greeting-title">Good evening</div>140 <div class="avatar">Profile</div>141 </div>142 143 <div class="tabs">144 <div class="tab active">Reservations</div>145 <div class="tab">Experiences</div>146 <div class="tab">Delivery & Takeout</div>147 </div>148 149 <div class="chips">150 <div class="chip">151 <svg class="icon" viewBox="0 0 24 24" stroke="#61676b" fill="none" stroke-width="2">152 <circle cx="9" cy="7" r="3"/>153 <path d="M2 20c0-4 3-6 7-6"/>154 <circle cx="17" cy="9" r="3"/>155 <path d="M22 20c0-3-2-5-5-6"/>156 </svg>157 <span>2 • Tonight at 7:00 PM</span>158 </div>159 <div class="chip">160 <svg class="icon" viewBox="0 0 24 24" stroke="#61676b" fill="none" stroke-width="2">161 <path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/>162 <circle cx="12" cy="10" r="2.5"/>163 </svg>164 <span>Paris, France</span>165 </div>166 </div>167 168 <div class="section-header">169 <div class="section-title">Available for dinner now</div>170 <div class="view-all">VIEW ALL</div>171 </div>172 173 <div class="carousel">174 <!-- Card 1 -->175 <div class="card">176 <div class="img">177 [IMG: Restaurant facade at night]178 <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>179 </div>180 <div class="card-body">181 <div class="title-row">182 <div class="card-title">DROUANT</div>183 <svg class="bookmark" viewBox="0 0 24 24">184 <path d="M7 3h10a1 1 0 0 1 1 1v16l-6-3-6 3V4a1 1 0 0 1 1-1z"/>185 </svg>186 </div>187 <div class="meta">$$$$ • French • <span class="star">★</span> 4.7 (96)</div>188 <div class="times">189 <div class="time-chip gray" style="width:210px; text-align:center;"> </div>190 <div class="time-chip red">7:00 PM</div>191 <div class="time-chip red">7:15 PM</div>192 </div>193 </div>194 </div>195 <!-- Card 2 -->196 <div class="card">197 <div class="img">198 [IMG: Contemporary dish top view]199 <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>200 </div>201 <div class="card-body">202 <div class="title-row">203 <div class="card-title" style="text-transform:none; letter-spacing:0;">Tracé</div>204 <svg class="bookmark" viewBox="0 0 24 24">205 <path d="M7 3h10a1 1 0 0 1 1 1v16l-6-3-6 3V4a1 1 0 0 1 1-1z"/>206 </svg>207 </div>208 <div class="meta">$$$$ • Contemporary • <span class="star">★</span> 4.6</div>209 <div class="times">210 <div class="time-chip gray" style="width:210px; text-align:center;"> </div>211 <div class="time-chip red">7:00 PM</div>212 <div class="time-chip red">7:15 PM</div>213 </div>214 </div>215 </div>216 </div>217 218 <div class="section-gap"></div>219 220 <div class="section-header">221 <div class="section-title">Outdoor dining</div>222 <div style="width:1px;"></div>223 </div>224 225 <div class="carousel">226 <!-- Card 3 -->227 <div class="card">228 <div class="img">229 [IMG: Parisian terrace cafe seating]230 <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>231 </div>232 <div class="card-body">233 <div class="title-row">234 <div class="card-title" style="text-transform:none;">L’Entente - Le British …</div>235 <svg class="bookmark" viewBox="0 0 24 24">236 <path d="M7 3h10a1 1 0 0 1 1 1v16l-6-3-6 3V4a1 1 0 0 1 1-1z"/>237 </svg>238 </div>239 <div class="meta">$$$ • British • <span class="star">★</span> 4.2 (233)</div>240 <div class="times">241 <div class="time-chip red">6:45 PM</div>242 <div class="time-chip red">7:00 PM</div>243 <div class="time-chip red">7:15 PM</div>244 </div>245 </div>246 </div>247 <!-- Card 4 -->248 <div class="card">249 <div class="img">250 [IMG: Minimalist sushi interior]251 <div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>252 </div>253 <div class="card-body">254 <div class="title-row">255 <div class="card-title" style="text-transform:none;">Bloom Sushi</div>256 <svg class="bookmark" viewBox="0 0 24 24">257 <path d="M7 3h10a1 1 0 0 1 1 1v16l-6-3-6 3V4a1 1 0 0 1 1-1z"/>258 </svg>259 </div>260 <div class="meta">$$$ • Japanese • <span class="star">★</span> 4.5</div>261 <div class="times">262 <div class="time-chip gray" style="width:210px; text-align:center;"> </div>263 <div class="time-chip red">7:00 PM</div>264 <div class="time-chip red">7:15 PM</div>265 </div>266 </div>267 </div>268 </div>269 </div>270 271 <!-- Bottom navigation -->272 <div class="bottom-nav">273 <div class="nav-item active">274 <div class="indicator"></div>275 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">276 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4H9v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>277 </svg>278 <div>Home</div>279 </div>280 <div class="nav-item">281 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">282 <circle cx="11" cy="11" r="7"/>283 <path d="M21 21l-4.3-4.3"/>284 </svg>285 <div>Search</div>286 </div>287 <div class="nav-item">288 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">289 <path d="M12 21l-8-5V5l8-4 8 4v11z"/>290 <path d="M12 21V6"/>291 </svg>292 <div>Saved</div>293 </div>294 <div class="nav-item">295 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">296 <circle cx="12" cy="12" r="9"/>297 <path d="M12 7v5l4 2"/>298 </svg>299 <div>History</div>300 </div>301 <div class="nav-item">302 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">303 <path d="M12 22a4 4 0 0 0 4-4H8a4 4 0 0 0 4 4z"/>304 <path d="M18 8a6 6 0 1 0-12 0v6h12V8z"/>305 </svg>306 <div>Notifications</div>307 </div>308 </div>309 310 <div class="home-indicator"></div>311</div>312</body>313</html>