GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>The Orchid Vegan Restaurant - Mockup</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #f5f6f7;15    border-radius: 0;16    box-shadow: none;17  }18 19  /* Simulated browser chrome */20  .browser-bar {21    position: absolute;22    top: 0;23    left: 0;24    width: 1080px;25    height: 180px;26    background: #0f1f17;27    color: #e8f5e9;28    padding: 24px 28px;29    box-sizing: border-box;30  }31  .browser-top {32    display: flex;33    align-items: center;34    gap: 22px;35    font-weight: 600;36    font-size: 40px;37    opacity: 0.95;38  }39  .browser-icons svg {40    width: 40px; height: 40px; fill: #cde3d3;41  }42  .address-row {43    margin-top: 26px;44    display: flex;45    align-items: center;46    gap: 24px;47  }48  .pill {49    background: #2e6b49;50    color: #e6ffe6;51    padding: 18px 28px;52    border-radius: 60px;53    font-size: 40px;54    font-weight: 600;55  }56  .browser-btn svg { width: 46px; height: 46px; fill: #cde3d3; }57 58  /* Site header */59  .site-header {60    position: absolute;61    top: 180px;62    left: 0;63    width: 1080px;64    background: #2a2a2a;65    color: #fff;66    padding: 36px 36px;67    box-sizing: border-box;68    display: flex;69    align-items: center;70    justify-content: space-between;71    border-bottom: 1px solid rgba(255,255,255,0.12);72  }73  .site-title {74    font-size: 64px;75    font-weight: 800;76    letter-spacing: 0.2px;77  }78  .hamburger {79    width: 120px;80    height: 86px;81    border: 3px solid rgba(255,255,255,0.6);82    border-radius: 12px;83    display: flex;84    align-items: center;85    justify-content: center;86  }87  .hamburger svg { width: 80px; height: 80px; stroke: #fff; }88 89  /* Content area */90  .content {91    position: absolute;92    top: 300px;93    left: 0;94    right: 0;95    padding: 28px;96    box-sizing: border-box;97  }98 99  .card {100    background: #ffffff;101    border: 1px solid #e2e2e2;102    border-radius: 12px;103    padding: 28px;104    margin: 16px 8px 28px 8px;105    box-shadow: 0 2px 0 rgba(0,0,0,0.02);106  }107  .note-row {108    display: grid;109    grid-template-columns: 70px 1fr 70px;110    align-items: start;111    gap: 16px;112  }113  .note-text {114    font-size: 40px;115    line-height: 1.35;116    color: #333;117  }118  .dropdown-arrow {119    display: flex;120    align-items: center;121    justify-content: flex-end;122  }123  .dropdown-arrow svg { width: 48px; height: 48px; fill: #2e6bd3; }124 125  .alert {126    background: #eaf0ff;127    border: 1px solid #d4dcfb;128  }129  .alert-row {130    display: grid;131    grid-template-columns: 70px 1fr;132    align-items: center;133    gap: 20px;134  }135  .alert-text {136    font-size: 42px;137    color: #2b55a8;138  }139 140  /* Tabs */141  .tabs-wrap {142    margin: 26px 8px 16px 8px;143    background: #ffffff;144    border-radius: 46px;145    padding: 18px 20px;146    border: 1px solid #e7e7e7;147  }148  .tabs {149    display: flex;150    justify-content: space-between;151    align-items: center;152    padding: 10px 26px;153  }154  .tab {155    font-size: 54px;156    font-weight: 600;157    color: #a8a8a8;158  }159  .tab.active {160    color: #da6b20;161    position: relative;162  }163  .tab.active::after {164    content: "";165    position: absolute;166    left: 0;167    bottom: -14px;168    width: 180px;169    height: 8px;170    background: #da6b20;171    border-radius: 4px;172  }173 174  /* Categories */175  .category {176    padding: 32px 16px;177    border-bottom: 1px solid #eaeaea;178  }179  .cat-header {180    display: grid;181    grid-template-columns: 1fr 70px;182    align-items: center;183    gap: 10px;184  }185  .cat-title {186    font-size: 64px;187    font-weight: 800;188    color: #2d2d2d;189  }190  .cat-sub {191    margin-top: 6px;192    font-size: 38px;193    color: #6f6f6f;194    font-style: italic;195  }196  .cat-arrow svg { width: 48px; height: 48px; fill: #2e6bd3; }197 198  /* Cookie banner */199  .cookie-banner {200    position: absolute;201    left: 0;202    bottom: 120px;203    width: 100%;204    background: rgba(0,0,0,0.7);205    color: #ffffff;206    padding: 26px 28px 36px 28px;207    box-sizing: border-box;208    display: flex;209    flex-direction: column;210    align-items: center;211    gap: 22px;212  }213  .cookie-text {214    font-size: 42px;215    text-align: center;216    max-width: 1000px;217  }218  .cookie-btn {219    background: #68c59b;220    color: #ffffff;221    border: none;222    font-size: 46px;223    font-weight: 700;224    padding: 18px 120px;225    border-radius: 20px;226  }227 228  /* Simple helpers */229  .icon-box {230    width: 60px; height: 60px;231  }232</style>233</head>234<body>235<div id="render-target">236 237  <!-- Simulated browser bar -->238  <div class="browser-bar">239    <div class="browser-top">240      <div>12:29</div>241      <div class="browser-icons">242        <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm1 15H11v-2h2v2zm0-4H11V7h2v6z"></path></svg>243      </div>244      <div class="browser-icons">245        <svg viewBox="0 0 24 24"><path d="M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z"></path></svg>246      </div>247      <div class="browser-icons">248        <svg viewBox="0 0 24 24"><path d="M4 4h16v2H4zm0 6h16v2H4zm0 6h16v2H4z"></path></svg>249      </div>250      <div style="font-size:40px;">•</div>251      <div class="browser-icons">252        <svg viewBox="0 0 24 24"><path d="M12 4l8 8-8 8-8-8 8-8z"></path></svg>253      </div>254    </div>255    <div class="address-row">256      <svg class="browser-btn" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>257      <svg class="browser-btn" viewBox="0 0 24 24"><path d="M12 17a5 5 0 0 1-5-5V9a5 5 0 0 1 10 0v3a5 5 0 0 1-5 5zm-3-8a3 3 0 1 1 6 0v3a3 3 0 1 1-6 0V9z"></path></svg>258      <div class="pill">online.orchidvegan.com</div>259      <svg class="browser-btn" viewBox="0 0 24 24"><path d="M12 4v8H4v-2h6V4h2zm0 16v-8h8v2h-6v6h-2z"></path></svg>260      <svg class="browser-btn" viewBox="0 0 24 24"><path d="M4 4h16v16H4z"></path></svg>261      <svg class="browser-btn" viewBox="0 0 24 24"><path d="M12 12h8M12 6h8M12 18h8" stroke="#cde3d3" stroke-width="2" fill="none"></path></svg>262    </div>263  </div>264 265  <!-- Site header -->266  <div class="site-header">267    <div class="site-title">The Orchid Vegan Restaurant T</div>268    <div class="hamburger">269      <svg viewBox="0 0 24 24" stroke-width="2" fill="none">270        <path d="M4 6h16M4 12h16M4 18h16" stroke="#ffffff"></path>271      </svg>272    </div>273  </div>274 275  <!-- Content -->276  <div class="content">277    <!-- Note card -->278    <div class="card">279      <div class="note-row">280        <div class="icon-box">281          <svg viewBox="0 0 24 24">282            <path fill="#2e6bd3" d="M3 10v4h3l4 3V7L6 10H3zm13 5a3 3 0 0 0 0-6v6z"></path>283          </svg>284        </div>285        <div class="note-text">286          <strong>Note:</strong> Minimum order 15 pounds, otherwise there will be an extra 5 pounds charge.<br>287          Free delivery for orders above 15 pounds.<br>288          We close on Tuesdays<br>289          All the vegan mock meat dishes contain soy protein, gluten and potatoe starch<br>290          All the vegan seafood dishes contain soy protein, konjac and may contain gluten<br>291          All the sauce is vegan<br>292          There are no animal or animal related products allowed on our premise293        </div>294        <div class="dropdown-arrow">295          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"></path></svg>296        </div>297      </div>298    </div>299 300    <!-- Allergy alert -->301    <div class="card alert">302      <div class="alert-row">303        <div class="icon-box">304          <svg viewBox="0 0 24 24">305            <path fill="#2e6bd3" d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"></path>306          </svg>307        </div>308        <div class="alert-text">Click here if you or someone you are ordering for has a food allergy</div>309      </div>310    </div>311 312    <!-- Tabs -->313    <div class="tabs-wrap">314      <div class="tabs">315        <div class="tab active">Menu</div>316        <div class="tab">Information</div>317      </div>318    </div>319 320    <!-- Categories -->321    <div class="category">322      <div class="cat-header">323        <div>324          <div class="cat-title">Stuffed Bun - Bao</div>325          <div class="cat-sub">Soft Bun stuffed with tasty vegan ingredients</div>326        </div>327        <div class="cat-arrow">328          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"></path></svg>329        </div>330      </div>331    </div>332 333    <div class="category">334      <div class="cat-header">335        <div>336          <div class="cat-title">Ramen</div>337          <div class="cat-sub">Vegan Ramen with delicious vegan ingredients</div>338        </div>339        <div class="cat-arrow">340          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"></path></svg>341        </div>342      </div>343    </div>344 345    <div class="category">346      <div class="cat-header">347        <div>348          <div class="cat-title">Udon</div>349          <div class="cat-sub">Comfort noodles dishes</div>350        </div>351        <div class="cat-arrow">352          <svg viewBox="0 0 24 24"><path d="M7 10l5 5 5-5H7z"></path></svg>353        </div>354      </div>355    </div>356  </div>357 358  <!-- Cookie consent -->359  <div class="cookie-banner">360    <div class="cookie-text">361      We use cookies to give you the best experience on our website. By continuing, you agree to our use of cookies.362    </div>363    <button class="cookie-btn">OK</button>364  </div>365 366</div>367</body>368</html>