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", Arial, sans-serif; color: #222; }9  #render-target {10    width: 1080px; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12  }13 14  /* General */15  .screen { padding: 48px 54px 140px 54px; }16  .row { display: flex; align-items: center; }17  .spacer { height: 28px; }18 19  /* Header */20  .header { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }21  .header-left { display: flex; align-items: center; gap: 24px; }22  .title { font-size: 56px; font-weight: 800; letter-spacing: 0.3px; }23  .icon-btn { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }24  .icon { width: 48px; height: 48px; }25  .search { margin-right: 8px; }26 27  /* Section */28  .section-title { font-size: 44px; font-weight: 800; text-transform: uppercase; margin-top: 40px; }29  .underline { width: 180px; height: 8px; background: #3F6F3B; border-radius: 4px; margin: 14px 0 36px 0; }30 31  /* Veg icon */32  .veg { width: 36px; height: 36px; border: 3px solid #3F7D39; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }33  .veg-inner { width: 16px; height: 16px; background: #3F7D39; border-radius: 50%; }34 35  /* Item */36  .item { display: flex; gap: 40px; margin-bottom: 66px; }37  .item-left { flex: 1; min-width: 0; }38  .item-right { width: 360px; display: flex; flex-direction: column; align-items: center; }39  .name { font-size: 46px; font-weight: 700; margin-bottom: 8px; }40  .price { font-size: 42px; font-weight: 800; margin-bottom: 22px; }41  .badge-row { display: flex; align-items: center; gap: 14px; color: #5B5B5B; font-size: 34px; margin-bottom: 18px; }42  .badge-j { width: 44px; height: 44px; border-radius: 50%; background: #F3A533; color: #111; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }43  .desc { font-size: 34px; line-height: 1.35; color: #6F6F6F; }44 45  /* Image placeholder */46  .photo {47    width: 300px; height: 300px; background: #E0E0E0;48    border: 1px solid #BDBDBD; border-radius: 30px;49    display: flex; align-items: center; justify-content: center;50    color: #757575; text-align: center; box-shadow: 0 8px 18px rgba(0,0,0,0.12);51    margin-bottom: 22px;52  }53 54  /* Add button */55  .add-btn {56    width: 300px; height: 92px; border-radius: 18px;57    background: #EAF2E6; border: 2px solid #92A985;58    color: #2E6E34; font-size: 40px; font-weight: 800;59    display: flex; align-items: center; justify-content: center; gap: 14px;60    box-shadow: 0 4px 0 rgba(0,0,0,0.18);61  }62  .customizable { font-size: 28px; color: #777; margin-top: 12px; }63 64  .divider { height: 2px; background: #E8E8E8; margin: 50px 0 40px; }65 66  /* Floating MENU button */67  .menu-fab {68    position: absolute; left: 50%; transform: translateX(-50%);69    bottom: 210px; width: 420px; height: 120px; border-radius: 28px;70    background: #0B0B0B; color: #fff; display: flex; align-items: center; justify-content: center; gap: 22px;71    box-shadow: 0 14px 28px rgba(0,0,0,0.35);72    font-size: 40px; font-weight: 800;73  }74  .menu-fab svg { width: 54px; height: 54px; }75 76  /* Bottom safe area */77  .bottom-bar {78    position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: #000;79  }80  .home-indicator {81    position: absolute; bottom: 42px; left: 50%; transform: translateX(-50%);82    width: 280px; height: 10px; background: #FFFFFF; border-radius: 6px; opacity: 0.85;83  }84</style>85</head>86<body>87<div id="render-target">88  <div class="screen">89    <!-- Header -->90    <div class="header">91      <div class="header-left">92        <div class="icon-btn">93          <svg class="icon" viewBox="0 0 24 24">94            <path d="M14 5 L7 12 L14 19" stroke="#171717" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>95          </svg>96        </div>97        <div class="title">Pizza</div>98      </div>99      <div class="icon-btn search">100        <svg class="icon" viewBox="0 0 24 24">101          <circle cx="10" cy="10" r="6.5" stroke="#111" stroke-width="2.2" fill="none"/>102          <path d="M16 16 L22 22" stroke="#111" stroke-width="2.2" stroke-linecap="round"/>103        </svg>104      </div>105    </div>106 107    <!-- Section: SIMPLE -->108    <div class="section-title">SIMPLE</div>109    <div class="underline"></div>110 111    <!-- Item 1 -->112    <div class="item">113      <div class="item-left">114        <div class="veg"><div class="veg-inner"></div></div>115        <div class="name">Margherita Pizza</div>116        <div class="price">₹125</div>117        <div class="badge-row">118          <div class="badge-j">J</div>119          <div>Jain Available</div>120        </div>121        <div class="desc">Enjoy 100% Real Mozzarella Cheese Over A Zesty Gravy</div>122      </div>123      <div class="item-right">124        <div class="photo">[IMG: Margherita Pizza]</div>125        <div class="add-btn">126          <span>ADD</span>127          <svg viewBox="0 0 24 24">128            <path d="M12 5 L12 19 M5 12 L19 12" stroke="#2E6E34" stroke-width="2.4" stroke-linecap="round"/>129          </svg>130        </div>131        <div class="customizable">Customizable</div>132      </div>133    </div>134 135    <!-- Section: STYLISH -->136    <div class="section-title" style="margin-top: 10px;">STYLISH</div>137    <div class="underline"></div>138 139    <!-- Item 2 -->140    <div class="item">141      <div class="item-left">142        <div class="veg"><div class="veg-inner"></div></div>143        <div class="name">Mac O Mac</div>144        <div class="price">₹155</div>145        <div class="desc">Cheesey macaroni with storm of jalapeno dips & mozzarella cheddar cheese</div>146      </div>147      <div class="item-right">148        <div class="photo">[IMG: Mac O Mac Pizza]</div>149        <div class="add-btn">150          <span>ADD</span>151          <svg viewBox="0 0 24 24">152            <path d="M12 5 L12 19 M5 12 L19 12" stroke="#2E6E34" stroke-width="2.4" stroke-linecap="round"/>153          </svg>154        </div>155        <div class="customizable">Customizable</div>156      </div>157    </div>158 159    <div class="divider"></div>160 161    <!-- Item 3 -->162    <div class="item">163      <div class="item-left">164        <div class="veg"><div class="veg-inner"></div></div>165        <div class="name">Corn Wave</div>166        <div class="price">₹155</div>167        <div class="desc">Sweet & juicy golden corn with real mozzarella & cheddar cheese</div>168      </div>169      <div class="item-right">170        <div class="photo">[IMG: Corn Wave Pizza]</div>171        <div class="add-btn">172          <span>ADD</span>173          <svg viewBox="0 0 24 24">174            <path d="M12 5 L12 19 M5 12 L19 12" stroke="#2E6E34" stroke-width="2.4" stroke-linecap="round"/>175          </svg>176        </div>177        <div class="customizable">Customizable</div>178      </div>179    </div>180  </div>181 182  <!-- Floating MENU pill -->183  <div class="menu-fab">184    <svg viewBox="0 0 24 24">185      <path d="M6 4 L6 12 M8 4 L8 12 M6 8 L10 8" stroke="#fff" stroke-width="2" stroke-linecap="round"/>186      <path d="M16 4 L20 8 M16 20 L20 16" stroke="#fff" stroke-width="2" stroke-linecap="round"/>187    </svg>188    <div>MENU</div>189  </div>190 191  <!-- Bottom safe area -->192  <div class="bottom-bar"></div>193  <div class="home-indicator"></div>194</div>195</body>196</html>