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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #333; }9  #render-target { width: 1080px; height: 2400px; position: relative; overflow: hidden; background: #ffffff; }10 11  .content { padding: 40px 48px; }12 13  /* Top status bar (mock) */14  .statusbar { height: 72px; display: flex; align-items: center; justify-content: space-between; color: #666; font-size: 28px; }15  .status-icons { display: flex; gap: 18px; align-items: center; }16 17  /* Header */18  .header { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; }19  .hdr-left { display: flex; align-items: center; gap: 24px; }20  .title { font-size: 58px; font-weight: 700; letter-spacing: 0.2px; }21  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 32px; }22  .icon { width: 40px; height: 40px; }23  .search-wrap { margin-right: 8px; }24 25  /* Top featured item area */26  .featured { margin-top: 30px; display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }27  .price { font-size: 44px; font-weight: 700; margin-bottom: 22px; }28  .muted { color: #777; font-size: 32px; line-height: 1.45; }29  .feat-right { display: flex; flex-direction: column; align-items: flex-end; }30  .img-circle { width: 360px; height: 360px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px; text-align: center; }31  .add-btn { margin-top: 18px; width: 360px; height: 100px; background: #eaf3e6; border: 2px solid #9fb49b; border-radius: 22px; color: #2e7d32; font-weight: 700; font-size: 42px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 rgba(0,0,0,0.08); }32  .customizable { font-size: 28px; color: #666; margin-top: 10px; }33 34  /* Section heading */35  .section-title { margin-top: 40px; font-size: 46px; font-weight: 800; letter-spacing: 1px; }36  .underline { width: 220px; height: 8px; background: #386e3a; border-radius: 4px; margin-top: 18px; }37 38  /* List items */39  .item { margin-top: 50px; padding-top: 18px; }40  .row { display: flex; align-items: center; gap: 18px; }41  .veg-icon { width: 40px; height: 40px; border: 3px solid #2f8b3a; border-radius: 10px; }42  .pill { background: #ff6f61; color: #fff; font-size: 28px; padding: 8px 18px; border-radius: 20px; font-weight: 700; }43  .item-layout { display: grid; grid-template-columns: 1fr 440px; gap: 28px; align-items: start; }44  .item-title { font-size: 44px; font-weight: 800; line-height: 1.2; margin-top: 16px; }45  .item-price { font-size: 40px; font-weight: 800; margin-top: 10px; }46  .badge-row { display: flex; align-items: center; gap: 14px; margin-top: 14px; color: #666; font-size: 30px; }47  .jain-badge { width: 40px; height: 40px; border-radius: 20px; background: #ffc74f; display: flex; align-items: center; justify-content: center; color: #222; font-weight: 800; }48  .item-desc { margin-top: 12px; color: #666; font-size: 32px; line-height: 1.5; }49  .right-col { display: flex; flex-direction: column; align-items: flex-end; }50  .divider { margin: 36px 0 12px; height: 2px; background: #eee; }51 52  /* Floating MENU button */53  .menu-fab { position: absolute; bottom: 260px; left: 430px; background: #000; color: #fff; padding: 22px 34px; border-radius: 24px; display: flex; align-items: center; gap: 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.25); font-size: 34px; font-weight: 700; }54  .menu-icon { width: 40px; height: 40px; }55 56  /* Bottom gesture bar */57  .gesture-bar { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 300px; height: 10px; background: #ddd; border-radius: 6px; }58</style>59</head>60<body>61<div id="render-target">62  <div class="content">63    <!-- Status bar mock -->64    <div class="statusbar">65      <div>2:03</div>66      <div class="status-icons">67        <span>◯</span>68        <span>⌁</span>69        <span>•</span>70      </div>71    </div>72 73    <!-- Header -->74    <div class="header">75      <div class="hdr-left">76        <div class="icon-btn">77          <svg class="icon" viewBox="0 0 24 24">78            <path d="M14 6l-6 6 6 6" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>79          </svg>80        </div>81        <div class="title">Pizza</div>82      </div>83      <div class="search-wrap icon-btn">84        <svg class="icon" viewBox="0 0 24 24">85          <circle cx="10" cy="10" r="6" fill="none" stroke="#333" stroke-width="2"/>86          <path d="M15 15l5 5" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>87        </svg>88      </div>89    </div>90 91    <!-- Featured brief with image and Add -->92    <div class="featured">93      <div>94        <div class="price">₹155</div>95        <div class="muted">crispy onion with real mozzarella & cheddar cheese</div>96      </div>97      <div class="feat-right">98        <div class="img-circle">[IMG: Pizza]</div>99        <div class="add-btn">ADD +</div>100        <div class="customizable">Customizable</div>101      </div>102    </div>103 104    <!-- Section -->105    <div class="section-title">SIMPLY VEG</div>106    <div class="underline"></div>107 108    <!-- Item 1 -->109    <div class="item">110      <div class="row">111        <div class="veg-icon"></div>112        <div class="pill">Bestseller</div>113      </div>114      <div class="item-layout">115        <div>116          <div class="item-title">Double Cheese Margheritra Pizza</div>117          <div class="item-price">₹175</div>118          <div class="badge-row">119            <div class="jain-badge">J</div>120            <div>Jain Available</div>121          </div>122          <div class="item-desc">Extra Loaded 100% Real Mozzarella Cheese Over A Zesty Tomato Gravy</div>123        </div>124        <div class="right-col">125          <div class="img-circle" style="width: 300px; height: 300px;">[IMG: Pizza]</div>126          <div class="add-btn" style="width: 300px; height: 94px;">ADD +</div>127          <div class="customizable">Customizable</div>128        </div>129      </div>130      <div class="divider"></div>131    </div>132 133    <!-- Item 2 -->134    <div class="item">135      <div class="row">136        <div class="veg-icon"></div>137      </div>138      <div class="item-layout">139        <div>140          <div class="item-title">Fresh Delight Pizza</div>141          <div class="item-price">₹175</div>142          <div class="item-desc">Loaded With Crips Green Peppers, Fresh Cut Onion, Juicy Tomatoes With 100% Mozzarella And Cheddar Cheese</div>143        </div>144        <div class="right-col">145          <div class="img-circle" style="width: 300px; height: 300px;">[IMG: Pizza]</div>146          <div class="add-btn" style="width: 300px; height: 94px;">ADD +</div>147          <div class="customizable">Customizable</div>148        </div>149      </div>150      <div class="divider"></div>151    </div>152 153    <!-- Item 3 -->154    <div class="item">155      <div class="row">156        <div class="veg-icon"></div>157      </div>158      <div class="item-layout">159        <div>160          <div class="item-title">Indian Bite Pizza</div>161          <div class="item-price">₹175</div>162          <div class="item-desc">Fresh Juice Sweet Corn, Onion, Mushroom With 100% Real Mozzarella And Cheddar Cheese</div>163        </div>164        <div class="right-col">165          <div class="img-circle" style="width: 300px; height: 300px;">[IMG: Pizza]</div>166          <div class="add-btn" style="width: 300px; height: 94px;">ADD +</div>167          <div class="customizable">Customizable</div>168        </div>169      </div>170    </div>171  </div>172 173  <!-- Floating MENU button -->174  <div class="menu-fab">175    <svg class="menu-icon" viewBox="0 0 24 24">176      <path d="M4 4l6 6M10 4L4 10" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>177      <path d="M16 4v10M20 4v10" stroke="#fff" stroke-width="2" stroke-linecap="round" fill="none"/>178    </svg>179    <span>MENU</span>180  </div>181 182  <!-- Gesture bar -->183  <div class="gesture-bar"></div>184</div>185</body>186</html>