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 Detail</title>7<style>8  body { margin:0; padding:0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color:#222; }9  #render-target {10    width:1080px; height:2400px; position:relative; overflow:hidden;11    background:#ffffff;12  }13 14  /* Status bar */15  .status-bar {16    height:120px; padding:0 36px; display:flex; align-items:center; justify-content:space-between;17    color:#555; font-weight:600; font-size:40px;18  }19  .status-icons { display:flex; gap:22px; align-items:center; }20  .dot { width:10px; height:10px; background:#777; border-radius:50%; display:inline-block; margin-left:10px; }21 22  /* Hero image */23  .hero {24    position:relative;25    height:720px;26  }27  .hero .img {28    position:absolute; inset:0 0 0 0;29    background:#E0E0E0; border:1px solid #BDBDBD;30    display:flex; align-items:center; justify-content:center; color:#757575; font-size:42px; text-align:center; padding:20px;31  }32  .back-btn {33    position:absolute; left:36px; top:42px;34    width:96px; height:96px; border-radius:50%;35    background:#ffffff; box-shadow:0 8px 24px rgba(0,0,0,0.15);36    display:flex; align-items:center; justify-content:center;37  }38  .back-btn svg { width:44px; height:44px; fill:#333; }39 40  /* Content sheet */41  .sheet {42    position:relative;43    margin-top:660px;  /* pull up over the image */44    background:#fff; border-top-left-radius:48px; border-top-right-radius:48px;45    box-shadow:0 -4px 24px rgba(0,0,0,0.08);46    padding:56px 56px 260px 56px; /* bottom space for CTA */47  }48 49  .title { font-size:64px; font-weight:800; margin:0 0 24px 0; color:#222; }50  .desc { font-size:38px; line-height:1.5; color:#666; margin-bottom:40px; }51  .price-row { display:flex; align-items:flex-end; gap:28px; margin:8px 0 28px 0; }52  .price {53    color:#d32f2f; font-size:96px; font-weight:800; letter-spacing:1px;54  }55  .old-price {56    color:#9e9e9e; font-size:46px; text-decoration:line-through; margin-bottom:14px;57  }58 59  /* Options list */60  .options { border-top:1px solid #e0e0e0; margin-top:18px; }61  .option {62    display:flex; align-items:center; justify-content:space-between;63    padding:34px 0; border-bottom:1px solid #eee;64    font-size:44px;65  }66  .opt-left { display:flex; align-items:center; gap:26px; color:#333; }67  .radio {68    width:52px; height:52px; border-radius:50%; border:6px solid #d32f2f; display:inline-flex; align-items:center; justify-content:center;69  }70  .radio .dot { width:26px; height:26px; background:#d32f2f; border-radius:50%; }71  .radio.outline .dot { display:none; }72  .opt-right { display:flex; align-items:center; gap:22px; }73  .old-small { color:#9e9e9e; text-decoration:line-through; font-size:40px; }74  .new-small { color:#222; font-weight:700; font-size:40px; }75 76  /* Sides card */77  .sides-card {78    margin:44px 0 0 0; border:2px solid #e3e3e3; border-radius:24px; overflow:hidden;79  }80  .sides-head {81    background:#fafafa; padding:28px 32px; border-bottom:1px solid #eee;82    font-size:44px; font-weight:800; color:#333;83  }84  .optional { color:#9e9e9e; font-weight:700; font-size:38px; margin-left:12px; }85  .side-item {86    display:flex; align-items:center; justify-content:space-between;87    padding:30px 32px; border-bottom:1px solid #eee; font-size:42px;88  }89  .side-left { display:flex; align-items:center; gap:26px; color:#444; }90  .checkbox {91    width:52px; height:52px; border-radius:8px; border:6px solid #d32f2f; background:#fff;92  }93  .side-price { color:#444; font-weight:700; }94 95  /* CTA button */96  .cta-wrap {97    position:absolute; left:0; right:0; bottom:110px; display:flex; justify-content:center; pointer-events:none;98  }99  .cta {100    pointer-events:auto;101    width:920px; height:140px; background:#d32f2f; color:#fff; border-radius:28px;102    display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:800; box-shadow:0 10px 20px rgba(211,47,47,0.35);103  }104 105  /* Bottom gesture / nav bar */106  .os-bar {107    position:absolute; left:0; right:0; bottom:0; height:110px; background:#000;108    display:flex; align-items:center; justify-content:center;109  }110  .gesture {111    width:200px; height:12px; background:#e8e8e8; border-radius:8px;112  }113</style>114</head>115<body>116<div id="render-target">117 118  <div class="status-bar">119    <div>8:47</div>120    <div class="status-icons">121      <span>• • • •</span>122      <span class="dot"></span>123    </div>124  </div>125 126  <div class="hero">127    <div class="img">[IMG: Chicken pizza on pan, top view]</div>128    <div class="back-btn" aria-label="Back">129      <svg viewBox="0 0 24 24">130        <path d="M15.5 19.5L8 12l7.5-7.5-1.4-1.4L5.2 12l8.9 8.9 1.4-1.4z"/>131      </svg>132    </div>133  </div>134 135  <div class="sheet">136    <h1 class="title">Miami Beast</h1>137    <div class="desc">Made in Garlic Mayo sauce ,Chicken Fajita ,Green Pepper, Green Jalapeno ,Onions & Cheese</div>138 139    <div class="price-row">140      <div class="price">Rs. 547</div>141      <div class="old-price">Rs. 749</div>142    </div>143 144    <div class="options">145      <div class="option">146        <div class="opt-left">147          <span class="radio"><span class="dot"></span></span>148          <span>Small Pizza</span>149        </div>150        <div class="opt-right">151          <span class="old-small">Rs. 749</span>152          <span class="new-small">Rs. 547</span>153        </div>154      </div>155 156      <div class="option">157        <div class="opt-left">158          <span class="radio outline"><span class="dot"></span></span>159          <span>Regular Pizza</span>160        </div>161        <div class="opt-right">162          <span class="old-small">Rs. 1799</span>163          <span class="new-small">Rs. 1169</span>164        </div>165      </div>166 167      <div class="option">168        <div class="opt-left">169          <span class="radio outline"><span class="dot"></span></span>170          <span>Large Pizza</span>171        </div>172        <div class="opt-right">173          <span class="old-small">Rs. 2499</span>174          <span class="new-small">Rs. 1749</span>175        </div>176      </div>177 178      <div class="option">179        <div class="opt-left">180          <span class="radio outline"><span class="dot"></span></span>181          <span>Jumbo Pizza</span>182        </div>183        <div class="opt-right">184          <span class="old-small">Rs. 3599</span>185          <span class="new-small">Rs. 2699</span>186        </div>187      </div>188    </div>189 190    <div class="sides-card">191      <div class="sides-head">192        Choose your sides <span class="optional">(optional)</span>193      </div>194 195      <div class="side-item">196        <div class="side-left">197          <span class="checkbox"></span>198          <span>9 pc hotshots</span>199        </div>200        <div class="side-price">Rs. 499</div>201      </div>202 203      <div class="side-item">204        <div class="side-left">205          <span class="checkbox"></span>206          <span>Wrap 6 inch</span>207        </div>208        <div class="side-price">Rs. 399</div>209      </div>210 211      <div class="side-item">212        <div class="side-left">213          <span class="checkbox"></span>214          <span>2 pc garlic bread</span>215        </div>216        <div class="side-price">Rs. 249</div>217      </div>218 219      <div class="side-item">220        <div class="side-left">221          <span class="checkbox"></span>222          <span>Spicy fries</span>223        </div>224        <div class="side-price">Rs. 299</div>225      </div>226    </div>227  </div>228 229  <div class="cta-wrap">230    <div class="cta">Add to Cart - Rs. 547</div>231  </div>232 233  <div class="os-bar"><div class="gesture"></div></div>234 235</div>236</body>237</html>