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 Mock</title>7<style>8  body {9    margin: 0;10    padding: 0;11    background: transparent;12    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;13    color: #E8EAED;14  }15  #render-target {16    width: 1080px;17    height: 2400px;18    position: relative;19    overflow: hidden;20    background: #1f2125;21  }22 23  /* Status bar */24  .status-bar {25    position: absolute;26    top: 0;27    left: 0;28    width: 1080px;29    height: 92px;30    color: #E8EAED;31    font-size: 36px;32    line-height: 92px;33    padding: 0 32px;34    box-sizing: border-box;35  }36  .status-time {37    float: left;38    opacity: 0.9;39  }40  .status-icons {41    float: right;42    display: flex;43    align-items: center;44    gap: 22px;45    height: 92px;46  }47  .status-icons svg {48    width: 32px;49    height: 32px;50    fill: #E8EAED;51    opacity: 0.9;52  }53 54  /* Search bar */55  .search-wrap {56    position: absolute;57    top: 120px;58    left: 36px;59    right: 36px;60  }61  .search-bar {62    background: #2a2d33;63    height: 112px;64    border-radius: 56px;65    display: flex;66    align-items: center;67    padding: 0 28px;68    box-sizing: border-box;69  }70  .search-left {71    display: flex;72    align-items: center;73    gap: 22px;74  }75  .search-left .icon {76    width: 48px;77    height: 48px;78    fill: #b9bec6;79  }80  .search-placeholder {81    color: #b9bec6;82    font-size: 40px;83    letter-spacing: 0.2px;84  }85  .search-right {86    margin-left: auto;87    display: flex;88    align-items: center;89    gap: 18px;90  }91  .pill-icon {92    width: 64px;93    height: 64px;94    border-radius: 16px;95    display: grid;96    place-items: center;97  }98  .list-toggle svg {99    width: 42px;100    height: 42px;101    fill: #c8ccd2;102  }103  .avatar {104    width: 78px;105    height: 78px;106    border-radius: 50%;107    background: #3d4b52;108    display: grid;109    place-items: center;110    color: #dbe3e8;111    font-weight: 600;112    font-size: 40px;113    box-shadow: inset 0 0 0 8px rgba(0,0,0,0.12);114  }115 116  /* Note card */117  .notes-area {118    position: absolute;119    top: 300px;120    left: 36px;121    right: 36px;122  }123  .note-card {124    width: 680px;125    padding: 32px 36px;126    border: 2px solid #4a4e55;127    border-radius: 28px;128    color: #E8EAED;129    background: rgba(255,255,255,0.02);130  }131  .note-title {132    font-size: 44px;133    font-weight: 700;134    margin: 8px 0 18px 0;135  }136  .note-text {137    font-size: 40px;138    color: #c8ccd2;139    margin: 0 0 8px 0;140  }141 142  /* Bottom bar */143  .bottom-bar {144    position: absolute;145    bottom: 0;146    left: 0;147    width: 1080px;148    height: 170px;149    background: #2a2d33;150    border-top-left-radius: 32px;151    border-top-right-radius: 32px;152    box-shadow: 0 -8px 20px rgba(0,0,0,0.35);153  }154  .bottom-actions {155    position: absolute;156    left: 60px;157    right: 240px;158    top: 38px;159    display: flex;160    justify-content: space-between;161    align-items: center;162  }163  .bottom-actions .icon {164    width: 64px;165    height: 64px;166    fill: #b9bec6;167    opacity: 0.9;168  }169 170  /* Floating action button */171  .fab {172    position: absolute;173    right: 42px;174    bottom: 98px;175    width: 160px;176    height: 160px;177    background: #2a2d33;178    border-radius: 32px;179    box-shadow: 0 18px 28px rgba(0,0,0,0.45), 0 8px 0 rgba(0,0,0,0.35) inset;180    display: grid;181    place-items: center;182  }183  .fab-plus {184    position: relative;185    width: 86px;186    height: 86px;187  }188  .fab-plus .bar {189    position: absolute;190    border-radius: 10px;191  }192  .bar.vert {193    width: 18px;194    height: 86px;195    left: 34px;196    top: 0;197    background: #34a853;198  }199  .bar.horz {200    width: 86px;201    height: 18px;202    left: 0;203    top: 34px;204    background: #ea4335;205  }206  .bar.horz:before, .bar.vert:before {207    content: "";208    position: absolute;209  }210  .bar.horz:before {211    right: -10px;212    top: -18px;213    width: 18px;214    height: 86px;215    background: #4285f4;216    border-radius: 10px;217    transform: rotate(90deg);218    opacity: 0;219  }220  /* Add small colored end caps to hint Google colors */221  .cap-top, .cap-bottom, .cap-left, .cap-right {222    position: absolute;223    width: 18px;224    height: 18px;225    border-radius: 5px;226  }227  .cap-top { top: -2px; left: 34px; background: #fbbc04; }228  .cap-bottom { bottom: -2px; left: 34px; background: #4285f4; }229  .cap-left { left: -2px; top: 34px; background: #34a853; }230  .cap-right { right: -2px; top: 34px; background: #ea4335; }231 232  /* Gesture bar */233  .gesture {234    position: absolute;235    bottom: 24px;236    left: 50%;237    transform: translateX(-50%);238    width: 320px;239    height: 10px;240    background: #e6e6e7;241    border-radius: 8px;242    opacity: 0.9;243  }244</style>245</head>246<body>247<div id="render-target">248 249  <!-- Status Bar -->250  <div class="status-bar">251    <div class="status-time">1:19</div>252    <div class="status-icons">253      <!-- Simple lock icon -->254      <svg viewBox="0 0 24 24">255        <path d="M12 2a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-2V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 1 1 6 0v3H9z"/>256      </svg>257      <!-- Edit/pencil icon -->258      <svg viewBox="0 0 24 24">259        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM21 7.24c0-.33-.13-.65-.37-.88l-2-2a1.25 1.25 0 0 0-1.77 0l-1.83 1.83 3.75 3.75L20.63 7c.24-.23.37-.55.37-.88z"/>260      </svg>261      <!-- WiFi icon -->262      <svg viewBox="0 0 24 24">263        <path d="M12 20.5l2.5-2.5h-5L12 20.5zM2 8.5c5.52-4.67 13.46-4.67 19 0l-1.5 1.7c-4.67-3.9-11.33-3.9-16 0L2 8.5zm3 3.4c3.9-3.1 9.1-3.1 13 0l-1.6 1.7c-2.93-2.2-6.87-2.2-9.8 0L5 11.9zm3 3.4c2.3-1.6 5.7-1.6 8 0l-2 1.8c-1.6-1-2.4-1-4 0l-2-1.8z"/>264      </svg>265      <!-- Battery icon -->266      <svg viewBox="0 0 24 24">267        <path d="M17 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2v2h-2v-2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h10V4h2v2zM5 8v8h14V8H5z"/>268      </svg>269    </div>270  </div>271 272  <!-- Search Bar -->273  <div class="search-wrap">274    <div class="search-bar">275      <div class="search-left">276        <!-- Hamburger -->277        <svg class="icon" viewBox="0 0 24 24">278          <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>279        </svg>280        <div class="search-placeholder">Search your notes</div>281      </div>282      <div class="search-right">283        <div class="pill-icon list-toggle">284          <svg viewBox="0 0 24 24">285            <path d="M4 7h10v3H4V7zm0 7h10v3H4v-3zm13-7h3v3h-3V7zm0 7h3v3h-3v-3z"/>286          </svg>287        </div>288        <div class="avatar">C</div>289      </div>290    </div>291  </div>292 293  <!-- Notes -->294  <div class="notes-area">295    <div class="note-card">296      <div class="note-title">Movies</div>297      <div class="note-text">Kill Bill</div>298    </div>299  </div>300 301  <!-- Floating Action Button -->302  <div class="fab">303    <div class="fab-plus">304      <div class="bar vert"></div>305      <div class="bar horz"></div>306      <div class="cap-top"></div>307      <div class="cap-bottom"></div>308      <div class="cap-left"></div>309      <div class="cap-right"></div>310    </div>311  </div>312 313  <!-- Bottom bar with actions -->314  <div class="bottom-bar">315    <div class="bottom-actions">316      <!-- Checkbox icon -->317      <svg class="icon" viewBox="0 0 24 24">318        <path d="M4 4h16v16H4V4zm3 8l3 3 7-7-1.5-1.5L10 12.5 7.5 10 7 12z"/>319      </svg>320      <!-- Brush icon -->321      <svg class="icon" viewBox="0 0 24 24">322        <path d="M14.06 9.02l-5.02 5.02c.34 1.02-.35 2.46-1.71 3.03-1.5.62-3.12-.07-3.74-1.58 1.63.42 3.09-.19 3.68-1.38.38-.76.29-1.56.29-1.56l5.03-5.03 1.47 1.5zM17.62 3.02c-.78-.78-2.05-.78-2.83 0l-2.4 2.4 4.24 4.24 2.4-2.4c.78-.78.78-2.05 0-2.83l-1.41-1.41z"/>323      </svg>324      <!-- Mic icon -->325      <svg class="icon" viewBox="0 0 24 24">326        <path d="M12 14a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v5a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-3.08A7 7 0 0 0 19 11h-2z"/>327      </svg>328      <!-- Image icon -->329      <svg class="icon" viewBox="0 0 24 24">330        <path d="M19 5H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2zm0 12H5V7h14v10zM8.5 13.5l2 2.5 3-4 4.5 6H6l2.5-5z"/>331      </svg>332    </div>333  </div>334 335  <!-- Gesture bar -->336  <div class="gesture"></div>337 338</div>339</body>340</html>