GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Restaurant Menu Mock</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    font-family: "Segoe UI", Arial, sans-serif;15    color: #263238;16  }17 18  /* Top browser/address UI */19  .address-bar {20    height: 150px;21    background: #0f1e15;22    padding: 24px 30px;23    box-sizing: border-box;24    display: flex;25    align-items: center;26    gap: 24px;27  }28  .addr-home {29    width: 60px; height: 60px;30    display: flex; align-items: center; justify-content: center;31    opacity: 0.95;32  }33  .domain-pill {34    flex: 1;35    height: 72px;36    background: #2c6240;37    border-radius: 40px;38    display: flex;39    align-items: center;40    padding: 0 26px;41    box-sizing: border-box;42    color: #e8f5e9;43    font-weight: 600;44    letter-spacing: 0.2px;45  }46  .domain-pill .lock {47    width: 34px; height: 34px; margin-right: 16px;48    display: inline-flex; align-items: center; justify-content: center;49  }50  .address-actions {51    width: 180px;52    display: flex; gap: 22px; align-items: center; justify-content: flex-end;53  }54  .action-icon {55    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;56  }57 58  /* Site header bar */59  .site-header {60    height: 140px;61    background: #171717;62    color: #fff;63    display: flex;64    align-items: center;65    justify-content: space-between;66    padding: 0 34px;67    box-sizing: border-box;68    border-bottom: 1px solid rgba(255,255,255,0.1);69  }70  .site-title {71    font-size: 54px;72    font-weight: 800;73    letter-spacing: 0.2px;74    overflow: hidden;75    white-space: nowrap;76    text-overflow: ellipsis;77    max-width: 830px;78  }79  .hamburger-wrap {80    width: 110px; height: 78px;81    border-radius: 12px;82    border: 1px solid #666;83    display: flex; align-items: center; justify-content: center;84    background: rgba(255,255,255,0.06);85  }86 87  /* Content list */88  .content {89    padding: 24px 34px 220px 34px; /* bottom space for bars */90    box-sizing: border-box;91  }92  .section {93    padding: 34px 0 34px 0;94    border-bottom: 1px solid #e4e7ea;95    position: relative;96  }97  .section:last-child { border-bottom: none; }98  .section-title {99    font-size: 64px;100    font-weight: 700;101    color: #253545;102    margin-bottom: 12px;103  }104  .section-sub {105    font-size: 36px;106    color: #6d7a86;107    font-style: italic;108  }109  .chevron {110    position: absolute;111    right: 10px;112    top: 40px;113    width: 52px; height: 52px;114  }115  .chevron svg { width: 100%; height: 100%; }116 117  /* Expanded Soup section */118  .section.soup .chevron svg path { stroke: #3f6fd7; }119  .section.soup .section-title { margin-bottom: 0; }120  .menu-card {121    margin-top: 26px;122    background: #ffffff;123    border: 1px solid #e5e8eb;124    border-radius: 18px;125    padding: 26px 30px 32px 30px;126    box-shadow: 0 2px 0 rgba(0,0,0,0.03);127    position: relative;128  }129  .menu-card h3 {130    font-size: 46px;131    font-weight: 700;132    color: #2d3b44;133    margin: 0 0 18px 0;134  }135  .menu-card p {136    margin: 0 0 22px 0;137    font-size: 32px;138    line-height: 1.5;139    color: #607180;140  }141  .menu-card .price {142    font-size: 40px;143    color: #1e57c9;144    font-weight: 700;145  }146 147  /* NEW ribbon */148  .ribbon {149    position: absolute;150    left: -18px;151    top: -18px;152    width: 140px;153    height: 40px;154    background: #4ba35c;155    color: #eaffea;156    font-size: 26px;157    font-weight: 700;158    display: flex; align-items: center; justify-content: center;159    transform: rotate(-45deg);160    box-shadow: 0 2px 0 rgba(0,0,0,0.08);161    letter-spacing: 1px;162  }163  .ribbon::after {164    content: "";165    position: absolute;166    right: -18px;167    top: 0;168    width: 0; height: 0;169    border-left: 18px solid #3d8c4c;170    border-top: 20px solid transparent;171    border-bottom: 20px solid transparent;172  }173 174  /* Bottom orange bar (partially covered by cookie banner) */175  .bottom-order {176    position: absolute;177    left: 0;178    bottom: 104px;179    width: 100%;180    height: 120px;181    background: #bf5a1f;182    color: #fff4e6;183    display: flex; align-items: center; gap: 24px;184    padding: 0 32px;185    box-sizing: border-box;186  }187  .bottom-order .icon {188    width: 58px; height: 58px; display: flex; align-items: center; justify-content: center;189    background: rgba(255,255,255,0.2);190    border-radius: 50%;191  }192  .bottom-order .txt {193    font-size: 30px; font-weight: 600;194  }195 196  /* Cookie banner */197  .cookie-banner {198    position: absolute;199    left: 0; right: 0;200    bottom: 0;201    height: 160px;202    background: rgba(33,33,33,0.92);203    color: #eaeaea;204    display: flex;205    align-items: center;206    padding: 0 30px;207    box-sizing: border-box;208    gap: 26px;209  }210  .cookie-banner .msg {211    font-size: 32px;212    line-height: 1.3;213    flex: 1;214  }215  .cookie-banner .ok-btn {216    width: 300px;217    height: 72px;218    background: #6cc4a1;219    color: #fff;220    border-radius: 8px;221    font-size: 36px;222    font-weight: 700;223    display: flex; align-items: center; justify-content: center;224  }225</style>226</head>227<body>228<div id="render-target">229 230  <!-- Simulated browser address bar -->231  <div class="address-bar">232    <div class="addr-home">233      <svg viewBox="0 0 24 24">234        <path d="M3 10l9-7 9 7v10a1 1 0 0 1-1 1h-6v-6H10v6H4a1 1 0 0 1-1-1V10z" fill="#ffffff"></path>235      </svg>236    </div>237    <div class="domain-pill">238      <span class="lock">239        <svg viewBox="0 0 24 24">240          <path d="M7 10V7a5 5 0 0 1 10 0v3M5 10h14v10H5z" fill="none" stroke="#e8f5e9" stroke-width="2" stroke-linecap="round"></path>241        </svg>242      </span>243      online.orchidvegan.com244    </div>245    <div class="address-actions">246      <div class="action-icon">247        <svg viewBox="0 0 24 24">248          <path d="M12 5v14M5 12h14" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>249        </svg>250      </div>251      <div class="action-icon">252        <svg viewBox="0 0 24 24">253          <rect x="5" y="5" width="14" height="14" rx="2" ry="2" fill="none" stroke="#ffffff" stroke-width="2"></rect>254          <text x="12" y="16" font-size="10" text-anchor="middle" fill="#ffffff">5</text>255        </svg>256      </div>257      <div class="action-icon">258        <svg viewBox="0 0 24 24">259          <circle cx="12" cy="5" r="2" fill="#ffffff"></circle>260          <circle cx="12" cy="12" r="2" fill="#ffffff"></circle>261          <circle cx="12" cy="19" r="2" fill="#ffffff"></circle>262        </svg>263      </div>264    </div>265  </div>266 267  <!-- Site header -->268  <div class="site-header">269    <div class="site-title">The Orchid Vegan Restaurant T</div>270    <div class="hamburger-wrap">271      <svg viewBox="0 0 24 24" width="60" height="60">272        <path d="M4 6h16M4 12h16M4 18h16" stroke="#ddd" stroke-width="2" stroke-linecap="round"></path>273      </svg>274    </div>275  </div>276 277  <!-- Content -->278  <div class="content">279    <!-- Partially visible previous section title, keeping style muted -->280    <div class="section">281      <div class="section-title" style="opacity:0.25">Stuffed Bun - Bao</div>282      <div class="section-sub" style="opacity:0.25">Soft Bun stuffed with tasty vegan ingredients</div>283      <div class="chevron">284        <svg viewBox="0 0 24 24">285          <path d="M6 9l6 6 6-6" fill="none" stroke="#3f6fd7" stroke-width="2" stroke-linecap="round"></path>286        </svg>287      </div>288    </div>289 290    <div class="section">291      <div class="section-title">Ramen</div>292      <div class="section-sub">Vegan Ramen with delicious vegan ingredients</div>293      <div class="chevron">294        <svg viewBox="0 0 24 24">295          <path d="M6 9l6 6 6-6" fill="none" stroke="#3f6fd7" stroke-width="2" stroke-linecap="round"></path>296        </svg>297      </div>298    </div>299 300    <div class="section">301      <div class="section-title">Udon</div>302      <div class="section-sub">Stirfry Udon noodles dish</div>303      <div class="chevron">304        <svg viewBox="0 0 24 24">305          <path d="M6 9l6 6 6-6" fill="none" stroke="#3f6fd7" stroke-width="2" stroke-linecap="round"></path>306        </svg>307      </div>308    </div>309 310    <div class="section">311      <div class="section-title">Vegan Sushi</div>312      <div class="section-sub">Pure vegan sushi served with sushi soy sauce</div>313      <div class="chevron">314        <svg viewBox="0 0 24 24">315          <path d="M6 9l6 6 6-6" fill="none" stroke="#3f6fd7" stroke-width="2" stroke-linecap="round"></path>316        </svg>317      </div>318    </div>319 320    <div class="section">321      <div class="section-title">Appetizer</div>322      <div class="chevron">323        <svg viewBox="0 0 24 24">324          <path d="M6 9l6 6 6-6" fill="none" stroke="#3f6fd7" stroke-width="2" stroke-linecap="round"></path>325        </svg>326      </div>327    </div>328 329    <div class="section soup">330      <div class="section-title">Soup</div>331      <div class="chevron">332        <svg viewBox="0 0 24 24">333          <path d="M6 15l6-6 6 6" fill="none" stroke="#3f6fd7" stroke-width="2" stroke-linecap="round"></path>334        </svg>335      </div>336 337      <div class="menu-card">338        <div class="ribbon">NEW</div>339        <h3>Tom Kha Soup with King Oyster Mushroom 12oz</h3>340        <p>mildly spiced Thai style vegan soup with coconut milk, galangal, fresh coriander, spring onions, chilli and lime juice. Served with King Oyster Mushroom, shimeiji mushroom, Chinese leaves, Tofu. contains: soya, mushroom</p>341        <div class="price">£4.50</div>342      </div>343    </div>344  </div>345 346  <!-- Bottom order/info bar -->347  <div class="bottom-order">348    <div class="icon">349      <svg viewBox="0 0 24 24">350        <path d="M3 12h18M6 7h12M6 17h12" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>351      </svg>352    </div>353    <div class="txt">Pre-order available • Offers • Tap to view</div>354  </div>355 356  <!-- Cookie banner -->357  <div class="cookie-banner">358    <div class="msg">We use cookies to give you the best experience on our website. By continuing, you agree to our use of cookies.</div>359    <div class="ok-btn">OK</div>360  </div>361 362</div>363</body>364</html>