GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Biryani Blues Menu</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 position: relative;9 width: 1080px;10 height: 2400px;11 overflow: hidden;12 background: #f7f7f7;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute;18 top: 0;19 left: 0;20 width: 1080px;21 height: 120px;22 background: #0d0d0d;23 color: #fff;24 display: flex;25 align-items: center;26 padding: 0 36px;27 box-sizing: border-box;28 font-weight: 600;29 letter-spacing: 0.2px;30 }31 .status-left { display: flex; align-items: center; gap: 18px; }32 .status-time { font-size: 40px; }33 .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }34 .icon-cloud, .icon-wifi, .icon-battery {35 width: 44px; height: 44px;36 }37 38 /* Page header */39 .page {40 position: absolute;41 top: 120px;42 left: 0;43 width: 1080px;44 height: 2280px;45 box-sizing: border-box;46 padding: 40px 40px 160px;47 color: #222;48 }49 .top-actions {50 display: flex;51 align-items: center;52 gap: 28px;53 color: #222;54 }55 .top-actions .spacer { flex: 1; }56 .ico {57 width: 64px; height: 64px; border-radius: 32px;58 display: flex; align-items: center; justify-content: center;59 }60 .ico svg { width: 36px; height: 36px; }61 62 .title {63 font-size: 68px;64 font-weight: 800;65 margin-top: 26px;66 }67 .subtext {68 color: #666;69 font-size: 34px;70 margin-top: 8px;71 }72 73 .rating-row {74 display: flex;75 align-items: center;76 gap: 20px;77 margin-top: 30px;78 color: #444;79 font-size: 34px;80 }81 .pill-green {82 background: #1aa34a;83 color: #fff;84 padding: 12px 18px;85 border-radius: 20px;86 font-weight: 700;87 display: inline-flex; align-items: center; gap: 10px;88 }89 .meta-row {90 display: flex;91 align-items: center;92 gap: 24px;93 color: #333;94 font-size: 32px;95 margin-top: 24px;96 }97 .chip {98 display: inline-flex;99 align-items: center;100 gap: 12px;101 padding: 18px 24px;102 border: 1px solid #ddd;103 border-radius: 36px;104 font-size: 32px;105 color: #333;106 background: #fff;107 }108 .chip.green { color: #2e7d32; border-color: #c8e6c9; }109 .chip.orange { color: #bf360c; border-color: #ffc9a7; }110 .chips {111 display: flex; gap: 18px; margin-top: 34px;112 }113 114 .banner {115 margin-top: 30px;116 width: 100%;117 height: 180px;118 background: #E0E0E0;119 border: 1px solid #BDBDBD;120 display: flex; align-items: center; justify-content: center;121 color: #757575; font-size: 36px;122 border-radius: 16px;123 }124 125 /* Overlay scrim */126 .scrim {127 position: absolute;128 top: 120px;129 left: 0;130 width: 1080px;131 height: 2280px;132 background: rgba(0,0,0,0.55);133 }134 135 /* Bottom sheet modal */136 .modal {137 position: absolute;138 left: 50px;139 bottom: 360px;140 width: 980px;141 height: 1280px;142 background: #fff;143 border-radius: 40px;144 box-shadow: 0 24px 80px rgba(0,0,0,0.35);145 overflow: hidden;146 z-index: 5;147 }148 .modal-inner {149 height: 100%;150 overflow-y: auto;151 padding: 40px 50px 60px;152 box-sizing: border-box;153 }154 .modal h1 {155 margin: 0;156 font-size: 62px;157 font-weight: 800;158 color: #222;159 }160 .section-head {161 margin-top: 36px;162 display: flex; align-items: baseline;163 font-size: 44px;164 font-weight: 800;165 color: #f15b6c;166 }167 .section-head .count {168 margin-left: auto;169 color: #db3e50;170 font-weight: 800;171 font-size: 44px;172 }173 .list {174 margin-top: 18px;175 border-top: 1px solid #eee;176 }177 .row {178 display: flex;179 align-items: center;180 padding: 34px 0;181 font-size: 40px;182 color: #32363a;183 border-bottom: 1px solid #eee;184 }185 .row .num {186 margin-left: auto;187 color: #6b6f76;188 font-weight: 700;189 font-size: 40px;190 }191 192 /* Close pill */193 .close-pill {194 position: absolute;195 bottom: 180px;196 left: 50%;197 transform: translateX(-50%);198 background: #2b2b2b;199 color: #fff;200 padding: 24px 36px;201 border-radius: 36px;202 display: flex; align-items: center; gap: 24px;203 z-index: 6;204 box-shadow: 0 12px 30px rgba(0,0,0,0.4);205 font-size: 40px;206 }207 .close-pill .xbox {208 width: 72px; height: 72px;209 background: #ebc38f;210 border-radius: 16px;211 display: flex; align-items: center; justify-content: center;212 color: #5b2c00;213 font-weight: 900;214 font-size: 42px;215 }216</style>217</head>218<body>219<div id="render-target">220 221 <!-- Status Bar -->222 <div class="status-bar">223 <div class="status-left">224 <div class="status-time">11:48</div>225 <!-- simple cloud glyph -->226 <svg class="icon-cloud" viewBox="0 0 24 24" fill="#fff">227 <path d="M6 15a4 4 0 0 1 1-8c1.4-3 6-3 7 1h1a4 4 0 0 1 0 8H6z"/>228 </svg>229 </div>230 <div class="status-right">231 <svg class="icon-wifi" viewBox="0 0 24 24" fill="#fff">232 <path d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9zm4 4c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2zm4 4l2 2 2-2-2-2-2 2z"/>233 </svg>234 <svg class="icon-battery" viewBox="0 0 24 24" fill="#fff">235 <path d="M2 8h16v8H2V8zm18 3h2v2h-2v-2z"/>236 </svg>237 </div>238 </div>239 240 <!-- Underlying Page Content -->241 <div class="page">242 <div class="top-actions">243 <div class="ico">244 <svg viewBox="0 0 24 24" fill="#222"><path d="M15 18l-6-6 6-6v12z"/></svg>245 </div>246 <div class="spacer"></div>247 <div class="ico">248 <svg viewBox="0 0 24 24" fill="#222"><path d="M15.5 14h-.79l-.28-.27A6.5 6.5 0 1 0 16 9.5l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>249 </div>250 <div class="ico">251 <svg viewBox="0 0 24 24" fill="#222"><path d="M12 21s-6-4.35-9-8.35C-1 6 3 2 7.5 3.5 9.25 4.1 10.32 5.38 12 7c1.68-1.62 2.75-2.9 4.5-3.5C21 2 25 6 21 12.65 18 16.65 12 21 12 21z"/></svg>252 </div>253 <div class="ico">254 <svg viewBox="0 0 24 24" fill="#222"><path d="M18 16.08V10h-2v6.08l-3.5-2.11-.5-.29-.5.29L7 16.08V10H5v8l7-4 6 3.43V18h-2v-1.92z"/></svg>255 </div>256 <div class="ico">257 <svg viewBox="0 0 24 24" fill="#222"><path d="M12 16h8v2h-8zm0-5h8v2h-8zm0-5h8v2h-8zM4 6h2v2H4zm0 5h2v2H4zm0 5h2v2H4z"/></svg>258 </div>259 </div>260 261 <div class="title">Biryani Blues</div>262 <div class="subtext">Biryani · Kebab · Desserts</div>263 264 <div class="rating-row">265 <div class="pill-green">266 4.1267 <svg viewBox="0 0 24 24" fill="#fff" width="24" height="24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>268 </div>269 <div>16.4K reviews</div>270 </div>271 272 <div class="meta-row">273 <span>40–45 min</span>274 <span>·</span>275 <span>8 km</span>276 <span>·</span>277 <span>Sector 56</span>278 <svg viewBox="0 0 24 24" width="28" height="28" fill="#333" style="margin-left:6px"><path d="M9 6l6 6-6 6V6z"/></svg>279 </div>280 281 <div class="banner">[IMG: Offer banner - 40% OFF up to ₹80]</div>282 283 <div class="chips">284 <div class="chip green">285 <svg viewBox="0 0 24 24" width="28" height="28" fill="#2e7d32"><circle cx="12" cy="12" r="10"/></svg>286 Veg287 <span style="margin-left:10px; color:#999;">×</span>288 </div>289 <div class="chip">290 <svg viewBox="0 0 24 24" width="28" height="28" fill="#a33"><rect x="6" y="6" width="12" height="12" rx="6"/></svg>291 Non-veg292 </div>293 <div class="chip orange">294 <svg viewBox="0 0 24 24" width="28" height="28" fill="#bf360c"><path d="M12 2l3 7h7l-5.5 4.5L18 22l-6-4-6 4 1.5-8.5L2 9h7z"/></svg>295 Bestseller296 </div>297 <div class="chip">298 <svg viewBox="0 0 24 24" width="28" height="28" fill="#f0a800"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2z"/></svg>299 Top rated300 </div>301 </div>302 </div>303 304 <!-- Dark Overlay -->305 <div class="scrim"></div>306 307 <!-- Bottom Sheet Modal -->308 <div class="modal">309 <div class="modal-inner">310 <h1>Menu</h1>311 312 <div class="section-head">313 <span>Recommended</span>314 <span class="count">13</span>315 </div>316 317 <div class="list">318 <div class="row">319 <span>New Launches</span>320 <span class="num">5</span>321 </div>322 <div class="row">323 <span>Hyderabadi Dum Biryanis</span>324 <span class="num">5</span>325 </div>326 <div class="row">327 <span>Brown Rice Biryanis (Healthy Items)</span>328 <span class="num">3</span>329 </div>330 <div class="row">331 <span>Meal Combos</span>332 <span class="num">2</span>333 </div>334 <div class="row">335 <span>Celebration Handi Biryanis</span>336 <span class="num">6</span>337 </div>338 <div class="row">339 <span>Exclusive Mini Biryanis Starting @ Rs.99/-</span>340 <span class="num">5</span>341 </div>342 <div class="row">343 <span>Kebabs & Starters</span>344 <span class="num">4</span>345 </div>346 </div>347 </div>348 </div>349 350 <!-- Close pill -->351 <div class="close-pill">352 <div class="xbox">×</div>353 <div>Close</div>354 </div>355 356</div>357</body>358</html>