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>Mobile UI Mock - Drive Dark</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #121212;15 color: #EDEDED;16 }17 18 /* Status bar */19 .status-bar {20 height: 88px;21 padding: 0 32px;22 display: flex;23 align-items: center;24 justify-content: space-between;25 color: #EDEDED;26 font-size: 34px;27 letter-spacing: 0.5px;28 }29 .status-right {30 display: flex;31 align-items: center;32 gap: 26px;33 }34 .icon {35 width: 38px;36 height: 38px;37 fill: #EDEDED;38 }39 40 /* Search area */41 .search-area {42 padding: 12px 24px 6px;43 }44 .search-row {45 display: flex;46 align-items: center;47 gap: 18px;48 }49 .search-box {50 flex: 1;51 height: 86px;52 background: #2A2A2A;53 border-radius: 44px;54 display: flex;55 align-items: center;56 padding: 0 28px;57 color: #BDBDBD;58 font-size: 36px;59 }60 .search-box .placeholder {61 margin-left: 18px;62 }63 .avatar {64 width: 72px;65 height: 72px;66 border-radius: 50%;67 background: #5C6BC0;68 color: #FFF;69 display: flex;70 align-items: center;71 justify-content: center;72 font-weight: bold;73 font-size: 38px;74 }75 76 /* Tabs */77 .tabs {78 display: flex;79 gap: 36px;80 padding: 18px 32px 0;81 font-size: 34px;82 color: #CCCCCC;83 }84 .tab {85 padding: 18px 10px;86 position: relative;87 }88 .tab.active {89 color: #FFFFFF;90 }91 .tab.active::after {92 content: "";93 position: absolute;94 left: 14px;95 right: 14px;96 bottom: -6px;97 height: 6px;98 background: #FFFFFF;99 border-radius: 3px;100 }101 102 /* Sort header */103 .sort-row {104 margin-top: 26px;105 padding: 0 32px;106 display: flex;107 align-items: center;108 justify-content: space-between;109 color: #CFCFCF;110 font-size: 32px;111 }112 .sort-left {113 display: flex;114 align-items: center;115 gap: 10px;116 }117 .view-toggle {118 width: 64px; height: 64px;119 border-radius: 10px;120 display: flex; align-items: center; justify-content: center;121 }122 123 /* Grid */124 .grid {125 padding: 28px 24px 0;126 display: grid;127 grid-template-columns: 1fr 1fr;128 gap: 36px 36px;129 }130 .tile {131 background: #1E1E1E;132 border-radius: 24px;133 padding: 18px;134 position: relative;135 }136 .preview {137 height: 240px;138 border-radius: 18px;139 background: #2C2C2C;140 display: flex; align-items: center; justify-content: center;141 color: #9E9E9E;142 border: 1px solid #3A3A3A;143 font-size: 30px;144 text-align: center;145 padding: 8px;146 }147 .tile .title {148 margin-top: 20px;149 color: #EDEDED;150 font-size: 34px;151 line-height: 1.2;152 }153 .tile .doc-icon {154 position: absolute;155 left: 28px;156 bottom: 26px;157 width: 42px; height: 56px;158 background: #7BA6FF;159 border-radius: 6px;160 }161 .tile .menu {162 position: absolute;163 right: 18px;164 bottom: 26px;165 width: 48px; height: 48px;166 display: flex; align-items: center; justify-content: center;167 }168 169 /* Floating action button */170 .fab {171 position: absolute;172 right: 36px;173 bottom: 248px;174 width: 120px;175 height: 120px;176 border-radius: 28px;177 background: #3A3A3A;178 box-shadow: 0 10px 24px rgba(0,0,0,0.5);179 display: flex; align-items: center; justify-content: center;180 }181 .fab .plus {182 width: 64px; height: 64px;183 background: #6B6B6B;184 border-radius: 50%;185 display: flex; align-items: center; justify-content: center;186 color: #FFFFFF;187 font-size: 56px;188 font-weight: 600;189 }190 191 /* Bottom navigation */192 .bottom-nav {193 position: absolute;194 left: 0; right: 0; bottom: 96px;195 height: 160px;196 background: #1B1B1B;197 display: grid;198 grid-template-columns: repeat(4, 1fr);199 align-items: center;200 padding: 0 12px;201 }202 .nav-item {203 color: #BEBEBE;204 display: flex;205 flex-direction: column;206 align-items: center;207 gap: 12px;208 font-size: 28px;209 }210 .nav-item .nav-icon {211 width: 56px; height: 56px; fill: #BEBEBE;212 }213 .nav-item.active {214 color: #FFFFFF;215 }216 .nav-item.active .chip {217 background: #2F2F2F;218 border-radius: 28px;219 padding: 10px 20px;220 display: flex; align-items: center; gap: 12px;221 }222 .nav-item.active .nav-icon { fill: #FFFFFF; }223 224 /* Gesture bar */225 .gesture {226 position: absolute;227 left: 50%;228 transform: translateX(-50%);229 bottom: 28px;230 width: 320px;231 height: 12px;232 background: #E0E0E0;233 opacity: 0.7;234 border-radius: 6px;235 }236</style>237</head>238<body>239<div id="render-target">240 241 <!-- Status bar -->242 <div class="status-bar">243 <div>1:05</div>244 <div class="status-right">245 <svg class="icon" viewBox="0 0 24 24"><path d="M6 19h12v2H6z"/></svg>246 <svg class="icon" viewBox="0 0 24 24"><path d="M11 2h2v9h-2zM7 6h2v5H7zM15 4h2v7h-2z"/></svg>247 <svg class="icon" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>248 <div style="font-size:30px;">80%</div>249 </div>250 </div>251 252 <!-- Search -->253 <div class="search-area">254 <div class="search-row">255 <div class="search-box">256 <svg width="44" height="44" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>257 <div class="placeholder">Search in Drive</div>258 </div>259 <div class="avatar">C</div>260 </div>261 </div>262 263 <!-- Tabs -->264 <div class="tabs">265 <div class="tab active">My Drive</div>266 <div class="tab">Computers</div>267 </div>268 269 <!-- Sort header -->270 <div class="sort-row">271 <div class="sort-left">272 <span style="color:#EDEDED">Name</span>273 <svg width="30" height="30" viewBox="0 0 24 24" fill="#EDEDED"><path d="M7 14l5-5 5 5H7z"/></svg>274 </div>275 <div class="view-toggle">276 <svg width="48" height="48" viewBox="0 0 24 24" fill="#CFCFCF"><path d="M4 10h16v2H4zm0-5h16v2H4zm0 10h16v2H4z"/></svg>277 </div>278 </div>279 280 <!-- Grid content -->281 <div class="grid">282 <!-- Tile 1 -->283 <div class="tile">284 <div class="preview">[IMG: Folder Thumbnail]</div>285 <div class="title">Private File</div>286 <div class="doc-icon"></div>287 <div class="menu">288 <svg width="36" height="36" viewBox="0 0 24 24" fill="#CCCCCC"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>289 </div>290 </div>291 292 <!-- Tile 2 -->293 <div class="tile">294 <div class="preview">[IMG: File Preview]</div>295 <div class="title">BACKUP_RE MINDER_M...</div>296 <div class="doc-icon"></div>297 <div class="menu">298 <svg width="36" height="36" viewBox="0 0 24 24" fill="#CCCCCC"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>299 </div>300 </div>301 302 <!-- Tile 3 -->303 <div class="tile">304 <div class="preview">[IMG: File Preview]</div>305 <div class="title">Copy of<br>Tools list</div>306 <div class="doc-icon"></div>307 <div class="menu">308 <svg width="36" height="36" viewBox="0 0 24 24" fill="#CCCCCC"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>309 </div>310 </div>311 312 <!-- Tile 4 -->313 <div class="tile">314 <div class="preview">[IMG: File Preview]</div>315 <div class="title">diy<br>projects.txt</div>316 <div class="doc-icon"></div>317 <div class="menu">318 <svg width="36" height="36" viewBox="0 0 24 24" fill="#CCCCCC"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>319 </div>320 </div>321 322 <!-- Tile 5 -->323 <div class="tile">324 <div class="preview">[IMG: File Preview]</div>325 <div class="title">Tools list</div>326 <div class="doc-icon"></div>327 <div class="menu">328 <svg width="36" height="36" viewBox="0 0 24 24" fill="#CCCCCC"><circle cx="5" cy="12" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="19" cy="12" r="2"/></svg>329 </div>330 </div>331 332 <!-- Spacer to mimic grid height -->333 <div class="tile" style="visibility:hidden;"></div>334 </div>335 336 <!-- Floating action button -->337 <div class="fab">338 <div class="plus">+</div>339 </div>340 341 <!-- Bottom navigation -->342 <div class="bottom-nav">343 <div class="nav-item">344 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>345 <div>Home</div>346 </div>347 <div class="nav-item">348 <svg class="nav-icon" 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>349 <div>Starred</div>350 </div>351 <div class="nav-item">352 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V20h14v-3.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V20h6v-3.5c0-2.33-4.67-3.5-7-3.5z"/></svg>353 <div>Shared</div>354 </div>355 <div class="nav-item active">356 <div class="chip">357 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h6V4zm10 0h-8v16h8c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2z"/></svg>358 <div>Files</div>359 </div>360 </div>361 </div>362 363 <!-- Gesture bar -->364 <div class="gesture"></div>365</div>366</body>367</html>