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>Google Drive Drawer - Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px;10 height: 2400px;11 position: relative;12 overflow: hidden;13 background: #f3f4f5;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 1080px;22 height: 120px;23 background: #efefef;24 color: #3a3a3a;25 font-size: 36px;26 display: flex;27 align-items: center;28 padding: 0 32px;29 box-sizing: border-box;30 letter-spacing: 0.5px;31 }32 .status-bar .right {33 margin-left: auto;34 display: flex;35 align-items: center;36 gap: 24px;37 }38 .status-dot {39 width: 18px; height: 18px; border-radius: 50%; background:#555;40 }41 .wifi {42 width: 34px; height: 24px; border: 3px solid #555; border-top: none; border-radius: 0 0 14px 14px; position: relative;43 }44 .wifi:before {45 content: ""; position: absolute; left: 9px; top: -14px; width: 10px; height: 10px; border: 3px solid #555; border-radius: 50%;46 }47 .battery {48 width: 44px; height: 22px; border: 3px solid #555; border-radius: 4px; position: relative;49 }50 .battery:after {51 content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 10px; background: #555; border-radius: 1px;52 }53 54 /* App background (behind drawer) */55 .app-bg {56 position: absolute;57 top: 120px;58 left: 0;59 width: 1080px;60 height: 2280px;61 background: #e7e7ec;62 }63 .bg-header {64 height: 120px;65 background: #dddde5;66 }67 .bg-card {68 width: 860px;69 height: 220px;70 background: #ffffff;71 border-radius: 20px;72 box-shadow: 0 6px 18px rgba(0,0,0,0.08);73 margin: 48px 0 0 180px;74 display: flex;75 align-items: center;76 justify-content: center;77 color: #777;78 font-size: 40px;79 }80 .float-plus {81 position: absolute;82 right: 40px;83 bottom: 220px;84 width: 170px;85 height: 170px;86 border-radius: 36px;87 background: #e9dbe6;88 display: flex;89 align-items: center;90 justify-content: center;91 color: #5b1a47;92 font-size: 120px;93 font-weight: 600;94 box-shadow: 0 10px 24px rgba(0,0,0,0.15);95 }96 97 /* Drawer */98 .drawer {99 position: absolute;100 left: 0;101 top: 120px;102 width: 860px;103 height: 2280px;104 background: #ffffff;105 border-top-right-radius: 36px;106 border-bottom-right-radius: 36px;107 box-shadow: 8px 0 24px rgba(0,0,0,0.15);108 overflow: hidden;109 }110 .drawer-header {111 padding: 42px 40px 28px 40px;112 font-size: 56px;113 font-weight: 600;114 color: #1a1a1a;115 }116 .drawer-header .g { color: #4285F4; }117 .drawer-header .o1 { color: #DB4437; }118 .drawer-header .o2 { color: #F4B400; }119 .drawer-header .g2 { color: #4285F4; }120 .drawer-header .l { color: #0F9D58; }121 .drawer-header .e { color: #DB4437; }122 .divider {123 height: 2px;124 background: #e6e6e6;125 margin: 0 0 6px 0;126 }127 128 .menu {129 padding-top: 10px;130 }131 .menu-item {132 display: flex;133 align-items: center;134 gap: 28px;135 padding: 28px 24px 28px 40px;136 color: #1f2933;137 font-size: 44px;138 }139 .menu-item .icon {140 width: 76px;141 height: 76px;142 border-radius: 18px;143 display: flex;144 align-items: center;145 justify-content: center;146 background: transparent;147 }148 .menu-item svg { width: 54px; height: 54px; stroke: #60666c; fill: none; stroke-width: 2.8; }149 .menu-item .label { flex: 1; }150 .spacer-xx {151 height: 24px;152 }153 154 /* Storage section */155 .storage-section {156 padding: 22px 40px 24px 40px;157 }158 .storage-title {159 display: flex;160 align-items: center;161 gap: 28px;162 color: #1f2933;163 font-size: 44px;164 margin-bottom: 14px;165 }166 .progress {167 width: 780px;168 height: 10px;169 background: #dfe5d4;170 border-radius: 6px;171 margin: 16px 0 14px 0;172 overflow: hidden;173 }174 .progress .bar {175 width: 40px;176 height: 100%;177 background: #b9c2a0;178 }179 .storage-note {180 font-size: 34px;181 color: #616a72;182 margin: 8px 0 24px 0;183 }184 .buy-btn {185 display: inline-block;186 padding: 24px 38px;187 border-radius: 60px;188 border: 3px solid #6f8c3b;189 color: #6f8c3b;190 font-weight: 600;191 font-size: 40px;192 background: #ffffff;193 }194</style>195</head>196<body>197<div id="render-target">198 199 <!-- Status Bar -->200 <div class="status-bar">201 <div class="left">9:05</div>202 <div class="right">203 <div class="status-dot"></div>204 <div class="wifi"></div>205 <div class="battery"></div>206 </div>207 </div>208 209 <!-- App background placeholder -->210 <div class="app-bg">211 <div class="bg-header"></div>212 <div class="bg-card">[Underlying App Content]</div>213 <div class="float-plus">+</div>214 </div>215 216 <!-- Drawer -->217 <div class="drawer">218 <div class="drawer-header">219 <span class="g">G</span><span class="o1">o</span><span class="o2">o</span><span class="g2">g</span><span class="l">l</span><span class="e">e</span>220 Drive221 </div>222 <div class="divider"></div>223 224 <div class="menu">225 <!-- Recent -->226 <div class="menu-item">227 <div class="icon">228 <svg viewBox="0 0 24 24">229 <circle cx="12" cy="12" r="8"></circle>230 <path d="M12 8v5l3 2"></path>231 </svg>232 </div>233 <div class="label">Recent</div>234 </div>235 236 <!-- Offline -->237 <div class="menu-item">238 <div class="icon">239 <svg viewBox="0 0 24 24">240 <circle cx="12" cy="12" r="8"></circle>241 <path d="M8 12l3 3 5-6"></path>242 </svg>243 </div>244 <div class="label">Offline</div>245 </div>246 247 <!-- Trash -->248 <div class="menu-item">249 <div class="icon">250 <svg viewBox="0 0 24 24">251 <path d="M4 7h16"></path>252 <path d="M9 7V5h6v2"></path>253 <path d="M8 7l1 12h6l1-12"></path>254 </svg>255 </div>256 <div class="label">Trash</div>257 </div>258 259 <!-- Spam -->260 <div class="menu-item">261 <div class="icon">262 <svg viewBox="0 0 24 24">263 <path d="M12 4l8 14H4z"></path>264 <path d="M12 9v4"></path>265 <circle cx="12" cy="16.5" r="0.8" fill="#60666c"></circle>266 </svg>267 </div>268 <div class="label">Spam</div>269 </div>270 271 <!-- Backups -->272 <div class="menu-item">273 <div class="icon">274 <svg viewBox="0 0 24 24">275 <path d="M5 15a5 5 0 1 1 4-8 6 6 0 1 1 7 8"></path>276 <path d="M12 13v4"></path>277 <path d="M10 15l2-2 2 2"></path>278 </svg>279 </div>280 <div class="label">Backups</div>281 </div>282 283 <!-- Settings -->284 <div class="menu-item">285 <div class="icon">286 <svg viewBox="0 0 24 24">287 <circle cx="12" cy="12" r="3"></circle>288 <path d="M12 5v2M12 17v2M5 12h2M17 12h2M7.5 7.5l1.2 1.2M15.3 15.3l1.2 1.2M7.5 16.5l1.2-1.2M15.3 8.7l1.2-1.2"></path>289 </svg>290 </div>291 <div class="label">Settings</div>292 </div>293 294 <!-- Help & feedback -->295 <div class="menu-item">296 <div class="icon">297 <svg viewBox="0 0 24 24">298 <circle cx="12" cy="12" r="9"></circle>299 <path d="M9.5 9.5a3 3 0 1 1 5 2.2c-.6.5-1.3.8-1.6 1.6v1"></path>300 <circle cx="12" cy="17.3" r="0.8" fill="#60666c"></circle>301 </svg>302 </div>303 <div class="label">Help & feedback</div>304 </div>305 306 <div class="spacer-xx"></div>307 308 <!-- Storage section -->309 <div class="storage-section">310 <div class="storage-title">311 <div class="icon">312 <svg viewBox="0 0 24 24">313 <path d="M5 16a5 5 0 1 1 4-8 6 6 0 1 1 7 8"></path>314 </svg>315 </div>316 <div>Storage</div>317 </div>318 <div class="progress">319 <div class="bar"></div>320 </div>321 <div class="storage-note">31.3 MB of 15 GB used</div>322 <div>323 <span class="buy-btn">Buy storage</span>324 </div>325 </div>326 </div>327 </div>328 329</div>330</body>331</html>