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 UI Mock</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: #ECEFF1;13 }14 15 /* Status bar */16 .status-bar {17 position: absolute; top: 0; left: 0; right: 0;18 height: 84px; padding: 16px 28px;19 display: flex; align-items: center; justify-content: space-between;20 color: #cfd8dc; font-size: 30px; letter-spacing: 0.5px;21 }22 .status-icons { display: flex; align-items: center; gap: 22px; }23 .icon { width: 36px; height: 36px; }24 25 /* Top section with search */26 .top-bar {27 position: absolute; top: 84px; left: 0; right: 0;28 padding: 22px 28px;29 display: flex; align-items: center; gap: 22px;30 }31 .menu-btn { width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }32 .search-pill {33 flex: 1; height: 92px; border-radius: 46px;34 background: #262626; color: #9aa0a6;35 display: flex; align-items: center; padding: 0 28px; font-size: 34px;36 }37 .avatar {38 width: 80px; height: 80px; border-radius: 50%;39 background: #cc2a67; display: flex; align-items: center; justify-content: center;40 font-weight: bold; font-size: 40px;41 }42 43 /* Tabs */44 .tabs {45 position: absolute; top: 210px; left: 28px; right: 28px;46 display: flex; gap: 60px; align-items: center;47 font-size: 38px; color: #d7d7d7;48 }49 .tab-active { color: #ffffff; position: relative; }50 .tab-active::after {51 content: ""; position: absolute; left: 0; bottom: -16px;52 width: 150px; height: 6px; border-radius: 3px; background: #3f88f5;53 }54 .divider {55 position: absolute; top: 262px; left: 0; right: 0; height: 2px; background: #222;56 }57 58 /* Header row: Name + view toggle */59 .list-header {60 position: absolute; top: 290px; left: 28px; right: 28px;61 display: flex; align-items: center; justify-content: space-between;62 color: #cfd8dc; font-size: 34px;63 }64 .header-left { display: flex; align-items: center; gap: 10px; }65 .view-toggle { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }66 67 /* Grid of items */68 .grid {69 position: absolute; top: 360px; left: 28px; right: 28px; bottom: 230px;70 display: grid; grid-template-columns: 1fr 1fr; gap: 36px 36px;71 overflow: hidden;72 }73 .card {74 background: #1d1d1d; border-radius: 24px; padding: 22px;75 display: flex; flex-direction: column; gap: 16px;76 }77 .thumb {78 width: 100%; height: 210px; border-radius: 16px;79 background: #E0E0E0; border: 1px solid #BDBDBD;80 display: flex; align-items: center; justify-content: center;81 color: #757575; font-size: 30px;82 }83 .meta-row {84 display: flex; align-items: center; justify-content: space-between;85 }86 .label {87 font-size: 36px; color: #e6e6e6; line-height: 1.2;88 }89 .more { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }90 .pdf-tag {91 display: inline-flex; align-items: center; justify-content: center;92 background: #e57373; color: #000; font-weight: bold; font-size: 24px;93 border-radius: 6px; padding: 6px 10px; margin-right: 10px;94 }95 96 /* Floating action button */97 .fab {98 position: absolute; right: 36px; bottom: 420px;99 width: 110px; height: 110px; border-radius: 30px;100 background: #334455; display: flex; align-items: center; justify-content: center;101 }102 .fab-inner {103 width: 110px; height: 110px; border-radius: 30px;104 background: #3b4b5c; display: flex; align-items: center; justify-content: center;105 }106 .plus { width: 42px; height: 42px; }107 108 /* Bottom navigation */109 .home-indicator {110 position: absolute; bottom: 184px; left: 50%; transform: translateX(-50%);111 width: 240px; height: 12px; border-radius: 6px; background: #3a3a3a;112 }113 .bottom-nav {114 position: absolute; bottom: 0; left: 0; right: 0; height: 184px;115 background: #1a1a1a; border-top: 1px solid #262626;116 display: flex; align-items: center; justify-content: space-around;117 }118 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #cfd8dc; }119 .nav-item .nav-icon { width: 48px; height: 48px; }120 .nav-item .nav-label { font-size: 30px; }121 .active { color: #8ab4f8; }122</style>123</head>124<body>125<div id="render-target">126 127 <!-- Status bar -->128 <div class="status-bar">129 <div>8:28</div>130 <div class="status-icons">131 <!-- Signal / WiFi -->132 <svg class="icon" viewBox="0 0 24 24" fill="none">133 <path d="M2 8c5-5 15-5 20 0" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>134 <path d="M6 12c3-3 9-3 12 0" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>135 <circle cx="12" cy="16" r="2" fill="#cfd8dc"/>136 </svg>137 <!-- Battery -->138 <svg class="icon" viewBox="0 0 24 24" fill="none">139 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#cfd8dc" stroke-width="2"/>140 <rect x="20" y="10" width="2" height="4" fill="#cfd8dc"/>141 <rect x="4" y="8" width="12" height="8" fill="#cfd8dc"/>142 </svg>143 </div>144 </div>145 146 <!-- Search and avatar -->147 <div class="top-bar">148 <!-- Hamburger -->149 <div class="menu-btn">150 <svg class="icon" viewBox="0 0 24 24" fill="none">151 <path d="M3 6h18M3 12h14M3 18h18" stroke="#e0e0e0" stroke-width="2" stroke-linecap="round"/>152 </svg>153 </div>154 <div class="search-pill">Search in Drive</div>155 <div class="avatar">C</div>156 </div>157 158 <!-- Tabs -->159 <div class="tabs">160 <div class="tab-active">My Drive</div>161 <div>Computers</div>162 </div>163 <div class="divider"></div>164 165 <!-- Header row -->166 <div class="list-header">167 <div class="header-left">168 <div>Name</div>169 <svg class="icon" viewBox="0 0 24 24" fill="none">170 <path d="M12 8l-4 6h8z" fill="#cfd8dc"/>171 </svg>172 </div>173 <div class="view-toggle">174 <svg class="icon" viewBox="0 0 24 24" fill="none">175 <rect x="3" y="5" width="18" height="4" rx="1" fill="#cfd8dc"/>176 <rect x="3" y="10" width="18" height="4" rx="1" fill="#cfd8dc"/>177 <rect x="3" y="15" width="18" height="4" rx="1" fill="#cfd8dc"/>178 </svg>179 </div>180 </div>181 182 <!-- Grid -->183 <div class="grid">184 <!-- Folder card -->185 <div class="card">186 <div class="thumb">[IMG: Folder Thumbnail]</div>187 <div class="meta-row">188 <div class="label">Jitendra</div>189 <div class="more">190 <svg class="icon" viewBox="0 0 24 24">191 <circle cx="12" cy="5" r="2" fill="#cfd8dc"/><circle cx="12" cy="12" r="2" fill="#cfd8dc"/><circle cx="12" cy="19" r="2" fill="#cfd8dc"/>192 </svg>193 </div>194 </div>195 </div>196 197 <!-- PDF card -->198 <div class="card">199 <div class="thumb">[IMG: PDF Thumbnail - Amsterdam]</div>200 <div class="meta-row">201 <div class="label">202 <span class="pdf-tag">PDF</span>Amsterdam. pdf203 </div>204 <div class="more">205 <svg class="icon" viewBox="0 0 24 24">206 <circle cx="12" cy="5" r="2" fill="#cfd8dc"/><circle cx="12" cy="12" r="2" fill="#cfd8dc"/><circle cx="12" cy="19" r="2" fill="#cfd8dc"/>207 </svg>208 </div>209 </div>210 </div>211 212 <!-- PDF card -->213 <div class="card">214 <div class="thumb">[IMG: PDF Thumbnail - Amsterdam]</div>215 <div class="meta-row">216 <div class="label">217 <span class="pdf-tag">PDF</span>Amsterdam. pdf218 </div>219 <div class="more">220 <svg class="icon" viewBox="0 0 24 24">221 <circle cx="12" cy="5" r="2" fill="#cfd8dc"/><circle cx="12" cy="12" r="2" fill="#cfd8dc"/><circle cx="12" cy="19" r="2" fill="#cfd8dc"/>222 </svg>223 </div>224 </div>225 </div>226 227 <!-- PDF card -->228 <div class="card">229 <div class="thumb">[IMG: PDF Thumbnail - Amsterdam]</div>230 <div class="meta-row">231 <div class="label">232 <span class="pdf-tag">PDF</span>Amsterdam. pdf233 </div>234 <div class="more">235 <svg class="icon" viewBox="0 0 24 24">236 <circle cx="12" cy="5" r="2" fill="#cfd8dc"/><circle cx="12" cy="12" r="2" fill="#cfd8dc"/><circle cx="12" cy="19" r="2" fill="#cfd8dc"/>237 </svg>238 </div>239 </div>240 </div>241 242 <!-- File card -->243 <div class="card">244 <div class="thumb">[IMG: File Thumbnail]</div>245 <div class="meta-row">246 <div class="label">BACKUP_RE MINDER_M...</div>247 <div class="more">248 <svg class="icon" viewBox="0 0 24 24">249 <circle cx="12" cy="5" r="2" fill="#cfd8dc"/><circle cx="12" cy="12" r="2" fill="#cfd8dc"/><circle cx="12" cy="19" r="2" fill="#cfd8dc"/>250 </svg>251 </div>252 </div>253 </div>254 255 <!-- File card -->256 <div class="card">257 <div class="thumb">[IMG: File Thumbnail]</div>258 <div class="meta-row">259 <div class="label">BACKUP_RE MINDER_M...</div>260 <div class="more">261 <svg class="icon" viewBox="0 0 24 24">262 <circle cx="12" cy="5" r="2" fill="#cfd8dc"/><circle cx="12" cy="12" r="2" fill="#cfd8dc"/><circle cx="12" cy="19" r="2" fill="#cfd8dc"/>263 </svg>264 </div>265 </div>266 </div>267 </div>268 269 <!-- Floating Action Button -->270 <div class="fab">271 <div class="fab-inner">272 <svg class="plus" viewBox="0 0 24 24" fill="none">273 <path d="M12 5v14M5 12h14" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>274 </svg>275 </div>276 </div>277 278 <!-- Home indicator -->279 <div class="home-indicator"></div>280 281 <!-- Bottom navigation -->282 <div class="bottom-nav">283 <div class="nav-item">284 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">285 <path d="M3 10l9-7 9 7v9a2 2 0 0 1-2 2h-14a2 2 0 0 1-2-2z" stroke="#cfd8dc" stroke-width="2"/>286 </svg>287 <div class="nav-label">Home</div>288 </div>289 <div class="nav-item">290 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">291 <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" stroke="#cfd8dc" stroke-width="2"/>292 </svg>293 <div class="nav-label">Starred</div>294 </div>295 <div class="nav-item">296 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">297 <circle cx="7" cy="8" r="3" stroke="#cfd8dc" stroke-width="2"/>298 <circle cx="17" cy="8" r="3" stroke="#cfd8dc" stroke-width="2"/>299 <path d="M4 20a5 5 0 0 1 10 0M10 20a5 5 0 0 1 10 0" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/>300 </svg>301 <div class="nav-label">Shared</div>302 </div>303 <div class="nav-item active">304 <svg class="nav-icon" viewBox="0 0 24 24" fill="none">305 <rect x="3" y="4" width="18" height="16" rx="2" stroke="#8ab4f8" stroke-width="2"/>306 <path d="M8 8h8M8 12h8M8 16h8" stroke="#8ab4f8" stroke-width="2" stroke-linecap="round"/>307 </svg>308 <div class="nav-label">Files</div>309 </div>310 </div>311 312</div>313</body>314</html>