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>Add or remove toppings</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, Helvetica, 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 /* Header */18 .header {19 height: 180px;20 padding: 40px 40px 0 40px;21 box-sizing: border-box;22 }23 .header-row {24 display: flex;25 align-items: center;26 gap: 30px;27 }28 .back-btn {29 width: 80px;30 height: 80px;31 border-radius: 40px;32 display: flex;33 align-items: center;34 justify-content: center;35 }36 .back-btn svg { width: 44px; height: 44px; }37 .title {38 font-size: 62px;39 font-weight: 700;40 letter-spacing: 0.5px;41 }42 43 /* Content */44 .content {45 padding: 20px 40px 260px 40px; /* leave space for bottom sheet */46 box-sizing: border-box;47 }48 .section-title {49 font-size: 56px;50 font-weight: 800;51 margin-top: 24px;52 margin-bottom: 10px;53 }54 55 .card {56 border-radius: 22px;57 }58 59 .row {60 display: flex;61 align-items: center;62 justify-content: space-between;63 height: 150px;64 border-bottom: 1px solid #eee;65 }66 .row:last-child { border-bottom: none; }67 68 .left {69 display: flex;70 align-items: center;71 gap: 28px;72 font-size: 50px;73 }74 .emoji {75 font-size: 64px;76 width: 80px;77 text-align: center;78 }79 .name {80 font-size: 52px;81 font-weight: 600;82 }83 84 .right {85 display: flex;86 align-items: center;87 gap: 26px;88 }89 .price {90 font-size: 48px;91 color: #333;92 }93 .circle-btn {94 width: 110px;95 height: 110px;96 border-radius: 55px;97 border: 6px solid #2f8f3b;98 color: #2f8f3b;99 display: flex;100 align-items: center;101 justify-content: center;102 font-size: 72px;103 line-height: 1;104 background: #fff;105 box-sizing: border-box;106 }107 .count {108 font-size: 52px;109 color: #333;110 width: 32px;111 text-align: center;112 }113 114 /* Bottom sheet */115 .bottom-sheet {116 position: absolute;117 left: 0;118 right: 0;119 bottom: 0;120 background: #ffffff;121 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);122 padding: 24px 40px 40px 40px;123 box-sizing: border-box;124 }125 .summary {126 font-size: 48px;127 color: #0b6f2c;128 margin-bottom: 24px;129 display: flex;130 align-items: center;131 justify-content: space-between;132 }133 .summary .price {134 font-size: 48px;135 font-weight: 700;136 color: #222;137 }138 139 .save-btn {140 height: 120px;141 background: #2f8f3b;142 color: #fff;143 border-radius: 18px;144 font-size: 54px;145 font-weight: 700;146 display: flex;147 align-items: center;148 justify-content: center;149 }150 151 /* Small safe-area indicator bar */152 .drag-indicator {153 position: absolute;154 left: 50%;155 transform: translateX(-50%);156 bottom: 20px;157 width: 500px;158 height: 14px;159 border-radius: 8px;160 background: #cfcfcf;161 }162</style>163</head>164<body>165<div id="render-target">166 167 <!-- Header -->168 <div class="header">169 <div class="header-row">170 <div class="back-btn">171 <svg viewBox="0 0 24 24" fill="#222">172 <path d="M15.5 4.5L7 12l8.5 7.5-1.6 1.8L3.5 12l10.4-9.3 1.6 1.8z"/>173 </svg>174 </div>175 <div class="title">Add or remove toppings</div>176 </div>177 </div>178 179 <!-- Content -->180 <div class="content">181 <div class="section-title">Default</div>182 <div class="card">183 <div class="row">184 <div class="left">185 <div class="emoji">🌽</div>186 <div class="name">Sweet Corn</div>187 </div>188 <div class="right">189 <div class="circle-btn">−</div>190 <div class="count">1</div>191 <div class="circle-btn">+</div>192 </div>193 </div>194 </div>195 196 <div class="section-title" style="margin-top:40px;">Extras</div>197 198 <div class="card">199 <div class="row">200 <div class="left">201 <div class="emoji">🫒</div>202 <div class="name">Black Olives</div>203 </div>204 <div class="right">205 <div class="price">₹65</div>206 <div class="circle-btn">+</div>207 </div>208 </div>209 210 <div class="row">211 <div class="left">212 <div class="emoji">🧀</div>213 <div class="name">Cheese</div>214 </div>215 <div class="right">216 <div class="price">₹80</div>217 <div class="circle-btn">+</div>218 </div>219 </div>220 221 <div class="row">222 <div class="left">223 <div class="emoji">🌶️</div>224 <div class="name">Green Capsicum</div>225 </div>226 <div class="right">227 <div class="price">₹65</div>228 <div class="circle-btn">+</div>229 </div>230 </div>231 232 <div class="row">233 <div class="left">234 <div class="emoji">🥗</div>235 <div class="name">Herbed Veggies</div>236 </div>237 <div class="right">238 <div class="price">₹65</div>239 <div class="circle-btn">+</div>240 </div>241 </div>242 243 <div class="row">244 <div class="left">245 <div class="emoji">🌶</div>246 <div class="name">Jalapeno</div>247 </div>248 <div class="right">249 <div class="price">₹65</div>250 <div class="circle-btn">+</div>251 </div>252 </div>253 254 <div class="row">255 <div class="left">256 <div class="emoji">🧀</div>257 <div class="name">Spiced Paneer</div>258 </div>259 <div class="right">260 <div class="price">₹70</div>261 <div class="circle-btn">−</div>262 <div class="count">1</div>263 <div class="circle-btn">+</div>264 </div>265 </div>266 267 <div class="row">268 <div class="left">269 <div class="emoji">🍄</div>270 <div class="name">Mushroom</div>271 </div>272 <div class="right">273 <div class="price">₹65</div>274 <div class="circle-btn">+</div>275 </div>276 </div>277 278 <div class="row">279 <div class="left">280 <div class="emoji">🧅</div>281 <div class="name">Onion</div>282 </div>283 <div class="right">284 <div class="price">₹65</div>285 <div class="circle-btn">+</div>286 </div>287 </div>288 289 </div>290 </div>291 292 <!-- Bottom sheet -->293 <div class="bottom-sheet">294 <div class="summary">295 <div>Add 1 x Spiced Paneer</div>296 <div class="price">+ ₹70</div>297 </div>298 <div class="save-btn">Save toppings</div>299 </div>300 301 <!-- Bottom system bar indicator -->302 <div class="drag-indicator"></div>303</div>304</body>305</html>