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">6<title>Pizza Menu</title>7<style>8  body{margin:0;padding:0;background:transparent;font-family: Arial, Helvetica, sans-serif;color:#222;}9  #render-target{10    width:1080px;height:2400px;position:relative;overflow:hidden;background:#ffffff;11  }12 13  /* Generic */14  .row{display:flex;align-items:center;}15  .spacer{flex:1}16  .muted{color:#757575}17  .divider{height:1px;background:#e5e5e5;margin:24px 24px 0 24px}18  .chip{19    display:inline-block;background:#d84343;color:#fff;font-weight:600;20    padding:10px 18px;border-radius:10px;font-size:30px;21  }22  .strike{color:#9e9e9e;text-decoration:line-through}23  .thumb{24    width:200px;height:200px;border-radius:26px;background:#E0E0E0;border:1px solid #BDBDBD;25    display:flex;align-items:center;justify-content:center;color:#757575;font-size:26px;text-align:center;26  }27  .section-title{font-size:54px;font-weight:700;margin:36px 24px 8px 24px}28 29  /* Top status area */30  .status-bar{height:86px;padding:0 24px;display:flex;align-items:center;color:#777;font-size:30px}31  .main-header{padding:24px;display:flex;align-items:center;gap:20px}32  .loc{display:flex;align-items:flex-start;gap:14px}33  .loc .city{font-size:38px;font-weight:600}34  .loc .change{font-size:28px;color:#8a8a8a;margin-top:6px}35  .brand{font-size:44px;font-weight:800;color:#e53935}36  .brand small{color:#4CAF50;font-weight:700}37  .search{38    margin-left:auto;background:#f1f1f1;border-radius:50px;padding:18px 26px;width:420px;height:80px;39    display:flex;align-items:center;gap:16px;color:#888;border:1px solid #ddd;40  }41  .search input{border:none;background:transparent;outline:none;font-size:32px;width:100%;color:#444}42 43  /* Promo bar */44  .promo{height:86px;background:#ffea00;display:flex;align-items:center;gap:18px;padding:0 24px;font-weight:700}45  .promo svg{flex:0 0 36px}46 47  /* Category tabs */48  .tabs{display:flex;gap:6px;background:#3E7D21;color:#fff;padding:0 12px;height:92px;align-items:flex-end}49  .tab{padding:26px 28px 22px 28px;font-size:34px;border-radius:8px}50  .tab.active{background:#d73737}51 52  /* Subcategory strip */53  .subtabs{display:flex;gap:28px;background:#fff;height:96px;align-items:center;border-bottom:1px solid #eee}54  .subtab{padding:0 28px 24px 28px;font-weight:700;font-size:34px;color:#333}55  .subtab.active{color:#d73737;border-bottom:6px solid #e84a4a}56 57  /* Product list */58  .product{padding:24px;display:flex;gap:20px;align-items:flex-start}59  .product .content{flex:1}60  .product .title{font-size:42px;font-weight:700;margin:18px 0 10px 0}61  .product .desc{color:#777;font-size:32px;line-height:1.35}62  .price-row{margin-top:18px;font-size:34px;display:flex;gap:16px;align-items:center}63  .product + .product{border-top:1px solid #eee}64 65  /* Floating cart bar */66  .cart-bar{67    position:absolute;left:40px;right:40px;bottom:220px;height:120px;background:#cf3a34;68    color:#fff;border-radius:26px;display:flex;align-items:center;justify-content:center;69    box-shadow:0 6px 16px rgba(0,0,0,0.25);font-size:40px;font-weight:70070  }71  .cart-badge{72    position:absolute;left:24px;width:96px;height:96px;border-radius:50%;background:#b42f2a;73    display:flex;align-items:center;justify-content:center;border:4px solid #ffffff80;font-weight:70074  }75  .cart-arrow{position:absolute;right:30px}76  .cart-arrow svg{width:44px;height:44px;fill:#fff}77 78  /* Bottom nav */79  .bottom-nav{80    position:absolute;left:0;right:0;bottom:40px;height:120px;background:#fff;border-top:1px solid #e6e6e6;81    display:flex;align-items:center;justify-content:space-around;color:#88882  }83  .bottom-item{display:flex;flex-direction:column;align-items:center;font-size:26px}84  .bottom-item.active{color:#cf3a34}85  .bottom-item svg{width:48px;height:48px;fill:currentColor}86 87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status Bar Placeholder -->93  <div class="status-bar">94    <div>8:49</div>95    <div class="spacer"></div>96    <div>• • • •</div>97  </div>98 99  <!-- Header -->100  <div class="main-header">101    <div class="loc">102      <svg width="40" height="40" viewBox="0 0 24 24" fill="#757575"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>103      <div>104        <div class="city">Hyderabad</div>105        <div class="change">Change City</div>106      </div>107    </div>108 109    <div class="spacer"></div>110 111    <div class="brand">California <small>PIZZA</small></div>112 113    <div class="spacer"></div>114 115    <div class="search">116      <svg width="36" height="36" viewBox="0 0 24 24" fill="#777"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>117      <input type="text" placeholder="Search"/>118    </div>119  </div>120 121  <!-- Promo -->122  <div class="promo">123    <svg viewBox="0 0 24 24"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>124    <div>Get free Pizza on your first order. Use promo freepizza</div>125  </div>126 127  <!-- Category Tabs -->128  <div class="tabs">129    <div class="tab">Crusts</div>130    <div class="tab">Deals</div>131    <div class="tab active">Pizzas</div>132    <div class="tab">Sides</div>133    <div class="tab">Desserts</div>134    <div class="tab">Drinks</div>135    <div class="tab">Crazy</div>136    <div class="spacer"></div>137  </div>138 139  <!-- Sub category -->140  <div class="subtabs">141    <div class="subtab active">OVERLOAD MEATY PIZZA</div>142    <div class="subtab">OVERLOAD CHEESY PIZZA</div>143    <div class="subtab">CHEESY DELUXE</div>144  </div>145 146  <!-- Section title -->147  <div class="section-title">OVERLOAD MEATY PIZZA</div>148 149  <!-- Product 1 -->150  <div class="product">151    <div class="content">152      <div class="chip">27% off</div>153      <div class="title">Arizona Cream</div>154      <div class="desc">Made in Creamy Sauce, Chicken Tikka, Onion, Cheese</div>155      <div class="price-row">156        <span>from</span>157        <span class="strike">Rs. 749</span>158        <span>547</span>159      </div>160    </div>161    <div class="thumb">[IMG: Pizza Thumbnail]</div>162  </div>163 164  <!-- Product 2 -->165  <div class="product">166    <div class="content">167      <div class="chip">27% off</div>168      <div class="title">Mexican Treat</div>169      <div class="desc">Made in Garlic Mayo sauce, Chicken Tikka, Onion and Cheese</div>170      <div class="price-row">171        <span>from</span>172        <span class="strike">Rs. 749</span>173        <span>547</span>174      </div>175    </div>176    <div class="thumb">[IMG: Pizza Thumbnail]</div>177  </div>178 179  <!-- Product 3 -->180  <div class="product">181    <div class="content">182      <div class="chip">27% off</div>183      <div class="title">Miami Beast</div>184      <div class="desc">Made in Garlic Mayo sauce, Chicken Fajita, Green Pepper, Green Jalapeno, Onions</div>185      <div class="price-row">186        <span>from</span>187        <span class="strike">Rs. 749</span>188        <span>547</span>189      </div>190    </div>191    <div class="thumb">[IMG: Pizza Thumbnail]</div>192  </div>193 194  <!-- Divider -->195  <div class="divider"></div>196 197  <!-- Product 4 -->198  <div class="product">199    <div class="content">200      <div class="chip">27% off</div>201      <div class="title">Chicago Bulls</div>202      <div class="desc">Made in Garlic Mayo sauce, Chicken Tikka, Onion, Cheese</div>203      <div class="price-row">204        <span>from</span>205        <span class="strike">Rs. 749</span>206        <span>547</span>207      </div>208    </div>209    <div class="thumb">[IMG: Pizza Thumbnail]</div>210  </div>211 212  <!-- Floating cart bar -->213  <div class="cart-bar">214    <div class="cart-badge">1</div>215    <div>View your Cart</div>216    <div class="cart-arrow">217      <svg viewBox="0 0 24 24"><path d="M12 4l1.41 1.41L8.83 10H20v2H8.83l4.58 4.59L12 18l-8-8 8-8z"/></svg>218    </div>219  </div>220 221  <!-- Bottom nav -->222  <div class="bottom-nav">223    <div class="bottom-item">224      <svg viewBox="0 0 24 24"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>225    </div>226    <div class="bottom-item active">227      <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>228    </div>229    <div class="bottom-item">230      <svg viewBox="0 0 24 24"><path d="M12 6V3L8 7l4 4V8c2.76 0 5 2.24 5 5a5 5 0 0 1-8.66 3.54l-1.42 1.42A7 7 0 0 0 19 13c0-3.87-3.13-7-7-7z"/></svg>231    </div>232  </div>233 234</div>235</body>236</html>