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 Menu Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #f4f5f6;13  }14 15  /* Top system status bar */16  .status-bar {17    position: absolute; top: 0; left: 0; right: 0;18    height: 120px; background: #0f1612; color: #fff;19    display: flex; align-items: center; padding: 0 36px;20    font-size: 40px; letter-spacing: 0.5px;21  }22  .status-left { display: flex; align-items: center; gap: 18px; }23  .status-right { margin-left: auto; display: flex; align-items: center; gap: 26px; }24  .icon { width: 44px; height: 44px; }25 26  /* Browser/address bar */27  .address-bar {28    position: absolute; top: 120px; left: 0; right: 0;29    height: 120px; background: #172018; color: #eaeaea;30    display: flex; align-items: center; padding: 0 28px;31    border-bottom: 1px solid rgba(255,255,255,0.08);32  }33  .addr-home { margin-right: 22px; }34  .addr-pill {35    background: #2e6a42; color: #e9f6ec;36    padding: 18px 26px; border-radius: 64px;37    font-size: 40px;38  }39  .addr-actions { margin-left: auto; display: flex; align-items: center; gap: 28px; }40  .tab-badge {41    border: 2px solid #9ba59b; border-radius: 14px; padding: 8px 16px; color: #cfd5cf; font-size: 38px;42  }43 44  /* Title header bar */45  .title-bar {46    position: absolute; top: 240px; left: 0; right: 0;47    height: 140px; background: #141414; color: #fff;48    display: flex; align-items: center; padding: 0 32px;49    box-shadow: 0 8px 16px rgba(0,0,0,0.35);50    z-index: 2;51  }52  .title-text { font-weight: 800; font-size: 64px; letter-spacing: 0.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }53  .menu-btn {54    margin-left: auto; width: 120px; height: 88px; border-radius: 14px;55    border: 1px solid #3b3b3b; display: flex; align-items: center; justify-content: center; background: #1d1d1d;56  }57  .menu-btn svg { width: 72px; height: 72px; }58 59  /* Content list */60  .content {61    position: absolute; top: 380px; left: 0; right: 0; bottom: 0;62    padding: 32px;63  }64  .section {65    background: #fafafa; border-top: 1px solid #e3e6e8; border-bottom: 1px solid #e3e6e8;66    padding: 32px 24px; margin-bottom: 6px;67  }68  .section-header {69    display: flex; align-items: center;70  }71  .section-title {72    font-size: 66px; font-weight: 700; color: #2b3640;73  }74  .section-sub {75    font-size: 36px; color: #7a838a; font-style: italic; margin-top: 16px;76  }77  .chev {78    margin-left: auto;79    width: 54px; height: 54px;80  }81  .divider { height: 1px; background: #e1e5e7; margin: 32px 0; }82 83  /* Expanded card */84  .card {85    background: #ffffff; border-radius: 24px; padding: 34px; margin: 26px 0 28px 0;86    box-shadow: 0 4px 12px rgba(0,0,0,0.06); position: relative;87  }88  .card-title {89    font-size: 48px; font-weight: 700; color: #38434b; line-height: 1.3;90    display: flex; align-items: center; gap: 22px;91  }92  .badge {93    width: 56px; height: 56px; border-radius: 50%; background: #f59e3d; color: #fff;94    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 34px;95  }96  .card-desc { margin-top: 18px; font-size: 36px; color: #7b8288; line-height: 1.5; }97  .card-price { margin-top: 24px; font-size: 40px; color: #3a67d6; font-weight: 700; }98  .new-ribbon {99    position: absolute; top: 0; left: 0; width: 120px; height: 120px; overflow: hidden;100  }101  .new-ribbon span {102    position: absolute; top: 22px; left: -40px;103    transform: rotate(-45deg);104    background: #62b37a; color: #fff; padding: 10px 52px; font-size: 32px; border-radius: 6px;105    box-shadow: 0 2px 6px rgba(0,0,0,0.15);106  }107 108  /* Cookie bar */109  .cookie-bar {110    position: absolute; left: 0; right: 0; bottom: 160px;111    background: rgba(22,22,22,0.88); color: #e7e7e7;112    padding: 26px 36px; display: flex; align-items: center; gap: 24px;113  }114  .cookie-text { font-size: 36px; line-height: 1.4; flex: 1; }115  .cookie-ok {116    background: #74c79a; color: #0e2c1d; font-size: 42px; font-weight: 700;117    border-radius: 12px; padding: 16px 54px; border: 1px solid rgba(255,255,255,0.15);118  }119 120  /* Gesture pill (Android) */121  .gesture-pill {122    position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%);123    width: 280px; height: 20px; background: #e9eaec; border-radius: 10px;124  }125</style>126</head>127<body>128<div id="render-target">129 130  <!-- Status bar -->131  <div class="status-bar">132    <div class="status-left">133      <span>12:31</span>134      <!-- minimal status icons -->135      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 2l9 7h-3v11h-12v-11h-3z"/></svg>136      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M6 10v-3a6 6 0 0112 0v3h2v12h-16v-12h2zm3-3a3 3 0 016 0v3h-6v-3z"/></svg>137      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M12 2a10 10 0 1010 10A10 10 0 0012 2zm1 5h-2v6h6v-2h-4z"/></svg>138      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="10"/></svg>139    </div>140    <div class="status-right">141      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><circle cx="12" cy="12" r="2"/><circle cx="18" cy="12" r="2"/><circle cx="6" cy="12" r="2"/></svg>142      <svg class="icon" viewBox="0 0 24 24" fill="#fff"><path d="M21 7l-8 10-5-6-5 6v-2l5-6 5 6 8-10z"/></svg>143    </div>144  </div>145 146  <!-- Address bar -->147  <div class="address-bar">148    <svg class="addr-home" viewBox="0 0 24 24" width="52" height="52" fill="#cfe6d5"><path d="M12 3l9 8h-3v10h-12v-10h-3z"/></svg>149    <svg viewBox="0 0 24 24" width="52" height="52" fill="#cfe6d5" style="margin-right:16px;"><path d="M6 10v-3a6 6 0 0112 0v3h2v10h-16v-10h2zm3-3a3 3 0 016 0v3h-6v-3z"/></svg>150    <div class="addr-pill">online.orchidvegan.com</div>151    <div class="addr-actions">152      <svg viewBox="0 0 24 24" width="52" height="52" fill="#cfd5cf"><path d="M11 11v-6h2v6h6v2h-6v6h-2v-6h-6v-2z"/></svg>153      <div class="tab-badge">5</div>154      <svg viewBox="0 0 24 24" width="52" height="52" fill="#cfd5cf"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>155    </div>156  </div>157 158  <!-- Title header -->159  <div class="title-bar">160    <div class="title-text">The Orchid Vegan Restaurant T</div>161    <div class="menu-btn">162      <svg viewBox="0 0 24 24" fill="#eaeaea"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>163    </div>164  </div>165 166  <!-- Content -->167  <div class="content">168    <div class="section">169      <div class="section-header">170        <div>171          <div class="section-title">Stuffed Bun - Bao</div>172          <div class="section-sub">Soft Bun stuffed with tasty vegan ingredients</div>173        </div>174        <svg class="chev" viewBox="0 0 24 24" fill="#2f54c6"><path d="M7 9l5 5 5-5z"/></svg>175      </div>176    </div>177 178    <div class="section">179      <div class="section-header">180        <div>181          <div class="section-title">Ramen</div>182          <div class="section-sub">Vegan Ramen with delicious vegan ingredients</div>183        </div>184        <svg class="chev" viewBox="0 0 24 24" fill="#2f54c6"><path d="M7 9l5 5 5-5z"/></svg>185      </div>186    </div>187 188    <div class="section">189      <div class="section-header">190        <div>191          <div class="section-title">Udon</div>192          <div class="section-sub">Stirfry Udon noodles dish</div>193        </div>194        <svg class="chev" viewBox="0 0 24 24" fill="#2f54c6"><path d="M7 9l5 5 5-5z"/></svg>195      </div>196    </div>197 198    <div class="section">199      <div class="section-header">200        <div>201          <div class="section-title">Vegan Sushi</div>202          <div class="section-sub">Pure vegan sushi served with sushi soy sauce</div>203        </div>204        <svg class="chev" viewBox="0 0 24 24" fill="#2f54c6"><path d="M7 9l5 5 5-5z"/></svg>205      </div>206    </div>207 208    <div class="section">209      <div class="section-header">210        <div>211          <div class="section-title">Appetizer</div>212        </div>213        <svg class="chev" viewBox="0 0 24 24" fill="#2f54c6"><path d="M7 9l5 5 5-5z"/></svg>214      </div>215    </div>216 217    <div class="section">218      <div class="section-header">219        <div class="section-title">Soup</div>220        <svg class="chev" viewBox="0 0 24 24" fill="#2f54c6"><path d="M7 15l5-5 5 5z"/></svg>221      </div>222 223      <!-- Expanded card -->224      <div class="card">225        <div class="new-ribbon"><span>NEW</span></div>226        <div class="card-title">227          <div class="badge">1</div>228          Tom Kha Soup with King Oyster Mushroom 12oz229        </div>230        <div class="card-desc">231          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, mushroom232        </div>233        <div class="card-price">£4.50</div>234      </div>235    </div>236  </div>237 238  <!-- Cookie bar -->239  <div class="cookie-bar">240    <div class="cookie-text">241      We use cookies to give you the best experience on our website. By continuing, you agree to our use of cookies.242    </div>243    <div class="cookie-ok">OK</div>244  </div>245 246  <!-- Gesture pill -->247  <div class="gesture-pill"></div>248</div>249</body>250</html>