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>Notes UI - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #0f2224;15    color: #e7f1f1;16  }17 18  /* Status bar */19  .status-bar {20    position: absolute;21    top: 0;22    left: 0;23    right: 0;24    height: 96px;25    padding: 0 36px;26    display: flex;27    align-items: center;28    justify-content: space-between;29    color: #e8f0f0;30    font-size: 32px;31    opacity: 0.9;32  }33  .status-left, .status-right { display: flex; align-items: center; gap: 22px; }34  .status-icon { width: 32px; height: 32px; opacity: 0.9; }35 36  /* Search/App bar */37  .search-wrap {38    position: absolute;39    top: 120px;40    left: 36px;41    right: 36px;42    height: 112px;43    background: #183538;44    border-radius: 56px;45    display: flex;46    align-items: center;47    padding: 0 28px;48    box-shadow: 0 2px 0 rgba(0,0,0,0.12) inset;49  }50  .hamburger { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }51  .search-placeholder {52    flex: 1;53    margin: 0 12px;54    color: #9fb2b4;55    font-size: 38px;56  }57  .view-toggle { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-right: 12px; }58  .avatar {59    width: 88px; height: 88px; border-radius: 44px;60    background: #0a6d65;61    color: #d6ffff;62    display: flex; align-items: center; justify-content: center;63    font-weight: 700; font-size: 42px;64    box-shadow: 0 0 0 6px rgba(0,0,0,0.2) inset;65  }66 67  /* Card grid */68  .grid {69    position: absolute;70    top: 280px;71    left: 36px;72    right: 36px;73    display: grid;74    grid-template-columns: 1fr 1fr;75    gap: 36px;76  }77  .note {78    border: 2px solid #35585f;79    border-radius: 28px;80    min-height: 280px;81    padding: 36px;82    background: rgba(14, 36, 39, 0.35);83    color: #e8f6f7;84  }85  .note h3 {86    margin: 0 0 18px;87    font-size: 46px;88    font-weight: 700;89    letter-spacing: 0.2px;90  }91  .note p {92    margin: 0;93    font-size: 36px;94    color: #c6d7d8;95  }96 97  /* Snackbar */98  .snackbar {99    position: absolute;100    left: 24px;101    right: 24px;102    bottom: 300px;103    background: #dbe8ee;104    color: #203436;105    border-radius: 18px;106    padding: 28px 32px;107    display: flex;108    align-items: center;109    justify-content: space-between;110    font-size: 38px;111    box-shadow: 0 8px 24px rgba(0,0,0,0.25);112  }113  .snackbar .action { color: #0b7abf; font-weight: 600; }114 115  /* Bottom actions bar */116  .bottom-bar {117    position: absolute;118    left: 0; right: 0; bottom: 0;119    height: 160px;120    background: #102a2d;121    border-top-left-radius: 28px;122    border-top-right-radius: 28px;123    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);124  }125  .bottom-icons {126    position: absolute;127    left: 60px; right: 60px; bottom: 40px;128    height: 80px;129    display: flex; align-items: center; justify-content: space-between;130  }131  .bicon {132    width: 72px; height: 72px; border-radius: 16px;133    display: flex; align-items: center; justify-content: center;134    color: #b8ced0;135  }136 137  /* FAB */138  .fab {139    position: absolute;140    right: 52px;141    bottom: 136px;142    width: 132px; height: 132px;143    background: #113638;144    border-radius: 28px;145    box-shadow: 0 10px 24px rgba(0,0,0,0.5);146    display: flex; align-items: center; justify-content: center;147  }148  .fab .plus {149    position: relative; width: 64px; height: 64px;150  }151  .plus::before, .plus::after {152    content: "";153    position: absolute;154    left: 50%; top: 50%;155    transform: translate(-50%, -50%);156    border-radius: 4px;157  }158  .plus::before {159    width: 64px; height: 12px;160    background: linear-gradient(90deg, #ea4335 0 50%, #34a853 50% 100%);161  }162  .plus::after {163    width: 12px; height: 64px;164    background: linear-gradient(180deg, #4285f4 0 50%, #fbbc05 50% 100%);165  }166 167  /* Gesture pill */168  .gesture-pill {169    position: absolute;170    left: 50%;171    transform: translateX(-50%);172    bottom: 24px;173    width: 300px;174    height: 14px;175    background: #e9eef0;176    border-radius: 8px;177    opacity: 0.9;178  }179</style>180</head>181<body>182<div id="render-target">183 184  <!-- Status Bar -->185  <div class="status-bar">186    <div class="status-left">187      <div>11:46</div>188      <!-- Simple status glyphs -->189      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f0f0"><path d="M3 4h18v2H3zM3 9h12v2H3zM3 14h18v2H3zM3 19h12v2H3z"/></svg>190      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f0f0"><path d="M17 3H7v2h10V3zM19 7H5v2h14V7zM21 11H3v2h18v-2z"/></svg>191      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f0f0"><path d="M7 2h10v2H7zM5 6h14v2H5zM3 10h18v2H3zM5 14h14v2H5zM7 18h10v2H7z"/></svg>192      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f0f0"><path d="M19 18H5v2h14v-2zM4 8l8 8 8-8H4z"/></svg>193    </div>194    <div class="status-right">195      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f0f0"><path d="M12 3l4 7h-8l4-7zm0 18a5 5 0 100-10 5 5 0 000 10z"/></svg>196      <svg class="status-icon" viewBox="0 0 24 24" fill="#e8f0f0"><path d="M16 7h-1V3H9v4H8a2 2 0 00-2 2v10h12V9a2 2 0 00-2-2zM11 5h2v2h-2V5z"/></svg>197      <div>100%</div>198    </div>199  </div>200 201  <!-- Search/App bar -->202  <div class="search-wrap">203    <div class="hamburger">204      <svg width="44" height="44" viewBox="0 0 24 24" fill="#b9cbcc">205        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/>206      </svg>207    </div>208    <div class="search-placeholder">Search your notes</div>209    <div class="view-toggle">210      <svg width="44" height="44" viewBox="0 0 24 24" fill="#b9cbcc">211        <path d="M4 5h7v7H4zM13 5h7v7h-7zM4 14h7v7H4zM13 14h7v7h-7z"/>212      </svg>213    </div>214    <div class="avatar">C</div>215  </div>216 217  <!-- Notes Grid -->218  <div class="grid">219    <div class="note" style="grid-column: span 1;">220      <h3>Grocery Store Lidl</h3>221      <p>Corn syrup and Jam</p>222    </div>223    <div class="note" style="grid-column: span 1;">224      <h3>Grocery Shopping<br>list</h3>225      <p>Rice, Pulse and Bread</p>226    </div>227    <div class="note" style="grid-column: span 1;">228      <h3>XYZ</h3>229      <p>Mac</p>230    </div>231    <div class="note" style="grid-column: span 1; visibility: hidden;"></div>232  </div>233 234  <!-- Snackbar -->235  <div class="snackbar">236    <div>Note moved to trash</div>237    <div class="action">Undo</div>238  </div>239 240  <!-- Floating Action Button -->241  <div class="fab">242    <div class="plus"></div>243  </div>244 245  <!-- Bottom bar -->246  <div class="bottom-bar">247    <div class="bottom-icons">248      <div class="bicon">249        <!-- Checklist icon -->250        <svg width="48" height="48" viewBox="0 0 24 24" fill="#b8ced0">251          <path d="M9 11l-2 2-1-1-2 2 3 3 4-4-2-2zM12 5h9v2h-9V5zm0 6h9v2h-9v-2zm0 6h9v2h-9v-2z"/>252        </svg>253      </div>254      <div class="bicon">255        <!-- Brush icon -->256        <svg width="48" height="48" viewBox="0 0 24 24" fill="#b8ced0">257          <path d="M7 14c-1.7 0-3 1.3-3 3s-1 3-3 3h9c0-2.2-1.8-4-4-4zm13.7-9.3l-2.4-2.4a1 1 0 00-1.4 0L9 10.2V14h3.8l7.9-7.9a1 1 0 000-1.4z"/>258        </svg>259      </div>260      <div class="bicon">261        <!-- Mic icon -->262        <svg width="48" height="48" viewBox="0 0 24 24" fill="#b8ced0">263          <path d="M12 14a3 3 0 003-3V6a3 3 0 10-6 0v5a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2zM11 19h2v3h-2z"/>264        </svg>265      </div>266      <div class="bicon">267        <!-- Image icon -->268        <svg width="48" height="48" viewBox="0 0 24 24" fill="#b8ced0">269          <path d="M19 5H5a2 2 0 00-2 2v10h18V7a2 2 0 00-2-2zM8 9a2 2 0 110-4 2 2 0 010 4zm-3 8l4-5 3 4 2-2 3 3H5z"/>270        </svg>271      </div>272    </div>273  </div>274 275  <!-- Gesture navigation pill -->276  <div class="gesture-pill"></div>277</div>278</body>279</html>