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>Dropbox Dark UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 position: relative;11 width: 1080px;12 height: 2400px;13 overflow: hidden;14 background: #111111;15 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #EDEDED;17 }18 19 /* Status bar */20 .status-bar {21 height: 90px;22 padding: 0 36px;23 display: flex;24 align-items: center;25 justify-content: space-between;26 color: #FFFFFF;27 font-weight: 600;28 font-size: 36px;29 }30 .status-right {31 display: flex;32 align-items: center;33 gap: 24px;34 }35 .sb-icon svg { width: 40px; height: 40px; fill: none; stroke: #FFFFFF; stroke-width: 4; }36 37 /* Header */38 .header {39 height: 170px;40 padding: 0 36px;41 display: flex;42 align-items: center;43 gap: 26px;44 border-bottom: 1px solid #1d1d1d;45 }46 .hamburger svg { width: 60px; height: 60px; stroke: #EDEDED; stroke-width: 10; }47 .title { font-size: 64px; font-weight: 700; letter-spacing: 1px; }48 .header-actions {49 margin-left: auto;50 display: flex;51 align-items: center;52 gap: 38px;53 }54 .header-actions svg { width: 56px; height: 56px; stroke: #9E9E9E; stroke-width: 6; }55 56 /* Search */57 .search-wrap {58 padding: 24px 36px 8px 36px;59 }60 .search {61 height: 110px;62 border-radius: 55px;63 background: #202020;64 border: 1px solid #2c2c2c;65 display: flex;66 align-items: center;67 padding: 0 40px;68 gap: 26px;69 color: #A3A3A3;70 font-size: 36px;71 }72 .search svg { width: 46px; height: 46px; stroke: #9E9E9E; stroke-width: 6; }73 74 /* Quick actions */75 .quick-actions {76 padding: 24px 36px 30px 36px;77 display: flex;78 gap: 26px;79 }80 .action-card {81 flex: 1;82 height: 160px;83 background: #1f1f1f;84 border: 1px solid #2a2a2a;85 border-radius: 12px;86 display: flex;87 align-items: center;88 justify-content: center;89 gap: 18px;90 color: #D0D0D0;91 font-size: 40px;92 font-weight: 600;93 }94 .action-card svg { width: 56px; height: 56px; stroke: #BDBDBD; stroke-width: 6; }95 96 /* Divider / grabber */97 .grabber-area {98 height: 80px;99 display: flex;100 align-items: center;101 justify-content: center;102 }103 .grabber {104 width: 160px;105 height: 12px;106 border-radius: 6px;107 background: #4a4037;108 }109 110 /* Section title */111 .section {112 background: #222222;113 border-top: 1px solid #2d2d2d;114 border-bottom: 1px solid #2d2d2d;115 padding: 28px 36px;116 display: flex;117 align-items: center;118 gap: 26px;119 }120 .file-avatar {121 width: 88px;122 height: 88px;123 border-radius: 14px;124 background: #FFFFFF;125 display: flex;126 align-items: center;127 justify-content: center;128 }129 .file-avatar svg { width: 56px; height: 56px; fill: #222222; }130 .section-title {131 font-size: 48px;132 font-weight: 700;133 color: #F5F5F5;134 }135 136 /* Menu list */137 .menu {138 background: #2a2a2a;139 }140 .menu-item {141 height: 140px;142 padding: 0 36px;143 display: flex;144 align-items: center;145 border-top: 1px solid #3a3a3a;146 color: #EDEDED;147 }148 .menu-item .icon {149 width: 72px;150 height: 72px;151 margin-right: 34px;152 display: flex;153 align-items: center;154 justify-content: center;155 }156 .menu-item .icon svg {157 width: 60px; height: 60px;158 stroke: #D0D0D0; stroke-width: 6; fill: none;159 }160 .menu-item .label {161 font-size: 44px;162 font-weight: 600;163 }164 .menu-item .right {165 margin-left: auto;166 }167 168 /* Toggle */169 .toggle {170 width: 140px;171 height: 64px;172 border-radius: 32px;173 background: #6b6b6b;174 position: relative;175 }176 .toggle::after {177 content: "";178 position: absolute;179 top: 6px; left: 8px;180 width: 52px; height: 52px;181 background: #c8c8c8;182 border-radius: 26px;183 box-shadow: 0 1px 2px rgba(0,0,0,0.4);184 }185 186 .danger {187 color: #FF7A59;188 }189 .danger .icon svg { stroke: #FF7A59; }190 .bottom-safe {191 position: absolute;192 bottom: 0;193 left: 0;194 width: 100%;195 height: 140px;196 background: #0C0C0C;197 display: flex;198 align-items: center;199 justify-content: center;200 }201 .gesture {202 width: 300px;203 height: 16px;204 border-radius: 8px;205 background: #E0E0E0;206 opacity: 0.9;207 }208</style>209</head>210<body>211<div id="render-target">212 <!-- Status Bar -->213 <div class="status-bar">214 <div>1:44</div>215 <div class="status-right">216 <span class="sb-icon">217 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/></svg>218 </span>219 <span class="sb-icon">220 <svg viewBox="0 0 24 24"><path d="M14 8a4 4 0 00-8 0v4l-2 2h12l-2-2V8"/><path d="M10 16v3"/></svg>221 </span>222 <span class="sb-icon">223 <svg viewBox="0 0 24 24"><path d="M4 10c3-6 13-6 16 0"/><path d="M6 12c2-4 10-4 12 0"/><circle cx="12" cy="15" r="1.5"/></svg>224 </span>225 <span class="sb-icon">226 <svg viewBox="0 0 24 24"><rect x="3" y="6" width="18" height="12" rx="2"/><rect x="6" y="9" width="12" height="6"/></svg>227 </span>228 <span style="font-weight:700;">100%</span>229 </div>230 </div>231 232 <!-- Header -->233 <div class="header">234 <div class="hamburger">235 <svg viewBox="0 0 24 24">236 <path d="M3 6h18M3 12h18M3 18h18" />237 </svg>238 </div>239 <div class="title">Dropbox</div>240 <div class="header-actions">241 <svg viewBox="0 0 24 24">242 <path d="M12 5v10M7 10l5-5 5 5" />243 </svg>244 <svg viewBox="0 0 24 24">245 <rect x="3" y="3" width="18" height="18" rx="3"></rect>246 <path d="M7 12l3 3 7-7"></path>247 </svg>248 </div>249 </div>250 251 <!-- Search -->252 <div class="search-wrap">253 <div class="search">254 <svg viewBox="0 0 24 24">255 <circle cx="11" cy="11" r="7"></circle>256 <path d="M20 20l-4.5-4.5"></path>257 </svg>258 <span>Search for anything</span>259 </div>260 </div>261 262 <!-- Quick Actions -->263 <div class="quick-actions">264 <div class="action-card">265 <svg viewBox="0 0 24 24"><path d="M12 5v10M7 10l5-5 5 5"/><rect x="4" y="15" width="16" height="5" rx="1"/></svg>266 <span>Upload</span>267 </div>268 <div class="action-card">269 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M9 9h6M9 12h6"/></svg>270 <span>Folder</span>271 </div>272 <div class="action-card">273 <svg viewBox="0 0 24 24"><rect x="5" y="4" width="14" height="16" rx="2"/><path d="M9 8h6M9 12h6"/></svg>274 <span>Scan</span>275 </div>276 </div>277 278 <div class="grabber-area">279 <div class="grabber"></div>280 </div>281 282 <!-- Section Header -->283 <div class="section">284 <div class="file-avatar">285 <svg viewBox="0 0 24 24">286 <path d="M7 10c0-2 2-4 5-4s5 2 5 4" />287 <path d="M8 14h8M9 16l-2 3M15 16l2 3" />288 </svg>289 </div>290 <div class="section-title">Diy tool kit</div>291 </div>292 293 <!-- Menu Items -->294 <div class="menu">295 <div class="menu-item">296 <div class="icon">297 <svg viewBox="0 0 24 24">298 <circle cx="10" cy="11" r="4"></circle>299 <path d="M18 7v6M21 10h-6M4 18c2-4 10-4 12 0" />300 </svg>301 </div>302 <div class="label">Share</div>303 </div>304 305 <div class="menu-item">306 <div class="icon">307 <svg viewBox="0 0 24 24">308 <circle cx="12" cy="12" r="3"></circle>309 <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.5 5.5l2 2M16.5 16.5l2 2M16.5 7.5l2-2M5.5 16.5l-2 2"></path>310 </svg>311 </div>312 <div class="label">Manage access</div>313 </div>314 315 <div class="menu-item">316 <div class="icon">317 <svg viewBox="0 0 24 24">318 <path d="M7 15a5 5 0 019.5-2M6 15c0 2 2 4 6 4s6-2 6-4"></path>319 <path d="M12 10v4"></path>320 </svg>321 </div>322 <div class="label">Make available offline</div>323 <div class="right">324 <div class="toggle"></div>325 </div>326 </div>327 328 <div class="menu-item">329 <div class="icon">330 <svg viewBox="0 0 24 24">331 <path d="M12 3l3 6 6 .5-4.5 4 1.5 6-6-3-6 3 1.5-6L3 9.5 9 9z" />332 </svg>333 </div>334 <div class="label">Star</div>335 </div>336 337 <div class="menu-item">338 <div class="icon">339 <svg viewBox="0 0 24 24">340 <path d="M12 5v10M7 10l5 5 5-5" />341 <rect x="4" y="15" width="16" height="4" rx="1"></rect>342 </svg>343 </div>344 <div class="label">Save To Device</div>345 </div>346 347 <div class="menu-item">348 <div class="icon">349 <svg viewBox="0 0 24 24">350 <path d="M5 19l14-14" />351 <path d="M7 7h6v6" />352 </svg>353 </div>354 <div class="label">Rename</div>355 </div>356 357 <div class="menu-item">358 <div class="icon">359 <svg viewBox="0 0 24 24">360 <rect x="5" y="5" width="10" height="10" rx="2"></rect>361 <rect x="9" y="9" width="10" height="10" rx="2"></rect>362 </svg>363 </div>364 <div class="label">Duplicate</div>365 </div>366 367 <div class="menu-item">368 <div class="icon">369 <svg viewBox="0 0 24 24">370 <path d="M12 2v20M2 12h20" />371 </svg>372 </div>373 <div class="label">Move</div>374 </div>375 376 <div class="menu-item">377 <div class="icon">378 <svg viewBox="0 0 24 24">379 <rect x="4" y="4" width="12" height="12" rx="2"></rect>380 <path d="M9 9h6M9 13h4M17 7l3-3M14 10l6-6" />381 </svg>382 </div>383 <div class="label">Open with...</div>384 </div>385 386 <div class="menu-item danger">387 <div class="icon">388 <svg viewBox="0 0 24 24">389 <path d="M3 6h18M8 6l1 12h6l1-12M10 6l1-2h2l1 2M10 10v5M14 10v5"/>390 </svg>391 </div>392 <div class="label">Delete</div>393 </div>394 </div>395 396 <!-- Bottom Gesture Bar -->397 <div class="bottom-safe">398 <div class="gesture"></div>399 </div>400</div>401</body>402</html>