GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>UI Render</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8  #render-target {9    width: 1080px;10    height: 2400px;11    position: relative;12    overflow: hidden;13    background: #1b1f14;14    border-radius: 24px;15  }16  /* Top status bar */17  .status-bar {18    position: absolute;19    top: 0;20    left: 0;21    right: 0;22    height: 110px;23    padding: 0 36px;24    display: flex;25    align-items: center;26    justify-content: space-between;27    color: #F3F3F3;28    font-size: 42px;29    background: #202415;30  }31  .status-right {32    display: flex;33    align-items: center;34    gap: 28px;35  }36  .icon {37    width: 52px; height: 52px;38  }39 40  /* Header / search row */41  .header {42    position: absolute;43    top: 110px;44    left: 0;45    right: 0;46    height: 140px;47    display: flex;48    align-items: center;49    padding: 0 28px;50    color: #EDEDED;51    gap: 24px;52    background: #202415;53    border-bottom: 1px solid rgba(255,255,255,0.06);54  }55  .query {56    font-size: 48px;57    color: #EDEDED;58    flex: 1;59  }60  .header .icon {61    width: 60px; height: 60px;62  }63 64  /* Filter chips */65  .chips {66    position: absolute;67    top: 260px;68    left: 24px;69    right: 24px;70    display: flex;71    gap: 24px;72    flex-wrap: nowrap;73  }74  .chip {75    display: inline-flex;76    align-items: center;77    gap: 16px;78    border: 1px solid #5a5f49;79    color: #f0f0f0;80    padding: 18px 26px;81    border-radius: 40px;82    background: #1e2215;83    font-size: 36px;84  }85  .chip svg { width: 44px; height: 44px; }86 87  /* File list item */88  .list {89    position: absolute;90    top: 380px;91    left: 24px;92    right: 24px;93  }94  .item {95    height: 190px;96    display: flex;97    align-items: center;98    gap: 26px;99    padding: 20px 24px;100    border-radius: 18px;101    color: #ECECEC;102  }103  .file-thumb {104    width: 120px; height: 120px;105    border-radius: 18px;106    background: #2aa9d8;107    display: flex; align-items: center; justify-content: center;108    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);109  }110  .file-info {111    flex: 1;112  }113  .file-title {114    font-size: 46px;115    margin-bottom: 12px;116    color: #f4f4f4;117  }118  .file-sub {119    font-size: 34px;120    color: #a7ab98;121  }122  .more-btn {123    width: 60px; height: 60px; display: flex; align-items: center; justify-content: center;124  }125 126  /* Context menu */127  .context-menu {128    position: absolute;129    top: 650px;130    right: 60px;131    width: 520px;132    background: #212615;133    border-radius: 26px;134    box-shadow: 0 20px 50px rgba(0,0,0,0.45);135    color: #EFEFEF;136    overflow: hidden;137  }138  .menu-item {139    padding: 32px 36px;140    font-size: 42px;141    border-bottom: 1px solid rgba(255,255,255,0.06);142  }143  .menu-item:last-child { border-bottom: none; }144 145  /* Bottom gesture bar */146  .gesture {147    position: absolute;148    bottom: 36px;149    left: 50%;150    transform: translateX(-50%);151    width: 280px;152    height: 12px;153    background: #E9E9E9;154    border-radius: 8px;155    opacity: 0.8;156  }157</style>158</head>159<body>160<div id="render-target">161 162  <!-- Status Bar -->163  <div class="status-bar">164    <div>10:14</div>165    <div class="status-right">166      <!-- Simple status icons -->167      <svg class="icon" viewBox="0 0 24 24" fill="none">168        <rect x="2" y="9" width="20" height="6" rx="3" stroke="#EDEDED" stroke-width="2"></rect>169        <rect x="4" y="11" width="12" height="2" fill="#EDEDED"></rect>170      </svg>171      <svg class="icon" viewBox="0 0 24 24" fill="none">172        <path d="M2 20 L6 14 L10 16 L14 10 L22 4" stroke="#EDEDED" stroke-width="2" fill="none"></path>173      </svg>174      <svg class="icon" viewBox="0 0 24 24" fill="none">175        <rect x="2" y="6" width="16" height="12" rx="2" stroke="#EDEDED" stroke-width="2"></rect>176        <rect x="19" y="9" width="3" height="6" fill="#EDEDED"></rect>177      </svg>178    </div>179  </div>180 181  <!-- Search Header -->182  <div class="header">183    <svg class="icon" viewBox="0 0 24 24" fill="none">184      <path d="M15 19 L8 12 L15 5" stroke="#EDEDED" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>185    </svg>186    <div class="query">month finance</div>187    <!-- clear X -->188    <svg class="icon" viewBox="0 0 24 24" fill="none">189      <path d="M5 5 L19 19 M19 5 L5 19" stroke="#EDEDED" stroke-width="2" stroke-linecap="round"></path>190    </svg>191    <!-- grid icon -->192    <svg class="icon" viewBox="0 0 24 24" fill="none">193      <rect x="3" y="3" width="7" height="7" rx="1" stroke="#EDEDED" stroke-width="2"></rect>194      <rect x="14" y="3" width="7" height="7" rx="1" stroke="#EDEDED" stroke-width="2"></rect>195      <rect x="3" y="14" width="7" height="7" rx="1" stroke="#EDEDED" stroke-width="2"></rect>196      <rect x="14" y="14" width="7" height="7" rx="1" stroke="#EDEDED" stroke-width="2"></rect>197    </svg>198    <!-- kebab -->199    <svg class="icon" viewBox="0 0 24 24" fill="#EDEDED">200      <circle cx="12" cy="5" r="2"></circle>201      <circle cx="12" cy="12" r="2"></circle>202      <circle cx="12" cy="19" r="2"></circle>203    </svg>204  </div>205 206  <!-- Filter Chips -->207  <div class="chips">208    <div class="chip">209      <svg viewBox="0 0 24 24" fill="none">210        <circle cx="12" cy="10" r="5" stroke="#EDEDED" stroke-width="2"></circle>211        <rect x="4" y="16" width="16" height="4" rx="2" stroke="#EDEDED" stroke-width="2"></rect>212      </svg>213      Audio214    </div>215    <div class="chip">216      <svg viewBox="0 0 24 24" fill="none">217        <rect x="4" y="3" width="16" height="18" rx="2" stroke="#EDEDED" stroke-width="2"></rect>218        <line x1="8" y1="8" x2="16" y2="8" stroke="#EDEDED" stroke-width="2"></line>219        <line x1="8" y1="12" x2="16" y2="12" stroke="#EDEDED" stroke-width="2"></line>220      </svg>221      Documents &amp; other222    </div>223    <div class="chip">224      <svg viewBox="0 0 24 24" fill="none">225        <rect x="3" y="4" width="18" height="16" rx="2" stroke="#EDEDED" stroke-width="2"></rect>226        <circle cx="9" cy="10" r="2" fill="#EDEDED"></circle>227        <path d="M6 16 L11 11 L16 16" stroke="#EDEDED" stroke-width="2" fill="none"></path>228      </svg>229      Images230    </div>231  </div>232 233  <!-- File List -->234  <div class="list">235    <div class="item">236      <div class="file-thumb">237        <svg viewBox="0 0 24 24" width="70" height="70" fill="none">238          <rect x="5" y="4" width="14" height="16" rx="2" fill="rgba(255,255,255,0.2)" stroke="#ffffff" stroke-width="1.5"></rect>239          <line x1="8" y1="10" x2="16" y2="10" stroke="#ffffff" stroke-width="1.5"></line>240          <line x1="8" y1="13" x2="16" y2="13" stroke="#ffffff" stroke-width="1.5"></line>241        </svg>242      </div>243      <div class="file-info">244        <div class="file-title">Month finance .docx</div>245        <div class="file-sub">6.27 kB, 1 hour ago</div>246      </div>247      <div class="more-btn">248        <svg viewBox="0 0 24 24" fill="#EDEDED" width="48" height="48">249          <circle cx="12" cy="5" r="2"></circle>250          <circle cx="12" cy="12" r="2"></circle>251          <circle cx="12" cy="19" r="2"></circle>252        </svg>253      </div>254    </div>255  </div>256 257  <!-- Context Menu -->258  <div class="context-menu">259    <div class="menu-item">Select</div>260    <div class="menu-item">Share</div>261    <div class="menu-item">Open with</div>262    <div class="menu-item">Rename</div>263    <div class="menu-item">Add to Favorites</div>264    <div class="menu-item">Move to Trash</div>265    <div class="menu-item">Move to</div>266    <div class="menu-item">Move to Safe folder</div>267    <div class="menu-item">Copy to</div>268    <div class="menu-item">Back up to Google Drive</div>269    <div class="menu-item">File info</div>270  </div>271 272  <!-- Bottom gesture bar -->273  <div class="gesture"></div>274</div>275</body>276</html>