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>Cheezy Mushroom Magic</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #212121; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #ffffff;15  }16 17  /* Top banner */18  .banner {19    position: relative;20    width: 100%;21    height: 720px;22    overflow: hidden;23  }24  .banner .img {25    position: absolute;26    left: 0; top: 0;27    width: 100%; height: 100%;28    background: #E0E0E0;29    border-bottom: 1px solid #BDBDBD;30    display: flex; align-items: center; justify-content: center;31    color: #757575; font-size: 34px;32  }33  .badge-new {34    position: absolute;35    left: 40px; top: 290px;36    background: #ffffff;37    color: #212121;38    font-weight: 600;39    font-size: 32px;40    padding: 12px 22px;41    border-radius: 12px;42    box-shadow: 0 1px 0 rgba(0,0,0,0.04);43  }44  .close-round {45    position: absolute;46    right: 34px; top: 24px;47    width: 84px; height: 84px;48    border-radius: 42px;49    background: #ffffff;50    box-shadow: 0 4px 12px rgba(0,0,0,0.15);51    display: flex; align-items: center; justify-content: center;52  }53  .close-round svg { width: 44px; height: 44px; }54 55  /* Content */56  .content {57    padding: 56px 60px 40px 60px;58  }59  .title {60    font-size: 64px; font-weight: 800; line-height: 76px; margin: 12px 0 26px 0;61  }62  .veg-row {63    display: flex; align-items: center; gap: 18px;64    font-size: 40px; font-weight: 600; margin-bottom: 30px;65  }66  .veg-icon {67    width: 40px; height: 40px; border-radius: 8px; background: #2e7d32; position: relative;68  }69  .veg-icon::after {70    content: "";71    position: absolute; left: 50%; top: 50%;72    width: 22px; height: 22px; border-radius: 50%;73    transform: translate(-50%, -50%);74    background: #ffffff;75  }76  .desc {77    font-size: 38px; line-height: 56px; color: #424242;78  }79 80  /* Options area */81  .options-area {82    background: #F3F5F7;83    margin-top: 40px;84    padding: 60px;85    border-top: 1px solid #E0E0E0;86  }87  .section-title {88    font-size: 56px; font-weight: 800; margin-bottom: 36px;89  }90  .cards { display: flex; gap: 36px; }91  .card {92    flex: 1;93    min-width: 0;94    background: #ffffff;95    border-radius: 24px;96    padding: 36px;97    box-shadow: 0 6px 18px rgba(0,0,0,0.08);98    position: relative;99  }100  .card.selected {101    border: 4px solid #2e7d32;102    box-shadow: none;103  }104  .card .label {105    font-size: 48px; font-weight: 800; margin-bottom: 14px;106  }107  .card .sub {108    font-size: 34px; color: #616161;109  }110  .check-icon {111    position: absolute; right: 26px; top: 26px;112    width: 56px; height: 56px;113  }114  /* Crust card */115  .crust-card {116    margin-top: 40px;117    border-radius: 24px;118    background: #ffffff;119    border: 4px solid #2e7d32;120    padding: 28px 36px;121    position: relative;122    display: flex; align-items: center; gap: 28px;123  }124  .crust-thumb {125    width: 120px; height: 120px; border-radius: 60px;126    background: #E0E0E0; border: 1px solid #BDBDBD;127    display: flex; align-items: center; justify-content: center;128    color: #757575; font-size: 24px; text-align: center;129  }130  .crust-text .name { font-size: 46px; font-weight: 800; margin-bottom: 8px; }131  .crust-text .desc { font-size: 34px; color: #616161; line-height: 48px; }132  .crust-check { position: absolute; right: 26px; top: 26px; width: 56px; height: 56px; }133 134  /* Bottom bar */135  .bottom-bar {136    position: absolute; left: 0; bottom: 0;137    width: 100%; height: 240px; background: #ffffff;138    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);139    padding: 26px 40px 34px 40px;140  }141  .total {142    font-size: 42px; font-weight: 700; color: #212121; text-align: right; margin-bottom: 24px;143  }144  .cta {145    width: 100%;146    height: 120px; border-radius: 18px; background: #2e7d32;147    color: #ffffff; font-size: 44px; font-weight: 800;148    display: flex; align-items: center; justify-content: center;149  }150  .gesture-bar {151    position: absolute; bottom: 16px; left: 50%;152    transform: translateX(-50%);153    width: 240px; height: 10px; border-radius: 6px; background: #9E9E9E;154    opacity: 0.35;155  }156</style>157</head>158<body>159<div id="render-target">160 161  <!-- Top image banner -->162  <div class="banner">163    <div class="img">[IMG: Cheezy Mushroom Pizza Close-up]</div>164    <div class="badge-new">NEW</div>165    <div class="close-round" aria-label="Close">166      <svg viewBox="0 0 24 24">167        <circle cx="12" cy="12" r="11" fill="none" stroke="#000" stroke-width="1.6"></circle>168        <path d="M6 6 L18 18 M18 6 L6 18" stroke="#000" stroke-width="2.2" stroke-linecap="round"></path>169      </svg>170    </div>171  </div>172 173  <!-- Text content -->174  <div class="content">175    <div class="title">Cheezy Mushroom Magic</div>176    <div class="veg-row">177      <div class="veg-icon" aria-hidden="true"></div>178      <div>Vegetarian</div>179    </div>180    <div class="desc">181      A new combination with creamy mushroom sauce, chunky black olives, spicy jalapeno,182      juicy sweet corn, mushroom and 100% mozzarella cheese with garlic sprinkle for extra flavour hit.183    </div>184  </div>185 186  <!-- Options area -->187  <div class="options-area">188    <div class="section-title">Choose size</div>189    <div class="cards">190      <div class="card selected">191        <div class="label">Medium</div>192        <div class="sub">Serves 2</div>193        <svg class="check-icon" viewBox="0 0 24 24">194          <circle cx="12" cy="12" r="11" fill="#2e7d32"></circle>195          <path d="M6 12 l4 4 l8 -8" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>196        </svg>197      </div>198      <div class="card">199        <div class="label">Personal</div>200        <div class="sub">Serves 1</div>201      </div>202    </div>203 204    <div class="section-title" style="margin-top: 56px;">Choose crust</div>205    <div class="crust-card">206      <div class="crust-thumb">[IMG: Crust]</div>207      <div class="crust-text">208        <div class="name">Pan</div>209        <div class="desc">Original Pan crust. Crunchy on the outside, soft & fluffy on the inside.</div>210      </div>211      <svg class="crust-check" viewBox="0 0 24 24">212        <circle cx="12" cy="12" r="11" fill="#2e7d32"></circle>213        <path d="M6 12 l4 4 l8 -8" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>214      </svg>215    </div>216 217    <!-- Spacer so content isn't hidden behind bottom bar -->218    <div style="height: 260px;"></div>219  </div>220 221  <!-- Bottom bar CTA -->222  <div class="bottom-bar">223    <div class="total">Total: ₹539</div>224    <div class="cta">Add to Cart</div>225    <div class="gesture-bar"></div>226  </div>227 228</div>229</body>230</html>