GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<meta name="viewport" content="width=1080, initial-scale=1.0">5<title>Side Drawer UI</title>6<style>7 body { margin:0; padding:0; background:transparent; font-family: "Roboto", Arial, sans-serif; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#0b0e11;11 }12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:100px;15 display:flex; align-items:center; justify-content:space-between;16 color:#ffffff; padding:0 38px; font-size:40px; letter-spacing:0.5px;17 }18 .sb-left { display:flex; align-items:center; gap:22px; }19 .notif-dot { width:16px; height:16px; background:#ffffff; border-radius:50%; opacity:0.8; }20 .sb-right { display:flex; align-items:center; gap:26px; }21 .sb-icon svg { width:44px; height:44px; fill:#ffffff; opacity:0.9; }22 23 /* Drawer */24 .drawer {25 position:absolute; top:100px; left:0; width:720px; height:2300px;26 background:#1f262b; color:#eef4f8; box-shadow:12px 0 60px rgba(0,0,0,0.45);27 }28 .menu { padding:40px 36px; }29 .header-row {30 display:flex; align-items:center; gap:24px; margin-bottom:36px;31 color:#e9edf2; font-size:50px; font-weight:600;32 }33 .section-label {34 color:#9fb0bb; font-size:32px; margin:22px 0 10px 12px;35 }36 .item {37 height:92px; display:flex; align-items:center; justify-content:space-between;38 padding:0 14px 0 6px; border-radius:10px; color:#e9edf3;39 }40 .item:hover { background:#263036; }41 .left {42 display:flex; align-items:center; gap:24px;43 }44 .icon {45 width:66px; height:66px; display:flex; align-items:center; justify-content:center;46 }47 .icon svg { width:56px; height:56px; fill:#cbd6dc; }48 .label { font-size:42px; }49 .count { font-size:36px; color:#c4d0d7; padding-right:18px; }50 .divider {51 height:1px; background:#2b353c; margin:24px 0;52 }53 .subheader {54 color:#9fb0bb; font-size:30px; margin:30px 0 14px 12px;55 }56 57 /* Right dark overlay simulating inbox behind */58 .overlay-right {59 position:absolute; top:100px; left:720px; width:360px; height:2300px;60 background:linear-gradient(90deg, rgba(10,12,15,0.65), rgba(10,12,15,0.9));61 }62 .ghost-stars {63 position:absolute; right:24px; top:380px; display:flex; flex-direction:column; gap:160px;64 opacity:0.7;65 }66 .ghost-stars svg { width:58px; height:58px; fill:#b7c4ce; }67 .date-col {68 position:absolute; top:220px; right:34px; color:#c9d3da; font-size:34px;69 opacity:0.8;70 }71 72 /* Bottom gesture bar */73 .gesture {74 position:absolute; bottom:36px; left:50%; transform:translateX(-50%);75 width:480px; height:10px; background:#e8e8e8; border-radius:10px; opacity:0.85;76 }77</style>78</head>79<body>80<div id="render-target">81 82 <!-- Status Bar -->83 <div class="status-bar">84 <div class="sb-left">85 <div>8:20</div>86 <div class="notif-dot"></div>87 <div class="notif-dot"></div>88 <div class="notif-dot"></div>89 <div class="notif-dot"></div>90 <div class="notif-dot"></div>91 <div class="notif-dot"></div>92 <div class="notif-dot"></div>93 <div class="notif-dot"></div>94 <div class="notif-dot"></div>95 </div>96 <div class="sb-right">97 <div class="sb-icon">98 <!-- WiFi -->99 <svg viewBox="0 0 24 24">100 <path d="M12 20a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm-7-7a11 11 0 0 1 14 0l-2 2a7 7 0 0 0-10 0l-2-2zm-3-4a17 17 0 0 1 24 0l-2.5 2.5a13 13 0 0 0-19 0L2 9z"/>101 </svg>102 </div>103 <div class="sb-icon">104 <!-- Battery -->105 <svg viewBox="0 0 26 24">106 <rect x="2" y="6" width="18" height="12" rx="2"></rect>107 <rect x="21" y="9" width="3" height="6"></rect>108 </svg>109 </div>110 </div>111 </div>112 113 <!-- Drawer Panel -->114 <div class="drawer">115 <div class="menu">116 <div class="header-row">117 <div class="icon">118 <!-- Person -->119 <svg viewBox="0 0 24 24">120 <circle cx="12" cy="8" r="4"></circle>121 <path d="M4 20c0-4.5 16-4.5 16 0v1H4v-1z"></path>122 </svg>123 </div>124 <div>Social</div>125 </div>126 127 <div class="section-label">All labels</div>128 129 <div class="item">130 <div class="left">131 <div class="icon">132 <!-- Star -->133 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z"/></svg>134 </div>135 <div class="label">Starred</div>136 </div>137 </div>138 139 <div class="item">140 <div class="left">141 <div class="icon">142 <!-- Clock -->143 <svg viewBox="0 0 24 24">144 <circle cx="12" cy="12" r="9"></circle>145 <path d="M12 12V6M12 12l5 3" stroke="#cbd6dc" stroke-width="2" fill="none"/>146 </svg>147 </div>148 <div class="label">Snoozed</div>149 </div>150 </div>151 152 <div class="item">153 <div class="left">154 <div class="icon">155 <!-- Ribbon (Important) -->156 <svg viewBox="0 0 24 24">157 <path d="M6 2h12v16l-6-3-6 3V2z"></path>158 </svg>159 </div>160 <div class="label">Important</div>161 </div>162 <div class="count">1</div>163 </div>164 165 <div class="item">166 <div class="left">167 <div class="icon">168 <!-- Paper plane -->169 <svg viewBox="0 0 24 24"><path d="M2 12l19-9-6 19-4-7-9-3z"/></svg>170 </div>171 <div class="label">Sent</div>172 </div>173 </div>174 175 <div class="item">176 <div class="left">177 <div class="icon">178 <!-- Scheduled (bell-ish) -->179 <svg viewBox="0 0 24 24">180 <path d="M12 2a4 4 0 0 0-4 4v3l-2 4h12l-2-4V6a4 4 0 0 0-4-4z"></path>181 <circle cx="12" cy="20" r="2"></circle>182 </svg>183 </div>184 <div class="label">Scheduled</div>185 </div>186 </div>187 188 <div class="item">189 <div class="left">190 <div class="icon">191 <!-- Outbox -->192 <svg viewBox="0 0 24 24">193 <rect x="3" y="7" width="18" height="10" rx="2"></rect>194 <path d="M12 5l4 4H8l4-4z"></path>195 </svg>196 </div>197 <div class="label">Outbox</div>198 </div>199 </div>200 201 <div class="item">202 <div class="left">203 <div class="icon">204 <!-- Drafts / Document -->205 <svg viewBox="0 0 24 24">206 <path d="M6 2h9l5 5v15H6z"></path>207 <path d="M15 2v6h6" fill="#1f262b"></path>208 </svg>209 </div>210 <div class="label">Drafts</div>211 </div>212 </div>213 214 <div class="item">215 <div class="left">216 <div class="icon">217 <!-- Mail -->218 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"></rect><path d="M3 8l9 6 9-6" fill="#1f262b" stroke="#cbd6dc" stroke-width="1.5"/></svg>219 </div>220 <div class="label">All mail</div>221 </div>222 <div class="count">22</div>223 </div>224 225 <div class="item">226 <div class="left">227 <div class="icon">228 <!-- Spam warning -->229 <svg viewBox="0 0 24 24">230 <path d="M12 2l9 7-3 11H6L3 9l9-7z"></path>231 <rect x="11" y="8" width="2" height="6" fill="#1f262b"></rect>232 <rect x="11" y="15" width="2" height="2" fill="#1f262b"></rect>233 </svg>234 </div>235 <div class="label">Spam</div>236 </div>237 <div class="count">1</div>238 </div>239 240 <div class="item">241 <div class="left">242 <div class="icon">243 <!-- Trash -->244 <svg viewBox="0 0 24 24">245 <path d="M4 7h16M9 7V4h6v3M6 7l2 13h8l2-13"></path>246 </svg>247 </div>248 <div class="label">Trash</div>249 </div>250 <div class="count">1</div>251 </div>252 253 <div class="subheader">Google apps</div>254 255 <div class="item">256 <div class="left">257 <div class="icon">258 <!-- Calendar -->259 <svg viewBox="0 0 24 24">260 <rect x="3" y="5" width="18" height="16" rx="2"></rect>261 <rect x="3" y="9" width="18" height="3" fill="#1f262b"></rect>262 <rect x="7" y="2" width="2" height="4"></rect>263 <rect x="15" y="2" width="2" height="4"></rect>264 </svg>265 </div>266 <div class="label">Calendar</div>267 </div>268 </div>269 270 <div class="item">271 <div class="left">272 <div class="icon">273 <!-- Contacts -->274 <svg viewBox="0 0 24 24">275 <circle cx="12" cy="8" r="4"></circle>276 <path d="M4 20c0-4.5 16-4.5 16 0v1H4v-1z"></path>277 </svg>278 </div>279 <div class="label">Contacts</div>280 </div>281 </div>282 283 <div class="divider"></div>284 285 <div class="item">286 <div class="left">287 <div class="icon">288 <!-- Settings gear -->289 <svg viewBox="0 0 24 24">290 <circle cx="12" cy="12" r="3"></circle>291 <path d="M4 12l2-1 1-3 3-1 1-2 2 2 3-1 1 3 2 1-2 1-1 3-3 1-1 2-2-2-3 1-1-3-2-1z"></path>292 </svg>293 </div>294 <div class="label">Settings</div>295 </div>296 </div>297 298 <div class="item">299 <div class="left">300 <div class="icon">301 <!-- Help -->302 <svg viewBox="0 0 24 24">303 <circle cx="12" cy="12" r="10"></circle>304 <path d="M12 17h0.01M10 9a3 3 0 1 1 4 2c-1 0.6-2 1.2-2 3" fill="#1f262b" stroke="#cbd6dc" stroke-width="1.5"/>305 </svg>306 </div>307 <div class="label">Help & feedback</div>308 </div>309 </div>310 311 </div>312 </div>313 314 <!-- Right overlay with subtle stars and dates -->315 <div class="overlay-right">316 <div class="date-col">317 Oct 5<br><br>Oct 4<br><br>Oct 4<br><br>Oct 4<br><br>Oct 3<br><br>Oct 3318 </div>319 <div class="ghost-stars">320 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z"/></svg>321 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z"/></svg>322 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z"/></svg>323 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 7 1-5 4 2 7-7-4-7 4 2-7-5-4 7-1 3-6z"/></svg>324 </div>325 </div>326 327 <!-- Bottom gesture bar -->328 <div class="gesture"></div>329 330</div>331</body>332</html>