GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>File Manager Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px; position: relative; overflow: hidden;10 background: #F6F6F6;11 }12 13 /* Status bar */14 .status-bar {15 position: absolute; top: 0; left: 0; width: 100%; height: 96px;16 background: #E7E7E7; color: #333;17 display: flex; align-items: center; justify-content: space-between;18 padding: 0 32px; box-sizing: border-box; font-size: 34px;19 }20 .status-right { display: flex; align-items: center; gap: 28px; }21 .status-icon svg { display: block; }22 23 /* Toolbar */24 .toolbar {25 position: absolute; top: 96px; left: 0; width: 100%; height: 160px;26 background: #FFFFFF; border-bottom: 1px solid #DADADA;27 display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;28 }29 .tb-left { display: flex; align-items: center; gap: 22px; }30 .tb-title { font-size: 44px; color: #212121; font-weight: 600; }31 .tb-title .down { margin-left: 12px; vertical-align: middle; }32 .tb-right { margin-left: auto; display: flex; align-items: center; gap: 36px; }33 34 /* Breadcrumbs */35 .breadcrumbs {36 position: absolute; top: 256px; left: 0; width: 100%; height: 96px;37 background: #FFFFFF; border-bottom: 1px solid #E0E0E0;38 display: flex; align-items: center; gap: 18px; padding: 0 32px; box-sizing: border-box;39 color: #616161; font-size: 36px;40 }41 .crumb-icon { display: flex; align-items: center; }42 .crumb-sep { color: #9E9E9E; font-size: 40px; padding: 0 6px; }43 44 /* List */45 .list {46 position: absolute; top: 352px; left: 0; width: 100%; bottom: 120px;47 background: #FFFFFF;48 }49 .item {50 display: flex; align-items: center; padding: 28px 32px; box-sizing: border-box;51 border-bottom: 1px solid #EEEEEE;52 }53 .thumb {54 width: 140px; height: 110px; margin-right: 28px; position: relative; flex-shrink: 0;55 }56 .thumb.video .play {57 position: absolute; right: 8px; top: 8px;58 width: 44px; height: 44px; background: rgba(0,0,0,0.6); border-radius: 50%;59 display: flex; align-items: center; justify-content: center;60 }61 .thumb.video .play svg { width: 24px; height: 24px; }62 .meta { flex: 1; }63 .title { font-size: 40px; color: #212121; }64 .sub { font-size: 30px; color: #757575; margin-top: 8px; }65 .check {66 width: 48px; height: 48px; border: 2px solid #9E9E9E; border-radius: 6px; margin-left: 16px;67 }68 69 /* Image placeholders for thumbnails */70 .img-ph {71 width: 140px; height: 110px; background: #E0E0E0; border: 1px solid #BDBDBD;72 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;73 }74 75 /* Text file icon */76 .doc-icon {77 width: 140px; height: 110px; background: #2E6CE6; border-radius: 14px;78 display: flex; align-items: center; justify-content: center;79 }80 .doc-icon svg { width: 70px; height: 70px; }81 82 /* APK icon */83 .apk-icon {84 width: 140px; height: 110px; display: flex; align-items: center; justify-content: center;85 }86 .apk-icon .circle {87 width: 100px; height: 100px; background: #66AA77; border-radius: 50%;88 display: flex; align-items: center; justify-content: center;89 }90 .apk-icon svg { width: 60px; height: 60px; }91 92 /* Zip icon */93 .zip-icon {94 width: 140px; height: 110px; background: #8E8E8E; border-radius: 10px;95 display: flex; align-items: center; justify-content: center;96 }97 .zip-icon svg { width: 70px; height: 70px; }98 99 /* Bottom gesture bar */100 .gesture {101 position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);102 width: 240px; height: 12px; background: #000; opacity: 0.2; border-radius: 8px;103 }104</style>105</head>106<body>107<div id="render-target">108 109 <!-- Status Bar -->110 <div class="status-bar">111 <div class="status-left">1:04</div>112 <div class="status-right">113 <div class="status-icon">114 <svg width="44" height="44" viewBox="0 0 44 44">115 <path d="M6 30c6-6 26-6 32 0" stroke="#555" stroke-width="3" fill="none" stroke-linecap="round"/>116 <path d="M11 24c4-4 18-4 22 0" stroke="#555" stroke-width="3" fill="none" stroke-linecap="round"/>117 <circle cx="22" cy="34" r="3" fill="#555"/>118 </svg>119 </div>120 <div class="status-icon">121 <svg width="44" height="44" viewBox="0 0 44 44">122 <rect x="8" y="12" width="6" height="20" fill="#555"/>123 <rect x="18" y="8" width="6" height="24" fill="#555"/>124 <rect x="28" y="4" width="6" height="28" fill="#555"/>125 </svg>126 </div>127 <div class="status-icon">128 <svg width="58" height="44" viewBox="0 0 58 44">129 <rect x="6" y="10" width="38" height="24" rx="3" ry="3" stroke="#555" stroke-width="3" fill="none"/>130 <rect x="44" y="16" width="8" height="12" fill="#555"/>131 <rect x="9" y="13" width="32" height="18" fill="#4CAF50"/>132 </svg>133 </div>134 </div>135 </div>136 137 <!-- Toolbar -->138 <div class="toolbar">139 <div class="tb-left">140 <svg width="60" height="60" viewBox="0 0 60 60">141 <path d="M38 14 L22 30 L38 46" stroke="#333" stroke-width="6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>142 </svg>143 <div class="tb-title">Main storage144 <svg class="down" width="28" height="28" viewBox="0 0 24 24">145 <path d="M6 9 L12 15 L18 9" stroke="#333" stroke-width="2" fill="none" stroke-linecap="round"/>146 </svg>147 </div>148 </div>149 <div class="tb-right">150 <svg width="56" height="56" viewBox="0 0 60 60">151 <path d="M12 18h36M12 30h36M12 42h36" stroke="#333" stroke-width="5" stroke-linecap="round"/>152 </svg>153 <svg width="40" height="40" viewBox="0 0 24 24">154 <circle cx="12" cy="4" r="2" fill="#333"/>155 <circle cx="12" cy="12" r="2" fill="#333"/>156 <circle cx="12" cy="20" r="2" fill="#333"/>157 </svg>158 </div>159 </div>160 161 <!-- Breadcrumbs -->162 <div class="breadcrumbs">163 <div class="crumb-icon">164 <svg width="46" height="46" viewBox="0 0 46 46">165 <path d="M8 24 L23 12 L38 24 V38 H8 Z" fill="#616161"/>166 <rect x="18" y="26" width="10" height="12" fill="#FFFFFF"/>167 </svg>168 </div>169 <div class="crumb-sep">›</div>170 <div class="crumb-icon">171 <svg width="42" height="42" viewBox="0 0 42 42">172 <rect x="10" y="6" width="22" height="30" rx="4" fill="#616161"/>173 <rect x="18" y="30" width="6" height="3" fill="#FFFFFF"/>174 </svg>175 </div>176 <div class="crumb-sep">›</div>177 <div>Download</div>178 </div>179 180 <!-- List -->181 <div class="list">182 <!-- Folders -->183 <div class="item">184 <div class="thumb">185 <svg width="140" height="110" viewBox="0 0 140 110">186 <path d="M10 30h42l12 14h66v54H10z" fill="#F5C64E" stroke="#E0A837" stroke-width="3"/>187 <rect x="10" y="30" width="120" height="16" fill="#F7D67F"/>188 </svg>189 </div>190 <div class="meta">191 <div class="title">Flowers</div>192 <div class="sub">7 items</div>193 </div>194 <div class="check"></div>195 </div>196 197 <div class="item">198 <div class="thumb">199 <svg width="140" height="110" viewBox="0 0 140 110">200 <path d="M10 30h42l12 14h66v54H10z" fill="#F5C64E" stroke="#E0A837" stroke-width="3"/>201 <rect x="10" y="30" width="120" height="16" fill="#F7D67F"/>202 </svg>203 </div>204 <div class="meta">205 <div class="title">MEGA Downloads</div>206 <div class="sub">0 items</div>207 </div>208 <div class="check"></div>209 </div>210 211 <div class="item">212 <div class="thumb">213 <svg width="140" height="110" viewBox="0 0 140 110">214 <path d="M10 30h42l12 14h66v54H10z" fill="#F5C64E" stroke="#E0A837" stroke-width="3"/>215 <rect x="10" y="30" width="120" height="16" fill="#F7D67F"/>216 </svg>217 </div>218 <div class="meta">219 <div class="title">TeraBox</div>220 <div class="sub">1 item</div>221 </div>222 <div class="check"></div>223 </div>224 225 <!-- Videos -->226 <div class="item">227 <div class="thumb video">228 <div class="img-ph">[IMG: Beach waves]</div>229 <div class="play">230 <svg viewBox="0 0 24 24">231 <polygon points="8,5 19,12 8,19" fill="#FFF"/>232 </svg>233 </div>234 </div>235 <div class="meta">236 <div class="title">beach waves.mp4</div>237 <div class="sub">3.29 MB</div>238 </div>239 <div class="check"></div>240 </div>241 242 <div class="item">243 <div class="thumb video">244 <div class="img-ph">[IMG: Beach-1]</div>245 <div class="play">246 <svg viewBox="0 0 24 24">247 <polygon points="8,5 19,12 8,19" fill="#FFF"/>248 </svg>249 </div>250 </div>251 <div class="meta">252 <div class="title">beach-1.mp4</div>253 <div class="sub">1.78 MB</div>254 </div>255 <div class="check"></div>256 </div>257 258 <div class="item">259 <div class="thumb video">260 <div class="img-ph">[IMG: Beach]</div>261 <div class="play">262 <svg viewBox="0 0 24 24">263 <polygon points="8,5 19,12 8,19" fill="#FFF"/>264 </svg>265 </div>266 </div>267 <div class="meta">268 <div class="title">beach.mp4</div>269 <div class="sub">1.78 MB</div>270 </div>271 <div class="check"></div>272 </div>273 274 <!-- Text files -->275 <div class="item">276 <div class="thumb doc-icon">277 <svg viewBox="0 0 64 64">278 <rect x="12" y="10" width="40" height="44" rx="6" fill="#FFF"/>279 <rect x="18" y="22" width="28" height="4" fill="#2E6CE6"/>280 <rect x="18" y="30" width="28" height="4" fill="#2E6CE6"/>281 <rect x="18" y="38" width="20" height="4" fill="#2E6CE6"/>282 </svg>283 </div>284 <div class="meta">285 <div class="title">Copy of screenshot-1.txt</div>286 <div class="sub">0.91 MB</div>287 </div>288 <div class="check"></div>289 </div>290 291 <div class="item">292 <div class="thumb doc-icon">293 <svg viewBox="0 0 64 64">294 <rect x="12" y="10" width="40" height="44" rx="6" fill="#FFF"/>295 <rect x="18" y="22" width="28" height="4" fill="#2E6CE6"/>296 <rect x="18" y="30" width="28" height="4" fill="#2E6CE6"/>297 <rect x="18" y="38" width="20" height="4" fill="#2E6CE6"/>298 </svg>299 </div>300 <div class="meta">301 <div class="title">Copy of screenshot.txt</div>302 <div class="sub">0.91 MB</div>303 </div>304 <div class="check"></div>305 </div>306 307 <!-- Images -->308 <div class="item">309 <div class="thumb">310 <div class="img-ph">[IMG: Butterfly]</div>311 </div>312 <div class="meta">313 <div class="title">images~2.jpeg</div>314 <div class="sub">22.48 kB</div>315 </div>316 <div class="check"></div>317 </div>318 319 <div class="item">320 <div class="thumb">321 <div class="img-ph">[IMG: Maki-zushi]</div>322 </div>323 <div class="meta">324 <div class="title">Maki-zushi.jpg</div>325 <div class="sub">197 kB</div>326 </div>327 <div class="check"></div>328 </div>329 330 <!-- APK -->331 <div class="item">332 <div class="thumb apk-icon">333 <div class="circle">334 <svg viewBox="0 0 64 64">335 <rect x="12" y="18" width="40" height="28" rx="6" fill="#FFF"/>336 <circle cx="24" cy="24" r="4" fill="#66AA77"/>337 <circle cx="40" cy="24" r="4" fill="#66AA77"/>338 </svg>339 </div>340 </div>341 <div class="meta">342 <div class="title">showcase_android_prod_arm64-v8a.apk</div>343 <div class="sub">178 MB</div>344 </div>345 <div class="check"></div>346 </div>347 348 <div class="item">349 <div class="thumb">350 <div class="img-ph">[IMG: Taj Mahal]</div>351 </div>352 <div class="meta">353 <div class="title">Taj Mahal.jpeg</div>354 <div class="sub">39.52 kB</div>355 </div>356 <div class="check"></div>357 </div>358 359 <!-- ZIP -->360 <div class="item">361 <div class="thumb zip-icon">362 <svg viewBox="0 0 64 64">363 <rect x="16" y="10" width="32" height="44" rx="6" fill="#FFF"/>364 <rect x="28" y="14" width="8" height="6" fill="#8E8E8E"/>365 <rect x="28" y="22" width="8" height="6" fill="#8E8E8E"/>366 <rect x="28" y="30" width="8" height="6" fill="#8E8E8E"/>367 <rect x="24" y="40" width="16" height="8" fill="#8E8E8E"/>368 </svg>369 </div>370 <div class="meta">371 <div class="title">takeout-20230619T040726Z-001.zip</div>372 <div class="sub">474 kB</div>373 </div>374 <div class="check"></div>375 </div>376 </div>377 378 <!-- Gesture bar -->379 <div class="gesture"></div>380</div>381</body>382</html>