GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=1440, 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: 1440px; height: 3120px;11    position: relative; overflow: hidden;12    background: #121212; color: #EDEDED;13  }14 15  /* Top status bar */16  .status-bar {17    height: 120px;18    padding: 0 48px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #FFFFFF;23    font-weight: 600;24    font-size: 40px;25  }26  .status-right { display: flex; align-items: center; gap: 28px; }27  .status-icon svg { width: 40px; height: 40px; fill: #CFCFCF; }28 29  /* Search */30  .search-area { padding: 12px 40px 0 40px; }31  .search-row {32    display: flex; align-items: center; gap: 30px;33  }34  .hamburger {35    width: 80px; height: 80px; border-radius: 40px; display: flex; align-items: center; justify-content: center;36  }37  .search-bar {38    flex: 1;39    height: 120px;40    background: #1f2d23;41    border-radius: 60px;42    display: flex; align-items: center; padding: 0 40px; color: #9FB19E;43    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);44    font-size: 44px; letter-spacing: 0.2px;45  }46  .search-bar svg { width: 48px; height: 48px; fill: #9FB19E; margin-right: 24px; }47  .avatar {48    width: 96px; height: 96px; border-radius: 48px; background: #2D4B35; color: #E6F5E8;49    display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 48px;50  }51 52  /* Tabs */53  .tabs {54    display: flex; gap: 60px; padding: 28px 60px 24px 60px; align-items: center; font-size: 44px;55  }56  .tab { color: #9FA5A1; }57  .tab.active { color: #9ED38D; font-weight: 700; }58  .tab-indicator {59    width: 160px; height: 10px; background: #8FD57A; border-radius: 6px; margin-left: 60px;60  }61  .divider { height: 2px; background: #2A2A2A; margin-top: 18px; }62 63  /* File card list */64  .file-card {65    margin: 40px 40px 60px 40px;66    padding: 40px 40px 32px 40px;67    border-radius: 36px;68    background: #1A1A1A;69    box-shadow: 0 2px 0 rgba(255,255,255,0.04);70  }71  .file-head {72    display: flex; align-items: center; justify-content: space-between;73  }74  .file-left {75    display: flex; align-items: center; gap: 28px;76    font-size: 44px; font-weight: 600;77  }78  .badge {79    width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center;80    color: #FFFFFF; font-weight: 800; font-size: 36px;81  }82  .badge.pdf { background: #D84545; }83  .badge.doc { background: #5B84E8; }84  .kebab { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }85  .kebab svg { width: 12px; height: 48px; fill: #CFCFCF; }86 87  .preview {88    margin-top: 28px;89    width: 100%;90    height: 560px;91    border-radius: 28px;92    background: #E0E0E0;93    border: 1px solid #BDBDBD;94    display: flex; align-items: center; justify-content: center;95    color: #757575; font-size: 44px;96  }97 98  .meta-row {99    display: flex; align-items: center; gap: 24px; margin: 24px 40px 40px 40px; font-size: 40px; color: #C9D6CE;100  }101  .meta-avatar {102    width: 92px; height: 92px; border-radius: 46px; background: #2D4B35; color: #E6F5E8; display: flex;103    align-items: center; justify-content: center; font-weight: 700; font-size: 44px;104  }105 106  /* FAB */107  .fab {108    position: absolute; right: 60px; bottom: 860px;109    width: 160px; height: 160px; border-radius: 80px;110    background: #2D4B35; color: #E6F5E8; display: flex; align-items: center; justify-content: center;111    box-shadow: 0 10px 24px rgba(0,0,0,0.45);112  }113  .fab svg { width: 90px; height: 90px; fill: #E6F5E8; }114 115  /* Bottom navigation */116  .bottom-nav {117    position: absolute; left: 0; right: 0; bottom: 0;118    height: 240px; background: #151515; border-top: 1px solid #262626;119    display: flex; align-items: center; justify-content: space-around;120  }121  .nav-item { display: flex; flex-direction: column; align-items: center; gap: 16px; color: #CFCFCF; font-size: 38px; }122  .nav-item svg { width: 54px; height: 54px; fill: #CFCFCF; }123  .nav-item.active {124    color: #E6F5E8;125  }126  .active .pill {127    background: #2D4B35;128    color: #E6F5E8;129    border-radius: 48px;130    padding: 24px 38px;131    display: flex; align-items: center; gap: 18px;132  }133  .active .pill svg { fill: #E6F5E8; width: 56px; height: 56px; }134 135  /* Gesture bar */136  .gesture {137    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);138    width: 320px; height: 18px; border-radius: 10px; background: #EDEDED; opacity: 0.8;139  }140</style>141</head>142<body>143<div id="render-target">144 145  <!-- Status Bar -->146  <div class="status-bar">147    <div>5:33</div>148    <div class="status-right">149      <div class="status-icon">150        <!-- temperature -->151        <span style="font-size:36px;color:#CFCFCF;">96°</span>152      </div>153      <div class="status-icon">154        <!-- battery -->155        <svg viewBox="0 0 24 24"><path d="M18 6h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-1v2h-2v-2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h10zM6 8v8h12V8H6z"/></svg>156      </div>157      <div class="status-icon">158        <!-- wifi -->159        <svg viewBox="0 0 24 24"><path d="M12 18l2-2-2-2-2 2 2 2zm-6-6 2-2 4 4 4-4 2 2-6 6-6-6zm-4-4 2-2 8 8 8-8 2 2-10 10L2 8z"/></svg>160      </div>161    </div>162  </div>163 164  <!-- Search Row -->165  <div class="search-area">166    <div class="search-row">167      <div class="hamburger">168        <svg viewBox="0 0 24 24" width="64" height="64" fill="#CFCFCF"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>169      </div>170      <div class="search-bar">171        <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.47 6.47 0 0 0 4.23-1.57l.27.28v.79L20 21l1-1-5.5-6zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/></svg>172        <span>Search in Drive</span>173      </div>174      <div class="avatar">C</div>175    </div>176  </div>177 178  <!-- Tabs -->179  <div class="tabs">180    <div class="tab active">Suggested</div>181    <div class="tab">Notifications</div>182  </div>183  <div class="tab-indicator"></div>184  <div class="divider"></div>185 186  <!-- First File Card -->187  <div class="file-card">188    <div class="file-head">189      <div class="file-left">190        <div class="badge pdf">PDF</div>191        <div>08.24_dinner-veg (3).pdf</div>192      </div>193      <div class="kebab">194        <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>195      </div>196    </div>197    <div class="preview">[IMG: PDF Preview - Menu page]</div>198  </div>199 200  <div class="meta-row">201    <div class="meta-avatar">C</div>202    <div>You edited today</div>203  </div>204 205  <!-- Second File Card -->206  <div class="file-card">207    <div class="file-head">208      <div class="file-left">209        <div class="badge doc">TXT</div>210        <div>agents.txt</div>211      </div>212      <div class="kebab">213        <svg viewBox="0 0 6 24"><circle cx="3" cy="4" r="2"/><circle cx="3" cy="12" r="2"/><circle cx="3" cy="20" r="2"/></svg>214      </div>215    </div>216    <div class="preview">[IMG: Text file preview]</div>217  </div>218 219  <!-- Floating Action Button -->220  <div class="fab">221    <svg viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>222  </div>223 224  <!-- Bottom Navigation -->225  <div class="bottom-nav">226    <div class="nav-item active">227      <div class="pill">228        <svg viewBox="0 0 24 24"><path d="M12 3 2 12h3v8h6v-5h2v5h6v-8h3L12 3z"/></svg>229        <span>Home</span>230      </div>231    </div>232    <div class="nav-item">233      <svg viewBox="0 0 24 24"><path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>234      <span>Starred</span>235    </div>236    <div class="nav-item">237      <svg viewBox="0 0 24 24"><path d="M16 11c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3zm-8 0c1.66 0 3-1.34 3-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.67 0-8 1.34-8 4v2h12v-2c0-2.66-5.33-4-8-4zm8 0c-.59 0-1.16.06-1.7.16 1.95 1.11 3.7 2.63 3.7 4.84V19h8v-2c0-2.66-5.33-4-10-4z"/></svg>238      <span>Shared</span>239    </div>240    <div class="nav-item">241      <svg viewBox="0 0 24 24"><path d="M4 4h16v4H4V4zm0 6h16v10H4V10zm2 2v6h12v-6H6z"/></svg>242      <span>Files</span>243    </div>244  </div>245 246  <div class="gesture"></div>247</div>248</body>249</html>