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; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#20160f; color:#f4e8dc; font-family: "Segoe UI", Arial, sans-serif;11 }12 .status-bar {13 position:absolute; top:24px; left:0; right:0; height:72px;14 padding:0 40px; display:flex; align-items:center; justify-content:space-between;15 color:#f8f1e6; font-size:36px; font-weight:600;16 }17 .status-right { display:flex; gap:26px; align-items:center; }18 .search-wrap {19 position:absolute; top:112px; left:40px; right:40px; height:120px;20 display:flex; align-items:center; gap:24px;21 background:#3a2a20; border-radius:60px; padding:0 28px;22 }23 .search-wrap .placeholder { color:#c9b5a3; font-size:40px; flex:1; }24 .avatar {25 width:96px; height:96px; border-radius:50%;26 background:#cc2f6f; display:flex; align-items:center; justify-content:center;27 color:#fff; font-weight:700; font-size:44px; box-shadow:0 0 0 6px rgba(0,0,0,0.25);28 }29 .tabs {30 position:absolute; top:276px; left:40px; right:40px; height:100px;31 display:flex; align-items:flex-end; justify-content:space-between; color:#d8c7b7;32 }33 .tab { font-size:40px; padding-bottom:26px; }34 .underline {35 position:absolute; left:40px; right:54%; bottom:0; height:6px; background:#f0a362; border-radius:3px;36 }37 .files-header {38 position:absolute; top:390px; left:40px; right:40px; height:72px;39 display:flex; align-items:center; justify-content:space-between; color:#cbb7a6; font-size:36px;40 border-bottom:1px solid rgba(255,255,255,0.06);41 }42 .grid-icon { width:52px; height:52px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }43 .grid-icon span { background:#564133; border-radius:6px; }44 .list {45 position:absolute; top:480px; left:40px; right:40px; bottom:360px; overflow:hidden;46 }47 .file-item {48 display:flex; align-items:flex-start; gap:28px; padding:36px 0;49 border-bottom:1px solid rgba(255,255,255,0.04);50 }51 .type-icon {52 width:70px; height:70px; border-radius:12px; display:flex; align-items:center; justify-content:center;53 color:#2b2119; font-weight:800; font-size:34px; border:1px solid rgba(255,255,255,0.1);54 }55 .type-yellow { background:#f1d45d; }56 .type-peach { background:#e88c73; color:#492a1f; }57 .type-pdf { background:#d98282; color:#3a2a20; font-size:26px; font-weight:700; }58 .type-blue { background:#75a7ff; color:#0f1a2c; }59 .file-text { flex:1; }60 .file-title { font-size:44px; font-weight:600; color:#efe3d7; }61 .file-sub { font-size:28px; color:#b9a796; margin-top:6px; }62 .more {63 width:48px; height:96px; display:flex; align-items:center; justify-content:center;64 }65 .more svg { fill:#cbb7a6; }66 .fab-camera {67 position:absolute; right:40px; bottom:420px; width:120px; height:120px; border-radius:50%;68 background:#405c3f; display:flex; align-items:center; justify-content:center;69 box-shadow:0 12px 24px rgba(0,0,0,0.35);70 }71 .fab-new {72 position:absolute; right:40px; bottom:260px; height:120px; width:240px;73 background:#5a4233; border-radius:28px; display:flex; align-items:center; justify-content:center; gap:18px;74 color:#f4e8dc; font-size:40px; font-weight:600; box-shadow:0 12px 24px rgba(0,0,0,0.35);75 }76 .bottom-nav {77 position:absolute; left:0; right:0; bottom:0; height:220px; background:#3a2a20;78 display:flex; align-items:center; justify-content:space-around; color:#d8c7b7;79 box-shadow:0 -6px 20px rgba(0,0,0,0.4);80 }81 .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; font-size:34px; }82 .nav-icon {83 width:84px; height:84px; border-radius:24px; display:flex; align-items:center; justify-content:center;84 }85 .nav-active { background:#6a5444; color:#f5e9dc; }86 .gesture {87 position:absolute; bottom:228px; left:50%; transform:translateX(-50%);88 width:420px; height:14px; border-radius:7px; background:#e6e0da; opacity:0.8;89 }90</style>91</head>92<body>93<div id="render-target">94 95 <!-- Status bar -->96 <div class="status-bar">97 <div>9:13</div>98 <div class="status-right">99 <!-- simple network icon -->100 <svg width="40" height="40" viewBox="0 0 24 24">101 <path fill="#f8f1e6" d="M2 17l10-10 10 10-3 3-7-7-7 7-3-3z"/>102 </svg>103 <!-- battery icon -->104 <svg width="44" height="44" viewBox="0 0 24 24">105 <rect x="2" y="6" width="18" height="12" rx="2" fill="none" stroke="#f8f1e6" stroke-width="2"/>106 <rect x="20" y="10" width="2" height="4" fill="#f8f1e6"/>107 <rect x="4" y="8" width="12" height="8" fill="#f8f1e6"/>108 </svg>109 </div>110 </div>111 112 <!-- Search bar -->113 <div class="search-wrap">114 <!-- hamburger -->115 <svg width="70" height="70" viewBox="0 0 24 24">116 <path fill="#d8c7b7" d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/>117 </svg>118 <div class="placeholder">Search in Drive</div>119 <div class="avatar">C</div>120 </div>121 122 <!-- Tabs -->123 <div class="tabs">124 <div class="tab" style="color:#f5e7d8;">Suggested</div>125 <div class="tab">Activity</div>126 <div class="underline"></div>127 </div>128 129 <!-- Files header -->130 <div class="files-header">131 <div>Files</div>132 <div class="grid-icon">133 <span></span><span></span><span></span><span></span>134 </div>135 </div>136 137 <!-- File list -->138 <div class="list">139 140 <div class="file-item">141 <div class="type-icon type-yellow"></div>142 <div class="file-text">143 <div class="file-title">Globalisation</div>144 <div class="file-sub">You opened • 8:21 AM</div>145 </div>146 <div class="more">147 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>148 </div>149 </div>150 151 <div class="file-item">152 <div class="type-icon type-peach">P</div>153 <div class="file-text">154 <div class="file-title">Greenwood .pptx</div>155 <div class="file-sub">You opened • 8:15 AM</div>156 </div>157 <div class="more">158 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>159 </div>160 </div>161 162 <div class="file-item">163 <div class="type-icon type-yellow"></div>164 <div class="file-text">165 <div class="file-title">Greenery</div>166 <div class="file-sub">You opened • 8:13 AM</div>167 </div>168 <div class="more">169 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>170 </div>171 </div>172 173 <div class="file-item">174 <div class="type-icon type-pdf">PDF</div>175 <div class="file-text">176 <div class="file-title">Biography.pdf</div>177 <div class="file-sub">You opened • 8:13 AM</div>178 </div>179 <div class="more">180 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>181 </div>182 </div>183 184 <div class="file-item">185 <div class="type-icon type-pdf">PDF</div>186 <div class="file-text">187 <div class="file-title">Amsterdam.pdf</div>188 <div class="file-sub">You opened • 8:13 AM</div>189 </div>190 <div class="more">191 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>192 </div>193 </div>194 195 <div class="file-item">196 <div class="type-icon type-pdf">PDF</div>197 <div class="file-text">198 <div class="file-title">Greenery.pdf</div>199 <div class="file-sub">You opened • 8:13 AM</div>200 </div>201 <div class="more">202 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>203 </div>204 </div>205 206 <div class="file-item">207 <div class="type-icon type-pdf">PDF</div>208 <div class="file-text">209 <div class="file-title">Biography.pdf</div>210 <div class="file-sub">You opened • 8:15 AM</div>211 </div>212 <div class="more">213 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>214 </div>215 </div>216 217 <div class="file-item">218 <div class="type-icon type-blue"></div>219 <div class="file-text">220 <div class="file-title">Biography</div>221 <div class="file-sub">You opened • Oct 6, 2023</div>222 </div>223 <div class="more">224 <svg width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>225 </div>226 </div>227 228 </div>229 230 <!-- Floating actions -->231 <div class="fab-camera">232 <svg width="60" height="60" viewBox="0 0 24 24">233 <path fill="#f5e9dc" d="M7 7h3l2-2h4l2 2h2v12H4V7h3zm1 3a6 6 0 1012 0 6 6 0 00-12 0zm6 4a4 4 0 110-8 4 4 0 010 8z"/>234 </svg>235 </div>236 237 <div class="fab-new">238 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#f4e8dc" d="M11 5h2v14h-2zM5 11h14v2H5z"/></svg>239 <div>New</div>240 </div>241 242 <!-- Bottom nav -->243 <div class="bottom-nav">244 <div class="nav-item">245 <div class="nav-icon nav-active">246 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#f5e9dc" d="M12 3l9 8v10h-6v-6H9v6H3V11z"/></svg>247 </div>248 <div style="color:#f5e9dc;">Home</div>249 </div>250 <div class="nav-item">251 <div class="nav-icon">252 <svg width="40" height="40" viewBox="0 0 24 24"><path fill="#d8c7b7" d="M12 17.3l-6.16 3.24 1.18-6.88-5-4.86 6.91-1L12 1l3.07 6.8 6.91 1-5 4.86 1.18 6.88z"/></svg>253 </div>254 <div>Starred</div>255 </div>256 <div class="nav-item">257 <div class="nav-icon">258 <svg width="44" height="44" viewBox="0 0 24 24"><path fill="#d8c7b7" d="M12 12a4 4 0 100-8 4 4 0 000 8zm-7 9v-1a7 7 0 0114 0v1H5z"/></svg>259 </div>260 <div>Shared</div>261 </div>262 <div class="nav-item">263 <div class="nav-icon">264 <svg width="42" height="42" viewBox="0 0 24 24"><path fill="#d8c7b7" d="M3 6h18v12H3zM5 8v8h14V8z"/></svg>265 </div>266 <div>Files</div>267 </div>268 </div>269 270 <div class="gesture"></div>271 272</div>273</body>274</html>