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 Dark UI Mock</title>7<style>8 :root{9 --bg:#1f181b;10 --bg-elev:#2a2125;11 --bg-elev-2:#342930;12 --text:#f5f1f2;13 --muted:#b9aeb3;14 --accent:#f48fb1;15 --chip:#4a3941;16 }17 body{ margin:0; padding:0; background:transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }18 #render-target{19 width:1080px; height:2400px; position:relative; overflow:hidden;20 background:var(--bg); color:var(--text);21 }22 23 /* Status bar */24 .status-bar{25 height:88px; padding:0 36px;26 display:flex; align-items:center; justify-content:space-between;27 font-weight:600; font-size:42px; color:var(--text);28 }29 .status-icons{ display:flex; align-items:center; gap:20px; }30 .ic-dot{ width:14px; height:14px; background:#d9d3d6; border-radius:50%; opacity:.9; }31 .ic-battery{ width:46px; height:22px; border:3px solid #d9d3d6; border-radius:6px; position:relative; }32 .ic-battery::after{ content:""; position:absolute; right:-8px; top:5px; width:6px; height:10px; background:#d9d3d6; border-radius:2px; }33 .ic-battery .lvl{ position:absolute; top:2px; left:2px; height:14px; width:26px; background:#d9d3d6; border-radius:3px; }34 35 /* Search/App bar */36 .top-row{ padding:18px 28px 10px; display:flex; align-items:center; gap:18px; }37 .btn-icon{38 width:72px; height:72px; border-radius:18px; background:transparent;39 display:flex; align-items:center; justify-content:center;40 }41 .btn-icon svg{ width:44px; height:44px; stroke:var(--text); }42 .search-pill{43 flex:1; height:84px; border-radius:42px; background:var(--bg-elev);44 display:flex; align-items:center; padding:0 28px; color:var(--muted); font-size:36px;45 }46 .avatar{47 width:72px; height:72px; border-radius:50%;48 background:#2e8bd4; color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:36px;49 }50 51 /* Tabs */52 .tabs{ display:flex; gap:46px; padding:12px 32px 0; font-size:36px; }53 .tab{ color:var(--muted); padding:18px 8px; position:relative; }54 .tab.active{ color:var(--accent); font-weight:600; }55 .tab.active::after{56 content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background:var(--accent); border-radius:3px;57 }58 .divider{ height:2px; background:#3a2f34; margin:10px 0 0; }59 60 /* List header */61 .list-header{62 padding:28px 32px 10px; display:flex; align-items:center; justify-content:space-between; color:var(--muted);63 font-size:32px;64 }65 .hdr-left{ display:flex; align-items:center; gap:10px; }66 .hdr-right svg{ width:42px; height:42px; fill:var(--muted); }67 68 /* Items */69 .list{ padding:8px 0 200px; }70 .item{71 display:flex; align-items:center; justify-content:space-between;72 padding:20px 24px; gap:20px;73 }74 .left{ display:flex; align-items:center; gap:26px; min-width:0; }75 .icon-file, .icon-folder, .thumb{76 width:74px; height:74px; border-radius:12px; display:flex; align-items:center; justify-content:center;77 }78 .icon-folder{ background:#5a414a; }79 .icon-file{ background:#49639b; }80 .thumb{81 background:#E0E0E0; border:1px solid #BDBDBD; color:#757575; font-size:22px; text-align:center; padding:6px;82 }83 .file-info{ min-width:0; }84 .name{ font-size:36px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }85 .meta{ font-size:28px; color:var(--muted); margin-top:6px; }86 .chip{ display:inline-flex; align-items:center; gap:10px; padding:2px 10px; font-size:26px; color:var(--text); background:var(--chip); border-radius:10px; margin-left:10px; }87 .menu-dots{ width:20px; height:54px; display:flex; align-items:center; justify-content:center; }88 .menu-dots svg{ width:10px; height:40px; fill:var(--muted); }89 90 /* FAB */91 .fab{92 position:absolute; right:38px; bottom:290px; width:120px; height:120px; border-radius:60px;93 background:#6a4d57; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.4);94 }95 .fab svg{ width:62px; height:62px; stroke:#f0dbe3; }96 97 /* Snackbar */98 .snackbar{99 position:absolute; left:28px; right:28px; bottom:220px; background:var(--bg-elev);100 color:var(--text); border-radius:18px; padding:28px 26px; display:flex; align-items:center; justify-content:space-between; font-size:34px; box-shadow:0 4px 18px rgba(0,0,0,.35);101 }102 .snackbar .action{ color:var(--accent); font-weight:700; }103 104 /* Bottom nav */105 .bottom-nav{106 position:absolute; left:0; right:0; bottom:0; height:160px; background:var(--bg-elev);107 border-top:2px solid #3a2f34; display:flex; align-items:center; justify-content:space-around;108 }109 .nav-item{ display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--muted); font-size:28px; }110 .nav-item .ico{ width:56px; height:56px; border-radius:18px; display:flex; align-items:center; justify-content:center; }111 .nav-item.active{ color:var(--text); }112 .nav-item.active .ico{ background:#6a4d57; }113 .nav-item svg{ width:38px; height:38px; fill:currentColor; }114 115 /* gesture bar */116 .gesture{ position:absolute; left:50%; transform:translateX(-50%); bottom:10px; width:280px; height:10px; border-radius:6px; background:#6b5d62; opacity:.8; }117</style>118</head>119<body>120<div id="render-target">121 122 <!-- Status bar -->123 <div class="status-bar">124 <div>10:32</div>125 <div class="status-icons">126 <div class="ic-dot"></div>127 <div class="ic-dot"></div>128 <div class="ic-dot"></div>129 <div class="ic-battery"><div class="lvl"></div></div>130 </div>131 </div>132 133 <!-- Search/App bar -->134 <div class="top-row">135 <div class="btn-icon" aria-label="Menu">136 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">137 <path d="M3 6h18M3 12h18M3 18h18"/>138 </svg>139 </div>140 <div class="search-pill">Search in Drive</div>141 <div class="avatar">K</div>142 </div>143 144 <!-- Tabs -->145 <div class="tabs">146 <div class="tab active">My Drive</div>147 <div class="tab">Computers</div>148 </div>149 <div class="divider"></div>150 151 <!-- List header -->152 <div class="list-header">153 <div class="hdr-left">154 <span>Name</span>155 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">156 <path d="M12 7l-5 5h10z" fill="currentColor"/>157 </svg>158 </div>159 <div class="hdr-right" aria-label="Grid view">160 <svg viewBox="0 0 24 24">161 <path d="M3 3h7v7H3V3zm0 11h7v7H3v-7zm11-11h7v7h-7V3zm0 11h7v7h-7v-7z"/>162 </svg>163 </div>164 </div>165 166 <!-- List -->167 <div class="list">168 169 <div class="item">170 <div class="left">171 <div class="icon-folder">172 <svg viewBox="0 0 24 24" width="36" height="36" fill="#f0dbe3">173 <path d="M10 4l2 2h8a2 2 0 012 2v9a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h6z" />174 </svg>175 </div>176 <div class="file-info">177 <div class="name">Yoga video</div>178 <div class="meta">Modified 10:02 PM</div>179 </div>180 </div>181 <div class="menu-dots">182 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>183 </div>184 </div>185 186 <div class="item">187 <div class="left">188 <div class="icon-file">189 <svg viewBox="0 0 24 24" width="34" height="34" fill="#e6edf8">190 <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12V8l-4-6zM14 2v6h6"/>191 </svg>192 </div>193 <div class="file-info">194 <div class="name">actuation_result.txt</div>195 <div class="meta">Modified 5:11 PM</div>196 </div>197 </div>198 <div class="menu-dots">199 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>200 </div>201 </div>202 203 <div class="item">204 <div class="left">205 <div class="icon-file">206 <svg viewBox="0 0 24 24" width="34" height="34" fill="#e6edf8">207 <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12V8l-4-6zM14 2v6h6"/>208 </svg>209 </div>210 <div class="file-info">211 <div class="name">agents.txt</div>212 <div class="meta">Modified 5:11 PM</div>213 </div>214 </div>215 <div class="menu-dots">216 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>217 </div>218 </div>219 220 <div class="item">221 <div class="left">222 <div class="icon-file">223 <svg viewBox="0 0 24 24" width="34" height="34" fill="#e6edf8">224 <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12V8l-4-6zM14 2v6h6"/>225 </svg>226 </div>227 <div class="file-info">228 <div class="name">agents.txt <span class="chip">229 <svg width="20" height="20" viewBox="0 0 24 24" fill="#f3d8e2"><path d="M12 4v7H5l7 9V13h7l-7-9z"/></svg>Shortcut</span></div>230 <div class="meta">—</div>231 </div>232 </div>233 <div class="menu-dots">234 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>235 </div>236 </div>237 238 <div class="item">239 <div class="left">240 <div class="thumb">[IMG: Taco photo thumbnail]</div>241 <div class="file-info">242 <div class="name">images (1).jpeg</div>243 <div class="meta">Modified 5:11 PM</div>244 </div>245 </div>246 <div class="menu-dots">247 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>248 </div>249 </div>250 251 <div class="item">252 <div class="left">253 <div class="thumb">[IMG: Sushi photo thumbnail]</div>254 <div class="file-info">255 <div class="name">Maki-zushi.jpg</div>256 <div class="meta">Modified 5:11 PM</div>257 </div>258 </div>259 <div class="menu-dots">260 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>261 </div>262 </div>263 264 <div class="item">265 <div class="left">266 <div class="icon-file">267 <svg viewBox="0 0 24 24" width="34" height="34" fill="#e6edf8">268 <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12V8l-4-6zM14 2v6h6"/>269 </svg>270 </div>271 <div class="file-info">272 <div class="name">os_info.txt</div>273 <div class="meta">Modified 5:11 PM</div>274 </div>275 </div>276 <div class="menu-dots">277 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>278 </div>279 </div>280 281 <div class="item">282 <div class="left">283 <div class="icon-file" style="background:#6b4551;">284 <svg viewBox="0 0 24 24" width="34" height="34" fill="#f2dbe3">285 <path d="M4 5h10l2 3h4v11a2 2 0 01-2 2H4z"/>286 </svg>287 </div>288 <div class="file-info">289 <div class="name">Outdoor yoga.mp4</div>290 <div class="meta">—</div>291 </div>292 </div>293 <div class="menu-dots">294 <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>295 </div>296 </div>297 298 </div>299 300 <!-- FAB -->301 <div class="fab" aria-label="Add">302 <svg viewBox="0 0 24 24" fill="none" stroke-width="2">303 <path d="M12 5v14M5 12h14" stroke="currentColor"/>304 </svg>305 </div>306 307 <!-- Snackbar -->308 <div class="snackbar">309 <div>Shortcut added to "My Drive"</div>310 <div class="action">Undo</div>311 </div>312 313 <!-- Bottom navigation -->314 <div class="bottom-nav">315 <div class="nav-item">316 <div class="ico">317 <svg viewBox="0 0 24 24"><path d="M12 3l9 8h-3v9H6v-9H3z"/></svg>318 </div>319 <div>Home</div>320 </div>321 <div class="nav-item">322 <div class="ico">323 <svg viewBox="0 0 24 24"><path d="M12 17.3L6.2 21l1.6-6.8L2 9.2l7-0.6L12 2l3 6.6 7 .6-5.8 5 1.6 6.8z"/></svg>324 </div>325 <div>Starred</div>326 </div>327 <div class="nav-item">328 <div class="ico">329 <svg viewBox="0 0 24 24"><path d="M16 11c1.7 0 3 1.3 3 3v5h-6v-5c0-1.7 1.3-3 3-3zM8 12c1.7 0 3 1.3 3 3v4H2v-4c0-1.7 1.3-3 3-3h3z"/></svg>330 </div>331 <div>Shared</div>332 </div>333 <div class="nav-item active">334 <div class="ico">335 <svg viewBox="0 0 24 24"><path d="M10 4l2 2h8v14H4V4z"/></svg>336 </div>337 <div>Files</div>338 </div>339 </div>340 341 <div class="gesture"></div>342</div>343</body>344</html>