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>Drive Dark UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EDEDED;13 }14 15 /* Status bar */16 .status-bar {17 height: 64px; padding: 0 28px;18 display: flex; align-items: center; justify-content: space-between;19 color: #EDEDED; font-size: 28px;20 }21 .status-right { display: flex; align-items: center; gap: 22px; }22 .status-icon {23 width: 28px; height: 28px; border-radius: 50%; background: #9E9E9E; opacity: 0.8;24 }25 .battery {26 width: 40px; height: 22px; border: 2px solid #9E9E9E; border-radius: 4px; position: relative;27 }28 .battery::after {29 content: ""; position: absolute; right: -8px; top: 6px;30 width: 6px; height: 10px; background: #9E9E9E; border-radius: 2px;31 }32 .battery-level { position: absolute; left: 2px; top: 2px; height: 16px; width: 26px; background: #9E9E9E; }33 34 /* Top search bar */35 .top-row {36 height: 110px; padding: 0 24px; display: flex; align-items: center; gap: 18px;37 }38 .icon-btn {39 width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 16px;40 }41 .icon-btn svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 4; }42 .search-pill {43 flex: 1; height: 84px; border-radius: 42px;44 background: #2A2A2A; display: flex; align-items: center; padding: 0 26px; gap: 18px; color: #BDBDBD; font-size: 34px;45 }46 .search-pill svg { width: 38px; height: 38px; stroke: #BDBDBD; stroke-width: 4; fill: none; }47 .avatar {48 width: 64px; height: 64px; border-radius: 50%;49 background: #3F51B5; display: flex; align-items: center; justify-content: center;50 font-weight: bold; font-size: 32px; color: #FFFFFF;51 }52 53 /* Tabs */54 .tabs { display: flex; gap: 36px; padding: 8px 32px 0 32px; font-size: 36px; color: #CFCFCF; }55 .tab { padding: 20px 8px; position: relative; }56 .tab.active { color: #FFFFFF; }57 .tab.active::after {58 content: ""; position: absolute; left: 8px; right: 8px; bottom: -6px;59 height: 6px; background: #5E8EFF; border-radius: 3px;60 }61 62 /* Header row */63 .list-header {64 margin-top: 36px; padding: 0 32px;65 display: flex; align-items: center; justify-content: space-between;66 font-size: 28px; color: #A8A8A8;67 }68 .name-sort { display: flex; align-items: center; gap: 10px; font-size: 32px; color: #EDEDED; }69 .name-sort svg { width: 22px; height: 22px; fill: #EDEDED; }70 .view-toggle svg { width: 40px; height: 40px; fill: none; stroke: #EDEDED; stroke-width: 4; opacity: 0.9; }71 72 /* Grid of items */73 .grid {74 margin-top: 24px; padding: 0 24px 220px 24px;75 display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 28px;76 }77 .item {78 height: 360px;79 }80 .thumb {81 height: 260px; border-radius: 24px; background: #1F1F1F;82 display: flex; align-items: center; justify-content: center; position: relative;83 border: 1px solid #2A2A2A;84 }85 .thumb .placeholder {86 width: 84%; height: 72%; background: #E0E0E0; border: 1px solid #BDBDBD;87 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;88 }89 .folder-icon svg { width: 160px; height: 120px; fill: #BDBDBD; }90 .file-icon svg { width: 140px; height: 160px; fill: #6EA2FF; }91 .title-row {92 margin-top: 18px; display: flex; align-items: center; justify-content: space-between;93 }94 .title { font-size: 32px; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }95 .more { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }96 .more svg { width: 8px; height: 28px; fill: #CFCFCF; }97 98 /* Floating action button */99 .fab {100 position: absolute; right: 46px; bottom: 380px;101 width: 120px; height: 120px; background: #3A74FF; border-radius: 60px;102 box-shadow: 0 10px 24px rgba(0,0,0,0.5);103 display: flex; align-items: center; justify-content: center;104 }105 .fab svg { width: 54px; height: 54px; stroke: #FFFFFF; stroke-width: 10; fill: none; }106 107 /* Toast */108 .toast {109 position: absolute; left: 24px; right: 24px; bottom: 250px;110 background: #2A2A2A; color: #EDEDED; border-radius: 18px;111 padding: 24px 28px; font-size: 30px; display: flex; justify-content: space-between; align-items: center;112 }113 .toast .action { color: #9EC0FF; }114 115 /* Bottom navigation */116 .bottom-nav {117 position: absolute; left: 0; right: 0; bottom: 78px;118 height: 150px; background: #1A1A1A; border-top: 1px solid #2A2A2A;119 display: flex; justify-content: space-around; align-items: center;120 }121 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #A8A8A8; font-size: 26px; }122 .nav-item.active { color: #FFFFFF; }123 .nav-item svg { width: 44px; height: 44px; stroke: #A8A8A8; stroke-width: 4; fill: none; }124 .nav-item.active svg { stroke: #FFFFFF; }125 126 /* Gesture bar */127 .gesture {128 position: absolute; left: 420px; bottom: 24px; width: 240px; height: 10px; border-radius: 6px; background: #EDEDED; opacity: 0.7;129 }130</style>131</head>132<body>133<div id="render-target">134 135 <!-- Status bar -->136 <div class="status-bar">137 <div class="time">1:07</div>138 <div class="status-right">139 <div class="status-icon"></div>140 <div class="status-icon"></div>141 <div class="status-icon"></div>142 <div class="battery"><div class="battery-level"></div></div>143 </div>144 </div>145 146 <!-- Top search row -->147 <div class="top-row">148 <div class="icon-btn">149 <!-- Hamburger -->150 <svg viewBox="0 0 24 24">151 <path d="M3 6h18M3 12h18M3 18h18"></path>152 </svg>153 </div>154 <div class="search-pill">155 <svg viewBox="0 0 24 24">156 <circle cx="10" cy="10" r="6"></circle>157 <path d="M14.5 14.5L21 21"></path>158 </svg>159 <span>Search in Drive</span>160 </div>161 <div class="avatar">C</div>162 </div>163 164 <!-- Tabs -->165 <div class="tabs">166 <div class="tab active">My Drive</div>167 <div class="tab">Computers</div>168 </div>169 170 <!-- Header row -->171 <div class="list-header">172 <div class="name-sort">173 <span>Name</span>174 <svg viewBox="0 0 24 24"><path d="M6 14l6-6 6 6"></path></svg>175 </div>176 <div class="view-toggle">177 <!-- list/grid toggle icon -->178 <svg viewBox="0 0 24 24">179 <rect x="3" y="4" width="18" height="4"></rect>180 <rect x="3" y="10" width="18" height="4"></rect>181 <rect x="3" y="16" width="18" height="4"></rect>182 </svg>183 </div>184 </div>185 186 <!-- Grid -->187 <div class="grid">188 189 <!-- Item: Folder -->190 <div class="item">191 <div class="thumb folder-icon">192 <svg viewBox="0 0 64 48">193 <path d="M6 10h18l6 6h28v22a6 6 0 0 1-6 6H12a6 6 0 0 1-6-6V16a6 6 0 0 1 6-6z"></path>194 </svg>195 </div>196 <div class="title-row">197 <div class="title">Private File</div>198 <div class="more">199 <svg viewBox="0 0 8 28">200 <circle cx="4" cy="4" r="4"></circle>201 <circle cx="4" cy="14" r="4"></circle>202 <circle cx="4" cy="24" r="4"></circle>203 </svg>204 </div>205 </div>206 </div>207 208 <!-- Item: Folder -->209 <div class="item">210 <div class="thumb folder-icon">211 <svg viewBox="0 0 64 48">212 <path d="M6 10h18l6 6h28v22a6 6 0 0 1-6 6H12a6 6 0 0 1-6-6V16a6 6 0 0 1 6-6z"></path>213 </svg>214 </div>215 <div class="title-row">216 <div class="title">Private File</div>217 <div class="more">218 <svg viewBox="0 0 8 28">219 <circle cx="4" cy="4" r="4"></circle>220 <circle cx="4" cy="14" r="4"></circle>221 <circle cx="4" cy="24" r="4"></circle>222 </svg>223 </div>224 </div>225 </div>226 227 <!-- Item: File with doc icon -->228 <div class="item">229 <div class="thumb">230 <div class="placeholder">[IMG: Doc preview]</div>231 </div>232 <div class="title-row">233 <div class="title">BACKUP_REMINDER_M...</div>234 <div class="more">235 <svg viewBox="0 0 8 28">236 <circle cx="4" cy="4" r="4"></circle>237 <circle cx="4" cy="14" r="4"></circle>238 <circle cx="4" cy="24" r="4"></circle>239 </svg>240 </div>241 </div>242 </div>243 244 <!-- Item: File preview -->245 <div class="item">246 <div class="thumb">247 <div class="placeholder">[IMG: Tools list preview]</div>248 </div>249 <div class="title-row">250 <div class="title">Copy of Tools list</div>251 <div class="more">252 <svg viewBox="0 0 8 28">253 <circle cx="4" cy="4" r="4"></circle>254 <circle cx="4" cy="14" r="4"></circle>255 <circle cx="4" cy="24" r="4"></circle>256 </svg>257 </div>258 </div>259 </div>260 261 <!-- Item: File -->262 <div class="item">263 <div class="thumb">264 <div class="placeholder">[IMG: Text file preview]</div>265 </div>266 <div class="title-row">267 <div class="title">diy projects.txt</div>268 <div class="more">269 <svg viewBox="0 0 8 28">270 <circle cx="4" cy="4" r="4"></circle>271 <circle cx="4" cy="14" r="4"></circle>272 <circle cx="4" cy="24" r="4"></circle>273 </svg>274 </div>275 </div>276 </div>277 278 <!-- Item: File -->279 <div class="item">280 <div class="thumb">281 <div class="placeholder">[IMG: Tools list preview]</div>282 </div>283 <div class="title-row">284 <div class="title">Tools list</div>285 <div class="more">286 <svg viewBox="0 0 8 28">287 <circle cx="4" cy="4" r="4"></circle>288 <circle cx="4" cy="14" r="4"></circle>289 <circle cx="4" cy="24" r="4"></circle>290 </svg>291 </div>292 </div>293 </div>294 295 </div>296 297 <!-- Floating Action Button -->298 <div class="fab">299 <svg viewBox="0 0 24 24">300 <path d="M12 4v16M4 12h16"></path>301 </svg>302 </div>303 304 <!-- Toast -->305 <div class="toast">306 <div>Shortcut added to "My Drive"</div>307 <div class="action">Undo</div>308 </div>309 310 <!-- Bottom navigation -->311 <div class="bottom-nav">312 <div class="nav-item">313 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8v9H3z"></path></svg>314 <div>Home</div>315 </div>316 <div class="nav-item">317 <svg viewBox="0 0 24 24"><path d="M12 2l3 6 6 .9-4.5 4.3L18 20l-6-3.3L6 20l1.5-6.8L3 8.9 9 8z"></path></svg>318 <div>Starred</div>319 </div>320 <div class="nav-item">321 <svg viewBox="0 0 24 24"><path d="M5 5h6v6H5zM13 5h6v6h-6zM5 13h6v6H5zM13 13h6v6h-6z"></path></svg>322 <div>Shared</div>323 </div>324 <div class="nav-item active">325 <svg viewBox="0 0 24 24"><path d="M4 6h7l2 2h7v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2z"></path></svg>326 <div>Files</div>327 </div>328 </div>329 330 <!-- Gesture bar -->331 <div class="gesture"></div>332 333</div>334</body>335</html>