GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Mexican Fiesta - Pizza UI</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #ffffff;14 color: #222;15 }16 17 /* Top image area */18 .hero {19 position: relative;20 width: 100%;21 height: 960px;22 overflow: hidden;23 }24 .hero .img {25 width: 100%;26 height: 100%;27 background: #E0E0E0;28 border-bottom: 1px solid #BDBDBD;29 display: flex;30 align-items: center;31 justify-content: center;32 color: #757575;33 font-size: 40px;34 letter-spacing: 0.5px;35 }36 .badge-new {37 position: absolute;38 left: 36px;39 top: 50px;40 background: #ffffff;41 color: #2e7d32;42 border: 2px solid #dfe6dd;43 border-radius: 28px;44 padding: 12px 22px;45 font-weight: 700;46 font-size: 36px;47 box-shadow: 0 2px 6px rgba(0,0,0,0.06);48 }49 .close {50 position: absolute;51 right: 36px;52 top: 46px;53 width: 76px;54 height: 76px;55 border-radius: 50%;56 background: #ffffff;57 box-shadow: 0 2px 6px rgba(0,0,0,0.1);58 display: flex;59 align-items: center;60 justify-content: center;61 border: 1px solid #d9d9d9;62 }63 .close svg { width: 40px; height: 40px; stroke: #222; stroke-width: 8; }64 65 /* Content */66 .content {67 padding: 48px;68 }69 .title {70 font-size: 72px;71 font-weight: 800;72 margin-bottom: 20px;73 letter-spacing: -0.5px;74 }75 .veg-row {76 display: flex;77 align-items: center;78 gap: 16px;79 font-size: 40px;80 color: #333;81 margin-bottom: 24px;82 }83 .veg-icon {84 width: 48px;85 height: 48px;86 border: 2px solid #2e7d32;87 border-radius: 8px;88 display: inline-flex;89 align-items: center;90 justify-content: center;91 }92 .veg-icon::before {93 content: "";94 width: 26px;95 height: 26px;96 background: #2e7d32;97 border-radius: 50%;98 display: block;99 }100 .desc {101 font-size: 40px;102 line-height: 56px;103 color: #444;104 }105 106 .section-title {107 font-size: 56px;108 font-weight: 800;109 margin: 54px 0 24px 0;110 }111 112 /* Size card options */113 .size-row {114 display: flex;115 gap: 30px;116 }117 .card {118 flex: 1;119 min-width: 0;120 border: 2px solid #e2e2e2;121 border-radius: 28px;122 padding: 32px;123 position: relative;124 background: #fff;125 }126 .card.selected {127 border-color: #2e7d32;128 box-shadow: 0 0 0 4px rgba(46,125,50,0.08) inset;129 }130 .card .check {131 position: absolute;132 right: 26px;133 top: 24px;134 width: 56px;135 height: 56px;136 border-radius: 50%;137 background: #2e7d32;138 display: flex;139 align-items: center;140 justify-content: center;141 }142 .card .check svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 6; }143 .card .title-sm {144 font-size: 46px;145 font-weight: 800;146 margin-bottom: 8px;147 }148 .card .subtitle {149 font-size: 34px;150 color: #666;151 }152 153 /* Crust option */154 .crust-card {155 border: 2px solid #2e7d32;156 border-radius: 28px;157 padding: 28px;158 display: flex;159 gap: 28px;160 align-items: center;161 position: relative;162 }163 .crust-card .check {164 position: absolute;165 right: 26px;166 top: 24px;167 width: 56px;168 height: 56px;169 border-radius: 50%;170 background: #2e7d32;171 display: flex;172 align-items: center;173 justify-content: center;174 }175 .crust-card .check svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 6; }176 .crust-icon {177 width: 140px;178 height: 140px;179 background: #E0E0E0;180 border: 1px solid #BDBDBD;181 border-radius: 26px;182 display: flex;183 align-items: center;184 justify-content: center;185 color: #757575;186 font-size: 28px;187 text-align: center;188 }189 .crust-text .crust-title {190 font-size: 48px;191 font-weight: 800;192 margin-bottom: 10px;193 color: #222;194 }195 .crust-text .crust-desc {196 font-size: 38px;197 line-height: 52px;198 color: #444;199 }200 201 /* Sticky footer with button */202 .cta-bar {203 position: absolute;204 left: 0;205 right: 0;206 bottom: 140px;207 padding: 24px 32px;208 background: rgba(255,255,255,0.96);209 box-shadow: 0 -6px 20px rgba(0,0,0,0.08);210 }211 .total {212 position: absolute;213 right: 48px;214 top: 36px;215 font-size: 44px;216 font-weight: 800;217 color: #222;218 }219 .cta-button {220 width: calc(100% - 64px);221 height: 140px;222 background: #2e7d32;223 border: none;224 border-radius: 26px;225 color: #fff;226 font-size: 56px;227 font-weight: 800;228 letter-spacing: 0.3px;229 display: block;230 margin: 0 auto;231 cursor: pointer;232 }233 234 /* Home indicator */235 .home-indicator {236 position: absolute;237 bottom: 40px;238 left: 50%;239 transform: translateX(-50%);240 width: 420px;241 height: 16px;242 background: #BDBDBD;243 border-radius: 10px;244 opacity: 0.7;245 }246</style>247</head>248<body>249<div id="render-target">250 <div class="hero">251 <div class="img">[IMG: Close-up of a sliced vegetable pizza]</div>252 <div class="badge-new">NEW</div>253 <div class="close" aria-label="Close">254 <svg viewBox="0 0 24 24">255 <line x1="4" y1="4" x2="20" y2="20"></line>256 <line x1="20" y1="4" x2="4" y2="20"></line>257 </svg>258 </div>259 </div>260 261 <div class="content">262 <div class="title">Mexican Fiesta</div>263 <div class="veg-row">264 <span class="veg-icon"></span>265 <span>Vegetarian</span>266 </div>267 <div class="desc">268 Flavourful mix of red capsicum, green capsicum, jalapeno, onion, black olives, sweet corn and 100% mozzarella Cheese with a signature spice sprinkle & our flavourful pan sauce.269 </div>270 271 <div class="section-title">Choose size</div>272 <div class="size-row">273 <div class="card selected">274 <div class="check">275 <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>276 </div>277 <div class="title-sm">Medium</div>278 <div class="subtitle">Serves 2</div>279 </div>280 <div class="card">281 <div class="title-sm">Personal</div>282 <div class="subtitle">Serves 1</div>283 </div>284 </div>285 286 <div class="section-title">Choose crust</div>287 <div class="crust-card">288 <div class="check">289 <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>290 </div>291 <div class="crust-icon">[IMG: Crust icon]</div>292 <div class="crust-text">293 <div class="crust-title">Pan</div>294 <div class="crust-desc">295 Original Pan crust. Crunchy on the outside, soft & fluffy on the inside.296 </div>297 </div>298 </div>299 </div>300 301 <div class="cta-bar">302 <div class="total">Total: ₹539</div>303 <button class="cta-button">Add to Cart</button>304 </div>305 306 <div class="home-indicator"></div>307</div>308</body>309</html>