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; }9  #render-target {10    position: relative;11    width: 1080px;12    height: 2400px;13    overflow: hidden;14    background: #f4f4f4;15    border-radius: 0;16    box-shadow: none;17    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;18    color: #444;19  }20 21  /* Hero */22  .hero {23    position: relative;24    width: 100%;25    height: 560px;26  }27  .hero-img {28    position: absolute;29    left: 0; top: 0;30    width: 100%; height: 100%;31    background: #E0E0E0;32    border-bottom: 1px solid #BDBDBD;33    display: flex; align-items: center; justify-content: center;34    color: #757575; font-size: 36px; font-weight: 600;35  }36  .hero-title {37    position: absolute;38    left: 36px; top: 90px;39    color: #ffffff;40    font-size: 56px;41    font-weight: 800;42    letter-spacing: 0.3px;43    text-shadow: 0 2px 4px rgba(0,0,0,0.25);44  }45  .menu-btn {46    position: absolute;47    right: 36px; top: 72px;48    width: 120px; height: 90px;49    border: 2px solid rgba(255,255,255,0.9);50    border-radius: 18px;51    background: rgba(255,255,255,0.08);52    display: flex; align-items: center; justify-content: center;53  }54  .menu-btn svg { width: 64px; height: 64px; fill: none; stroke: #ffffff; stroke-width: 10; stroke-linecap: round; }55 56  .logo-badge {57    position: absolute;58    left: 50%; top: 450px;59    transform: translateX(-50%);60    width: 170px; height: 170px;61    border-radius: 24px;62    background: #0b1d34;63    box-shadow: 0 8px 18px rgba(0,0,0,0.35);64    border: 1px solid rgba(255,255,255,0.2);65    display: flex; align-items: center; justify-content: center;66    color: #e0c766; text-align: center; font-weight: 700;67    padding: 16px;68  }69  .logo-badge span { font-size: 26px; line-height: 1.15; }70 71  /* Card */72  .card {73    position: relative;74    width: calc(100% - 60px);75    margin: 100px 30px 0;76    background: #ffffff;77    border-radius: 24px;78    box-shadow: 0 6px 18px rgba(0,0,0,0.08);79    padding: 40px 36px 30px;80  }81  .card h1 {82    margin: 10px 0 30px;83    font-size: 48px;84    line-height: 1.2;85    text-align: center;86    color: #666;87    font-weight: 800;88  }89  .info-list { display: grid; grid-template-columns: 1fr; row-gap: 20px; margin-bottom: 20px; }90  .info-item {91    display: flex; align-items: center;92    font-size: 32px; color: #666;93  }94  .info-item svg { width: 38px; height: 38px; margin-right: 14px; }95  .info-item.blue { color: #1e88e5; }96  .info-item .linkish { color: #1e88e5; }97 98  .times {99    text-align: center;100    font-family: "Courier New", Courier, monospace;101    color: #e67e22;102    font-size: 40px;103    line-height: 1.6;104    margin: 10px 0 18px;105  }106 107  .badges {108    display: flex; justify-content: center; gap: 20px; margin-bottom: 20px;109  }110  .badge {111    display: inline-flex; align-items: center; gap: 10px;112    background: #d86d2a; color: #fff;113    padding: 16px 24px; border-radius: 12px;114    font-size: 30px; font-weight: 700;115  }116  .badge svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 2.8; }117 118  .notice-line {119    display: flex; align-items: center; gap: 14px;120    color: #1e88e5; font-size: 32px;121    padding: 8px 0 18px;122    border-top: 1px solid #eef1f5;123  }124  .notice-line svg { width: 38px; height: 38px; }125 126  .note-box {127    margin-top: 8px;128    background: #fafafa;129    border-top: 1px solid #e6e6e6;130    padding: 22px 16px 24px;131    border-radius: 12px;132  }133  .note-header {134    display: flex; align-items: center; gap: 14px;135    font-size: 32px; color: #666; font-weight: 700;136    margin-bottom: 10px;137  }138  .note-header svg { width: 36px; height: 36px; fill: #5a86ff; }139  .note-text {140    font-size: 30px; line-height: 1.55; color: #555;141  }142 143  /* Bottom order bar (behind cookie bar) */144  .bottom-bar {145    position: absolute; left: 0; bottom: 0;146    width: 100%; height: 130px;147    background: #8a4b21;148    display: flex; align-items: center; justify-content: space-around;149    color: #fff;150    z-index: 5;151  }152  .bottom-item { display: flex; align-items: center; gap: 14px; font-size: 28px; }153  .bottom-item svg { width: 42px; height: 42px; fill: none; stroke: #fff; stroke-width: 2.5; }154 155  /* Cookie bar overlay */156  .cookie-bar {157    position: absolute; left: 0; bottom: 130px;158    width: 100%;159    background: rgba(0,0,0,0.75);160    color: #fff;161    padding: 26px 26px 20px;162    z-index: 10;163  }164  .cookie-content {165    display: flex; flex-direction: column; align-items: center; gap: 20px;166    text-align: center;167  }168  .cookie-text { font-size: 32px; line-height: 1.4; }169  .cookie-btn {170    background: #69c392; color: #fff;171    border: none; border-radius: 10px;172    padding: 18px 180px;173    font-size: 34px; font-weight: 800;174    box-shadow: 0 2px 6px rgba(0,0,0,0.2);175  }176</style>177</head>178<body>179<div id="render-target">180 181  <!-- Hero -->182  <div class="hero">183    <div class="hero-img">[IMG: Vegan dish close-up]</div>184    <div class="hero-title">The Orchid Vegan Restaurant</div>185    <div class="menu-btn" aria-label="Menu">186      <svg viewBox="0 0 100 100">187        <path d="M18 28 H82"></path>188        <path d="M18 50 H82"></path>189        <path d="M18 72 H82"></path>190      </svg>191    </div>192    <div class="logo-badge"><span>[Logo: The Orchid Vegan Restaurant]</span></div>193  </div>194 195  <!-- Main Card -->196  <div class="card">197    <h1>The Orchid Vegan Restaurant Takeaway Service</h1>198 199    <div class="info-list">200      <div class="info-item blue">201        <svg viewBox="0 0 24 24">202          <path d="M12 2 C8 2 5 5 5 9 c0 6 7 13 7 13 s7 -7 7 -13 c0 -4 -3 -7 -7 -7 z"></path>203          <circle cx="12" cy="9" r="3" fill="#1e88e5"></circle>204        </svg>205        <span>16 George Hudson Street, York, YO1 6LP</span>206      </div>207      <div class="info-item">208        <svg viewBox="0 0 24 24">209          <path d="M6 3 c4 12 9 15 12 15 l3 -3 c-3 -2 -5 -3 -6 -2 c-2 1 -4 -1 -6 -5 c-1 -3 0 -5 2 -6 l-3 -3 z" fill="#1e88e5"></path>210        </svg>211        <span>01904 625855</span>212      </div>213      <div class="info-item">214        <svg viewBox="0 0 24 24">215          <path d="M3 5 h18 v10 H8 l-5 4 V5 z" fill="#5c83e5"></path>216        </svg>217        <span class="linkish">Feedback & Review(3)</span>218      </div>219    </div>220 221    <div class="times">222      Collection: 17:00~21:15<br>223      Delivery: 17:00~21:30224    </div>225 226    <div class="badges">227      <div class="badge">228        <svg viewBox="0 0 24 24">229          <path d="M12 8 v12 M5 12 h14 v8 H5 z"></path>230          <path d="M8 8 c0 -2 2 -3 4 -3 s4 1 4 3" stroke-linecap="round"></path>231        </svg>232        <span>-5% Over £35</span>233      </div>234      <div class="badge">235        <svg viewBox="0 0 24 24">236          <path d="M12 8 v12 M5 12 h14 v8 H5 z"></path>237          <path d="M8 8 c0 -2 2 -3 4 -3 s4 1 4 3" stroke-linecap="round"></path>238        </svg>239        <span>-10% Over £60</span>240      </div>241    </div>242 243    <div class="notice-line">244      <svg viewBox="0 0 24 24">245        <path d="M3 16 h18" stroke="#1e88e5" stroke-width="2"></path>246        <path d="M5 8 l6 6 M11 8 l6 6" stroke="#1e88e5" stroke-width="2"></path>247        <circle cx="4" cy="16" r="2" fill="#1e88e5"></circle>248      </svg>249      <span>Delivery min order £15 or else £5 extra</span>250    </div>251 252    <div class="note-box">253      <div class="note-header">254        <svg viewBox="0 0 24 24">255          <path d="M3 10 h12 v4 H3 z"></path>256          <path d="M15 10 l6 -3 v10 l-6 -3 z"></path>257        </svg>258        <span>Note:</span>259      </div>260      <div class="note-text">261        Minimum order 15 pounds, otherwise there will be an extra 5 pounds charge.<br>262        Free delivery for orders above 15 pounds.<br>263        We close on Tuesdays.<br>264        All the vegan mock meat dishes contain soy protein.265      </div>266    </div>267  </div>268 269  <!-- Bottom order bar -->270  <div class="bottom-bar">271    <div class="bottom-item">272      <svg viewBox="0 0 24 24">273        <path d="M4 6 h16 v10 H4 z"></path>274        <path d="M8 6 v-2 h8 v2"></path>275      </svg>276      <span>Pre-order</span>277    </div>278    <div class="bottom-item">279      <svg viewBox="0 0 24 24">280        <path d="M12 2 l6 7 h-4 v7 h-4 v-7 H6 z" fill="none"></path>281      </svg>282      <span>Collection</span>283    </div>284    <div class="bottom-item">285      <svg viewBox="0 0 24 24">286        <path d="M3 13 h11 l2 3 h5 v3 h-6 l-2 -3 H6 l-2 3 H1 v-3 z"></path>287      </svg>288      <span>Delivery</span>289    </div>290  </div>291 292  <!-- Cookie consent -->293  <div class="cookie-bar">294    <div class="cookie-content">295      <div class="cookie-text">296        We use cookies to give you the best experience on our website. By continuing, you agree to our use of cookies.297      </div>298      <button class="cookie-btn">OK</button>299    </div>300  </div>301 302</div>303</body>304</html>