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 UI</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; position: relative; overflow: hidden;11    background: #1b1514; color: #f5f1ef;12  }13 14  /* Status bar */15  .statusbar {16    position: absolute; top: 0; left: 0; width: 100%; height: 96px;17    display: flex; align-items: center; justify-content: space-between;18    padding: 0 40px; box-sizing: border-box; color: #e7e1df; font-weight: 600;19  }20  .status-left { font-size: 42px; }21  .status-right { display: flex; align-items: center; gap: 26px; }22  .status-icon { width: 32px; height: 32px; opacity: 0.85; }23 24  /* Search bar */25  .search-wrap { position: absolute; top: 96px; left: 0; width: 100%; padding: 24px 32px; box-sizing: border-box; }26  .search-bar {27    background: #3a2f2d; height: 120px; border-radius: 28px;28    display: flex; align-items: center; padding: 0 28px; box-sizing: border-box;29  }30  .search-left, .search-right { display: flex; align-items: center; }31  .search-input {32    flex: 1; color: #e8e2df; font-size: 44px; opacity: 0.92; padding-left: 24px;33  }34  .circle-avatar {35    width: 92px; height: 92px; border-radius: 46px; margin-left: 22px;36    background: #d06286; display: flex; align-items: center; justify-content: center;37    color: #ffffff; font-size: 46px; font-weight: 700;38    box-shadow: 0 6px 12px rgba(0,0,0,0.35);39  }40 41  /* Section header */42  .section-header {43    position: absolute; top: 264px; left: 40px; right: 40px;44    display: flex; align-items: center; justify-content: space-between;45    color: #e9e4e1; font-size: 40px; font-weight: 600;46  }47  .section-header .sub { opacity: 0.9; }48  .view-toggle { width: 60px; height: 60px; }49 50  /* List */51  .list { position: absolute; top: 340px; left: 24px; right: 24px; }52  .doc-item {53    display: flex; align-items: flex-start; padding: 34px 16px 34px 24px;54    border-radius: 18px; margin-bottom: 20px;55  }56  .doc-icon {57    width: 72px; height: 72px; border-radius: 12px; margin-right: 28px; flex-shrink: 0;58    display: flex; align-items: center; justify-content: center;59  }60  .doc-icon.docs { background: #8fb6ff; }61  .doc-icon.word { background: #a9c7ff; }62  .doc-title { font-size: 54px; line-height: 1.1; margin-bottom: 12px; }63  .doc-meta { font-size: 36px; color: #c9c2bf; display: flex; align-items: center; gap: 16px; }64  .doc-actions { margin-left: auto; padding: 18px; }65  .kebab { width: 16px; height: 60px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }66  .dot { width: 10px; height: 10px; border-radius: 50%; background: #cfc8c5; }67 68  /* Floating + button */69  .fab {70    position: absolute; right: 56px; bottom: 160px;71    width: 140px; height: 140px; border-radius: 36px;72    background: #4a3734; color: #fff; display: flex; align-items: center; justify-content: center;73    font-size: 80px; line-height: 0;74    box-shadow: 0 14px 26px rgba(0,0,0,0.45);75  }76 77  /* Home indicator */78  .home-indicator {79    position: absolute; bottom: 86px; left: 50%; transform: translateX(-50%);80    width: 420px; height: 16px; border-radius: 10px; background: #e9e7e5; opacity: 0.9;81  }82 83  /* Simple icon styling */84  svg { display: block; }85  .menu-icon { width: 54px; height: 54px; }86  .folder-icon { width: 54px; height: 54px; margin-right: 14px; }87</style>88</head>89<body>90<div id="render-target">91 92  <!-- Status bar -->93  <div class="statusbar">94    <div class="status-left">9:16</div>95    <div class="status-right">96      <!-- Simple status icons -->97      <svg class="status-icon" viewBox="0 0 24 24">98        <circle cx="12" cy="12" r="10" fill="#e7e1df" />99      </svg>100      <svg class="status-icon" viewBox="0 0 24 24">101        <rect x="3" y="5" width="18" height="14" rx="3" fill="#e7e1df"/>102      </svg>103      <svg class="status-icon" viewBox="0 0 24 24">104        <path d="M3 12h18" stroke="#e7e1df" stroke-width="2"/>105      </svg>106      <svg class="status-icon" viewBox="0 0 24 24">107        <path d="M6 18h12V6" stroke="#e7e1df" stroke-width="2" fill="none"/>108      </svg>109      <svg class="status-icon" viewBox="0 0 24 24">110        <path d="M3 18h14a4 4 0 0 0 4-4V4" stroke="#e7e1df" stroke-width="2" fill="none"/>111      </svg>112    </div>113  </div>114 115  <!-- Search bar -->116  <div class="search-wrap">117    <div class="search-bar">118      <div class="search-left">119        <!-- Hamburger -->120        <svg class="menu-icon" viewBox="0 0 24 24">121          <path d="M3 6h18M3 12h18M3 18h18" stroke="#e9e4e1" stroke-width="2" stroke-linecap="round"/>122        </svg>123      </div>124      <div class="search-input">Search Docs</div>125      <div class="search-right">126        <!-- Folder icon -->127        <svg class="folder-icon" viewBox="0 0 24 24">128          <path d="M3 6h6l2 2h10v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" fill="none" stroke="#e9e4e1" stroke-width="2" stroke-linejoin="round"/>129        </svg>130        <div class="circle-avatar">C</div>131      </div>132    </div>133  </div>134 135  <!-- Section header -->136  <div class="section-header">137    <div class="sub">Name ↑</div>138    <!-- Grid toggle -->139    <svg class="view-toggle" viewBox="0 0 24 24">140      <g fill="#e9e4e1">141        <rect x="3" y="3" width="5" height="5" rx="1"/>142        <rect x="10" y="3" width="5" height="5" rx="1"/>143        <rect x="17" y="3" width="5" height="5" rx="1"/>144        <rect x="3" y="10" width="5" height="5" rx="1"/>145        <rect x="10" y="10" width="5" height="5" rx="1"/>146        <rect x="17" y="10" width="5" height="5" rx="1"/>147        <rect x="3" y="17" width="5" height="5" rx="1"/>148        <rect x="10" y="17" width="5" height="5" rx="1"/>149        <rect x="17" y="17" width="5" height="5" rx="1"/>150      </g>151    </svg>152  </div>153 154  <!-- Documents list -->155  <div class="list">156 157    <!-- Item 1 -->158    <div class="doc-item">159      <div class="doc-icon docs">160        <svg viewBox="0 0 24 24" width="42" height="42">161          <rect x="5" y="4" width="14" height="16" rx="2" fill="#ffffff"/>162          <path d="M7 8h10M7 11h10M7 14h10" stroke="#8fb6ff" stroke-width="2"/>163        </svg>164      </div>165      <div class="doc-content">166        <div class="doc-title">Business letter</div>167        <div class="doc-meta">168          <!-- Clock icon -->169          <svg viewBox="0 0 24 24" width="28" height="28">170            <circle cx="12" cy="12" r="9" stroke="#c9c2bf" stroke-width="2" fill="none"/>171            <path d="M12 7v5l4 2" stroke="#c9c2bf" stroke-width="2" stroke-linecap="round"/>172          </svg>173          Modified 9:12 am174        </div>175      </div>176      <div class="doc-actions">177        <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>178      </div>179    </div>180 181    <!-- Item 2 -->182    <div class="doc-item">183      <div class="doc-icon docs">184        <svg viewBox="0 0 24 24" width="42" height="42">185          <rect x="5" y="4" width="14" height="16" rx="2" fill="#ffffff"/>186          <path d="M7 8h10M7 11h10M7 14h10" stroke="#8fb6ff" stroke-width="2"/>187        </svg>188      </div>189      <div class="doc-content">190        <div class="doc-title">Letter</div>191        <div class="doc-meta">192          <svg viewBox="0 0 24 24" width="28" height="28">193            <circle cx="12" cy="12" r="9" stroke="#c9c2bf" stroke-width="2" fill="none"/>194            <path d="M12 7v5l4 2" stroke="#c9c2bf" stroke-width="2" stroke-linecap="round"/>195          </svg>196          Modified 4 Aug197        </div>198      </div>199      <div class="doc-actions">200        <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>201      </div>202    </div>203 204    <!-- Item 3 -->205    <div class="doc-item">206      <div class="doc-icon docs">207        <svg viewBox="0 0 24 24" width="42" height="42">208          <rect x="5" y="4" width="14" height="16" rx="2" fill="#ffffff"/>209          <path d="M7 8h10M7 11h10M7 14h10" stroke="#8fb6ff" stroke-width="2"/>210        </svg>211      </div>212      <div class="doc-content">213        <div class="doc-title">Revised letter</div>214        <div class="doc-meta">215          <!-- Star -->216          <svg viewBox="0 0 24 24" width="26" height="26">217            <path d="M12 3l3 6 6 .8-4.4 4 1.2 6.2L12 17l-5.8 3.9 1.2-6.2L3 9.8 9 9l3-6z" fill="#c9c2bf"/>218          </svg>219          <!-- People -->220          <svg viewBox="0 0 24 24" width="28" height="28">221            <circle cx="8" cy="10" r="3" fill="#c9c2bf"/>222            <circle cx="16" cy="10" r="3" fill="#c9c2bf"/>223            <path d="M4 19c0-3 4-4 4-4s4 1 4 4M12 19c0-3 4-4 4-4s4 1 4 4" stroke="#c9c2bf" stroke-width="2" fill="none"/>224          </svg>225          <svg viewBox="0 0 24 24" width="28" height="28">226            <circle cx="12" cy="12" r="9" stroke="#c9c2bf" stroke-width="2" fill="none"/>227            <path d="M12 7v5l4 2" stroke="#c9c2bf" stroke-width="2" stroke-linecap="round"/>228          </svg>229          Modified 8:22 am230        </div>231      </div>232      <div class="doc-actions">233        <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>234      </div>235    </div>236 237    <!-- Item 4 -->238    <div class="doc-item">239      <div class="doc-icon word">240        <div style="color:#355fa8; font-weight:800; font-size:42px;">W</div>241      </div>242      <div class="doc-content">243        <div class="doc-title">Revised letter .docx</div>244        <div class="doc-meta">245          <!-- People icon -->246          <svg viewBox="0 0 24 24" width="28" height="28">247            <circle cx="8" cy="10" r="3" fill="#c9c2bf"/>248            <circle cx="16" cy="10" r="3" fill="#c9c2bf"/>249            <path d="M4 19c0-3 4-4 4-4s4 1 4 4M12 19c0-3 4-4 4-4s4 1 4 4" stroke="#c9c2bf" stroke-width="2" fill="none"/>250          </svg>251          Modified 8:48 am252        </div>253      </div>254      <div class="doc-actions">255        <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>256      </div>257    </div>258 259    <!-- Item 5 -->260    <div class="doc-item">261      <div class="doc-icon word">262        <div style="color:#355fa8; font-weight:800; font-size:42px;">W</div>263      </div>264      <div class="doc-content">265        <div class="doc-title">Untitled document.docx</div>266        <div class="doc-meta">267          Modified 4 Aug268        </div>269      </div>270      <div class="doc-actions">271        <div class="kebab"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>272      </div>273    </div>274 275  </div>276 277  <!-- Floating action button -->278  <div class="fab">+</div>279 280  <!-- Home indicator -->281  <div class="home-indicator"></div>282</div>283</body>284</html>