GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Add or remove toppings</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #ffffff;13 }14 15 /* Header */16 .app-header {17 height: 170px;18 padding: 30px 36px 0 36px;19 position: relative;20 box-sizing: border-box;21 }22 .back-btn {23 position: absolute;24 left: 28px;25 top: 60px;26 width: 72px;27 height: 72px;28 display: flex;29 align-items: center;30 justify-content: center;31 }32 .app-title {33 text-align: center;34 font-size: 56px;35 font-weight: 700;36 color: #1b1b1b;37 line-height: 170px;38 }39 40 /* Sections */41 .content {42 position: absolute;43 left: 0;44 right: 0;45 top: 170px;46 bottom: 200px;47 overflow: hidden;48 }49 .section {50 padding: 0 30px;51 }52 .section-title {53 font-size: 50px;54 font-weight: 800;55 color: #1b1b1b;56 padding: 26px 0 12px 0;57 }58 59 /* Rows */60 .row {61 display: flex;62 align-items: center;63 justify-content: space-between;64 height: 140px;65 padding: 0 10px;66 border-bottom: 1px solid #f1f1f1;67 }68 .left {69 display: flex;70 align-items: center;71 gap: 28px;72 }73 .item-icon {74 width: 78px;75 height: 78px;76 border-radius: 16px;77 background: #f3f3f4;78 border: 1px solid #e2e2e2;79 display: flex;80 align-items: center;81 justify-content: center;82 color: #8c8c8c;83 font-size: 34px;84 font-weight: 700;85 }86 .item-label {87 font-size: 44px;88 color: #202124;89 }90 .price {91 font-size: 44px;92 color: #333;93 margin-right: 22px;94 }95 96 /* Controls */97 .controls {98 display: flex;99 align-items: center;100 gap: 26px;101 }102 .circle-icon {103 width: 96px;104 height: 96px;105 border-radius: 50%;106 display: flex;107 align-items: center;108 justify-content: center;109 }110 .circle-icon.green { border: 6px solid #2e7d32; }111 .circle-icon.gray { border: 6px solid #bdbdbd; }112 .count {113 font-size: 46px;114 color: #3a3a3a;115 min-width: 30px;116 text-align: center;117 }118 119 /* Bottom button */120 .footer {121 position: absolute;122 bottom: 28px;123 left: 0;124 right: 0;125 padding: 0 30px;126 }127 .primary-btn {128 height: 140px;129 background: #2e7d32;130 color: #ffffff;131 font-size: 48px;132 font-weight: 700;133 border-radius: 22px;134 display: flex;135 align-items: center;136 justify-content: center;137 letter-spacing: 0.5px;138 }139</style>140</head>141<body>142<div id="render-target">143 144 <!-- Header -->145 <div class="app-header">146 <div class="back-btn">147 <svg width="54" height="54" viewBox="0 0 24 24" fill="none" stroke="#1b1b1b" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round">148 <polyline points="15 18 9 12 15 6"></polyline>149 </svg>150 </div>151 <div class="app-title">Add or remove toppings</div>152 </div>153 154 <!-- Content -->155 <div class="content">156 <!-- Default Section -->157 <div class="section">158 <div class="section-title">Default</div>159 <div class="row">160 <div class="left">161 <div class="item-icon">🌽</div>162 <div class="item-label">Sweet Corn</div>163 </div>164 <div class="controls">165 <div class="circle-icon gray">166 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#9e9e9e" stroke-width="2.6" fill="none" stroke-linecap="round">167 <line x1="6" y1="12" x2="18" y2="12"></line>168 </svg>169 </div>170 <div class="count">1</div>171 <div class="circle-icon green">172 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">173 <line x1="12" y1="6" x2="12" y2="18"></line>174 <line x1="6" y1="12" x2="18" y2="12"></line>175 </svg>176 </div>177 </div>178 </div>179 </div>180 181 <!-- Extras Section -->182 <div class="section">183 <div class="section-title">Extras</div>184 185 <!-- Row: Black Olives -->186 <div class="row">187 <div class="left">188 <div class="item-icon">●</div>189 <div class="item-label">Black Olives</div>190 </div>191 <div class="controls">192 <div class="price">₹65</div>193 <div class="circle-icon green">194 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">195 <line x1="12" y1="6" x2="12" y2="18"></line>196 <line x1="6" y1="12" x2="18" y2="12"></line>197 </svg>198 </div>199 </div>200 </div>201 202 <!-- Row: Cheese -->203 <div class="row">204 <div class="left">205 <div class="item-icon">🧀</div>206 <div class="item-label">Cheese</div>207 </div>208 <div class="controls">209 <div class="price">₹80</div>210 <div class="circle-icon green">211 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">212 <line x1="12" y1="6" x2="12" y2="18"></line>213 <line x1="6" y1="12" x2="18" y2="12"></line>214 </svg>215 </div>216 </div>217 </div>218 219 <!-- Row: Green Capsicum -->220 <div class="row">221 <div class="left">222 <div class="item-icon">🫑</div>223 <div class="item-label">Green Capsicum</div>224 </div>225 <div class="controls">226 <div class="price">₹65</div>227 <div class="circle-icon green">228 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">229 <line x1="12" y1="6" x2="12" y2="18"></line>230 <line x1="6" y1="12" x2="18" y2="12"></line>231 </svg>232 </div>233 </div>234 </div>235 236 <!-- Row: Herbed Veggies -->237 <div class="row">238 <div class="left">239 <div class="item-icon">🥕</div>240 <div class="item-label">Herbed Veggies</div>241 </div>242 <div class="controls">243 <div class="price">₹65</div>244 <div class="circle-icon green">245 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">246 <line x1="12" y1="6" x2="12" y2="18"></line>247 <line x1="6" y1="12" x2="18" y2="12"></line>248 </svg>249 </div>250 </div>251 </div>252 253 <!-- Row: Jalapeno -->254 <div class="row">255 <div class="left">256 <div class="item-icon">🌶</div>257 <div class="item-label">Jalapeno</div>258 </div>259 <div class="controls">260 <div class="price">₹65</div>261 <div class="circle-icon green">262 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">263 <line x1="12" y1="6" x2="12" y2="18"></line>264 <line x1="6" y1="12" x2="18" y2="12"></line>265 </svg>266 </div>267 </div>268 </div>269 270 <!-- Row: Spiced Paneer -->271 <div class="row">272 <div class="left">273 <div class="item-icon">🧊</div>274 <div class="item-label">Spiced Paneer</div>275 </div>276 <div class="controls">277 <div class="price">₹70</div>278 <div class="circle-icon green">279 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">280 <line x1="12" y1="6" x2="12" y2="18"></line>281 <line x1="6" y1="12" x2="18" y2="12"></line>282 </svg>283 </div>284 </div>285 </div>286 287 <!-- Row: Mushroom -->288 <div class="row">289 <div class="left">290 <div class="item-icon">🍄</div>291 <div class="item-label">Mushroom</div>292 </div>293 <div class="controls">294 <div class="price">₹65</div>295 <div class="circle-icon green">296 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">297 <line x1="12" y1="6" x2="12" y2="18"></line>298 <line x1="6" y1="12" x2="18" y2="12"></line>299 </svg>300 </div>301 </div>302 </div>303 304 <!-- Row: Onion -->305 <div class="row">306 <div class="left">307 <div class="item-icon">🧅</div>308 <div class="item-label">Onion</div>309 </div>310 <div class="controls">311 <div class="price">₹65</div>312 <div class="circle-icon green">313 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">314 <line x1="12" y1="6" x2="12" y2="18"></line>315 <line x1="6" y1="12" x2="18" y2="12"></line>316 </svg>317 </div>318 </div>319 </div>320 321 <!-- Row: Red Capsicum -->322 <div class="row">323 <div class="left">324 <div class="item-icon">🫑</div>325 <div class="item-label">Red Capsicum</div>326 </div>327 <div class="controls">328 <div class="price">₹65</div>329 <div class="circle-icon green">330 <svg width="54" height="54" viewBox="0 0 24 24" stroke="#2e7d32" stroke-width="2.6" fill="none" stroke-linecap="round">331 <line x1="12" y1="6" x2="12" y2="18"></line>332 <line x1="6" y1="12" x2="18" y2="12"></line>333 </svg>334 </div>335 </div>336 </div>337 338 </div>339 </div>340 341 <!-- Footer -->342 <div class="footer">343 <div class="primary-btn">Save toppings</div>344 </div>345 346</div>347</body>348</html>