GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>UI Render</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9  #render-target {10    width: 1080px; height: 2400px;11    position: relative; overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 120px;18    padding: 0 36px;19    display: flex; align-items: center; justify-content: space-between;20    color: #444;21    font-weight: 600;22    font-size: 42px;23  }24  .status-right {25    display: flex; align-items: center; gap: 24px;26    color: #444;27    font-size: 36px;28  }29  .icon { width: 48px; height: 48px; }30  .icon-small { width: 36px; height: 36px; }31 32  /* Search header */33  .header {34    padding: 0 36px;35  }36  .header-row {37    display: flex; align-items: center; gap: 24px;38  }39  .back-btn {40    width: 84px; height: 84px; border-radius: 42px;41    display: flex; align-items: center; justify-content: center;42    color: #2E7D32;43  }44  .search-bar {45    flex: 1;46    height: 120px;47    border: 2px solid #B8D7B9;48    border-radius: 60px;49    background: #EEF7EE;50    display: flex; align-items: center;51    padding: 0 36px;52    gap: 24px;53    color: #333;54    box-shadow: inset 0 0 0 2px rgba(46,125,50,0.08);55  }56  .search-text {57    flex: 1;58    font-size: 44px;59    color: #333;60  }61  .mic-btn { color: #2E7D32; }62 63  /* Product modal/card area */64  .product-modal {65    margin-top: 36px;66    background: #F4F4F4;67    border-top-left-radius: 48px;68    border-top-right-radius: 48px;69    padding: 36px;70  }71  .modal-top {72    display: flex; align-items: center; justify-content: space-between;73    padding: 18px 12px 24px;74  }75  .modal-actions {76    display: flex; align-items: center; gap: 24px;77    color: #333;78  }79  .product-image {80    width: 720px; height: 980px; margin: 0 auto 24px;81    background: #E0E0E0; border: 1px solid #BDBDBD;82    display: flex; align-items: center; justify-content: center;83    color: #757575; font-size: 38px; text-align: center;84    border-radius: 8px;85  }86  .title {87    font-size: 46px; letter-spacing: 2px; color: #222;88    padding: 18px 12px;89  }90  .price {91    font-size: 90px; font-weight: 800; color: #111;92    padding: 0 12px 12px;93  }94  .info-list { padding: 12px; }95  .info-item {96    display: flex; align-items: center; gap: 18px;97    font-size: 44px; color: #333; margin: 18px 0;98  }99  .check {100    color: #2E7D32;101  }102  .ebt {103    display: inline-flex; align-items: center; justify-content: center;104    background: #1E8E3E; color: #fff; font-weight: 700;105    padding: 12px 22px; border-radius: 12px;106    font-size: 38px; margin-right: 12px;107  }108  .subtle { color: #555; }109 110  .section-title {111    padding: 24px 12px 12px;112    font-size: 42px; color: #333; font-weight: 600;113  }114 115  /* Recommendations */116  .recs {117    display: flex; gap: 24px;118    padding: 12px;119    overflow: hidden;120  }121  .rec-card {122    width: 320px; height: 460px;123    border-radius: 24px; border: 1px solid #E0E0E0; background: #fff;124    position: relative; padding: 18px;125    box-shadow: 0 1px 0 rgba(0,0,0,0.03);126  }127  .rec-img {128    width: 100%; height: 360px;129    background: #E0E0E0; border: 1px solid #BDBDBD;130    display: flex; align-items: center; justify-content: center;131    color: #757575; font-size: 32px; border-radius: 12px;132  }133  .fav-btn {134    position: absolute; top: 18px; right: 18px;135    width: 72px; height: 72px; border-radius: 36px;136    display: flex; align-items: center; justify-content: center;137    background: rgba(255,255,255,0.9); border: 1px solid #E0E0E0;138  }139 140  /* Bottom sheet - cart added */141  .bottom-sheet {142    position: absolute; left: 0; right: 0; bottom: 0;143    height: 420px; background: #2E7D32; color: #fff;144    padding: 36px; border-top-left-radius: 28px; border-top-right-radius: 28px;145  }146  .sheet-close {147    position: absolute; top: 24px; right: 24px;148    width: 60px; height: 60px; border-radius: 30px;149    display: flex; align-items: center; justify-content: center;150    color: #fff; opacity: 0.9;151  }152  .sheet-row {153    display: flex; align-items: center; gap: 24px;154    font-size: 48px; font-weight: 600; margin-top: 48px;155  }156  .sheet-check {157    width: 72px; height: 72px; border-radius: 36px;158    background: rgba(255,255,255,0.2);159    display: flex; align-items: center; justify-content: center;160  }161  .sheet-btn {162    margin: 48px auto 0; width: 940px; height: 140px;163    border-radius: 24px; background: #DCEFD9; color: #2E7D32;164    display: flex; align-items: center; justify-content: center;165    font-size: 54px; font-weight: 800;166  }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div>10:11</div>175    <div class="status-right">176      <!-- simple status icons -->177      <svg class="icon-small" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" fill="none" stroke="#666" stroke-width="2"/><rect x="10" y="11" width="6" height="2" fill="#666"/></svg>178      <svg class="icon-small" viewBox="0 0 24 24"><path d="M2 18h20M5 14h14M8 10h8M11 6h2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/></svg>179      <svg class="icon-small" viewBox="0 0 24 24"><rect x="3" y="7" width="16" height="10" rx="2" fill="none" stroke="#666" stroke-width="2"/><rect x="20" y="9" width="2" height="6" fill="#666"/></svg>180      <div>100%</div>181    </div>182  </div>183 184  <!-- Search header -->185  <div class="header">186    <div class="header-row">187      <div class="back-btn">188        <svg class="icon" viewBox="0 0 24 24"><path d="M15 18L9 12l6-6" stroke="#2E7D32" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>189      </div>190      <div class="search-bar">191        <svg class="icon" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#2E7D32" stroke-width="2" fill="none"/><path d="M20 20l-4.5-4.5" stroke="#2E7D32" stroke-width="2" stroke-linecap="round"/></svg>192        <div class="search-text">milk</div>193        <div class="mic-btn">194          <svg class="icon" viewBox="0 0 24 24"><rect x="9" y="5" width="6" height="9" rx="3" fill="#2E7D32"/><path d="M12 15v3M8 18h8" stroke="#2E7D32" stroke-width="2" stroke-linecap="round"/></svg>195        </div>196      </div>197    </div>198  </div>199 200  <!-- Product modal -->201  <div class="product-modal">202    <div class="modal-top">203      <div>204        <svg class="icon" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#333" stroke-width="2" stroke-linecap="round"/></svg>205      </div>206      <div class="modal-actions">207        <svg class="icon" viewBox="0 0 24 24"><path d="M4 12v7h16v-7M12 4v12M8 8l4-4 4 4" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>208        <svg class="icon" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9s-2.1-1.5-4-3.2C14.1 19.5 12 21 12 21z" fill="none" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>209      </div>210    </div>211 212    <div class="product-image">[IMG: Almond Milk Carton]</div>213 214    <div class="title">Silk Original Almond Milk, Half Gallon</div>215    <div class="price">$3.49</div>216 217    <div class="info-list">218      <div class="info-item">219        <svg class="icon" viewBox="0 0 24 24" class="check"><path d="M20 6L9 17l-5-5" stroke="#2E7D32" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>220        <span>Pickup: Tomorrow 9am - 5pm</span>221      </div>222      <div class="info-item">223        <svg class="icon" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" stroke="#2E7D32" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>224        <span>Delivery: Tomorrow 1pm - 8pm</span>225      </div>226      <div class="info-item">227        <span class="ebt">EBT</span>228        <span>SNAP EBT eligible</span>229      </div>230    </div>231 232    <div class="section-title">Product Recommendations</div>233    <div class="recs">234      <div class="rec-card">235        <div class="rec-img">[IMG: Milk Product]</div>236        <div class="fav-btn">237          <svg class="icon-small" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" fill="none" stroke="#777" stroke-width="2"/></svg>238        </div>239      </div>240      <div class="rec-card">241        <div class="rec-img">[IMG: Almond Milk Unsweetened]</div>242        <div class="fav-btn">243          <svg class="icon-small" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" fill="none" stroke="#777" stroke-width="2"/></svg>244        </div>245      </div>246      <div class="rec-card">247        <div class="rec-img">[IMG: Dairy-Free Milk]</div>248        <div class="fav-btn">249          <svg class="icon-small" viewBox="0 0 24 24"><path d="M12 21s-6-4.35-6-9a4 4 0 018 0 4 4 0 018 0c0 4.65-6 9-6 9z" fill="none" stroke="#777" stroke-width="2"/></svg>250        </div>251      </div>252    </div>253  </div>254 255  <!-- Bottom sheet -->256  <div class="bottom-sheet">257    <div class="sheet-close">258      <svg class="icon" viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19" stroke="#fff" stroke-width="2" stroke-linecap="round"/></svg>259    </div>260    <div class="sheet-row">261      <div class="sheet-check">262        <svg class="icon-small" viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>263      </div>264      <div>Item added to your Cart</div>265    </div>266    <div class="sheet-btn">GO TO CART</div>267  </div>268 269</div>270</body>271</html>