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 Note</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #1F6772; /* teal note background */15    border-radius: 24px;16    box-shadow: 0 30px 80px rgba(0,0,0,0.25);17    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;18    color: #E6EFF2;19  }20 21  /* Status bar */22  .status-bar {23    position: absolute;24    top: 0;25    left: 0;26    height: 120px;27    width: 100%;28    padding: 20px 36px;29    box-sizing: border-box;30    display: flex;31    align-items: center;32    justify-content: space-between;33    color: #F5F9FA;34    font-weight: 500;35  }36  .status-left {37    display: flex;38    align-items: center;39    gap: 24px;40    font-size: 34px;41  }42  .status-center {43    display: flex;44    align-items: center;45    gap: 18px;46    opacity: 0.85;47  }48  .status-center .dot {49    width: 18px;50    height: 18px;51    background: #F5F9FA;52    border-radius: 50%;53    opacity: 0.6;54  }55  .status-right {56    display: flex;57    align-items: center;58    gap: 26px;59  }60  .status-icon svg {61    width: 42px;62    height: 42px;63    stroke: #F5F9FA;64    fill: none;65    stroke-width: 3;66    opacity: 0.95;67  }68  .battery {69    width: 54px;70    height: 30px;71    border: 3px solid #F5F9FA;72    border-radius: 6px;73    position: relative;74  }75  .battery::after {76    content: "";77    position: absolute;78    right: -10px;79    top: 7px;80    width: 6px;81    height: 16px;82    background: #F5F9FA;83    border-radius: 3px;84  }85  .battery .level {86    position: absolute;87    right: 4px;88    top: 4px;89    bottom: 4px;90    width: 65%;91    background: #F5F9FA;92    border-radius: 4px;93  }94 95  /* Top app bar */96  .app-bar {97    position: absolute;98    top: 140px;99    left: 36px;100    right: 36px;101    height: 100px;102    display: flex;103    align-items: center;104    justify-content: space-between;105  }106  .back-btn svg {107    width: 56px;108    height: 56px;109    stroke: #CFE3E8;110    fill: none;111    stroke-width: 4.5;112  }113  .actions {114    display: flex;115    align-items: center;116    gap: 38px;117  }118  .actions svg {119    width: 52px;120    height: 52px;121    stroke: #CFE3E8;122    fill: none;123    stroke-width: 4;124    opacity: 0.9;125  }126 127  /* Content */128  .content {129    position: absolute;130    left: 72px;131    right: 72px;132    top: 280px;133    color: #E8F1F3;134  }135  .title {136    font-size: 72px;137    line-height: 84px;138    font-weight: 500;139    letter-spacing: 0.5px;140    margin: 0 0 30px 0;141  }142  .desc {143    font-size: 36px;144    line-height: 46px;145    color: #D4E2E6;146    max-width: 900px;147  }148 149  /* Bottom bar */150  .bottom-bar {151    position: absolute;152    left: 24px;153    right: 24px;154    bottom: 120px;155    height: 120px;156    display: flex;157    align-items: center;158    justify-content: space-between;159    color: #C7D8DD;160  }161  .bottom-left {162    display: flex;163    align-items: center;164    gap: 40px;165  }166  .square-btn {167    width: 72px;168    height: 72px;169    border: 3px solid #C7D8DD;170    border-radius: 12px;171    display: flex;172    justify-content: center;173    align-items: center;174    opacity: 0.95;175  }176  .square-btn svg { width: 40px; height: 40px; stroke: #C7D8DD; fill: none; stroke-width: 4; }177  .bottom-icon svg { width: 60px; height: 60px; stroke: #C7D8DD; fill: none; stroke-width: 4; }178  .disabled {179    opacity: 0.35;180  }181  .bottom-center {182    font-size: 32px;183    opacity: 0.9;184  }185  .bottom-right svg { width: 12px; height: 60px; fill: #C7D8DD; }186 187  /* Navigation pill */188  .nav-pill {189    position: absolute;190    bottom: 40px;191    left: 50%;192    transform: translateX(-50%);193    width: 320px;194    height: 14px;195    background: #FFFFFF;196    border-radius: 10px;197    opacity: 0.9;198  }199</style>200</head>201<body>202<div id="render-target">203 204  <!-- Status Bar -->205  <div class="status-bar">206    <div class="status-left">207      <div>5:58</div>208      <div class="status-center">209        <div class="dot"></div>210        <div class="dot"></div>211        <div class="dot"></div>212        <div class="dot"></div>213        <div style="width: 8px; height: 8px; background:#F5F9FA; border-radius:50%; opacity:0.6;"></div>214      </div>215    </div>216    <div class="status-right">217      <div class="status-icon">218        <!-- Wi-Fi -->219        <svg viewBox="0 0 24 24">220          <path d="M2 8c5-4 15-4 20 0"></path>221          <path d="M5 12c4-3 10-3 14 0"></path>222          <path d="M8 16c3-2 5-2 8 0"></path>223          <circle cx="12" cy="19" r="2" fill="#F5F9FA"></circle>224        </svg>225      </div>226      <div class="battery"><div class="level"></div></div>227    </div>228  </div>229 230  <!-- App Bar -->231  <div class="app-bar">232    <div class="back-btn">233      <svg viewBox="0 0 24 24">234        <path d="M15 5 L7 12 L15 19"></path>235      </svg>236    </div>237    <div class="actions">238      <!-- Bell -->239      <svg viewBox="0 0 24 24">240        <path d="M12 3c-3 0-5 2-5 5v3c0 2-1 3-2 4h14c-1-1-2-2-2-4V8c0-3-2-5-5-5z"></path>241        <path d="M10 19c1 2 3 2 4 0"></path>242      </svg>243      <!-- Lock -->244      <svg viewBox="0 0 24 24">245        <rect x="5" y="10" width="14" height="10" rx="2" ry="2"></rect>246        <path d="M8 10V7a4 4 0 018 0v3"></path>247      </svg>248      <!-- Download -->249      <svg viewBox="0 0 24 24">250        <path d="M12 4v9"></path>251        <path d="M8 9l4 4 4-4"></path>252        <path d="M4 20h16"></path>253      </svg>254    </div>255  </div>256 257  <!-- Content -->258  <div class="content">259    <h1 class="title">Grocery List</h1>260    <div class="desc">Quinoa, dairy products, fruits and vegetables, and<br>lean meats</div>261  </div>262 263  <!-- Bottom Bar -->264  <div class="bottom-bar">265    <div class="bottom-left">266      <div class="square-btn">267        <!-- Plus -->268        <svg viewBox="0 0 24 24">269          <path d="M12 5v14"></path>270          <path d="M5 12h14"></path>271        </svg>272      </div>273      <!-- Palette -->274      <div class="bottom-icon">275        <svg viewBox="0 0 24 24">276          <path d="M12 3a9 9 0 000 18h2c2 0 3-2 2-3s-1-1-1-2c0-1 1-2 2-2h1a9 9 0 00-6-11z"></path>277          <circle cx="7.5" cy="12" r="1.5" fill="none"></circle>278          <circle cx="9.5" cy="8" r="1.5" fill="none"></circle>279          <circle cx="14.5" cy="7.5" r="1.5" fill="none"></circle>280        </svg>281      </div>282      <!-- A (text style) -->283      <div class="bottom-icon disabled">284        <svg viewBox="0 0 24 24">285          <path d="M5 20h14"></path>286          <path d="M12 5l6 15"></path>287          <path d="M12 5L6 20"></path>288        </svg>289      </div>290    </div>291    <div class="bottom-center">Edited 5:55 PM</div>292    <div class="bottom-right">293      <!-- More vertical dots -->294      <svg viewBox="0 0 6 24">295        <circle cx="3" cy="4" r="2"></circle>296        <circle cx="3" cy="12" r="2"></circle>297        <circle cx="3" cy="20" r="2"></circle>298      </svg>299    </div>300  </div>301 302  <!-- Navigation pill -->303  <div class="nav-pill"></div>304</div>305</body>306</html>