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 - Delivery & Takeout</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #2E3034; }9 #render-target {10 position: relative; overflow: hidden;11 width: 1080px; height: 2400px;12 background: #FFFFFF;13 }14 /* General helpers */15 .row { display: flex; align-items: center; }16 .space { height: 24px; }17 .content { padding: 0 48px; }18 .muted { color: #6A6E73; }19 .divider { height: 1px; background: #E6E8EB; margin: 24px 0; }20 .shadow { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }21 /* Status bar */22 .status-bar {23 height: 96px;24 padding: 0 32px;25 display: flex; align-items: center; justify-content: space-between;26 color: #6A6E73; font-weight: 600; font-size: 36px;27 }28 .status-icons svg { margin-left: 24px; }29 /* App bar */30 .app-bar {31 height: 140px;32 padding: 0 32px;33 display: flex; align-items: center; justify-content: space-between;34 }35 .app-left { display: flex; align-items: center; }36 .app-title {37 font-size: 48px; font-weight: 700; color: #2E3034; margin-left: 24px;38 }39 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }40 /* Tabs */41 .tabs {42 display: flex; gap: 48px;43 padding: 0 48px;44 height: 100px; align-items: center;45 border-bottom: 1px solid #E6E8EB;46 font-size: 36px; font-weight: 600;47 }48 .tab { color: #2E3034; }49 .tab.active { color: #D64B4B; position: relative; }50 .tab.active::after {51 content: ""; position: absolute; left: 0; right: 0; bottom: -32px;52 height: 6px; background: #D64B4B; border-radius: 3px;53 }54 /* Info banner */55 .info-banner {56 margin: 24px 48px 0 48px;57 padding: 24px;58 color: #3F6E93;59 background: #F3F8FC;60 border: 1px solid #D9E6F2;61 border-radius: 16px;62 font-size: 34px;63 line-height: 1.4;64 }65 .alert-btn {66 margin: 24px 48px;67 width: 264px; height: 96px;68 background: #4C7D86; color: #fff; border-radius: 16px;69 display: flex; align-items: center; justify-content: center; gap: 18px;70 font-weight: 700; font-size: 34px;71 }72 /* Horizontal cards */73 .card-scroll { padding: 0 48px; margin-top: 8px; overflow-x: auto; white-space: nowrap; }74 .rest-card {75 display: inline-block;76 width: 624px; margin-right: 36px;77 background: #fff; border-radius: 24px; border: 1px solid #E6E8EB;78 box-shadow: 0 8px 18px rgba(0,0,0,0.06);79 overflow: hidden;80 }81 .rest-image {82 height: 300px; background: #E0E0E0; border-bottom: 1px solid #BDBDBD;83 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 32px;84 position: relative;85 }86 .bookmark-overlay { position: absolute; right: 24px; top: 24px; width: 60px; height: 60px; background: rgba(255,255,255,0.9); border-radius: 12px; display: flex; align-items: center; justify-content: center; }87 .rest-body { padding: 24px; }88 .rest-title { font-size: 34px; font-weight: 700; color: #2E3034; }89 .rest-meta { font-size: 30px; color: #6A6E73; margin-top: 8px; }90 .chip-row { margin-top: 16px; display: flex; gap: 16px; }91 .chip {92 background: #D64B4B; color: #fff; padding: 18px 24px; border-radius: 12px;93 font-weight: 700; font-size: 30px;94 }95 /* Sections */96 .section-title { font-size: 44px; font-weight: 800; margin: 36px 0 12px 0; }97 .section-sub { font-size: 34px; color: #6A6E73; margin-bottom: 16px; }98 .pill {99 height: 96px; border: 1px solid #E1E3E6; border-radius: 16px;100 display: inline-flex; align-items: center; justify-content: center;101 padding: 0 36px; font-size: 34px; font-weight: 700;102 background: #fff; color: #D64B4B;103 }104 .partner-row { display: flex; gap: 24px; }105 .partner {106 height: 96px; border: 1px solid #E1E3E6; border-radius: 16px;107 display: inline-flex; align-items: center; padding: 0 36px;108 font-size: 34px; font-weight: 700; color: #6A6E73; background: #fff;109 }110 .partner.teal { color: #3DB7A4; }111 .partner.orange { color: #F39A3B; }112 /* Menu items */113 .dish {114 padding: 24px 48px;115 }116 .dish-title { font-size: 42px; font-weight: 800; margin-bottom: 12px; }117 .dish-desc { font-size: 34px; color: #6A6E73; line-height: 1.5; }118 .meta-row { display: flex; gap: 36px; align-items: center; margin-top: 18px; color: #6A6E73; font-size: 32px; }119 .meta-item { display: flex; gap: 12px; align-items: center; }120 .right-thumb {121 position: absolute; right: 48px; top: 0; transform: translateY(24px);122 width: 180px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD;123 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 28px; border-radius: 16px;124 }125 /* Gesture bar */126 .gesture {127 position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);128 width: 360px; height: 12px; background: #C7C7C7; border-radius: 12px;129 opacity: 0.9;130 }131</style>132</head>133<body>134<div id="render-target">135 <!-- Status bar -->136 <div class="status-bar">137 <div>12:27</div>138 <div class="status-icons row">139 <!-- simple status icons -->140 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6A6E73"><circle cx="12" cy="12" r="10"/></svg>141 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6A6E73"><rect x="4" y="10" width="16" height="8" rx="2"/></svg>142 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#6A6E73" stroke-width="2"><path d="M7 4h10l1 3H6z"/><rect x="5" y="8" width="14" height="12" rx="2"/></svg>143 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6A6E73"><circle cx="12" cy="12" r="3"/><circle cx="4" cy="12" r="2"/><circle cx="20" cy="12" r="2"/></svg>144 <svg width="40" height="40" viewBox="0 0 24 24" fill="#6A6E73"><path d="M12 2l9 4v7c0 5-9 9-9 9s-9-4-9-9V6l9-4z"/></svg>145 </div>146 </div>147 148 <!-- App bar -->149 <div class="app-bar">150 <div class="app-left">151 <div class="icon-btn">152 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#D64B4B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">153 <path d="M15 18l-6-6 6-6"/>154 </svg>155 </div>156 <div class="app-title">The Orchid Vegan Restaurant</div>157 </div>158 <div class="row">159 <div class="icon-btn">160 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#CF4C4C" stroke-width="2">161 <path d="M6 4h12a1 1 0 0 1 1 1v15l-7-3-7 3V5a1 1 0 0 1 1-1z"/>162 </svg>163 </div>164 <div class="icon-btn">165 <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="#CF4C4C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">166 <circle cx="18" cy="5" r="3"/>167 <circle cx="6" cy="12" r="3"/>168 <circle cx="18" cy="19" r="3"/>169 <path d="M8.5 11l7-4M8.5 13l7 4"/>170 </svg>171 </div>172 </div>173 </div>174 175 <!-- Tabs -->176 <div class="tabs">177 <div class="tab">Reservations</div>178 <div class="tab active">Delivery & Takeout</div>179 <div class="tab">Menu</div>180 <div class="tab">Reviews</div>181 </div>182 183 <!-- Info banner -->184 <div class="info-banner content">185 At the moment, there's no online availability within 2.5 hours of 12:30 PM.186 </div>187 188 <!-- Set alert button -->189 <div class="alert-btn">190 <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#FFFFFF" stroke-width="2">191 <path d="M12 22a2 2 0 0 0 2-2H10a2 2 0 0 0 2 2z"/>192 <path d="M18 16V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"/>193 </svg>194 <span>Set alert</span>195 </div>196 197 <!-- Horizontal cards -->198 <div class="card-scroll">199 <!-- Card 1 -->200 <div class="rest-card">201 <div class="rest-image">[IMG: Restaurant interior]202 <div class="bookmark-overlay">203 <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#CF4C4C" stroke-width="2">204 <path d="M6 4h12a1 1 0 0 1 1 1v15l-7-3-7 3V5a1 1 0 0 1 1-1z"/>205 </svg>206 </div>207 </div>208 <div class="rest-body">209 <div class="rest-title">Royal Oak - 18 Goodra...</div>210 <div class="rest-meta">$$ • Pub • ★ 4.4 (360)</div>211 <div class="chip-row">212 <div class="chip">12:15 PM</div>213 <div class="chip">12:30 PM</div>214 <div class="chip">12:45 PM</div>215 </div>216 </div>217 </div>218 219 <!-- Card 2 -->220 <div class="rest-card">221 <div class="rest-image">[IMG: British pub seating]</div>222 <div class="rest-body">223 <div class="rest-title">Guy Fawkes Inn</div>224 <div class="rest-meta">$$$ • British • ★ 4.4 (110)</div>225 <div class="chip-row">226 <div class="chip">12:15 PM</div>227 <div class="chip">12:30 PM</div>228 <div class="chip">12:45 PM</div>229 </div>230 </div>231 </div>232 </div>233 234 <!-- Delivery & Takeout section -->235 <div class="content">236 <div class="section-title">Delivery & Takeout</div>237 <div class="section-sub">Restaurant options</div>238 <div class="pill">Order direct</div>239 240 <div class="space"></div>241 <div class="section-sub">Delivery partners</div>242 <div class="partner-row">243 <div class="partner teal">deliveroo</div>244 <div class="partner orange">JUST EAT</div>245 </div>246 247 <div class="section-title" style="margin-top: 48px;">Menu</div>248 <div class="section-sub">Popular Dishes</div>249 </div>250 251 <!-- Dish 1 -->252 <div class="dish">253 <div class="dish-title">Mushroom Toast</div>254 <div class="dish-desc">255 3 slices of Lion's Mane mushroom covered with sesame seeds served with sweet and sour sauce256 </div>257 <div class="meta-row">258 <div class="meta-item">259 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#6A6E73" stroke-width="2">260 <rect x="3" y="5" width="18" height="14" rx="2"/>261 <path d="M3 10h18"/>262 </svg>263 <span>0 Photos</span>264 </div>265 <div class="meta-item">266 <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#6A6E73" stroke-width="2">267 <path d="M4 4h16v12H7l-3 4V4z"/>268 </svg>269 <span>8 Reviews</span>270 </div>271 </div>272 <div class="divider"></div>273 </div>274 275 <!-- Dish 2 -->276 <div class="dish" style="position: relative;">277 <div class="dish-title">Lemon Vegan Chicken</div>278 <div class="dish-desc">279 Pan fried vegan chicken in lemon sauce served with seasonal greens and rice280 </div>281 <div class="right-thumb">[IMG: Dish photo]</div>282 </div>283 284 <!-- Gesture bar -->285 <div class="gesture"></div>286</div>287</body>288</html>