GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Pizza Builder UI</title>6<style>7  body{ margin:0; padding:0; background:transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target{9    width:1080px; height:2400px;10    position:relative; overflow:hidden;11    background:#ffffff; color:#111;12  }13 14  /* Global spacing */15  .screen{16    position:absolute; left:0; top:0; right:0; bottom:0;17    overflow-y:auto; padding:60px 56px 260px 56px; /* room for sticky footer */18    box-sizing:border-box;19  }20 21  h1, h2{ margin:0; font-weight:700; color:#111; }22  h2{ font-size:56px; margin:60px 0 28px 0; }23  p{ margin:0; font-size:40px; line-height:1.5; color:#333; }24 25  /* Size cards */26  .size-row{27    display:flex; gap:36px; margin-top:28px;28  }29  .size-card{30    flex:1;31    border:2px solid #E5E7EB; border-radius:28px;32    padding:36px; position:relative; box-sizing:border-box;33    background:#fff;34  }35  .size-card.selected{ border-color:#16a34a; box-shadow:0 0 0 6px rgba(22,163,74,0.08) inset; }36  .size-title{ font-size:52px; font-weight:700; margin-bottom:14px; }37  .size-sub{ font-size:38px; color:#5b5b5b; }38 39  .check-badge{40    position:absolute; right:28px; top:28px;41    width:72px; height:72px; border-radius:50%;42    background:#16a34a; display:flex; align-items:center; justify-content:center;43    box-shadow:0 4px 10px rgba(0,0,0,0.1);44  }45  .check-badge svg{ width:40px; height:40px; fill:#fff; }46 47  /* Crust list */48  .crust-card{49    border:2px solid #E5E7EB; border-radius:28px;50    padding:32px; margin-bottom:34px; position:relative; background:#fff;51  }52  .crust-card.selected{ border-color:#16a34a; box-shadow:0 0 0 6px rgba(22,163,74,0.08) inset; }53  .crust-row{ display:flex; gap:28px; align-items:flex-start; }54  .crust-img{55    width:140px; height:140px; border-radius:50%;56    background:#E0E0E0; border:1px solid #BDBDBD;57    display:flex; align-items:center; justify-content:center;58    color:#757575; font-size:28px; text-align:center; padding:10px; box-sizing:border-box;59  }60  .crust-info{ flex:1; }61  .crust-title{ font-size:48px; font-weight:700; margin:10px 0 12px 0; }62  .crust-desc{ font-size:40px; color:#4b4b4b; line-height:1.5; }63  .price{ font-size:44px; font-weight:700; margin-top:22px; }64 65  .option-check{66    position:absolute; right:28px; top:28px;67    width:72px; height:72px; border-radius:50%;68    background:#16a34a; display:flex; align-items:center; justify-content:center;69  }70  .option-check svg{ width:40px; height:40px; fill:#fff; }71 72  /* Sticky footer */73  .footer{74    position:absolute; left:0; right:0; bottom:0;75    padding:24px 56px 48px 56px; background:#fff; box-shadow:0 -8px 24px rgba(0,0,0,0.06);76  }77  .footer-top{78    display:flex; align-items:center; justify-content:space-between;79    font-size:44px; color:#222; margin-bottom:26px;80  }81  .total-label{ color:#444; }82  .total-price{ font-weight:800; }83  .cta-btn{84    width:100%; height:120px; border-radius:24px; background:#16a34a;85    color:#fff; font-size:52px; font-weight:800; border:none; cursor:pointer;86    display:flex; align-items:center; justify-content:center;87  }88 89  /* iOS style home indicator */90  .home-indicator{91    position:absolute; left:50%; transform:translateX(-50%);92    bottom:16px; width:320px; height:14px; border-radius:12px; background:#CFCFCF;93  }94</style>95</head>96<body>97<div id="render-target">98  <div class="screen">99    <p>100      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.101    </p>102 103    <h2>Choose size</h2>104    <div class="size-row">105      <div class="size-card selected">106        <div class="size-title">Medium</div>107        <div class="size-sub">Serves 2</div>108        <div class="check-badge">109          <svg viewBox="0 0 24 24">110            <path d="M9.2 16.6l-4-4a1.4 1.4 0 0 1 2-2l2.7 2.7 6-6a1.4 1.4 0 0 1 2 2l-7.9 7.9a1.4 1.4 0 0 1-1.9 0z"></path>111          </svg>112        </div>113      </div>114      <div class="size-card">115        <div class="size-title">Personal</div>116        <div class="size-sub">Serves 1</div>117      </div>118    </div>119 120    <h2>Choose crust</h2>121 122    <div class="crust-card">123      <div class="crust-row">124        <div class="crust-img">[IMG: Pan Crust]</div>125        <div class="crust-info">126          <div class="crust-title">Pan</div>127          <div class="crust-desc">128            Original Pan crust. Crunchy on the outside, soft & fluffy on the inside129          </div>130          <div class="price">₹539</div>131        </div>132      </div>133    </div>134 135    <div class="crust-card">136      <div class="crust-row">137        <div class="crust-img">[IMG: SF Style]</div>138        <div class="crust-info">139          <div class="crust-title">San Francisco Style</div>140          <div class="crust-desc">141            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.142          </div>143          <div class="price">₹539</div>144        </div>145      </div>146    </div>147 148    <div class="crust-card selected">149      <div class="crust-row">150        <div class="crust-img">[IMG: Stuffed Crust]</div>151        <div class="crust-info">152          <div class="crust-title">Stuffed Crust - Cheese Maxx</div>153          <div class="crust-desc">154            Cheese lovers paradise! Crust stuffed with cheese & creamy Peruvian sauce155          </div>156          <div class="price">₹608</div>157        </div>158      </div>159      <div class="option-check">160        <svg viewBox="0 0 24 24">161          <path d="M9.2 16.6l-4-4a1.4 1.4 0 0 1 2-2l2.7 2.7 6-6a1.4 1.4 0 0 1 2 2l-7.9 7.9a1.4 1.4 0 0 1-1.9 0z"></path>162        </svg>163      </div>164    </div>165  </div>166 167  <div class="footer">168    <div class="footer-top">169      <div></div>170      <div class="total-label">Total: <span class="total-price">₹608</span></div>171    </div>172    <button class="cta-btn">Add to Cart</button>173  </div>174 175  <div class="home-indicator"></div>176</div>177</body>178</html>