GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Mobile UI - Drive Dark</title>5<style>6 body { margin:0; padding:0; background:transparent; font-family: Arial, Helvetica, sans-serif; }7 #render-target {8 width:1080px; height:2400px; position:relative; overflow:hidden;9 background:#121212; color:#fff;10 }11 12 /* Status bar */13 .status-bar {14 position:absolute; top:0; left:0; width:100%; height:90px;15 color:#cfcfcf; font-size:36px; letter-spacing:0.5px;16 display:flex; align-items:center; justify-content:space-between;17 padding:0 36px;18 }19 .status-icons { display:flex; align-items:center; gap:24px; }20 .icon-small svg { width:42px; height:42px; fill:#cfcfcf; }21 22 /* Search area */23 .search-area {24 position:absolute; top:90px; left:0; width:100%; height:170px;25 display:flex; align-items:center; justify-content:center;26 }27 .search-bar {28 width:940px; height:120px; background:#1f2630; border-radius:60px;29 display:flex; align-items:center; justify-content:flex-start;30 padding:0 32px; box-sizing:border-box; color:#9fb0c2;31 }32 .hamburger { width:60px; height:60px; margin-right:24px; }33 .search-text { font-size:42px; color:#bcc7d3; }34 .avatar {35 position:absolute; right:36px; top:100px;36 width:110px; height:110px; border-radius:55px;37 background:#2f3b48; display:flex; align-items:center; justify-content:center;38 font-size:48px; color:#cfe0ea;39 }40 41 /* Tabs */42 .tabs {43 position:absolute; top:260px; left:40px; width:1000px; height:72px;44 display:flex; align-items:center; gap:40px; font-size:44px;45 }46 .tab-active { color:#bcd0ff; font-weight:bold; }47 .tab { color:#c7c7c7; }48 49 /* Grid area */50 .grid {51 position:absolute; top:360px; left:40px; right:40px; bottom:220px;52 display:grid; grid-template-columns: repeat(2, 1fr);53 grid-auto-rows: 420px; gap:40px;54 }55 .card {56 background:transparent; border-radius:24px; position:relative;57 }58 .preview {59 height:270px; border-radius:24px; background:#2b2b2b; 60 border:1px solid #3a3a3a; display:flex; align-items:center; justify-content:center;61 color:#bdbdbd; font-size:36px;62 }63 .row {64 margin-top:24px; display:flex; align-items:center; justify-content:space-between;65 }66 .file-meta {67 display:flex; align-items:center; gap:16px; color:#cfcfcf;68 }69 .file-icon {70 width:48px; height:48px; border-radius:12px; background:#5279ff;71 display:flex; align-items:center; justify-content:center; color:#fff; font-size:32px;72 }73 .file-icon.purple { background:#ad7ad4; }74 .file-icon.orange { background:#f0a531; }75 .file-icon.blue2 { background:#4a8ad8; }76 77 .title { font-size:40px; }78 .title-small { font-size:36px; color:#d9d9d9; }79 80 .dots { width:50px; height:50px; }81 .dots svg { width:100%; height:100%; fill:#cfcfcf; }82 83 /* Floating action button */84 .fab {85 position:absolute; right:44px; bottom:340px;86 width:140px; height:140px; border-radius:32px;87 background:#394559; display:flex; align-items:center; justify-content:center;88 }89 .fab svg { width:72px; height:72px; fill:#cfe0ea; }90 91 /* Bottom nav */92 .bottom-nav {93 position:absolute; left:0; right:0; bottom:0; height:200px;94 background:#1a1a1a; border-top:1px solid #2a2a2a;95 display:flex; align-items:center; justify-content:space-around;96 }97 .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#cfcfcf; font-size:36px; }98 .nav-item .nav-icon { width:64px; height:64px; }99 .nav-item .nav-icon svg { width:100%; height:100%; fill:#cfcfcf; }100 .nav-active {101 background:#2b3240; padding:22px 36px; border-radius:40px;102 }103</style>104</head>105<body>106<div id="render-target">107 108 <!-- Status Bar -->109 <div class="status-bar">110 <div>10:55</div>111 <div class="status-icons">112 <div class="icon-small">113 <!-- WiFi icon -->114 <svg viewBox="0 0 24 24">115 <path d="M12 18l-2 2 2 2 2-2-2-2zm-7-7c4-4 10-4 14 0l-2 2c-3-3-7-3-10 0l-2-2zm-3-3c6-6 16-6 22 0l-2 2c-5-5-13-5-18 0l-2-2z"/>116 </svg>117 </div>118 <div class="icon-small">119 <!-- Battery -->120 <svg viewBox="0 0 24 24">121 <path d="M16 6h2v2h2v8h-2v2h-2V6zM2 8h12v8H2V8z"/>122 </svg>123 </div>124 </div>125 </div>126 127 <!-- Search Area -->128 <div class="search-area">129 <div class="search-bar">130 <div class="hamburger">131 <svg viewBox="0 0 24 24">132 <path fill="#cfe0ea" d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/>133 </svg>134 </div>135 <div class="search-text">Search in Drive</div>136 </div>137 <div class="avatar">C</div>138 </div>139 140 <!-- Tabs -->141 <div class="tabs">142 <div class="tab-active">My Drive</div>143 <div class="tab">Computers</div>144 </div>145 146 <!-- Grid of items -->147 <div class="grid">148 <!-- Backup folder -->149 <div class="card">150 <div class="preview">151 [IMG: Folder Preview]152 </div>153 <div class="row">154 <div class="file-meta">155 <div class="file-icon blue2">▤</div>156 <div class="title">Backup</div>157 </div>158 <div class="dots">159 <svg viewBox="0 0 24 24">160 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>161 </svg>162 </div>163 </div>164 </div>165 166 <!-- BACKUP_REMINDER file -->167 <div class="card">168 <div class="preview">169 [IMG: File Placeholder]170 </div>171 <div class="row">172 <div class="file-meta">173 <div class="file-icon blue2">▤</div>174 <div class="title-small">BACKUP_REMINDER_M...</div>175 </div>176 <div class="dots">177 <svg viewBox="0 0 24 24">178 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>179 </svg>180 </div>181 </div>182 </div>183 184 <!-- Movies document -->185 <div class="card">186 <div class="preview">187 [IMG: Doc Preview]188 </div>189 <div class="row">190 <div class="file-meta">191 <div class="file-icon blue2">▤</div>192 <div class="title">Movies</div>193 </div>194 <div class="dots">195 <svg viewBox="0 0 24 24">196 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>197 </svg>198 </div>199 </div>200 </div>201 202 <!-- My Doc - form -->203 <div class="card">204 <div class="preview">205 [IMG: Form Preview]206 </div>207 <div class="row">208 <div class="file-meta">209 <div class="file-icon purple">▦</div>210 <div class="title">My Doc</div>211 </div>212 <div class="dots">213 <svg viewBox="0 0 24 24">214 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>215 </svg>216 </div>217 </div>218 </div>219 220 <!-- Recording 1 document -->221 <div class="card">222 <div class="preview">223 [IMG: Doc Preview]224 </div>225 <div class="row">226 <div class="file-meta">227 <div class="file-icon blue2">▤</div>228 <div class="title">Recording 1</div>229 </div>230 <div class="dots">231 <svg viewBox="0 0 24 24">232 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>233 </svg>234 </div>235 </div>236 </div>237 238 <!-- Untitled presentation -->239 <div class="card">240 <div class="preview">241 [IMG: Slides Preview]242 </div>243 <div class="row">244 <div class="file-meta">245 <div class="file-icon orange">▥</div>246 <div class="title">Untitled presentation</div>247 </div>248 <div class="dots">249 <svg viewBox="0 0 24 24">250 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>251 </svg>252 </div>253 </div>254 </div>255 256 <!-- Blank tile (placeholder) -->257 <div class="card">258 <div class="preview">259 [IMG: File Preview]260 </div>261 <div class="row">262 <div class="file-meta">263 <div class="file-icon blue2">▤</div>264 <div class="title">Untitled</div>265 </div>266 <div class="dots">267 <svg viewBox="0 0 24 24">268 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>269 </svg>270 </div>271 </div>272 </div>273 274 <!-- Spacer to resemble layout -->275 <div class="card">276 <div class="preview">277 [IMG: Placeholder]278 </div>279 <div class="row">280 <div class="file-meta">281 <div class="file-icon blue2">▤</div>282 <div class="title">Item</div>283 </div>284 <div class="dots">285 <svg viewBox="0 0 24 24">286 <circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/>287 </svg>288 </div>289 </div>290 </div>291 </div>292 293 <!-- Floating Action Button -->294 <div class="fab">295 <svg viewBox="0 0 24 24">296 <path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/>297 </svg>298 </div>299 300 <!-- Bottom Navigation -->301 <div class="bottom-nav">302 <div class="nav-item">303 <div class="nav-icon">304 <svg viewBox="0 0 24 24"><path d="M12 3l9 9h-3v9H6v-9H3l9-9z"/></svg>305 </div>306 <div>Home</div>307 </div>308 <div class="nav-item">309 <div class="nav-icon">310 <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>311 </div>312 <div>Starred</div>313 </div>314 <div class="nav-item">315 <div class="nav-icon">316 <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm8 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zM8 13c-2.33 0-7 1.17-7 3.5V19h7v-2.5c0-1.03.41-1.97 1.08-2.77C8.74 13.26 8.37 13 8 13z"/></svg>317 </div>318 <div>Shared</div>319 </div>320 <div class="nav-item nav-active">321 <div class="nav-icon">322 <svg viewBox="0 0 24 24"><path d="M8 6h13v3H8V6zm0 5h13v3H8v-3zm0 5h13v3H8v-3zM3 6h3v3H3V6zm0 5h3v3H3v-3zm0 5h3v3H3v-3z"/></svg>323 </div>324 <div>Files</div>325 </div>326 </div>327 328</div>329</body>330</html>