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>Dropbox Mobile UI 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: #0F0F0F;14 color: #EDEDED;15 }16 17 /* Status bar */18 .status-bar {19 height: 90px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #DADADA;25 font-size: 38px;26 letter-spacing: 0.5px;27 }28 .status-left { display: flex; align-items: center; gap: 22px; }29 .status-right { display: flex; align-items: center; gap: 26px; }30 31 /* App bar */32 .app-bar {33 height: 120px;34 display: flex;35 align-items: center;36 padding: 0 36px;37 justify-content: space-between;38 }39 .app-left { display: flex; align-items: center; gap: 26px; }40 .hamburger { width: 64px; height: 64px; }41 .app-title { font-size: 72px; font-weight: 700; letter-spacing: 0.5px; }42 .app-actions { display: flex; align-items: center; gap: 36px; }43 .icon-btn { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; }44 45 /* Search */46 .search-wrap { padding: 24px 36px 0; }47 .search-bar {48 height: 120px;49 border-radius: 60px;50 background: #1E1E1E;51 display: flex;52 align-items: center;53 gap: 24px;54 padding: 0 34px;55 color: #A9A9A9;56 font-size: 44px;57 }58 .search-icon { width: 56px; height: 56px; }59 60 /* Quick actions */61 .quick-actions { padding: 30px 36px; display: flex; gap: 26px; }62 .qa-card {63 flex: 1;64 background: #1E1E1E;65 border-radius: 14px;66 height: 150px;67 display: flex;68 align-items: center;69 padding: 0 30px;70 gap: 26px;71 font-size: 46px;72 color: #F2F2F2;73 }74 .qa-icon { width: 60px; height: 60px; }75 76 /* Divider title row */77 .title-row {78 padding: 18px 36px;79 display: flex;80 align-items: center;81 justify-content: space-between;82 color: #EDEDED;83 }84 .title-row .left { display: flex; align-items: center; gap: 10px; font-size: 46px; font-weight: 600; }85 .title-row .right { width: 56px; height: 56px; opacity: 0.9; }86 87 /* List */88 .list { padding: 6px 0 0; }89 .list-item {90 display: flex;91 align-items: center;92 padding: 28px 36px;93 gap: 28px;94 }95 .folder-icon {96 width: 86px;97 height: 70px;98 background: linear-gradient(#5EA0FF, #3C78F0);99 border-radius: 10px;100 }101 .file-thumb {102 width: 86px;103 height: 86px;104 background: #E0E0E0;105 border: 1px solid #BDBDBD;106 color: #757575;107 font-size: 22px;108 display: flex;109 align-items: center;110 justify-content: center;111 }112 .item-main { flex: 1; }113 .item-title {114 font-size: 48px;115 color: #F5F5F5;116 }117 .item-sub {118 font-size: 36px;119 color: #A9A9A9;120 margin-top: 8px;121 }122 .more-btn { width: 54px; height: 54px; opacity: 0.9; }123 .sync-icon {124 width: 54px; height: 54px; margin-right: 18px;125 }126 .row-end { display: flex; align-items: center; gap: 18px; }127 128 /* Floating action button */129 .fab {130 position: absolute;131 right: 54px;132 bottom: 210px;133 width: 160px;134 height: 160px;135 background: #4379FF;136 border-radius: 50%;137 box-shadow: 0 10px 24px rgba(0,0,0,0.5);138 display: flex;139 align-items: center;140 justify-content: center;141 }142 .fab svg { width: 90px; height: 90px; }143 144 /* Bottom nav */145 .bottom-nav {146 position: absolute;147 bottom: 0;148 left: 0;149 width: 1080px;150 height: 170px;151 background: #0E0E0E;152 border-top: 1px solid #1F1F1F;153 display: flex;154 justify-content: space-around;155 align-items: center;156 }157 .nav-item {158 display: flex; flex-direction: column; align-items: center; gap: 8px;159 color: #CFCFCF; font-size: 34px;160 }161 .nav-item.active { color: #FFFFFF; }162 .nav-icon { width: 64px; height: 64px; }163</style>164</head>165<body>166<div id="render-target">167 168 <!-- Status Bar -->169 <div class="status-bar">170 <div class="status-left">171 <div>8:50</div>172 <div style="font-size:28px; opacity:0.7;">N</div>173 <div style="width:36px; height:36px; border-radius:6px; background:#E0E0E0; color:#333; display:flex; align-items:center; justify-content:center; font-size:22px;">LR</div>174 <div style="width:36px; height:36px; border-radius:6px; background:#E0E0E0; color:#333; display:flex; align-items:center; justify-content:center; font-size:22px;">F</div>175 <div style="width:36px; height:36px; border-radius:6px; background:#E0E0E0; color:#333; display:flex; align-items:center; justify-content:center; font-size:22px;">M</div>176 <div style="font-size:28px;">•</div>177 </div>178 <div class="status-right">179 <!-- WiFi -->180 <svg class="nav-icon" viewBox="0 0 24 24" fill="#DADADA">181 <path d="M12 18.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm-5-4a9 9 0 0 1 10 0l-1.4 1.4a7 7 0 0 0-7.2 0L7 14.5zm-3.4-3.6a14 14 0 0 1 16.8 0L18 12.3a10 10 0 0 0-12 0L3.6 10.9z"/>182 </svg>183 <!-- Battery -->184 <div style="display:flex; align-items:center; gap:10px;">185 <svg width="64" height="34" viewBox="0 0 24 12" fill="none" stroke="#DADADA" stroke-width="2">186 <rect x="1" y="1" width="18" height="10" rx="2"></rect>187 <rect x="3" y="3" width="14" height="6" fill="#DADADA"></rect>188 <rect x="20" y="4" width="3" height="4" fill="#DADADA"></rect>189 </svg>190 <div style="font-size:36px;">75%</div>191 </div>192 </div>193 </div>194 195 <!-- App Bar -->196 <div class="app-bar">197 <div class="app-left">198 <svg class="hamburger" viewBox="0 0 24 24" fill="#EDEDED">199 <rect x="3" y="5" width="18" height="2"></rect>200 <rect x="3" y="11" width="18" height="2"></rect>201 <rect x="3" y="17" width="18" height="2"></rect>202 </svg>203 <div class="app-title">Dropbox</div>204 </div>205 <div class="app-actions">206 <!-- Upload icon -->207 <div class="icon-btn">208 <svg viewBox="0 0 24 24" fill="#EDEDED">209 <path d="M5 19h14v2H5v-2zm7-16l5 5h-3v6h-4V8H7l5-5z"></path>210 </svg>211 </div>212 <!-- Check box icon -->213 <div class="icon-btn">214 <svg viewBox="0 0 24 24" fill="#EDEDED">215 <rect x="4" y="4" width="16" height="16" rx="2" ry="2" stroke="#EDEDED" fill="none" stroke-width="2"></rect>216 <path d="M9 12l2 2 4-5" stroke="#EDEDED" stroke-width="2" fill="none"></path>217 </svg>218 </div>219 </div>220 </div>221 222 <!-- Search Bar -->223 <div class="search-wrap">224 <div class="search-bar">225 <svg class="search-icon" viewBox="0 0 24 24" fill="#A9A9A9">226 <path d="M15.5 14h-.8l-.3-.3a6.5 6.5 0 1 0-.7.7l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>227 </svg>228 <div>Search for anything</div>229 </div>230 </div>231 232 <!-- Quick Actions -->233 <div class="quick-actions">234 <div class="qa-card">235 <svg class="qa-icon" viewBox="0 0 24 24" fill="#EDEDED">236 <path d="M5 20h14v-2H5v2zM13 4v6h3l-4 4-4-4h3V4h2z"></path>237 </svg>238 <div>Upload</div>239 </div>240 <div class="qa-card">241 <svg class="qa-icon" viewBox="0 0 24 24" fill="#EDEDED">242 <path d="M10 4H4v16h16V8h-8l-2-4z"></path>243 </svg>244 <div>Folder</div>245 </div>246 <div class="qa-card">247 <svg class="qa-icon" viewBox="0 0 24 24" fill="#EDEDED">248 <path d="M3 5h18v14H3V5zm3 3h12v8H6V8zm4 1h4v4h-4V9z"></path>249 </svg>250 <div>Scan</div>251 </div>252 </div>253 254 <!-- Title Row -->255 <div class="title-row">256 <div class="left">257 <div>Name</div>258 <svg width="36" height="36" viewBox="0 0 24 24" fill="#EDEDED">259 <path d="M7 10l5 5 5-5H7z"></path>260 </svg>261 </div>262 <svg class="right" viewBox="0 0 24 24" fill="#EDEDED">263 <path d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 0h8v8h-8v-8z"></path>264 </svg>265 </div>266 267 <!-- List -->268 <div class="list">269 <!-- Folder item -->270 <div class="list-item">271 <div class="folder-icon"></div>272 <div class="item-main">273 <div class="item-title">Favourite Book</div>274 </div>275 <svg class="more-btn" viewBox="0 0 24 24" fill="#EDEDED">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 282 <!-- File item -->283 <div class="list-item">284 <div class="file-thumb">[IMG: PDF Thumb]</div>285 <div class="item-main">286 <div class="item-title">the-diary-of-anne-frank-1.pdf</div>287 <div class="item-sub">702.5 KB, 5.7% downloaded</div>288 </div>289 <div class="row-end">290 <!-- Sync icon -->291 <svg class="sync-icon" viewBox="0 0 24 24" fill="#3F86F5">292 <path d="M12 6V3L8 7l4 4V8a4 4 0 1 1-4 4H6a6 6 0 1 0 6-6z"></path>293 </svg>294 <svg class="more-btn" viewBox="0 0 24 24" fill="#EDEDED">295 <circle cx="12" cy="5" r="2"></circle>296 <circle cx="12" cy="12" r="2"></circle>297 <circle cx="12" cy="19" r="2"></circle>298 </svg>299 </div>300 </div>301 </div>302 303 <!-- Floating Action Button -->304 <div class="fab">305 <svg viewBox="0 0 24 24" fill="#FFFFFF">306 <path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"></path>307 </svg>308 </div>309 310 <!-- Bottom Navigation -->311 <div class="bottom-nav">312 <div class="nav-item">313 <svg class="nav-icon" viewBox="0 0 24 24" fill="#CFCFCF">314 <path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"></path>315 </svg>316 <div>Home</div>317 </div>318 <div class="nav-item active">319 <svg class="nav-icon" viewBox="0 0 24 24" fill="#FFFFFF">320 <path d="M10 4H4v16h16V8h-8l-2-4z"></path>321 </svg>322 <div>Files</div>323 </div>324 <div class="nav-item">325 <svg class="nav-icon" viewBox="0 0 24 24" fill="#CFCFCF">326 <path d="M21 19V5c0-1.1-.9-2-2-2H5C3.9 3 3 3.9 3 5v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM5 5h14v8H5V5zm0 10h6v4H5v-4zm8 0h6v4h-6v-4z"></path>327 </svg>328 <div>Photos</div>329 </div>330 <div class="nav-item">331 <svg class="nav-icon" viewBox="0 0 24 24" fill="#CFCFCF">332 <path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z"></path>333 </svg>334 <div>Account</div>335 </div>336 </div>337 338</div>339</body>340</html>