GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>File Manager UI</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: #FFFFFF;14 }15 16 /* Status bar */17 .status-bar {18 height: 120px;19 padding: 0 36px;20 display: flex;21 align-items: center;22 justify-content: space-between;23 color: #4a4a4a;24 font-size: 40px;25 }26 .status-left { display: flex; gap: 22px; align-items: center; }27 .status-right { display: flex; gap: 22px; align-items: center; }28 29 /* Top actions toolbar */30 .top-toolbar {31 height: 120px;32 display: flex;33 align-items: center;34 gap: 28px;35 padding: 0 32px;36 color: #616161;37 border-bottom: 1px solid #eee;38 }39 .toolbar-spacer { flex: 1; }40 .icon-btn {41 width: 84px;42 height: 84px;43 border-radius: 12px;44 display: flex;45 align-items: center;46 justify-content: center;47 }48 .icon-btn.active svg { fill: #1E88E5; stroke: #1E88E5; }49 .icon-btn svg { width: 52px; height: 52px; fill: none; stroke: #616161; stroke-width: 4; }50 51 /* Breadcrumb / location */52 .breadcrumb {53 height: 120px;54 display: flex;55 align-items: center;56 padding: 0 32px;57 color: #5f6368;58 border-bottom: 1px solid #eee;59 }60 .breadcrumb .path {61 font-size: 44px;62 color: #757575;63 }64 .breadcrumb .path b { color: #424242; font-weight: 600; }65 .breadcrumb-right {66 margin-left: auto;67 display: flex;68 gap: 30px;69 }70 71 /* List */72 .list {73 position: relative;74 }75 .row {76 display: flex;77 align-items: center;78 padding: 30px 32px;79 height: 168px;80 border-bottom: 1px solid #eee;81 }82 .folder-icon {83 width: 120px;84 height: 120px;85 background: #E7A93B;86 border-radius: 12px;87 position: relative;88 margin-right: 36px;89 box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);90 }91 .folder-icon:before {92 content: "";93 position: absolute;94 left: 0;95 top: 0;96 height: 32px;97 width: 60%;98 background: #D8942F;99 border-top-left-radius: 12px;100 border-top-right-radius: 8px;101 }102 .download-badge {103 position: absolute;104 right: -8px;105 bottom: -8px;106 width: 44px;107 height: 44px;108 background: #3FA7F4;109 border-radius: 50%;110 display: flex; align-items: center; justify-content: center;111 box-shadow: 0 2px 4px rgba(0,0,0,0.2);112 }113 .row .texts { flex: 1; }114 .row .title {115 font-size: 44px;116 color: #212121;117 margin-bottom: 12px;118 }119 .row .meta {120 font-size: 34px;121 color: #80868B;122 }123 .chevron {124 width: 36px;125 height: 36px;126 margin-left: 18px;127 }128 129 /* Bottom gesture bar */130 .gesture {131 position: absolute;132 bottom: 36px;133 left: 50%;134 transform: translateX(-50%);135 width: 360px;136 height: 16px;137 background: #9E9E9E;138 border-radius: 10px;139 opacity: 0.6;140 }141 142 /* Simple SVG icon styling for right-side buttons */143 .breadcrumb-right svg { width: 52px; height: 52px; stroke: #616161; stroke-width: 4; fill: none; }144</style>145</head>146<body>147<div id="render-target">148 149 <!-- Status bar -->150 <div class="status-bar">151 <div class="status-left">152 <div>11:16</div>153 <div>33°</div>154 <div>🌥️</div>155 <div>🚆</div>156 <div>↻</div>157 </div>158 <div class="status-right">159 <!-- Wi-Fi -->160 <svg viewBox="0 0 24 24">161 <path d="M2 8c5-4 15-4 20 0M5 12c3-2 11-2 14 0M9 16c2-1 4-1 6 0"/>162 <circle cx="12" cy="19" r="1.8"></circle>163 </svg>164 <!-- Battery -->165 <svg viewBox="0 0 28 24">166 <rect x="2" y="5" width="20" height="14" rx="2" ry="2" fill="none" stroke="#4a4a4a" stroke-width="2"></rect>167 <rect x="22" y="9" width="4" height="6" fill="#4a4a4a" stroke="#4a4a4a"></rect>168 <rect x="5" y="8" width="14" height="8" fill="#4a4a4a"></rect>169 </svg>170 </div>171 </div>172 173 <!-- Top toolbar with actions -->174 <div class="top-toolbar">175 <!-- Hamburger -->176 <div class="icon-btn">177 <svg viewBox="0 0 24 24">178 <path d="M3 6h18M3 12h18M3 18h18"></path>179 </svg>180 </div>181 <!-- Upload/share -->182 <div class="icon-btn">183 <svg viewBox="0 0 24 24">184 <path d="M12 5v10M8 8l4-4 4 4"></path>185 <rect x="4" y="15" width="16" height="4" rx="2"></rect>186 </svg>187 </div>188 <!-- Clock -->189 <div class="icon-btn">190 <svg viewBox="0 0 24 24">191 <circle cx="12" cy="12" r="8"></circle>192 <path d="M12 7v6l4 2"></path>193 </svg>194 </div>195 <!-- Folder (active) -->196 <div class="icon-btn active">197 <svg viewBox="0 0 24 24">198 <path d="M3 6h6l2 2h10v10H3z"></path>199 </svg>200 </div>201 <div class="toolbar-spacer"></div>202 <!-- Search -->203 <div class="icon-btn">204 <svg viewBox="0 0 24 24">205 <circle cx="11" cy="11" r="6"></circle>206 <path d="M16 16l5 5"></path>207 </svg>208 </div>209 </div>210 211 <!-- Breadcrumb -->212 <div class="breadcrumb">213 <div class="path"><b>Internal shared storage</b> ></div>214 <div class="breadcrumb-right">215 <!-- Grid icon -->216 <svg viewBox="0 0 24 24">217 <rect x="3" y="3" width="7" height="7"></rect>218 <rect x="14" y="3" width="7" height="7"></rect>219 <rect x="3" y="14" width="7" height="7"></rect>220 <rect x="14" y="14" width="7" height="7"></rect>221 </svg>222 <!-- More (vertical dots) -->223 <svg viewBox="0 0 24 24">224 <circle cx="12" cy="5" r="2"></circle>225 <circle cx="12" cy="12" r="2"></circle>226 <circle cx="12" cy="19" r="2"></circle>227 </svg>228 </div>229 </div>230 231 <!-- List of folders/files -->232 <div class="list">233 234 <div class="row">235 <div class="folder-icon"></div>236 <div class="texts">237 <div class="title">Alarms</div>238 <div class="meta">0 items | 2/27/23 9:36 PM</div>239 </div>240 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>241 </div>242 243 <div class="row">244 <div class="folder-icon"></div>245 <div class="texts">246 <div class="title">Android</div>247 <div class="meta">3 items | 2/27/23 9:35 PM</div>248 </div>249 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>250 </div>251 252 <div class="row">253 <div class="folder-icon"></div>254 <div class="texts">255 <div class="title">Audiobooks</div>256 <div class="meta">0 items | 2/27/23 9:36 PM</div>257 </div>258 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>259 </div>260 261 <div class="row">262 <div class="folder-icon"></div>263 <div class="texts">264 <div class="title">com.google.intelligence.dbw.showcase</div>265 <div class="meta">1 item | 6/8/23 3:17 PM</div>266 </div>267 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>268 </div>269 270 <div class="row">271 <div class="folder-icon"></div>272 <div class="texts">273 <div class="title">DCIM</div>274 <div class="meta">1 item | 6/8/23 12:19 PM</div>275 </div>276 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>277 </div>278 279 <div class="row">280 <div class="folder-icon"></div>281 <div class="texts">282 <div class="title">Documents</div>283 <div class="meta">0 items | 2/27/23 9:36 PM</div>284 </div>285 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>286 </div>287 288 <div class="row">289 <div class="folder-icon">290 <div class="download-badge">291 <svg viewBox="0 0 24 24" width="28" height="28">292 <path d="M12 5v9M8 10l4 4 4-4M5 18h14" stroke="#fff" stroke-width="2" fill="none" />293 </svg>294 </div>295 </div>296 <div class="texts">297 <div class="title">Download</div>298 <div class="meta">0 items | 2/27/23 9:36 PM</div>299 </div>300 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>301 </div>302 303 <div class="row">304 <div class="folder-icon"></div>305 <div class="texts">306 <div class="title">Movies</div>307 <div class="meta">0 items | 2/27/23 9:36 PM</div>308 </div>309 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>310 </div>311 312 <div class="row">313 <div class="folder-icon"></div>314 <div class="texts">315 <div class="title">Music</div>316 <div class="meta">1 item | 7/5/23 9:59 AM</div>317 </div>318 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>319 </div>320 321 <div class="row">322 <div class="folder-icon"></div>323 <div class="texts">324 <div class="title">Notifications</div>325 <div class="meta">0 items | 2/27/23 9:36 PM</div>326 </div>327 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>328 </div>329 330 <div class="row">331 <div class="folder-icon"></div>332 <div class="texts">333 <div class="title">Pictures</div>334 <div class="meta">2 items | 6/27/23 10:16 AM</div>335 </div>336 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>337 </div>338 339 <div class="row">340 <div class="folder-icon"></div>341 <div class="texts">342 <div class="title">Podcasts</div>343 <div class="meta">0 items | 2/27/23 9:36 PM</div>344 </div>345 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>346 </div>347 348 <div class="row">349 <div class="folder-icon"></div>350 <div class="texts">351 <div class="title">Rainy</div>352 <div class="meta">0 items | 2/27/23 9:36 PM</div>353 </div>354 <svg class="chevron" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="#9e9e9e" stroke-width="3" fill="none"/></svg>355 </div>356 357 </div>358 359 <div class="gesture"></div>360</div>361</body>362</html>