GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Drive Dark UI Mock</title>6<meta name="viewport" content="width=1080, initial-scale=1.0">7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px; position: relative; overflow: hidden;11 background: #2a1e17; color: #f6e7d6; font-family: Arial, Helvetica, sans-serif;12 }13 .status-bar {14 height: 80px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;15 color: #f6e7d6; font-size: 28px; opacity: 0.9;16 }17 .top-app {18 height: 140px; display: flex; align-items: center; padding: 0 24px; gap: 24px;19 }20 .hamburger {21 width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;22 border-radius: 16px; background: transparent;23 }24 .search-pill {25 flex: 1; height: 100px; border-radius: 50px; background: #3a2c23; color: #cdb9a6;26 display: flex; align-items: center; padding: 0 36px; gap: 24px; font-size: 34px;27 }28 .avatar {29 width: 88px; height: 88px; border-radius: 44px; background: #6c56d4; color: #fff;30 display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 40px;31 box-shadow: 0 0 0 6px rgba(0,0,0,0.25);32 }33 .tabs {34 height: 110px; display: flex; align-items: flex-end; padding: 0 36px; gap: 48px;35 font-size: 38px;36 }37 .tab {38 padding-bottom: 20px; color: #cdb9a6;39 }40 .tab.active { color: #f4ad79; position: relative; }41 .tab.active::after {42 content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 8px; background: #f4ad79; border-radius: 4px;43 }44 .divider { height: 2px; background: #3a2c23; margin: 0; }45 .section-header {46 padding: 30px 36px; font-size: 32px; color: #cdb9a6; display: flex; align-items: center; gap: 12px;47 }48 .list { padding-bottom: 260px; }49 .row {50 display: flex; align-items: center; padding: 26px 36px; gap: 28px;51 border-bottom: 2px solid #33251d;52 }53 .row .title { font-size: 40px; line-height: 50px; }54 .row .subtitle { font-size: 28px; color: #cdb9a6; margin-top: 6px; }55 .icon-box {56 width: 92px; height: 92px; border-radius: 18px; background: #3a2c23; display: flex; align-items: center; justify-content: center;57 }58 .icon-pdf { background: #de6a69; color: #fff; font-weight: bold; border-radius: 16px; width: 92px; height: 92px; display:flex; align-items:center; justify-content:center; }59 .icon-folder { background: #81654e; }60 .icon-doc { background: #5f84f1; }61 .thumb {62 width: 92px; height: 92px; background: #E0E0E0; border: 1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;63 color:#757575; border-radius: 18px; overflow: hidden;64 }65 .grow { flex: 1; }66 .ellipsis { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }67 .upload-card {68 position: relative; background: #2e221a; border-radius: 18px; margin: 0 24px 8px 24px; padding: 24px 24px;69 }70 .upload-row { display: flex; align-items: center; gap: 28px; }71 .grid-icon, .close-icon { position: absolute; right: 24px; top: 16px; }72 .grid-icon { right: 96px; top: 16px; }73 .badge { font-size: 28px; color: #cdb9a6; }74 .fab {75 position: absolute; right: 40px; bottom: 280px; width: 120px; height: 120px;76 border-radius: 28px; background: #6f533e; display:flex; align-items:center; justify-content:center;77 box-shadow: 0 10px 20px rgba(0,0,0,0.35);78 }79 .snackbar {80 position: absolute; left: 50%; transform: translateX(-50%);81 bottom: 380px; background: #4a3b31; color: #f6e7d6; padding: 28px 32px; border-radius: 40px;82 display: flex; align-items: center; gap: 24px; font-size: 32px; box-shadow: 0 10px 20px rgba(0,0,0,0.35);83 }84 .bottom-nav {85 position: absolute; bottom: 0; left: 0; right: 0; height: 180px; background: #2e221a;86 display: flex; align-items: center; justify-content: space-around; padding-bottom: 8px;87 border-top-left-radius: 24px; border-top-right-radius: 24px;88 }89 .nav-item { width: 200px; display: flex; flex-direction: column; align-items: center; gap: 14px; color: #cdb9a6; font-size: 28px; }90 .nav-item.active { color: #f4ad79; }91 .gesture { position: absolute; bottom: 200px; left: 50%; transform: translateX(-50%); width: 220px; height: 16px; background: #b6a293; border-radius: 10px; opacity: 0.35; }92 /* SVG sizing helpers */93 svg { display: block; }94</style>95</head>96<body>97<div id="render-target">98 <!-- Status bar -->99 <div class="status-bar">100 <div>8:43</div>101 <div style="display:flex; align-items:center; gap:18px;">102 <svg width="36" height="36"><circle cx="18" cy="18" r="14" fill="#f6e7d6"/></svg>103 <svg width="42" height="36" viewBox="0 0 42 36"><rect x="4" y="8" width="28" height="20" rx="3" fill="#f6e7d6"/><rect x="34" y="12" width="6" height="12" rx="2" fill="#f6e7d6"/></svg>104 </div>105 </div>106 107 <!-- App bar with search -->108 <div class="top-app">109 <div class="hamburger">110 <svg width="56" height="56" viewBox="0 0 56 56">111 <rect x="8" y="14" width="40" height="6" fill="#f6e7d6"/>112 <rect x="8" y="26" width="40" height="6" fill="#f6e7d6"/>113 <rect x="8" y="38" width="40" height="6" fill="#f6e7d6"/>114 </svg>115 </div>116 <div class="search-pill">117 <svg width="40" height="40" viewBox="0 0 40 40">118 <circle cx="17" cy="17" r="12" stroke="#cdb9a6" stroke-width="4" fill="none"/>119 <line x1="26" y1="26" x2="36" y2="36" stroke="#cdb9a6" stroke-width="4" stroke-linecap="round"/>120 </svg>121 <span>Search in Drive</span>122 </div>123 <div class="avatar">M</div>124 </div>125 126 <!-- Tabs -->127 <div class="tabs">128 <div class="tab active">My Drive</div>129 <div class="tab">Computers</div>130 </div>131 <div class="divider"></div>132 133 <!-- Section header -->134 <div class="section-header">135 <span>Last modified by me</span>136 <svg width="28" height="28" viewBox="0 0 28 28">137 <polyline points="6,10 14,18 22,10" fill="none" stroke="#cdb9a6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>138 </svg>139 </div>140 141 <!-- Upload card -->142 <div class="upload-card">143 <div class="upload-row">144 <svg width="80" height="80" viewBox="0 0 80 80">145 <circle cx="40" cy="40" r="30" stroke="#3a2c23" stroke-width="10" fill="none"/>146 <path d="M40 10 A30 30 0 1 1 20 20" stroke="#f4ad79" stroke-width="10" fill="none" stroke-linecap="round"/>147 </svg>148 <div class="grow">149 <div class="title">Rome Itinerary.pdf</div>150 <div class="badge">Uploading</div>151 </div>152 </div>153 <div class="grid-icon">154 <svg width="56" height="56" viewBox="0 0 56 56">155 <rect x="6" y="6" width="16" height="16" fill="#cdb9a6" rx="3"/>156 <rect x="34" y="6" width="16" height="16" fill="#cdb9a6" rx="3"/>157 <rect x="6" y="34" width="16" height="16" fill="#cdb9a6" rx="3"/>158 <rect x="34" y="34" width="16" height="16" fill="#cdb9a6" rx="3"/>159 </svg>160 </div>161 <div class="close-icon">162 <svg width="56" height="56" viewBox="0 0 56 56">163 <line x1="12" y1="12" x2="44" y2="44" stroke="#cdb9a6" stroke-width="6" stroke-linecap="round"/>164 <line x1="44" y1="12" x2="12" y2="44" stroke="#cdb9a6" stroke-width="6" stroke-linecap="round"/>165 </svg>166 </div>167 </div>168 169 <div class="list">170 <!-- Folder: Important Docs -->171 <div class="row">172 <div class="icon-box icon-folder">173 <svg width="56" height="56" viewBox="0 0 64 56">174 <path d="M6 18 h20 l6 -6 h26 v32 a6 6 0 0 1 -6 6 H12 a6 6 0 0 1 -6 -6 Z" fill="#f6e7d6" opacity="0.9"/>175 </svg>176 </div>177 <div class="grow">178 <div class="title">Important Docs</div>179 <div class="subtitle">Modified by me Oct 11</div>180 </div>181 <div class="ellipsis">182 <svg width="32" height="32" viewBox="0 0 32 32">183 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>184 </svg>185 </div>186 </div>187 188 <!-- Folder: Yoga Video -->189 <div class="row">190 <div class="icon-box icon-folder">191 <svg width="56" height="56" viewBox="0 0 64 56">192 <path d="M6 18 h20 l6 -6 h26 v32 a6 6 0 0 1 -6 6 H12 a6 6 0 0 1 -6 -6 Z" fill="#f6e7d6" opacity="0.9"/>193 </svg>194 </div>195 <div class="grow">196 <div class="title">Yoga Video</div>197 <div class="subtitle">Modified by me Oct 11</div>198 </div>199 <div class="ellipsis">200 <svg width="32" height="32" viewBox="0 0 32 32">201 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>202 </svg>203 </div>204 </div>205 206 <!-- PDF: dance steps and positions -->207 <div class="row">208 <div class="icon-pdf">PDF</div>209 <div class="grow">210 <div class="title">dance steps and positions.pdf</div>211 <div class="subtitle" style="display:flex; align-items:center; gap:10px;">212 <svg width="26" height="26" viewBox="0 0 26 26">213 <circle cx="13" cy="9" r="6" fill="#cdb9a6"/><path d="M4 24 a9 9 0 0 1 18 0" fill="#cdb9a6"/>214 </svg>215 Modified by me Oct 11216 </div>217 </div>218 <div class="ellipsis">219 <svg width="32" height="32" viewBox="0 0 32 32">220 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>221 </svg>222 </div>223 </div>224 225 <!-- PDF: completeguidetod -->226 <div class="row">227 <div class="icon-pdf">PDF</div>228 <div class="grow">229 <div class="title">completeguidetod.pdf</div>230 <div class="subtitle">Modified by me Oct 11</div>231 </div>232 <div class="ellipsis">233 <svg width="32" height="32" viewBox="0 0 32 32">234 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>235 </svg>236 </div>237 </div>238 239 <!-- Doc: ToDoReminder_Backup -->240 <div class="row">241 <div class="icon-box icon-doc">242 <svg width="56" height="56" viewBox="0 0 48 56">243 <rect x="8" y="6" width="32" height="44" rx="6" fill="#fff" opacity="0.9"/>244 <rect x="14" y="18" width="20" height="4" fill="#5f84f1"/><rect x="14" y="26" width="20" height="4" fill="#5f84f1"/>245 </svg>246 </div>247 <div class="grow">248 <div class="title">ToDoReminder_Backup</div>249 <div class="subtitle">Modified by me Oct 11</div>250 </div>251 <div class="ellipsis">252 <svg width="32" height="32" viewBox="0 0 32 32">253 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>254 </svg>255 </div>256 </div>257 258 <!-- Image: Plant thumbnail -->259 <div class="row">260 <div class="thumb">[IMG: Plant Photo]</div>261 <div class="grow">262 <div class="title">Plantum_1689052714923.jpg</div>263 <div class="subtitle">Modified by me Oct 11</div>264 </div>265 <div class="ellipsis">266 <svg width="32" height="32" viewBox="0 0 32 32">267 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>268 </svg>269 </div>270 </div>271 272 <!-- Image: Bruschetta thumbnail -->273 <div class="row">274 <div class="thumb">[IMG: Bruschetta Photo]</div>275 <div class="grow">276 <div class="title">Bruschetta.jpg</div>277 <div class="subtitle">Modified by me Oct 11</div>278 </div>279 <div class="ellipsis">280 <svg width="32" height="32" viewBox="0 0 32 32">281 <circle cx="8" cy="16" r="3" fill="#cdb9a6"/><circle cx="16" cy="16" r="3" fill="#cdb9a6"/><circle cx="24" cy="16" r="3" fill="#cdb9a6"/>282 </svg>283 </div>284 </div>285 </div>286 287 <!-- Snackbar -->288 <div class="snackbar">289 <div class="icon-box" style="width:60px;height:60px;border-radius:30px;background:#3a2c23;">290 <span style="color:#f4ad79; font-weight:bold;">D</span>291 </div>292 <div>Your 1 file is being uploaded to: My Drive</div>293 </div>294 295 <!-- Floating action button -->296 <div class="fab">297 <svg width="72" height="72" viewBox="0 0 72 72">298 <line x1="36" y1="14" x2="36" y2="58" stroke="#f6e7d6" stroke-width="8" stroke-linecap="round"/>299 <line x1="14" y1="36" x2="58" y2="36" stroke="#f6e7d6" stroke-width="8" stroke-linecap="round"/>300 </svg>301 </div>302 303 <!-- Bottom navigation -->304 <div class="bottom-nav">305 <div class="nav-item">306 <svg width="48" height="48" viewBox="0 0 48 48">307 <path d="M6 24 L24 8 L42 24 V40 H28 V28 H20 V40 H6 Z" fill="#cdb9a6"/>308 </svg>309 <div>Home</div>310 </div>311 <div class="nav-item">312 <svg width="48" height="48" viewBox="0 0 48 48">313 <path d="M24 6 L29 18 L42 18 L31 26 L36 38 L24 30 L12 38 L17 26 L6 18 L19 18 Z" fill="#cdb9a6"/>314 </svg>315 <div>Starred</div>316 </div>317 <div class="nav-item">318 <svg width="48" height="48" viewBox="0 0 48 48">319 <rect x="6" y="12" width="12" height="24" rx="4" fill="#cdb9a6"/>320 <rect x="30" y="6" width="12" height="36" rx="4" fill="#cdb9a6"/>321 </svg>322 <div>Shared</div>323 </div>324 <div class="nav-item active">325 <svg width="48" height="48" viewBox="0 0 48 48">326 <rect x="6" y="8" width="36" height="32" rx="4" fill="#f4ad79"/>327 <rect x="12" y="16" width="24" height="4" fill="#2a1e17"/><rect x="12" y="24" width="24" height="4" fill="#2a1e17"/>328 </svg>329 <div>Files</div>330 </div>331 </div>332 333 <!-- Gesture bar -->334 <div class="gesture"></div>335</div>336</body>337</html>