GD-ML/AndroidCode

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 Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #2b2327; /* dark, slightly warm */15    color: #f3eef3;16  }17  *, *::before, *::after { box-sizing: border-box; }18 19  /* Status bar */20  .status-bar {21    height: 88px;22    padding: 0 32px;23    display: flex;24    align-items: center;25    justify-content: space-between;26    color: #efe7ee;27    font-weight: 600;28    font-size: 36px;29    letter-spacing: 0.5px;30  }31  .status-icons {32    display: flex;33    align-items: center;34    gap: 18px;35  }36  .dot { width: 10px; height: 10px; background: #cfc1c8; border-radius: 50%; opacity: 0.8; }37  .battery {38    width: 42px; height: 22px; border: 3px solid #e8dde4; border-radius: 4px; position: relative;39  }40  .battery::after { content: ""; position: absolute; right: -8px; top: 5px; width: 6px; height: 12px; background: #e8dde4; border-radius: 2px; }41  .battery-fill { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 8px; background: #e8dde4; border-radius: 2px; }42 43  /* Search bar */44  .search-wrap { padding: 12px 36px 8px; }45  .search-bar {46    height: 112px;47    background: #3a3137;48    border-radius: 56px;49    display: flex;50    align-items: center;51    padding: 0 32px;52    gap: 26px;53    color: #d9c9d1;54  }55  .search-placeholder { font-size: 36px; color: #d8c8cf; opacity: 0.9; }56  .avatar {57    margin-left: auto;58    width: 88px; height: 88px;59    background: #1a78c0;60    color: #fff;61    border-radius: 50%;62    display: flex; align-items: center; justify-content: center;63    font-weight: 700; font-size: 44px;64  }65 66  /* Tabs */67  .tabs {68    display: flex;69    gap: 52px;70    padding: 24px 36px 0;71    color: #f08fb2;72    font-weight: 700;73    font-size: 36px;74  }75  .tab { color: #f08fb2; position: relative; padding: 18px 0; }76  .tab.inactive { color: #c9b6be; font-weight: 600; }77  .tab.active::after {78    content: ""; position: absolute; left: 0; bottom: 0;79    width: 160px; height: 12px; background: #f08fb2; border-radius: 6px;80  }81  .divider { height: 2px; background: #3c3237; margin: 16px 0; }82 83  /* File card */84  .section { padding: 8px 36px; }85  .file-card { padding: 24px 0 8px; }86  .file-header {87    display: flex; align-items: center; justify-content: space-between;88    margin-bottom: 20px;89  }90  .file-title {91    display: flex; align-items: center; gap: 22px;92    font-size: 42px; font-weight: 700; color: #f1e9f0;93  }94  .type-icon {95    width: 64px; height: 64px; border-radius: 12px; background: #cc6d76;96    display: flex; align-items: center; justify-content: center;97  }98  .three-dots { width: 40px; height: 40px; opacity: 0.9; }99  .preview {100    width: 100%;101    height: 520px;102    background: #E0E0E0;103    border: 1px solid #BDBDBD;104    border-radius: 28px;105    color: #757575;106    display: flex; align-items: center; justify-content: center;107    font-size: 36px; font-weight: 600;108  }109  .activity {110    display: flex; align-items: center; gap: 22px;111    margin: 26px 0 12px;112  }113  .avatar-small {114    width: 80px; height: 80px; border-radius: 50%;115    background: #1a78c0; color: #fff; display: flex; align-items: center; justify-content: center;116    font-weight: 700; font-size: 40px;117  }118  .muted { color: #cdbec6; font-size: 34px; }119 120  .spacer { height: 28px; }121  .big-divider { height: 3px; background: #3c3237; margin: 18px 0; }122 123  /* Snackbar */124  .snackbar {125    position: absolute; left: 24px; right: 24px; bottom: 220px;126    background: #e7dfe3;127    color: #3a3137;128    border-radius: 20px;129    padding: 28px 28px;130    box-shadow: 0 8px 20px rgba(0,0,0,0.35);131    font-size: 34px; font-weight: 600;132  }133 134  /* Bottom navigation */135  .bottom-nav {136    position: absolute; left: 0; right: 0; bottom: 70px;137    height: 180px; background: #3a3137;138    display: flex; align-items: center; justify-content: space-around;139    padding: 0 36px;140    border-top: 2px solid #3f353a;141  }142  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #cbbcc4; font-size: 30px; font-weight: 700; }143  .nav-item .icon { width: 54px; height: 54px; }144  .nav-item.active {145    color: #ffffff;146    background: rgba(240, 143, 178, 0.25);147    padding: 22px 28px;148    border-radius: 34px;149  }150 151  /* Gesture bar */152  .gesture { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 320px; height: 10px; border-radius: 8px; background: #d7cbd1; opacity: 0.9; }153</style>154</head>155<body>156<div id="render-target">157 158  <!-- Status bar -->159  <div class="status-bar">160    <div>5:18</div>161    <div class="status-icons">162      <div class="dot"></div>163      <div class="dot"></div>164      <div class="dot"></div>165      <div class="battery"><div class="battery-fill"></div></div>166    </div>167  </div>168 169  <!-- Search -->170  <div class="search-wrap">171    <div class="search-bar">172      <!-- Hamburger -->173      <svg width="48" height="48" viewBox="0 0 24 24" fill="none">174        <rect x="3" y="6" width="18" height="2" fill="#d8c8cf"></rect>175        <rect x="3" y="11" width="18" height="2" fill="#d8c8cf"></rect>176        <rect x="3" y="16" width="18" height="2" fill="#d8c8cf"></rect>177      </svg>178      <div class="search-placeholder">Search in Drive</div>179      <div class="avatar">K</div>180    </div>181  </div>182 183  <!-- Tabs -->184  <div class="tabs">185    <div class="tab active">Suggested</div>186    <div class="tab inactive">Notifications</div>187  </div>188  <div class="divider"></div>189 190  <!-- First Card -->191  <div class="section">192    <div class="file-card">193      <div class="file-header">194        <div class="file-title">195          <div class="type-icon">196            <!-- simple clapper-like video icon -->197            <svg width="38" height="38" viewBox="0 0 24 24">198              <rect x="3" y="6" width="18" height="12" rx="2" fill="#fff" opacity="0.9"></rect>199              <polygon points="10,10 15,12 10,14" fill="#cc6d76"></polygon>200            </svg>201          </div>202          <div>Outdoor yoga.mp4</div>203        </div>204        <svg class="three-dots" viewBox="0 0 24 24">205          <circle cx="12" cy="5" r="2" fill="#cfbec8"></circle>206          <circle cx="12" cy="12" r="2" fill="#cfbec8"></circle>207          <circle cx="12" cy="19" r="2" fill="#cfbec8"></circle>208        </svg>209      </div>210 211      <div class="preview">[IMG: Outdoor yoga video preview]</div>212 213      <div class="activity">214        <div class="avatar-small">K</div>215        <div class="muted">You edited just now</div>216      </div>217    </div>218  </div>219 220  <div class="big-divider"></div>221 222  <!-- Second Card -->223  <div class="section">224    <div class="file-card">225      <div class="file-header">226        <div class="file-title">227          <div class="type-icon">228            <!-- image icon -->229            <svg width="38" height="38" viewBox="0 0 24 24">230              <rect x="3" y="5" width="18" height="14" rx="2" fill="#fff" opacity="0.95"></rect>231              <circle cx="9" cy="11" r="2" fill="#cc6d76"></circle>232              <path d="M6 17l4-4 3 3 2-2 3 3" stroke="#cc6d76" stroke-width="2" fill="none"></path>233            </svg>234          </div>235          <div>Pizza.jpeg</div>236        </div>237        <svg class="three-dots" viewBox="0 0 24 24">238          <circle cx="12" cy="5" r="2" fill="#cfbec8"></circle>239          <circle cx="12" cy="12" r="2" fill="#cfbec8"></circle>240          <circle cx="12" cy="19" r="2" fill="#cfbec8"></circle>241        </svg>242      </div>243 244      <div class="preview">[IMG: Pizza slice photo]</div>245    </div>246  </div>247 248  <!-- Snackbar -->249  <div class="snackbar">1 item will be downloaded. See notification for details.</div>250 251  <!-- Bottom Navigation -->252  <div class="bottom-nav">253    <div class="nav-item active">254      <svg class="icon" viewBox="0 0 24 24" fill="#ffffff">255        <path d="M12 3l9 7h-3v8h-12v-8h-3z"></path>256      </svg>257      <div>Home</div>258    </div>259    <div class="nav-item">260      <svg class="icon" viewBox="0 0 24 24" fill="#cbbcc4">261        <path d="M12 17.3l-5.1 3 1.4-5.9-4.3-3.7 5.6-.5 2.4-5.2 2.4 5.2 5.6.5-4.3 3.7 1.4 5.9z"></path>262      </svg>263      <div>Starred</div>264    </div>265    <div class="nav-item">266      <svg class="icon" viewBox="0 0 24 24" fill="#cbbcc4">267        <circle cx="12" cy="8" r="4"></circle>268        <path d="M4 20c0-4 3-6 8-6s8 2 8 6" fill="#cbbcc4"></path>269      </svg>270      <div>Shared</div>271    </div>272    <div class="nav-item">273      <svg class="icon" viewBox="0 0 24 24" fill="#cbbcc4">274        <path d="M3 7h7l2 2h9v9a2 2 0 0 1-2 2h-16a2 2 0 0 1-2-2z"></path>275      </svg>276      <div>Files</div>277    </div>278  </div>279 280  <!-- Gesture bar -->281  <div class="gesture"></div>282</div>283</body>284</html>