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  :root{8    --bg:#F4F6F8;9    --card:#FFFFFF;10    --text:#1A1A1A;11    --muted:#4A4A4A;12    --green:#1E7A35;13    --green-light:#2DA34F;14    --border:#E3E6EA;15  }16  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }17  #render-target{18    width:1080px; height:2400px;19    position:relative; overflow:hidden;20    background:var(--bg);21    box-shadow:0 8px 30px rgba(0,0,0,0.08);22    border-radius:28px;23  }24  .screen{25    position:absolute; left:0; top:0; right:0;26    padding:48px 36px 220px 36px;27    overflow:auto; height:100%;28  }29  .page-title{30    font-size:64px; font-weight:700; color:var(--text);31    margin:0 20px 24px;32  }33  .size-row{34    display:flex; gap:36px; padding:0 20px; margin-bottom:40px;35  }36  .size-card{37    flex:1;38    background:var(--card);39    border:2px solid var(--border);40    border-radius:28px;41    padding:36px 32px;42    box-shadow:0 6px 18px rgba(0,0,0,0.04);43    position:relative;44  }45  .size-card.selected{ border-color:var(--green); }46  .size-title{ font-size:54px; font-weight:700; margin:0; color:var(--text); }47  .size-sub{ font-size:36px; color:#666; margin-top:12px; }48  .check-badge{49    position:absolute; right:32px; top:28px;50    width:64px; height:64px; border-radius:50%;51    background:#E9F6ED; border:2px solid var(--green);52    display:flex; align-items:center; justify-content:center;53  }54  .section-title{55    font-size:56px; font-weight:800; color:var(--text);56    margin:28px 20px 22px;57  }58  .crust-card{59    background:var(--card);60    border:2px solid var(--border);61    border-radius:28px;62    padding:32px;63    margin:0 20px 28px;64    display:flex; gap:32px; align-items:flex-start;65    box-shadow:0 8px 20px rgba(0,0,0,0.05);66    position:relative;67  }68  .crust-card.selected{ border-color:var(--green); }69  .icon-round{70    width:132px; height:132px; border-radius:50%;71    overflow:hidden;72    display:flex; align-items:center; justify-content:center;73    background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; font-size:24px; text-align:center;74  }75  .crust-content{ flex:1; }76  .crust-title{ font-size:52px; font-weight:800; margin:4px 0 10px; color:var(--text); }77  .crust-desc{ font-size:40px; line-height:1.34; color:#3e3e3e; }78  .price{ font-size:46px; font-weight:800; color:#000; margin-top:20px; }79  .card-check{80    position:absolute; right:28px; bottom:28px;81    width:68px; height:68px; border-radius:16px;82    display:flex; align-items:center; justify-content:center;83    background:#E9F6ED; border:2px solid var(--green);84  }85  .sub-section-title{86    font-size:52px; font-weight:800; color:#111; margin:40px 20px 16px;87  }88  .toppings-btn{89    margin:0 20px;90    background:#fff;91    border:2px solid var(--green);92    border-radius:28px;93    height:140px;94    display:flex; align-items:center; justify-content:center;95    color:var(--green); font-size:48px; font-weight:700;96    box-shadow:0 6px 18px rgba(0,0,0,0.04);97  }98  /* bottom bar */99  .bottom-info{100    position:absolute; left:0; right:0; bottom:200px;101    padding:0 40px;102    display:flex; justify-content:flex-end; align-items:center;103    font-size:44px; font-weight:800; color:#111;104  }105  .cta{106    position:absolute; left:36px; right:36px; bottom:60px;107    height:140px;108    background:var(--green);109    color:#fff; border-radius:18px;110    display:flex; align-items:center; justify-content:center;111    font-size:56px; font-weight:800;112    box-shadow:0 10px 24px rgba(0,0,0,0.18);113  }114  .progress{115    position:absolute; left:440px; right:440px; bottom:24px;116    height:12px; background:#C7C7C7; border-radius:12px;117  }118  /* simple check icon */119  svg{ display:block }120</style>121</head>122<body>123<div id="render-target">124  <div class="screen">125    <!-- Size selection -->126    <div class="page-title">Choose size</div>127    <div class="size-row">128      <div class="size-card selected">129        <div class="check-badge">130          <svg width="36" height="36" viewBox="0 0 24 24">131            <circle cx="12" cy="12" r="11" fill="none" stroke="#1E7A35" stroke-width="2"/>132            <path d="M6 12l4 4 8-8" fill="none" stroke="#1E7A35" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>133          </svg>134        </div>135        <h3 class="size-title">Medium</h3>136        <div class="size-sub">Serves 2</div>137      </div>138      <div class="size-card">139        <h3 class="size-title">Personal</h3>140        <div class="size-sub">Serves 1</div>141      </div>142    </div>143 144    <!-- Crust selection -->145    <div class="section-title">Choose crust</div>146 147    <div class="crust-card">148      <div class="icon-round">[IMG: Pan crust]</div>149      <div class="crust-content">150        <div class="crust-title">Pan</div>151        <div class="crust-desc">152          Original Pan crust. Crunchy on the outside, soft &amp; fluffy on the inside153        </div>154        <div class="price">₹539</div>155      </div>156    </div>157 158    <div class="crust-card">159      <div class="icon-round">[IMG: SF crust]</div>160      <div class="crust-content">161        <div class="crust-title">San Francisco Style</div>162        <div class="crust-desc">163          Light &amp; 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.164        </div>165        <div class="price">₹539</div>166      </div>167    </div>168 169    <div class="crust-card selected">170      <div class="icon-round">[IMG: Cheese Maxx]</div>171      <div class="crust-content">172        <div class="crust-title">Stuffed Crust – Cheese Maxx</div>173        <div class="crust-desc">174          Cheese lovers paradise! Crust stuffed with cheese &amp; creamy Peruvian sauce175        </div>176        <div class="price">₹608</div>177      </div>178      <div class="card-check">179        <svg width="42" height="42" viewBox="0 0 24 24">180          <path d="M6 12l4 4 8-8" fill="none" stroke="#1E7A35" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>181        </svg>182      </div>183    </div>184 185    <!-- Toppings -->186    <div class="sub-section-title">Add or remove toppings</div>187    <div class="toppings-btn">Customise toppings</div>188  </div>189 190  <!-- Bottom area -->191  <div class="bottom-info">Total: ₹608</div>192  <div class="cta">Add to Cart</div>193  <div class="progress"></div>194</div>195</body>196</html>