GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, initial-scale=1.0">6<title>Document Viewer - Dinner Vegetable</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1440px;11    height: 3120px;12    position: relative;13    overflow: hidden;14    background: #182118; /* deep green/black viewer background */15    font-family: "Helvetica Neue", Arial, sans-serif;16    color: #EAEAEA;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1440px;25    height: 120px;26    padding: 0 40px;27    box-sizing: border-box;28    display: flex;29    align-items: center;30    justify-content: space-between;31    color: #EDEDED;32    font-weight: 600;33    letter-spacing: 0.5px;34    font-size: 42px;35  }36  .sb-left { display: flex; align-items: center; gap: 20px; }37  .sb-right { display: flex; align-items: center; gap: 28px; opacity: 0.9; }38 39  /* App bar */40  .app-bar {41    position: absolute;42    top: 120px;43    left: 0;44    width: 1440px;45    height: 200px;46    display: flex;47    align-items: center;48    padding: 0 36px;49    box-sizing: border-box;50    color: #EDEDED;51  }52  .back {53    width: 120px;54    height: 120px;55    display: flex;56    align-items: center;57    justify-content: center;58    margin-right: 12px;59  }60  .title {61    font-size: 72px;62    font-weight: 500;63    white-space: nowrap;64    overflow: hidden;65    text-overflow: ellipsis;66    max-width: 860px;67  }68  .app-icons {69    margin-left: auto;70    display: flex;71    align-items: center;72    gap: 26px;73  }74 75  /* Document canvas */76  .doc-wrapper {77    position: absolute;78    top: 490px;79    left: 50%;80    transform: translateX(-50%);81    width: 1276px;82    height: 2050px;83    background: #FFFFFF;84    border-radius: 8px;85    box-shadow: 0 18px 40px rgba(0,0,0,0.45);86    color: #222;87  }88 89  .paper-inner {90    position: absolute;91    inset: 70px 70px 70px 70px;92    text-align: center;93    color: #2a2a2a;94    font-family: Georgia, "Times New Roman", serif;95  }96 97  .logo-placeholder {98    width: 480px;99    height: 110px;100    margin: 0 auto 24px auto;101    background: #E0E0E0;102    border: 1px solid #BDBDBD;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #757575;107    font-size: 36px;108    letter-spacing: 1px;109  }110 111  .menu-subtle {112    font-size: 30px;113    letter-spacing: 3px;114    color: #555;115    margin-top: 8px;116  }117 118  .dish-title {119    margin-top: 40px;120    font-size: 42px;121    letter-spacing: 6px;122    font-weight: 600;123  }124  .dish-desc {125    margin-top: 12px;126    font-size: 32px;127    letter-spacing: 0.6px;128    color: #4a4a4a;129  }130 131  .divider {132    width: 170px;133    height: 0;134    border-top: 2px solid #777;135    margin: 32px auto;136    opacity: 0.6;137  }138 139  /* Watermark-like number */140  .watermark {141    position: absolute;142    left: 90px;143    bottom: 140px;144    font-size: 220px;145    color: rgba(0,0,0,0.08);146    letter-spacing: 6px;147    font-weight: 500;148  }149 150  /* Floating action button with page count */151  .fab {152    position: absolute;153    right: 72px;154    bottom: 360px;155    width: 190px;156    height: 190px;157    border-radius: 50%;158    background: #2A5E35;159    box-shadow: 0 14px 28px rgba(0,0,0,0.5);160    display: flex;161    align-items: center;162    justify-content: center;163    color: #DDF0DA;164    font-size: 64px;165    font-weight: 700;166  }167 168  /* Home pill */169  .home-pill {170    position: absolute;171    left: 50%;172    transform: translateX(-50%);173    bottom: 118px;174    width: 300px;175    height: 22px;176    background: #D0D0D0;177    opacity: 0.8;178    border-radius: 12px;179  }180 181  /* Simple icon styles */182  svg.icon { width: 72px; height: 72px; fill: none; stroke: #EDEDED; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }183  .icon-solid { fill: #EDEDED; stroke: none; }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="sb-left">9:22</div>192    <div class="sb-right">193      <!-- small coffee/cup icon substitute -->194      <svg class="icon" viewBox="0 0 24 24"><path d="M4 9h11a4 4 0 0 0 0 8H4z"/><path d="M15 11h3a2 2 0 0 1 0 4h-3"/></svg>195      <!-- news "CNN" box mimic -->196      <div style="font-size:30px; font-weight:700; padding:6px 10px; border:2px solid #EDEDED; border-radius:4px;">CNN</div>197      <!-- alert triangle -->198      <svg class="icon" viewBox="0 0 24 24"><path d="M12 3L2 20h20z"/><path d="M12 9v5M12 17h.01" stroke="#182118"/></svg>199      <!-- network and battery cluster -->200      <svg class="icon" viewBox="0 0 24 24"><path d="M3 18h2M3 14h4M3 10h6M3 6h8"/></svg>201      <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" class="icon-solid"/><rect x="4" y="8" width="14" height="8" fill="#182118"/></svg>202    </div>203  </div>204 205  <!-- App Bar -->206  <div class="app-bar">207    <div class="back">208      <svg class="icon" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>209    </div>210    <div class="title">dinner-vegetable (…</div>211    <div class="app-icons">212      <!-- comment bubble -->213      <svg class="icon" viewBox="0 0 24 24"><path d="M4 4h16v12H7l-3 4z"/></svg>214      <!-- search -->215      <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg>216      <!-- overflow -->217      <svg class="icon" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" class="icon-solid"/><circle cx="12" cy="12" r="2" class="icon-solid"/><circle cx="12" cy="19" r="2" class="icon-solid"/></svg>218    </div>219  </div>220 221  <!-- Document Canvas -->222  <div class="doc-wrapper">223    <div class="paper-inner">224      <div class="logo-placeholder">[IMG: The French Laundry logo]</div>225      <div class="menu-subtle">TASTING OF VEGETABLES</div>226      <div class="menu-subtle" style="margin-top:6px;">08.24.2023</div>227 228      <div class="dish-title">“OYSTERS AND PEARLS”</div>229      <div class="dish-desc">Creamed Vidalia Onion–Tapioca Ragoût, Poached Oyster Mushrooms,</div>230      <div class="dish-desc">Quinoa “Caviar” and Chive Butter</div>231      <div class="divider"></div>232 233      <div class="dish-title">PINK PEARL APPLE “BAVAROIS”</div>234      <div class="dish-desc">Preserved Green Almonds, Wild Sorrel and Persian Lime Salt</div>235      <div class="divider"></div>236 237      <div class="dish-title">“CHIPS AND SALSA”</div>238      <div class="dish-desc">Brentwood Corn–Charred Jalapeño Relish, Brokaw Avocado Mousse,</div>239      <div class="dish-desc">Crispy Corn “Chicharrón” and Puffed Sorghum</div>240      <div class="divider"></div>241 242      <div class="dish-title">SUMMER SQUASH “TABBOULEH”</div>243      <div class="dish-desc">Cracked Hourani Wheat, Gold Bar Squash “Tapenade”,</div>244      <div class="dish-desc">Oil Cured Black Olives and Cutting Celery</div>245      <div class="divider"></div>246 247      <div class="dish-title">“BREAD AND BUTTER”</div>248      <div class="dish-desc">Bitter Cocoa Laminated Brioche and Hilary Haigh’s Animal Farm Butter</div>249      <div class="divider"></div>250 251      <div class="dish-title">GARDEN EGGPLANT “PARMESAN”</div>252      <div class="dish-desc">Charred Eggplant Béchamel, Marinated Garden Tomatoes,</div>253      <div class="dish-desc">Fragrant Basil and Parmesan Mousseline</div>254 255      <div class="menu-subtle" style="margin-top:18px;">or</div>256 257      <div class="dish-title">BLACK WINTER TRUFFLE “AGNOLOTTI”</div>258      <div class="dish-desc">Black Winter Truffle Bouillon, Parmesan Infused Olive Oil</div>259      <div class="dish-desc">and Preserved Black Winter Truffles</div>260      <div class="menu-subtle" style="font-size:26px; margin-top:6px;">( 155.00 Supplement )</div>261      <div class="divider"></div>262 263      <div class="dish-title">“ROYALE WITH CHEESE”</div>264      <div class="dish-desc">Grilled Mushroom Burger, Whole Wheat Bun, Betty’s Pickles,</div>265      <div class="dish-desc">Chickpea Fries, Sweet Pepper Ketchup and “Secret Sauce”</div>266      <div class="divider"></div>267 268      <div class="dish-title">AGED MIMOLETTE “TARTELETTE”</div>269      <div class="dish-desc">with Picholine Olive “Tapenade”</div>270      <div class="divider"></div>271 272      <div class="dish-title">CALIFORNIA MELON “MOSAIC”</div>273      <div class="dish-desc">Vanilla Panna Cotta and Oatmeal Flapjack</div>274      <div class="divider"></div>275 276      <div class="dish-title">PEACH SORBET “SANDWICH”</div>277      <div class="dish-desc">Armando Manni Olive Oil and Peach Purée</div>278      <div class="divider"></div>279 280      <div class="dish-title">K+M CHOCOLATE TART</div>281      <div class="dish-desc">Chocolate “Crème Diplomate” and Caramel Purée</div>282      <div class="divider"></div>283 284      <div class="dish-title">“MIGNARDISES”</div>285 286      <div class="watermark">45</div>287    </div>288  </div>289 290  <!-- Floating button -->291  <div class="fab">2/3</div>292 293  <!-- Home pill -->294  <div class="home-pill"></div>295 296</div>297</body>298</html>