GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Ingredients Screen</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13    color: #222;14  }15 16  /* Status bar */17  .status-bar {18    height: 140px;19    background: #2b2b2b;20    color: #f2f2f2;21    display: flex;22    align-items: center;23    justify-content: space-between;24    padding: 0 40px;25    font-size: 42px;26    letter-spacing: 0.5px;27  }28  .status-icons {29    display: flex;30    align-items: center;31    gap: 28px;32    font-size: 40px;33  }34  .icon-circle {35    width: 44px;36    height: 44px;37    border-radius: 50%;38    border: 3px solid #dcdcdc;39    display: inline-block;40  }41  .battery {42    display: inline-flex;43    align-items: center;44    gap: 10px;45    font-size: 40px;46  }47  .battery-box {48    width: 60px; height: 32px; border: 4px solid #f2f2f2; border-radius: 6px; position: relative;49  }50  .battery-box::after {51    content: ""; position: absolute; right: -10px; top: 8px; width: 10px; height: 16px; background: #f2f2f2; border-radius: 2px;52  }53  .battery-level { width: 40px; height: 22px; background: #f2f2f2; position: absolute; top: 5px; left: 6px; }54 55  /* Header */56  .header {57    padding: 36px 40px 10px 40px;58    background: #fff;59  }60  .top-actions {61    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;62  }63  .circle-btn {64    width: 120px; height: 120px; border-radius: 60px; background: #f3f3f3; display: flex; align-items: center; justify-content: center;65    box-shadow: 0 0 0 1px #e5e5e5 inset;66  }67  .circle-btn svg { width: 60px; height: 60px; }68 69  /* Tabs */70  .tabs {71    display: flex; gap: 70px; padding: 20px 0 0 0; align-items: flex-end;72  }73  .tab {74    font-size: 72px; font-weight: 600; color: #333;75  }76  .tab.selected { color: #3aa89e; position: relative; }77  .tab-indicator {78    position: absolute; bottom: -16px; left: 0; height: 10px; width: 420px; background: #3aa89e; border-radius: 6px;79  }80  .tab-small {81    font-size: 40px; color: #7b7b7b; margin-top: 12px;82  }83 84  /* Add to shopping list section */85  .add-all {86    margin-top: 26px;87    border-top: 2px solid #e9e9e9;88    border-bottom: 2px solid #e9e9e9;89    padding: 36px 40px;90    display: flex; align-items: center; justify-content: space-between;91  }92  .add-left {93    display: flex; align-items: center; gap: 28px;94    font-size: 56px; font-weight: 600;95  }96  .bag-icon svg { width: 70px; height: 70px; }97  .buy-btn {98    background: #3aa89e;99    color: #ffffff;100    font-size: 56px;101    padding: 26px 44px;102    border-radius: 80px;103    display: inline-flex; align-items: center; gap: 22px;104    box-shadow: 0 2px 0 rgba(0,0,0,0.06);105  }106  .buy-btn svg { width: 56px; height: 56px; }107 108  /* List */109  .list {110    padding: 0 40px;111  }112  .item {113    display: flex; align-items: center;114    padding: 34px 0;115    border-bottom: 2px solid #efefef;116  }117  .plus-wrap { width: 90px; height: 90px; margin-right: 28px; }118  .amount { font-size: 48px; color: #333; width: 200px; }119  .ingredient {120    font-size: 56px; font-weight: 700; color: #1f1f1f;121  }122  .optional {123    font-size: 40px; color: #8d8d8d; margin-left: 318px; margin-top: 14px;124  }125 126  /* Footer */127  .footer {128    position: absolute; bottom: 70px; left: 40px;129    font-size: 54px; color: #3aa89e; font-weight: 700;130  }131</style>132</head>133<body>134<div id="render-target">135 136  <!-- Status Bar -->137  <div class="status-bar">138    <div class="time">1:12</div>139    <div class="status-icons">140      <div class="icon-circle" title="Do Not Disturb"></div>141      <div class="icon-circle" title="Wi‑Fi"></div>142      <div class="battery" title="Battery">143        <div class="battery-box"><div class="battery-level"></div></div>144        <div>90%</div>145      </div>146    </div>147  </div>148 149  <!-- Header and tabs -->150  <div class="header">151    <div class="top-actions">152      <div class="circle-btn" title="Back">153        <svg viewBox="0 0 24 24">154          <path d="M15 6l-6 6 6 6" stroke="#333" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>155        </svg>156      </div>157      <div class="circle-btn" title="Share">158        <svg viewBox="0 0 24 24">159          <rect x="5" y="5" width="12" height="12" rx="2" ry="2" fill="none" stroke="#333" stroke-width="2"></rect>160          <path d="M12 3l6 0 0 6" stroke="#333" stroke-width="2" fill="none"></path>161          <path d="M18 3l-8 8" stroke="#333" stroke-width="2" fill="none"></path>162        </svg>163      </div>164    </div>165 166    <div class="tabs">167      <div class="tab">Overview</div>168      <div class="tab selected">Ingredients169        <div class="tab-indicator"></div>170      </div>171      <div style="display:flex; flex-direction:column;">172        <div class="tab">Directions</div>173        <div class="tab-small">5m</div>174      </div>175    </div>176  </div>177 178  <!-- Add all section -->179  <div class="add-all">180    <div class="add-left">181      <div class="bag-icon">182        <svg viewBox="0 0 24 24">183          <path d="M6 9h12l-1 11H7L6 9z" fill="none" stroke="#3aa89e" stroke-width="2"></path>184          <path d="M9 9V7a3 3 0 016 0v2" fill="none" stroke="#3aa89e" stroke-width="2"></path>185          <circle cx="8" cy="12" r="1.3" fill="#3aa89e"></circle>186        </svg>187      </div>188      <div>Add All to Shopping List</div>189    </div>190    <div class="buy-btn">191      <svg viewBox="0 0 24 24">192        <path d="M3 5h3l2 12h10l2-8H7" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>193        <circle cx="10" cy="20" r="1.7" fill="#fff"></circle>194        <circle cx="18" cy="20" r="1.7" fill="#fff"></circle>195      </svg>196      <span>Buy</span>197    </div>198  </div>199 200  <!-- Ingredients list -->201  <div class="list">202    <div class="item">203      <div class="plus-wrap">204        <svg viewBox="0 0 80 80">205          <circle cx="40" cy="40" r="40" fill="#3aa89e"></circle>206          <rect x="36" y="18" width="8" height="44" fill="#fff"></rect>207          <rect x="18" y="36" width="44" height="8" fill="#fff"></rect>208        </svg>209      </div>210      <div class="amount">1 oz.</div>211      <div class="ingredient">coconut rum</div>212    </div>213 214    <div class="item">215      <div class="plus-wrap">216        <svg viewBox="0 0 80 80">217          <circle cx="40" cy="40" r="40" fill="#3aa89e"></circle>218          <rect x="36" y="18" width="8" height="44" fill="#fff"></rect>219          <rect x="18" y="36" width="44" height="8" fill="#fff"></rect>220        </svg>221      </div>222      <div class="amount">1 oz.</div>223      <div class="ingredient">blue curacao</div>224    </div>225 226    <div class="item">227      <div class="plus-wrap">228        <svg viewBox="0 0 80 80">229          <circle cx="40" cy="40" r="40" fill="#3aa89e"></circle>230          <rect x="36" y="18" width="8" height="44" fill="#fff"></rect>231          <rect x="18" y="36" width="44" height="8" fill="#fff"></rect>232        </svg>233      </div>234      <div class="amount">2 oz.</div>235      <div class="ingredient">pineapple juice</div>236    </div>237 238    <div class="item">239      <div class="plus-wrap">240        <svg viewBox="0 0 80 80">241          <circle cx="40" cy="40" r="40" fill="#3aa89e"></circle>242          <rect x="36" y="18" width="8" height="44" fill="#fff"></rect>243          <rect x="18" y="36" width="44" height="8" fill="#fff"></rect>244        </svg>245      </div>246      <div class="amount">1 cup</div>247      <div class="ingredient">crushed ice</div>248    </div>249 250    <div class="item" style="border-bottom:none;">251      <div class="plus-wrap">252        <svg viewBox="0 0 80 80">253          <circle cx="40" cy="40" r="40" fill="#3aa89e"></circle>254          <rect x="36" y="18" width="8" height="44" fill="#fff"></rect>255          <rect x="18" y="36" width="44" height="8" fill="#fff"></rect>256        </svg>257      </div>258      <div class="amount"></div>259      <div>260        <div class="ingredient">fresh pineapple</div>261        <div class="optional">(optional)</div>262      </div>263    </div>264 265    <div class="item" style="border-bottom:none;">266      <div class="plus-wrap">267        <svg viewBox="0 0 80 80">268          <circle cx="40" cy="40" r="40" fill="#3aa89e"></circle>269          <rect x="36" y="18" width="8" height="44" fill="#fff"></rect>270          <rect x="18" y="36" width="44" height="8" fill="#fff"></rect>271        </svg>272      </div>273      <div class="amount"></div>274      <div>275        <div class="ingredient">maraschino cherries</div>276        <div class="optional">(optional)</div>277      </div>278    </div>279  </div>280 281  <!-- Footer -->282  <div class="footer">Report Issue</div>283 284</div>285</body>286</html>