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>Navigation Drawer - Calendar</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #0e3c74;15 }16 17 /* Underlying app (calendar) */18 .app-bg { position: absolute; inset: 0; }19 .app-topbar { position: absolute; top: 0; left: 0; right: 0; height: 160px; background: #154a86; }20 .calendar-area {21 position: absolute; top: 160px; left: 0; right: 0; bottom: 120px;22 background:23 linear-gradient(#ffffff,#fafafa);24 }25 /* subtle month grid */26 .calendar-area::after {27 content: "";28 position: absolute; inset: 0;29 background:30 repeating-linear-gradient(to right, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 154px),31 repeating-linear-gradient(to bottom, rgba(0,0,0,0.05) 0, rgba(0,0,0,0.05) 1px, transparent 1px, transparent 168px);32 opacity: 0.55;33 }34 /* bottom gesture bar background */35 .sys-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: #000; }36 .gesture-pill {37 position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);38 width: 260px; height: 16px; border-radius: 12px; background: #fff;39 opacity: 0.9;40 }41 42 /* Scrim when drawer is open */43 .scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.35); }44 45 /* Drawer */46 .drawer {47 position: absolute; top: 0; left: 0; width: 870px; height: 2400px;48 background: #ffffff; box-shadow: 6px 0 24px rgba(0,0,0,0.45);49 z-index: 3; overflow: hidden;50 }51 .hero {52 position: relative; height: 380px; background: #ffffff;53 }54 .hero .img-ph {55 position: absolute; inset: 0;56 background: #E0E0E0; border-bottom: 1px solid #BDBDBD;57 display: flex; align-items: center; justify-content: center; color: #757575; font-weight: 500;58 letter-spacing: 0.2px;59 }60 .weather-bar {61 position: absolute; left: 0; right: 0; bottom: 0;62 height: 92px; background: rgba(34, 60, 41, 0.85);63 color: #fff; display: flex; align-items: center; padding: 0 24px;64 }65 .weather-bar .w-icon { width: 60px; height: 60px; margin-right: 16px; opacity: 0.9; }66 .weather-bar .w-text { font-size: 40px; font-weight: 500; }67 .weather-bar .chev { margin-left: auto; width: 40px; height: 40px; }68 69 .section { padding: 18px 34px; color: #7b7b7b; font-size: 28px; border-top: 1px solid #eee; background: #fafafa; }70 71 .menu { padding-top: 10px; }72 .item {73 position: relative;74 display: flex; align-items: center;75 height: 118px; padding: 0 26px 0 34px;76 color: #222;77 }78 .item .l-icon { width: 84px; display: flex; align-items: center; justify-content: center; }79 .item .label { font-size: 40px; }80 .item .star {81 position: absolute; right: 28px; width: 44px; height: 44px; opacity: 0.35;82 }83 .item.active .label { color: #2d69c7; font-weight: 700; }84 .item.active .l-icon svg { fill: #2d69c7; }85 .item.active .star { opacity: 1; }86 .sub { font-size: 26px; color: #e0502d; margin-top: 6px; }87 .stack { display: flex; flex-direction: column; }88 89 /* Account row */90 .account { display: flex; align-items: center; height: 120px; padding: 0 34px; }91 .avatar {92 width: 72px; height: 72px; border-radius: 50%;93 background: #2d69c7; color: #fff; display: flex; align-items: center; justify-content: center;94 font-weight: 700; font-size: 36px; margin-right: 22px;95 }96 .acc-text { font-size: 34px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 610px; }97 .acc-arrow { margin-left: auto; width: 34px; height: 34px; }98 99 /* Top device status bar (always on top) */100 .status {101 position: absolute; top: 0; left: 0; right: 0; height: 160px; background: #154a86;102 color: #fff; z-index: 5; display: flex; align-items: center; padding: 0 24px;103 }104 .status .time { font-size: 38px; font-weight: 600; letter-spacing: 0.5px; }105 .status .tray { margin-left: auto; display: flex; align-items: center; gap: 26px; }106 .status svg { fill: #fff; }107</style>108</head>109<body>110<div id="render-target">111 112 <!-- Underlying calendar app -->113 <div class="app-bg">114 <div class="app-topbar"></div>115 <div class="calendar-area"></div>116 <div class="sys-bottom"><div class="gesture-pill"></div></div>117 </div>118 119 <!-- Dim background -->120 <div class="scrim"></div>121 122 <!-- Drawer -->123 <aside class="drawer">124 <div class="hero">125 <div class="img-ph">[IMG: Weather illustration]</div>126 <div class="weather-bar">127 <svg class="w-icon" viewBox="0 0 24 24">128 <path d="M6 15.5a3.5 3.5 0 1 1 1.1-6.8A5 5 0 0 1 18 11.5h.5A3.5 3.5 0 1 1 18 18H8a3 3 0 0 1-2-2.5z"/>129 </svg>130 <div class="w-text">Mostly cloudy., 89°</div>131 <svg class="chev" viewBox="0 0 24 24">132 <path d="M9 6l6 6-6 6" stroke="#fff" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>133 </svg>134 </div>135 </div>136 137 <div class="menu">138 <div class="item">139 <div class="l-icon">140 <svg width="48" height="48" viewBox="0 0 24 24" fill="#6d6d6d">141 <rect x="3" y="6" width="18" height="3"></rect>142 <rect x="3" y="11" width="14" height="3"></rect>143 <rect x="3" y="16" width="10" height="3"></rect>144 </svg>145 </div>146 <div class="label">Agenda</div>147 <svg class="star" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>148 </div>149 150 <div class="item">151 <div class="l-icon">152 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">153 <rect x="3" y="5" width="7" height="14"></rect>154 <rect x="14" y="5" width="7" height="14"></rect>155 </svg>156 </div>157 <div class="label">Day</div>158 <svg class="star" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>159 </div>160 161 <div class="item">162 <div class="l-icon">163 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">164 <rect x="3" y="6" width="5" height="12"></rect>165 <rect x="10" y="6" width="5" height="12"></rect>166 <rect x="17" y="6" width="5" height="12"></rect>167 </svg>168 </div>169 <div class="label">Week</div>170 <svg class="star" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>171 </div>172 173 <div class="item">174 <div class="l-icon">175 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">176 <rect x="3" y="4" width="18" height="4"></rect>177 <rect x="3" y="10" width="18" height="4"></rect>178 <rect x="3" y="16" width="18" height="4"></rect>179 </svg>180 </div>181 <div class="label">Week agenda</div>182 <svg class="star" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>183 </div>184 185 <div class="item active">186 <div class="l-icon">187 <svg width="52" height="52" viewBox="0 0 24 24" fill="#2d69c7">188 <rect x="3" y="4" width="18" height="4"></rect>189 <rect x="3" y="9" width="18" height="11"></rect>190 <rect x="5" y="11" width="3" height="3" fill="#fff"></rect>191 <rect x="10" y="11" width="3" height="3" fill="#fff"></rect>192 <rect x="15" y="11" width="3" height="3" fill="#fff"></rect>193 </svg>194 </div>195 <div class="label">Month</div>196 <svg class="star" viewBox="0 0 24 24" fill="#f5b400"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>197 </div>198 199 <div class="item">200 <div class="l-icon">201 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">202 <rect x="3" y="5" width="18" height="14"></rect>203 <rect x="6" y="8" width="3" height="3" fill="#fff"></rect>204 <rect x="11" y="8" width="3" height="3" fill="#fff"></rect>205 <rect x="16" y="8" width="3" height="3" fill="#fff"></rect>206 </svg>207 </div>208 <div class="label">Text month</div>209 <svg class="star" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>210 </div>211 212 <div class="item">213 <div class="l-icon">214 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">215 <rect x="3" y="4" width="18" height="16"></rect>216 <rect x="6" y="7" width="3" height="3" fill="#fff"></rect>217 <rect x="11" y="7" width="3" height="3" fill="#fff"></rect>218 <rect x="16" y="7" width="3" height="3" fill="#fff"></rect>219 <rect x="6" y="12" width="3" height="3" fill="#fff"></rect>220 <rect x="11" y="12" width="3" height="3" fill="#fff"></rect>221 <rect x="16" y="12" width="3" height="3" fill="#fff"></rect>222 </svg>223 </div>224 <div class="label">Year</div>225 <svg class="star" viewBox="0 0 24 24" fill="#bdbdbd"><path d="M12 17.3l-5.5 3 1.1-6.2L2 9.8l6.2-.9L12 3l3.8 5.9 6.2.9-4.6 4.3 1.1 6.2z"/></svg>226 </div>227 228 <div class="item">229 <div class="l-icon">230 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">231 <circle cx="11" cy="11" r="7" stroke="none"></circle>232 <rect x="16" y="16" width="6" height="2" transform="rotate(45 16 16)"></rect>233 </svg>234 </div>235 <div class="label">Search</div>236 </div>237 238 <div class="item">239 <div class="l-icon">240 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">241 <rect x="4" y="5" width="16" height="14" rx="2"></rect>242 <rect x="7" y="2" width="2" height="6" fill="#6d6d6d"></rect>243 <rect x="15" y="2" width="2" height="6" fill="#6d6d6d"></rect>244 <rect x="11" y="10" width="6" height="2" fill="#6d6d6d"></rect>245 <rect x="13" y="8" width="2" height="6" fill="#6d6d6d"></rect>246 </svg>247 </div>248 <div class="stack">249 <div class="label">Browse calendars</div>250 <div class="sub">Now 30% off!</div>251 </div>252 </div>253 254 <div class="item">255 <div class="l-icon">256 <svg width="52" height="52" viewBox="0 0 24 24" fill="#6d6d6d">257 <path d="M6 7h12l2 10H4L6 7z"></path>258 <rect x="9" y="4" width="6" height="3"></rect>259 </svg>260 </div>261 <div class="label">Upgrade to DigiCal+</div>262 </div>263 264 <div class="section">Calendars</div>265 266 <div class="account">267 <div class="avatar">D</div>268 <div class="acc-text">dbwscratch.test.id6@gmail.com</div>269 <svg class="acc-arrow" viewBox="0 0 24 24">270 <path d="M7 10l5 5 5-5" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>271 </svg>272 </div>273 274 <div class="item">275 <div class="l-icon">276 <svg width="48" height="48" viewBox="0 0 24 24" fill="#6d6d6d">277 <path d="M12 2l2.2 4.5 5 .7-3.6 3.5.8 5-4.4-2.3L7.6 16l.8-5L4.8 7.2l5-.7L12 2z"></path>278 </svg>279 </div>280 <div class="label">Privacy policy</div>281 </div>282 283 <div style="height: 260px;"></div>284 </div>285 </aside>286 287 <!-- Top device status bar -->288 <div class="status">289 <div class="time">12:18</div>290 <div class="tray">291 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 3h18v14H3zM6 20h12v1H6z"/></svg>292 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 17h18v3H3zM5 10h14v5H5zM7 6h10v3H7z"/></svg>293 <svg width="40" height="40" viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/></svg>294 <svg width="40" height="40" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"></circle><circle cx="18" cy="12" r="2"></circle><circle cx="6" cy="12" r="2"></circle></svg>295 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M3 18h18l-9-12z"/></svg>296 <svg width="40" height="40" viewBox="0 0 24 24"><path d="M21 8v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8" fill="none" stroke="#fff" stroke-width="2"/><path d="M7 4h10v4H7z" fill="#fff"/></svg>297 </div>298 </div>299 300</div>301</body>302</html>