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>Drive - Files View (Dark)</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #1e191b; /* dark brown/charcoal */15 font-family: Arial, Helvetica, sans-serif;16 color: #e7e0e4;17 }18 19 .appbar {20 padding: 32px 36px 18px 36px;21 }22 23 .top-row {24 display: flex;25 align-items: center;26 gap: 22px;27 }28 29 .hamburger {30 width: 72px;31 height: 72px;32 border-radius: 16px;33 display: flex;34 justify-content: center;35 align-items: center;36 }37 .hamburger svg path { stroke: #e7e0e4; }38 39 .search-pill {40 flex: 1;41 height: 92px;42 background: #332a2e;43 border-radius: 46px;44 display: flex;45 align-items: center;46 padding: 0 24px;47 color: #bdaeb6;48 font-size: 34px;49 letter-spacing: 0.2px;50 }51 .search-pill .search-icon {52 width: 40px;53 height: 40px;54 margin-right: 16px;55 }56 .profile {57 width: 88px;58 height: 88px;59 border-radius: 50%;60 background: #2e86c1;61 display: flex;62 justify-content: center;63 align-items: center;64 font-weight: bold;65 font-size: 40px;66 color: #fff;67 }68 69 .tabs {70 display: flex;71 gap: 40px;72 padding: 26px 6px 8px 6px;73 font-size: 36px;74 }75 .tab {76 color: #cdbac2;77 }78 .tab.active {79 color: #f3a9c3;80 position: relative;81 }82 .tab.active::after {83 content: "";84 position: absolute;85 left: 0;86 bottom: -14px;87 width: 130px;88 height: 8px;89 background: #f3a9c3;90 border-radius: 4px;91 }92 93 .divider {94 height: 2px;95 background: #3a3034;96 margin: 14px -36px 0 -36px;97 }98 99 .sort-row {100 padding: 22px 36px;101 display: flex;102 align-items: center;103 justify-content: space-between;104 color: #d8cfd4;105 font-size: 32px;106 }107 .sort-left { display: flex; align-items: center; gap: 10px; }108 .view-toggle svg path { stroke: #d8cfd4; }109 110 .content {111 padding: 10px 36px 0 36px;112 }113 114 .file-grid {115 display: grid;116 grid-template-columns: 1fr 1fr;117 gap: 44px 44px;118 }119 120 .file-card { }121 .preview {122 width: 100%;123 height: 260px;124 border-radius: 26px;125 background: #2c2327;126 display: flex;127 justify-content: center;128 align-items: center;129 color: #b7aab0;130 font-size: 28px;131 border: 2px solid rgba(255,255,255,0.05);132 }133 .preview.folder {134 background: #cdb8bf;135 color: #4a3b40;136 }137 .preview.doc {138 background: #ffffff;139 color: #666;140 }141 .preview.image {142 background: #E0E0E0;143 border: 1px solid #BDBDBD;144 color: #757575;145 }146 147 .file-meta {148 display: flex;149 align-items: center;150 justify-content: space-between;151 margin-top: 12px;152 padding: 0 8px;153 }154 .file-name {155 display: flex;156 align-items: center;157 gap: 12px;158 color: #e7e0e4;159 font-size: 30px;160 }161 .icon-doc, .icon-img {162 width: 28px; height: 36px; border-radius: 4px;163 }164 .icon-doc { background: #6aa5ff; }165 .icon-img { background: #e8859b; }166 .menu-dots {167 width: 34px; height: 34px; position: relative;168 }169 .menu-dots::before, .menu-dots::after, .menu-dots span {170 content: "";171 position: absolute;172 width: 6px; height: 6px; background: #b7aab0; border-radius: 50%;173 left: 50%; transform: translateX(-50%);174 }175 .menu-dots::before { top: 2px; }176 .menu-dots span { top: 14px; }177 .menu-dots::after { bottom: 2px; }178 179 /* Floating Action Button */180 .fab {181 position: absolute;182 right: 50px;183 bottom: 430px;184 width: 140px;185 height: 140px;186 background: #7f616c;187 border-radius: 50%;188 box-shadow: 0 12px 24px rgba(0,0,0,0.4);189 display: flex;190 justify-content: center;191 align-items: center;192 }193 .fab svg path { stroke: #fff; }194 195 /* Bottom navigation */196 .bottom-nav {197 position: absolute;198 left: 0; right: 0; bottom: 0;199 height: 180px;200 background: #2a2226;201 border-top: 1px solid #3b3034;202 display: flex;203 align-items: center;204 justify-content: space-around;205 padding-bottom: 18px;206 }207 .nav-item {208 display: flex;209 flex-direction: column;210 align-items: center;211 gap: 10px;212 color: #c8bbc1;213 font-size: 26px;214 }215 .nav-item.active { color: #f3a9c3; }216 .nav-icon svg path { stroke: currentColor; }217</style>218</head>219<body>220<div id="render-target">221 222 <!-- App bar -->223 <div class="appbar">224 <div class="top-row">225 <div class="hamburger" aria-label="Menu">226 <svg width="48" height="36" viewBox="0 0 24 18" fill="none">227 <path d="M1 1H23M1 9H23M1 17H23" stroke-width="2" stroke-linecap="round"/>228 </svg>229 </div>230 <div class="search-pill">231 <svg class="search-icon" viewBox="0 0 24 24" fill="none">232 <path d="M10.5 18a7.5 7.5 0 1 1 5.3-12.8L22 12l-2 2-6.2-6.3" stroke="#bdaeb6" stroke-width="2" stroke-linecap="round"/>233 </svg>234 <span>Search in Drive</span>235 </div>236 <div class="profile">K</div>237 </div>238 239 <div class="tabs">240 <div class="tab active">My Drive</div>241 <div class="tab">Computers</div>242 </div>243 <div class="divider"></div>244 245 <div class="sort-row">246 <div class="sort-left">247 <span style="opacity:.9">Name</span>248 <svg width="20" height="20" viewBox="0 0 24 24" fill="none">249 <path d="M12 6l4 6H8l4-6z" stroke="#d8cfd4" stroke-width="2" fill="none"/>250 </svg>251 </div>252 <div class="view-toggle" aria-label="View">253 <svg width="36" height="36" viewBox="0 0 24 24" fill="none">254 <path d="M3 7h18M3 12h18M3 17h18" stroke-width="2" stroke-linecap="round"/>255 </svg>256 </div>257 </div>258 </div>259 260 <!-- Files grid -->261 <div class="content">262 <div class="file-grid">263 <!-- Row 1 -->264 <div class="file-card">265 <div class="preview folder">Folder Preview</div>266 <div class="file-meta">267 <div class="file-name">268 <span>Yoga Video</span>269 </div>270 <div class="menu-dots"><span></span></div>271 </div>272 </div>273 274 <div class="file-card">275 <div class="preview doc">Document Preview</div>276 <div class="file-meta">277 <div class="file-name">278 <div class="icon-doc"></div>279 <span>actuation_result.txt</span>280 </div>281 <div class="menu-dots"><span></span></div>282 </div>283 </div>284 285 <!-- Row 2 -->286 <div class="file-card">287 <div class="preview doc">Document Preview</div>288 <div class="file-meta">289 <div class="file-name">290 <div class="icon-doc"></div>291 <span>agents.txt</span>292 </div>293 <div class="menu-dots"><span></span></div>294 </div>295 </div>296 297 <div class="file-card">298 <div class="preview image">[IMG: Taco photo]</div>299 <div class="file-meta">300 <div class="file-name">301 <div class="icon-img"></div>302 <span>images (1).jpeg</span>303 </div>304 <div class="menu-dots"><span></span></div>305 </div>306 </div>307 308 <!-- Row 3 -->309 <div class="file-card">310 <div class="preview image">[IMG: Sushi plate]</div>311 <div class="file-meta">312 <div class="file-name">313 <div class="icon-img"></div>314 <span>Maki-zushi.jpg</span>315 </div>316 <div class="menu-dots"><span></span></div>317 </div>318 </div>319 320 <div class="file-card">321 <div class="preview doc">Document Preview</div>322 <div class="file-meta">323 <div class="file-name">324 <div class="icon-doc"></div>325 <span>os_info.txt</span>326 </div>327 <div class="menu-dots"><span></span></div>328 </div>329 </div>330 </div>331 </div>332 333 <!-- Floating Action Button -->334 <div class="fab" aria-label="Add">335 <svg width="64" height="64" viewBox="0 0 24 24" fill="none">336 <path d="M12 5v14M5 12h14" stroke-width="3" stroke-linecap="round"/>337 </svg>338 </div>339 340 <!-- Bottom Navigation -->341 <div class="bottom-nav">342 <div class="nav-item">343 <div class="nav-icon">344 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">345 <path d="M3 12l9-8 9 8v8H3v-8z" stroke-width="2" stroke-linejoin="round"/>346 </svg>347 </div>348 <div>Home</div>349 </div>350 <div class="nav-item">351 <div class="nav-icon">352 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">353 <path d="M12 3l2.5 6H21l-5 3.7L18.5 21 12 17.6 5.5 21 8 12.7 3 9h6.5L12 3z" stroke-width="2" stroke-linejoin="round"/>354 </svg>355 </div>356 <div>Starred</div>357 </div>358 <div class="nav-item">359 <div class="nav-icon">360 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">361 <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM2 22c1-4 5-6 10-6s9 2 10 6" stroke-width="2" stroke-linecap="round"/>362 </svg>363 </div>364 <div>Shared</div>365 </div>366 <div class="nav-item active">367 <div class="nav-icon">368 <svg width="44" height="44" viewBox="0 0 24 24" fill="none">369 <path d="M3 9l9-6 9 6v10H3V9z" stroke-width="2"/>370 <path d="M9 22V12h6v10" stroke-width="2"/>371 </svg>372 </div>373 <div>Files</div>374 </div>375 </div>376 377</div>378</body>379</html>