GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Files UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #121212;13 color: #ECECEC;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 60px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #EAEAEA;24 font-size: 40px;25 letter-spacing: 1px;26 }27 .status-icons { display: flex; gap: 30px; align-items: center; }28 .status-dot {29 width: 24px; height: 24px; border-radius: 50%; background: #CCCCCC;30 }31 32 /* Search area */33 .search-area {34 padding: 30px 60px 10px 60px;35 }36 .search-bar {37 height: 140px;38 background: #1E1E1E;39 border-radius: 26px;40 display: flex;41 align-items: center;42 padding: 0 40px;43 box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset;44 }45 .hamburger, .menu-dots {46 width: 90px; height: 90px; border-radius: 20px;47 display: flex; align-items: center; justify-content: center;48 color: #BDBDBD;49 }50 .hamburger svg, .menu-dots svg { width: 56px; height: 56px; }51 .search-placeholder {52 flex: 1;53 color: #C9C9C9;54 font-size: 48px;55 padding-left: 20px;56 }57 58 /* Chips */59 .chips {60 padding: 30px 60px;61 display: flex; gap: 30px;62 }63 .chip {64 display: flex; align-items: center; gap: 20px;65 padding: 26px 40px;66 background: #1E1E1E;67 border-radius: 26px;68 border: 1px solid #2A2A2A;69 font-size: 44px;70 color: #EDEDED;71 }72 .chip-icon {73 width: 58px; height: 58px; border-radius: 14px; background: #2E2E2E;74 display: flex; align-items: center; justify-content: center;75 }76 77 /* Browse other apps */78 .section-title {79 padding: 20px 60px;80 font-size: 42px;81 color: #BBBBBB;82 letter-spacing: 0.5px;83 }84 .apps-grid {85 display: grid;86 grid-template-columns: repeat(4, 1fr);87 gap: 40px;88 padding: 20px 60px 10px 60px;89 }90 .app-item {91 display: flex;92 flex-direction: column;93 align-items: center;94 gap: 24px;95 color: #EDEDED;96 font-size: 40px;97 }98 .app-icon {99 width: 160px; height: 160px; border-radius: 36px; background: #1E1E1E;100 border: 1px solid #2A2A2A;101 display: flex; align-items: center; justify-content: center;102 }103 104 /* Recent files header */105 .recent-header {106 padding: 40px 60px 10px 60px;107 display: flex; align-items: center; justify-content: space-between;108 }109 .recent-header .title { font-size: 48px; color: #EDEDED; }110 .grid-icon {111 width: 80px; height: 80px; border-radius: 18px; background: #1E1E1E; border: 1px solid #2A2A2A;112 display: flex; align-items: center; justify-content: center;113 }114 115 /* File list */116 .file-list { padding: 10px 60px 40px 60px; }117 .file-item {118 padding: 40px 0;119 border-top: 1px solid #222;120 display: flex;121 align-items: center;122 }123 .file-icon {124 width: 70px; height: 90px;125 margin-right: 40px;126 background: #18232e;127 border-radius: 12px;128 position: relative;129 box-shadow: inset 0 0 0 2px #4aa3ff;130 }131 .file-icon::after {132 content: "";133 position: absolute;134 right: 0; top: 0;135 width: 28px; height: 28px;136 background: #4aa3ff;137 clip-path: polygon(0 0, 100% 0, 0 100%);138 border-top-right-radius: 12px;139 }140 .file-info {141 flex: 1;142 }143 .file-name {144 font-size: 54px;145 color: #FFFFFF;146 margin-bottom: 10px;147 }148 .file-meta {149 font-size: 36px;150 color: #A8A8A8;151 }152 .file-actions {153 width: 160px;154 display: flex;155 gap: 18px;156 }157 .square-btn {158 width: 68px; height: 68px; border-radius: 12px;159 background: #1E1E1E; border: 1px solid #2A2A2A;160 }161 162 /* Thumbnail example for image item */163 .thumb {164 width: 130px; height: 100px;165 background: #E0E0E0; border: 1px solid #BDBDBD;166 color: #757575; display: flex; align-items: center; justify-content: center;167 border-radius: 14px;168 margin-right: 40px;169 }170</style>171</head>172<body>173<div id="render-target">174 175 <!-- Status bar -->176 <div class="status-bar">177 <div>9:44</div>178 <div class="status-icons">179 <div class="status-dot"></div>180 <div class="status-dot"></div>181 <div class="status-dot"></div>182 <div class="status-dot"></div>183 <div class="status-dot"></div>184 </div>185 </div>186 187 <!-- Search bar -->188 <div class="search-area">189 <div class="search-bar">190 <div class="hamburger">191 <svg viewBox="0 0 24 24">192 <rect x="2" y="5" width="20" height="3" fill="#BDBDBD"></rect>193 <rect x="2" y="11" width="20" height="3" fill="#BDBDBD"></rect>194 <rect x="2" y="17" width="20" height="3" fill="#BDBDBD"></rect>195 </svg>196 </div>197 <div class="search-placeholder">Search this phone</div>198 <div class="menu-dots">199 <svg viewBox="0 0 24 24">200 <circle cx="12" cy="5" r="2.4" fill="#BDBDBD"></circle>201 <circle cx="12" cy="12" r="2.4" fill="#BDBDBD"></circle>202 <circle cx="12" cy="19" r="2.4" fill="#BDBDBD"></circle>203 </svg>204 </div>205 </div>206 </div>207 208 <!-- Category chips -->209 <div class="chips">210 <div class="chip">211 <div class="chip-icon">212 <svg viewBox="0 0 24 24"><rect x="4" y="6" width="16" height="12" fill="#E67E7E"></rect></svg>213 </div>214 Images215 </div>216 <div class="chip">217 <div class="chip-icon">218 <svg viewBox="0 0 24 24"><circle cx="9" cy="12" r="4" fill="#9FA8DA"></circle><rect x="13" y="10" width="6" height="4" fill="#9FA8DA"></rect></svg>219 </div>220 Audio221 </div>222 <div class="chip">223 <div class="chip-icon">224 <svg viewBox="0 0 24 24"><rect x="4" y="5" width="6" height="14" fill="#9CCC65"></rect><rect x="14" y="9" width="6" height="10" fill="#9CCC65"></rect></svg>225 </div>226 Videos227 </div>228 <div class="chip">229 <div class="chip-icon">230 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" fill="#80DEEA"></rect></svg>231 </div>232 Documents233 </div>234 </div>235 236 <!-- Browse files in other apps -->237 <div class="section-title">BROWSE FILES IN OTHER APPS</div>238 <div class="apps-grid">239 <div class="app-item">240 <div class="app-icon">241 <svg viewBox="0 0 24 24" width="90" height="90">242 <rect x="4" y="5" width="16" height="12" fill="#BDBDBD"></rect>243 </svg>244 </div>245 <div>Media</div>246 </div>247 248 <div class="app-item">249 <div class="app-icon">250 <svg viewBox="0 0 24 24" width="90" height="90">251 <circle cx="12" cy="12" r="10" fill="#BDBDBD"></circle>252 <circle cx="12" cy="12" r="5" fill="#121212"></circle>253 </svg>254 </div>255 <div>Photos</div>256 </div>257 258 <div class="app-item">259 <div class="app-icon">260 <svg viewBox="0 0 24 24" width="90" height="90">261 <rect x="5" y="3" width="14" height="18" fill="#BDBDBD"></rect>262 <rect x="8" y="6" width="8" height="12" fill="#121212"></rect>263 </svg>264 </div>265 <div>Bug reports</div>266 </div>267 268 <div class="app-item">269 <div class="app-icon">270 <svg viewBox="0 0 24 24" width="90" height="90">271 <polygon points="12,3 20,9 16,21 8,21 4,9" fill="#BDBDBD"></polygon>272 </svg>273 </div>274 <div>System traces</div>275 </div>276 </div>277 278 <!-- Recent files -->279 <div class="recent-header">280 <div class="title">Recent files</div>281 <div class="grid-icon">282 <svg viewBox="0 0 24 24" width="56" height="56">283 <rect x="3" y="3" width="7" height="7" fill="#BDBDBD"></rect>284 <rect x="14" y="3" width="7" height="7" fill="#BDBDBD"></rect>285 <rect x="3" y="14" width="7" height="7" fill="#BDBDBD"></rect>286 <rect x="14" y="14" width="7" height="7" fill="#BDBDBD"></rect>287 </svg>288 </div>289 </div>290 291 <div class="file-list">292 293 <div class="file-item">294 <div class="file-icon"></div>295 <div class="file-info">296 <div class="file-name">screenshot.txt</div>297 <div class="file-meta">Nov 7, 483 kB, TXT document</div>298 </div>299 <div class="file-actions">300 <div class="square-btn"></div>301 <div class="square-btn"></div>302 </div>303 </div>304 305 <div class="file-item">306 <div class="file-icon"></div>307 <div class="file-info">308 <div class="file-name">actuation_result.txt</div>309 <div class="file-meta">Nov 7, 8 B, TXT document</div>310 </div>311 <div class="file-actions">312 <div class="square-btn"></div>313 <div class="square-btn"></div>314 </div>315 </div>316 317 <div class="file-item">318 <div class="file-icon"></div>319 <div class="file-info">320 <div class="file-name">agents.txt</div>321 <div class="file-meta">Nov 7, 1.15 kB, TXT document</div>322 </div>323 <div class="file-actions">324 <div class="square-btn"></div>325 <div class="square-btn"></div>326 </div>327 </div>328 329 <div class="file-item">330 <div class="file-icon"></div>331 <div class="file-info">332 <div class="file-name">os_info.txt</div>333 <div class="file-meta">Nov 7, 32 B, TXT document</div>334 </div>335 <div class="file-actions">336 <div class="square-btn"></div>337 <div class="square-btn"></div>338 </div>339 </div>340 341 <div class="file-item">342 <div class="file-icon"></div>343 <div class="file-info">344 <div class="file-name">Shopping list.pdf</div>345 <div class="file-meta">Oct 9, 776 B, PDF document</div>346 </div>347 <div class="file-actions">348 <div class="square-btn"></div>349 <div class="square-btn"></div>350 </div>351 </div>352 353 <div class="file-item">354 <div class="file-icon"></div>355 <div class="file-info">356 <div class="file-name">JR_BackUp_20231003</div>357 <div class="file-meta">Oct 3, 24.58 kB, BIN file</div>358 </div>359 <div class="file-actions">360 <div class="square-btn"></div>361 <div class="square-btn"></div>362 </div>363 </div>364 365 <div class="file-item">366 <div class="thumb">[IMG: Screenshot]</div>367 <div class="file-info">368 <div class="file-name">Screenshot_20230926-180737.png</div>369 <div class="file-meta">Sep 26, 141 kB, PNG image</div>370 </div>371 <div class="file-actions">372 <div class="square-btn"></div>373 <div class="square-btn"></div>374 </div>375 </div>376 377 </div>378 379</div>380</body>381</html>