GD-ML/AndroidCode

1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Mobile UI - Home Files</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #0B0B0B;14    color: #FFFFFF;15  }16 17  /* Status bar */18  .status-bar {19    height: 110px;20    background: #1B1B1B;21    display: flex;22    align-items: center;23    padding: 0 36px;24    box-sizing: border-box;25    font-weight: 600;26    letter-spacing: 0.2px;27  }28  .status-left { font-size: 42px; }29  .status-right {30    margin-left: auto;31    display: flex;32    align-items: center;33    gap: 26px;34  }35  .sb-icon svg { fill: #E6E6E6; }36 37  /* Header */38  .header {39    height: 150px;40    display: flex;41    align-items: center;42    padding: 0 36px;43    box-sizing: border-box;44    border-bottom: 1px solid #242424;45    background: #121212;46  }47  .avatar {48    width: 74px;49    height: 74px;50    border-radius: 50%;51    background: #2A2A2A;52    display: flex; align-items: center; justify-content: center;53    margin-right: 24px;54  }55  .avatar svg { fill: #BDBDBD; }56  .header-title {57    font-size: 60px;58    font-weight: 700;59    margin-right: 12px;60  }61  .header-actions {62    margin-left: auto;63    display: flex;64    align-items: center;65    gap: 44px;66  }67  .header-actions svg { fill: #E0E0E0; }68 69  /* Sections */70  .section-title {71    font-size: 46px;72    font-weight: 600;73    margin: 44px 36px 20px;74    color: #EDEDED;75  }76 77  /* File list */78  .file-list { padding: 0 36px; box-sizing: border-box; }79  .file-item {80    display: flex;81    align-items: center;82    padding: 30px 0;83    border-bottom: 1px solid #1E1E1E;84  }85  .thumb {86    width: 120px; height: 120px; background: #E0E0E0;87    border: 1px solid #BDBDBD; color: #757575;88    display: flex; align-items: center; justify-content: center;89    font-size: 28px; border-radius: 8px;90    margin-right: 28px;91  }92  .file-info { flex: 1; }93  .file-name { font-size: 54px; font-weight: 700; margin-bottom: 14px; }94  .file-meta {95    display: flex; align-items: center; gap: 14px;96    color: #B0B0B0; font-size: 34px; font-weight: 500;97  }98  .file-meta svg { fill: #B0B0B0; }99  .kebab {100    width: 70px; height: 70px; display: flex; align-items: center; justify-content: center;101  }102  .kebab svg { fill: #C8C8C8; }103 104  /* Offline card */105  .offline-card {106    margin: 24px 36px 0;107    background: #2C2C2C;108    color: #E5E5E5;109    border-radius: 24px;110    padding: 30px 34px;111    font-size: 34px;112    line-height: 1.4;113  }114 115  /* Bottom nav */116  .bottom-nav {117    position: absolute;118    left: 0; right: 0; bottom: 0;119    height: 160px;120    background: #121212;121    border-top: 1px solid #1F1F1F;122    display: flex; align-items: center; justify-content: space-around;123    padding-bottom: 18px;124  }125  .nav-item {126    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;127    color: #B9B9B9;128    font-size: 30px;129  }130  .nav-item svg { width: 56px; height: 56px; fill: #B9B9B9; }131  .nav-item.active { color: #1095FF; }132  .nav-item.active svg { fill: #1095FF; }133 134  /* FAB */135  .fab {136    position: absolute;137    right: 60px;138    bottom: 220px;139    width: 144px; height: 144px;140    background: #1095FF;141    border-radius: 50%;142    display: flex; align-items: center; justify-content: center;143    box-shadow: 0 8px 20px rgba(16,149,255,0.35);144  }145  .fab svg { fill: #021F38; }146 147  /* Gesture bar */148  .gesture {149    position: absolute;150    bottom: 170px;151    left: 50%; transform: translateX(-50%);152    width: 220px; height: 10px; background: #EDEDED; border-radius: 8px; opacity: 0.85;153  }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status Bar -->160  <div class="status-bar">161    <div class="status-left">7:39</div>162    <div class="status-right">163      <span class="sb-icon">164        <!-- Mail envelope -->165        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M3 5h18v14H3V5zm2 2v10h14V7l-7 5-7-5z"/></svg>166      </span>167      <span class="sb-icon">168        <!-- Signal bars -->169        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M20 18h2v2h-2v-2zM16 14h2v6h-2v-6zM12 10h2v10h-2V10zM8 6h2v14H8V6z"/></svg>170      </span>171      <span class="sb-icon">172        <!-- Cloud -->173        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M6 18h10a4 4 0 0 0 0-8 5 5 0 0 0-9.8 1.4A3.5 3.5 0 0 0 6 18z"/></svg>174      </span>175      <span class="sb-icon">176        <!-- Wifi -->177        <svg width="42" height="42" viewBox="0 0 24 24"><path d="M12 20l2-2-2-2-2 2 2 2zm-6-6a10 10 0 0 1 12 0l-1.5 1.5a8 8 0 0 0-9 0L6 14zm-3-4a14 14 0 0 1 18 0l-1.6 1.6a12 12 0 0 0-14.8 0L3 10z"/></svg>178      </span>179      <span class="sb-icon">180        <!-- Battery -->181        <svg width="52" height="42" viewBox="0 0 30 24"><path d="M2 7h22v10H2V7zm24 3h2v4h-2v-4z"/><rect x="4" y="9" width="14" height="6" fill="#9AE67B"/></svg>182      </span>183    </div>184  </div>185 186  <!-- Header -->187  <div class="header">188    <div class="avatar">189      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-4 3.1-6 7-6s7 2 7 6H5z"/></svg>190    </div>191    <div class="header-title">Home</div>192    <div class="header-actions">193      <!-- Diamond -->194      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M12 3l4 5-4 13-4-13 4-5zm-6 5l6-5 6 5-6 5-6-5z"/></svg>195      <!-- Plus -->196      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6V5z"/></svg>197      <!-- Cast -->198      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M3 6h18v12H3V6zm0 9c2 0 4 2 4 4H5c0-1.1-.9-2-2-2v-2zm0-4c4 0 8 4 8 8h-2c0-3.3-2.7-6-6-6v-2z"/></svg>199      <!-- Search -->200      <svg width="48" height="48" viewBox="0 0 24 24"><path d="M10 4a6 6 0 1 1 0 12A6 6 0 0 1 10 4zm8.7 14.3-3.6-3.6-1.4 1.4 3.6 3.6 1.4-1.4z"/></svg>201    </div>202  </div>203 204  <!-- Recent files -->205  <div class="section-title">Recent files</div>206  <div class="file-list">207    <div class="file-item">208      <div class="thumb">[IMG: File preview]</div>209      <div class="file-info">210        <div class="file-name">Tomorrowland</div>211        <div class="file-meta">212          <svg width="30" height="30" viewBox="0 0 24 24"><path d="M16 11c1.7 0 3 1.3 3 3v5H5v-5c0-1.7 1.3-3 3-3h8zm-8-2a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/></svg>213          <span>2.3 MB · Yesterday at 2:41 PM</span>214        </div>215      </div>216      <div class="kebab">217        <svg width="30" height="30" 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>218      </div>219    </div>220 221    <div class="file-item">222      <div class="thumb">[IMG: File preview]</div>223      <div class="file-info">224        <div class="file-name">Italy file</div>225        <div class="file-meta">226          <svg width="30" height="30" viewBox="0 0 24 24"><path d="M16 11c1.7 0 3 1.3 3 3v5H5v-5c0-1.7 1.3-3 3-3h8zm-8-2a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/></svg>227          <span>24.7 MB · Yesterday at 2:07 PM</span>228        </div>229      </div>230      <div class="kebab">231        <svg width="30" height="30" 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>232      </div>233    </div>234 235    <div class="file-item">236      <div class="thumb">[IMG: File preview]</div>237      <div class="file-info">238        <div class="file-name">Amsterdam (1)</div>239        <div class="file-meta">240          <svg width="30" height="30" viewBox="0 0 24 24"><path d="M16 11c1.7 0 3 1.3 3 3v5H5v-5c0-1.7 1.3-3 3-3h8zm-8-2a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/></svg>241          <span>8.1 MB · Yesterday at 2:06 PM</span>242        </div>243      </div>244      <div class="kebab">245        <svg width="30" height="30" 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>246      </div>247    </div>248  </div>249 250  <!-- Offline files -->251  <div class="section-title" style="margin-top: 36px;">Offline files</div>252  <div class="offline-card">253    Tap the  ⋮  icon next to a file, and select "Make available offline" to view it wherever you go.254  </div>255 256  <!-- Floating Action Button -->257  <div class="fab">258    <svg width="72" height="72" viewBox="0 0 24 24"><path d="M9 7h6l1 2h3v8H5V9h3l1-2zm3 3a4 4 0 1 0 .001 7.999A4 4 0 0 0 12 10z"/></svg>259  </div>260 261  <!-- Gesture bar -->262  <div class="gesture"></div>263 264  <!-- Bottom Navigation -->265  <div class="bottom-nav">266    <div class="nav-item active">267      <svg viewBox="0 0 24 24"><path d="M12 3l9 8v10h-6v-6H9v6H3V11l9-8z"/></svg>268      <div>Home</div>269    </div>270    <div class="nav-item">271      <svg viewBox="0 0 24 24"><path d="M4 4h6v6H4V4zm10 0h6v6h-6V4zM4 14h6v6H4v-6zm10 0h6v6h-6v-6z"/></svg>272      <div>Files</div>273    </div>274    <div class="nav-item">275      <svg viewBox="0 0 24 24"><path d="M16 11c1.7 0 3 1.3 3 3v6H5v-6c0-1.7 1.3-3 3-3h8zm-8-2a3 3 0 1 1 6 0 3 3 0 0 1-6 0z"/></svg>276      <div>Shared</div>277    </div>278    <div class="nav-item">279      <svg viewBox="0 0 24 24"><path d="M4 5h16v14H4V5zm2 2v10h12V7H6zm6 2l4 4h-8l4-4z"/></svg>280      <div>Photos</div>281    </div>282    <div class="nav-item">283      <svg viewBox="0 0 24 24"><path d="M12 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm-7 8c0-4 3.1-6 7-6s7 2 7 6H5z"/></svg>284      <div>Me</div>285    </div>286  </div>287 288</div>289</body>290</html>