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>Documents - Dark File Manager 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: #121212;15 color: #EDEDED;16 }17 18 /* Common */19 .row { display: flex; align-items: center; }20 .divider { height: 1px; background: #262626; margin-left: 160px; margin-right: 24px; }21 .secondary { color: #9E9E9E; }22 .btn-pill {23 background: #2266D6;24 color: #FFFFFF;25 border-radius: 999px;26 padding: 18px 32px;27 font-weight: 600;28 }29 30 /* Status bar */31 .status-bar {32 position: absolute;33 top: 0;34 left: 0;35 width: 100%;36 height: 110px;37 padding: 16px 28px;38 box-sizing: border-box;39 color: #FFFFFF;40 }41 .status-left { font-size: 42px; font-weight: 600; }42 .status-center { display: flex; gap: 18px; margin-left: 16px; }43 .status-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }44 45 /* App bar */46 .app-bar {47 position: absolute;48 top: 110px;49 left: 0;50 width: 100%;51 height: 140px;52 padding: 0 24px;53 box-sizing: border-box;54 }55 .app-title { font-size: 54px; font-weight: 700; margin-left: 16px; }56 .app-actions { margin-left: auto; display: flex; gap: 42px; }57 58 /* Ad row */59 .ad-row {60 position: absolute;61 top: 250px;62 left: 0;63 width: 100%;64 padding: 22px 24px;65 box-sizing: border-box;66 }67 .ad-badge {68 background: #E8C547;69 color: #242424;70 font-size: 26px;71 font-weight: 700;72 padding: 6px 10px;73 border-radius: 6px;74 margin-right: 12px;75 }76 .ad-title { font-size: 36px; font-weight: 700; color: #EDEDED; }77 .ad-btn {78 margin-left: auto;79 width: 650px;80 height: 78px;81 border-radius: 39px;82 background: #2B64D9;83 display: flex;84 align-items: center;85 justify-content: center;86 font-size: 34px;87 font-weight: 700;88 color: #FFFFFF;89 }90 91 /* Image placeholder spec */92 .img-placeholder {93 width: 120px;94 height: 120px;95 background: #E0E0E0;96 border: 1px solid #BDBDBD;97 display: flex;98 align-items: center;99 justify-content: center;100 color: #757575;101 border-radius: 14px;102 }103 104 /* List */105 .list {106 position: absolute;107 top: 420px;108 left: 0;109 width: 100%;110 }111 .list-item {112 display: flex;113 align-items: center;114 padding: 28px 24px;115 box-sizing: border-box;116 }117 .doc-icon {118 width: 104px;119 height: 120px;120 background: #E0E0E0;121 border: 1px solid #BDBDBD;122 border-radius: 16px;123 color: #757575;124 display: flex;125 align-items: center;126 justify-content: center;127 font-weight: 900;128 }129 .item-content { margin-left: 36px; flex: 1; }130 .item-title { font-size: 38px; font-weight: 600; color: #EDEDED; }131 .item-sub { font-size: 28px; margin-top: 8px; color: #9E9E9E; }132 .item-meta { display: flex; align-items: center; gap: 28px; }133 .item-size { font-size: 28px; color: #9E9E9E; }134 .kebab { width: 36px; height: 36px; }135 136 /* Bottom sheet */137 .bottom-sheet {138 position: absolute;139 left: 0;140 bottom: 0;141 width: 100%;142 height: 420px;143 background: #1B1B1B;144 border-top-left-radius: 28px;145 border-top-right-radius: 28px;146 box-shadow: 0 -6px 24px rgba(0,0,0,0.6);147 padding: 22px 40px;148 box-sizing: border-box;149 }150 .sheet-handle {151 width: 120px;152 height: 12px;153 background: #3A3A3A;154 border-radius: 6px;155 margin: 8px auto 26px auto;156 }157 .app-grid { display: flex; justify-content: space-between; padding: 0 30px; }158 .app-item { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #EDEDED; }159 .circle {160 width: 128px;161 height: 128px;162 border-radius: 50%;163 background: #2A2A2A;164 display: flex;165 align-items: center;166 justify-content: center;167 }168 .app-label { font-size: 28px; color: #EDEDED; }169 170 /* Gesture navigation bar */171 .gesture-bar {172 position: absolute;173 bottom: 22px;174 left: 50%;175 transform: translateX(-50%);176 width: 300px;177 height: 12px;178 border-radius: 6px;179 background: #EDEDED;180 opacity: 0.85;181 }182 183 /* Icon helpers */184 svg { display: block; }185</style>186</head>187<body>188<div id="render-target">189 190 <!-- Status bar -->191 <div class="status-bar row">192 <div class="status-left">1:07</div>193 194 <div class="status-center">195 <!-- simple tiny badges to mimic notifications -->196 <span style="width:18px;height:18px;background:#FFFFFF;border-radius:50%;opacity:.9;"></span>197 <span style="width:18px;height:18px;background:#FFFFFF;border-radius:50%;opacity:.9;"></span>198 <span style="width:18px;height:18px;background:#FFFFFF;border-radius:50%;opacity:.9;"></span>199 <span style="width:18px;height:18px;background:#FFFFFF;border-radius:50%;opacity:.35;"></span>200 </div>201 202 <div class="status-right">203 <!-- WiFi icon -->204 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">205 <path d="M2 8c5-4 15-4 20 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>206 <path d="M5 12c3-3 11-3 14 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>207 <path d="M8 16c2-2 6-2 8 0" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>208 <circle cx="12" cy="19" r="1.6" fill="#FFFFFF"/>209 </svg>210 <!-- Battery icon -->211 <svg width="48" height="48" viewBox="0 0 28 28" fill="none">212 <rect x="2" y="6" width="20" height="12" rx="2" stroke="#FFFFFF" stroke-width="2"/>213 <rect x="4" y="8" width="14" height="8" rx="1" fill="#FFFFFF"/>214 <rect x="22" y="10" width="4" height="6" rx="1" fill="#FFFFFF"/>215 </svg>216 </div>217 </div>218 219 <!-- App bar -->220 <div class="app-bar row">221 <!-- Back arrow -->222 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">223 <path d="M15 18L9 12l6-6" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>224 </svg>225 <div class="app-title">Documents</div>226 <div class="app-actions">227 <!-- Search icon -->228 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">229 <circle cx="11" cy="11" r="7" stroke="#FFFFFF" stroke-width="2"/>230 <path d="M21 21l-4.5-4.5" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>231 </svg>232 <!-- Grid icon -->233 <svg width="56" height="56" viewBox="0 0 24 24" fill="none">234 <rect x="3" y="3" width="7" height="7" rx="1.5" stroke="#FFFFFF" stroke-width="2"/>235 <rect x="14" y="3" width="7" height="7" rx="1.5" stroke="#FFFFFF" stroke-width="2"/>236 <rect x="3" y="14" width="7" height="7" rx="1.5" stroke="#FFFFFF" stroke-width="2"/>237 <rect x="14" y="14" width="7" height="7" rx="1.5" stroke="#FFFFFF" stroke-width="2"/>238 </svg>239 <!-- More (kebab) icon -->240 <svg width="56" height="56" viewBox="0 0 24 24" fill="#FFFFFF">241 <circle cx="12" cy="5" r="2"/>242 <circle cx="12" cy="12" r="2"/>243 <circle cx="12" cy="19" r="2"/>244 </svg>245 </div>246 </div>247 248 <!-- Ad row -->249 <div class="ad-row">250 <div class="row">251 <div class="img-placeholder">[IMG: Adidas Logo]</div>252 <div style="margin-left: 20px;">253 <span class="ad-badge">AD</span>254 <span class="ad-title">adidas</span>255 </div>256 <div class="ad-btn">Get Discount...</div>257 </div>258 <div class="divider"></div>259 </div>260 261 <!-- List -->262 <div class="list">263 <!-- Item 1 -->264 <div class="list-item">265 <div class="doc-icon">TXT</div>266 <div class="item-content">267 <div class="item-title">Copy of screenshot-1.txt</div>268 <div class="item-sub">06/28/23</div>269 </div>270 <div class="item-meta">271 <div class="item-size">885.83 KB</div>272 <svg class="kebab" viewBox="0 0 24 24" fill="#9E9E9E">273 <circle cx="12" cy="4.5" r="2"/>274 <circle cx="12" cy="12" r="2"/>275 <circle cx="12" cy="19.5" r="2"/>276 </svg>277 </div>278 </div>279 <div class="divider"></div>280 281 <!-- Item 2 -->282 <div class="list-item">283 <div class="doc-icon">TXT</div>284 <div class="item-content">285 <div class="item-title">Copy of screenshot.txt</div>286 <div class="item-sub">06/28/23</div>287 </div>288 <div class="item-meta">289 <div class="item-size">885.83 KB</div>290 <svg class="kebab" viewBox="0 0 24 24" fill="#9E9E9E">291 <circle cx="12" cy="4.5" r="2"/>292 <circle cx="12" cy="12" r="2"/>293 <circle cx="12" cy="19.5" r="2"/>294 </svg>295 </div>296 </div>297 <div class="divider"></div>298 299 <!-- Item 3 -->300 <div class="list-item">301 <div class="doc-icon">TXT</div>302 <div class="item-content">303 <div class="item-title">actuation_result.txt</div>304 <div class="item-sub">07/05/23</div>305 </div>306 <div class="item-meta">307 <div class="item-size">8 Bytes</div>308 <svg class="kebab" viewBox="0 0 24 24" fill="#9E9E9E">309 <circle cx="12" cy="4.5" r="2"/>310 <circle cx="12" cy="12" r="2"/>311 <circle cx="12" cy="19.5" r="2"/>312 </svg>313 </div>314 </div>315 <div class="divider"></div>316 317 <!-- Item 4 -->318 <div class="list-item">319 <div class="doc-icon">TXT</div>320 <div class="item-content">321 <div class="item-title">screenshot.txt</div>322 <div class="item-sub">07/05/23</div>323 </div>324 <div class="item-meta">325 <div class="item-size">347.14 KB</div>326 <svg class="kebab" viewBox="0 0 24 24" fill="#9E9E9E">327 <circle cx="12" cy="4.5" r="2"/>328 <circle cx="12" cy="12" r="2"/>329 <circle cx="12" cy="19.5" r="2"/>330 </svg>331 </div>332 </div>333 <div class="divider"></div>334 335 <!-- Item 5 -->336 <div class="list-item">337 <div class="doc-icon">TXT</div>338 <div class="item-content">339 <div class="item-title">agents.txt</div>340 <div class="item-sub">07/05/23</div>341 </div>342 <div class="item-meta">343 <div class="item-size">1.12 KB</div>344 <svg class="kebab" viewBox="0 0 24 24" fill="#9E9E9E">345 <circle cx="12" cy="4.5" r="2"/>346 <circle cx="12" cy="12" r="2"/>347 <circle cx="12" cy="19.5" r="2"/>348 </svg>349 </div>350 </div>351 <div class="divider"></div>352 353 <!-- Item 6 -->354 <div class="list-item">355 <div class="doc-icon">TXT</div>356 <div class="item-content">357 <div class="item-title">os_info.txt</div>358 <div class="item-sub">07/05/23</div>359 </div>360 <div class="item-meta">361 <div class="item-size">32 Bytes</div>362 <svg class="kebab" viewBox="0 0 24 24" fill="#9E9E9E">363 <circle cx="12" cy="4.5" r="2"/>364 <circle cx="12" cy="12" r="2"/>365 <circle cx="12" cy="19.5" r="2"/>366 </svg>367 </div>368 </div>369 <div class="divider"></div>370 </div>371 372 <!-- Bottom sheet with app choices -->373 <div class="bottom-sheet">374 <div class="sheet-handle"></div>375 <div class="app-grid">376 <!-- HTML Viewer -->377 <div class="app-item">378 <div class="circle">379 <svg width="84" height="84" viewBox="0 0 24 24" fill="#7EC8A5">380 <rect x="3" y="3" width="18" height="18" rx="3" fill="#3E7D6E"/>381 <path d="M6 8h12M6 12h12M6 16h12" stroke="#7EC8A5" stroke-width="2" stroke-linecap="round"/>382 <circle cx="12" cy="12" r="3" fill="#7EC8A5"/>383 </svg>384 </div>385 <div class="app-label">HTML Viewer</div>386 </div>387 <!-- Docs -->388 <div class="app-item">389 <div class="circle">390 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">391 <rect x="5" y="3" width="14" height="18" rx="2" fill="#3B79FF"/>392 <rect x="7.5" y="7" width="9" height="1.8" fill="#FFFFFF"/>393 <rect x="7.5" y="10.5" width="9" height="1.8" fill="#FFFFFF"/>394 <rect x="7.5" y="14" width="9" height="1.8" fill="#FFFFFF"/>395 </svg>396 </div>397 <div class="app-label">Docs</div>398 </div>399 <!-- Chrome -->400 <div class="app-item">401 <div class="circle">402 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">403 <circle cx="12" cy="12" r="10" fill="#F44336"/>404 <path d="M12 2a10 10 0 0 1 8.7 5H12" fill="#FFC107"/>405 <path d="M5 9a10 10 0 0 0 7 13l4-7" fill="#4CAF50"/>406 <circle cx="12" cy="12" r="4" fill="#2196F3"/>407 </svg>408 </div>409 <div class="app-label">Chrome</div>410 </div>411 <!-- TeraBox -->412 <div class="app-item">413 <div class="circle">414 <svg width="84" height="84" viewBox="0 0 24 24" fill="none">415 <rect x="3" y="4" width="18" height="16" rx="4" fill="#7CC6FF"/>416 <path d="M8 15c0-2 1.8-3.5 4-3.5S16 13 16 15H8z" fill="#FFFFFF"/>417 <circle cx="17.5" cy="7.5" r="2.2" fill="#FFFFFF"/>418 </svg>419 </div>420 <div class="app-label">TeraBox</div>421 </div>422 </div>423 </div>424 425 <!-- Gesture bar -->426 <div class="gesture-bar"></div>427 428</div>429</body>430</html>