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>Pizza Menu</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #ffffff;15    color: #222;16  }17 18  /* Status bar */19  .status-bar {20    height: 96px;21    padding: 0 40px;22    display: flex;23    align-items: center;24    justify-content: space-between;25    color: #555;26    font-weight: 600;27    font-size: 36px;28  }29  .status-left { display: flex; align-items: center; gap: 26px; }30  .status-right { display: flex; align-items: center; gap: 26px; }31  .dot { width: 10px; height: 10px; background:#777; border-radius:50%; display:inline-block; }32 33  /* Header */34  .header {35    display: flex;36    align-items: center;37    padding: 16px 44px 6px 44px;38  }39  .back-icon { width: 60px; height: 60px; margin-right: 18px; }40  .title {41    font-size: 68px;42    font-weight: 800;43    letter-spacing: 0.5px;44  }45  .search-icon {46    margin-left: auto;47    width: 64px; height: 64px;48  }49 50  /* Intro item (top description) */51  .intro {52    padding: 8px 44px 0 44px;53    position: relative;54  }55  .intro .price {56    font-size: 44px;57    font-weight: 800;58    margin-bottom: 16px;59  }60  .intro .desc {61    font-size: 32px;62    color: #7a7a7a;63    max-width: 620px;64    line-height: 1.45;65  }66  .intro .right-box {67    position: absolute;68    right: 44px;69    top: -40px;70    width: 360px;71  }72  .pizza-img {73    width: 320px;74    height: 220px;75    background: #E0E0E0;76    border: 1px solid #BDBDBD;77    border-radius: 24px;78    display:flex; align-items:center; justify-content:center;79    color:#757575; font-size:28px;80    margin: 24px auto 20px auto;81  }82  .add-btn {83    width: 320px;84    height: 96px;85    border-radius: 18px;86    border: 2px solid #7ea46f;87    background: #e9f0e6;88    color: #2f6a35;89    font-weight: 800;90    font-size: 40px;91    letter-spacing: 1px;92    display:flex; align-items:center; justify-content:center;93    box-shadow: 0 4px 0 rgba(0,0,0,0.05);94    margin: 0 auto;95  }96  .customizable {97    text-align: center;98    color:#6f6f6f;99    font-size: 28px;100    margin-top: 10px;101  }102 103  /* Section heading */104  .section {105    margin-top: 70px;106    padding: 0 44px;107  }108  .section h2 {109    font-size: 52px;110    font-weight: 800;111    margin: 0 0 26px 0;112    letter-spacing: 1px;113  }114  .underline {115    width: 280px;116    height: 12px;117    background: #3f6f3b;118    border-radius: 8px;119  }120 121  /* List items */122  .item {123    display: flex;124    padding: 48px 44px 28px 44px;125    position: relative;126  }127  .item + .item { border-top: 1px solid #e9e9e9; }128  .left {129    width: 620px;130    padding-right: 20px;131  }132  .right {133    margin-left: auto;134    width: 360px;135    text-align: center;136  }137  .veg-tag {138    display: inline-flex;139    align-items: center;140    gap: 14px;141    margin-bottom: 18px;142  }143  .veg-icon {144    width: 36px; height: 36px;145    border: 3px solid #3f6f3b;146    border-radius: 8px;147    position: relative;148  }149  .veg-icon::after {150    content: "";151    position: absolute;152    width: 14px; height: 14px;153    background: #3f6f3b;154    border-radius: 50%;155    top: 50%; left: 50%;156    transform: translate(-50%, -50%);157  }158  .badge {159    background: #f36b61;160    color: #fff;161    font-weight: 700;162    font-size: 26px;163    padding: 10px 20px;164    border-radius: 20px;165  }166  .item-title {167    font-size: 46px;168    font-weight: 800;169    line-height: 1.15;170    margin-bottom: 10px;171  }172  .item-price {173    font-size: 44px;174    font-weight: 800;175    margin: 10px 0 14px;176  }177  .note {178    display:flex; align-items:center; gap: 12px;179    color:#555; font-size: 30px; margin-bottom: 18px;180  }181  .jain-icon {182    width: 40px; height: 40px; border-radius: 50%;183    background: #f1b21c; color:#000; font-weight:800;184    display:flex; align-items:center; justify-content:center;185  }186  .item-desc {187    color:#6f6f6f; font-size: 32px; line-height: 1.45;188  }189 190  /* Floating menu chip */191  .menu-chip {192    position: absolute;193    left: 50%;194    bottom: 220px;195    transform: translateX(-50%);196    background: #000;197    color: #fff;198    padding: 22px 32px;199    border-radius: 24px;200    display: inline-flex;201    align-items: center;202    gap: 18px;203    box-shadow: 0 10px 24px rgba(0,0,0,0.25);204    font-size: 34px;205    font-weight: 800;206    letter-spacing: 0.5px;207  }208  .menu-chip svg { width: 42px; height: 42px; }209 210  /* Gesture bar */211  .gesture {212    position: absolute;213    bottom: 60px;214    left: 50%;215    transform: translateX(-50%);216    width: 360px;217    height: 16px;218    background: #000;219    opacity: 0.9;220    border-radius: 10px;221  }222</style>223</head>224<body>225<div id="render-target">226 227  <!-- Status bar -->228  <div class="status-bar">229    <div class="status-left">230      <div>2:02</div>231      <span class="dot"></span>232      <span class="dot"></span>233      <span class="dot"></span>234    </div>235    <div class="status-right">236      <!-- simple wifi icon -->237      <svg width="44" height="44" viewBox="0 0 44 44">238        <path d="M6 16c10-8 22-8 32 0" fill="none" stroke="#555" stroke-width="3" stroke-linecap="round"/>239        <path d="M12 22c6-5 14-5 20 0" fill="none" stroke="#555" stroke-width="3" stroke-linecap="round"/>240        <path d="M18 28c4-3 8-3 12 0" fill="none" stroke="#555" stroke-width="3" stroke-linecap="round"/>241        <circle cx="24" cy="34" r="2.7" fill="#555"/>242      </svg>243      <!-- battery -->244      <svg width="44" height="44" viewBox="0 0 44 44">245        <rect x="7" y="12" width="28" height="20" rx="3" ry="3" fill="none" stroke="#555" stroke-width="3"/>246        <rect x="36" y="18" width="4" height="8" rx="2" fill="#555"/>247        <rect x="10" y="15" width="22" height="14" rx="2" fill="#555"/>248      </svg>249    </div>250  </div>251 252  <!-- Header -->253  <div class="header">254    <svg class="back-icon" viewBox="0 0 48 48">255      <path d="M28 10 L14 24 L28 38" fill="none" stroke="#222" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>256    </svg>257    <div class="title">Pizza</div>258    <svg class="search-icon" viewBox="0 0 48 48">259      <circle cx="20" cy="20" r="13" fill="none" stroke="#222" stroke-width="3"/>260      <path d="M32 32 L44 44" stroke="#222" stroke-width="3" stroke-linecap="round"/>261    </svg>262  </div>263 264  <!-- Intro description -->265  <div class="intro">266    <div class="price">₹155</div>267    <div class="desc">crispy onion with real mozzarella & cheddar cheese</div>268    <div class="right-box">269      <div class="pizza-img">[IMG: Cheese Onion Pizza]</div>270      <div class="add-btn">ADD +</div>271      <div class="customizable">Customizable</div>272    </div>273  </div>274 275  <!-- Section -->276  <div class="section">277    <h2>SIMPLY VEG</h2>278    <div class="underline"></div>279  </div>280 281  <!-- Item 1 -->282  <div class="item">283    <div class="left">284      <div class="veg-tag">285        <div class="veg-icon"></div>286        <div class="badge">Bestseller</div>287      </div>288      <div class="item-title">Double Cheese Margheritra Pizza</div>289      <div class="item-price">₹175</div>290      <div class="note">291        <div class="jain-icon">J</div>292        <div>Jain Available</div>293      </div>294      <div class="item-desc">Extra Loaded 100% Real Mozzarella Cheese Over A Zesty Tomato Gravy</div>295    </div>296    <div class="right">297      <div class="pizza-img" style="width:300px; height:300px; border-radius: 50%;">[IMG: Plain Cheese Pizza]</div>298      <div class="add-btn">ADD +</div>299      <div class="customizable">Customizable</div>300    </div>301  </div>302 303  <!-- Item 2 -->304  <div class="item">305    <div class="left">306      <div class="veg-tag">307        <div class="veg-icon"></div>308      </div>309      <div class="item-title">Fresh Delight Pizza</div>310      <div class="item-price">₹175</div>311      <div class="item-desc">Loaded With Crips Green Peppers, Fresh Cut Onion, Juicy Tomatoes With 100% Mozzarella And Cheddar Cheese</div>312    </div>313    <div class="right">314      <div class="pizza-img" style="width:300px; height:300px; border-radius: 50%;">[IMG: Veggie Pizza With Peppers & Tomatoes]</div>315      <div class="add-btn">ADD +</div>316      <div class="customizable">Customizable</div>317    </div>318  </div>319 320  <!-- Item 3 -->321  <div class="item">322    <div class="left">323      <div class="veg-tag">324        <div class="veg-icon"></div>325      </div>326      <div class="item-title">Indian Bite Pizza</div>327      <div class="item-price">₹175</div>328      <div class="item-desc">Fresh Juice Sweet Corn, Olives & Mushroom With 100% Real Mozzarella And Cheddar Cheese</div>329    </div>330    <div class="right">331      <div class="pizza-img" style="width:300px; height:300px; border-radius: 50%;">[IMG: Corn, Olive & Mushroom Pizza]</div>332      <div class="add-btn">ADD +</div>333      <div class="customizable">Customizable</div>334    </div>335  </div>336 337  <!-- Floating menu chip -->338  <div class="menu-chip">339    <svg viewBox="0 0 48 48">340      <path d="M10 12 L10 24 M16 12 L16 24 M13 24 L13 36" stroke="#fff" stroke-width="4" stroke-linecap="round"/>341      <path d="M34 12 L26 20 M26 12 L34 20 M30 20 L30 36" stroke="#fff" stroke-width="4" stroke-linecap="round"/>342    </svg>343    <span>MENU</span>344  </div>345 346  <!-- Gesture bar -->347  <div class="gesture"></div>348</div>349</body>350</html>