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>Files 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; height: 2400px; position: relative; overflow: hidden;11 background: #F3F1F5;12 color: #333;13 }14 15 /* Status bar */16 .status-bar {17 height: 96px;18 padding: 0 36px;19 display: flex;20 align-items: center;21 justify-content: space-between;22 color: #3E3E3E;23 font-weight: 500;24 font-size: 38px;25 }26 .sb-left { letter-spacing: 0.5px; }27 .sb-right {28 display: flex; align-items: center; gap: 28px;29 }30 .sb-dot { width: 18px; height: 18px; background: #7C7C7C; border-radius: 50%; display: inline-block; }31 .sb-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; }32 33 /* Header with search */34 .header {35 padding: 18px 36px 8px;36 }37 .search-row {38 display: flex; align-items: center; gap: 24px;39 }40 .hamburger-btn {41 width: 84px; height: 84px; border-radius: 16px;42 display: flex; align-items: center; justify-content: center;43 background: transparent;44 }45 .search-bar {46 flex: 1;47 height: 108px;48 background: #FFFFFF;49 border-radius: 24px;50 box-shadow: 0 2px 0 rgba(0,0,0,0.04);51 display: flex; align-items: center; justify-content: space-between;52 padding: 0 28px;53 color: #7A7A7A;54 font-size: 40px;55 }56 .search-placeholder {57 opacity: 0.8;58 }59 .menu-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }60 61 /* Filter chips */62 .filters {63 padding: 20px 36px 8px;64 display: flex; gap: 18px;65 }66 .chip {67 display: inline-flex; align-items: center; gap: 18px;68 padding: 22px 28px;69 border: 1px solid #D7D7D7;70 border-radius: 999px;71 background: #FFFFFF;72 color: #3F3F3F;73 font-size: 36px;74 }75 .chip svg { width: 40px; height: 40px; }76 77 /* Section titles */78 .section-title {79 padding: 32px 36px 12px;80 color: #6A6A6A; font-weight: 600; font-size: 34px; letter-spacing: 0.6px;81 }82 83 /* App shortcuts row */84 .apps-row {85 padding: 6px 36px 18px;86 display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;87 align-items: start;88 }89 .app-item { display: flex; flex-direction: column; align-items: center; gap: 16px; }90 .app-icon {91 width: 120px; height: 120px; border-radius: 50%;92 display: flex; align-items: center; justify-content: center;93 background: #E8F0FE; border: 1px solid #B8C6E8; color: #2F5DFF; font-weight: 700; font-size: 34px;94 }95 .app-label { font-size: 34px; color: #3D3D3D; }96 .app-sub { font-size: 28px; color: #8A8A8A; max-width: 220px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }97 98 /* Recent images header */99 .images-header {100 padding: 22px 36px;101 display: flex; align-items: center; justify-content: space-between;102 }103 .images-header .title { font-size: 44px; color: #333; font-weight: 600; }104 .toggle-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }105 106 /* Image grid */107 .grid {108 padding: 0 36px 24px;109 display: grid;110 grid-template-columns: repeat(3, 1fr);111 gap: 24px;112 }113 .thumb {114 position: relative;115 width: 100%; aspect-ratio: 1 / 1;116 background: #E0E0E0;117 border: 1px solid #BDBDBD;118 border-radius: 12px;119 display: flex; align-items: center; justify-content: center;120 color: #757575; font-size: 34px; text-align: center; padding: 12px;121 }122 .thumb .overlay {123 position: absolute; top: 12px; right: 12px;124 width: 68px; height: 68px; border-radius: 50%;125 background: rgba(255,255,255,0.95);126 border: 1px solid #CFCFCF;127 display: flex; align-items: center; justify-content: center;128 }129 .overlay svg { width: 34px; height: 34px; }130 131</style>132</head>133<body>134<div id="render-target">135 136 <!-- Status Bar -->137 <div class="status-bar">138 <div class="sb-left">7:07</div>139 <div class="sb-right">140 <span class="sb-dot"></span>141 <span class="sb-dot"></span>142 <div class="sb-icon">143 <svg viewBox="0 0 24 24" width="40" height="40">144 <path d="M2 18h20" stroke="#777" stroke-width="2" />145 <path d="M4 14h16" stroke="#777" stroke-width="2" />146 <path d="M7 10h10" stroke="#777" stroke-width="2" />147 </svg>148 </div>149 <div class="sb-icon">150 <svg viewBox="0 0 24 24" width="40" height="40">151 <path d="M3 18h18" stroke="#777" stroke-width="2" />152 <path d="M6 15h12" stroke="#777" stroke-width="2" />153 <path d="M9 12h6" stroke="#777" stroke-width="2" />154 </svg>155 </div>156 <div class="sb-icon">157 <svg viewBox="0 0 24 24" width="40" height="40">158 <rect x="3" y="6" width="18" height="12" rx="2" fill="none" stroke="#777" stroke-width="2"/>159 <rect x="5" y="8" width="14" height="8" fill="#777"/>160 </svg>161 </div>162 </div>163 </div>164 165 <!-- Header with Search -->166 <div class="header">167 <div class="search-row">168 <button class="hamburger-btn" aria-label="Menu">169 <svg viewBox="0 0 24 24" width="72" height="72">170 <path d="M3 6h18M3 12h18M3 18h18" stroke="#4A4A4A" stroke-width="2" stroke-linecap="round"/>171 </svg>172 </button>173 <div class="search-bar">174 <div class="search-placeholder">Search this phone</div>175 <div class="menu-btn" aria-label="More">176 <svg viewBox="0 0 24 24" width="48" height="48">177 <circle cx="12" cy="5" r="2" fill="#6B6B6B"></circle>178 <circle cx="12" cy="12" r="2" fill="#6B6B6B"></circle>179 <circle cx="12" cy="19" r="2" fill="#6B6B6B"></circle>180 </svg>181 </div>182 </div>183 </div>184 </div>185 186 <!-- Filter Chips -->187 <div class="filters">188 <div class="chip">189 <svg viewBox="0 0 24 24">190 <path d="M3 6h10l3 3-7 7-3-3V6z" fill="none" stroke="#666" stroke-width="2"/>191 </svg>192 <span>Large files</span>193 </div>194 <div class="chip">195 <svg viewBox="0 0 24 24">196 <circle cx="12" cy="12" r="9" fill="none" stroke="#666" stroke-width="2"/>197 <path d="M12 12l5 2" stroke="#666" stroke-width="2" stroke-linecap="round"/>198 <path d="M12 6v6" stroke="#666" stroke-width="2" stroke-linecap="round"/>199 </svg>200 <span>This week</span>201 </div>202 </div>203 204 <!-- Browse other apps -->205 <div class="section-title">BROWSE FILES IN OTHER APPS</div>206 <div class="apps-row">207 <div class="app-item">208 <div class="app-icon">D</div>209 <div class="app-label">Drive</div>210 <div class="app-sub">coledbpersonal...</div>211 </div>212 <div class="app-item">213 <div class="app-icon">D</div>214 <div class="app-label">Drive</div>215 <div class="app-sub">dbwscratch.test...</div>216 </div>217 <div class="app-item">218 <div class="app-icon" style="background:#FFF3E0;border-color:#F3CF9E;color:#FF8F00;">P</div>219 <div class="app-label">Photos</div>220 </div>221 <div class="app-item">222 <div class="app-icon" style="background:#E8FFE8;border-color:#B8E6B8;color:#2E7D32;">B</div>223 <div class="app-label">Bug report</div>224 </div>225 </div>226 227 <!-- Recent images -->228 <div class="images-header">229 <div class="title">Recent images</div>230 <div class="toggle-icon" aria-label="Switch view">231 <svg viewBox="0 0 24 24" width="48" height="48">232 <rect x="4" y="6" width="16" height="2" fill="#666"/>233 <rect x="4" y="11" width="16" height="2" fill="#666"/>234 <rect x="4" y="16" width="16" height="2" fill="#666"/>235 </svg>236 </div>237 </div>238 239 <div class="grid">240 <!-- Row 1 -->241 <div class="thumb">242 <div>[IMG: Anniversary wreath]</div>243 <div class="overlay">244 <svg viewBox="0 0 24 24">245 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>246 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>247 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>248 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>249 </svg>250 </div>251 </div>252 <div class="thumb">253 <div>[IMG: Couple silhouette - frame]</div>254 <div class="overlay">255 <svg viewBox="0 0 24 24">256 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>257 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>258 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>259 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>260 </svg>261 </div>262 </div>263 <div class="thumb">264 <div>[IMG: Couple silhouette]</div>265 <div class="overlay">266 <svg viewBox="0 0 24 24">267 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>268 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>269 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>270 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>271 </svg>272 </div>273 </div>274 275 <!-- Row 2 -->276 <div class="thumb">277 <div>[IMG: Holding hands - floral border]</div>278 <div class="overlay">279 <svg viewBox="0 0 24 24">280 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>281 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>282 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>283 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>284 </svg>285 </div>286 </div>287 <div class="thumb">288 <div>[IMG: Roses collage]</div>289 <div class="overlay">290 <svg viewBox="0 0 24 24">291 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>292 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>293 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>294 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>295 </svg>296 </div>297 </div>298 <div class="thumb">299 <div>[IMG: Motion blur photo]</div>300 <div class="overlay">301 <svg viewBox="0 0 24 24">302 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>303 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>304 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>305 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>306 </svg>307 </div>308 </div>309 310 <!-- Row 3 -->311 <div class="thumb">312 <div>[IMG: Aerial landscape - campus]</div>313 <div class="overlay">314 <svg viewBox="0 0 24 24">315 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>316 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>317 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>318 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>319 </svg>320 </div>321 </div>322 <div class="thumb">323 <div>[IMG: Aerial landscape - campus]</div>324 <div class="overlay">325 <svg viewBox="0 0 24 24">326 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>327 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>328 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>329 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>330 </svg>331 </div>332 </div>333 <div class="thumb">334 <div>[IMG: Aerial landscape - campus]</div>335 <div class="overlay">336 <svg viewBox="0 0 24 24">337 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>338 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>339 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>340 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>341 </svg>342 </div>343 </div>344 345 <!-- Row 4 -->346 <div class="thumb">347 <div>[IMG: Building and garden - night lights]</div>348 <div class="overlay">349 <svg viewBox="0 0 24 24">350 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>351 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>352 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>353 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>354 </svg>355 </div>356 </div>357 <div class="thumb">358 <div>[IMG: Office scene - desk and people]</div>359 <div class="overlay">360 <svg viewBox="0 0 24 24">361 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>362 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>363 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>364 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>365 </svg>366 </div>367 </div>368 <div class="thumb">369 <div>[IMG: Office scene - desk and people]</div>370 <div class="overlay">371 <svg viewBox="0 0 24 24">372 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>373 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>374 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>375 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>376 </svg>377 </div>378 </div>379 380 <!-- Row 5 -->381 <div class="thumb">382 <div>[IMG: Office scene - hallway]</div>383 <div class="overlay">384 <svg viewBox="0 0 24 24">385 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>386 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>387 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>388 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>389 </svg>390 </div>391 </div>392 <div class="thumb">393 <div>[IMG: Office scene - conversation]</div>394 <div class="overlay">395 <svg viewBox="0 0 24 24">396 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>397 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>398 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>399 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>400 </svg>401 </div>402 </div>403 <div class="thumb">404 <div>[IMG: Office scene - standing person]</div>405 <div class="overlay">406 <svg viewBox="0 0 24 24">407 <path d="M7 7l-4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>408 <path d="M17 7l4 0 0 4" stroke="#666" stroke-width="2" fill="none"/>409 <path d="M7 17l-4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>410 <path d="M17 17l4 0 0-4" stroke="#666" stroke-width="2" fill="none"/>411 </svg>412 </div>413 </div>414 </div>415 416</div>417</body>418</html>