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 Crust Selector</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #ffffff;14    border-radius: 36px;15    box-shadow: 0 2px 8px rgba(0,0,0,0.06);16    color: #222;17  }18 19  /* General */20  .screen-padding { padding: 48px; }21  h2 {22    font-size: 52px;23    font-weight: 700;24    margin: 48px 0 24px 0;25    letter-spacing: -0.3px;26    color: #1f2937;27  }28  .sub {29    font-size: 36px;30    color: #6b7280;31    margin-top: 8px;32  }33 34  /* Notification pill */35  .notif-wrap {36    width: 984px;37    background: #2d2f33;38    color: #e6e8eb;39    border-radius: 48px;40    padding: 28px 32px;41    display: flex;42    align-items: center;43    gap: 26px;44    box-shadow: 0 12px 28px rgba(0,0,0,0.3);45  }46  .notif-icon {47    width: 72px; height: 72px;48    border-radius: 50%;49    background: #36b27c;50    display: flex; align-items: center; justify-content: center;51    color: #0b422b;52    font-size: 42px;53    font-weight: 700;54  }55  .notif-content { flex: 1; }56  .notif-title {57    font-size: 40px; font-weight: 700; color: #f0f3f6;58  }59  .notif-sub {60    font-size: 34px; color: #cfd5db; margin-top: 6px;61  }62  .notif-right { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }63  .chevron {64    width: 36px; height: 36px;65  }66  .chevron path { fill: #cfd5db; }67 68  /* Size selector */69  .size-row { display: flex; gap: 36px; }70  .size-card {71    flex: 1;72    border: 2px solid #e5e7eb;73    border-radius: 28px;74    padding: 36px;75    min-height: 180px;76    background: #ffffff;77    position: relative;78  }79  .size-card.selected {80    border: 4px solid #1b7f39;81    box-shadow: 0 6px 14px rgba(27,127,57,0.12);82  }83  .size-title { font-size: 46px; font-weight: 700; color: #111827; }84  .size-sub { font-size: 32px; color: #6b7280; margin-top: 12px; }85  .corner-check {86    position: absolute; right: 24px; top: 24px;87    width: 56px; height: 56px;88    background: #168c3b; border-radius: 50%;89    display: flex; align-items: center; justify-content: center;90  }91  .corner-check svg { width: 28px; height: 28px; }92  .corner-check path { stroke: #fff; stroke-width: 5; fill: none; }93 94  /* Crust list */95  .crust-card {96    border: 2px solid #e5e7eb;97    border-radius: 28px;98    padding: 28px;99    background: #fff;100    display: flex;101    gap: 28px;102    align-items: flex-start;103    margin-bottom: 28px;104    position: relative;105  }106  .crust-card.selected {107    border: 4px solid #1b7f39;108    box-shadow: 0 8px 18px rgba(27,127,57,0.12);109  }110  .crust-image {111    width: 120px; height: 120px; border-radius: 60px;112    background: #E0E0E0; border: 1px solid #BDBDBD;113    display: flex; align-items: center; justify-content: center;114    color: #757575; font-size: 28px; text-align: center;115    flex-shrink: 0;116  }117  .crust-text { flex: 1; }118  .crust-title { font-size: 44px; font-weight: 800; color: #1f2937; }119  .crust-desc { font-size: 34px; color: #4b5563; line-height: 1.35; margin-top: 12px; }120  .price {121    font-size: 44px; font-weight: 800; color: #111827;122    margin-top: 18px;123  }124  .option-check {125    position: absolute; right: 24px; top: 24px;126    width: 64px; height: 64px;127    border-radius: 50%;128    background: #168c3b;129    display: flex; align-items: center; justify-content: center;130  }131  .option-check svg { width: 30px; height: 30px; }132  .option-check path { stroke: #fff; stroke-width: 5; fill: none; }133 134  /* Footer bar */135  .footer {136    position: absolute;137    left: 0; right: 0; bottom: 0;138    padding: 28px 48px 40px 48px;139    background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, #ffffff 60%);140  }141  .total-row {142    display: flex; align-items: center; justify-content: flex-end;143    font-size: 40px; font-weight: 800; color: #111827;144    margin-bottom: 20px;145  }146  .cta {147    width: 984px; height: 120px;148    background: #1b7f39;149    color: #fff; font-size: 48px; font-weight: 800;150    border: none; border-radius: 28px;151    display: flex; align-items: center; justify-content: center;152    box-shadow: 0 10px 16px rgba(27,127,57,0.25);153  }154 155  /* Home indicator */156  .home-indicator {157    position: absolute; bottom: 18px; left: 50%;158    transform: translateX(-50%);159    width: 320px; height: 12px; border-radius: 12px;160    background: #b9bcc1;161  }162</style>163</head>164<body>165<div id="render-target">166  <div class="screen-padding">167 168    <!-- Notification pill -->169    <div class="notif-wrap">170      <div class="notif-icon">🌱</div>171      <div class="notif-content">172        <div class="notif-title">To do: 2 plant care tasks • <span style="font-weight:600; color:#dfe4ea;">now</span></div>173        <div class="notif-sub">Tap to complete them in Blossom 🌿</div>174      </div>175      <div class="notif-right">176        <svg class="chevron" viewBox="0 0 24 24">177          <path d="M7 10l5 5 5-5"></path>178        </svg>179      </div>180    </div>181 182    <!-- Choose size -->183    <h2>Choose size</h2>184    <div class="size-row">185      <div class="size-card selected">186        <div class="size-title">Medium</div>187        <div class="size-sub">Serves 2</div>188        <div class="corner-check">189          <svg viewBox="0 0 24 24">190            <path d="M5 13l4 4 10-10"></path>191          </svg>192        </div>193      </div>194      <div class="size-card">195        <div class="size-title">Personal</div>196        <div class="size-sub">Serves 1</div>197      </div>198    </div>199 200    <!-- Choose crust -->201    <h2 style="margin-top: 56px;">Choose crust</h2>202 203    <div class="crust-card selected">204      <div class="crust-image">[IMG: Crust]</div>205      <div class="crust-text">206        <div class="crust-title">Pan</div>207        <div class="crust-desc">Original Pan crust. Crunchy on the outside, soft & fluffy on the inside</div>208        <div class="price">₹539</div>209      </div>210      <div class="option-check">211        <svg viewBox="0 0 24 24">212          <path d="M5 13l4 4 10-10"></path>213        </svg>214      </div>215    </div>216 217    <div class="crust-card">218      <div class="crust-image">[IMG: Crust]</div>219      <div class="crust-text">220        <div class="crust-title">San Francisco Style</div>221        <div class="crust-desc">222          Light & crisp San Francisco Style Crust hand stretched to perfection, topped with Chef’s special sauce,223          100% mozzarella cheese, finished with a generous drizzle of extra virgin olive oil.224        </div>225        <div class="price">₹539</div>226      </div>227    </div>228 229    <div class="crust-card" style="margin-bottom: 260px;">230      <div class="crust-image">[IMG: Crust]</div>231      <div class="crust-text">232        <div class="crust-title">Stuffed Crust - Cheese Maxx</div>233        <div class="crust-desc">234          Cheese lovers paradise! Crust stuffed with cheese & creamy Peruvian sauce235        </div>236        <div class="price">₹608</div>237      </div>238    </div>239 240  </div>241 242  <!-- Footer -->243  <div class="footer">244    <div class="total-row">Total: ₹539</div>245    <div class="cta">Add to Cart</div>246  </div>247 248  <div class="home-indicator"></div>249</div>250</body>251</html>