GD-ML/AndroidCode

1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Google Calendar Drawer - Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7  body { margin:0; padding:0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    position: relative;10    width: 1080px;11    height: 2400px;12    overflow: hidden;13    background: #0b0d10;14  }15 16  /* Right dimmed app area */17  .app-dim {18    position: absolute;19    right: 0;20    top: 0;21    width: 320px;22    height: 2400px;23    background: rgba(0,0,0,0.65);24  }25 26  /* Drawer */27  .drawer {28    position: absolute;29    left: 0;30    top: 0;31    width: 760px;32    height: 2400px;33    background: #1f2228;34    color: #e6e6e6;35    padding-top: 130px; /* leave some status bar space */36    box-sizing: border-box;37  }38 39  .status-bar {40    position: absolute;41    top: 0;42    left: 0;43    width: 760px;44    height: 120px;45    display: flex;46    align-items: center;47    padding: 0 36px;48    box-sizing: border-box;49    color: #cfd8dc;50    font-size: 40px;51  }52 53  .title {54    font-size: 64px;55    font-weight: 700;56    padding: 0 44px;57    margin-bottom: 40px;58  }59 60  .menu {61    padding: 0 28px;62  }63 64  .item {65    display: flex;66    align-items: center;67    gap: 30px;68    padding: 28px 20px;69    border-radius: 28px;70    font-size: 52px;71    color: #dfe3e8;72    margin: 8px 16px;73  }74 75  .item.selected {76    background: #363a45;77  }78 79  .icon {80    width: 66px;81    height: 66px;82    display: inline-flex;83    align-items: center;84    justify-content: center;85    color: #b0bec5;86  }87 88  .divider {89    height: 2px;90    background: #2b2f37;91    margin: 30px 44px;92  }93 94  .refresh {95    margin-top: 6px;96  }97 98  .account-row {99    display: flex;100    align-items: center;101    gap: 24px;102    padding: 24px 44px;103    margin-top: 10px;104  }105 106  .avatar {107    width: 92px;108    height: 92px;109    border-radius: 50%;110    background: #4f7f6c;111    color: #0b1012;112    font-weight: 700;113    font-size: 56px;114    display: flex;115    align-items: center;116    justify-content: center;117  }118 119  .email {120    font-size: 40px;121    color: #cfd8dc;122    letter-spacing: 0.2px;123  }124 125  .sublist {126    margin-top: 14px;127    padding-left: 44px;128    padding-right: 44px;129  }130 131  .check-row {132    display: flex;133    align-items: center;134    gap: 26px;135    padding: 26px 0;136    font-size: 48px;137  }138 139  .chk {140    width: 62px;141    height: 62px;142    border-radius: 14px;143    display: inline-flex;144    align-items: center;145    justify-content: center;146    color: #101215;147    font-weight: 900;148  }149  .chk.blue { background:#6ea8ff; }150  .chk.purple { background:#8470ff; }151  .chk.green { background:#5bb98c; }152 153  .footer {154    position: absolute;155    bottom: 140px;156    left: 0;157    width: 760px;158    padding: 0 44px;159    box-sizing: border-box;160  }161 162  .footer .item {163    margin: 10px 0;164    padding-left: 20px;165  }166 167  /* Right-side content hint (calendar grid placeholder) */168  .right-preview {169    position: absolute;170    top: 200px;171    right: 36px;172    width: 248px;173    height: 1500px;174    border-left: 1px solid #22272f;175    opacity: 0.3;176    color: #9aa1a7;177    display: flex;178    align-items: center;179    justify-content: center;180    font-size: 28px;181    background: rgba(255,255,255,0.02);182  }183 184  /* Floating add button */185  .fab {186    position: absolute;187    right: 70px;188    bottom: 160px;189    width: 160px;190    height: 160px;191    border-radius: 36px;192    background: rgba(255,255,255,0.06);193    display: flex;194    align-items: center;195    justify-content: center;196    color: #cfd8dc;197    font-size: 88px;198  }199 200  /* Simple SVG icons baseline */201  .icon svg { width: 58px; height: 58px; }202 203</style>204</head>205<body>206<div id="render-target">207 208  <!-- Dimmed right side of the app -->209  <div class="app-dim"></div>210 211  <!-- Drawer -->212  <div class="drawer">213 214    <div class="status-bar">215      6:55 • ▪︎ ▪︎ ▪︎216    </div>217 218    <div class="title">Google Calendar</div>219 220    <div class="menu">221      <div class="item">222        <div class="icon">223          <svg viewBox="0 0 24 24" fill="#b0bec5"><rect x="3" y="5" width="18" height="14" rx="2"></rect><rect x="6" y="8" width="12" height="2" fill="#d0d6da"></rect><rect x="6" y="12" width="8" height="2" fill="#d0d6da"></rect></svg>224        </div>225        <div>Schedule</div>226      </div>227 228      <div class="item selected">229        <div class="icon">230          <svg viewBox="0 0 24 24" fill="#b0bec5"><rect x="4" y="4" width="16" height="16" rx="2"></rect><rect x="7" y="7" width="10" height="10" fill="none" stroke="#cfd8dc" stroke-width="1.2"></rect></svg>231        </div>232        <div>Day</div>233      </div>234 235      <div class="item">236        <div class="icon">237          <svg viewBox="0 0 24 24" fill="#b0bec5"><rect x="3" y="5" width="18" height="14" rx="2"></rect><rect x="5" y="8" width="14" height="2" fill="#d0d6da"></rect><rect x="5" y="12" width="14" height="2" fill="#d0d6da"></rect><rect x="5" y="16" width="9" height="2" fill="#d0d6da"></rect></svg>238        </div>239        <div>3 days</div>240      </div>241 242      <div class="item">243        <div class="icon">244          <svg viewBox="0 0 24 24" fill="#b0bec5"><rect x="3" y="5" width="18" height="14" rx="2"></rect><rect x="4" y="8" width="5" height="10" fill="#d0d6da"></rect><rect x="10" y="8" width="5" height="10" fill="#9aa1a7"></rect><rect x="16" y="8" width="5" height="10" fill="#6d737a"></rect></svg>245        </div>246        <div>Week</div>247      </div>248 249      <div class="item">250        <div class="icon">251          <svg viewBox="0 0 24 24" fill="#b0bec5"><rect x="2" y="6" width="20" height="12" rx="2"></rect><rect x="4" y="8" width="16" height="2" fill="#d0d6da"></rect><rect x="4" y="12" width="16" height="2" fill="#d0d6da"></rect></svg>252        </div>253        <div>Month</div>254      </div>255 256      <div class="divider"></div>257 258      <div class="item refresh">259        <div class="icon">260          <svg viewBox="0 0 24 24" fill="#b0bec5"><path d="M12 6a6 6 0 1 1-5.3 3H4l3-3 3 3H8.7A4 4 0 1 0 12 8V6z"></path></svg>261        </div>262        <div>Refresh</div>263      </div>264    </div>265 266    <div class="divider" style="margin-top: 30px;"></div>267 268    <div class="account-row">269      <div class="avatar">V</div>270      <div class="email">victorjonesdbwresearchpersona@gm..</div>271    </div>272 273    <div class="sublist">274      <div class="check-row">275        <div class="chk blue">✓</div>276        <div>Events</div>277      </div>278      <div class="check-row">279        <div class="chk purple">✓</div>280        <div>Tasks</div>281      </div>282 283      <div class="divider" style="margin: 16px 0;"></div>284 285      <div class="check-row">286        <div class="chk green">✓</div>287        <div>Birthdays</div>288      </div>289      <div class="check-row">290        <div class="chk green">✓</div>291        <div>Holidays</div>292      </div>293    </div>294 295    <div class="footer">296      <div class="item">297        <div class="icon">298          <svg viewBox="0 0 24 24" fill="#b0bec5"><path d="M12 2l8 8v10a2 2 0 0 1-2 2h-4v-6H10v6H6a2 2 0 0 1-2-2V10l8-8z"/></svg>299        </div>300        <div>Settings</div>301      </div>302      <div class="item">303        <div class="icon">304          <svg viewBox="0 0 24 24" fill="#b0bec5"><circle cx="12" cy="6" r="1.8"></circle><rect x="11" y="9" width="2" height="8"></rect><circle cx="12" cy="20" r="1"></circle></svg>305        </div>306        <div>Help & feedback</div>307      </div>308    </div>309 310  </div>311 312  <div class="right-preview">[Calendar Content Preview]</div>313 314  <div class="fab">+</div>315 316</div>317</body>318</html>