GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Orchid Vegan - Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #f4f5f7;15    color: #1f2937;16  }17 18  /* Top system/status and browser bars */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 92px;23    background: #0f1b13;24    color: #fff;25    font-weight: 600;26    font-size: 36px;27    display: flex;28    align-items: center;29    padding: 0 28px;30    z-index: 10;31  }32  .status-bar .right-icons {33    margin-left: auto;34    display: flex;35    align-items: center;36    gap: 20px;37    opacity: .9;38  }39  .status-dot { width: 10px; height: 10px; background:#d1d5db; border-radius: 50%; display:inline-block; }40  .battery {41    width: 38px; height: 20px; border: 3px solid #fff; border-radius: 4px; position: relative;42  }43  .battery:after {44    content: ""; position: absolute; right: -8px; top: 6px; width: 6px; height: 8px; background: #fff; border-radius: 2px;45  }46  .battery .level { position:absolute; left:2px; top:2px; right:6px; bottom:2px; background:#fff; }47 48  .browser-bar {49    position: absolute;50    top: 92px;51    left: 0; right: 0;52    height: 168px;53    background: #142916;54    display: flex;55    align-items: center;56    padding: 0 24px;57    gap: 22px;58    z-index: 9;59  }60  .home-ic {61    width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; color:#d1d5db;62  }63  .url-pill {64    flex: 1;65    height: 90px;66    background: #2c5e3a;67    border-radius: 45px;68    display: flex;69    align-items: center;70    padding: 0 28px;71    color: #e7f0e9;72    font-size: 38px;73    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);74  }75  .url-pill .lock {76    margin-right: 16px;77  }78  .browser-actions {79    display: flex;80    align-items: center;81    gap: 22px;82  }83  .tab-count {84    width: 64px; height: 64px; border-radius: 16px;85    background: rgba(255,255,255,0.12);86    color: #fff; display: grid; place-items: center; font-weight: 700;87  }88  .menu-3 {89    width: 64px; height: 64px; border-radius: 12px;90    background: rgba(255,255,255,0.1); display: grid; place-items: center;91  }92 93  /* Page header overlay */94  .page-header {95    position: absolute;96    top: 260px;97    left: 0; right: 0;98    height: 130px;99    background: rgba(0,0,0,0.65);100    color: #fff;101    display: flex;102    align-items: center;103    padding: 0 32px;104    z-index: 4;105    box-shadow: 0 4px 16px rgba(0,0,0,0.25);106  }107  .page-header h1 {108    margin: 0;109    font-size: 64px;110    font-weight: 800;111    letter-spacing: 0.2px;112  }113  .hamburger {114    margin-left: auto;115    width: 120px; height: 72px;116    border-radius: 14px;117    border: 2px solid rgba(255,255,255,0.25);118    display: grid; place-items: center;119    background: rgba(0,0,0,0.3);120  }121  .hamburger span {122    width: 56px; height: 6px; background:#cbd5e1; display:block; margin: 6px 0;123  }124 125  /* Main list */126  .list {127    position: absolute;128    top: 392px; /* below header */129    left: 0; right: 0; bottom: 0;130    background: #ffffff;131    padding-top: 32px;132  }133  .category {134    padding: 36px 32px 34px 32px;135    border-bottom: 1px solid #e5e7eb;136    position: relative;137  }138  .category h2 {139    margin: 0;140    font-size: 72px;141    color: #1f2937;142    font-weight: 800;143  }144  .category p {145    margin: 10px 0 0 0;146    color: #6b7280;147    font-size: 40px;148    font-style: italic;149  }150  .chev {151    position: absolute;152    right: 32px; top: 56px;153  }154  .chev svg { width: 44px; height: 44px; }155 156  /* Bottom sheet modal */157  .sheet {158    position: absolute;159    left: 0; right: 0;160    bottom: 220px; /* leave space for cookie bar and gesture */161    height: 980px;162    background: #ffffff;163    border-radius: 24px 24px 0 0;164    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);165    z-index: 6;166  }167  .sheet .title {168    padding: 36px 32px;169    font-size: 52px;170    font-weight: 700;171    color: #2d3748;172    line-height: 1.2;173    display: flex;174    align-items: flex-start;175    gap: 16px;176  }177  .close-x {178    margin-left: auto;179    width: 64px; height: 64px; border-radius: 50%;180    display: grid; place-items: center;181    color: #9ca3af;182  }183  .divider {184    height: 2px;185    background: #eef2f7;186  }187  .qty-row {188    display: flex;189    align-items: center;190    justify-content: center;191    gap: 140px;192    padding: 60px 0 40px;193  }194  .icon-btn svg { width: 132px; height: 132px; }195  .qty {196    font-size: 96px;197    color: #6b7280;198    font-weight: 600;199    width: 120px;200    text-align: center;201  }202  .add-btn {203    display: block;204    width: calc(100% - 64px);205    margin: 36px auto 0;206    height: 120px;207    border-radius: 14px;208    background: #d9772a;209    color: #fff;210    border: none;211    font-size: 48px;212    font-weight: 700;213    letter-spacing: .3px;214  }215 216  /* Cookie bar */217  .cookie {218    position: absolute;219    left: 0; right: 0;220    bottom: 70px;221    background: rgba(0,0,0,0.82);222    color: #ffffff;223    padding: 26px 28px 30px;224    display: flex;225    align-items: center;226    gap: 22px;227    z-index: 7;228  }229  .cookie-text {230    font-size: 34px;231    line-height: 1.4;232    opacity: .95;233    flex: 1;234  }235  .cookie-btn {236    background: #59c48b;237    color: #0b3d2d;238    font-weight: 800;239    border-radius: 10px;240    padding: 16px 36px;241    font-size: 40px;242  }243 244  /* Gesture bar */245  .gesture {246    position: absolute;247    bottom: 16px; left: 50%;248    transform: translateX(-50%);249    width: 220px; height: 12px; border-radius: 6px;250    background: #e6e6e6;251    opacity: .9;252    z-index: 8;253  }254</style>255</head>256<body>257<div id="render-target">258 259  <!-- Status bar -->260  <div class="status-bar">261    12:31262    <div class="right-icons">263      <span class="status-dot"></span>264      <span class="status-dot"></span>265      <span class="status-dot"></span>266      <div class="battery"><div class="level"></div></div>267    </div>268  </div>269 270  <!-- Browser bar -->271  <div class="browser-bar">272    <div class="home-ic">273      <svg width="36" height="36" viewBox="0 0 24 24" fill="#D1D5DB"><path d="M12 3l9 8h-3v7h-12v-7h-3z"/></svg>274    </div>275    <div class="url-pill">276      <span class="lock">277        <svg width="34" height="34" viewBox="0 0 24 24" fill="#e7f0e9"><path d="M12 1a5 5 0 00-5 5v3H5v14h14V9h-2V6a5 5 0 00-5-5zm0 2a3 3 0 013 3v3H9V6a3 3 0 013-3z"/></svg>278      </span>279      online.orchidvegan.com280    </div>281    <div class="browser-actions">282      <div class="home-ic">283        <svg width="36" height="36" viewBox="0 0 24 24" fill="#D1D5DB"><path d="M12 10v4m-2-2h4" stroke="#D1D5DB" stroke-width="2" stroke-linecap="round" fill="none"/></svg>284      </div>285      <div class="tab-count">5</div>286      <div class="menu-3">287        <svg width="28" height="28" viewBox="0 0 24 24" fill="#E5E7EB"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>288      </div>289    </div>290  </div>291 292  <!-- Overlay header inside the website -->293  <div class="page-header">294    <h1>The Orchid Vegan Restaurant T</h1>295    <div class="hamburger">296      <span></span><span></span><span></span>297    </div>298  </div>299 300  <!-- Main list content -->301  <div class="list">302    <div class="category" style="opacity:.9;">303      <h2>Stuffed Bun - Bao</h2>304      <p>Soft Bun stuffed with tasty vegan ingredients</p>305    </div>306    <div class="category">307      <h2>Ramen</h2>308      <p>Vegan Ramen with delicious vegan ingredients</p>309      <div class="chev">310        <svg viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="#1D4ED8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>311      </div>312    </div>313    <div class="category">314      <h2>Udon</h2>315      <p>Stirfry Udon noodles dish</p>316      <div class="chev">317        <svg viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="#1D4ED8" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>318      </div>319    </div>320  </div>321 322  <!-- Bottom sheet modal -->323  <div class="sheet">324    <div class="title">325      (£4.50) Tom Kha Soup with King Oyster Mushroom 12oz326      <div class="close-x">327        <svg width="36" height="36" viewBox="0 0 24 24" stroke="#9CA3AF" fill="none" stroke-width="2">328          <path d="M6 6l12 12M18 6L6 18" stroke-linecap="round"/>329        </svg>330      </div>331    </div>332    <div class="divider"></div>333    <div class="qty-row">334      <button class="icon-btn" aria-label="decrement">335        <svg viewBox="0 0 24 24">336          <rect x="2" y="2" width="20" height="20" rx="4" ry="4" fill="none" stroke="#DF7F31" stroke-width="2"></rect>337          <path d="M7 12h10" stroke="#DF7F31" stroke-width="2" stroke-linecap="round"></path>338        </svg>339      </button>340      <div class="qty">1</div>341      <button class="icon-btn" aria-label="increment">342        <svg viewBox="0 0 24 24">343          <rect x="2" y="2" width="20" height="20" rx="4" ry="4" fill="none" stroke="#DF7F31" stroke-width="2"></rect>344          <path d="M12 7v10M7 12h10" stroke="#DF7F31" stroke-width="2" stroke-linecap="round"></path>345        </svg>346      </button>347    </div>348    <div class="divider"></div>349    <button class="add-btn">Add to cart</button>350  </div>351 352  <!-- Cookie consent -->353  <div class="cookie">354    <div class="cookie-text">355      We use cookies to give you the best experience on our website. By continuing, you agree to our use of cookies.356    </div>357    <div class="cookie-btn">OK</div>358  </div>359 360  <!-- Gesture bar -->361  <div class="gesture"></div>362</div>363</body>364</html>