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>Collections UI</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #FFFFFF;15    color: #333;16  }17 18  /* Top status bar */19  .status-bar {20    height: 120px;21    background: #0D0D0D;22    width: 100%;23  }24 25  /* Header */26  .header {27    background: #FFFFFF;28    padding: 48px 48px 24px 60px;29    position: relative;30    border-bottom: 1px solid #EFEFEF;31  }32  .title {33    font-size: 64px;34    font-weight: 700;35    color: #222;36    line-height: 1.2;37    margin: 16px 0 8px 0;38  }39  .close-btn {40    position: absolute;41    right: 36px;42    top: 56px;43    width: 72px;44    height: 72px;45    border-radius: 50%;46    display: flex;47    align-items: center;48    justify-content: center;49  }50  .close-btn svg {51    width: 44px;52    height: 44px;53    stroke: #555;54    stroke-width: 6;55    fill: none;56    stroke-linecap: round;57  }58 59  /* New collection row */60  .new-collection {61    display: flex;62    align-items: center;63    gap: 24px;64    padding: 36px 60px;65    font-size: 44px;66    color: #3d3d3d;67  }68  .plus-circle {69    width: 64px;70    height: 64px;71    border-radius: 50%;72    border: 6px solid #2F7F79;73    display: inline-flex;74    align-items: center;75    justify-content: center;76  }77  .plus-circle svg {78    width: 32px;79    height: 32px;80    fill: none;81    stroke: #2F7F79;82    stroke-width: 8;83    stroke-linecap: round;84  }85  .divider {86    height: 1px;87    background: #EEEEEE;88    margin: 0 0 8px 0;89  }90 91  /* List */92  .list {93    padding-top: 16px;94  }95  .row {96    display: flex;97    align-items: center;98    gap: 28px;99    padding: 28px 60px;100  }101  .radio {102    width: 58px;103    height: 58px;104    border-radius: 50%;105    border: 6px solid #CFCFCF;106    box-sizing: border-box;107  }108  .label {109    font-size: 48px;110    color: #4A4A4A;111  }112 113  /* Done button */114  .bottom-area {115    position: absolute;116    left: 0;117    right: 0;118    bottom: 140px;119    display: flex;120    justify-content: center;121    pointer-events: none;122  }123  .btn {124    pointer-events: auto;125    width: 780px;126    height: 132px;127    background: #2F7F79;128    color: #FFFFFF;129    border-radius: 66px;130    display: flex;131    align-items: center;132    justify-content: center;133    font-size: 46px;134    font-weight: 700;135    box-shadow: 0 6px 12px rgba(0,0,0,0.08);136  }137 138  /* Bottom navigation/gesture area */139  .nav-bar {140    position: absolute;141    left: 0;142    right: 0;143    bottom: 0;144    height: 120px;145    background: #0D0D0D;146    display: flex;147    align-items: center;148    justify-content: center;149  }150  .gesture-pill {151    width: 200px;152    height: 12px;153    border-radius: 6px;154    background: #D8D8D8;155    opacity: 0.9;156  }157</style>158</head>159<body>160<div id="render-target">161  <div class="status-bar"></div>162 163  <div class="header">164    <div class="title">Collections</div>165    <div class="close-btn" aria-label="Close">166      <svg viewBox="0 0 24 24">167        <path d="M5 5 L19 19 M19 5 L5 19"></path>168      </svg>169    </div>170  </div>171 172  <div class="new-collection">173    <div class="plus-circle" aria-hidden="true">174      <svg viewBox="0 0 24 24">175        <path d="M12 5 L12 19 M5 12 L19 12"></path>176      </svg>177    </div>178    <div class="label" style="font-weight:600;color:#4a4a4a;">New Collection</div>179  </div>180  <div class="divider"></div>181 182  <div class="list">183    <div class="row">184      <div class="radio"></div>185      <div class="label">Save Recipe</div>186    </div>187    <div class="row">188      <div class="radio"></div>189      <div class="label">Breakfasts</div>190    </div>191    <div class="row">192      <div class="radio"></div>193      <div class="label">Desserts</div>194    </div>195    <div class="row">196      <div class="radio"></div>197      <div class="label">Dinners</div>198    </div>199    <div class="row">200      <div class="radio"></div>201      <div class="label">Drinks</div>202    </div>203    <div class="row">204      <div class="radio"></div>205      <div class="label">Sides</div>206    </div>207  </div>208 209  <div class="bottom-area">210    <div class="btn">Done</div>211  </div>212 213  <div class="nav-bar">214    <div class="gesture-pill"></div>215  </div>216</div>217</body>218</html>