GD-ML/AndroidCode
13.4k
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>Calendar Drawer UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #ffffff;13 font-family: Arial, Helvetica, sans-serif;14 color: #222;15 }16 17 /* Status bar / app bar */18 .statusbar {19 position: absolute; top: 0; left: 0; width: 1080px; height: 150px;20 background: #163C7A;21 color: #fff;22 }23 .status-content {24 position: absolute; left: 28px; right: 28px; top: 40px; height: 70px;25 display: flex; align-items: center; justify-content: space-between;26 font-size: 42px; letter-spacing: 0.5px;27 }28 .left-icons { display: flex; align-items: center; gap: 26px; }29 .right-icons { display: flex; align-items: center; gap: 26px; font-size: 38px; }30 31 /* Underlying calendar view */32 .calendar-bg {33 position: absolute; top: 150px; left: 0; width: 1080px; height: 2250px;34 background: #0f3469;35 }36 .calendar-header {37 position: absolute; top: 150px; right: 0; width: 1080px; height: 170px;38 background: #134079;39 }40 .calendar-grid {41 position: absolute; top: 320px; left: 0; width: 1080px; bottom: 0;42 padding: 28px;43 }44 .grid-card {45 width: 100%; height: 140px;46 background: rgba(255,255,255,0.08);47 border: 1px solid rgba(255,255,255,0.15);48 margin-bottom: 22px; border-radius: 12px;49 }50 .fab {51 position: absolute; top: 220px; right: 100px; width: 120px; height: 120px;52 background: #0A70C7; border-radius: 60px; box-shadow: 0 8px 20px rgba(0,0,0,0.25);53 display: flex; align-items: center; justify-content: center;54 color: #fff; font-size: 84px; line-height: 0;55 }56 .more-vert {57 position: absolute; top: 240px; right: 260px; width: 18px; height: 90px;58 display: flex; flex-direction: column; justify-content: space-between; align-items: center;59 }60 .dot { width: 18px; height: 18px; background: #fff; border-radius: 50%; opacity: 0.9; }61 62 /* Dim overlay on the right of drawer */63 .dim-overlay {64 position: absolute; top: 150px; left: 880px; width: 200px; height: 2250px;65 background: rgba(0,0,0,0.35);66 }67 68 /* Navigation drawer */69 .drawer {70 position: absolute; top: 110px; left: 0; width: 880px; height: 2230px;71 background: #fff; box-shadow: 0 0 40px rgba(0,0,0,0.35);72 overflow: hidden;73 }74 .weather-banner {75 position: relative; width: 880px; height: 170px;76 background: linear-gradient(135deg, #3e5f4b, #345944);77 color: #fff;78 display: flex; align-items: center;79 padding: 0 24px;80 }81 .weather-banner::before {82 content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0;83 background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.08));84 pointer-events: none;85 }86 .weather-text {87 font-size: 46px; margin-left: 20px;88 }89 .weather-arrow {90 margin-left: auto;91 }92 93 .nav-section { padding-top: 8px; }94 .nav-item {95 height: 110px; display: flex; align-items: center;96 padding: 0 32px; border-bottom: 1px solid #eee;97 font-size: 42px; color: #222;98 }99 .nav-item .label { margin-left: 26px; }100 .nav-item .star { margin-left: auto; }101 .selected { color: #2E6BB8; font-weight: 700; }102 .subtext { font-size: 34px; color: #E64A19; margin-top: 6px; }103 .section-divider {104 height: 18px; background: #f2f2f2; border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6;105 }106 .section-title {107 height: 110px; display: flex; align-items: center; padding: 0 32px;108 font-size: 40px; color: #777; border-bottom: 1px solid #eee;109 }110 .account {111 height: 130px; display: flex; align-items: center; padding: 0 32px; border-bottom: 1px solid #eee;112 font-size: 38px; color: #333;113 }114 .avatar {115 width: 78px; height: 78px; border-radius: 50%; background: #2E6BB8; color: #fff;116 display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: bold;117 margin-right: 22px;118 }119 .chevron {120 margin-left: auto;121 }122 123 /* Bottom gesture bar */124 .gesture {125 position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);126 width: 280px; height: 14px; background: #000; border-radius: 7px; opacity: 0.85;127 }128 129 /* Simple icon helpers */130 .i { width: 64px; height: 64px; }131 .i-grid-blue path, .i-grid-blue rect { fill: #2E6BB8; }132 .i-gray path, .i-gray rect, .i-gray circle { fill: #757575; }133 .i-dark path, .i-dark rect, .i-dark circle { fill: #444; }134 .star-gray { fill: #d1d1d1; }135 .star-gold { fill: #F4B43A; }136</style>137</head>138<body>139<div id="render-target">140 141 <!-- Status bar -->142 <div class="statusbar">143 <div class="status-content">144 <div class="left-icons">145 <span>12:18</span>146 <!-- small inline icons -->147 <svg class="i i-gray" viewBox="0 0 24 24">148 <rect x="2" y="4" width="20" height="16" rx="2"></rect>149 <rect x="6" y="8" width="12" height="2"></rect>150 <rect x="6" y="12" width="8" height="2"></rect>151 </svg>152 <svg class="i i-gray" viewBox="0 0 24 24">153 <path d="M3 5h18v4H3zM5 11h14v8H5z"></path>154 </svg>155 <svg class="i i-gray" viewBox="0 0 24 24">156 <circle cx="12" cy="12" r="8"></circle>157 <rect x="11" y="6" width="2" height="7"></rect>158 </svg>159 <svg class="i i-gray" viewBox="0 0 24 24">160 <path d="M10 3h4v6h6v4h-6v6h-4v-6H4V9h6z"></path>161 </svg>162 <span style="font-size:60px; line-height:0;">•</span>163 </div>164 <div class="right-icons">165 <svg class="i i-gray" viewBox="0 0 24 24"><path d="M3 18h18l-9-12z"></path></svg>166 <svg class="i i-gray" viewBox="0 0 24 24"><path d="M2 18h20l-10-14z"></path></svg>167 </div>168 </div>169 </div>170 171 <!-- Underlying calendar content -->172 <div class="calendar-bg"></div>173 <div class="calendar-header"></div>174 <div class="calendar-grid">175 <div class="grid-card"></div>176 <div class="grid-card"></div>177 <div class="grid-card"></div>178 <div class="grid-card"></div>179 <div class="grid-card"></div>180 </div>181 <div class="fab">+</div>182 <div class="more-vert"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>183 184 <!-- Right-side dim behind drawer -->185 <div class="dim-overlay"></div>186 187 <!-- Drawer -->188 <div class="drawer">189 <div class="weather-banner">190 <!-- simple cloud icon -->191 <svg width="76" height="76" viewBox="0 0 24 24">192 <path fill="#E6EAEA" d="M6 15a4 4 0 1 1 1.2-7.8A6 6 0 0 1 19 9a4 4 0 0 1 0 8H7.5A3.5 3.5 0 0 1 6 15z"></path>193 </svg>194 <div class="weather-text">Mostly cloudy., 89°</div>195 <div class="weather-arrow">196 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#ffffff" d="M9 6l6 6-6 6z"></path></svg>197 </div>198 </div>199 200 <div class="nav-section">201 <!-- Agenda -->202 <div class="nav-item">203 <svg class="i i-dark" viewBox="0 0 24 24">204 <rect x="3" y="5" width="18" height="2"></rect>205 <rect x="3" y="10" width="18" height="2"></rect>206 <rect x="3" y="15" width="18" height="2"></rect>207 </svg>208 <div class="label">Agenda</div>209 <div class="star">210 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gray" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>211 </div>212 </div>213 214 <!-- Day -->215 <div class="nav-item">216 <svg class="i i-dark" viewBox="0 0 24 24">217 <rect x="4" y="4" width="7" height="16"></rect>218 <rect x="13" y="8" width="7" height="12"></rect>219 <rect x="4" y="19" width="2" height="1" fill="#2E6BB8"></rect>220 </svg>221 <div class="label">Day</div>222 <div class="star">223 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gray" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>224 </div>225 </div>226 227 <!-- Week -->228 <div class="nav-item">229 <svg class="i i-dark" viewBox="0 0 24 24">230 <rect x="4" y="4" width="4" height="16"></rect>231 <rect x="10" y="6" width="4" height="14"></rect>232 <rect x="16" y="8" width="4" height="12"></rect>233 <rect x="4" y="19" width="2" height="2" fill="#2E6BB8"></rect>234 </svg>235 <div class="label">Week</div>236 <div class="star">237 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gray" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>238 </div>239 </div>240 241 <!-- Week agenda -->242 <div class="nav-item">243 <svg class="i i-dark" viewBox="0 0 24 24">244 <rect x="3" y="4" width="18" height="4"></rect>245 <rect x="3" y="10" width="18" height="4"></rect>246 <rect x="3" y="16" width="18" height="4"></rect>247 <circle cx="5" cy="6" r="1.3" fill="#2E6BB8"></circle>248 </svg>249 <div class="label">Week agenda</div>250 <div class="star">251 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gray" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>252 </div>253 </div>254 255 <!-- Month (selected) -->256 <div class="nav-item">257 <svg class="i i-grid-blue" viewBox="0 0 24 24">258 <rect x="3" y="4" width="18" height="4"></rect>259 <rect x="3" y="10" width="18" height="2"></rect>260 <rect x="3" y="14" width="18" height="2"></rect>261 <rect x="3" y="18" width="18" height="2"></rect>262 </svg>263 <div class="label selected">Month</div>264 <div class="star">265 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gold" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>266 </div>267 </div>268 269 <!-- Text month -->270 <div class="nav-item">271 <svg class="i i-dark" viewBox="0 0 24 24">272 <rect x="3" y="5" width="18" height="2"></rect>273 <rect x="3" y="9" width="18" height="2"></rect>274 <rect x="3" y="13" width="18" height="2"></rect>275 <rect x="3" y="17" width="12" height="2"></rect>276 </svg>277 <div class="label">Text month</div>278 <div class="star">279 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gray" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>280 </div>281 </div>282 283 <!-- Year -->284 <div class="nav-item">285 <svg class="i i-dark" viewBox="0 0 24 24">286 <rect x="3" y="4" width="6" height="6"></rect>287 <rect x="11" y="4" width="6" height="6"></rect>288 <rect x="3" y="12" width="6" height="6"></rect>289 <rect x="11" y="12" width="6" height="6"></rect>290 </svg>291 <div class="label">Year</div>292 <div class="star">293 <svg width="48" height="48" viewBox="0 0 24 24"><path class="star-gray" d="M12 2l3.1 6.2 6.9 1-5 4.9 1.2 6.9L12 18.5 5.8 21l1.2-6.9-5-4.9 6.9-1z"></path></svg>294 </div>295 </div>296 297 <!-- Search -->298 <div class="nav-item">299 <svg class="i i-dark" viewBox="0 0 24 24">300 <circle cx="10" cy="10" r="6"></circle>301 <rect x="15" y="15" width="7" height="2" transform="rotate(45 18.5 16)"></rect>302 </svg>303 <div class="label">Search</div>304 </div>305 306 <!-- Browse calendars -->307 <div class="nav-item" style="height: 130px;">308 <svg class="i i-dark" viewBox="0 0 24 24">309 <rect x="3" y="5" width="18" height="16" rx="2"></rect>310 <rect x="3" y="5" width="18" height="4"></rect>311 <path d="M12 12v6M9 15h6" stroke="#2E6BB8" stroke-width="2" fill="none"></path>312 </svg>313 <div class="label">314 <div>Browse calendars</div>315 <div class="subtext">Now 30% off!</div>316 </div>317 </div>318 319 <!-- Upgrade -->320 <div class="nav-item">321 <svg class="i i-dark" viewBox="0 0 24 24">322 <rect x="4" y="8" width="16" height="10"></rect>323 <rect x="8" y="5" width="8" height="3"></rect>324 </svg>325 <div class="label">Upgrade to DigiCal+</div>326 </div>327 </div>328 329 <div class="section-divider"></div>330 331 <!-- Calendars section -->332 <div class="section-title">333 <div style="flex:1;">Calendars</div>334 <svg width="56" height="56" viewBox="0 0 24 24">335 <rect x="4" y="5" width="16" height="15" rx="2" fill="#777"></rect>336 <rect x="4" y="5" width="16" height="4" fill="#999"></rect>337 </svg>338 </div>339 340 <div class="account">341 <div class="avatar">D</div>342 <div>dbwscratch.test.id6@gmail...</div>343 <div class="chevron">344 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#777" d="M8 10l4 4 4-4z"></path></svg>345 </div>346 </div>347 348 <!-- Footer options -->349 <div class="nav-item">350 <svg class="i i-dark" viewBox="0 0 24 24">351 <path d="M12 2l9 5v10l-9 5-9-5V7z"></path>352 <path d="M12 7l9 5" stroke="#fff" stroke-width="0.5"></path>353 </svg>354 <div class="label">Privacy policy</div>355 </div>356 357 <div class="nav-item">358 <svg class="i i-dark" viewBox="0 0 24 24">359 <circle cx="12" cy="12" r="10"></circle>360 <circle cx="12" cy="12" r="4" fill="#fff"></circle>361 </svg>362 <div class="label">Preferences</div>363 </div>364 365 <div class="nav-item">366 <svg class="i i-dark" viewBox="0 0 24 24">367 <circle cx="12" cy="8" r="3"></circle>368 <path d="M4 20c0-4.4 16-4.4 16 0" fill="#444"></path>369 </svg>370 <div class="label">Help</div>371 </div>372 373 <div class="nav-item">374 <svg class="i i-dark" viewBox="0 0 24 24">375 <path d="M19 9c0 4-4 8-7 8S5 13 5 9a7 7 0 1 1 14 0z"></path>376 <path d="M12 6a3 3 0 0 0-3 3" stroke="#fff" stroke-width="2" fill="none"></path>377 </svg>378 <div class="label">Weather</div>379 </div>380 381 </div>382 383 <!-- Bottom gesture bar -->384 <div class="gesture"></div>385</div>386</body>387</html>