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", Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 24px;21    left: 32px;22    right: 32px;23    height: 64px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #EDEDED;28    font-size: 42px;29    letter-spacing: 0.5px;30  }31  .status-left { display: flex; align-items: center; gap: 24px; }32  .status-icons { display: flex; align-items: center; gap: 14px; }33  .dot {34    width: 24px; height: 24px; border-radius: 50%;35    background: #EDEDED; opacity: 0.9;36  }37  .status-right { display: flex; align-items: center; gap: 24px; }38  .status-icon { width: 40px; height: 40px; opacity: 0.9; }39 40  /* Search / app bar */41  .search-wrap {42    position: absolute;43    top: 108px;44    left: 32px;45    right: 32px;46    height: 120px;47    background: #23262B;48    border-radius: 28px;49    display: flex;50    align-items: center;51    padding: 0 28px;52    gap: 26px;53    color: #C9D1D9;54  }55  .hamburger { width: 52px; height: 52px; }56  .search-input {57    flex: 1;58    font-size: 42px;59    color: #C9D1D9;60  }61  .view-toggle { width: 64px; height: 64px; opacity: 0.85; }62  .avatar {63    width: 86px; height: 86px; border-radius: 50%;64    background: #7A5D51; color: #EDEDED;65    display: flex; align-items: center; justify-content: center;66    font-weight: 600; font-size: 46px;67    box-shadow: 0 2px 6px rgba(0,0,0,0.4);68  }69 70  /* Notes grid */71  .content {72    position: absolute;73    top: 268px;74    left: 28px;75    right: 28px;76    bottom: 250px;77    padding-right: 8px;78  }79  .notes-grid {80    display: grid;81    grid-template-columns: 1fr 1fr;82    gap: 28px;83  }84  .note {85    background: #191C1F;86    border: 2px solid #3A4046;87    border-radius: 28px;88    color: #EDEDED;89    padding: 32px;90  }91  .note h3 {92    margin: 0 0 18px 0;93    font-size: 46px;94    font-weight: 700;95    color: #FFFFFF;96  }97  .note p {98    margin: 0;99    font-size: 38px;100    line-height: 1.35;101    color: #B0B6BC;102  }103  .note.small { min-height: 260px; }104  .note.medium { min-height: 360px; }105  .note.large { min-height: 460px; }106 107  .pill {108    margin-top: 22px;109    display: inline-flex;110    align-items: center;111    gap: 16px;112    background: #2C3136;113    color: #B7BDC4;114    border-radius: 22px;115    padding: 12px 18px;116    font-size: 32px;117  }118  .pill svg { width: 34px; height: 34px; opacity: 0.8; }119 120  /* Bottom toolbar */121  .bottom-bar {122    position: absolute;123    left: 0; right: 0; bottom: 0;124    height: 160px;125    background: #16191C;126    border-top-left-radius: 28px;127    border-top-right-radius: 28px;128    box-shadow: 0 -4px 12px rgba(0,0,0,0.45);129    display: flex;130    align-items: center;131    justify-content: space-evenly;132  }133  .tool {134    width: 80px; height: 80px;135    display: flex; align-items: center; justify-content: center;136    opacity: 0.9;137  }138  .tool svg { width: 72px; height: 72px; fill: none; stroke: #B7BDC4; stroke-width: 6; }139 140  /* Floating Add button */141  .fab {142    position: absolute;143    right: 36px;144    bottom: 120px;145    width: 164px; height: 164px;146    border-radius: 36px;147    background: #1C2024;148    box-shadow: 0 10px 24px rgba(0,0,0,0.55);149    display: flex; align-items: center; justify-content: center;150  }151  .plus {152    position: relative;153    width: 84px; height: 84px;154  }155  .plus .bar {156    position: absolute; left: 0; right: 0; top: 36px; height: 12px; border-radius: 6px;157  }158  .plus .bar.red { background: #EA4335; }159  .plus .bar.blue { background: #4285F4; transform: rotate(90deg); top: 0; bottom: 0; left: 36px; width: 12px; height: 100%; border-radius: 6px; }160  .plus .bar.yellow { background: #FBBC05; width: 42px; left: 42px; }161  .plus .bar.green { background: #34A853; width: 42px; right: 42px; }162 163  /* Gesture bar */164  .gesture {165    position: absolute;166    bottom: 26px;167    left: 50%;168    transform: translateX(-50%);169    width: 420px;170    height: 18px;171    background: #DDDDDD;172    border-radius: 9px;173    opacity: 0.9;174  }175</style>176</head>177<body>178<div id="render-target">179  <!-- Status bar -->180  <div class="status-bar">181    <div class="status-left">182      <div>5:55</div>183      <div class="status-icons">184        <div class="dot"></div>185        <div class="dot"></div>186        <div class="dot"></div>187        <div class="dot"></div>188        <div class="dot" style="opacity:0.6;"></div>189      </div>190    </div>191    <div class="status-right">192      <!-- Wi-Fi -->193      <svg class="status-icon" viewBox="0 0 24 24">194        <path fill="#EDEDED" d="M12 18a2 2 0 1 0 .001 4.001A2 2 0 0 0 12 18Zm-7-6a13 13 0 0 1 14 0l-2 2a9 9 0 0 0-10 0l-2-2Zm-3-4a17 17 0 0 1 20 0l-2.5 2.5a13 13 0 0 0-15 0L2 8Z"/>195      </svg>196      <!-- Battery -->197      <svg class="status-icon" viewBox="0 0 24 24">198        <rect x="1" y="6" width="18" height="12" rx="2" ry="2" fill="#EDEDED"></rect>199        <rect x="20" y="9" width="3" height="6" rx="1" fill="#EDEDED"></rect>200        <rect x="3" y="8" width="12" height="8" fill="#121212"></rect>201      </svg>202    </div>203  </div>204 205  <!-- Search/App bar -->206  <div class="search-wrap">207    <!-- Hamburger -->208    <svg class="hamburger" viewBox="0 0 24 24">209      <rect x="3" y="5" width="18" height="2" fill="#C9D1D9"></rect>210      <rect x="3" y="11" width="18" height="2" fill="#C9D1D9"></rect>211      <rect x="3" y="17" width="18" height="2" fill="#C9D1D9"></rect>212    </svg>213 214    <div class="search-input">Search your notes</div>215 216    <!-- View toggle (stacked layout icon) -->217    <svg class="view-toggle" viewBox="0 0 24 24">218      <rect x="4" y="5" width="16" height="4" rx="1.2" fill="#C9D1D9"></rect>219      <rect x="4" y="13" width="16" height="4" rx="1.2" fill="#C9D1D9"></rect>220    </svg>221 222    <!-- Avatar -->223    <div class="avatar">C</div>224  </div>225 226  <!-- Notes grid content -->227  <div class="content">228    <div class="notes-grid">229      <!-- Left column: Grocery List -->230      <div class="note large">231        <h3>Grocery List</h3>232        <p>Quinoa, dairy products,</p>233        <p>fruits and vegetables,</p>234        <p>and lean meats</p>235      </div>236 237      <!-- Right column: Empty card -->238      <div class="note medium"></div>239 240      <!-- Left column: Appointment -->241      <div class="note medium">242        <h3 style="text-transform: none;">appointment with doctor</h3>243        <p>appointment with smith</p>244        <div class="pill">245          <svg viewBox="0 0 24 24">246            <path d="M12 5v4M12 5l-2 2M12 5l2 2" stroke="#B7BDC4" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>247            <path d="M5 12a7 7 0 1 1 14 0" stroke="#B7BDC4" stroke-width="2" fill="none" stroke-linecap="round"></path>248          </svg>249          Yesterday, 6:00 PM250        </div>251      </div>252 253      <!-- Right column: Empty card -->254      <div class="note small"></div>255 256      <!-- Left column: Holiday -->257      <div class="note small">258        <h3>Holiday</h3>259        <p>Hello</p>260      </div>261 262      <!-- Right column: Swimming class -->263      <div class="note medium">264        <h3>swimming class</h3>265        <p>The swimming class</p>266        <p>is scheduled for 10</p>267        <p>august at 11 am</p>268      </div>269    </div>270  </div>271 272  <!-- Bottom toolbar -->273  <div class="bottom-bar">274    <!-- Checklist -->275    <div class="tool">276      <svg viewBox="0 0 24 24">277        <rect x="3" y="3" width="18" height="18" rx="3"></rect>278        <path d="M7 12l3 3 7-7" stroke="#B7BDC4" stroke-width="6" fill="none" stroke-linecap="round"></path>279      </svg>280    </div>281    <!-- Brush -->282    <div class="tool">283      <svg viewBox="0 0 24 24">284        <path d="M3 20c3-1 4-3 5-5l11-11 3 3-11 11c-2 1-4 2-5 5H3Z"></path>285      </svg>286    </div>287    <!-- Microphone -->288    <div class="tool">289      <svg viewBox="0 0 24 24">290        <rect x="9" y="3" width="6" height="10" rx="3"></rect>291        <path d="M5 10c0 4 3 7 7 7s7-3 7-7M12 17v4" stroke="#B7BDC4" stroke-width="6" fill="none" stroke-linecap="round"></path>292      </svg>293    </div>294    <!-- Image -->295    <div class="tool">296      <svg viewBox="0 0 24 24">297        <rect x="3" y="4" width="18" height="16" rx="2"></rect>298        <circle cx="9" cy="10" r="2.5" stroke="#B7BDC4" stroke-width="6" fill="none"></circle>299        <path d="M4 18l6-6 4 4 6-6" stroke="#B7BDC4" stroke-width="6" fill="none" stroke-linecap="round"></path>300      </svg>301    </div>302  </div>303 304  <!-- Floating Add button -->305  <div class="fab">306    <div class="plus">307      <div class="bar red"></div>308      <div class="bar blue"></div>309      <div class="bar yellow"></div>310      <div class="bar green"></div>311    </div>312  </div>313 314  <!-- Gesture bar -->315  <div class="gesture"></div>316</div>317</body>318</html>