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>Grocery List - Theme Picker</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: Arial, Helvetica, sans-serif;13    color: #E0E0E0;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #121212;21  }22 23  /* Status bar (mock) */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    right: 0;29    height: 88px;30    padding: 0 36px;31    display: flex;32    align-items: center;33    justify-content: space-between;34    color: #eaeaea;35    opacity: 0.9;36    font-size: 34px;37    letter-spacing: 1px;38  }39  .status-icons {40    display: flex;41    gap: 26px;42    align-items: center;43  }44  .status-pill {45    width: 38px;46    height: 22px;47    border-radius: 12px;48    border: 2px solid #eaeaea;49    position: relative;50  }51  .status-pill::after {52    content: "";53    position: absolute;54    top: 4px;55    right: 4px;56    width: 6px;57    height: 14px;58    background: #eaeaea;59  }60  .wifi {61    width: 34px;62    height: 34px;63  }64 65  /* Top app bar */66  .app-bar {67    position: absolute;68    top: 88px;69    left: 0;70    right: 0;71    height: 96px;72    display: flex;73    align-items: center;74    padding: 0 36px;75  }76  .app-left, .app-right {77    display: flex;78    align-items: center;79  }80  .app-right {81    margin-left: auto;82    gap: 40px;83  }84  .icon {85    width: 56px;86    height: 56px;87    opacity: 0.45;88  }89 90  /* Content */91  .content {92    position: absolute;93    left: 56px;94    right: 56px;95    top: 240px;96  }97  .title {98    font-size: 84px;99    font-weight: 600;100    color: #9E9E9E;101    margin: 0 0 18px 0;102    letter-spacing: 0.5px;103  }104  .subtitle {105    font-size: 40px;106    line-height: 56px;107    color: #8A8A8A;108    max-width: 880px;109  }110 111  /* Bottom sheet */112  .bottom-sheet {113    position: absolute;114    left: 0;115    right: 0;116    bottom: 0;117    height: 580px;118    background: #263238;119    border-top-left-radius: 24px;120    border-top-right-radius: 24px;121    padding: 36px 36px 140px 36px;122    box-sizing: border-box;123  }124  .section-title {125    color: #B0BEC5;126    font-size: 38px;127    margin: 16px 0 24px 12px;128  }129  .row {130    display: flex;131    align-items: center;132    gap: 34px;133    padding: 0 8px 16px;134  }135  .swatch {136    width: 120px;137    height: 120px;138    border-radius: 60px;139    border: 2px solid rgba(255,255,255,0.3);140    position: relative;141    box-sizing: border-box;142  }143  .swatch.selected {144    border: 6px solid #8BC6FF;145  }146  .check-badge {147    position: absolute;148    left: -10px;149    top: -10px;150    width: 44px;151    height: 44px;152    border-radius: 22px;153    background: #8BC6FF;154    display: flex;155    align-items: center;156    justify-content: center;157  }158  .bg-thumb {159    display: flex;160    align-items: center;161    justify-content: center;162    width: 120px;163    height: 120px;164    border-radius: 60px;165    background: #E0E0E0;166    border: 1px solid #BDBDBD;167    color: #757575;168    font-size: 22px;169    text-align: center;170    box-sizing: border-box;171    position: relative;172  }173  .bg-thumb.selected {174    outline: 6px solid #8BC6FF;175    outline-offset: 0;176  }177 178  /* Gesture bar */179  .gesture-bar {180    position: absolute;181    bottom: 24px;182    left: 50%;183    transform: translateX(-50%);184    width: 220px;185    height: 10px;186    border-radius: 6px;187    background: rgba(255,255,255,0.7);188  }189</style>190</head>191<body>192<div id="render-target">193 194  <!-- Status bar mock -->195  <div class="status-bar">196    <div>5:57</div>197    <div class="status-icons">198      <svg class="wifi" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2">199        <path d="M2 8a16 16 0 0 1 20 0" />200        <path d="M5 12a11 11 0 0 1 14 0" />201        <path d="M8 16a6 6 0 0 1 8 0" />202        <circle cx="12" cy="20" r="1.6" fill="#ffffff" stroke="none"/>203      </svg>204      <div class="status-pill"></div>205    </div>206  </div>207 208  <!-- App bar -->209  <div class="app-bar">210    <div class="app-left">211      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round">212        <path d="M15 18l-6-6 6-6"/>213      </svg>214    </div>215    <div class="app-right">216      <!-- Bell -->217      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">218        <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"/>219        <path d="M6 16v-5a6 6 0 1 1 12 0v5l2 2H4l2-2z"/>220      </svg>221      <!-- Bell with dot -->222      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">223        <path d="M12 22a2 2 0 0 0 2-2h-4a2 2 0 0 0 2 2z"/>224        <path d="M6 16v-5a6 6 0 0 1 8.5-5.4"/>225        <path d="M20 9v2l2 2H4l2-2v-1"/>226        <circle cx="19" cy="5" r="2" fill="#9E9E9E" stroke="none"/>227      </svg>228      <!-- Archive -->229      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">230        <rect x="3" y="4" width="18" height="4" rx="1"></rect>231        <path d="M5 8v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8"/>232        <path d="M9 13h6"/>233      </svg>234      <!-- Download -->235      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="#9E9E9E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">236        <path d="M12 3v12"/>237        <path d="M7 10l5 5 5-5"/>238        <path d="M5 21h14"/>239      </svg>240    </div>241  </div>242 243  <!-- Content area -->244  <div class="content">245    <h1 class="title">Grocery List</h1>246    <div class="subtitle">247      Quinoa, dairy products, fruits and vegetables, and lean meats248    </div>249  </div>250 251  <!-- Bottom sheet with color/background options -->252  <div class="bottom-sheet">253    <div class="section-title">Color</div>254    <div class="row">255      <div class="swatch selected" style="background:#212121;">256        <div class="check-badge">257          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">258            <path d="M5 12l4 4 8-8" stroke="#102A43" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>259          </svg>260        </div>261      </div>262      <div class="swatch" style="background:#8E1537;"></div>263      <div class="swatch" style="background:#7A331E;"></div>264      <div class="swatch" style="background:#996300;"></div>265      <div class="swatch" style="background:#21533E;"></div>266      <div class="swatch" style="background:#0E6D6D;"></div>267      <div class="swatch" style="background:#2E6C8E;"></div>268    </div>269 270    <div class="section-title" style="margin-top: 14px;">Background</div>271    <div class="row">272      <div class="bg-thumb selected">273        [IMG: No Background]274        <div class="check-badge">275          <svg width="24" height="24" viewBox="0 0 24 24" fill="none">276            <path d="M5 12l4 4 8-8" stroke="#102A43" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>277          </svg>278        </div>279      </div>280      <div class="bg-thumb">[IMG: Abstract Art]</div>281      <div class="bg-thumb">[IMG: Brush Strokes]</div>282      <div class="bg-thumb">[IMG: Sunset Arch]</div>283      <div class="bg-thumb">[IMG: Beach Umbrella]</div>284    </div>285  </div>286 287  <!-- Gesture navigation bar -->288  <div class="gesture-bar"></div>289</div>290</body>291</html>