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>Local Files UI Mock</title>7<style>8  body { margin: 0; padding: 0; background: transparent; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #424242;15    color: #EDEDED;16    font-family: Arial, Helvetica, sans-serif;17  }18 19  /* Status bar */20  .status-bar {21    position: absolute;22    top: 0; left: 0;23    width: 100%;24    height: 110px;25    background: #3A3A3A;26    display: flex;27    align-items: center;28    padding: 0 36px;29    box-sizing: border-box;30    color: #ECECEC;31    font-size: 36px;32    letter-spacing: 1px;33  }34  .status-left { flex: 1; }35  .status-right {36    display: flex;37    align-items: center;38    gap: 24px;39  }40  .icon { display: inline-flex; align-items: center; justify-content: center; }41 42  /* App bar */43  .app-bar {44    position: absolute;45    top: 110px;46    left: 0;47    width: 100%;48    height: 140px;49    background: #3A3A3A;50    display: flex;51    align-items: center;52    padding: 0 32px;53    box-sizing: border-box;54  }55  .app-title {56    font-size: 54px;57    font-weight: 600;58    margin-left: 24px;59    display: flex;60    align-items: center;61    gap: 12px;62  }63  .app-actions {64    margin-left: auto;65    display: flex;66    align-items: center;67    gap: 28px;68  }69  .hamburger, .search, .overflow {70    width: 64px; height: 64px;71    fill: #E0E0E0;72    opacity: 0.95;73  }74  .chevron-down {75    width: 28px; height: 28px;76    fill: #E0E0E0; opacity: 0.9;77  }78 79  /* Breadcrumbs */80  .breadcrumbs {81    position: absolute;82    top: 250px;83    left: 0;84    width: 100%;85    height: 96px;86    background: #4A4A4A;87    display: flex;88    align-items: center;89    padding: 0 28px;90    box-sizing: border-box;91    color: #D0D0D0;92    font-size: 34px;93  }94  .crumb {95    display: inline-flex;96    align-items: center;97    padding: 18px 30px;98    border-radius: 6px;99    color: #E6E6E6;100  }101  .crumb + .crumb::before {102    content: "›";103    color: #B0B0B0;104    margin: 0 16px 0 6px;105    font-size: 40px;106  }107 108  /* List */109  .list {110    position: absolute;111    top: 346px;112    left: 0;113    right: 0;114    bottom: 0;115    padding: 18px 28px 160px 28px;116    box-sizing: border-box;117    overflow: hidden;118  }119  .item {120    position: relative;121    display: flex;122    align-items: center;123    padding: 26px 22px 26px 8px;124    border-radius: 12px;125    margin-bottom: 22px;126  }127  .folder-circle {128    width: 140px;129    height: 140px;130    border-radius: 50%;131    background: #FFB300;132    display: flex;133    align-items: center;134    justify-content: center;135    margin-right: 28px;136    box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1);137  }138  .folder-circle svg { width: 88px; height: 88px; fill: #FFFFFF; }139  .item-text {140    display: flex;141    flex-direction: column;142    gap: 10px;143  }144  .item-title {145    font-size: 50px;146    color: #FAFAFA;147  }148  .item-sub {149    font-size: 30px;150    color: #BFBFBF;151  }152  .item-star {153    margin-left: auto;154    margin-right: 18px;155    opacity: 0.5;156  }157  .item-star svg { width: 56px; height: 56px; fill: none; stroke: #E0E0E0; stroke-width: 4px; }158 159  /* Floating action button */160  .fab {161    position: absolute;162    right: 48px;163    bottom: 180px;164    width: 156px;165    height: 156px;166    border-radius: 50%;167    background: #6B6B6B;168    box-shadow: 0 10px 18px rgba(0,0,0,0.5);169    display: flex;170    align-items: center;171    justify-content: center;172  }173  .fab svg { width: 80px; height: 80px; }174 175  /* Gesture bar */176  .gesture-bar {177    position: absolute;178    left: 50%;179    transform: translateX(-50%);180    bottom: 70px;181    width: 360px;182    height: 16px;183    background: #FFFFFF;184    opacity: 0.9;185    border-radius: 12px;186  }187</style>188</head>189<body>190<div id="render-target">191 192  <!-- Status bar -->193  <div class="status-bar">194    <div class="status-left">11:09</div>195    <div class="status-right">196      <!-- Simple "Do Not Disturb" moon circle -->197      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" aria-hidden="true">198        <path fill="#E0E0E0" d="M12 2a9.9 9.9 0 0 0 0 20 10 10 0 1 1 0-20z"/>199      </svg>200      <!-- Wi-Fi icon -->201      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" aria-hidden="true">202        <path fill="#E0E0E0" d="M12 20.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM4 12.5c4.9-3.8 11.1-3.8 16 0l-1.6 1.7c-3.7-2.8-9.1-2.8-12.8 0L4 12.5zm3.2 3.4c3.2-2.4 6.4-2.4 9.6 0l-1.5 1.6c-2.1-1.6-4.5-1.6-6.6 0l-1.5-1.6z"/>203      </svg>204      <!-- Battery icon -->205      <svg class="icon" width="44" height="44" viewBox="0 0 24 24" aria-hidden="true">206        <rect x="2" y="7" width="18" height="10" rx="2" ry="2" fill="#E0E0E0"></rect>207        <rect x="20" y="10" width="2" height="4" fill="#E0E0E0"></rect>208      </svg>209    </div>210  </div>211 212  <!-- App bar -->213  <div class="app-bar">214    <!-- Hamburger -->215    <svg class="hamburger" viewBox="0 0 24 24" aria-hidden="true">216      <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z" />217    </svg>218 219    <div class="app-title">220      <span>Local Files</span>221      <svg class="chevron-down" viewBox="0 0 24 24" aria-hidden="true">222        <path d="M7 9l5 6 5-6z"></path>223      </svg>224    </div>225 226    <div class="app-actions">227      <!-- Search -->228      <svg class="search" viewBox="0 0 24 24" aria-hidden="true">229        <circle cx="11" cy="11" r="6" fill="none" stroke="#E0E0E0" stroke-width="2"></circle>230        <path d="M16 16l5 5" stroke="#E0E0E0" stroke-width="2" />231      </svg>232      <!-- Overflow -->233      <svg class="overflow" viewBox="0 0 24 24" aria-hidden="true">234        <circle cx="12" cy="5" r="2" fill="#E0E0E0"></circle>235        <circle cx="12" cy="12" r="2" fill="#E0E0E0"></circle>236        <circle cx="12" cy="19" r="2" fill="#E0E0E0"></circle>237      </svg>238    </div>239  </div>240 241  <!-- Breadcrumbs -->242  <div class="breadcrumbs">243    <div class="crumb">/</div>244    <div class="crumb">sdcard</div>245    <div class="crumb">Books</div>246  </div>247 248  <!-- List -->249  <div class="list">250    <!-- Item 1 -->251    <div class="item">252      <div class="folder-circle">253        <svg viewBox="0 0 24 24" aria-hidden="true">254          <path d="M3 6h6l2 2h10v10H3z"></path>255        </svg>256      </div>257      <div class="item-text">258        <div class="item-title">Alice (1)</div>259        <div class="item-sub">Dec 19, 2023 10:28</div>260      </div>261      <div class="item-star">262        <svg viewBox="0 0 24 24" aria-hidden="true">263          <path d="M12 3l2.9 6 6.1.6-4.6 4 1.3 6-5.7-3.2L6.3 20l1.3-6-4.6-4 6.1-.6z"></path>264        </svg>265      </div>266    </div>267 268    <!-- Item 2 -->269    <div class="item">270      <div class="folder-circle">271        <svg viewBox="0 0 24 24" aria-hidden="true">272          <path d="M3 6h6l2 2h10v10H3z"></path>273        </svg>274      </div>275      <div class="item-text">276        <div class="item-title">MoonReader (2)</div>277        <div class="item-sub">Jul 6, 2023 09:50</div>278      </div>279      <div class="item-star">280        <svg viewBox="0 0 24 24" aria-hidden="true">281          <path d="M12 3l2.9 6 6.1.6-4.6 4 1.3 6-5.7-3.2L6.3 20l1.3-6-4.6-4 6.1-.6z"></path>282        </svg>283      </div>284    </div>285  </div>286 287  <!-- Floating Action Button -->288  <div class="fab" aria-hidden="true">289    <svg viewBox="0 0 24 24">290      <path fill="#FFFFFF" d="M4 5h7v14H4zM13 5h7v14h-7z"/>291    </svg>292  </div>293 294  <!-- Gesture bar -->295  <div class="gesture-bar"></div>296 297</div>298</body>299</html>