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: "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0E2C32; /* deep teal backdrop */15    color: #D7E1E4;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0; left: 0; right: 0;22    height: 110px;23    padding: 30px 36px 0 36px;24    color: #EAF2F4;25    font-size: 42px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    opacity: 0.95;30  }31  .status-left {32    display: flex; align-items: center; gap: 22px;33  }34  .status-icons {35    display: flex; align-items: center; gap: 16px;36  }37  .dot {38    width: 22px; height: 22px; background: #EAF2F4; border-radius: 50%; opacity: 0.9;39  }40  .status-right {41    display: flex; align-items: center; gap: 22px;42  }43  .icon {44    width: 40px; height: 40px; display: inline-block;45  }46  .icon svg { width: 100%; height: 100%; fill: none; stroke: #EAF2F4; stroke-width: 3; }47 48  /* Top app bar actions */49  .top-actions {50    position: absolute;51    top: 150px; right: 48px;52    display: flex; gap: 54px;53    color: #91A3A9;54  }55  .top-actions svg { stroke: #91A3A9; }56 57  .back-btn {58    position: absolute;59    top: 170px; left: 36px;60    width: 60px; height: 60px;61  }62  .back-btn svg { stroke: #76878E; stroke-width: 6; }63 64  /* Title and description */65  .content {66    position: absolute;67    top: 320px; left: 72px; right: 72px;68  }69  .title {70    font-size: 72px; font-weight: 500; letter-spacing: 0.2px;71    color: #7D8C91;72    margin-bottom: 24px;73  }74  .subtitle {75    font-size: 36px; line-height: 1.4; color: #6E7D83;76    max-width: 820px;77  }78 79  /* Bottom sheet */80  .bottom-sheet {81    position: absolute;82    left: 0; right: 0; bottom: 0;83    height: 740px;84    background: #256C7B;85    box-shadow: 0 -6px 20px rgba(0,0,0,0.35);86    border-top-left-radius: 0;87    border-top-right-radius: 0;88    padding: 36px 48px;89  }90  .section-title {91    font-size: 40px; font-weight: 600; color: #EAF2F4; margin-bottom: 28px;92  }93  .row { display: flex; align-items: center; gap: 28px; }94  .swatch {95    width: 110px; height: 110px;96    border-radius: 55px;97    border: 3px solid rgba(255,255,255,0.35);98    display: flex; align-items: center; justify-content: center;99    position: relative;100    box-sizing: border-box;101  }102  .swatch.selected {103    border: 5px solid #9BD3EE;104  }105  .swatch .check {106    position: absolute;107    right: -8px; bottom: -8px;108    width: 42px; height: 42px; background: #9BD3EE; border-radius: 50%;109    display: flex; align-items: center; justify-content: center;110  }111  .swatch .check svg { stroke: #155166; stroke-width: 6; }112 113  .swatch .slash svg { stroke: rgba(255,255,255,0.8); stroke-width: 10; }114  .swatch .label {115    color: rgba(255,255,255,0.9); font-size: 30px; font-weight: 600;116  }117 118  /* Color samples */119  .c1 { background: #0F1518; }120  .c2 { background: #8C1836; }121  .c3 { background: #73331E; }122  .c4 { background: #A36A06; }123  .c5 { background: #254E3C; }124  .c6 { background: #0E6A63; }125  .c7 { background: #6CAED3; }126 127  /* Background thumbnails (placeholders) */128  .bg {129    background: #E0E0E0;130    border-color: #9FB6BE;131    color: #757575;132  }133  .bg.selected {134    box-shadow: 0 0 0 8px rgba(155,211,238,0.35);135    border-color: #9BD3EE;136  }137  .bg .mini-check {138    position: absolute;139    right: -6px; top: -6px;140    width: 38px; height: 38px; background: #9BD3EE; border-radius: 50%;141    display: flex; align-items: center; justify-content: center;142  }143  .bg .mini-check svg { stroke: #155166; stroke-width: 6; }144 145  /* Home indicator */146  .home-indicator {147    position: absolute;148    bottom: 24px; left: 50%; transform: translateX(-50%);149    width: 420px; height: 14px; background: #FFFFFF; border-radius: 10px; opacity: 0.9;150  }151</style>152</head>153<body>154<div id="render-target">155 156  <!-- Status Bar -->157  <div class="status-bar">158    <div class="status-left">159      <div>5:57</div>160      <div class="status-icons">161        <div class="dot"></div>162        <div class="dot"></div>163        <div class="dot"></div>164        <div class="dot"></div>165        <div class="dot"></div>166        <div class="dot" style="width:10px;height:10px;opacity:0.6;"></div>167      </div>168    </div>169    <div class="status-right">170      <!-- Wifi -->171      <div class="icon">172        <svg viewBox="0 0 24 24">173          <path d="M2 8c5-4 15-4 20 0" />174          <path d="M6 12c3-2 9-2 12 0" />175          <path d="M10 16c2-1 4-1 6 0" />176          <circle cx="12" cy="20" r="1.5" fill="#EAF2F4" stroke="none"/>177        </svg>178      </div>179      <!-- Battery -->180      <div class="icon">181        <svg viewBox="0 0 30 24">182          <rect x="2" y="4" width="22" height="16" rx="3" />183          <rect x="5" y="7" width="16" height="10" rx="2" fill="#EAF2F4" stroke="none"/>184          <rect x="25" y="8" width="3" height="8" rx="1.5" />185        </svg>186      </div>187    </div>188  </div>189 190  <!-- Back Arrow -->191  <div class="back-btn">192    <svg viewBox="0 0 24 24">193      <path d="M15 4L7 12l8 8" />194    </svg>195  </div>196 197  <!-- Top right actions -->198  <div class="top-actions">199    <!-- Bell -->200    <svg viewBox="0 0 24 24" width="48" height="48">201      <path d="M12 3c-3 0-5 2-5 5v4c0 1-1 2-2 3h14c-1-1-2-2-2-3V8c0-3-2-5-5-5z"/>202      <path d="M10 19c0 1.1 1 2 2 2s2-.9 2-2" />203    </svg>204    <!-- Bell with dot -->205    <svg viewBox="0 0 24 24" width="48" height="48">206      <circle cx="18.5" cy="6" r="2.5" fill="#91A3A9" stroke="none"/>207      <path d="M12 3c-3 0-5 2-5 5v4c0 1-1 2-2 3h14c-1-1-2-2-2-3V8c0-3-2-5-5-5z" />208      <path d="M10 19c0 1.1 1 2 2 2s2-.9 2-2" />209    </svg>210    <!-- Download to tray -->211    <svg viewBox="0 0 24 24" width="48" height="48">212      <path d="M12 4v8" />213      <path d="M8 9l4 4 4-4" />214      <path d="M4 20h16v-5H4z" />215    </svg>216  </div>217 218  <!-- Main Content -->219  <div class="content">220    <div class="title">Grocery List</div>221    <div class="subtitle">Quinoa, dairy products, fruits and vegetables, and lean meats</div>222  </div>223 224  <!-- Bottom Sheet -->225  <div class="bottom-sheet">226    <div class="section-title">Color</div>227    <div class="row" style="margin-bottom: 40px;">228      <div class="swatch c1">229        <div class="slash">230          <svg viewBox="0 0 24 24">231            <path d="M4 20L20 4" />232          </svg>233        </div>234      </div>235      <div class="swatch c2"></div>236      <div class="swatch c3"></div>237      <div class="swatch c4"></div>238      <div class="swatch c5"></div>239      <div class="swatch c6"></div>240      <div class="swatch c7 selected">241        <div class="check">242          <svg viewBox="0 0 24 24">243            <path d="M4 12l5 5 11-11" />244          </svg>245        </div>246      </div>247    </div>248 249    <div class="section-title" style="margin-top: 8px;">Background</div>250    <div class="row">251      <!-- None (selected) -->252      <div class="swatch bg selected" style="background:#E0F3FF;">253        <div class="slash">254          <svg viewBox="0 0 24 24">255            <path d="M4 20L20 4" />256          </svg>257        </div>258        <div class="mini-check">259          <svg viewBox="0 0 24 24">260            <path d="M4 12l5 5 11-11" />261          </svg>262        </div>263      </div>264      <!-- Placeholder background thumbnails -->265      <div class="swatch bg">266        <div class="label">BG</div>267      </div>268      <div class="swatch bg">269        <div class="label">BG</div>270      </div>271      <div class="swatch bg">272        <div class="label">BG</div>273      </div>274      <div class="swatch bg">275        <div class="label">BG</div>276      </div>277    </div>278  </div>279 280  <!-- Home indicator -->281  <div class="home-indicator"></div>282 283</div>284</body>285</html>