GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Drive UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width: 1440px;9 height: 3120px;10 position: relative;11 overflow: hidden;12 background: #0f1412; /* dark app background */13 color: #e7ebe7;14 }15 16 /* Status bar */17 .status-bar {18 position: absolute;19 top: 0;20 left: 0;21 width: 100%;22 height: 120px;23 padding: 0 48px;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #cfd6cf;28 font-size: 48px;29 letter-spacing: 1px;30 }31 .status-icons {32 display: flex;33 gap: 28px;34 align-items: center;35 }36 .icon-dot { width: 16px; height: 16px; background:#cfd6cf; border-radius:50%; opacity:.8; }37 .battery { width: 60px; height: 36px; border: 4px solid #cfd6cf; border-radius:6px; position: relative; }38 .battery::after { content:""; position:absolute; right:-14px; top:10px; width:10px; height:16px; background:#cfd6cf; border-radius:2px; }39 .battery-fill { position:absolute; left:6px; top:6px; height:24px; width:36px; background:#cfd6cf; }40 41 /* Top bar with search */42 .top-bar {43 position: absolute;44 top: 140px;45 left: 0;46 width: 100%;47 padding: 0 48px;48 display: flex;49 align-items: center;50 gap: 32px;51 }52 .hamburger {53 width: 96px; height: 96px; display:flex; align-items:center; justify-content:center;54 border-radius: 16px;55 background: transparent;56 }57 .search-box {58 flex: 1;59 height: 120px;60 background: #182018;61 border-radius: 60px;62 display: flex;63 align-items: center;64 padding: 0 48px;65 color: #c9d5ca;66 font-size: 48px;67 }68 .search-box .placeholder { opacity: .85; }69 .avatar {70 width: 104px; height: 104px; border-radius: 52px;71 background: #1e3328; border: 2px solid #284233;72 color: #9fd1a5; font-weight: bold; display:flex; align-items:center; justify-content:center;73 font-size: 52px;74 }75 76 /* Tabs */77 .tabs {78 position: absolute;79 top: 300px;80 left: 0;81 width: 100%;82 padding: 0 60px;83 display: flex;84 align-items: center;85 gap: 40px;86 }87 .tab {88 font-size: 56px;89 color: #a8b5aa;90 padding-bottom: 26px;91 }92 .tab.active {93 color: #bfe2c2;94 border-bottom: 6px solid #65a36f;95 }96 .list-toggle {97 margin-left: auto;98 width: 88px; height: 88px; display:flex; align-items:center; justify-content:center;99 }100 101 /* Grid of files */102 .file-grid {103 position: absolute;104 top: 420px;105 left: 0;106 width: 100%;107 padding: 0 60px 0 60px;108 display: grid;109 grid-template-columns: 1fr 1fr;110 gap: 48px 48px;111 }112 .tile {113 background: transparent;114 border-radius: 24px;115 }116 .thumb {117 height: 420px;118 background: #2b312b;119 border-radius: 28px;120 border: 1px solid #3a4339;121 display: flex; align-items: center; justify-content: center;122 color: #9aa59a; font-size: 42px; text-align:center;123 }124 .tile-footer {125 margin-top: 28px;126 display: flex; align-items: center;127 }128 .file-name {129 font-size: 56px; color: #e7ebe7;130 }131 .file-sub { font-size: 48px; color:#b6c1b7; margin-top: 8px; }132 .kebab {133 margin-left: auto;134 width: 60px; height: 60px; display:flex; align-items:center; justify-content:center;135 }136 .badge {137 display: inline-block;138 font-size: 40px;139 padding: 10px 18px;140 border-radius: 16px;141 margin-right: 16px;142 background: #8b2a2a;143 color: #ffd7d7;144 }145 .type-icon {146 width: 60px; height: 60px; display:inline-flex; align-items:center; justify-content:center;147 border-radius: 12px; margin-right: 16px;148 }149 .type-green { background:#1e3b22; color:#6bd17c; }150 .type-blue { background:#1a2e3f; color:#8bb8ff; }151 152 /* Bottom sheet actions */153 .bottom-sheet {154 position: absolute;155 bottom: 120px;156 left: 0;157 width: 100%;158 height: 920px;159 background: #162018;160 border-top-left-radius: 48px;161 border-top-right-radius: 48px;162 box-shadow: 0 -20px 40px rgba(0,0,0,0.5);163 }164 .actions-grid {165 position: absolute;166 bottom: 140px;167 left: 0;168 width: 100%;169 padding: 0 120px;170 display: grid;171 grid-template-columns: repeat(3, 1fr);172 gap: 140px 140px;173 }174 .action {175 display: flex;176 align-items: center;177 flex-direction: column;178 gap: 28px;179 }180 .action-circle {181 width: 176px; height: 176px;182 border-radius: 88px;183 border: 2px solid #3a4339;184 background: #19231b;185 display:flex; align-items:center; justify-content:center;186 }187 .action label {188 font-size: 46px;189 color: #dbe3dc;190 }191 /* Gesture bar */192 .gesture {193 position: absolute;194 bottom: 36px;195 left: 50%;196 transform: translateX(-50%);197 width: 560px;198 height: 20px;199 background: #e9ecea;200 border-radius: 12px;201 opacity: 0.85;202 }203 204 /* Simple inline icons styling */205 svg { fill: none; stroke: #cfd6cf; stroke-width: 8; }206 .light-stroke svg { stroke: #a7b3a8; }207 .green-stroke svg { stroke: #6bd17c; }208 .blue-stroke svg { stroke: #8bb8ff; }209 210</style>211</head>212<body>213<div id="render-target">214 215 <!-- Status Bar -->216 <div class="status-bar">217 <div>5:42</div>218 <div class="status-icons">219 <div class="icon-dot"></div>220 <div class="icon-dot"></div>221 <div class="icon-dot"></div>222 <div class="battery"><div class="battery-fill"></div></div>223 </div>224 </div>225 226 <!-- Top bar -->227 <div class="top-bar">228 <div class="hamburger">229 <svg width="70" height="70" viewBox="0 0 70 70">230 <path d="M10 18h50M10 35h50M10 52h50"/>231 </svg>232 </div>233 <div class="search-box">234 <svg width="60" height="60" viewBox="0 0 60 60" class="light-stroke" style="margin-right:24px;">235 <circle cx="26" cy="26" r="18"></circle>236 <path d="M41 41l14 14"></path>237 </svg>238 <span class="placeholder">Search in Drive</span>239 </div>240 <div class="avatar">C</div>241 </div>242 243 <!-- Tabs -->244 <div class="tabs">245 <div class="tab active">My Drive</div>246 <div class="tab">Computers</div>247 <div class="list-toggle">248 <svg width="70" height="70" viewBox="0 0 70 70">249 <path d="M12 18h46M12 35h46M12 52h46"/>250 </svg>251 </div>252 </div>253 254 <!-- File Grid -->255 <div class="file-grid">256 257 <!-- Tile 1: Folder -->258 <div class="tile">259 <div class="thumb">[IMG: Folder Thumbnail]</div>260 <div class="tile-footer">261 <div class="file-name">Xyz ltd</div>262 <div class="kebab">263 <svg width="42" height="42" viewBox="0 0 42 42">264 <circle cx="21" cy="8" r="4" />265 <circle cx="21" cy="21" r="4" />266 <circle cx="21" cy="34" r="4" />267 </svg>268 </div>269 </div>270 </div>271 272 <!-- Tile 2: PDF -->273 <div class="tile">274 <div class="thumb">[IMG: PDF Preview Page]</div>275 <div class="tile-footer" style="align-items: flex-start; flex-direction: column;">276 <div style="display:flex; align-items:center; width:100%;">277 <span class="badge">PDF</span>278 <div class="kebab" style="margin-left:auto;">279 <svg width="42" height="42" viewBox="0 0 42 42">280 <circle cx="21" cy="8" r="4" />281 <circle cx="21" cy="21" r="4" />282 <circle cx="21" cy="34" r="4" />283 </svg>284 </div>285 </div>286 <div class="file-name" style="margin-top: 8px;">08.24_dinner-veg (...)</div>287 </div>288 </div>289 290 <!-- Tile 3: Google Sheets -->291 <div class="tile">292 <div class="thumb">[IMG: Sheets Thumbnail]</div>293 <div class="tile-footer" style="align-items: flex-start; flex-direction: column;">294 <div style="display:flex; align-items:center; width:100%;">295 <div class="type-icon type-green">296 <svg width="42" height="42" viewBox="0 0 42 42" class="green-stroke">297 <path d="M21 8v26M8 21h26"/>298 </svg>299 </div>300 <div class="kebab" style="margin-left:auto;">301 <svg width="42" height="42" viewBox="0 0 42 42">302 <circle cx="21" cy="8" r="4" />303 <circle cx="21" cy="21" r="4" />304 <circle cx="21" cy="34" r="4" />305 </svg>306 </div>307 </div>308 <div class="file-name" style="margin-top: 8px;">ABC data sheet</div>309 </div>310 </div>311 312 <!-- Tile 4: Text file -->313 <div class="tile">314 <div class="thumb">[IMG: Text File Thumbnail]</div>315 <div class="tile-footer" style="align-items: flex-start; flex-direction: column;">316 <div style="display:flex; align-items:center; width:100%;">317 <div class="type-icon type-blue">318 <svg width="42" height="42" viewBox="0 0 42 42" class="blue-stroke">319 <path d="M10 8h22v26H10z"/>320 <path d="M15 16h12M15 22h12M15 28h12"/>321 </svg>322 </div>323 <div class="kebab" style="margin-left:auto;">324 <svg width="42" height="42" viewBox="0 0 42 42">325 <circle cx="21" cy="8" r="4" />326 <circle cx="21" cy="21" r="4" />327 <circle cx="21" cy="34" r="4" />328 </svg>329 </div>330 </div>331 <div class="file-name" style="margin-top: 8px;">agents.txt</div>332 </div>333 </div>334 335 <!-- Additional Tile (partial) -->336 <div class="tile">337 <div class="thumb">[IMG: Document Thumbnail]</div>338 <div class="tile-footer">339 <div class="file-name">Project brief</div>340 <div class="kebab">341 <svg width="42" height="42" viewBox="0 0 42 42">342 <circle cx="21" cy="8" r="4" />343 <circle cx="21" cy="21" r="4" />344 <circle cx="21" cy="34" r="4" />345 </svg>346 </div>347 </div>348 </div>349 350 <div class="tile">351 <div class="thumb">[IMG: Presentation Thumbnail]</div>352 <div class="tile-footer">353 <div class="file-name">Sales deck</div>354 <div class="kebab">355 <svg width="42" height="42" viewBox="0 0 42 42">356 <circle cx="21" cy="8" r="4" />357 <circle cx="21" cy="21" r="4" />358 <circle cx="21" cy="34" r="4" />359 </svg>360 </div>361 </div>362 </div>363 364 </div>365 366 <!-- Bottom Sheet -->367 <div class="bottom-sheet">368 <div class="actions-grid">369 370 <!-- Folder -->371 <div class="action">372 <div class="action-circle">373 <svg width="120" height="120" viewBox="0 0 120 120">374 <path d="M18 46h34l10 12h40v40H18z"/>375 </svg>376 </div>377 <label>Folder</label>378 </div>379 380 <!-- Upload -->381 <div class="action">382 <div class="action-circle">383 <svg width="120" height="120" viewBox="0 0 120 120">384 <path d="M60 22v58"/>385 <path d="M38 44l22-22 22 22"/>386 <path d="M24 96h72"/>387 </svg>388 </div>389 <label>Upload</label>390 </div>391 392 <!-- Scan -->393 <div class="action">394 <div class="action-circle">395 <svg width="120" height="120" viewBox="0 0 120 120">396 <path d="M26 34h20M74 34h20M26 86h20M74 86h20"/>397 <path d="M36 44h48v32H36z"/>398 <path d="M52 58h16"/>399 </svg>400 </div>401 <label>Scan</label>402 </div>403 404 <!-- Google Docs -->405 <div class="action">406 <div class="action-circle">407 <svg width="120" height="120" viewBox="0 0 120 120">408 <path d="M34 28h52v64H34z"/>409 <path d="M44 44h32M44 58h32M44 72h32"/>410 </svg>411 </div>412 <label>Google Docs</label>413 </div>414 415 <!-- Google Sheets -->416 <div class="action">417 <div class="action-circle">418 <svg width="120" height="120" viewBox="0 0 120 120" class="green-stroke">419 <path d="M60 30v60M30 60h60"/>420 </svg>421 </div>422 <label>Google Sheets</label>423 </div>424 425 <!-- Google Slides -->426 <div class="action">427 <div class="action-circle">428 <svg width="120" height="120" viewBox="0 0 120 120">429 <path d="M28 28h64v64H28z"/>430 <path d="M40 40h40v40H40z"/>431 </svg>432 </div>433 <label>Google Slides</label>434 </div>435 436 </div>437 </div>438 439 <!-- Gesture bar -->440 <div class="gesture"></div>441 442</div>443</body>444</html>