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; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121416;15    color: #E7E7E7;16    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;17  }18 19  /* Status bar */20  .status {21    height: 88px;22    padding: 24px 30px 0 30px;23    font-size: 34px;24    color: #EDEDED;25    display: flex;26    align-items: center;27    justify-content: space-between;28    opacity: 0.9;29  }30  .status-right {31    display: flex;32    align-items: center;33    gap: 20px;34    font-size: 28px;35    color: #B0B6BC;36  }37  .status-dot { width: 8px; height: 8px; background:#B0B6BC; border-radius:50%; display:inline-block; }38 39  /* Search bar */40  .search-wrap {41    padding: 10px 30px 0 30px;42  }43  .search-bar {44    height: 96px;45    background: #1C2125;46    border: 1px solid #2A2F34;47    border-radius: 30px;48    display: flex;49    align-items: center;50    padding: 0 24px;51    gap: 22px;52  }53  .search-text {54    flex: 1;55    font-size: 36px;56    color: #C7CDD3;57  }58  .view-icon {59    width: 74px;60    height: 74px;61    border-radius: 18px;62    display: flex;63    align-items: center;64    justify-content: center;65    background: transparent;66  }67  .avatar {68    width: 74px;69    height: 74px;70    border-radius: 50%;71    background: #755B52;72    color: #F2F2F2;73    display: flex;74    align-items: center;75    justify-content: center;76    font-weight: 600;77    font-size: 34px;78  }79 80  /* Notes grid */81  .notes {82    padding: 30px;83    display: grid;84    grid-template-columns: repeat(2, 1fr);85    gap: 26px;86  }87  .note {88    background: #171A1D;89    border: 1px solid #2A2F34;90    border-radius: 26px;91    min-height: 280px;92    padding: 32px;93    box-sizing: border-box;94  }95  .note h3 {96    margin: 0 0 18px 0;97    font-size: 40px;98    font-weight: 600;99    color: #EDEDED;100    letter-spacing: 0.2px;101  }102  .note p {103    margin: 6px 0 22px 0;104    font-size: 34px;105    color: #C7CDD3;106    line-height: 1.25;107  }108  .time-pill {109    display: inline-flex;110    align-items: center;111    gap: 10px;112    background: #2A2F34;113    color: #AAB2B9;114    padding: 12px 18px;115    border-radius: 14px;116    font-size: 28px;117  }118 119  /* Snackbar */120  .snackbar {121    position: absolute;122    left: 30px;123    bottom: 340px;124    width: 1020px;125    height: 110px;126    background: #E7E9ED;127    color: #1C1F23;128    border-radius: 18px;129    display: flex;130    align-items: center;131    justify-content: space-between;132    padding: 0 26px;133    box-sizing: border-box;134    font-size: 36px;135  }136  .snackbar a {137    color: #2B6BEA;138    text-decoration: none;139    font-weight: 600;140  }141 142  /* Bottom toolbar */143  .toolbar {144    position: absolute;145    left: 0;146    bottom: 144px;147    width: 1080px;148    height: 140px;149    background: #121416;150    border-top: 1px solid #1F2428;151    display: flex;152    align-items: center;153    justify-content: space-evenly;154  }155  .tool {156    width: 96px;157    height: 96px;158    border-radius: 18px;159    display: flex;160    align-items: center;161    justify-content: center;162    color: #9AA0A6;163  }164 165  /* FAB */166  .fab {167    position: absolute;168    right: 30px;169    bottom: 190px;170    width: 120px;171    height: 120px;172    border-radius: 28px;173    background: #1C2125;174    border: 1px solid #2A2F34;175    box-shadow: 0 8px 24px rgba(0,0,0,0.35);176    display: flex;177    align-items: center;178    justify-content: center;179  }180  .plus {181    width: 64px;182    height: 64px;183    position: relative;184  }185  .plus::before, .plus::after {186    content: "";187    position: absolute;188    left: 50%;189    top: 50%;190    transform: translate(-50%, -50%);191    border-radius: 6px;192  }193  .plus::before {194    width: 14px;195    height: 64px;196    background: #2B6BEA; /* blue vertical */197  }198  .plus::after {199    width: 64px;200    height: 14px;201    background: #F4B400; /* yellow horizontal */202  }203 204  /* Gesture pill */205  .gesture {206    position: absolute;207    bottom: 60px;208    left: 50%;209    transform: translateX(-50%);210    width: 320px;211    height: 16px;212    background: #D6D6D6;213    border-radius: 10px;214    opacity: 0.8;215  }216 217  /* Muted placeholders for empty notes */218  .empty { opacity: 0.35; }219</style>220</head>221<body>222<div id="render-target">223 224  <!-- Status bar -->225  <div class="status">226    <div>6:33</div>227    <div class="status-right">228      <span class="status-dot"></span>229      <span class="status-dot"></span>230      <span class="status-dot"></span>231      <span class="status-dot"></span>232      <svg width="44" height="44" viewBox="0 0 24 24">233        <path d="M3 8c4 0 6 6 9 6s5-6 9-6" stroke="#B0B6BC" stroke-width="2" fill="none" stroke-linecap="round"/>234      </svg>235      <svg width="44" height="44" viewBox="0 0 24 24">236        <path d="M17 7H7a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10M20 7v10" stroke="#B0B6BC" stroke-width="2" fill="none" stroke-linecap="round"/>237      </svg>238    </div>239  </div>240 241  <!-- Search bar -->242  <div class="search-wrap">243    <div class="search-bar">244      <div class="view-icon">245        <svg width="54" height="54" viewBox="0 0 24 24">246          <path d="M3 6h18M3 12h18M3 18h14" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round"/>247        </svg>248      </div>249      <div class="search-text">Search your notes</div>250      <div class="view-icon">251        <svg width="54" height="54" viewBox="0 0 24 24">252          <rect x="4" y="6" width="7" height="5" rx="1" fill="none" stroke="#9AA0A6" stroke-width="2"/>253          <rect x="13" y="6" width="7" height="5" rx="1" fill="none" stroke="#9AA0A6" stroke-width="2"/>254          <rect x="4" y="13" width="7" height="5" rx="1" fill="none" stroke="#9AA0A6" stroke-width="2"/>255          <rect x="13" y="13" width="7" height="5" rx="1" fill="none" stroke="#9AA0A6" stroke-width="2"/>256        </svg>257      </div>258      <div class="avatar">C</div>259    </div>260  </div>261 262  <!-- Notes grid -->263  <div class="notes">264    <div class="note">265      <h3>appointment with doctor</h3>266      <p>appointment with smith</p>267      <div class="time-pill">268        <svg width="28" height="28" viewBox="0 0 24 24">269          <circle cx="12" cy="12" r="9" stroke="#9AA0A6" stroke-width="2" fill="none"/>270          <path d="M12 7v6l4 2" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>271        </svg>272        <span>Today, 6:00 PM</span>273      </div>274    </div>275 276    <div class="note empty"></div>277 278    <div class="note">279      <h3>swimming class</h3>280      <p>The swimming class is scheduled for 10 august at 11 am</p>281    </div>282 283    <div class="note empty"></div>284 285    <div class="note">286      <h3>Holiday</h3>287      <p>Hello</p>288    </div>289 290    <div class="note empty"></div>291  </div>292 293  <!-- Snackbar -->294  <div class="snackbar">295    <div>Note moved to trash</div>296    <a href="#">Undo</a>297  </div>298 299  <!-- Floating action button -->300  <div class="fab">301    <div class="plus"></div>302  </div>303 304  <!-- Bottom toolbar -->305  <div class="toolbar">306    <div class="tool">307      <svg width="54" height="54" viewBox="0 0 24 24">308        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#9AA0A6" stroke-width="2" fill="none"/>309        <path d="M7 9h10M7 13h6" stroke="#9AA0A6" stroke-width="2" stroke-linecap="round"/>310      </svg>311    </div>312    <div class="tool">313      <svg width="54" height="54" viewBox="0 0 24 24">314        <path d="M4 16l5-9 4 6 3-4 4 7" stroke="#9AA0A6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>315      </svg>316    </div>317    <div class="tool">318      <svg width="54" height="54" viewBox="0 0 24 24">319        <path d="M12 4a5 5 0 0 1 5 5v4l2 3H5l2-3V9a5 5 0 0 1 5-5z" stroke="#9AA0A6" stroke-width="2" fill="none"/>320      </svg>321    </div>322    <div class="tool">323      <svg width="54" height="54" viewBox="0 0 24 24">324        <rect x="3" y="5" width="18" height="14" rx="2" stroke="#9AA0A6" stroke-width="2" fill="none"/>325        <circle cx="12" cy="12" r="4" stroke="#9AA0A6" stroke-width="2" fill="none"/>326      </svg>327    </div>328  </div>329 330  <!-- Gesture pill -->331  <div class="gesture"></div>332 333</div>334</body>335</html>