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: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F1F0F4;15 color: #2E2E2E;16 }17 18 /* Status bar */19 .status-bar {20 position: absolute;21 top: 0; left: 0; right: 0;22 height: 110px;23 padding: 0 36px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #6D6D75;28 font-weight: 600;29 }30 .status-center {31 display: flex; gap: 16px; align-items: center;32 opacity: 0.7;33 }34 .status-right {35 display: flex; gap: 18px; align-items: center;36 }37 .icon-mini svg { width: 42px; height: 42px; fill: none; stroke: #6D6D75; stroke-width: 4; }38 39 /* Main content area */40 .page {41 position: absolute;42 top: 110px; left: 0; right: 0; bottom: 0;43 padding: 28px 40px 40px;44 overflow: hidden;45 }46 47 /* Search bar */48 .search-bar {49 background: #FFFFFF;50 border-radius: 22px;51 height: 120px;52 display: flex;53 align-items: center;54 padding: 0 30px;55 box-shadow: 0 2px 0 rgba(0,0,0,0.04);56 }57 .search-input {58 flex: 1;59 margin: 0 22px;60 color: #8C8C94;61 font-size: 40px;62 font-weight: 500;63 }64 .sb-icon { width: 56px; height: 56px; }65 66 /* Chips */67 .chips {68 display: flex; gap: 24px; align-items: center;69 margin-top: 26px;70 }71 .chip {72 background: #FFFFFF;73 border-radius: 60px;74 padding: 20px 28px;75 display: inline-flex;76 align-items: center;77 gap: 16px;78 font-size: 36px;79 color: #4F4F57;80 border: 1px solid #E3E3E7;81 }82 .chip svg { width: 44px; height: 44px; }83 84 /* Section header */85 .section-title {86 margin-top: 50px;87 font-size: 36px;88 font-weight: 700;89 letter-spacing: 0.02em;90 color: #6A6A72;91 }92 93 /* App shortcuts row */94 .apps-row {95 margin-top: 28px;96 display: grid;97 grid-template-columns: repeat(4, 1fr);98 gap: 18px;99 align-items: start;100 text-align: center;101 }102 .app {103 display: flex; flex-direction: column; align-items: center; gap: 16px;104 }105 .app-icon {106 width: 130px; height: 130px; border-radius: 50%;107 background: #FFFFFF; border: 1px solid #E2E2E6;108 display: grid; place-items: center;109 }110 .app label {111 font-size: 32px; color: #3E3E44; font-weight: 600;112 }113 .app small {114 font-size: 28px; color: #7A7A82;115 max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;116 }117 118 /* Recent images header */119 .images-header {120 margin-top: 40px;121 display: flex; align-items: center; justify-content: space-between;122 }123 .images-header h2 {124 margin: 0;125 font-size: 44px; font-weight: 700; color: #3A3A40;126 }127 .view-toggle {128 width: 66px; height: 66px; border-radius: 14px; background: #FFFFFF; border: 1px solid #E1E1E6;129 display: grid; place-items: center;130 }131 .view-toggle svg { width: 40px; height: 40px; fill: none; stroke: #666; stroke-width: 4; }132 133 /* Gallery grid */134 .gallery {135 margin-top: 22px;136 display: grid;137 grid-template-columns: repeat(3, 1fr);138 gap: 22px;139 }140 .thumb {141 position: relative;142 background: #FFFFFF;143 border-radius: 20px;144 overflow: hidden;145 box-shadow: 0 2px 0 rgba(0,0,0,0.04);146 }147 .thumb-inner {148 height: 320px;149 background: #E0E0E0;150 border: 1px solid #BDBDBD;151 display: flex; justify-content: center; align-items: center;152 color: #757575;153 font-size: 34px;154 text-align: center;155 padding: 20px;156 }157 .expand-btn {158 position: absolute;159 top: 14px; right: 14px;160 width: 66px; height: 66px; border-radius: 50%;161 background: rgba(255,255,255,0.95);162 border: 1px solid #D6D6DB;163 display: grid; place-items: center;164 }165 .expand-btn svg { width: 36px; height: 36px; fill: none; stroke: #555; stroke-width: 3; }166</style>167</head>168<body>169<div id="render-target">170 <!-- Status Bar -->171 <div class="status-bar">172 <div class="status-left" style="font-size:48px;">7:06</div>173 <div class="status-center">174 <div style="width:16px; height:16px; background:#9A9AA1; border-radius:4px;"></div>175 <div style="width:16px; height:16px; background:#9A9AA1; border-radius:4px;"></div>176 <div style="width:16px; height:16px; background:#9A9AA1; border-radius:50%;"></div>177 <div style="width:16px; height:16px; background:#9A9AA1; border-radius:50%;"></div>178 </div>179 <div class="status-right">180 <span class="icon-mini">181 <!-- Wi-Fi -->182 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M6 12c3-2 9-2 12 0"/><path d="M10 16c2-1 4-1 6 0"/><circle cx="12" cy="19" r="1.8"/></svg>183 </span>184 <span class="icon-mini">185 <!-- Signal -->186 <svg viewBox="0 0 24 24"><path d="M3 18h2"/><path d="M7 14h2"/><path d="M11 10h2"/><path d="M15 6h2"/></svg>187 </span>188 <span class="icon-mini">189 <!-- Battery -->190 <svg viewBox="0 0 28 24"><rect x="2" y="5" width="22" height="14" rx="3"></rect><rect x="24" y="9" width="3" height="6" rx="1"></rect><rect x="5" y="8" width="14" height="8" fill="#6D6D75" stroke="none"></rect></svg>191 </span>192 </div>193 </div>194 195 <div class="page">196 <!-- Search bar -->197 <div class="search-bar">198 <!-- Hamburger -->199 <svg class="sb-icon" viewBox="0 0 24 24">200 <path d="M3 6h18M3 12h18M3 18h18" stroke="#555" stroke-width="2" fill="none" stroke-linecap="round"/>201 </svg>202 <div class="search-input">Search this phone</div>203 <!-- Kebab -->204 <svg class="sb-icon" viewBox="0 0 24 24">205 <circle cx="12" cy="5" r="2.2" fill="#555"/>206 <circle cx="12" cy="12" r="2.2" fill="#555"/>207 <circle cx="12" cy="19" r="2.2" fill="#555"/>208 </svg>209 </div>210 211 <!-- Chips -->212 <div class="chips">213 <div class="chip">214 <svg viewBox="0 0 24 24">215 <path d="M3 8l7-5h8v8l-7 7L3 15V8z" fill="none" stroke="#666" stroke-width="2" stroke-linejoin="round"/>216 </svg>217 <span>Large files</span>218 </div>219 <div class="chip">220 <svg viewBox="0 0 24 24">221 <circle cx="12" cy="12" r="8" fill="none" stroke="#666" stroke-width="2"/>222 <path d="M12 7v6l4 2" stroke="#666" stroke-width="2" fill="none" stroke-linecap="round"/>223 </svg>224 <span>This week</span>225 </div>226 </div>227 228 <!-- Browse files -->229 <div class="section-title">BROWSE FILES IN OTHER APPS</div>230 <div class="apps-row">231 <div class="app">232 <div class="app-icon">233 <!-- Simple Drive-like triangle -->234 <svg viewBox="0 0 24 24" width="80" height="80">235 <path d="M12 4l6 10H6L12 4z" fill="#6CA86B"/>236 <path d="M6 14l3 6h15L18 14H6z" fill="#F2C24B" opacity="0.7"/>237 </svg>238 </div>239 <label>Drive</label>240 <small>coledbwpersonat...</small>241 </div>242 <div class="app">243 <div class="app-icon">244 <svg viewBox="0 0 24 24" width="80" height="80">245 <path d="M12 4l6 10H6L12 4z" fill="#6CA86B"/>246 <path d="M6 14l3 6h15L18 14H6z" fill="#F2C24B" opacity="0.7"/>247 </svg>248 </div>249 <label>Drive</label>250 <small>dbwscratch.test.i...</small>251 </div>252 <div class="app">253 <div class="app-icon">254 <!-- Simple Photos-like flower -->255 <svg viewBox="0 0 24 24" width="80" height="80">256 <circle cx="12" cy="8" r="4" fill="#F44336"/>257 <circle cx="16" cy="12" r="4" fill="#FF9800"/>258 <circle cx="8" cy="12" r="4" fill="#4CAF50"/>259 <circle cx="12" cy="16" r="4" fill="#2196F3"/>260 </svg>261 </div>262 <label>Photos</label>263 </div>264 <div class="app">265 <div class="app-icon">266 <!-- Bug icon -->267 <svg viewBox="0 0 24 24" width="80" height="80">268 <circle cx="12" cy="10" r="4" fill="#7C8CF9"/>269 <path d="M12 14v6" stroke="#7C8CF9" stroke-width="3"/>270 <path d="M5 12h14" stroke="#7C8CF9" stroke-width="3"/>271 </svg>272 </div>273 <label>Bug report</label>274 </div>275 </div>276 277 <!-- Recent images -->278 <div class="images-header">279 <h2>Recent images</h2>280 <div class="view-toggle">281 <svg viewBox="0 0 24 24">282 <rect x="3" y="3" width="7" height="7" rx="1"></rect>283 <rect x="14" y="3" width="7" height="7" rx="1"></rect>284 <rect x="3" y="14" width="7" height="7" rx="1"></rect>285 <rect x="14" y="14" width="7" height="7" rx="1"></rect>286 </svg>287 </div>288 </div>289 290 <div class="gallery">291 <!-- Row 1 -->292 <div class="thumb">293 <div class="expand-btn">294 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>295 </div>296 <div class="thumb-inner">[IMG: Happy Anniversary floral wreath]</div>297 </div>298 <div class="thumb">299 <div class="expand-btn">300 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>301 </div>302 <div class="thumb-inner">[IMG: Happy Anniversary couple silhouette]</div>303 </div>304 <div class="thumb">305 <div class="expand-btn">306 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>307 </div>308 <div class="thumb-inner">[IMG: Happy Anniversary couple silhouette]</div>309 </div>310 311 <!-- Row 2 -->312 <div class="thumb">313 <div class="expand-btn">314 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>315 </div>316 <div class="thumb-inner">[IMG: Holding hands anniversary card]</div>317 </div>318 <div class="thumb">319 <div class="expand-btn">320 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>321 </div>322 <div class="thumb-inner">[IMG: Purple roses]</div>323 </div>324 <div class="thumb">325 <div class="expand-btn">326 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>327 </div>328 <div class="thumb-inner">[IMG: Car interior]</div>329 </div>330 331 <!-- Row 3 -->332 <div class="thumb">333 <div class="expand-btn">334 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>335 </div>336 <div class="thumb-inner">[IMG: Aerial landscape view]</div>337 </div>338 <div class="thumb">339 <div class="expand-btn">340 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>341 </div>342 <div class="thumb-inner">[IMG: Aerial landscape view]</div>343 </div>344 <div class="thumb">345 <div class="expand-btn">346 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>347 </div>348 <div class="thumb-inner">[IMG: Aerial landscape view]</div>349 </div>350 351 <!-- Row 4 -->352 <div class="thumb">353 <div class="expand-btn">354 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>355 </div>356 <div class="thumb-inner">[IMG: Campus lights at dusk]</div>357 </div>358 <div class="thumb">359 <div class="expand-btn">360 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>361 </div>362 <div class="thumb-inner">[IMG: Office scene]</div>363 </div>364 <div class="thumb">365 <div class="expand-btn">366 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>367 </div>368 <div class="thumb-inner">[IMG: Office scene]</div>369 </div>370 371 <!-- Row 5 -->372 <div class="thumb">373 <div class="expand-btn">374 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>375 </div>376 <div class="thumb-inner">[IMG: Laptop screen]</div>377 </div>378 <div class="thumb">379 <div class="expand-btn">380 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>381 </div>382 <div class="thumb-inner">[IMG: Office scene]</div>383 </div>384 <div class="thumb">385 <div class="expand-btn">386 <svg viewBox="0 0 24 24"><path d="M3 9V3h6M21 9V3h-6M3 15v6h6M21 15v6h-6" /></svg>387 </div>388 <div class="thumb-inner">[IMG: Office scene]</div>389 </div>390 </div>391 </div>392</div>393</body>394</html>