GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Google Calendar Drawer - Reproduction</title>6<style>7  body { margin: 0; padding: 0; background: transparent; }8  #render-target {9    width: 1440px;10    height: 3120px;11    position: relative;12    overflow: hidden;13    background: #0B120B; /* deep dark background behind drawer */14    font-family: Arial, Helvetica, sans-serif;15    color: #E8EEE6;16  }17 18  /* Simulated status bar */19  .status-bar {20    position: absolute;21    top: 24px;22    left: 30px;23    right: 30px;24    height: 64px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    color: #F4F7F2;29    opacity: 0.85;30    font-size: 34px;31    letter-spacing: 0.5px;32  }33  .status-icons { display: flex; align-items: center; gap: 24px; }34  .status-dot { width: 10px; height: 10px; background: #E8EEE6; border-radius: 50%; opacity: 0.8; }35 36  /* Drawer panel */37  .drawer {38    position: absolute;39    top: 80px;40    left: 0;41    width: 980px;42    height: 2950px;43    background: #1F2B1E; /* dark moss green */44    border-top-right-radius: 80px;45    border-bottom-right-radius: 80px;46    box-shadow: 0 12px 40px rgba(0,0,0,0.35);47  }48  .header {49    padding: 120px 80px 40px 80px;50    font-size: 72px;51    font-weight: 700;52  }53 54  .menu {55    padding: 0 40px;56  }57  .menu-item {58    display: flex;59    align-items: center;60    gap: 36px;61    padding: 28px 40px;62    font-size: 48px;63    border-radius: 40px;64    color: #E8EEE6;65  }66  .menu-item + .menu-item { margin-top: 10px; }67  .menu-item .icon { width: 64px; height: 64px; }68  .menu-item svg { width: 64px; height: 64px; }69  .menu-item.active {70    background: rgba(86, 104, 86, 0.45);71  }72 73  .hr {74    height: 2px;75    background: #2C362A;76    margin: 32px 40px;77    opacity: 0.7;78  }79 80  .refresh-item {81    display: flex;82    align-items: center;83    gap: 36px;84    padding: 38px 80px;85    font-size: 48px;86  }87 88  .account {89    display: flex;90    align-items: center;91    gap: 28px;92    padding: 40px 80px;93  }94  .avatar {95    width: 96px;96    height: 96px;97    border-radius: 50%;98    background: #7A78CF;99    display: flex;100    align-items: center;101    justify-content: center;102    color: #fff;103    font-size: 48px;104    font-weight: 700;105  }106  .account-details { flex: 1; }107  .account-details .email { font-size: 42px; }108  .account-details .note { font-size: 32px; color: #B9C3B5; margin-top: 8px; }109  .mute { width: 64px; height: 64px; }110 111  .list-group { padding: 10px 80px; }112  .list-item {113    display: flex;114    align-items: center;115    gap: 28px;116    padding: 26px 0;117    font-size: 48px;118  }119  .checkbox {120    width: 56px;121    height: 56px;122    border-radius: 12px;123    background: #476B56;124    border: 2px solid #769B81;125    display: flex;126    align-items: center;127    justify-content: center;128  }129  .bottom-actions {130    padding: 40px 80px 120px;131  }132  .bottom-actions .action {133    display: flex;134    align-items: center;135    gap: 28px;136    font-size: 48px;137    padding: 28px 0;138  }139 140  /* Home gesture bar */141  .gesture {142    position: absolute;143    bottom: 50px;144    left: 50%;145    transform: translateX(-50%);146    width: 320px;147    height: 16px;148    background: #EAEAEA;149    border-radius: 12px;150    opacity: 0.85;151  }152</style>153</head>154<body>155<div id="render-target">156 157  <!-- Simulated status bar -->158  <div class="status-bar">159    <div>5:48</div>160    <div class="status-icons">161      <div class="status-dot"></div>162      <div class="status-dot"></div>163      <div class="status-dot"></div>164      <div class="status-dot"></div>165      <svg width="40" height="40" viewBox="0 0 24 24" fill="none">166        <path d="M2 8h20M2 16h20" stroke="#F4F7F2" stroke-width="2" stroke-linecap="round"/>167      </svg>168    </div>169  </div>170 171  <!-- Drawer -->172  <div class="drawer">173    <div class="header">Google Calendar</div>174 175    <div class="menu">176      <div class="menu-item">177        <svg class="icon" viewBox="0 0 24 24" fill="none">178          <rect x="3" y="4" width="18" height="6" rx="1.5" stroke="#DDE5DA" stroke-width="2"/>179          <rect x="3" y="14" width="18" height="6" rx="1.5" stroke="#DDE5DA" stroke-width="2"/>180        </svg>181        <span>Schedule</span>182      </div>183 184      <div class="menu-item active">185        <svg class="icon" viewBox="0 0 24 24" fill="none">186          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#DDE5DA" stroke-width="2"/>187          <rect x="3" y="4" width="18" height="5" rx="1" fill="#DDE5DA"/>188        </svg>189        <span>Day</span>190      </div>191 192      <div class="menu-item">193        <svg class="icon" viewBox="0 0 24 24" fill="none">194          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#DDE5DA" stroke-width="2"/>195          <rect x="5" y="6" width="4" height="12" fill="#DDE5DA"/>196          <rect x="10" y="6" width="4" height="12" fill="#DDE5DA"/>197          <rect x="15" y="6" width="4" height="12" fill="#DDE5DA"/>198        </svg>199        <span>3 days</span>200      </div>201 202      <div class="menu-item">203        <svg class="icon" viewBox="0 0 24 24" fill="none">204          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#DDE5DA" stroke-width="2"/>205          <rect x="5" y="6" width="3" height="12" fill="#DDE5DA"/>206          <rect x="10.5" y="6" width="3" height="12" fill="#DDE5DA"/>207          <rect x="16" y="6" width="3" height="12" fill="#DDE5DA"/>208        </svg>209        <span>Week</span>210      </div>211 212      <div class="menu-item">213        <svg class="icon" viewBox="0 0 24 24" fill="none">214          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#DDE5DA" stroke-width="2"/>215          <rect x="5" y="6" width="6" height="6" fill="#DDE5DA"/>216          <rect x="13" y="6" width="6" height="6" fill="#DDE5DA"/>217          <rect x="5" y="13" width="6" height="6" fill="#DDE5DA"/>218          <rect x="13" y="13" width="6" height="6" fill="#DDE5DA"/>219        </svg>220        <span>Month</span>221      </div>222    </div>223 224    <div class="hr"></div>225 226    <div class="refresh-item">227      <svg class="icon" viewBox="0 0 24 24" fill="none">228        <path d="M5 12a7 7 0 1112 3" stroke="#DDE5DA" stroke-width="2" stroke-linecap="round"/>229        <path d="M17 15l0-4 4 0" stroke="#DDE5DA" stroke-width="2" stroke-linecap="round"/>230      </svg>231      <span>Refresh</span>232    </div>233 234    <div class="hr"></div>235 236    <div class="account">237      <div class="avatar">Q</div>238      <div class="account-details">239        <div class="email">quentinclark421@gmail.com</div>240        <div class="note">Not properly signed in</div>241      </div>242      <svg class="mute" viewBox="0 0 24 24" fill="none">243        <path d="M12 3l-3 3H6v6h3l3 3z" stroke="#DDE5DA" stroke-width="2" stroke-linejoin="round"/>244        <path d="M19 5L5 19" stroke="#DDE5DA" stroke-width="2" stroke-linecap="round"/>245      </svg>246    </div>247 248    <div class="list-group">249      <div class="list-item">250        <div class="checkbox">251          <svg viewBox="0 0 24 24">252            <path d="M5 12l4 4 10-10" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>253          </svg>254        </div>255        <span>Events</span>256      </div>257 258      <div class="list-item">259        <div class="checkbox">260          <svg viewBox="0 0 24 24">261            <path d="M5 12l4 4 10-10" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>262          </svg>263        </div>264        <span>Tasks</span>265      </div>266 267      <div class="list-item">268        <div class="checkbox">269          <svg viewBox="0 0 24 24">270            <path d="M5 12l4 4 10-10" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>271          </svg>272        </div>273        <span>Reminders</span>274      </div>275    </div>276 277    <div class="hr"></div>278 279    <div class="list-group">280      <div class="list-item">281        <div class="checkbox">282          <svg viewBox="0 0 24 24">283            <path d="M5 12l4 4 10-10" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>284          </svg>285        </div>286        <span>Birthdays</span>287      </div>288 289      <div class="list-item">290        <div class="checkbox">291          <svg viewBox="0 0 24 24">292            <path d="M5 12l4 4 10-10" stroke="#FFFFFF" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>293          </svg>294        </div>295        <span>Holidays</span>296      </div>297    </div>298 299    <div class="bottom-actions">300      <div class="action">301        <svg class="icon" viewBox="0 0 24 24" fill="none">302          <circle cx="12" cy="12" r="6" stroke="#DDE5DA" stroke-width="2"/>303          <path d="M12 3v3M12 18v3M3 12h3M18 12h3M6 6l2 2M16 16l2 2M6 18l2-2M16 8l2-2" stroke="#DDE5DA" stroke-width="2" stroke-linecap="round"/>304        </svg>305        <span>Settings</span>306      </div>307      <div class="action">308        <svg class="icon" viewBox="0 0 24 24" fill="none">309          <circle cx="12" cy="12" r="10" stroke="#DDE5DA" stroke-width="2"/>310          <path d="M12 7a3 3 0 013 3c0 2-3 2-3 4" stroke="#DDE5DA" stroke-width="2" stroke-linecap="round"/>311          <circle cx="12" cy="17" r="1.5" fill="#DDE5DA"/>312        </svg>313        <span>Help & feedback</span>314      </div>315    </div>316  </div>317 318  <div class="gesture"></div>319</div>320</body>321</html>