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    position: relative;11    overflow: hidden;12    width: 1080px;13    height: 2400px;14    background: #121314;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 110px;24    color: #D9D9D9;25    font-weight: 500;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30  }31  .status-left {32    display: flex;33    align-items: center;34    gap: 18px;35    font-size: 34px;36  }37  .status-right {38    margin-left: auto;39    display: flex;40    align-items: center;41    gap: 26px;42  }43  .sb-icon {44    width: 36px;45    height: 36px;46    opacity: 0.85;47  }48 49  /* Search bar */50  .search-wrap {51    position: absolute;52    top: 120px;53    left: 36px;54    right: 36px;55  }56  .search-bar {57    height: 120px;58    background: #2C3236;59    border-radius: 60px;60    display: flex;61    align-items: center;62    padding: 0 32px;63    box-sizing: border-box;64    color: #BFC5C9;65  }66  .hamburger {67    width: 56px;68    height: 56px;69    margin-right: 24px;70    opacity: 0.95;71  }72  .search-text {73    font-size: 40px;74    color: #BFC5C9;75    flex: 1;76  }77  .grid-icon {78    width: 56px;79    height: 56px;80    margin-right: 24px;81    opacity: 0.95;82  }83  .avatar {84    width: 96px;85    height: 96px;86    border-radius: 48px;87    background: #5A36C8;88    color: #fff;89    font-weight: 600;90    display: flex;91    align-items: center;92    justify-content: center;93    font-size: 44px;94  }95 96  /* Note card */97  .note-card {98    position: absolute;99    top: 310px;100    left: 36px;101    width: calc(100% - 72px);102    background: #1A1E21;103    border: 2px solid #444D52;104    border-radius: 36px;105    padding: 40px;106    box-sizing: border-box;107    color: #E7ECEF;108  }109  .note-title {110    font-size: 48px;111    font-weight: 700;112    margin-bottom: 36px;113  }114  .checklist {115    display: flex;116    flex-direction: column;117    gap: 28px;118  }119  .item {120    display: flex;121    align-items: center;122    gap: 24px;123    font-size: 42px;124    color: #D5DADD;125  }126  .checkbox {127    width: 42px;128    height: 42px;129    border: 3px solid #8A949B;130    border-radius: 6px;131    box-sizing: border-box;132    opacity: 0.9;133  }134 135  /* Bottom bar */136  .bottom-bar {137    position: absolute;138    left: 0;139    bottom: 0;140    width: 100%;141    height: 210px;142    background: #202528;143    border-top-left-radius: 36px;144    border-top-right-radius: 36px;145    box-sizing: border-box;146    padding: 40px 80px;147    display: flex;148    align-items: center;149    gap: 120px;150  }151  .bb-icon {152    width: 64px;153    height: 64px;154    opacity: 0.85;155  }156  /* Gesture pill */157  .gesture-pill {158    position: absolute;159    bottom: 24px;160    left: 50%;161    transform: translateX(-50%);162    width: 760px;163    height: 16px;164    background: #EDEDED;165    border-radius: 10px;166    opacity: 0.9;167  }168 169  /* Floating Action Button */170  .fab {171    position: absolute;172    right: 42px;173    bottom: 150px;174    width: 156px;175    height: 156px;176    background: #1F2427;177    border-radius: 36px;178    box-shadow: 0 14px 24px rgba(0,0,0,0.5);179    display: flex;180    align-items: center;181    justify-content: center;182  }183  .fab svg { width: 84px; height: 84px; }184</style>185</head>186<body>187<div id="render-target">188 189  <!-- Status Bar -->190  <div class="status-bar">191    <div class="status-left">192      <div>9:24</div>193      <!-- simple dot icons to mimic small indicators -->194      <svg class="sb-icon" viewBox="0 0 24 24">195        <circle cx="12" cy="12" r="10" fill="#C9CDD1"></circle>196      </svg>197      <svg class="sb-icon" viewBox="0 0 24 24">198        <rect x="4" y="4" width="16" height="16" rx="4" fill="#C9CDD1"></rect>199      </svg>200      <svg class="sb-icon" viewBox="0 0 24 24">201        <rect x="6" y="6" width="12" height="12" rx="3" fill="#C9CDD1"></rect>202      </svg>203      <svg class="sb-icon" viewBox="0 0 24 24">204        <circle cx="12" cy="12" r="3" fill="#C9CDD1"></circle>205      </svg>206    </div>207    <div class="status-right">208      <!-- Wi-Fi -->209      <svg class="sb-icon" viewBox="0 0 24 24">210        <path d="M2 8c5-4 15-4 20 0M5 12c4-3 10-3 14 0M8 16c3-2 5-2 8 0M12 20a2 2 0 1 0 0.001 0" stroke="#E0E3E6" stroke-width="2" fill="none" stroke-linecap="round"/>211      </svg>212      <!-- Battery -->213      <svg class="sb-icon" viewBox="0 0 24 24">214        <rect x="3" y="6" width="16" height="12" rx="2" fill="none" stroke="#E0E3E6" stroke-width="2"/>215        <rect x="5" y="8" width="12" height="8" rx="1" fill="#E0E3E6"/>216        <rect x="20" y="10" width="2" height="4" rx="1" fill="#E0E3E6"/>217      </svg>218    </div>219  </div>220 221  <!-- Search Bar -->222  <div class="search-wrap">223    <div class="search-bar">224      <!-- Hamburger -->225      <svg class="hamburger" viewBox="0 0 24 24">226        <path d="M3 6h18M3 12h18M3 18h18" stroke="#E6EAED" stroke-width="2.6" stroke-linecap="round" fill="none"/>227      </svg>228      <div class="search-text">Search your notes</div>229      <!-- Grid icon -->230      <svg class="grid-icon" viewBox="0 0 24 24">231        <rect x="3" y="3" width="8" height="8" rx="2" fill="#DCE1E5"/>232        <rect x="13" y="3" width="8" height="8" rx="2" fill="#DCE1E5"/>233        <rect x="3" y="13" width="8" height="8" rx="2" fill="#DCE1E5"/>234        <rect x="13" y="13" width="8" height="8" rx="2" fill="#DCE1E5"/>235      </svg>236      <div class="avatar">C</div>237    </div>238  </div>239 240  <!-- Note Card -->241  <div class="note-card">242    <div class="note-title">New Gardening Tools</div>243    <div class="checklist">244      <div class="item">245        <div class="checkbox"></div>246        <span>Axe</span>247      </div>248      <div class="item">249        <div class="checkbox"></div>250        <span>Sickle</span>251      </div>252      <div class="item">253        <div class="checkbox"></div>254        <span>Spade</span>255      </div>256      <div class="item">257        <div class="checkbox"></div>258        <span>Shovel</span>259      </div>260    </div>261  </div>262 263  <!-- Floating Action Button -->264  <div class="fab">265    <svg viewBox="0 0 64 64">266      <!-- Google-style multicolor plus -->267      <rect x="29" y="10" width="6" height="44" rx="3" fill="#34A853"></rect>268      <rect x="10" y="29" width="44" height="6" rx="3" fill="#4285F4"></rect>269      <rect x="29" y="10" width="6" height="20" rx="3" fill="#EA4335"></rect>270      <rect x="29" y="34" width="6" height="20" rx="3" fill="#FBBC05"></rect>271    </svg>272  </div>273 274  <!-- Bottom Bar with tools -->275  <div class="bottom-bar">276    <!-- Checklist icon -->277    <svg class="bb-icon" viewBox="0 0 24 24">278      <rect x="3" y="4" width="18" height="16" rx="3" fill="none" stroke="#B9C0C6" stroke-width="2"/>279      <path d="M7 9h8M7 13h10" stroke="#B9C0C6" stroke-width="2" stroke-linecap="round"/>280      <rect x="5" y="8" width="2" height="2" rx="1" fill="#B9C0C6"/>281      <rect x="5" y="12" width="2" height="2" rx="1" fill="#B9C0C6"/>282    </svg>283 284    <!-- Brush icon -->285    <svg class="bb-icon" viewBox="0 0 24 24">286      <path d="M14 3l7 7-3 3-7-7z" fill="none" stroke="#B9C0C6" stroke-width="2"/>287      <path d="M4 20c3 0 4-2 4-4" stroke="#B9C0C6" stroke-width="2" fill="none" stroke-linecap="round"/>288    </svg>289 290    <!-- Mic icon -->291    <svg class="bb-icon" viewBox="0 0 24 24">292      <rect x="9" y="3" width="6" height="10" rx="3" fill="none" stroke="#B9C0C6" stroke-width="2"/>293      <path d="M5 10a7 7 0 0 0 14 0M12 20v-3" stroke="#B9C0C6" stroke-width="2" fill="none" stroke-linecap="round"/>294    </svg>295 296    <!-- Image icon -->297    <svg class="bb-icon" viewBox="0 0 24 24">298      <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#B9C0C6" stroke-width="2"/>299      <circle cx="9" cy="10" r="2" fill="#B9C0C6"/>300      <path d="M5 17l5-4 3 3 3-2 3 3" stroke="#B9C0C6" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>301    </svg>302  </div>303 304  <div class="gesture-pill"></div>305</div>306</body>307</html>