GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Pizza Outlet - Menu</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15    border-radius: 36px;16    box-shadow: 0 8px 24px rgba(0,0,0,0.12);17    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;18    color: #1e1e1e;19  }20  .statusbar {21    height: 92px;22    padding: 0 36px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #2b2b2b;27    font-weight: 600;28    font-size: 34px;29  }30  .status-icons {31    display: flex;32    align-items: center;33    gap: 26px;34  }35  /* Header / location */36  .header {37    padding: 24px 36px 12px 36px;38    display: flex;39    align-items: center;40    justify-content: space-between;41  }42  .loc-wrap {43    display: flex;44    align-items: center;45    gap: 24px;46  }47  .loc-text small {48    display: block;49    color: #7a7a7a;50    font-size: 28px;51    margin-bottom: 4px;52  }53  .loc-text strong {54    font-size: 40px;55    font-weight: 700;56    color: #151515;57    letter-spacing: 0.2px;58  }59  .loc-text .down {60    vertical-align: middle;61    margin-left: 12px;62  }63  .call-btn {64    display: inline-flex;65    align-items: center;66    gap: 16px;67    border: 2px solid #2f6a2f;68    color: #2f6a2f;69    border-radius: 20px;70    padding: 22px 28px;71    font-size: 34px;72    font-weight: 700;73    background: #ffffff;74    box-shadow: 0 4px 0 rgba(47,106,47,0.15);75  }76  /* Tabs */77  .tabs {78    margin: 10px 36px 22px 36px;79    background: #eaeaea;80    border-radius: 18px;81    display: grid;82    grid-template-columns: 1fr 1fr 1fr;83    overflow: hidden;84  }85  .tab {86    padding: 26px 0;87    text-align: center;88    font-weight: 800;89    font-size: 34px;90    color: #777;91  }92  .tab.active {93    background: #3f6d38;94    color: #fff;95  }96  /* Banner */97  .banner {98    margin: 0 36px;99    height: 220px;100    border-radius: 22px;101    background: #E0E0E0;102    border: 1px solid #BDBDBD;103    display: flex;104    align-items: center;105    justify-content: center;106    color: #757575;107    font-weight: 800;108    font-size: 46px;109  }110  /* Menu header + search */111  .menu-head {112    margin: 28px 36px 18px 36px;113    display: flex;114    align-items: center;115    justify-content: space-between;116  }117  .menu-head h2 {118    margin: 0;119    font-size: 54px;120    letter-spacing: 1px;121  }122  .search {123    display: flex;124    align-items: center;125    gap: 16px;126    background: #f1efef;127    border-radius: 18px;128    padding: 22px 26px;129    font-size: 34px;130    color: #333;131  }132  /* Grid cards */133  .grid {134    padding: 10px 36px 140px 36px;135    display: grid;136    grid-template-columns: 1fr 1fr;137    gap: 28px;138  }139  .card {140    border-radius: 22px;141    overflow: hidden;142    background: #fff;143    box-shadow: 0 6px 18px rgba(0,0,0,0.08);144  }145  .card .img {146    height: 420px;147    background: #E0E0E0;148    border-bottom: 1px solid #BDBDBD;149    display: flex;150    align-items: center;151    justify-content: center;152    color: #757575;153    font-size: 36px;154    position: relative;155  }156  .card .fade {157    position: absolute;158    bottom: 0;159    left: 0;160    right: 0;161    height: 160px;162    background: linear-gradient(to top, rgba(0,0,0,0.45), rgba(0,0,0,0));163    pointer-events: none;164  }165  .card .meta {166    position: absolute;167    bottom: 20px;168    left: 24px;169    color: #fff;170    text-shadow: 0 1px 1px rgba(0,0,0,0.3);171  }172  .card .meta .title {173    font-size: 44px;174    font-weight: 900;175    letter-spacing: 1px;176    margin-bottom: 8px;177  }178  .card .meta .sub {179    font-size: 30px;180    font-weight: 700;181  }182  /* Bottom navigation */183  .bottom-nav {184    position: absolute;185    left: 24px;186    right: 24px;187    bottom: 96px;188    background: #fff;189    border-radius: 28px;190    box-shadow: 0 10px 22px rgba(0,0,0,0.15);191    padding: 20px 18px;192    display: grid;193    grid-template-columns: repeat(4, 1fr);194    align-items: center;195    text-align: center;196  }197  .nav-item {198    display: flex;199    flex-direction: column;200    align-items: center;201    gap: 14px;202    color: #777;203    font-size: 28px;204    font-weight: 600;205  }206  .nav-item.active { color: #2f6a2f; }207  .gesture {208    position: absolute;209    bottom: 24px;210    left: 50%;211    transform: translateX(-50%);212    width: 240px;213    height: 14px;214    background: #000;215    border-radius: 10px;216    opacity: 0.9;217  }218  /* Simple helpers for icon sizing */219  svg { display: block; }220</style>221</head>222<body>223<div id="render-target">224  <!-- Status Bar -->225  <div class="statusbar">226    <div>1:59</div>227    <div class="status-icons">228      <!-- Location/compass like icons (simple dots) -->229      <svg width="34" height="34"><circle cx="17" cy="17" r="16" fill="#9c9c9c"/></svg>230      <svg width="34" height="34"><circle cx="17" cy="17" r="16" fill="#b0b0b0"/></svg>231      <svg width="34" height="34"><circle cx="17" cy="17" r="16" fill="#c7c7c7"/></svg>232      <!-- WiFi -->233      <svg width="48" height="32" viewBox="0 0 48 32">234        <path d="M4 10c10-8 30-8 40 0M10 16c7-5 21-5 28 0M18 22c4-3 10-3 14 0M24 28l4 4-4 0z" fill="none" stroke="#5a5a5a" stroke-width="2" stroke-linecap="round"/>235      </svg>236      <!-- Battery -->237      <svg width="56" height="28" viewBox="0 0 56 28">238        <rect x="2" y="6" width="46" height="16" rx="3" ry="3" fill="none" stroke="#5a5a5a" stroke-width="2"/>239        <rect x="6" y="10" width="36" height="8" rx="2" fill="#5a5a5a"/>240        <rect x="50" y="10" width="4" height="8" rx="1" fill="#5a5a5a"/>241      </svg>242    </div>243  </div>244 245  <!-- Header with location and call button -->246  <div class="header">247    <div class="loc-wrap">248      <!-- Store icon -->249      <svg width="64" height="64" viewBox="0 0 64 64">250        <path d="M8 26l6-12h36l6 12v6H8v-6zM12 34h40v24H12V34z" fill="none" stroke="#222" stroke-width="3" stroke-linejoin="round"/>251      </svg>252      <div class="loc-text">253        <small>Indore</small>254        <strong>Indore (Bhawarkua)255          <!-- Down arrow -->256          <svg class="down" width="26" height="26" viewBox="0 0 24 24">257            <path d="M6 9l6 6 6-6" fill="none" stroke="#222" stroke-width="2" stroke-linecap="round"/>258          </svg>259        </strong>260      </div>261    </div>262    <div class="call-btn">263      <!-- Phone icon -->264      <svg width="34" height="34" viewBox="0 0 24 24">265        <path d="M6 4l4 2-2 3c1 2 3 4 5 5l3-2 2 4c-2 1-4 2-6 1-4-2-7-5-9-9 0-2 1-4 3-4z" fill="none" stroke="#2f6a2f" stroke-width="2" stroke-linejoin="round"/>266      </svg>267      <span>CALL OUTLET</span>268    </div>269  </div>270 271  <!-- Order type tabs -->272  <div class="tabs">273    <div class="tab active">DELIVERY</div>274    <div class="tab">PICK UP</div>275    <div class="tab">DINE-IN</div>276  </div>277 278  <!-- Banner -->279  <div class="banner">[IMG: Cheese Burst Banner]</div>280 281  <!-- Menu header -->282  <div class="menu-head">283    <h2>MENU</h2>284    <div class="search">285      <svg width="36" height="36" viewBox="0 0 24 24">286        <circle cx="10" cy="10" r="6" fill="none" stroke="#333" stroke-width="2"/>287        <path d="M15 15l6 6" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>288      </svg>289      <span>Search</span>290    </div>291  </div>292 293  <!-- Grid of menu items -->294  <div class="grid">295    <!-- Card 1 -->296    <div class="card">297      <div class="img">[IMG: Pizza with toppings]298        <div class="fade"></div>299        <div class="meta">300          <div class="title">BOGO</div>301          <div class="sub">29 Varieties Available</div>302        </div>303      </div>304    </div>305    <!-- Card 2 -->306    <div class="card">307      <div class="img">[IMG: Cheese Pizza]308        <div class="fade"></div>309        <div class="meta">310          <div class="title">PIZZA</div>311          <div class="sub">38 Varieties Available</div>312        </div>313      </div>314    </div>315    <!-- Card 3 -->316    <div class="card">317      <div class="img">[IMG: Garlic Bread Slices]318        <div class="fade"></div>319        <div class="meta">320          <div class="title">GARLIC BREADS</div>321          <div class="sub">11 Varieties Available</div>322        </div>323      </div>324    </div>325    <!-- Card 4 -->326    <div class="card">327      <div class="img">[IMG: Bruschetta Pieces]328        <div class="fade"></div>329        <div class="meta">330          <div class="title">BRUSCHETTA</div>331          <div class="sub">2 Varieties Available</div>332        </div>333      </div>334    </div>335    <!-- Card 5 -->336    <div class="card">337      <div class="img">[IMG: Veg Pizza Slice]338        <div class="fade"></div>339        <div class="meta">340          <div class="title">SPECIALS</div>341          <div class="sub">6 Varieties Available</div>342        </div>343      </div>344    </div>345    <!-- Card 6 -->346    <div class="card">347      <div class="img">[IMG: Pastas & Wraps Combo]348        <div class="fade"></div>349        <div class="meta">350          <div class="title">COMBOS</div>351          <div class="sub">8 Varieties Available</div>352        </div>353      </div>354    </div>355  </div>356 357  <!-- Bottom navigation bar -->358  <div class="bottom-nav">359    <div class="nav-item active">360      <svg width="44" height="44" viewBox="0 0 24 24">361        <path d="M3 11l9-7 9 7v9H15v-5H9v5H3z" fill="#2f6a2f"/>362      </svg>363      <div>Home</div>364    </div>365    <div class="nav-item">366      <svg width="44" height="44" viewBox="0 0 24 24">367        <path d="M12 2l2 4 4 1-3 3 1 4-4-2-4 2 1-4-3-3 4-1 2-4z" fill="#888"/>368      </sv