GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Mobile UI - Dinner Vegetable PDF Viewer</title>5<style>6 body { margin: 0; padding: 0; background: transparent; }7 #render-target {8 position: relative;9 width: 1440px;10 height: 3120px;11 overflow: hidden;12 background: #121212;13 font-family: Arial, Helvetica, sans-serif;14 color: #fff;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 right: 0;23 height: 120px;24 padding: 0 48px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #EDEDED;29 font-size: 48px;30 }31 .status-left { display: flex; align-items: center; gap: 24px; }32 .status-icons span {33 display: inline-block;34 width: 36px; height: 36px;35 background: #E0E0E0; color: #333;36 border-radius: 6px; text-align: center; line-height: 36px;37 font-size: 24px;38 }39 .status-right { display: flex; align-items: center; gap: 28px; }40 .wifi {41 width: 60px; height: 40px; position: relative;42 }43 .wifi::before, .wifi::after {44 content: ""; position: absolute; left: 0; right: 0; border: 4px solid #EDEDED; border-radius: 30px;45 }46 .wifi::before { top: 0; height: 0; transform: scale(0.9); }47 .wifi::after { top: 16px; height: 0; transform: scale(0.6); }48 .battery {49 width: 88px; height: 40px; border: 4px solid #EDEDED; border-radius: 6px; position: relative;50 }51 .battery::after {52 content: ""; position: absolute; right: -12px; top: 8px; width: 12px; height: 24px; background: #EDEDED; border-radius: 2px;53 }54 .battery-fill { position: absolute; left: 6px; top: 6px; right: 18px; bottom: 6px; background: #EDEDED; }55 56 /* App bar */57 .app-bar {58 position: absolute;59 top: 120px;60 left: 0;61 right: 0;62 height: 160px;63 background: #1C1C1C;64 border-bottom: 1px solid #2a2a2a;65 display: flex;66 align-items: center;67 padding: 0 48px;68 color: #F5F5F5;69 }70 .back {71 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;72 margin-right: 24px;73 }74 .title {75 font-size: 72px;76 font-weight: 600;77 flex: 1;78 }79 .actions { display: flex; align-items: center; gap: 36px; }80 .icon-btn { width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }81 .icon-btn svg { width: 64px; height: 64px; fill: none; stroke: #EDEDED; stroke-width: 4; }82 83 /* Document page container */84 .page {85 position: absolute;86 left: 90px;87 top: 480px;88 width: 1260px;89 height: 2300px;90 background: #fff;91 color: #222;92 border-radius: 12px;93 box-shadow: 0 40px 80px rgba(0,0,0,0.6);94 overflow: hidden;95 }96 .page-inner {97 padding: 120px 140px;98 font-family: Georgia, 'Times New Roman', serif;99 }100 .menu-heading {101 text-align: center;102 letter-spacing: 2px;103 margin-bottom: 20px;104 color: #0b1b3e;105 font-weight: 600;106 font-size: 48px;107 }108 .subheading {109 text-align: center;110 font-size: 30px;111 color: #555;112 margin-top: 8px;113 margin-bottom: 60px;114 }115 .separator {116 width: 140px; height: 3px; background: #ddd; margin: 28px auto;117 }118 .course {119 text-align: center;120 margin-bottom: 36px;121 }122 .course-title {123 font-size: 36px;124 font-weight: 600;125 letter-spacing: 1px;126 }127 .course-desc {128 font-size: 28px;129 color: #454545;130 line-height: 1.5;131 margin-top: 8px;132 }133 .note {134 font-size: 24px;135 color: #777;136 }137 138 /* Bottom floating elements */139 .fab {140 position: absolute;141 right: 80px;142 bottom: 180px;143 width: 160px; height: 160px;144 background: #2E7D32;145 color: #E9F5EC;146 border-radius: 100px;147 box-shadow: 0 20px 40px rgba(0,0,0,0.5);148 display: flex; align-items: center; justify-content: center;149 font-size: 72px; font-weight: 700;150 }151 .home-pill {152 position: absolute;153 left: 50%;154 transform: translateX(-50%);155 bottom: 80px;156 width: 380px; height: 16px;157 background: #e0e0e0; border-radius: 12px;158 }159 160 /* Subtle page watermark/mark */161 .watermark45 {162 position: absolute;163 left: 120px;164 bottom: 620px;165 width: 110px;166 height: 220px;167 color: #2b4a80;168 opacity: 0.7;169 font-weight: 700;170 font-size: 140px;171 line-height: 220px;172 }173</style>174</head>175<body>176<div id="render-target">177 178 <!-- Status bar -->179 <div class="status-bar">180 <div class="status-left">181 <div style="font-weight:700;">9:42</div>182 <div class="status-icons"><span>•</span></div>183 <div class="status-icons"><span>S</span></div>184 <div class="status-icons"><span>News</span></div>185 <div class="status-icons"><span>!</span></div>186 </div>187 <div class="status-right">188 <div class="wifi"></div>189 <div class="battery"><div class="battery-fill"></div></div>190 </div>191 </div>192 193 <!-- App bar -->194 <div class="app-bar">195 <div class="back">196 <svg viewBox="0 0 100 100">197 <path d="M70 20 L30 50 L70 80" stroke="#EDEDED" stroke-width="10" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>198 </svg>199 </div>200 <div class="title">dinner-vegetable (...</div>201 <div class="actions">202 <!-- Document icon -->203 <div class="icon-btn">204 <svg viewBox="0 0 100 100">205 <rect x="20" y="18" width="54" height="64" rx="6"></rect>206 <polyline points="74,18 74,40 56,18" stroke-linejoin="round"></polyline>207 </svg>208 </div>209 <!-- Comment bubble -->210 <div class="icon-btn">211 <svg viewBox="0 0 100 100">212 <path d="M20 25 h60 v38 h-38 l-14 14 v-14 h-8z" stroke-linejoin="round"></path>213 </svg>214 </div>215 <!-- Search -->216 <div class="icon-btn">217 <svg viewBox="0 0 100 100">218 <circle cx="44" cy="44" r="24"></circle>219 <line x1="64" y1="64" x2="86" y2="86"></line>220 </svg>221 </div>222 <!-- More (vertical dots) -->223 <div class="icon-btn">224 <svg viewBox="0 0 100 100">225 <circle cx="50" cy="26" r="6" fill="#EDEDED" stroke="none"></circle>226 <circle cx="50" cy="50" r="6" fill="#EDEDED" stroke="none"></circle>227 <circle cx="50" cy="74" r="6" fill="#EDEDED" stroke="none"></circle>228 </svg>229 </div>230 </div>231 </div>232 233 <!-- Document page -->234 <div class="page">235 <div class="page-inner">236 <div class="menu-heading">THE FRENCH LAUNDRY</div>237 <div class="subheading">TASTING OF VEGETABLES • 08.24.2023</div>238 239 <div class="separator"></div>240 241 <div class="course">242 <div class="course-title">“OYSTERS AND PEARLS”</div>243 <div class="course-desc">Creamed Vidalia Onion-Tapioca Ragoût, Poached Oyster Mushrooms, Quinoa “Caviar” and Chive Butter</div>244 </div>245 246 <div class="separator"></div>247 248 <div class="course">249 <div class="course-title">PINK PEARL APPLE “BAVAROIS”</div>250 <div class="course-desc">Preserved Green Almonds, Wild Sorrel and Persian Lime Salt</div>251 </div>252 253 <div class="separator"></div>254 255 <div class="course">256 <div class="course-title">“CHIPS AND SALSA”</div>257 <div class="course-desc">Brentwood Corn-Charred Jalapeño Relish, Brokaw Avocado Mousse, Crispy Corn “Chicharrón” and Puffed Sorghum</div>258 </div>259 260 <div class="separator"></div>261 262 <div class="course">263 <div class="course-title">SUMMER SQUASH “TABBOULEH”</div>264 <div class="course-desc">Cracked Hourani Wheat, Gold Bar Squash “Tapenade,” Oil Cured Black Olives and Cutting Celery</div>265 </div>266 267 <div class="separator"></div>268 269 <div class="course">270 <div class="course-title">“BREAD AND BUTTER”</div>271 <div class="course-desc">Bitter Cocoa Laminated Brioche and Hilary Haigh’s Animal Farm Butter</div>272 </div>273 274 <div class="separator"></div>275 276 <div class="course">277 <div class="course-title">GARDEN EGGPLANT “PARMESAN”</div>278 <div class="course-desc">Charred Eggplant Béchamel, Marinated Garden Tomatoes, Fragrant Basil and Parmesan Mousseline</div>279 </div>280 281 <div class="course" style="margin-top:24px;">282 <div class="course-title">or BLACK WINTER TRUFFLE “AGNOLOTTI”</div>283 <div class="course-desc">Black Winter Truffle Bouillon, Parmesan Infused Olive Oil and Preserved Black Winter Truffles</div>284 <div class="note">(155.00 Supplement)</div>285 </div>286 287 <div class="separator"></div>288 289 <div class="course">290 <div class="course-title">“ROYALE WITH CHEESE”</div>291 <div class="course-desc">Grilled Mushroom Burger, Whole Wheat Bun, Betty’s Pickles, Chickpea Fries, Sweet Pepper Ketchup and “Secret Sauce”</div>292 </div>293 294 <div class="separator"></div>295 296 <div class="course">297 <div class="course-title">AGED MIMOLETTE “TARTELETTE”</div>298 <div class="course-desc">with Picholine Olive “Tapenade”</div>299 </div>300 301 <div class="separator"></div>302 303 <div class="course">304 <div class="course-title">CALIFORNIA MELON “MOSAIC”</div>305 <div class="course-desc">Vanilla Panna Cotta and Oatmeal Flapjack</div>306 </div>307 308 <div class="separator"></div>309 310 <div class="course">311 <div class="course-title">PEACH SORBET “SANDWICH”</div>312 <div class="course-desc">Armando Manni Olive Oil and Peach Purée</div>313 </div>314 315 <div class="separator"></div>316 317 <div class="course">318 <div class="course-title">K + M CHOCOLATE TART</div>319 <div class="course-desc">Chocolate “Crème Diplomate” and Caramel Purée</div>320 </div>321 322 <div class="separator"></div>323 324 <div class="course">325 <div class="course-title">“MIGNARDISES”</div>326 </div>327 </div>328 329 <div class="watermark45">45</div>330 </div>331 332 <!-- Floating Action Button -->333 <div class="fab">%</div>334 335 <!-- Home pill -->336 <div class="home-pill"></div>337</div>338</body>339</html>