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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 position: relative;11 overflow: hidden;12 width: 1080px;13 height: 2400px;14 background: #121212;15 color: #ECECEC;16 }17 .status-bar {18 height: 88px;19 padding: 0 32px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #e7e7e7;24 font-weight: 600;25 letter-spacing: 0.5px;26 opacity: 0.95;27 }28 .sb-left { display: flex; align-items: center; gap: 18px; font-size: 36px; }29 .sb-right { display: flex; align-items: center; gap: 18px; }30 .icon { display: inline-flex; align-items: center; justify-content: center; }31 .top-search {32 margin: 20px 32px 6px 32px;33 }34 .search-bar {35 background: #1E1E1E;36 border-radius: 20px;37 height: 96px;38 display: flex;39 align-items: center;40 padding: 0 24px;41 gap: 20px;42 color: #BFBFBF;43 font-size: 36px;44 }45 .search-bar .placeholder { color: #BDBDBD; flex: 1; }46 .chips {47 display: flex;48 gap: 22px;49 margin: 18px 32px 10px 32px;50 flex-wrap: wrap;51 }52 .chip {53 display: inline-flex;54 align-items: center;55 gap: 16px;56 padding: 18px 28px;57 border: 1px solid #3E3E3E;58 color: #DADADA;59 background: #161616;60 border-radius: 20px;61 font-size: 34px;62 }63 .section-title {64 margin: 24px 32px 8px 32px;65 color: #B9B9B9;66 font-size: 28px;67 letter-spacing: 1px;68 }69 .apps-row {70 display: flex;71 justify-content: space-between;72 gap: 24px;73 margin: 12px 32px 14px 32px;74 }75 .app {76 width: 160px;77 display: flex;78 flex-direction: column;79 align-items: center;80 gap: 14px;81 color: #EAEAEA;82 font-size: 30px;83 }84 .app .app-icon {85 width: 108px;86 height: 108px;87 border-radius: 54px;88 display: flex;89 align-items: center;90 justify-content: center;91 font-weight: 700;92 color: #111;93 }94 .app .label {95 text-align: center;96 color: #D8D8D8;97 font-size: 30px;98 }99 .subheader-row {100 margin: 18px 32px 8px 32px;101 display: flex;102 align-items: center;103 justify-content: space-between;104 }105 .subheader-row .title {106 font-size: 36px;107 color: #EDEDED;108 }109 .grid-toggle {110 width: 52px;111 height: 52px;112 border-radius: 10px;113 border: 1px solid #3E3E3E;114 display: flex;115 align-items: center;116 justify-content: center;117 color: #BDBDBD;118 }119 .grid {120 margin: 10px 32px 110px 32px;121 display: grid;122 grid-template-columns: repeat(3, 1fr);123 gap: 28px;124 }125 .thumb {126 position: relative;127 width: 100%;128 height: 300px;129 background: #E0E0E0;130 border: 1px solid #BDBDBD;131 display: flex;132 align-items: center;133 justify-content: center;134 color: #555;135 font-size: 28px;136 border-radius: 10px;137 }138 .overlay {139 position: absolute;140 top: 10px;141 right: 10px;142 background: rgba(0,0,0,0.6);143 width: 56px;144 height: 56px;145 border-radius: 28px;146 display: flex;147 align-items: center;148 justify-content: center;149 }150 .gesture-bar {151 position: absolute;152 left: 50%;153 transform: translateX(-50%);154 bottom: 28px;155 width: 420px;156 height: 14px;157 background: #FFFFFF;158 border-radius: 8px;159 opacity: 0.9;160 }161 /* Small helper svgs color */162 svg { fill: currentColor; }163</style>164</head>165<body>166<div id="render-target">167 <!-- Status Bar -->168 <div class="status-bar">169 <div class="sb-left">170 <span>8:52</span>171 <span class="icon" style="opacity:.85;">172 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/></svg>173 </span>174 <span class="icon" style="opacity:.85;">175 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="4" rx="2"/></svg>176 </span>177 <span class="icon" style="opacity:.85;">178 <svg width="34" height="34" viewBox="0 0 24 24"><rect x="4" y="10" width="16" height="4" rx="2"/></svg>179 </span>180 <span class="icon" style="opacity:.85;">181 <svg width="34" height="34" viewBox="0 0 24 24"><circle cx="12" cy="12" r="2"/></svg>182 </span>183 </div>184 <div class="sb-right">185 <span class="icon">186 <svg width="40" height="40" viewBox="0 0 24 24">187 <path d="M4 12c4-6 12-6 16 0" stroke="currentColor" stroke-width="2" fill="none"/>188 <circle cx="12" cy="12" r="2"/>189 </svg>190 </span>191 <span class="icon">192 <svg width="40" height="40" viewBox="0 0 24 24">193 <rect x="3" y="8" width="14" height="10" rx="2" stroke="currentColor" stroke-width="2" fill="none"/>194 <rect x="5" y="10" width="10" height="6" fill="currentColor"/>195 <rect x="18" y="10" width="3" height="6" rx="1.5" fill="currentColor"/>196 </svg>197 </span>198 </div>199 </div>200 201 <!-- Search -->202 <div class="top-search">203 <div class="search-bar">204 <span class="icon" style="color:#CFCFCF;">205 <!-- Hamburger -->206 <svg width="44" height="44" viewBox="0 0 24 24">207 <rect x="3" y="6" width="18" height="2" rx="1"/><rect x="3" y="11" width="18" height="2" rx="1"/><rect x="3" y="16" width="18" height="2" rx="1"/>208 </svg>209 </span>210 <div class="placeholder">Search this phone</div>211 <span class="icon" style="color:#CFCFCF;">212 <!-- Vertical more -->213 <svg width="44" height="44" viewBox="0 0 24 24">214 <circle cx="12" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="18" r="2"/>215 </svg>216 </span>217 </div>218 </div>219 220 <!-- Chips -->221 <div class="chips">222 <div class="chip">223 <span class="icon" style="color:#CFCFCF;">224 <!-- Tag icon -->225 <svg width="36" height="36" viewBox="0 0 24 24">226 <path d="M3 10l7-7h7v7l-7 7-7-7z" fill="none" stroke="currentColor" stroke-width="2"/>227 <circle cx="15" cy="9" r="1.5"/>228 </svg>229 </span>230 <span>Large files</span>231 </div>232 <div class="chip">233 <span class="icon" style="color:#CFCFCF;">234 <!-- Clock icon -->235 <svg width="36" height="36" viewBox="0 0 24 24">236 <circle cx="12" cy="12" r="8" fill="none" stroke="currentColor" stroke-width="2"/>237 <path d="M12 8v5l3 2" stroke="currentColor" stroke-width="2" fill="none"/>238 </svg>239 </span>240 <span>This week</span>241 </div>242 </div>243 244 <!-- Browse files section -->245 <div class="section-title">BROWSE FILES IN OTHER APPS</div>246 <div class="apps-row">247 <div class="app">248 <div class="app-icon" style="background:#4CAF50;">D</div>249 <div class="label">Drive</div>250 </div>251 <div class="app">252 <div class="app-icon" style="background:#FFC107;">P</div>253 <div class="label">Photos</div>254 </div>255 <div class="app">256 <div class="app-icon" style="background:#757575; color:#fff;">B</div>257 <div class="label">Bug reports</div>258 </div>259 <div class="app">260 <div class="app-icon" style="background:#8BC34A;">S</div>261 <div class="label">System trac...</div>262 </div>263 <div class="app">264 <div class="app-icon" style="background:#7CB342;">Z</div>265 <div class="label">ZArchiver</div>266 </div>267 </div>268 269 <!-- Recent images -->270 <div class="subheader-row">271 <div class="title">Recent images</div>272 <div class="grid-toggle">273 <svg width="28" height="28" viewBox="0 0 24 24">274 <rect x="3" y="4" width="7" height="7" rx="1"/>275 <rect x="14" y="4" width="7" height="7" rx="1"/>276 <rect x="3" y="15" width="7" height="7" rx="1"/>277 <rect x="14" y="15" width="7" height="7" rx="1"/>278 </svg>279 </div>280 </div>281 282 <div class="grid">283 <!-- Row 1 -->284 <div class="thumb"><div class="overlay">285 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">286 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>287 </svg>288 </div>[IMG: Desk photo]</div>289 <div class="thumb"><div class="overlay">290 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">291 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>292 </svg>293 </div>[IMG: Desk photo]</div>294 <div class="thumb"><div class="overlay">295 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">296 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>297 </svg>298 </div>[IMG: Desk photo]</div>299 300 <!-- Row 2 -->301 <div class="thumb"><div class="overlay">302 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">303 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>304 </svg>305 </div>[IMG: Desk photo]</div>306 <div class="thumb"><div class="overlay">307 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">308 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>309 </svg>310 </div>[IMG: Desk photo]</div>311 <div class="thumb"><div class="overlay">312 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">313 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>314 </svg>315 </div>[IMG: Desk photo]</div>316 317 <!-- Row 3 -->318 <div class="thumb"><div class="overlay">319 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">320 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>321 </svg>322 </div>[IMG: Desk photo]</div>323 <div class="thumb"><div class="overlay">324 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">325 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>326 </svg>327 </div>[IMG: Desk photo]</div>328 <div class="thumb"><div class="overlay">329 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">330 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>331 </svg>332 </div>[IMG: Desk photo]</div>333 334 <!-- Row 4 -->335 <div class="thumb"><div class="overlay">336 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">337 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>338 </svg>339 </div>[IMG: Desk photo]</div>340 <div class="thumb"><div class="overlay">341 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">342 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>343 </svg>344 </div>[IMG: Desk photo]</div>345 <div class="thumb"><div class="overlay">346 <svg width="26" height="26" viewBox="0 0 24 24" style="color:#fff">347 <path d="M8 3h3v2H8v3H6V5H3V3h3V0h2v3zm8 18h-3v-2h3v-3h2v3h3v2h-3v3h-2v-3z"/>348 </svg>349 </div>[IMG: Hands on keyboard]</div>350 </div>351 352 <div class="gesture-bar"></div>353</div>354</body>355</html>