GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Dropbox Mobile UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #121212; color: #F1F1F1;12 font-family: Arial, Helvetica, sans-serif;13 }14 .status-bar {15 height: 110px; padding: 0 36px;16 display: flex; align-items: center; justify-content: space-between;17 color: #DADADA; font-size: 40px;18 }19 .status-icons { display: flex; align-items: center; gap: 28px; }20 .icon { width: 56px; height: 56px; fill: #DADADA; }21 .appbar {22 height: 150px; padding: 0 36px;23 display: flex; align-items: center; gap: 28px;24 }25 .appbar-title { font-size: 64px; font-weight: 600; flex: 1; }26 .appbar-actions { display: flex; align-items: center; gap: 36px; }27 .search-wrap { padding: 0 36px; }28 .search {29 height: 110px; border-radius: 30px;30 background: #232323; color: #A8A8A8;31 display: flex; align-items: center; gap: 24px;32 padding: 0 30px; font-size: 40px;33 }34 .actions {35 padding: 26px 36px; display: flex; gap: 24px;36 }37 .action {38 flex: 1; height: 140px; border-radius: 16px;39 background: #2A2A2A; display: flex; align-items: center; justify-content: center; gap: 18px;40 color: #EDEDED; font-size: 42px; font-weight: 600;41 box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset;42 }43 .section-header {44 margin: 8px 0 0; padding: 18px 36px; height: 100px;45 display: flex; align-items: center; justify-content: space-between;46 border-top: 1px solid #2A2A2A; border-bottom: 1px solid #2A2A2A;47 }48 .section-left { display: flex; align-items: center; gap: 18px; }49 .section-title { font-size: 40px; color: #EDEDED; }50 .file-list { padding: 0 0 0 0; }51 .file-row {52 display: flex; align-items: center;53 padding: 24px 36px; gap: 28px;54 border-bottom: 1px solid #242424;55 }56 .thumb, .doc-icon {57 width: 110px; height: 110px; border-radius: 10px;58 display: flex; justify-content: center; align-items: center;59 }60 .thumb {61 background: #E0E0E0; border: 1px solid #BDBDBD; color: #757575; font-size: 26px; text-align: center; padding: 6px;62 }63 .doc-icon {64 background: #1E1E1E; border: 1px solid #3A3A3A;65 }66 .file-info { flex: 1; }67 .file-name { font-size: 44px; color: #F3F3F3; }68 .file-meta { font-size: 34px; color: #A9A9A9; margin-top: 10px; }69 .more { width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; }70 .fab {71 position: absolute; right: 48px; bottom: 260px;72 width: 160px; height: 160px; border-radius: 50%;73 background: #2D8CFF; display: flex; align-items: center; justify-content: center;74 box-shadow: 0 8px 24px rgba(0,0,0,0.5);75 }76 .nav-bar {77 position: absolute; left: 0; bottom: 80px;78 width: 100%; height: 180px; background: #1A1A1A;79 display: flex; align-items: center; justify-content: space-around;80 border-top: 1px solid #2A2A2A;81 }82 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #BEBEBE; }83 .nav-item.active { color: #FFFFFF; }84 .nav-label { font-size: 32px; }85 .gesture-pill {86 position: absolute; left: 50%; transform: translateX(-50%);87 bottom: 20px; width: 300px; height: 12px; border-radius: 6px; background: #EDEDED; opacity: 0.9;88 }89 .dot { width: 14px; height: 14px; background: #FF7A3D; border-radius: 50%; position: absolute; top: -6px; right: -6px; }90 /* small helper to tint icons */91 .icon-muted { fill: #BEBEBE; }92 .icon-strong { fill: #FFFFFF; }93</style>94</head>95<body>96<div id="render-target">97 98 <!-- Status Bar -->99 <div class="status-bar">100 <div>1:44</div>101 <div class="status-icons">102 <!-- Signal -->103 <svg class="icon" viewBox="0 0 24 24">104 <path d="M3 20h2v-2H3v2zm4 0h2v-5H7v5zm4 0h2v-8h-2v8zm4 0h2v-11h-2v11zm4 0h2V4h-2v16z"></path>105 </svg>106 <!-- Wifi -->107 <svg class="icon" viewBox="0 0 24 24">108 <path d="M2 8c5-4 15-4 20 0l-2 2c-4-3-12-3-16 0L2 8zm4 6c3-2 9-2 12 0l-2 2c-2-1-6-1-8 0l-2-2zm4 6l2-2 2 2-2 2-2-2z"></path>109 </svg>110 <!-- Battery -->111 <svg class="icon" viewBox="0 0 24 24">112 <path d="M20 9h2v6h-2V9zM3 7h16v10H3V7zm2 2h12v6H5V9z"></path>113 </svg>114 <div style="font-size:38px;">100%</div>115 </div>116 </div>117 118 <!-- App Bar -->119 <div class="appbar">120 <!-- Hamburger -->121 <svg class="icon" viewBox="0 0 24 24">122 <path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"></path>123 </svg>124 <div class="appbar-title">Dropbox</div>125 <div class="appbar-actions">126 <!-- Upload -->127 <svg class="icon" viewBox="0 0 24 24">128 <path d="M4 19h16v2H4v-2zm8-14l5 5h-3v6h-4v-6H7l5-5z"></path>129 </svg>130 <!-- Checkbox / Select -->131 <svg class="icon" viewBox="0 0 24 24">132 <path d="M4 4h16v16H4V4zm4 8l3 3 6-6 2 2-8 8-5-5 2-2z"></path>133 </svg>134 </div>135 </div>136 137 <!-- Search -->138 <div class="search-wrap">139 <div class="search">140 <svg class="icon icon-muted" viewBox="0 0 24 24">141 <circle cx="11" cy="11" r="7" stroke="#BEBEBE" stroke-width="2" fill="none"></circle>142 <path d="M16 16l5 5" stroke="#BEBEBE" stroke-width="2"></path>143 </svg>144 <span>Search for anything</span>145 </div>146 </div>147 148 <!-- Action Buttons -->149 <div class="actions">150 <div class="action">151 <svg class="icon icon-strong" viewBox="0 0 24 24">152 <path d="M4 19h16v2H4v-2zm8-14l5 5h-3v6h-4v-6H7l5-5z"></path>153 </svg>154 <span>Upload</span>155 </div>156 <div class="action">157 <svg class="icon icon-strong" viewBox="0 0 24 24">158 <path d="M4 5h10l4 4v10H4V5zm10 0v4h4"></path>159 </svg>160 <span>Folder</span>161 </div>162 <div class="action">163 <svg class="icon icon-strong" viewBox="0 0 24 24">164 <path d="M4 6h16v12H4V6zm3 3v6h10V9H7zM9 9v6M15 9v6" stroke="#FFFFFF" stroke-width="0.5"></path>165 </svg>166 <span>Scan</span>167 </div>168 </div>169 170 <!-- Section header -->171 <div class="section-header">172 <div class="section-left">173 <div class="section-title">Name</div>174 <svg class="icon icon-muted" viewBox="0 0 24 24">175 <path d="M7 10l5 5 5-5H7z"></path>176 </svg>177 </div>178 <!-- Grid / view toggle -->179 <svg class="icon icon-muted" viewBox="0 0 24 24">180 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"></path>181 </svg>182 </div>183 184 <!-- Files list -->185 <div class="file-list">186 <!-- 1 -->187 <div class="file-row">188 <div class="thumb">[IMG: PDF thumbnail]</div>189 <div class="file-info">190 <div class="file-name">0900766b81049498.pdf</div>191 <div class="file-meta">12 MB, modified 27 minutes ago</div>192 </div>193 <div class="more">194 <svg class="icon icon-muted" viewBox="0 0 24 24">195 <circle cx="12" cy="5" r="2"></circle>196 <circle cx="12" cy="12" r="2"></circle>197 <circle cx="12" cy="19" r="2"></circle>198 </svg>199 </div>200 </div>201 202 <!-- 2 -->203 <div class="file-row">204 <div class="doc-icon">205 <svg class="icon icon-muted" viewBox="0 0 24 24">206 <path d="M6 3h9l4 4v14H6V3zm9 0v4h4"></path>207 </svg>208 </div>209 <div class="file-info">210 <div class="file-name">actuation_result.txt</div>211 <div class="file-meta">8 Bytes, modified 27 minutes ago</div>212 </div>213 <div class="more">214 <svg class="icon icon-muted" viewBox="0 0 24 24">215 <circle cx="12" cy="5" r="2"></circle>216 <circle cx="12" cy="12" r="2"></circle>217 <circle cx="12" cy="19" r="2"></circle>218 </svg>219 </div>220 </div>221 222 <!-- 3 -->223 <div class="file-row">224 <div class="doc-icon">225 <svg class="icon icon-muted" viewBox="0 0 24 24">226 <path d="M6 3h9l4 4v14H6V3zm9 0v4h4"></path>227 </svg>228 </div>229 <div class="file-info">230 <div class="file-name">agents.txt</div>231 <div class="file-meta">1.1 KB, modified 2 seconds ago</div>232 </div>233 <div class="more">234 <svg class="icon icon-muted" viewBox="0 0 24 24">235 <circle cx="12" cy="5" r="2"></circle>236 <circle cx="12" cy="12" r="2"></circle>237 <circle cx="12" cy="19" r="2"></circle>238 </svg>239 </div>240 </div>241 242 <!-- 4 -->243 <div class="file-row">244 <div class="doc-icon">245 <!-- icon resembling archive/tool -->246 <svg class="icon icon-muted" viewBox="0 0 24 24">247 <path d="M4 4h16v4H4V4zm2 6h12v10H6V10zm3 3h6v2H9v-2z"></path>248 </svg>249 </div>250 <div class="file-info">251 <div class="file-name">Diy tool kit</div>252 <div class="file-meta">12 MB, modified 27 minutes ago</div>253 </div>254 <div class="more">255 <svg class="icon icon-muted" viewBox="0 0 24 24">256 <circle cx="12" cy="5" r="2"></circle>257 <circle cx="12" cy="12" r="2"></circle>258 <circle cx="12" cy="19" r="2"></circle>259 </svg>260 </div>261 </div>262 263 <!-- 5 -->264 <div class="file-row">265 <div class="doc-icon">266 <svg class="icon icon-muted" viewBox="0 0 24 24">267 <path d="M4 4h16v4H4V4zm2 6h12v10H6V10z"></path>268 </svg>269 </div>270 <div class="file-info">271 <div class="file-name">Diy tool kit.bin</div>272 <div class="file-meta">12 MB, modified 27 minutes ago</div>273 </div>274 <div class="more">275 <svg class="icon icon-muted" viewBox="0 0 24 24">276 <circle cx="12" cy="5" r="2"></circle>277 <circle cx="12" cy="12" r="2"></circle>278 <circle cx="12" cy="19" r="2"></circle>279 </svg>280 </div>281 </div>282 283 <!-- 6 -->284 <div class="file-row">285 <div class="thumb">[IMG: PNG thumbnail]</div>286 <div class="file-info">287 <div class="file-name">fitbitshare_1272361138.PNG</div>288 <div class="file-meta">94 KB, modified 27 minutes ago</div>289 </div>290 <div class="more">291 <svg class="icon icon-muted" viewBox="0 0 24 24">292 <circle cx="12" cy="5" r="2"></circle>293 <circle cx="12" cy="12" r="2"></circle>294 <circle cx="12" cy="19" r="2"></circle>295 </svg>296 </div>297 </div>298 299 <!-- 7 -->300 <div class="file-row">301 <div class="doc-icon">302 <svg class="icon icon-muted" viewBox="0 0 24 24">303 <path d="M6 3h9l4 4v14H6V3zm9 0v4h4"></path>304 </svg>305 </div>306 <div class="file-info">307 <div class="file-name">Google Keep Document.pdf</div>308 <div class="file-meta">13 KB, modified 27 minutes ago</div>309 </div>310 <div class="more">311 <svg class="icon icon-muted" viewBox="0 0 24 24">312 <circle cx="12" cy="5" r="2"></circle>313 <circle cx="12" cy="12" r="2"></circle>314 <circle cx="12" cy="19" r="2"></circle>315 </svg>316 </div>317 </div>318 319 <!-- 8 -->320 <div class="file-row">321 <div class="doc-icon">322 <svg class="icon icon-muted" viewBox="0 0 24 24">323 <path d="M6 3h9l4 4v14H6V3zm9 0v4h4"></path>324 </svg>325 </div>326 <div class="file-info">327 <div class="file-name">os_info.txt</div>328 <div class="file-meta">32 Bytes, modified 27 minutes ago</div>329 </div>330 <div class="more">331 <svg class="icon icon-muted" viewBox="0 0 24 24">332 <circle cx="12" cy="5" r="2"></circle>333 <circle cx="12" cy="12" r="2"></circle>334 <circle cx="12" cy="19" r="2"></circle>335 </svg>336 </div>337 </div>338 </div>339 340 <!-- Floating Action Button -->341 <div class="fab">342 <svg class="icon" viewBox="0 0 24 24">343 <path d="M11 5h2v14h-2V5zM5 11h14v2H5v-2z" fill="#FFFFFF"></path>344 </svg>345 </div>346 347 <!-- Bottom Navigation -->348 <div class="nav-bar">349 <div class="nav-item">350 <div style="position:relative;">351 <svg class="icon icon-muted" viewBox="0 0 24 24">352 <path d="M3 10l9-7 9 7v10h-6v-6H9v6H3V10z"></path>353 </svg>354 <div class="dot"></div>355 </div>356 <div class="nav-label">Home</div>357 </div>358 <div class="nav-item active">359 <svg class="icon" viewBox="0 0 24 24">360 <path d="M4 5h10l4 4v10H4V5zm10 0v4h4"></path>361 </svg>362 <div class="nav-label">Files</div>363 </div>364 <div class="nav-item">365 <svg class="icon icon-muted" viewBox="0 0 24 24">366 <path d="M4 5h16v14H4V5zm3 3h10v8H7V8zm1 7l3-3 2 2 3-4 3 5H8z"></path>367 </svg>368 <div class="nav-label">Photos</div>369 </div>370 <div class="nav-item">371 <svg class="icon icon-muted" viewBox="0 0 24 24">372 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm-7 8c0-4 6-6 7-6s7 2 7 6v2H5v-2z"></path>373 </svg>374 <div class="nav-label">Account</div>375 </div>376 </div>377 378 <!-- Gesture pill -->379 <div class="gesture-pill"></div>380 381</div>382</body>383</html>