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, Arial, sans-serif;13  }14  #render-target {15    width: 1080px;16    height: 2400px;17    position: relative;18    overflow: hidden;19    background: #121316;20    color: #E9EAEC;21  }22 23  /* Status bar */24  .status-bar {25    height: 90px;26    padding: 0 36px;27    display: flex;28    align-items: center;29    justify-content: space-between;30    color: #D5D7DB;31    font-size: 34px;32    opacity: 0.9;33  }34  .status-icons {35    display: flex;36    align-items: center;37    gap: 24px;38  }39  .status-icons svg {40    width: 36px;41    height: 36px;42  }43 44  /* Search bar */45  .search-wrap {46    margin: 18px 60px 0 60px;47    height: 120px;48    border-radius: 60px;49    background: #2A2D33;50    box-shadow: 0 6px 12px rgba(0,0,0,0.35) inset, 0 10px 20px rgba(0,0,0,0.35);51    display: flex;52    align-items: center;53    padding: 0 28px;54    gap: 28px;55  }56  .icon-btn {57    width: 70px;58    height: 70px;59    border-radius: 20px;60    display: flex;61    align-items: center;62    justify-content: center;63    color: #B7BBC2;64  }65  .icon-btn svg {66    width: 42px;67    height: 42px;68  }69  .search-input {70    flex: 1;71    color: #C7CBD1;72    font-size: 40px;73    letter-spacing: 0.2px;74  }75  .avatar {76    width: 88px;77    height: 88px;78    border-radius: 44px;79    background: #3A4750;80    display: flex;81    align-items: center;82    justify-content: center;83    color: #E9EAEC;84    font-weight: 600;85    font-size: 42px;86    box-shadow: 0 0 0 4px rgba(255,255,255,0.08) inset;87  }88 89  /* Notes grid */90  .grid {91    display: flex;92    gap: 36px;93    padding: 40px 60px;94  }95  .card {96    width: 470px;97    height: 230px;98    border-radius: 28px;99    border: 2px solid #4A4D54;100    background: rgba(255,255,255,0.02);101    padding: 34px;102    color: #F2F3F5;103    box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;104  }105  .card p {106    margin: 0 0 10px 0;107    font-size: 44px;108    line-height: 1.25;109  }110 111  /* Bottom bar */112  .bottom-bar {113    position: absolute;114    left: 0;115    bottom: 0;116    width: 1080px;117    height: 180px;118    background: #1B1E22;119    border-top-left-radius: 28px;120    border-top-right-radius: 28px;121    box-shadow: 0 -8px 18px rgba(0,0,0,0.5);122    display: flex;123    align-items: center;124    justify-content: space-around;125    padding: 0 160px 0 100px; /* leave room on right for FAB */126  }127  .bottom-bar .tool {128    display: flex;129    align-items: center;130    justify-content: center;131    width: 94px;132    height: 94px;133    color: #B4B8BF;134    opacity: 0.95;135  }136  .bottom-bar svg {137    width: 56px;138    height: 56px;139    stroke-width: 2.5;140  }141 142  /* Gesture pill */143  .gesture {144    position: absolute;145    bottom: 30px;146    left: 50%;147    transform: translateX(-50%);148    width: 480px;149    height: 16px;150    background: #E7E9EF;151    border-radius: 10px;152    opacity: 0.9;153  }154 155  /* Floating action button */156  .fab {157    position: absolute;158    right: 48px;159    bottom: 164px;160    width: 150px;161    height: 150px;162    background: #22252A;163    border-radius: 40px;164    box-shadow: 0 18px 28px rgba(0,0,0,0.6), 0 4px 0 rgba(255,255,255,0.06) inset;165  }166  .fab-inner {167    position: absolute;168    top: 50%;169    left: 50%;170    width: 96px;171    height: 96px;172    transform: translate(-50%, -50%);173  }174  .fab-inner .bar {175    position: absolute;176    border-radius: 8px;177  }178  /* colored plus bars */179  .bar.top {180    width: 18px;181    height: 44px;182    background: #4285F4; /* blue */183    left: 39px;184    top: 0;185  }186  .bar.right {187    width: 44px;188    height: 18px;189    background: #DB4437; /* red */190    right: 0;191    top: 39px;192  }193  .bar.left {194    width: 44px;195    height: 18px;196    background: #F4B400; /* yellow */197    left: 0;198    top: 39px;199  }200  .bar.bottom {201    width: 18px;202    height: 44px;203    background: #0F9D58; /* green */204    left: 39px;205    bottom: 0;206  }207</style>208</head>209<body>210<div id="render-target">211 212  <!-- Status bar -->213  <div class="status-bar">214    <div>8:20</div>215    <div class="status-icons">216      <!-- simple icons: do not match device exactly, but stylized -->217      <svg viewBox="0 0 24 24" fill="none" stroke="#D5D7DB">218        <path d="M3 12h18" />219        <path d="M6 8h12" />220        <path d="M6 16h12" />221      </svg>222      <svg viewBox="0 0 24 24" fill="none" stroke="#D5D7DB">223        <path d="M3 16l6-8 5 6 4-5 3 4" />224      </svg>225      <svg viewBox="0 0 24 24" fill="none" stroke="#D5D7DB">226        <circle cx="12" cy="12" r="8" />227        <path d="M12 4v2M12 18v2M4 12h2M18 12h2" />228      </svg>229      <svg viewBox="0 0 24 24" fill="none" stroke="#D5D7DB">230        <path d="M20 8v10H4V8l4-4h8l4 4z" />231      </svg>232    </div>233  </div>234 235  <!-- Search bar -->236  <div class="search-wrap">237    <div class="icon-btn">238      <!-- Hamburger -->239      <svg viewBox="0 0 24 24" fill="none" stroke="#C2C6CC" stroke-width="2.5" stroke-linecap="round">240        <path d="M3 6h18M3 12h14M3 18h10"/>241      </svg>242    </div>243    <div class="search-input">Search your notes</div>244    <div class="icon-btn">245      <!-- list/grid toggle icon -->246      <svg viewBox="0 0 24 24" fill="none" stroke="#C2C6CC" stroke-width="2.2" stroke-linecap="round">247        <rect x="4" y="5" width="16" height="5" rx="2"></rect>248        <rect x="8" y="14" width="12" height="5" rx="2"></rect>249      </svg>250    </div>251    <div class="avatar">C</div>252  </div>253 254  <!-- Notes grid -->255  <div class="grid">256    <div class="card">257      <p>ABC</p>258      <p>ABC</p>259    </div>260    <div class="card">261      <p>Testing</p>262      <p>Testing</p>263    </div>264  </div>265 266  <!-- Floating action button -->267  <div class="fab">268    <div class="fab-inner">269      <div class="bar top"></div>270      <div class="bar right"></div>271      <div class="bar left"></div>272      <div class="bar bottom"></div>273    </div>274  </div>275 276  <!-- Bottom tools bar -->277  <div class="bottom-bar">278    <div class="tool">279      <!-- checklist icon -->280      <svg viewBox="0 0 24 24" fill="none" stroke="#B4B8BF" stroke-linecap="round" stroke-linejoin="round">281        <rect x="3" y="4" width="18" height="16" rx="2"></rect>282        <path d="M7 8h6M7 12h10M7 16h8"/>283        <path d="M5 8l1 1 2-2"/>284      </svg>285    </div>286    <div class="tool">287      <!-- brush icon -->288      <svg viewBox="0 0 24 24" fill="none" stroke="#B4B8BF" stroke-linecap="round" stroke-linejoin="round">289        <path d="M14 3l7 7-5 5-7-7z"/>290        <path d="M3 21c3 0 5-2 6-3l-3-3c-1 1-3 3-3 6z"/>291      </svg>292    </div>293    <div class="tool">294      <!-- microphone icon -->295      <svg viewBox="0 0 24 24" fill="none" stroke="#B4B8BF" stroke-linecap="round" stroke-linejoin="round">296        <rect x="8" y="4" width="8" height="10" rx="4"></rect>297        <path d="M5 10v2a7 7 0 0 0 14 0v-2"/>298        <path d="M12 17v4"/>299      </svg>300    </div>301    <div class="tool">302      <!-- image icon -->303      <svg viewBox="0 0 24 24" fill="none" stroke="#B4B8BF" stroke-linecap="round" stroke-linejoin="round">304        <rect x="3" y="4" width="18" height="16" rx="2"></rect>305        <circle cx="9" cy="10" r="2"/>306        <path d="M21 18l-6-6-5 5-3-3-4 4"/>307      </svg>308    </div>309  </div>310 311  <div class="gesture"></div>312</div>313</body>314</html>