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: Arial, Helvetica, sans-serif; }9  #render-target {10    width:1080px; height:2400px;11    position:relative; overflow:hidden;12    background:#0d0b0b;13    color:#e8e3df;14  }15 16  /* Status bar */17  .status-bar {18    position:absolute; top:0; left:0; right:0;19    height:120px; padding:0 36px;20    display:flex; align-items:center; justify-content:space-between;21    color:#fff;22  }23  .status-left { font-size:42px; font-weight:600; letter-spacing:1px; }24  .status-right { display:flex; gap:28px; align-items:center; }25  .status-icon svg { width:40px; height:40px; fill:#fff; opacity:0.85; }26 27  /* Search bar */28  .search-wrap {29    position:absolute; top:152px; left:36px; right:36px;30  }31  .search-bar {32    height:110px; border-radius:28px;33    background:#2e2421; box-shadow:0 6px 14px rgba(0,0,0,0.55) inset;34    display:flex; align-items:center; padding:0 28px;35  }36  .search-input {37    flex:1; color:#cfc6c1; font-size:40px;38  }39  .search-right { display:flex; align-items:center; gap:24px; }40  .folder-ic svg { width:52px; height:52px; fill:#cbb6ad; opacity:0.95; }41  .avatar {42    width:72px; height:72px; border-radius:50%;43    background:#E0E0E0; border:1px solid #BDBDBD;44    display:flex; align-items:center; justify-content:center;45    color:#757575; font-size:22px;46  }47 48  /* Header row */49  .list-header {50    position:absolute; top:308px; left:36px; right:36px;51    display:flex; justify-content:space-between; align-items:center;52    color:#b3a7a0;53  }54  .list-header .name { font-size:38px; }55  .grid-ic { width:60px; height:60px; border-radius:14px; background:#2e2421; display:flex; align-items:center; justify-content:center; }56  .grid-ic svg { width:36px; height:36px; fill:#cbb6ad; }57 58  /* Document rows */59  .list {60    position:absolute; top:380px; left:36px; right:36px;61  }62  .doc-row {63    display:flex; align-items:center; gap:30px;64    padding:30px 0; border-bottom:1px solid rgba(255,255,255,0.04);65  }66  .app-icon {67    width:80px; height:80px; border-radius:18px;68    display:flex; align-items:center; justify-content:center;69    box-shadow:0 2px 6px rgba(0,0,0,0.35) inset;70  }71  .app-icon.doc { background:#5a7ecb; }72  .app-icon.word { background:#3b5fa8; color:#fff; font-weight:700; font-size:40px; }73  .app-icon svg { width:56px; height:56px; fill:#ffffff; opacity:0.95; }74 75  .doc-meta { flex:1; }76  .doc-title { font-size:46px; color:#e6e0dc; margin-bottom:10px; }77  .doc-sub { font-size:34px; color:#948a84; }78  .kebab { color:#b5aba5; font-size:48px; padding:0 12px; }79 80  /* Floating action buttons stack */81  .fab-stack {82    position:absolute; right:36px; bottom:250px;83    display:flex; flex-direction:column; align-items:flex-end; gap:32px;84  }85  .fab-pill {86    display:flex; align-items:center; gap:22px;87    background:#3a2f2c; color:#e8d9d1;88    height:90px; padding:0 36px; border-radius:46px;89    box-shadow:0 8px 16px rgba(0,0,0,0.45);90    font-size:40px;91  }92  .fab-ic {93    width:90px; height:90px; border-radius:28px;94    background:#4a3a36; display:flex; align-items:center; justify-content:center;95  }96  .fab-ic svg { width:48px; height:48px; fill:#f0b6a8; }97  .fab-square {98    width:120px; height:120px; border-radius:32px;99    background:#4a3a36; display:flex; align-items:center; justify-content:center;100    box-shadow:0 8px 16px rgba(0,0,0,0.45);101  }102  .fab-square svg { width:66px; height:66px; stroke:#f0b6a8; stroke-width:12; fill:none; }103 104  /* Navigation handle */105  .nav-handle {106    position:absolute; bottom:40px; left:50%; transform:translateX(-50%);107    width:360px; height:14px; border-radius:10px;108    background:#e6e6e6; opacity:0.7;109  }110</style>111</head>112<body>113<div id="render-target">114 115  <!-- Status bar -->116  <div class="status-bar">117    <div class="status-left">9:10</div>118    <div class="status-right">119      <div class="status-icon">120        <svg viewBox="0 0 24 24"><path d="M12 2c3 0 6 3 6 6 0 5-6 14-6 14S6 13 6 8c0-3 3-6 6-6zm0 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/></svg>121      </div>122      <div class="status-icon">123        <svg viewBox="0 0 24 24"><path d="M2 16c4-4 10-4 14 0l2-2C14 8 8 8 4 14l-2 2zM6 16c2-2 6-2 8 0l-2 2c-2-2-4-2-6 0l-2-2z"/></svg>124      </div>125      <div class="status-icon">126        <svg viewBox="0 0 24 24"><path d="M3 7h14v10H3z"/><path d="M20 7v10h1c1 0 1-10 0-10h-1z"/></svg>127      </div>128    </div>129  </div>130 131  <!-- Search bar -->132  <div class="search-wrap">133    <div class="search-bar">134      <div class="search-input">Search Docs</div>135      <div class="search-right">136        <div class="folder-ic">137          <svg viewBox="0 0 24 24"><path d="M3 6h6l2 2h10v10H3z"/></svg>138        </div>139        <div class="avatar">Avatar</div>140      </div>141    </div>142  </div>143 144  <!-- Header row -->145  <div class="list-header">146    <div class="name">Name ↑</div>147    <div class="grid-ic">148      <svg viewBox="0 0 24 24">149        <path d="M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z"/>150      </svg>151    </div>152  </div>153 154  <!-- Document list -->155  <div class="list">156    <div class="doc-row">157      <div class="app-icon doc">158        <svg viewBox="0 0 24 24"><path d="M5 3h12v18H5z"/><path d="M7 7h8v1H7zm0 4h8v1H7zm0 4h6v1H7z"/></svg>159      </div>160      <div class="doc-meta">161        <div class="doc-title">Letter</div>162        <div class="doc-sub">Modified 4 Aug</div>163      </div>164      <div class="kebab">⋮</div>165    </div>166 167    <div class="doc-row">168      <div class="app-icon doc">169        <svg viewBox="0 0 24 24"><path d="M5 3h12v18H5z"/><path d="M7 7h8v1H7zm0 4h8v1H7zm0 4h6v1H7z"/></svg>170      </div>171      <div class="doc-meta">172        <div class="doc-title">Revised letter</div>173        <div class="doc-sub">★ 👥 ✓  Modified 8:22 am</div>174      </div>175      <div class="kebab">⋮</div>176    </div>177 178    <div class="doc-row">179      <div class="app-icon word">W</div>180      <div class="doc-meta">181        <div class="doc-title">Revised letter .docx</div>182        <div class="doc-sub">👥 Modified 8:48 am</div>183      </div>184      <div class="kebab">⋮</div>185    </div>186 187    <div class="doc-row">188      <div class="app-icon word">W</div>189      <div class="doc-meta">190        <div class="doc-title">Untitled document.docx</div>191        <div class="doc-sub">Modified 4 Aug</div>192      </div>193      <div class="kebab">⋮</div>194    </div>195  </div>196 197  <!-- Floating action buttons -->198  <div class="fab-stack">199    <div class="fab-pill">200      <div>Choose template</div>201      <div class="fab-ic">202        <svg viewBox="0 0 24 24"><path d="M5 4h14v16H5z"/><path d="M8 8h8v1H8zm0 4h8v1H8zm0 4h5v1H8z"/></svg>203      </div>204    </div>205 206    <div class="fab-pill">207      <div>New document</div>208      <div class="fab-ic">209        <svg viewBox="0 0 24 24"><path d="M12 4v16M4 12h16" stroke="#f0b6a8" stroke-width="2" fill="none"/></svg>210      </div>211    </div>212 213    <div class="fab-square">214      <svg viewBox="0 0 24 24"><path d="M5 5l14 14M19 5L5 19"/></svg>215    </div>216  </div>217 218  <!-- Bottom nav handle -->219  <div class="nav-handle"></div>220 221</div>222</body>223</html>