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 UI Mock</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: #121212;15 color: #ECECEC;16 }17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0;21 width: 100%; height: 96px;22 display: flex; align-items: center; justify-content: space-between;23 padding: 0 36px;24 color: #FFFFFF; font-size: 34px; letter-spacing: 0.5px;25 }26 .status-right { display: flex; align-items: center; gap: 26px; font-size: 30px; color: #CFCFCF; }27 /* App header */28 .app-header {29 position: absolute;30 top: 96px; left: 0;31 width: 100%; height: 160px;32 display: flex; align-items: center;33 padding: 0 32px;34 }35 .app-title {36 font-size: 64px; font-weight: 600; margin-left: 24px;37 }38 .header-actions {39 margin-left: auto; display: flex; align-items: center; gap: 36px;40 }41 .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }42 .icon svg { width: 56px; height: 56px; fill: none; stroke: #EDEDED; stroke-width: 6; }43 .hamburger svg { stroke-width: 8; }44 /* Search */45 .search-wrap {46 position: absolute;47 top: 256px; left: 32px;48 width: 1016px; height: 108px;49 background: #1E1E1E; border-radius: 54px;50 display: flex; align-items: center; padding: 0 32px; gap: 22px;51 color: #B5B5B5; font-size: 40px;52 }53 .search-wrap .icon svg { stroke: #B5B5B5; }54 /* Quick actions */55 .quick-actions {56 position: absolute;57 top: 388px; left: 32px;58 display: flex; gap: 24px;59 }60 .qa-card {61 width: 316px; height: 132px; background: #2A2A2A; border-radius: 18px;62 display: flex; align-items: center; gap: 22px; padding: 0 28px;63 box-shadow: inset 0 0 0 1px #3A3A3A;64 font-size: 42px;65 }66 .qa-card .icon svg { stroke: #EDEDED; }67 /* List header */68 .list-header {69 position: absolute; top: 548px; left: 32px; right: 32px;70 height: 86px; display: flex; align-items: center; justify-content: space-between;71 border-bottom: 1px solid #2B2B2B;72 }73 .lh-left { display: flex; align-items: center; gap: 14px; color: #CFCFCF; font-size: 40px; }74 .lh-right .icon svg { stroke: #CFCFCF; }75 /* Files list */76 .files {77 position: absolute; top: 634px; left: 32px; right: 32px; bottom: 200px;78 overflow: hidden;79 }80 .file-item {81 height: 168px; display: flex; align-items: center;82 border-bottom: 1px solid #2B2B2B;83 }84 .thumb {85 width: 112px; height: 112px; margin-right: 28px;86 background: #E0E0E0; border: 1px solid #BDBDBD;87 color: #757575; font-size: 30px;88 display: flex; align-items: center; justify-content: center; border-radius: 12px;89 }90 .file-meta { flex: 1; }91 .file-name { font-size: 40px; color: #F0F0F0; }92 .file-sub { font-size: 34px; color: #A9A9A9; margin-top: 8px; }93 .more { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }94 .more svg { fill: #CFCFCF; }95 /* FAB */96 .fab {97 position: absolute; right: 40px; bottom: 300px;98 width: 132px; height: 132px; border-radius: 50%;99 background: #2F80ED; box-shadow: 0 8px 24px rgba(0,0,0,0.45);100 display: flex; align-items: center; justify-content: center;101 }102 .fab svg { width: 64px; height: 64px; stroke: #FFFFFF; stroke-width: 8; }103 /* Bottom nav */104 .bottom-nav {105 position: absolute; left: 0; bottom: 0; width: 100%; height: 180px;106 background: #1A1A1A; border-top: 1px solid #2B2B2B;107 display: flex; align-items: center; justify-content: space-around;108 }109 .bn-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #B5B5B5; font-size: 34px; }110 .bn-item .icon svg { stroke: #B5B5B5; }111 .bn-item.active { color: #FFFFFF; }112 .bn-item.active .icon svg { stroke: #FFFFFF; }113</style>114</head>115<body>116<div id="render-target">117 118 <!-- Status bar -->119 <div class="status-bar">120 <div>1:45</div>121 <div class="status-right">122 <span>⏺︎</span>123 <span>🔍</span>124 <span>🔔</span>125 <span>100%</span>126 </div>127 </div>128 129 <!-- App header -->130 <div class="app-header">131 <div class="icon hamburger">132 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>133 </div>134 <div class="app-title">Dropbox</div>135 <div class="header-actions">136 <div class="icon-btn icon">137 <!-- Upload -->138 <svg viewBox="0 0 24 24"><path d="M12 17V7M7 11l5-5 5 5"/><path d="M4 20h16"/></svg>139 </div>140 <div class="icon-btn icon">141 <!-- Checkbox -->142 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M7 12l3 3 7-7"/></svg>143 </div>144 </div>145 </div>146 147 <!-- Search -->148 <div class="search-wrap">149 <div class="icon">150 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="6"/><path d="M15 15l6 6"/></svg>151 </div>152 <div>Search for anything</div>153 </div>154 155 <!-- Quick actions -->156 <div class="quick-actions">157 <div class="qa-card">158 <div class="icon">159 <svg viewBox="0 0 24 24"><path d="M12 17V7M7 11l5-5 5 5"/><path d="M4 20h16"/></svg>160 </div>161 <div>Upload</div>162 </div>163 <div class="qa-card">164 <div class="icon">165 <svg viewBox="0 0 24 24"><path d="M3 7h6l2 2h10v10H3z"/></svg>166 </div>167 <div>Folder</div>168 </div>169 <div class="qa-card">170 <div class="icon">171 <svg viewBox="0 0 24 24"><path d="M4 7v-3h6M20 7v-3h-6M4 17v3h6M20 17v3h-6"/></svg>172 </div>173 <div>Scan</div>174 </div>175 </div>176 177 <!-- List header -->178 <div class="list-header">179 <div class="lh-left">180 <div>Name</div>181 <div class="icon">182 <svg viewBox="0 0 24 24"><path d="M6 9l6 6 6-6"/></svg>183 </div>184 </div>185 <div class="lh-right icon">186 <!-- Grid icon -->187 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/><rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/></svg>188 </div>189 </div>190 191 <!-- Files list -->192 <div class="files">193 <div class="file-item">194 <div class="thumb">[IMG: PDF Preview]</div>195 <div class="file-meta">196 <div class="file-name">0900766b81049498.pdf</div>197 <div class="file-sub">12 MB, modified 30 minutes ago</div>198 </div>199 <div class="more">200 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>201 </div>202 </div>203 204 <div class="file-item">205 <div class="thumb">[IMG: Text Doc]</div>206 <div class="file-meta">207 <div class="file-name">actuation_result.txt</div>208 <div class="file-sub">8 Bytes, modified 30 minutes ago</div>209 </div>210 <div class="more">211 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>212 </div>213 </div>214 215 <div class="file-item">216 <div class="thumb">[IMG: Text Doc]</div>217 <div class="file-meta">218 <div class="file-name">agents.txt</div>219 <div class="file-sub">1.1 KB, modified 3 minutes ago</div>220 </div>221 <div class="more">222 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>223 </div>224 </div>225 226 <div class="file-item">227 <div class="thumb">[IMG: Folder]</div>228 <div class="file-meta">229 <div class="file-name">Diy tool kit</div>230 <div class="file-sub">12 MB, modified 30 minutes ago</div>231 </div>232 <div class="more">233 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>234 </div>235 </div>236 237 <div class="file-item">238 <div class="thumb">[IMG: Binary File]</div>239 <div class="file-meta">240 <div class="file-name">Diy tool kit.bin</div>241 <div class="file-sub">12 MB, modified 30 minutes ago</div>242 </div>243 <div class="more">244 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>245 </div>246 </div>247 248 <div class="file-item">249 <div class="thumb">[IMG: PNG Image]</div>250 <div class="file-meta">251 <div class="file-name">fitbitshare_1272361138.PNG</div>252 <div class="file-sub">94 KB, modified 30 minutes ago</div>253 </div>254 <div class="more">255 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>256 </div>257 </div>258 259 <div class="file-item">260 <div class="thumb">[IMG: PDF Doc]</div>261 <div class="file-meta">262 <div class="file-name">Google Keep Document.pdf</div>263 <div class="file-sub">13 KB, modified 30 minutes ago</div>264 </div>265 <div class="more">266 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>267 </div>268 </div>269 270 <div class="file-item">271 <div class="thumb">[IMG: Text Doc]</div>272 <div class="file-meta">273 <div class="file-name">os_info.txt</div>274 <div class="file-sub">32 Bytes, modified 30 minutes ago</div>275 </div>276 <div class="more">277 <svg viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>278 </div>279 </div>280 </div>281 282 <!-- Floating Action Button -->283 <div class="fab">284 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>285 </div>286 287 <!-- Bottom navigation -->288 <div class="bottom-nav">289 <div class="bn-item">290 <div class="icon">291 <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H6v-6h12"/></svg>292 </div>293 <div>Home</div>294 </div>295 <div class="bn-item active">296 <div class="icon">297 <svg viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" rx="2"/><path d="M8 7h8M8 11h8M8 15h8"/></svg>298 </div>299 <div>Files</div>300 </div>301 <div class="bn-item">302 <div class="icon">303 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M8 14l3-3 3 3 3-4 4 5"/></svg>304 </div>305 <div>Photos</div>306 </div>307 <div class="bn-item">308 <div class="icon">309 <svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21c2-5 14-5 16 0"/></svg>310 </div>311 <div>Account</div>312 </div>313 </div>314 315</div>316</body>317</html>