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>Docs List - Dark</title>7<style>8  body { margin: 0; padding: 0; background: transparent; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }9  #render-target {10    width: 1080px;11    height: 2400px;12    position: relative;13    overflow: hidden;14    background: #1b1413;15    color: #f2e9e6;16  }17 18  /* Status bar */19  .statusbar {20    position: absolute;21    top: 0;22    left: 0;23    width: 100%;24    height: 96px;25    display: flex;26    align-items: center;27    justify-content: space-between;28    padding: 0 40px;29    color: #ffffff;30    font-size: 34px;31    opacity: 0.9;32  }33  .status-icons {34    display: flex;35    align-items: center;36    gap: 28px;37  }38  .status-dot {39    width: 10px; height: 10px; background: #ffffff; border-radius: 50%;40    opacity: 0.8;41  }42 43  /* Top app bar */44  .topbar {45    position: absolute;46    top: 96px;47    left: 0;48    width: 100%;49    height: 120px;50    display: flex;51    align-items: center;52    padding: 0 32px;53    gap: 24px;54  }55  .hamburger {56    width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center;57  }58  .search-wrap {59    flex: 1;60    height: 86px;61    background: #3a2f2d;62    border-radius: 43px;63    display: flex;64    align-items: center;65    padding: 0 34px;66    color: #d7c7c3;67    font-size: 36px;68  }69  .search-text { flex: 1; }70  .search-right {71    display: inline-flex; align-items: center; gap: 24px;72  }73  .folder-icon { width: 50px; height: 50px; }74  .avatar {75    width: 86px; height: 86px; border-radius: 43px; background: #d35b7c;76    color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 40px;77    margin-left: 8px;78    box-shadow: 0 4px 10px rgba(0,0,0,0.35);79  }80 81  /* Section header */82  .section-header {83    position: absolute;84    top: 240px;85    left: 40px;86    right: 40px;87    height: 90px;88    display: flex;89    align-items: center;90    justify-content: space-between;91    color: #e9dbd6;92    font-size: 38px;93  }94  .name-sort { display: inline-flex; align-items: center; gap: 12px; }95  .grid-icon { width: 48px; height: 48px; opacity: 0.9; }96 97  /* List */98  .list {99    position: absolute;100    top: 330px;101    left: 0;102    right: 0;103    padding: 0 32px;104  }105  .row {106    position: relative;107    display: flex;108    align-items: flex-start;109    gap: 30px;110    padding: 34px 16px;111  }112  .file-icon {113    width: 86px; height: 86px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center;114  }115  .doc-blue { background: #4988ff; }116  .word-blue { background: #a7c7ff; }117  .file-content { flex: 1; }118  .title {119    font-size: 44px; line-height: 1.3; color: #fff3ef; margin-top: -4px;120  }121  .meta {122    margin-top: 10px;123    font-size: 30px; color: #cbbeb8; display: inline-flex; align-items: center; gap: 18px;124  }125  .meta svg { opacity: 0.95; }126  .dots {127    position: absolute;128    right: 40px;129    top: 46px;130    width: 36px; height: 60px; display: flex; align-items: center; justify-content: center;131  }132 133  /* Floating action button and gesture bar */134  .fab {135    position: absolute;136    right: 64px;137    bottom: 160px;138    width: 160px;139    height: 160px;140    border-radius: 36px;141    background: #5f4543;142    color: #ffeceb;143    display: flex; align-items: center; justify-content: center;144    font-size: 76px; font-weight: 600;145    box-shadow: 0 18px 36px rgba(0,0,0,0.45);146  }147  .gesture {148    position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);149    width: 260px; height: 14px; background: #ffffff; border-radius: 8px; opacity: 0.9;150  }151 152  /* Small helpers */153  .inline-icon { width: 42px; height: 42px; }154</style>155</head>156<body>157<div id="render-target">158 159  <!-- Status bar -->160  <div class="statusbar">161    <div>9:09</div>162    <div class="status-icons">163      <svg class="inline-icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2a7 7 0 110 14 7 7 0 010-14zm0 3a1 1 0 011 1v4l3 1a1 1 0 01-.6 1.9L11 11V6a1 1 0 011-1z"/></svg>164      <div class="status-dot"></div>165      <svg class="inline-icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2l2 4 4 .6-3 3 .7 4.4-3.7-2-3.7 2 .7-4.4-3-3L10 6z"/></svg>166      <svg class="inline-icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm1 5h-2v6h6v-2h-4z"/></svg>167      <svg class="inline-icon" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2"><path d="M3 11l9-9 9 9"/><path d="M5 10v10h14V10"/></svg>168      <svg class="inline-icon" viewBox="0 0 24 24" fill="#ffffff"><path d="M7 7h10v10H7z"/></svg>169    </div>170  </div>171 172  <!-- Top bar with search -->173  <div class="topbar">174    <div class="hamburger">175      <svg width="56" height="56" viewBox="0 0 24 24" fill="#e8dad3">176        <path d="M3 6h18v2H3zM3 11h18v2H3zM3 16h18v2H3z"/>177      </svg>178    </div>179    <div class="search-wrap">180      <div class="search-text">Search Docs</div>181      <div class="search-right">182        <svg class="folder-icon" viewBox="0 0 24 24" fill="#e8dad3">183          <path d="M10 4l2 2h8a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h6z"/>184        </svg>185      </div>186    </div>187    <div class="avatar">C</div>188  </div>189 190  <!-- Header: Name sort -->191  <div class="section-header">192    <div class="name-sort">193      <div>Name</div>194      <svg width="30" height="30" viewBox="0 0 24 24" fill="#e9dbd6">195        <path d="M12 8l-4 6h8z"/>196      </svg>197    </div>198    <svg class="grid-icon" viewBox="0 0 24 24" fill="#e9dbd6">199      <rect x="3" y="3" width="7" height="7" rx="1"></rect>200      <rect x="14" y="3" width="7" height="7" rx="1"></rect>201      <rect x="3" y="14" width="7" height="7" rx="1"></rect>202      <rect x="14" y="14" width="7" height="7" rx="1"></rect>203    </svg>204  </div>205 206  <!-- List of documents -->207  <div class="list">208 209    <!-- Row 1 -->210    <div class="row">211      <div class="file-icon doc-blue">212        <svg width="56" height="56" viewBox="0 0 24 24">213          <rect x="3" y="3" width="18" height="18" rx="3" fill="#4988ff"/>214          <rect x="6" y="7" width="12" height="2" fill="#ffffff"/>215          <rect x="6" y="11" width="10" height="2" fill="#ffffff"/>216          <rect x="6" y="15" width="8" height="2" fill="#ffffff"/>217        </svg>218      </div>219      <div class="file-content">220        <div class="title">Letter</div>221        <div class="meta">222          <svg class="inline-icon" viewBox="0 0 24 24" fill="#cbbeb8"><path d="M12 2a9.9 9.9 0 110 20 9.9 9.9 0 010-20zm-1 5h2v6h4v2h-6z"/></svg>223          <span>Modified 4 Aug</span>224        </div>225      </div>226      <div class="dots">227        <svg width="10" height="48" viewBox="0 0 6 24" fill="#d8c9c4">228          <circle cx="3" cy="4" r="2"></circle>229          <circle cx="3" cy="12" r="2"></circle>230          <circle cx="3" cy="20" r="2"></circle>231        </svg>232      </div>233    </div>234 235    <!-- Row 2 -->236    <div class="row">237      <div class="file-icon doc-blue">238        <svg width="56" height="56" viewBox="0 0 24 24">239          <rect x="3" y="3" width="18" height="18" rx="3" fill="#4988ff"/>240          <rect x="6" y="7" width="12" height="2" fill="#ffffff"/>241          <rect x="6" y="11" width="10" height="2" fill="#ffffff"/>242          <rect x="6" y="15" width="8" height="2" fill="#ffffff"/>243        </svg>244      </div>245      <div class="file-content">246        <div class="title">Revised letter</div>247        <div class="meta">248          <svg class="inline-icon" viewBox="0 0 24 24" fill="#e6c176"><path d="M12 2l2.7 5.5 6 .9-4.4 4.3 1 6-5.3-2.8-5.3 2.8 1-6-4.4-4.3 6-.9L12 2z"/></svg>249          <svg class="inline-icon" viewBox="0 0 24 24" fill="none" stroke="#cbbeb8" stroke-width="2"><circle cx="9" cy="10" r="3"/><path d="M2 20c1.2-4.2 11.8-4.2 13 0"/><circle cx="16.5" cy="8.5" r="2.5"/></svg>250          <svg class="inline-icon" viewBox="0 0 24 24" fill="none" stroke="#cbbeb8" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-5"/></svg>251          <span>Modified 8:22 am</span>252        </div>253      </div>254      <div class="dots">255        <svg width="10" height="48" viewBox="0 0 6 24" fill="#d8c9c4">256          <circle cx="3" cy="4" r="2"></circle>257          <circle cx="3" cy="12" r="2"></circle>258          <circle cx="3" cy="20" r="2"></circle>259        </svg>260      </div>261    </div>262 263    <!-- Row 3 -->264    <div class="row">265      <div class="file-icon word-blue">266        <svg width="56" height="56" viewBox="0 0 24 24">267          <rect x="3" y="3" width="18" height="18" rx="3" fill="#a7c7ff"/>268          <text x="12" y="16" text-anchor="middle" font-size="12" font-weight="700" fill="#173b8f">W</text>269        </svg>270      </div>271      <div class="file-content">272        <div class="title">Revised letter .docx</div>273        <div class="meta">274          <svg class="inline-icon" viewBox="0 0 24 24" fill="none" stroke="#cbbeb8" stroke-width="2"><circle cx="9" cy="10" r="3"/><path d="M2 20c1.2-4.2 11.8-4.2 13 0"/></svg>275          <span>Modified 8:48 am</span>276        </div>277      </div>278      <div class="dots">279        <svg width="10" height="48" viewBox="0 0 6 24" fill="#d8c9c4">280          <circle cx="3" cy="4" r="2"></circle>281          <circle cx="3" cy="12" r="2"></circle>282          <circle cx="3" cy="20" r="2"></circle>283        </svg>284      </div>285    </div>286 287    <!-- Row 4 -->288    <div class="row">289      <div class="file-icon word-blue">290        <svg width="56" height="56" viewBox="0 0 24 24">291          <rect x="3" y="3" width="18" height="18" rx="3" fill="#a7c7ff"/>292          <text x="12" y="16" text-anchor="middle" font-size="12" font-weight="700" fill="#173b8f">W</text>293        </svg>294      </div>295      <div class="file-content">296        <div class="title">Untitled document.docx</div>297        <div class="meta">298          <span>Modified 4 Aug</span>299        </div>300      </div>301      <div class="dots">302        <svg width="10" height="48" viewBox="0 0 6 24" fill="#d8c9c4">303          <circle cx="3" cy="4" r="2"></circle>304          <circle cx="3" cy="12" r="2"></circle>305          <circle cx="3" cy="20" r="2"></circle>306        </svg>307      </div>308    </div>309 310  </div>311 312  <!-- Floating action button -->313  <div class="fab">+</div>314 315  <!-- Gesture bar -->316  <div class="gesture"></div>317 318</div>319</body>320</html>