GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1.0">6<title>Google Calendar Drawer - Mock</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: #0C1217; /* dark app background */15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0;21 left: 0;22 height: 84px;23 width: 100%;24 color: #E6E9ED;25 font-size: 38px;26 letter-spacing: 0.5px;27 }28 .status-time {29 position: absolute;30 left: 32px;31 top: 22px;32 }33 .status-icons {34 position: absolute;35 right: 28px;36 top: 22px;37 display: flex;38 align-items: center;39 gap: 28px;40 }41 .status-icons svg { width: 42px; height: 42px; fill: none; stroke: #E6E9ED; stroke-width: 3; }42 43 /* Underlying calendar preview (to the right of drawer) */44 .calendar-bg {45 position: absolute;46 right: 0;47 top: 140px;48 width: 360px;49 height: 1900px;50 }51 .bg-row {52 height: 220px;53 border-radius: 40px;54 margin: 34px 24px;55 background: #1A2329;56 position: relative;57 }58 .bg-event {59 position: absolute;60 left: 22px;61 right: 22px;62 height: 96px;63 border-radius: 40px;64 background: #28433E;65 top: 62px;66 }67 .fab {68 position: absolute;69 right: 48px;70 bottom: 260px;71 width: 120px;72 height: 120px;73 border-radius: 32px;74 background: #1A2329;75 display: flex;76 align-items: center;77 justify-content: center;78 color: #96A1AA;79 font-size: 72px;80 }81 82 /* Drawer */83 .drawer {84 position: absolute;85 left: 0;86 top: 84px;87 width: 880px;88 height: 2240px;89 background: #1D2832;90 border-top-right-radius: 56px;91 border-bottom-right-radius: 56px;92 box-shadow: 0 0 0 rgba(0,0,0,0);93 color: #E8ECEF;94 }95 .drawer-inner {96 padding: 52px 48px;97 }98 .brand {99 font-size: 56px;100 font-weight: 500;101 letter-spacing: 0.2px;102 margin-bottom: 40px;103 }104 105 .menu-group { margin-top: 10px; }106 .menu-item {107 display: flex;108 align-items: center;109 height: 116px;110 padding: 0 20px;111 color: #E8ECEF;112 border-radius: 36px;113 }114 .menu-item .icon {115 width: 92px;116 display: flex;117 align-items: center;118 justify-content: center;119 }120 .menu-item svg {121 width: 54px; height: 54px;122 fill: none; stroke: #B9C2CA; stroke-width: 4;123 }124 .menu-item .label {125 font-size: 40px;126 letter-spacing: 0.2px;127 }128 .menu-item.selected {129 background: #384450;130 }131 132 .divider {133 margin: 28px 0;134 height: 2px;135 background: #2C3741;136 }137 138 .refresh-row svg { stroke: #B9C2CA; }139 140 /* Accounts */141 .account {142 display: flex;143 align-items: center;144 height: 120px;145 padding-left: 20px;146 color: #DDE3E8;147 font-size: 34px;148 }149 .avatar {150 width: 80px; height: 80px; border-radius: 50%;151 display: flex; align-items: center; justify-content: center;152 font-weight: 600; color: #0C1217;153 margin-right: 28px;154 }155 .avatar.c { background: #69A7AA; }156 .avatar.j { background: #8C66D6; }157 158 .sub-item {159 display: flex;160 align-items: center;161 height: 106px;162 padding-left: 20px;163 color: #DDE3E8;164 font-size: 36px;165 }166 .check {167 width: 54px; height: 54px; border-radius: 10px; margin-right: 28px;168 display: flex; align-items: center; justify-content: center;169 border: 2px solid rgba(255,255,255,0.12);170 }171 .check svg { width: 38px; height: 38px; fill: none; stroke: #122018; stroke-width: 6; }172 .check.blue { background: #587FAF; }173 .check.purple { background: #7166A9; }174 .check.green { background: #6FA178; }175 176 .settings {177 position: absolute;178 left: 48px;179 bottom: 96px;180 right: 48px;181 }182 .settings .menu-item .label { font-size: 40px; }183 .home-bar {184 position: absolute;185 bottom: 40px; left: 50%; transform: translateX(-50%);186 width: 300px; height: 12px; background: #D6D8DB; border-radius: 10px; opacity: 0.8;187 }188</style>189</head>190<body>191<div id="render-target">192 193 <!-- Status bar -->194 <div class="status-bar">195 <div class="status-time">6:32</div>196 <div class="status-icons">197 <!-- WiFi -->198 <svg viewBox="0 0 24 24">199 <path d="M2 8c5-4 15-4 20 0"/>200 <path d="M5 12c3-2 11-2 14 0"/>201 <path d="M8 16c2-1 6-1 8 0"/>202 <circle cx="12" cy="19" r="1.6" fill="#E6E9ED" stroke="none"/>203 </svg>204 <!-- Battery -->205 <svg viewBox="0 0 28 24">206 <rect x="2" y="6" width="20" height="12" rx="2"></rect>207 <rect x="22" y="9" width="4" height="6" rx="1"></rect>208 <rect x="4" y="8" width="12" height="8" rx="1" fill="#E6E9ED" stroke="none"></rect>209 </svg>210 </div>211 </div>212 213 <!-- Underlying calendar preview -->214 <div class="calendar-bg">215 <div class="bg-row"><div class="bg-event"></div></div>216 <div class="bg-row"><div class="bg-event" style="background:#3A5A53;"></div></div>217 <div class="bg-row"><div class="bg-event" style="background:#2E4C45;"></div></div>218 <div class="bg-row"><div class="bg-event" style="background:#324F48;"></div></div>219 </div>220 <div class="fab">+</div>221 222 <!-- Drawer -->223 <div class="drawer">224 <div class="drawer-inner">225 <div class="brand">Google Calendar</div>226 227 <div class="menu-group">228 <div class="menu-item selected">229 <div class="icon">230 <!-- Schedule icon: two stacked cards -->231 <svg viewBox="0 0 24 24">232 <rect x="3" y="4" width="18" height="7" rx="2"></rect>233 <rect x="3" y="13" width="18" height="7" rx="2"></rect>234 </svg>235 </div>236 <div class="label">Schedule</div>237 </div>238 239 <div class="menu-item">240 <div class="icon">241 <!-- Day icon -->242 <svg viewBox="0 0 24 24">243 <rect x="3" y="5" width="18" height="14" rx="2"></rect>244 <line x1="3" y1="9" x2="21" y2="9"></line>245 </svg>246 </div>247 <div class="label">Day</div>248 </div>249 250 <div class="menu-item">251 <div class="icon">252 <!-- 3 days icon -->253 <svg viewBox="0 0 24 24">254 <rect x="3" y="4" width="18" height="16" rx="2"></rect>255 <line x1="9" y1="4" x2="9" y2="20"></line>256 <line x1="15" y1="4" x2="15" y2="20"></line>257 </svg>258 </div>259 <div class="label">3 days</div>260 </div>261 262 <div class="menu-item">263 <div class="icon">264 <!-- Week icon -->265 <svg viewBox="0 0 24 24">266 <rect x="3" y="4" width="18" height="16" rx="2"></rect>267 <line x1="7" y1="4" x2="7" y2="20"></line>268 <line x1="12" y1="4" x2="12" y2="20"></line>269 <line x1="17" y1="4" x2="17" y2="20"></line>270 </svg>271 </div>272 <div class="label">Week</div>273 </div>274 275 <div class="menu-item">276 <div class="icon">277 <!-- Month icon -->278 <svg viewBox="0 0 24 24">279 <rect x="3" y="4" width="18" height="16" rx="2"></rect>280 <line x1="3" y1="9" x2="21" y2="9"></line>281 <line x1="3" y1="13" x2="21" y2="13"></line>282 <line x1="8" y1="4" x2="8" y2="20"></line>283 <line x1="13" y1="4" x2="13" y2="20"></line>284 </svg>285 </div>286 <div class="label">Month</div>287 </div>288 </div>289 290 <div class="divider"></div>291 292 <div class="menu-item refresh-row">293 <div class="icon">294 <!-- Refresh icon -->295 <svg viewBox="0 0 24 24">296 <path d="M20 6v5h-5"></path>297 <path d="M20 11a8 8 0 1 0 2 3"></path>298 </svg>299 </div>300 <div class="label">Refresh</div>301 </div>302 303 <div class="divider"></div>304 305 <!-- Account 1 -->306 <div class="account">307 <div class="avatar c">C</div>308 <div>dbwscratch.test.id5@gmail.com</div>309 </div>310 <div class="sub-item">311 <div class="check blue">312 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>313 </div>314 <div>Events</div>315 </div>316 <div class="sub-item">317 <div class="check purple">318 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>319 </div>320 <div>Tasks</div>321 </div>322 323 <div class="divider"></div>324 325 <!-- Account 2 -->326 <div class="account">327 <div class="avatar j">J</div>328 <div>julesdupont205@gmail.com</div>329 </div>330 <div class="sub-item">331 <div class="check blue">332 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>333 </div>334 <div>Events</div>335 </div>336 <div class="sub-item">337 <div class="check purple">338 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>339 </div>340 <div>Tasks</div>341 </div>342 <div class="sub-item">343 <div class="check green">344 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>345 </div>346 <div>Birthdays</div>347 </div>348 <div class="sub-item">349 <div class="check green">350 <svg viewBox="0 0 24 24"><path d="M5 13l4 4 10-10"></path></svg>351 </div>352 <div>Holidays</div>353 </div>354 355 <div class="settings">356 <div class="divider"></div>357 <div class="menu-item">358 <div class="icon">359 <!-- Settings gear -->360 <svg viewBox="0 0 24 24">361 <circle cx="12" cy="12" r="3.2"></circle>362 <path d="M4 12a8 8 0 0 1 .4-2l2.2-.6 1-2.2-1.6-1.6A8 8 0 0 1 8 4l2 .4.6 2.2 2.2 1 1.6-1.6A8 8 0 0 1 16 4l.4 2 2.2.6 1 2.2-1.6 1.6.6 2.2-2 .6-.4 2-2.2 1-1.6-1.6-2.2 1-.6 2.2-2-.4a8 8 0 0 1-1.6-1.2l1.6-1.6-1-2.2-2.2-.6A8 8 0 0 1 4 12z"></path>363 </svg>364 </div>365 <div class="label">Settings</div>366 </div>367 </div>368 </div>369 </div>370 371 <div class="home-bar"></div>372</div>373</body>374</html>