GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Notes App UI</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar */16  .status-bar {17    height: 90px;18    padding: 20px 32px;19    box-sizing: border-box;20    color: #000;21    display: flex;22    align-items: center;23    justify-content: space-between;24    font-weight: 600;25  }26  .status-left { display: flex; align-items: center; gap: 16px; }27  .status-right { display: flex; align-items: center; gap: 22px; }28  .status-icon { width: 28px; height: 28px; opacity: 0.8; }29 30  /* App bar */31  .app-bar {32    height: 88px;33    padding: 0 28px;34    display: flex;35    align-items: center;36    justify-content: space-between;37  }38  .app-left { display: flex; align-items: center; gap: 18px; }39  .hamburger {40    width: 48px; height: 48px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;41  }42  .app-actions { display: flex; align-items: center; gap: 24px; }43  .vip-pill {44    display: inline-flex; align-items: center; gap: 10px;45    background: #FFB24C; color: #fff; font-weight: 700;46    padding: 12px 18px; border-radius: 28px; font-size: 28px;47  }48  .icon-btn { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; }49 50  /* Filter chips and calendar icon */51  .filter-row {52    padding: 18px 28px 12px;53    display: flex; align-items: center; gap: 18px;54  }55  .chip {56    padding: 18px 26px;57    border-radius: 28px;58    background: #EDEFF2;59    color: #3A3A3A;60    font-size: 32px;61    font-weight: 700;62  }63  .chip.active {64    background: #2F80ED;65    color: #fff;66  }67  .calendar-badge {68    margin-left: auto;69    position: relative;70    width: 64px; height: 64px;71    border-radius: 16px;72    display: flex; align-items: center; justify-content: center;73    background: #F0F2F6;74    border: 1px solid #D5DAE2;75  }76  .calendar-badge .count {77    position: absolute;78    top: -10px; right: -10px;79    background: #2F80ED; color: #fff;80    width: 40px; height: 40px; border-radius: 20px;81    display: flex; align-items: center; justify-content: center;82    font-size: 26px; font-weight: 700;83    box-shadow: 0 4px 10px rgba(0,0,0,0.15);84  }85 86  /* Banner area */87  .banner-strip {88    margin: 10px 16px 0;89    height: 150px;90    display: grid;91    grid-template-columns: 1fr 1fr 1fr;92    gap: 12px;93  }94  .img-ph {95    background: #E0E0E0;96    border: 1px solid #BDBDBD;97    display: flex; align-items: center; justify-content: center;98    color: #757575; font-weight: 700;99    font-size: 28px;100    border-radius: 8px;101  }102 103  /* Tooltip */104  .tooltip {105    position: absolute;106    top: 272px;107    right: 38px;108    background: #A6D7FF;109    color: #0F3B66;110    padding: 28px 32px;111    border-radius: 16px;112    width: 620px;113    font-size: 34px;114    font-weight: 700;115    box-shadow: 0 10px 24px rgba(0,0,0,0.15);116  }117  .tooltip .close {118    position: absolute;119    left: 16px; top: -14px;120    width: 46px; height: 46px;121    border-radius: 23px;122    background: #78BFF6;123    display: flex; align-items: center; justify-content: center;124    color: #fff; font-size: 28px; font-weight: 900;125    box-shadow: 0 8px 14px rgba(0,0,0,0.2);126  }127  .tooltip:after {128    content: "";129    position: absolute;130    right: 22px; top: -16px;131    border-width: 0 14px 16px 14px;132    border-style: solid;133    border-color: transparent transparent #A6D7FF transparent;134  }135 136  /* Notes grid */137  .notes-grid {138    padding: 28px;139    display: grid;140    grid-template-columns: repeat(2, 1fr);141    gap: 28px;142  }143  .note-card {144    background: #FFF0BC;145    border-radius: 24px;146    padding: 28px;147    box-shadow: 0 6px 12px rgba(0,0,0,0.06);148    min-height: 360px;149  }150  .note-title {151    font-size: 44px;152    font-weight: 800;153    color: #2A2A2A;154    line-height: 1.15;155    margin-bottom: 18px;156  }157  .note-body {158    font-size: 32px;159    color: #5A5A5A;160    line-height: 1.35;161    max-height: 160px;162    overflow: hidden;163  }164  .note-date {165    font-size: 32px;166    color: #9C8E65;167    margin-top: 26px;168    font-weight: 700;169  }170 171  /* Floating action button */172  .fab {173    position: absolute;174    bottom: 120px;175    right: 70px;176    width: 160px; height: 160px;177    border-radius: 80px;178    background: radial-gradient(circle at 30% 30%, #7BC6FF, #3FA9F5);179    box-shadow: 0 14px 36px rgba(0,0,0,0.25);180    display: flex; align-items: center; justify-content: center;181  }182  .fab .plus {183    width: 96px; height: 96px; border-radius: 48px;184    background: #ffffff;185    display: flex; align-items: center; justify-content: center;186    color: #2F80ED; font-size: 72px; font-weight: 900;187  }188 189  /* Gesture bar (bottom) */190  .gesture {191    position: absolute;192    bottom: 22px; left: 50%;193    transform: translateX(-50%);194    width: 360px; height: 10px;195    background: #D7D7D7; border-radius: 6px;196  }197 198  /* Utility SVG styles */199  svg { display: block; }200</style>201</head>202<body>203<div id="render-target">204 205  <!-- Status Bar -->206  <div class="status-bar">207    <div class="status-left">208      <div style="font-size:36px;">12:48</div>209      <svg class="status-icon" viewBox="0 0 24 24">210        <circle cx="12" cy="12" r="10" fill="#9E9E9E"></circle>211      </svg>212      <svg class="status-icon" viewBox="0 0 24 24">213        <rect x="3" y="6" width="18" height="12" rx="2" fill="#757575"></rect>214      </svg>215      <svg class="status-icon" viewBox="0 0 24 24">216        <path d="M12 2l4 4-4 4-4-4 4-4zm0 12l4 4-4 4-4-4 4-4z" fill="#757575"></path>217      </svg>218      <svg class="status-icon" viewBox="0 0 24 24">219        <circle cx="12" cy="12" r="4" fill="#757575"></circle>220      </svg>221    </div>222    <div class="status-right">223      <svg class="status-icon" viewBox="0 0 24 24">224        <path d="M21 6l-7 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16V6z" fill="#757575"></path>225      </svg>226      <svg class="status-icon" viewBox="0 0 24 24">227        <path d="M2 12h20" stroke="#757575" stroke-width="2"></path>228      </svg>229    </div>230  </div>231 232  <!-- App Bar -->233  <div class="app-bar">234    <div class="app-left">235      <div class="hamburger">236        <svg width="44" height="44" viewBox="0 0 24 24">237          <path d="M3 6h18M3 12h18M3 18h18" stroke="#333" stroke-width="2" stroke-linecap="round"></path>238        </svg>239      </div>240    </div>241    <div class="app-actions">242      <div class="vip-pill">243        <svg width="28" height="28" viewBox="0 0 24 24">244          <path d="M12 4l3 6 5-2-4 6 4 6-5-2-3 6-3-6-5 2 4-6-4-6 5 2 3-6z" fill="#fff"></path>245        </svg>246        VIP247      </div>248      <div class="icon-btn">249        <svg width="40" height="40" viewBox="0 0 24 24">250          <circle cx="11" cy="11" r="7" stroke="#333" stroke-width="2" fill="none"></circle>251          <path d="M20 20l-4-4" stroke="#333" stroke-width="2" stroke-linecap="round"></path>252        </svg>253      </div>254      <div class="icon-btn">255        <svg width="40" height="40" viewBox="0 0 24 24">256          <circle cx="12" cy="5" r="2" fill="#333"></circle>257          <circle cx="12" cy="12" r="2" fill="#333"></circle>258          <circle cx="12" cy="19" r="2" fill="#333"></circle>259        </svg>260      </div>261    </div>262  </div>263 264  <!-- Filter chips -->265  <div class="filter-row">266    <div class="chip active">All</div>267    <div class="chip">Home</div>268    <div class="chip">Work</div>269    <div class="chip" style="display:flex; align-items:center; gap:12px;">270      <svg width="32" height="32" viewBox="0 0 24 24">271        <path d="M6 2h12v20l-6-4-6 4V2z" fill="#9AA0A6"></path>272      </svg>273    </div>274    <div class="calendar-badge">275      <svg width="36" height="36" viewBox="0 0 24 24">276        <rect x="3" y="5" width="18" height="16" rx="2" fill="#8DA3B8"></rect>277        <path d="M7 3v4M17 3v4" stroke="#fff" stroke-width="2" stroke-linecap="round"></path>278      </svg>279      <div class="count">8</div>280    </div>281  </div>282 283  <!-- Banner Strip -->284  <div class="banner-strip">285    <div class="img-ph">[IMG: Shopping banner]</div>286    <div class="img-ph">[IMG: SALE banner]</div>287    <div class="img-ph">[IMG: Promo banner]</div>288  </div>289 290  <!-- Tooltip -->291  <div class="tooltip">292    <div class="close">×</div>293    Organize your notes with the calendar.294  </div>295 296  <!-- Notes Grid -->297  <div class="notes-grid">298    <div class="note-card">299      <div class="note-title">Fundamental unit of life</div>300      <div class="note-body">301        The smallest functional unit of life is cell, discovered by Robert Hooke in 1665. Cells are the building blocks of all organisms and perform essential functions...302      </div>303      <div class="note-date">2023-08-08</div>304    </div>305    <div class="note-card">306      <div class="note-title">reader annotations task</div>307      <div class="note-body">308        In this task basically we have to annotate the long article based on the 11 categories and mark key insights, questions, and highlights to improve reading comprehension...309      </div>310      <div class="note-date">2023-08-08</div>311    </div>312  </div>313 314  <!-- Floating Action Button -->315  <div class="fab">316    <div class="plus">+</div>317  </div>318 319  <!-- Gesture bar -->320  <div class="gesture"></div>321 322</div>323</body>324</html>