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: Roboto, Arial, sans-serif; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #121212; color: #EAEAEA;13 }14 15 /* Top status bar */16 .statusbar {17 height: 110px; padding: 0 36px;18 display: flex; align-items: center; justify-content: space-between;19 color: #F5F5F5; font-size: 40px; letter-spacing: 0.5px;20 }21 .sb-right { display: flex; align-items: center; gap: 22px; }22 .sb-icon svg { width: 34px; height: 34px; fill: none; stroke: #DADADA; stroke-width: 2.5; }23 24 /* Search header */25 .header {26 padding: 10px 32px 0 32px;27 }28 .search-row {29 display: flex; align-items: center; gap: 22px;30 }31 .searchbar {32 flex: 1; height: 92px; border-radius: 48px;33 background: #2A2F31; color: #9AA0A6;34 display: flex; align-items: center; padding: 0 28px; gap: 22px;35 box-shadow: inset 0 0 0 1px #2f3436;36 font-size: 36px;37 }38 .searchbar svg { width: 40px; height: 40px; stroke: #C7C7C7; }39 .avatar {40 width: 88px; height: 88px; border-radius: 44px;41 background: #C75B2F; display: flex; align-items: center; justify-content: center;42 color: #1a1a1a; font-weight: 700; font-size: 38px;43 }44 45 /* Tabs */46 .tabs { display: flex; gap: 40px; margin-top: 28px; padding: 0 6px; }47 .tab { font-size: 36px; color: #A8AEAF; }48 .tab.active { color: #EDEDED; position: relative; }49 .tab.active::after {50 content: ""; position: absolute; left: 0; bottom: -16px;51 width: 150px; height: 6px; border-radius: 3px; background: #59D1C7;52 }53 .divider { height: 1px; background: #222; margin: 30px 0 12px 0; }54 55 /* Sort row */56 .sort-row {57 display: flex; align-items: center; justify-content: space-between;58 padding: 0 32px; color: #C7C7C7; font-size: 32px;59 }60 .layout-toggle { width: 56px; height: 56px; border-radius: 12px; background: #1E2223;61 display: flex; align-items: center; justify-content: center;62 }63 .layout-toggle svg { width: 34px; height: 34px; stroke: #C7C7C7; stroke-width: 2; }64 65 /* Grid content */66 .grid {67 display: grid; grid-template-columns: repeat(2, 1fr);68 gap: 60px; padding: 26px 32px 0 32px;69 }70 .tile { }71 .preview {72 width: 100%; height: 320px; border-radius: 22px;73 background: #E0E0E0; border: 1px solid #BDBDBD;74 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 34px;75 position: relative;76 }77 .play-overlay {78 position: absolute; right: 18px; bottom: 18px;79 width: 88px; height: 88px; border-radius: 44px;80 background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center;81 }82 .play-overlay svg { width: 42px; height: 42px; fill: #fff; }83 84 .meta { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }85 .name-row { display: flex; align-items: center; gap: 14px; }86 .file-icon {87 width: 36px; height: 36px; border-radius: 8px;88 display: inline-flex; align-items: center; justify-content: center;89 }90 .file-icon svg { width: 24px; height: 24px; fill: #142; stroke: none; }91 .filename { color: #EDEDED; font-size: 32px; max-width: 430px; line-height: 1.2; }92 93 .dots { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }94 .dots svg { width: 24px; height: 24px; fill: #C7C7C7; }95 96 /* Floating Action Button */97 .fab {98 position: absolute; right: 40px; bottom: 290px;99 width: 120px; height: 120px; border-radius: 28px;100 background: #273A3C; box-shadow: 0 10px 20px rgba(0,0,0,0.35);101 display: flex; align-items: center; justify-content: center;102 }103 .fab svg { width: 56px; height: 56px; stroke: #EDEDED; stroke-width: 6; }104 105 /* Bottom navigation */106 .bottom-nav {107 position: absolute; left: 0; right: 0; bottom: 0;108 height: 180px; background: #171C1D; border-top: 1px solid #202425;109 display: flex; align-items: center; justify-content: space-around;110 }111 .nav-item { width: 180px; text-align: center; color: #C4C4C4; }112 .nav-icon-wrap { height: 64px; display: flex; align-items: center; justify-content: center; }113 .nav-label { font-size: 28px; margin-top: 8px; }114 .active .nav-icon {115 background: #274E48; border-radius: 24px; padding: 10px 18px;116 }117 .nav-icon svg { width: 36px; height: 36px; stroke: #C7C7C7; fill: none; stroke-width: 2.8; }118 .active .nav-icon svg { stroke: #7FE0D6; }119 .gesture {120 position: absolute; bottom: 190px; left: 50%; transform: translateX(-50%);121 width: 180px; height: 12px; background: #F2F2F2; border-radius: 8px; opacity: 0.9;122 }123</style>124</head>125<body>126<div id="render-target">127 128 <!-- Status bar -->129 <div class="statusbar">130 <div>3:36</div>131 <div class="sb-right">132 <div class="sb-icon">133 <!-- location icon -->134 <svg viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 10a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/></svg>135 </div>136 <div class="sb-icon">137 <!-- notifications -->138 <svg viewBox="0 0 24 24"><path d="M12 22a3 3 0 0 0 3-3H9a3 3 0 0 0 3 3z"/><path d="M18 16V11a6 6 0 0 0-12 0v5l-2 2h16l-2-2z"/></svg>139 </div>140 <div class="sb-icon">141 <!-- bluetooth -->142 <svg viewBox="0 0 24 24"><path d="M12 2v9l5-5-5-4zM12 13v9l5-4-5-5zM12 11L6 7l6 6-6 6 6-4"/></svg>143 </div>144 <div class="sb-icon">145 <!-- wifi -->146 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0"/><path d="M5 12c3-3 11-3 14 0"/><path d="M8 16c2-2 6-2 8 0"/><circle cx="12" cy="19" r="1.8" fill="#DADADA" stroke="none"/></svg>147 </div>148 <div class="sb-icon">149 <!-- battery -->150 <svg viewBox="0 0 28 24">151 <rect x="2" y="6" width="22" height="12" rx="2" ry="2" stroke="#DADADA" fill="none" stroke-width="2.5"></rect>152 <rect x="4.5" y="8.5" width="17" height="7" rx="1.5" fill="#DADADA"></rect>153 <rect x="24" y="9" width="3" height="6" rx="1" ry="1" fill="#DADADA"></rect>154 </svg>155 </div>156 </div>157 </div>158 159 <!-- Header with search -->160 <div class="header">161 <div class="search-row">162 <div class="searchbar">163 <!-- hamburger -->164 <svg viewBox="0 0 24 24"><path d="M3 6h18M3 12h18M3 18h18"/></svg>165 <span>Search in Drive</span>166 </div>167 <div class="avatar">C</div>168 </div>169 170 <div class="tabs">171 <div class="tab active">My Drive</div>172 <div class="tab">Computers</div>173 </div>174 <div class="divider"></div>175 176 <div class="sort-row">177 <div style="font-size:32px; color:#C7C7C7;">Name ↑</div>178 <div class="layout-toggle">179 <!-- list/grid icon -->180 <svg viewBox="0 0 24 24">181 <path d="M4 6h16M4 12h16M4 18h16"/>182 </svg>183 </div>184 </div>185 </div>186 187 <!-- Content grid -->188 <div class="grid">189 190 <!-- Folder tile -->191 <div class="tile">192 <div class="preview">[IMG: Folder]</div>193 <div class="meta">194 <div class="name-row">195 <div class="file-icon" style="background:#B9C4C9;">196 <!-- folder glyph -->197 <svg viewBox="0 0 24 24">198 <path d="M3 7h6l2 2h10v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" fill="#263238"></path>199 </svg>200 </div>201 <div class="filename">ToDoRemind<br>er_Backup</div>202 </div>203 <div class="dots">204 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/></svg>205 </div>206 </div>207 </div>208 209 <!-- Video tile -->210 <div class="tile">211 <div class="preview">[IMG: Beach Video Thumbnail]212 <div class="play-overlay">213 <svg viewBox="0 0 24 24"><path d="M8 5l11 7-11 7z"/></svg>214 </div>215 </div>216 <div class="meta">217 <div class="name-row">218 <div class="file-icon" style="background:#E49289;">219 <!-- film icon -->220 <svg viewBox="0 0 24 24">221 <path d="M3 5h18v14H3z" fill="none" stroke="none"></path>222 <path d="M5 5v14M19 5v14M9 5v14M15 5v14M3 9h18M3 15h18" stroke="#3b2323" stroke-width="2"></path>223 </svg>224 </div>225 <div class="filename">beach.mp4</div>226 </div>227 <div class="dots">228 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/></svg>229 </div>230 </div>231 </div>232 233 <!-- Image tile -->234 <div class="tile">235 <div class="preview">[IMG: Pink Flower]</div>236 <div class="meta">237 <div class="name-row">238 <div class="file-icon" style="background:#E58FB1;">239 <!-- image icon -->240 <svg viewBox="0 0 24 24">241 <rect x="4" y="5" width="16" height="14" rx="2" fill="#401b2a"></rect>242 </svg>243 </div>244 <div class="filename">pink<br>flower.jpeg</div>245 </div>246 <div class="dots">247 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/></svg>248 </div>249 </div>250 </div>251 252 <!-- Document tile -->253 <div class="tile">254 <div class="preview">[IMG: Document Preview]</div>255 <div class="meta">256 <div class="name-row">257 <div class="file-icon" style="background:#8BC1F5;">258 <!-- document icon -->259 <svg viewBox="0 0 24 24">260 <path d="M6 3h9l5 5v13H6z" fill="#14324f"></path>261 </svg>262 </div>263 <div class="filename">ToDoRemind<br>er_Backup</div>264 </div>265 <div class="dots">266 <svg viewBox="0 0 24 24"><circle cx="12" cy="4" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="20" r="2"/></svg>267 </div>268 </div>269 </div>270 271 </div>272 273 <!-- Floating Action Button -->274 <div class="fab">275 <svg viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></svg>276 </div>277 278 <!-- Bottom Navigation -->279 <div class="bottom-nav">280 <div class="nav-item">281 <div class="nav-icon-wrap">282 <div class="nav-icon">283 <svg viewBox="0 0 24 24"><path d="M3 11l9-7 9 7v9H15v-6H9v6H3z"/></svg>284 </div>285 </div>286 <div class="nav-label">Home</div>287 </div>288 289 <div class="nav-item">290 <div class="nav-icon-wrap">291 <div class="nav-icon">292 <svg viewBox="0 0 24 24"><path d="M12 2l3 7 7 1-5 5 2 7-7-4-7 4 2-7-5-5 7-1 3-7z" fill="none" stroke="#C7C7C7" stroke-width="2"></path></svg>293 </div>294 </div>295 <div class="nav-label">Starred</div>296 </div>297 298 <div class="nav-item">299 <div class="nav-icon-wrap">300 <div class="nav-icon">301 <svg viewBox="0 0 24 24"><circle cx="9" cy="9" r="4"/><circle cx="17" cy="12" r="4"/><path d="M3 22c0-4 4-7 8-7M9 15c4 0 8 3 8 7"/></svg>302 </div>303 </div>304 <div class="nav-label">Shared</div>305 </div>306 307 <div class="nav-item active">308 <div class="nav-icon-wrap">309 <div class="nav-icon">310 <svg viewBox="0 0 24 24"><path d="M3 7h7l2 2h9v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/></svg>311 </div>312 </div>313 <div class="nav-label" style="color:#EDEDED;">Files</div>314 </div>315 </div>316 317 <div class="gesture"></div>318 319</div>320</body>321</html>