GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Drive UI Mock</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 position: relative;10 width: 1080px;11 height: 2400px;12 overflow: hidden;13 background: #111418;14 color: #e6e6e6;15 }16 17 /* Top status bar */18 .statusbar {19 height: 90px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #dcdcdc;25 font-size: 36px;26 }27 .status-icons {28 display: flex;29 align-items: center;30 gap: 26px;31 }32 .icon {33 width: 44px; height: 44px;34 }35 .wifi, .battery, .signal {36 filter: brightness(1.1);37 }38 39 /* Search bar */40 .search-area {41 padding: 26px 36px 10px 36px;42 }43 .searchbar {44 background: #272b31;45 border-radius: 60px;46 height: 120px;47 display: flex;48 align-items: center;49 padding: 0 28px;50 box-shadow: inset 0 0 0 2px #2f333a;51 }52 .searchbar .hamburger {53 width: 60px; height: 60px; margin-right: 24px;54 }55 .searchbar .placeholder {56 flex: 1;57 color: #bfc5cf;58 font-size: 40px;59 letter-spacing: 0.2px;60 }61 .searchbar .avatar {62 width: 96px; height: 96px;63 background: #2e3440;64 border-radius: 50%;65 display:flex; align-items:center; justify-content:center;66 color:#b9c7d8; font-weight:700; font-size:44px;67 }68 69 /* Tabs */70 .tabs {71 display:flex; align-items:center;72 gap: 60px;73 padding: 22px 36px 12px 36px;74 font-size: 44px;75 }76 .tab {77 color:#b8bec8;78 }79 .tab.active {80 color:#a9c7ff;81 position:relative;82 padding-bottom:14px;83 }84 .tab.active::after{85 content:"";86 position:absolute; left:0; bottom:0;87 width: 160px; height: 6px; background:#6ea3ff; border-radius:3px;88 }89 90 /* Sort row */91 .sort-row {92 display:flex; align-items:center; justify-content:space-between;93 padding: 12px 36px 18px 36px;94 font-size: 40px;95 color:#cdd3dc;96 }97 .sort-right {98 display:flex; align-items:center; gap:22px;99 }100 .divider {101 height:2px; background:#22262c; margin:0 36px;102 }103 104 /* Grid items */105 .grid {106 padding: 36px;107 display: grid;108 grid-template-columns: repeat(2, 1fr);109 gap: 46px 44px;110 }111 .item {112 width: 480px;113 }114 .thumb {115 width: 480px; height: 320px;116 background: #1f2329;117 border-radius: 28px;118 display:flex; align-items:center; justify-content:center;119 position: relative;120 box-shadow: 0 0 0 2px #232831 inset;121 }122 .thumb .preview {123 width: 360px; height: 220px; background:#2a2f36; border:1px solid #3a4048;124 display:flex; align-items:center; justify-content:center; color:#9aa2ad; font-size:32px;125 }126 .doc-badge, .folder-badge {127 position:absolute; top:22px; right:22px;128 width: 96px; height: 96px; border-radius: 18px;129 display:flex; align-items:center; justify-content:center;130 color:#e9edf3; font-size:30px; font-weight:700;131 }132 .doc-badge.blue { background:#4a79ff; }133 .doc-badge.purple { background:#b56cff; }134 .folder-badge { background:#6b7480; }135 136 .title-row {137 display:flex; align-items:center; justify-content:space-between;138 margin-top: 18px;139 }140 .title {141 font-size: 42px; color:#e8edf4;142 }143 .dots {144 width: 18px; height: 70px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px;145 }146 .dots span {147 width: 14px; height: 14px; background:#9aa2ad; border-radius:50%;148 }149 150 /* Floating Action Button */151 .fab {152 position:absolute; right:36px; bottom:370px;153 width: 140px; height: 140px; border-radius:36px;154 background:#2a2f36;155 box-shadow: 0 6px 20px rgba(0,0,0,0.6);156 display:flex; align-items:center; justify-content:center;157 }158 .fab .plus {159 width: 64px; height: 64px;160 }161 162 /* Bottom nav */163 .bottom-nav {164 position:absolute; left:0; bottom:0; width:100%; height: 200px;165 background:#161a20;166 border-top: 1px solid #222831;167 display:flex; align-items:center; justify-content:space-around;168 }169 .nav-item {170 display:flex; flex-direction:column; align-items:center; gap:16px; color:#a7afb8; font-size:36px;171 }172 .nav-item .nav-icon { width:64px; height:64px; }173 .nav-item.active {174 color:#e9eef6;175 }176 .active-pill {177 position:absolute; right:36px; bottom:84px;178 background:#2a2f36; width: 180px; height: 90px; border-radius:48px;179 display:flex; align-items:center; justify-content:center; gap:16px;180 color:#e9eef6; font-size:36px;181 box-shadow: 0 4px 14px rgba(0,0,0,0.5);182 }183 .active-pill .folder-icon { width:54px; height:54px; }184</style>185</head>186<body>187<div id="render-target">188 189 <!-- Status bar -->190 <div class="statusbar">191 <div>10:04</div>192 <div class="status-icons">193 <!-- small icons simplified -->194 <svg class="signal icon" viewBox="0 0 24 24">195 <rect x="2" y="14" width="3" height="8" fill="#cfd6e0"></rect>196 <rect x="7" y="10" width="3" height="12" fill="#cfd6e0"></rect>197 <rect x="12" y="6" width="3" height="16" fill="#cfd6e0"></rect>198 </svg>199 <svg class="wifi icon" viewBox="0 0 24 24">200 <path d="M2 9c6-6 14-6 20 0" stroke="#cfd6e0" stroke-width="2" fill="none"/>201 <path d="M6 13c4-4 8-4 12 0" stroke="#cfd6e0" stroke-width="2" fill="none"/>202 <circle cx="12" cy="17" r="2" fill="#cfd6e0"></circle>203 </svg>204 <svg class="battery icon" viewBox="0 0 28 18">205 <rect x="1" y="3" width="22" height="12" rx="2" ry="2" stroke="#cfd6e0" fill="none" stroke-width="2"/>206 <rect x="3" y="5" width="16" height="8" fill="#cfd6e0"/>207 <rect x="24" y="7" width="3" height="4" fill="#cfd6e0"/>208 </svg>209 </div>210 </div>211 212 <!-- Search bar -->213 <div class="search-area">214 <div class="searchbar">215 <svg class="hamburger" viewBox="0 0 24 24">216 <rect x="2" y="5" width="20" height="3" fill="#c7ccd4"></rect>217 <rect x="2" y="10.5" width="16" height="3" fill="#c7ccd4"></rect>218 <rect x="2" y="16" width="20" height="3" fill="#c7ccd4"></rect>219 </svg>220 <div class="placeholder">Search in Drive</div>221 <div class="avatar">C</div>222 </div>223 </div>224 225 <!-- Tabs -->226 <div class="tabs">227 <div class="tab active">My Drive</div>228 <div class="tab">Computers</div>229 </div>230 231 <!-- Sort row -->232 <div class="sort-row">233 <div>Name 234 <svg viewBox="0 0 24 24" width="28" height="28" style="vertical-align:middle; margin-left:8px;">235 <path d="M12 6l6 8H6z" fill="#cfd6e0"></path>236 </svg>237 </div>238 <div class="sort-right">239 <svg viewBox="0 0 24 24" width="36" height="36">240 <rect x="3" y="5" width="18" height="2" fill="#cfd6e0"></rect>241 <rect x="3" y="11" width="18" height="2" fill="#cfd6e0"></rect>242 <rect x="3" y="17" width="18" height="2" fill="#cfd6e0"></rect>243 </svg>244 </div>245 </div>246 <div class="divider"></div>247 248 <!-- Grid content -->249 <div class="grid">250 251 <!-- Item: Backup folder -->252 <div class="item">253 <div class="thumb">254 <div class="preview">[IMG: Folder Thumbnail]</div>255 <div class="folder-badge">📁</div>256 </div>257 <div class="title-row">258 <div class="title">Backup</div>259 <div class="dots"><span></span><span></span><span></span></div>260 </div>261 </div>262 263 <!-- Item: BACKUP_REMINDER_M... -->264 <div class="item">265 <div class="thumb">266 <div class="preview">[IMG: File Thumbnail]</div>267 <div class="folder-badge">🗎</div>268 </div>269 <div class="title-row">270 <div class="title">BACKUP_RE MINDER_M...</div>271 <div class="dots"><span></span><span></span><span></span></div>272 </div>273 </div>274 275 <!-- Item: Backup.txt -->276 <div class="item">277 <div class="thumb">278 <div class="preview">[IMG: Text Document]</div>279 <div class="doc-badge blue">DOC</div>280 </div>281 <div class="title-row">282 <div class="title">Backup.txt</div>283 <div class="dots"><span></span><span></span><span></span></div>284 </div>285 </div>286 287 <!-- Item: Grocery List -->288 <div class="item">289 <div class="thumb">290 <div class="preview">[IMG: Document Preview]</div>291 <div class="doc-badge blue">DOC</div>292 </div>293 <div class="title-row">294 <div class="title">Grocery List</div>295 <div class="dots"><span></span><span></span><span></span></div>296 </div>297 </div>298 299 <!-- Item: Movies -->300 <div class="item">301 <div class="thumb">302 <div class="preview">[IMG: Document]</div>303 <div class="doc-badge blue">DOC</div>304 </div>305 <div class="title-row">306 <div class="title">Movies</div>307 <div class="dots"><span></span><span></span><span></span></div>308 </div>309 </div>310 311 <!-- Item: My Doc -->312 <div class="item">313 <div class="thumb">314 <div class="preview">[IMG: Form/Doc]</div>315 <div class="doc-badge purple">FORM</div>316 </div>317 <div class="title-row">318 <div class="title">My Doc</div>319 <div class="dots"><span></span><span></span><span></span></div>320 </div>321 </div>322 323 </div>324 325 <!-- Floating action button -->326 <div class="fab">327 <svg class="plus" viewBox="0 0 24 24">328 <rect x="10" y="4" width="4" height="16" fill="#cfd6e0"></rect>329 <rect x="4" y="10" width="16" height="4" fill="#cfd6e0"></rect>330 </svg>331 </div>332 333 <!-- Active pill (Files) -->334 <div class="active-pill">335 <svg class="folder-icon" viewBox="0 0 24 24">336 <path d="M3 7h6l2 3h10v10H3z" fill="#cfd6e0"></path>337 </svg>338 <span>Files</span>339 </div>340 341 <!-- Bottom nav -->342 <div class="bottom-nav">343 <div class="nav-item">344 <svg class="nav-icon" viewBox="0 0 24 24">345 <path d="M3 11l9-7 9 7v9H14v-6H10v6H3z" fill="#a7afb8"></path>346 </svg>347 <div>Home</div>348 </div>349 <div class="nav-item">350 <svg class="nav-icon" viewBox="0 0 24 24">351 <polygon points="12,2 14,9 22,9 16,13 18,20 12,16 6,20 8,13 2,9 10,9" fill="#a7afb8"></polygon>352 </svg>353 <div>Starred</div>354 </div>355 <div class="nav-item">356 <svg class="nav-icon" viewBox="0 0 24 24">357 <circle cx="7" cy="8" r="4" fill="#a7afb8"></circle>358 <circle cx="17" cy="8" r="4" fill="#a7afb8"></circle>359 <rect x="3" y="15" width="18" height="6" fill="#a7afb8"></rect>360 </svg>361 <div>Shared</div>362 </div>363 <div class="nav-item active">364 <svg class="nav-icon" viewBox="0 0 24 24">365 <path d="M3 7h6l2 3h10v10H3z" fill="#e9eef6"></path>366 </svg>367 <div>Files</div>368 </div>369 </div>370 371</div>372</body>373</html>