GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Pizza Customization 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; color: #1e1e1e; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #F6F8FA;14    border-radius: 32px;15    box-shadow: 0 8px 24px rgba(0,0,0,0.12);16  }17 18  .screen {19    position: absolute;20    left: 0; right: 0;21    top: 0; bottom: 0;22    padding: 48px 40px 220px 40px; /* leave space for bottom bar */23    overflow-y: auto;24  }25 26  .section-title {27    font-weight: 700;28    font-size: 54px;29    margin: 12px 0 28px 0;30  }31 32  /* Size options */33  .size-options {34    display: flex;35    gap: 36px;36    margin-bottom: 40px;37  }38  .size-card {39    flex: 1;40    background: #fff;41    border: 2px solid #E3E6EA;42    border-radius: 28px;43    padding: 32px;44    position: relative;45    box-shadow: 0 2px 8px rgba(0,0,0,0.05);46  }47  .size-card.selected {48    border-color: #2E7D32;49    box-shadow: 0 0 0 4px rgba(46,125,50,0.12) inset;50  }51  .size-name {52    font-size: 52px;53    font-weight: 700;54    margin-bottom: 14px;55  }56  .size-sub {57    font-size: 40px;58    color: #4a4a4a;59  }60  .check-badge {61    position: absolute;62    top: 24px;63    right: 24px;64    width: 68px;65    height: 68px;66    border-radius: 50%;67    border: 2px solid #2E7D32;68    background: #fff;69    display: flex;70    align-items: center;71    justify-content: center;72  }73  .check-badge svg { width: 38px; height: 38px; fill: #2E7D32; }74 75  /* Crust cards */76  .crust-card {77    background: #fff;78    border: 2px solid #E3E6EA;79    border-radius: 28px;80    padding: 32px;81    display: flex;82    gap: 24px;83    align-items: flex-start;84    margin-bottom: 28px;85    box-shadow: 0 2px 8px rgba(0,0,0,0.05);86  }87  .crust-card.selected {88    border-color: #2E7D32;89    box-shadow: 0 0 0 4px rgba(46,125,50,0.12) inset;90  }91 92  .avatar {93    width: 124px;94    height: 124px;95    border-radius: 50%;96    background: #E0E0E0;97    border: 1px solid #BDBDBD;98    display: flex; align-items: center; justify-content: center;99    color: #757575;100    font-size: 26px;101    text-align: center;102    flex-shrink: 0;103  }104  .crust-content { flex: 1; }105  .crust-title {106    font-size: 48px;107    font-weight: 800;108    margin-bottom: 10px;109  }110  .crust-desc {111    font-size: 38px;112    line-height: 1.35;113    color: #444;114    margin-bottom: 16px;115  }116  .price {117    font-size: 44px;118    font-weight: 800;119  }120  .crust-check {121    width: 72px;122    height: 72px;123    border-radius: 50%;124    border: 2px solid #2E7D32;125    background: #DFF3E0;126    display: flex; align-items: center; justify-content: center;127    margin-left: 12px;128  }129  .crust-check svg { width: 40px; height: 40px; fill: #2E7D32; }130 131  /* Toppings area */132  .subsection-title {133    font-size: 46px;134    font-weight: 800;135    margin: 36px 0 20px 0;136  }137  .add-link {138    font-size: 42px;139    color: #1B5E20;140    font-weight: 700;141    margin-bottom: 20px;142  }143 144  .custom-card {145    background: #fff;146    border-radius: 28px;147    border: 3px solid #2E7D32;148    padding: 36px;149    font-size: 46px;150    font-weight: 800;151    color: #1B5E20;152    display: flex;153    align-items: center;154    justify-content: center;155  }156 157  /* Bottom bar */158  .bottom-bar {159    position: absolute;160    left: 0; right: 0; bottom: 0;161    background: #ffffff;162    border-top-left-radius: 24px;163    border-top-right-radius: 24px;164    box-shadow: 0 -6px 16px rgba(0,0,0,0.12);165    padding: 28px 40px 40px 40px;166  }167  .total-row {168    font-size: 44px;169    font-weight: 800;170    color: #333;171    text-align: right;172    margin-bottom: 22px;173  }174  .cta-btn {175    width: 100%;176    background: #2E7D32;177    color: #fff;178    border: none;179    border-radius: 18px;180    font-size: 48px;181    font-weight: 800;182    padding: 36px 20px;183    box-shadow: 0 4px 12px rgba(46,125,50,0.35);184  }185  /* home indicator */186  .home-indicator {187    position: absolute;188    bottom: 18px;189    left: 50%;190    transform: translateX(-50%);191    width: 360px;192    height: 12px;193    background: #BDBDBD;194    border-radius: 8px;195    opacity: 0.6;196  }197</style>198</head>199<body>200<div id="render-target">201  <div class="screen">202    <div class="section-title">Choose size</div>203    <div class="size-options">204      <div class="size-card selected">205        <div class="size-name">Medium</div>206        <div class="size-sub">Serves 2</div>207        <div class="check-badge" aria-label="selected">208          <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.6L4 14.1l5 5 11-11-1.5-1.5z"/></svg>209        </div>210      </div>211      <div class="size-card">212        <div class="size-name">Personal</div>213        <div class="size-sub">Serves 1</div>214      </div>215    </div>216 217    <div class="section-title">Choose crust</div>218 219    <!-- Pan -->220    <div class="crust-card">221      <div class="avatar">[IMG: Cheese]</div>222      <div class="crust-content">223        <div class="crust-title">Pan</div>224        <div class="crust-desc">Original Pan crust. Crunchy on the outside, soft & fluffy on the inside</div>225        <div class="price">₹539</div>226      </div>227    </div>228 229    <!-- San Francisco Style -->230    <div class="crust-card">231      <div class="avatar">[IMG: Crust]</div>232      <div class="crust-content">233        <div class="crust-title">San Francisco Style</div>234        <div class="crust-desc">Light & crisp San Francisco Style Crust hand stretched to perfection, topped with Chef’s special sauce, 100% mozzarella cheese, finished with a generous drizzle of extra virgin olive oil.</div>235        <div class="price">₹539</div>236      </div>237    </div>238 239    <!-- Stuffed Crust - Cheese Maxx (selected) -->240    <div class="crust-card selected">241      <div class="avatar">[IMG: Cheese Maxx]</div>242      <div class="crust-content">243        <div class="crust-title">Stuffed Crust – Cheese Maxx</div>244        <div class="crust-desc">Cheese lovers paradise! Crust stuffed with cheese & creamy Peruvian sauce</div>245        <div style="display:flex; align-items:center; justify-content:space-between;">246          <div class="price">₹608</div>247          <div class="crust-check" aria-label="selected">248            <svg viewBox="0 0 24 24"><path d="M9 16.2l-3.5-3.6L4 14.1l5 5 11-11-1.5-1.5z"/></svg>249          </div>250        </div>251      </div>252    </div>253 254    <div class="subsection-title">Add or remove toppings</div>255    <div class="add-link">Add 1 x Spiced Paneer</div>256 257    <div class="custom-card">Customise toppings</div>258  </div>259 260  <div class="bottom-bar">261    <div class="total-row">Total: ₹678</div>262    <button class="cta-btn">Add to Cart</button>263  </div>264 265  <div class="home-indicator"></div>266</div>267</body>268</html>