GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Drive Dark UI Mock</title>6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #24160E; color: #EAD7C6;12 }13 .status-bar {14 position: absolute; top: 0; left: 0; right: 0;15 height: 110px; background: #1A120C; color: #EAD7C6;16 padding: 0 40px; display: flex; align-items: center; justify-content: space-between;17 font-size: 40px; letter-spacing: 0.5px;18 }19 .status-icons { display: flex; gap: 24px; align-items: center; }20 .search-area {21 position: absolute; top: 110px; left: 0; right: 0; height: 140px;22 padding: 0 32px; display: flex; align-items: center;23 background: #24160E;24 }25 .search-pill {26 height: 96px; width: 100%; border-radius: 48px;27 background: #4A3A2E; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);28 display: flex; align-items: center; padding: 0 28px; gap: 22px;29 color: #EAD7C6; font-size: 40px;30 }31 .avatar {32 margin-left: auto; width: 86px; height: 86px; border-radius: 43px;33 background: #D73F7C; display: flex; align-items: center; justify-content: center;34 font-weight: bold; color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,0.2);35 }36 .tabs {37 position: absolute; top: 250px; left: 0; right: 0; height: 120px;38 display: flex; align-items: flex-end; justify-content: space-between;39 padding: 0 48px; color: #D8C2AF; font-size: 40px;40 border-bottom: 1px solid rgba(255,255,255,0.08);41 }42 .tab-active { color: #F0C089; position: relative; padding-bottom: 26px; }43 .tab-active::after {44 content: ""; position: absolute; left: 0; bottom: -1px; width: 360px; height: 8px;45 background: #E39B58; border-radius: 6px;46 }47 .files-header {48 position: absolute; top: 370px; left: 40px; right: 40px; height: 80px;49 display: flex; align-items: center; justify-content: space-between;50 color: #D8C2AF; font-size: 34px;51 }52 .list {53 position: absolute; top: 450px; left: 20px; right: 20px; bottom: 330px;54 overflow: hidden;55 }56 .row {57 display: flex; align-items: center;58 padding: 34px 20px; border-bottom: 1px solid rgba(255,255,255,0.06);59 }60 .file-title { font-size: 44px; color: #EAD7C6; }61 .file-sub { font-size: 30px; color: #B59B86; margin-top: 6px; display: flex; align-items: center; gap: 12px; }62 .file-left { display: flex; align-items: center; gap: 28px; flex: 1; }63 .kebab { width: 40px; height: 40px; }64 .badge {65 width: 70px; height: 70px; border-radius: 12px; display: flex; align-items: center; justify-content: center;66 color: #3C2D20; font-weight: bold; border: 1px solid rgba(0,0,0,0.2);67 }68 .folder { background: #FFD966; }69 .pdf { background: #E66A6A; color: #fff; font-size: 26px; }70 .ppt { background: #F39B62; color: #fff; font-size: 36px; }71 .doc { background: #6FA8FF; color: #fff; font-size: 30px; }72 /* Floating actions */73 .fab-camera {74 position: absolute; right: 48px; bottom: 420px;75 width: 140px; height: 140px; border-radius: 70px;76 background: #406A3A; display: flex; align-items: center; justify-content: center;77 box-shadow: 0 12px 22px rgba(0,0,0,0.4);78 }79 .new-pill {80 position: absolute; right: 180px; bottom: 300px;81 height: 120px; width: 240px; border-radius: 28px;82 background: #5A4538; color: #EAD7C6; display: flex; align-items: center; justify-content: center;83 gap: 16px; font-size: 42px; box-shadow: 0 10px 18px rgba(0,0,0,0.45);84 }85 .toast {86 position: absolute; left: 50%; transform: translateX(-50%);87 bottom: 220px; width: 860px; height: 120px; border-radius: 60px;88 background: #5B544F; color: #EAD7C6; display: flex; align-items: center; gap: 22px;89 padding: 0 28px; box-shadow: 0 8px 16px rgba(0,0,0,0.35);90 font-size: 34px;91 }92 .drive-icon { width: 74px; height: 74px; border-radius: 37px; background: #3E3E3E; display: flex; align-items: center; justify-content: center; }93 /* Bottom nav */94 .bottom-nav {95 position: absolute; left: 0; right: 0; bottom: 0; height: 170px;96 background: #2A1C12; border-top: 1px solid rgba(255,255,255,0.06);97 display: flex; align-items: center; justify-content: space-around;98 color: #CDB7A5; font-size: 30px;99 }100 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; }101 .nav-active-label { color: #F0C089; }102 .nav-active-bubble {103 position: absolute; left: 40px; bottom: 126px; width: 120px; height: 84px;104 background: #4A3A2E; border-radius: 42px;105 }106 .gesture {107 position: absolute; left: 50%; transform: translateX(-50%);108 bottom: 20px; width: 240px; height: 12px; border-radius: 6px; background: #EEE;109 opacity: 0.85;110 }111 /* Small helpers */112 .icon { width: 46px; height: 46px; }113 .person-dot { width: 34px; height: 34px; border-radius: 17px; background: #B59B86; display: inline-block; }114</style>115</head>116<body>117<div id="render-target">118 119 <!-- Status bar -->120 <div class="status-bar">121 <div>9:16</div>122 <div class="status-icons">123 <!-- two small status icons -->124 <svg class="icon" viewBox="0 0 24 24"><path fill="#DCC7B4" d="M12 2L2 12h5v8h10v-8h5L12 2z"/></svg>125 <!-- wifi -->126 <svg class="icon" viewBox="0 0 24 24"><path fill="#EAD7C6" d="M12 18a2 2 0 1 0 0.001 0z"/><path fill="#EAD7C6" d="M2 9c5-5 15-5 20 0l-2 2c-4-4-12-4-16 0L2 9z"/><path fill="#EAD7C6" d="M6 13c3-3 9-3 12 0l-2 2c-2-2-6-2-8 0l-2-2z"/></svg>127 <!-- battery -->128 <svg class="icon" viewBox="0 0 24 24"><rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#EAD7C6" stroke-width="2"/><rect x="4" y="8" width="12" height="8" fill="#EAD7C6"/><rect x="20" y="10" width="2" height="6" fill="#EAD7C6"/></svg>129 </div>130 </div>131 132 <!-- Search -->133 <div class="search-area">134 <div class="search-pill">135 <!-- hamburger -->136 <svg class="icon" viewBox="0 0 24 24"><path fill="#EAD7C6" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>137 <span>Search in Drive</span>138 <div class="avatar">C</div>139 </div>140 </div>141 142 <!-- Tabs -->143 <div class="tabs">144 <div class="tab-active">Suggested</div>145 <div>Activity</div>146 </div>147 148 <!-- Files header -->149 <div class="files-header">150 <div>Files</div>151 <svg class="icon" viewBox="0 0 24 24"><path fill="#D8C2AF" d="M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm10 8v-8h8v8h-8z"/></svg>152 </div>153 154 <!-- List -->155 <div class="list">156 157 <div class="row">158 <div class="file-left">159 <div class="badge folder"></div>160 <div>161 <div class="file-title">Globalisation</div>162 <div class="file-sub">163 <span class="person-dot"></span>164 <span>You opened • 8:21 AM</span>165 </div>166 </div>167 </div>168 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>169 </div>170 171 <div class="row">172 <div class="file-left">173 <div class="badge ppt">P</div>174 <div>175 <div class="file-title">Greenwood .pptx</div>176 <div class="file-sub">You opened • 8:15 AM</div>177 </div>178 </div>179 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>180 </div>181 182 <div class="row">183 <div class="file-left">184 <div class="badge folder"></div>185 <div>186 <div class="file-title">Greenery</div>187 <div class="file-sub">You opened • 8:13 AM</div>188 </div>189 </div>190 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>191 </div>192 193 <div class="row">194 <div class="file-left">195 <div class="badge pdf">PDF</div>196 <div>197 <div class="file-title">Biography.pdf</div>198 <div class="file-sub">You opened • 8:13 AM</div>199 </div>200 </div>201 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>202 </div>203 204 <div class="row">205 <div class="file-left">206 <div class="badge pdf">PDF</div>207 <div>208 <div class="file-title">Amsterdam.pdf</div>209 <div class="file-sub">You opened • 8:13 AM</div>210 </div>211 </div>212 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>213 </div>214 215 <div class="row">216 <div class="file-left">217 <div class="badge pdf">PDF</div>218 <div>219 <div class="file-title">Greenery.pdf</div>220 <div class="file-sub">You opened • 8:13 AM</div>221 </div>222 </div>223 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>224 </div>225 226 <div class="row">227 <div class="file-left">228 <div class="badge pdf">PDF</div>229 <div>230 <div class="file-title">Biography.pdf</div>231 <div class="file-sub">You opened • 8:15 AM</div>232 </div>233 </div>234 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>235 </div>236 237 <div class="row">238 <div class="file-left">239 <div class="badge doc">DOC</div>240 <div>241 <div class="file-title">Biography</div>242 <div class="file-sub">You opened • 8:13 AM</div>243 </div>244 </div>245 <svg class="kebab" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2" fill="#C9B3A0"/><circle cx="12" cy="12" r="2" fill="#C9B3A0"/><circle cx="12" cy="19" r="2" fill="#C9B3A0"/></svg>246 </div>247 248 </div>249 250 <!-- Floating Camera FAB -->251 <div class="fab-camera">252 <svg viewBox="0 0 24 24" width="70" height="70">253 <path fill="#FFFFFF" d="M6 7h3l2-2h6l2 2h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2z"/>254 <circle cx="12" cy="13" r="4" fill="#2B7A3F"/>255 <circle cx="12" cy="13" r="2.2" fill="#FFFFFF"/>256 </svg>257 </div>258 259 <!-- New button -->260 <div class="new-pill">261 <svg viewBox="0 0 24 24" width="40" height="40"><path fill="#F0C089" d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>262 <span>New</span>263 </div>264 265 <!-- Toast -->266 <div class="toast">267 <div class="drive-icon">268 <svg viewBox="0 0 24 24" width="42" height="42">269 <polygon points="12,2 7,11 12,20 17,11" fill="#2E7D32"/>270 <polygon points="12,2 17,11 22,11 17,2" fill="#1976D2"/>271 <polygon points="7,11 12,20 2,20 2,11" fill="#F9A825"/>272 </svg>273 </div>274 <div>Your 1 file is being uploaded to: My Drive</div>275 </div>276 277 <!-- Bottom navigation -->278 <div class="nav-active-bubble"></div>279 <div class="bottom-nav">280 <div class="nav-item">281 <svg class="icon" viewBox="0 0 24 24"><path fill="#F0C089" d="M12 3l9 8h-3v9H6v-9H3l9-8z"/></svg>282 <div class="nav-active-label">Home</div>283 </div>284 <div class="nav-item">285 <svg class="icon" viewBox="0 0 24 24"><path fill="#CDB7A5" d="M12 2l3 7h7l-5.5 4 2.5 7-7-4.5-7 4.5L7.5 13 2 9h7z"/></svg>286 <div>Starred</div>287 </div>288 <div class="nav-item">289 <svg class="icon" viewBox="0 0 24 24"><path fill="#CDB7A5" d="M12 12a4 4 0 1 0 0.001-8.001A4 4 0 0 0 12 12zm-8 9c0-4 4-6 8-6s8 2 8 6v1H4v-1z"/></svg>290 <div>Shared</div>291 </div>292 <div class="nav-item">293 <svg class="icon" viewBox="0 0 24 24"><path fill="#CDB7A5" d="M4 3h16v18H4V3zm4 4h8v2H8V7zm0 4h8v2H8v-2zm0 4h8v2H8v-2z"/></svg>294 <div>Files</div>295 </div>296 </div>297 298 <div class="gesture"></div>299 300</div>301</body>302</html>