GD-ML/AndroidCode
13.4k
1<html>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: Roboto, Arial, sans-serif; }7 #render-target {8 width:1080px; height:2400px;9 position:relative; overflow:hidden;10 background:#121212; color:#EDEDED;11 }12 13 /* Top status bar */14 .statusbar {15 position:absolute; top:0; left:0; right:0;16 height:90px; padding:20px 30px;17 display:flex; align-items:center; justify-content:flex-start;18 color:#EDEDED; font-weight:600; letter-spacing:0.5px;19 font-size:36px;20 }21 .status-icons { margin-left:auto; display:flex; align-items:center; gap:24px; }22 .icon { width:36px; height:36px; }23 .wifi svg, .battery svg, .cloud svg { fill:#EDEDED; }24 /* Search bar */25 .search-row { position:absolute; top:96px; left:30px; right:30px; }26 .search-bar {27 height:112px; background:#1E1E1E;28 border-radius:56px; display:flex; align-items:center;29 padding:0 28px; box-shadow:0 0 0 1px #2A2A2A inset;30 }31 .hamburger { width:60px; height:60px; display:flex; align-items:center; justify-content:center; margin-right:18px; }32 .search-text { color:#A9A9A9; font-size:42px; flex:1; }33 .avatar {34 width:88px; height:88px; border-radius:44px;35 background:#2E3640; display:flex; align-items:center; justify-content:center;36 color:#CFE0FF; font-weight:700; font-size:42px;37 }38 39 /* Tabs */40 .tabs { position:absolute; top:230px; left:30px; right:30px; height:80px; display:flex; align-items:flex-end; gap:38px; }41 .tab { font-size:44px; color:#9AA6B2; padding-bottom:16px; }42 .tab.active { color:#8AB4F8; border-bottom:6px solid #8AB4F8; }43 .tab.spacer { margin-left:auto; }44 45 /* Grid of items */46 .grid { position:absolute; top:330px; left:20px; right:20px; bottom:350px; overflow:hidden; }47 .items { display:flex; flex-wrap:wrap; gap:34px 34px; padding:10px 10px; }48 .tile {49 width:480px; background:transparent;50 }51 .preview {52 width:480px; height:300px; background:#1B1B1B; border-radius:24px;53 display:flex; align-items:center; justify-content:center; position:relative;54 box-shadow:0 0 0 1px #2A2A2A inset;55 }56 .preview .mini {57 width:360px; height:220px; background:#E0E0E0; border:1px solid #BDBDBD;58 border-radius:12px; color:#757575; display:flex; align-items:center; justify-content:center; font-size:36px;59 }60 .folder-shape {61 width:300px; height:180px; background:#BFC5D1; border-radius:18px; position:relative;62 }63 .folder-shape::before {64 content:""; position:absolute; left:0; top:-40px; width:160px; height:70px; background:#BFC5D1; border-radius:18px 18px 0 0;65 }66 .ellipsis { position:absolute; right:18px; bottom:-18px; color:#A9A9A9; font-size:54px; }67 .label-row {68 display:flex; align-items:center; justify-content:space-between; margin-top:16px;69 }70 .item-name { font-size:44px; color:#FFFFFF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:380px; }71 .doc-icon, .list-icon {72 width:56px; height:56px; border-radius:8px; display:flex; align-items:center; justify-content:center;73 background:#4F6FF0; margin-right:12px;74 }75 .list-icon { background:#5EA4FF; }76 .dot-menu { color:#A9A9A9; font-size:54px; }77 78 /* Floating Action Button */79 .fab {80 position:absolute; right:42px; bottom:520px;81 width:148px; height:148px; border-radius:74px; background:#2F3A4A;82 display:flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,0.5);83 }84 .fab svg { width:72px; height:72px; fill:#8AB4F8; }85 86 /* Snackbar */87 .snackbar {88 position:absolute; left:30px; right:30px; bottom:410px;89 background:#2A2A2A; border-radius:20px; height:120px; display:flex; align-items:center; justify-content:space-between;90 padding:0 30px; color:#EDEDED; font-size:44px; box-shadow:0 0 0 1px #3A3A3A inset;91 }92 .undo { color:#8AB4F8; font-weight:600; }93 94 /* Bottom navigation */95 .bottom-nav {96 position:absolute; left:0; right:0; bottom:0; height:190px; background:#1A1A1A;97 display:flex; align-items:center; justify-content:space-around; box-shadow:0 -1px 0 #2A2A2A inset;98 }99 .nav-item { display:flex; flex-direction:column; align-items:center; gap:12px; color:#B9B9B9; font-size:36px; }100 .nav-item .bubble {101 width:120px; height:90px; background:#2F3A4A; border-radius:40px; display:flex; align-items:center; justify-content:center;102 }103 .nav-icon {104 width:44px; height:44px;105 }106 .active { color:#FFFFFF; }107 .bubble svg { fill:#8AB4F8; }108 .nav-item svg { fill:#B9B9B9; }109</style>110</head>111<body>112<div id="render-target">113 114 <!-- Status bar -->115 <div class="statusbar">116 10:08117 <div class="status-icons">118 <div class="icon cloud">119 <svg viewBox="0 0 24 24">120 <path d="M6 14a4 4 0 0 1 3.8-3.99A5 5 0 0 1 18 8a4 4 0 1 1 0 8H7.5A1.5 1.5 0 0 1 6 14z"/>121 </svg>122 </div>123 <div class="icon wifi">124 <svg viewBox="0 0 24 24">125 <path d="M2 8c4.5-4 15.5-4 20 0l-2 2c-3.5-3-12.5-3-16 0L2 8zm4 4c3-2.5 9-2.5 12 0l-2 2c-2-1.5-6-1.5-8 0l-2-2zm6 6 3-3-3 3-3-3 3 3z"/>126 </svg>127 </div>128 <div class="icon battery">129 <svg viewBox="0 0 24 24">130 <rect x="2" y="6" width="18" height="12" rx="2"></rect>131 <rect x="21" y="10" width="2" height="4"></rect>132 </svg>133 </div>134 </div>135 </div>136 137 <!-- Search bar -->138 <div class="search-row">139 <div class="search-bar">140 <div class="hamburger">141 <svg class="icon" viewBox="0 0 24 24">142 <path fill="#EDEDED" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>143 </svg>144 </div>145 <div class="search-text">Search in Drive</div>146 <div class="avatar">C</div>147 </div>148 </div>149 150 <!-- Tabs -->151 <div class="tabs">152 <div class="tab active">My Drive</div>153 <div class="tab spacer"></div>154 <div class="tab">Computers</div>155 </div>156 157 <!-- Grid -->158 <div class="grid">159 <div class="items">160 161 <!-- Backup folder -->162 <div class="tile">163 <div class="preview">164 <div class="folder-shape"></div>165 <div class="ellipsis">⋮</div>166 </div>167 <div class="label-row">168 <div style="display:flex; align-items:center;">169 <div class="doc-icon">170 <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15H6z"/></svg>171 </div>172 <div class="item-name">Backup</div>173 </div>174 <div class="dot-menu">⋮</div>175 </div>176 </div>177 178 <!-- BACKUP_REMINDER_M... doc -->179 <div class="tile">180 <div class="preview">181 <div class="mini">[IMG: File Preview]</div>182 <div class="ellipsis">⋮</div>183 </div>184 <div class="label-row">185 <div style="display:flex; align-items:center;">186 <div class="doc-icon">187 <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15H6z"/></svg>188 </div>189 <div class="item-name">BACKUP_REMINDER_M...</div>190 </div>191 <div class="dot-menu">⋮</div>192 </div>193 </div>194 195 <!-- Backup.txt -->196 <div class="tile">197 <div class="preview">198 <div class="mini">[IMG: Text File]</div>199 <div class="ellipsis">⋮</div>200 </div>201 <div class="label-row">202 <div style="display:flex; align-items:center;">203 <div class="list-icon">204 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>205 </div>206 <div class="item-name">Backup.txt</div>207 </div>208 <div class="dot-menu">⋮</div>209 </div>210 </div>211 212 <!-- Movies -->213 <div class="tile">214 <div class="preview">215 <div class="mini">[IMG: Document Preview]</div>216 <div class="ellipsis">⋮</div>217 </div>218 <div class="label-row">219 <div style="display:flex; align-items:center;">220 <div class="list-icon">221 <svg viewBox="0 0 24 24"><path d="M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z"/></svg>222 </div>223 <div class="item-name">Movies</div>224 </div>225 <div class="dot-menu">⋮</div>226 </div>227 </div>228 229 <!-- My Doc (Form) -->230 <div class="tile">231 <div class="preview" style="background:#262326;">232 <div class="mini" style="background:#E9E1F5; color:#7A6EA3;">[IMG: Form Preview]</div>233 <div class="ellipsis">⋮</div>234 </div>235 <div class="label-row">236 <div style="display:flex; align-items:center;">237 <div class="list-icon" style="background:#B377FF;">238 <svg viewBox="0 0 24 24"><path d="M5 3h14v18H5z"/></svg>239 </div>240 <div class="item-name">My Doc</div>241 </div>242 <div class="dot-menu">⋮</div>243 </div>244 </div>245 246 <!-- Recording -->247 <div class="tile">248 <div class="preview">249 <div class="mini">[IMG: Notes Preview]</div>250 <div class="ellipsis">⋮</div>251 </div>252 <div class="label-row">253 <div style="display:flex; align-items:center;">254 <div class="doc-icon">255 <svg viewBox="0 0 24 24"><path d="M6 2h9l5 5v15H6z"/></svg>256 </div>257 <div class="item-name">Recording</div>258 </div>259 <div class="dot-menu">⋮</div>260 </div>261 </div>262 263 </div>264 </div>265 266 <!-- Floating Action Button -->267 <div class="fab">268 <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>269 </div>270 271 <!-- Snackbar -->272 <div class="snackbar">273 <div>File moved to trash.</div>274 <div class="undo">Undo</div>275 </div>276 277 <!-- Bottom Navigation -->278 <div class="bottom-nav">279 <div class="nav-item">280 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M3 10l9-7 9 7v10H3z"/></svg>281 <div>Home</div>282 </div>283 <div class="nav-item">284 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7L22 9.24l-7-.61L12 2 9 8.63l-7 .61L7.46 14 5.82 21z"/></svg>285 <div>Starred</div>286 </div>287 <div class="nav-item">288 <svg class="nav-icon" viewBox="0 0 24 24"><path d="M16 11V5H8v6H2l10 8 10-8z"/></svg>289 <div>Shared</div>290 </div>291 <div class="nav-item active">292 <div class="bubble">293 <svg viewBox="0 0 24 24"><path d="M3 4h18v14H8l-5 4z"/></svg>294 </div>295 <div>Files</div>296 </div>297 </div>298 299</div>300</body>301</html>