GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7  * { box-sizing: border-box; }8  body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #121212;15  }16 17  /* Status bar */18  .status-bar {19    position: absolute;20    top: 0;21    left: 0;22    width: 100%;23    height: 120px;24    padding: 28px 36px;25    color: #EAEAEA;26    display: flex;27    justify-content: space-between;28    align-items: center;29    font-size: 34px;30    letter-spacing: 0.2px;31  }32  .sb-left, .sb-right { display: flex; align-items: center; gap: 22px; }33  .sb-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #CFCFCF; }34  .sb-right .battery { display: inline-flex; align-items: center; gap: 10px; }35 36  /* Search row */37  .search-row {38    position: absolute;39    top: 128px;40    left: 32px;41    right: 32px;42    display: flex;43    align-items: center;44    gap: 18px;45  }46  .search-bar {47    flex: 1;48    height: 112px;49    border-radius: 38px;50    background: #2A2A2A;51    color: #BEBEBE;52    display: flex;53    align-items: center;54    padding: 0 28px;55    gap: 24px;56  }57  .search-text { font-size: 36px; color: #CFCFCF; }58  .avatar {59    width: 110px;60    height: 110px;61    border-radius: 55px;62    background: #6574D9;63    display: flex;64    align-items: center;65    justify-content: center;66    color: #FFFFFF;67    font-weight: 700;68    font-size: 40px;69  }70  .search-actions { margin-left: auto; display: flex; align-items: center; gap: 20px; }71 72  /* Notes grid */73  .notes-grid {74    position: absolute;75    top: 272px;76    left: 24px;77    right: 24px;78    display: grid;79    grid-template-columns: 1fr 1fr;80    gap: 28px;81    padding: 8px;82  }83  .note-card {84    border: 2px solid #3D3D3D;85    border-radius: 28px;86    padding: 34px;87    color: #EDEDED;88    min-height: 260px;89    background: transparent;90  }91  .note-title {92    font-size: 44px;93    font-weight: 700;94    margin-bottom: 18px;95  }96  .note-body {97    font-size: 32px;98    line-height: 1.35;99    color: #E0E0E0;100    white-space: pre-line;101  }102  .chip {103    display: inline-flex;104    align-items: center;105    gap: 14px;106    background: #444444;107    color: #CECECE;108    padding: 14px 20px;109    border-radius: 16px;110    font-size: 30px;111    margin-top: 18px;112  }113  .chip svg { width: 32px; height: 32px; }114 115  /* Bottom bar */116  .bottom-bar {117    position: absolute;118    bottom: 0;119    left: 0;120    width: 100%;121    height: 190px;122    background: #1E1E1E;123    padding: 22px 40px 70px;124    display: flex;125    align-items: flex-end;126    justify-content: space-around;127    color: #CFCFCF;128  }129  .bb-icon { width: 60px; height: 60px; color: #CFCFCF; }130  .gesture {131    position: absolute;132    bottom: 28px;133    left: 50%;134    transform: translateX(-50%);135    width: 380px;136    height: 12px;137    border-radius: 6px;138    background: #E6E6E6;139    opacity: 0.9;140  }141 142  /* Floating action button */143  .fab {144    position: absolute;145    right: 36px;146    bottom: 110px;147    width: 128px;148    height: 128px;149    border-radius: 32px;150    background: #242424;151    box-shadow: 0 8px 18px rgba(0,0,0,0.45);152    display: flex;153    align-items: center;154    justify-content: center;155  }156  .google-plus { width: 64px; height: 64px; position: relative; }157  .google-plus span {158    position: absolute; display: block; border-radius: 6px;159  }160  .g-red   { background: #EA4335; width: 56px; height: 12px; top: 26px; left: 4px; }161  .g-blue  { background: #4285F4; width: 12px; height: 56px; top: 4px; left: 26px; }162  .g-green { background: #34A853; width: 56px; height: 12px; top: 26px; left: 4px; transform: rotate(90deg); transform-origin: left top; }163  .g-yellow{ background: #FBBC05; width: 12px; height: 56px; top: 4px; left: 26px; transform: rotate(90deg); transform-origin: left top; }164 165  /* Helpers */166  .muted { color: #BDBDBD; }167</style>168</head>169<body>170<div id="render-target">171 172  <!-- Status bar -->173  <div class="status-bar">174    <div class="sb-left">175      <div>8:00</div>176      <div class="sb-icon">177        <svg viewBox="0 0 24 24">178          <circle cx="12" cy="12" r="10" fill="none" stroke="#CFCFCF" stroke-width="2"></circle>179          <text x="7" y="16" font-size="12" fill="#CFCFCF">C</text>180        </svg>181      </div>182      <div class="sb-icon">183        <svg viewBox="0 0 24 24">184          <path d="M2 16l8-8 4 4 8-8" stroke="#CFCFCF" stroke-width="2" fill="none"></path>185        </svg>186      </div>187      <div class="sb-icon">188        <svg viewBox="0 0 24 24">189          <path d="M12 2l9 6-9 6-9-6 9-6z" fill="#CFCFCF"></path>190        </svg>191      </div>192      <div class="sb-icon">28°</div>193    </div>194    <div class="sb-right">195      <div class="sb-icon">196        <svg viewBox="0 0 24 24">197          <path d="M1 18c3-4 7-6 11-6s8 2 11 6" stroke="#CFCFCF" stroke-width="2" fill="none" />198          <circle cx="12" cy="18" r="2" fill="#CFCFCF" />199        </svg>200      </div>201      <div class="battery">202        <svg class="sb-icon" viewBox="0 0 28 24">203          <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#CFCFCF" stroke-width="2"></rect>204          <rect x="4" y="8" width="14" height="8" rx="1" fill="#CFCFCF"></rect>205          <rect x="22" y="9" width="3" height="6" rx="1" fill="#CFCFCF"></rect>206        </svg>207        <div>100%</div>208      </div>209    </div>210  </div>211 212  <!-- Search bar -->213  <div class="search-row">214    <div class="search-bar">215      <svg class="sb-icon" viewBox="0 0 24 24" style="color:#CFCFCF;">216        <path d="M3 6h18M3 12h12M3 18h18" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"></path>217      </svg>218      <div class="search-text">Search your notes</div>219      <div class="search-actions">220        <svg viewBox="0 0 24 24" width="44" height="44">221          <rect x="4" y="6" width="16" height="4" rx="1" fill="#CFCFCF"></rect>222          <rect x="4" y="14" width="16" height="4" rx="1" fill="#CFCFCF"></rect>223        </svg>224      </div>225    </div>226    <div class="avatar">C</div>227  </div>228 229  <!-- Notes grid -->230  <div class="notes-grid">231    <!-- Card: Book Names -->232    <div class="note-card">233      <div class="note-title">Book Names</div>234      <div class="note-body">I, Claudius by Robert235Graves</div>236    </div>237 238    <!-- Card: Grocery -->239    <div class="note-card">240      <div class="note-title">Grocery</div>241      <div class="note-body">Strawberry242Potatoes243Rice244Tea245Milk246Flour247Sugar</div>248    </div>249 250    <!-- Card: Morning Yoga -->251    <div class="note-card">252      <div class="note-title">Morning Yoga</div>253      <div class="chip">254        <svg viewBox="0 0 24 24">255          <circle cx="12" cy="12" r="9" fill="none" stroke="#D0D0D0" stroke-width="2"></circle>256          <path d="M12 7v6l4 2" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round"></path>257        </svg>258        <span>Aug 9, 9:30 AM</span>259      </div>260    </div>261 262    <!-- Card: Reminder -->263    <div class="note-card">264      <div class="note-title">Reminder at August26510, 8:00 AM</div>266      <div class="chip">267        <svg viewBox="0 0 24 24">268          <circle cx="12" cy="12" r="9" fill="none" stroke="#D0D0D0" stroke-width="2"></circle>269          <path d="M12 7v6l4 2" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round"></path>270        </svg>271        <span>Aug 10, 8:00 AM</span>272      </div>273    </div>274 275    <!-- Card: Zumba -->276    <div class="note-card">277      <div class="note-title">Zumba session.</div>278      <div class="chip">279        <svg viewBox="0 0 24 24">280          <path d="M4 12h10l-3-3M14 12l-3 3" stroke="#D0D0D0" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>281        </svg>282        <span>Today, 6:00 PM</span>283      </div>284    </div>285 286    <!-- Card: Empty -->287    <div class="note-card">288      <!-- Intentionally left blank to match UI -->289    </div>290  </div>291 292  <!-- Floating Action Button -->293  <div class="fab">294    <div class="google-plus">295      <span class="g-red"></span>296      <span class="g-blue"></span>297      <span class="g-green"></span>298      <span class="g-yellow"></span>299    </div>300  </div>301 302  <!-- Bottom bar with tools -->303  <div class="bottom-bar">304    <svg class="bb-icon" viewBox="0 0 24 24">305      <rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="#CFCFCF" stroke-width="2"></rect>306      <path d="M6 12l4 4 8-8" stroke="#CFCFCF" stroke-width="2" fill="none" stroke-linecap="round"></path>307    </svg>308    <svg class="bb-icon" viewBox="0 0 24 24">309      <path d="M4 20l7-2 9-9-5-5-9 9-2 7z" fill="none" stroke="#CFCFCF" stroke-width="2"></path>310    </svg>311    <svg class="bb-icon" viewBox="0 0 24 24">312      <path d="M6 8a6 6 0 0 1 12 0v7a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V8z" fill="none" stroke="#CFCFCF" stroke-width="2"></path>313      <rect x="10" y="18" width="4" height="3" fill="#CFCFCF"></rect>314    </svg>315    <svg class="bb-icon" viewBox="0 0 24 24">316      <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#CFCFCF" stroke-width="2"></rect>317      <path d="M3 16l5-5 4 4 3-3 6 6" stroke="#CFCFCF" stroke-width="2" fill="none"></path>318    </svg>319    <div class="gesture"></div>320  </div>321 322</div>323</body>324</html>