GD-ML/AndroidCode

1<html>2<head>3<meta charset="UTF-8">4<title>Files - 1 selected</title>5<style>6  body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }7  #render-target {8    width: 1080px;9    height: 2400px;10    position: relative;11    overflow: hidden;12    background: #ffffff;13  }14 15  /* Status bar (OS) */16  .status-bar {17    height: 90px;18    padding: 0 30px;19    display: flex;20    align-items: center;21    justify-content: space-between;22    color: #222;23    font-size: 34px;24  }25  .status-icons {26    display: flex;27    align-items: center;28    gap: 22px;29  }30  .status-dot {31    width: 28px; height: 28px; border-radius: 50%; background: #777;32  }33  .status-battery {34    width: 26px; height: 16px; border: 2px solid #444; position: relative; border-radius: 3px;35  }36  .status-battery::after {37    content: ""; position: absolute; right: -6px; top: 4px; width: 4px; height: 8px; background: #444; border-radius: 1px;38  }39  .status-battery .level {40    position: absolute; left: 2px; top: 2px; height: 10px; width: 16px; background: #4CAF50;41  }42 43  /* App bar */44  .app-bar {45    height: 150px;46    display: flex;47    align-items: center;48    padding: 0 26px;49    border-bottom: 1px solid #eaeaea;50  }51  .icon-btn { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }52  .title { font-size: 54px; font-weight: 700; color: #111; margin-left: 20px; }53  .actions { margin-left: auto; display: flex; gap: 40px; }54 55  /* List area */56  .list {57    padding-top: 10px;58  }59  .item {60    display: flex;61    align-items: center;62    padding: 22px 26px;63    border-bottom: 1px solid #efefef;64  }65  .item.selected { background: #EAF2FF; }66  .doc-icon {67    width: 86px; height: 86px; border-radius: 16px; display: flex;68    align-items: center; justify-content: center; margin-right: 28px; position: relative;69  }70  .doc-icon.blue { background: #5AA6FF; }71  .doc-icon.gray { background: #B0BEC5; }72  .doc-icon.red { background: #F28E8E; }73  .doc-lines { width: 54px; height: 54px; }74  .doc-lines div {75    height: 6px; background: #fff; margin: 8px 0; border-radius: 3px;76  }77 78  .text-wrap { flex: 1; }79  .title-line { font-size: 44px; color: #121212; margin-bottom: 10px; }80  .meta { font-size: 28px; color: #72777f; }81 82  .check {83    width: 70px; height: 70px; border-radius: 50%;84    background: #e0e0e0; display: flex; align-items: center; justify-content: center;85  }86  .check.blue { background: #4579FF; }87  .check svg { width: 42px; height: 42px; }88  .check.blue svg path { stroke: #fff; }89 90  /* Ad card */91  .ad-card {92    padding: 26px;93    display: flex;94    align-items: center;95    gap: 24px;96    border-bottom: 1px solid #efefef;97  }98  .ad-image {99    width: 86px; height: 86px; background: #E0E0E0; border: 1px solid #BDBDBD;100    display: flex; align-items: center; justify-content: center; color: #757575; border-radius: 12px;101    font-size: 26px;102  }103  .ad-text { flex: 1; }104  .ad-title { font-size: 38px; color: #202124; margin-bottom: 8px; }105  .ad-desc { font-size: 28px; color: #8b8f97; }106  .ad-open {107    font-size: 32px; color: #2a7dfc; font-weight: 600;108  }109 110  /* Footer button */111  .footer {112    margin-top: 40px;113    display: flex; justify-content: center;114  }115  .open-files {116    width: 780px; height: 120px; border-radius: 60px;117    background: #f3f5fb; color: #9aa6c0; display: flex; align-items: center; justify-content: center;118    font-size: 44px; font-weight: 600;119  }120  .no-history {121    text-align: center; color: #8f8f8f; font-size: 38px; margin-top: 40px;122  }123 124  /* Gesture bar */125  .gesture {126    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);127    width: 500px; height: 12px; background: #9e9e9e; border-radius: 6px;128  }129</style>130</head>131<body>132<div id="render-target">133 134  <!-- Top status bar -->135  <div class="status-bar">136    <div>12:03</div>137    <div class="status-icons">138      <div class="status-dot"></div>139      <div class="status-battery"><div class="level"></div></div>140    </div>141  </div>142 143  <!-- App bar -->144  <div class="app-bar">145    <div class="icon-btn">146      <svg viewBox="0 0 24 24">147        <path d="M5 5 L19 19 M19 5 L5 19" stroke="#000" stroke-width="2.8" stroke-linecap="round"/>148      </svg>149    </div>150    <div class="title">1 selected</div>151    <div class="actions">152      <!-- Export/Open icon -->153      <div class="icon-btn">154        <svg viewBox="0 0 24 24">155          <rect x="3" y="7" width="14" height="12" fill="none" stroke="#222" stroke-width="2" rx="2"/>156          <path d="M12 4 L18 4 L18 10" stroke="#222" stroke-width="2" fill="none"/>157          <path d="M18 4 L10 12" stroke="#222" stroke-width="2" fill="none"/>158        </svg>159      </div>160      <!-- Trash -->161      <div class="icon-btn">162        <svg viewBox="0 0 24 24">163          <rect x="6" y="8" width="12" height="12" fill="none" stroke="#222" stroke-width="2" rx="2"/>164          <rect x="9" y="3" width="6" height="3" fill="#222"/>165          <path d="M3 6 H21" stroke="#222" stroke-width="2"/>166        </svg>167      </div>168      <!-- Share -->169      <div class="icon-btn">170        <svg viewBox="0 0 24 24">171          <circle cx="6" cy="12" r="3" fill="none" stroke="#222" stroke-width="2"/>172          <circle cx="18" cy="6" r="3" fill="none" stroke="#222" stroke-width="2"/>173          <circle cx="18" cy="18" r="3" fill="none" stroke="#222" stroke-width="2"/>174          <path d="M8.8 10.9 L15.2 7.1 M8.8 13.1 L15.2 16.9" stroke="#222" stroke-width="2"/>175        </svg>176      </div>177      <!-- More (vertical dots) -->178      <div class="icon-btn">179        <svg viewBox="0 0 24 24">180          <circle cx="12" cy="5" r="2.2" fill="#222"/>181          <circle cx="12" cy="12" r="2.2" fill="#222"/>182          <circle cx="12" cy="19" r="2.2" fill="#222"/>183        </svg>184      </div>185    </div>186  </div>187 188  <!-- List items -->189  <div class="list">190    <!-- Weekday schedule -->191    <div class="item">192      <div class="doc-icon blue">193        <div class="doc-lines">194          <div></div><div></div><div></div>195        </div>196      </div>197      <div class="text-wrap">198        <div class="title-line">Weekday schedule</div>199        <div class="meta">11:59 · 4.1 MB · My Cloud</div>200      </div>201      <div class="check"></div>202    </div>203 204    <!-- Ad card -->205    <div class="ad-card">206      <div class="ad-image">[IMG: Ad]</div>207      <div class="ad-text">208        <div class="ad-title">Furlenco</div>209        <div class="ad-desc">Your favourite online furniture app - now in an all new avatar!...</div>210      </div>211      <div class="ad-open">OPEN</div>212    </div>213 214    <!-- Typical Weekend -->215    <div class="item">216      <div class="doc-icon blue">217        <div class="doc-lines">218          <div></div><div></div><div></div>219        </div>220      </div>221      <div class="text-wrap">222        <div class="title-line">Typical Weekend Schedule</div>223        <div class="meta">11:30 · 7 KB · My Cloud</div>224      </div>225      <div class="check"></div>226    </div>227 228    <!-- Into the Wild (selected) -->229    <div class="item selected">230      <div class="doc-icon red">231        <div class="doc-lines">232          <div></div><div></div><div></div>233        </div>234      </div>235      <div class="text-wrap">236        <div class="title-line">Into-the-Wild-Jon-Krakauer</div>237        <div class="meta">09:38 · 1.8 MB · Download</div>238      </div>239      <div class="check blue">240        <svg viewBox="0 0 24 24">241          <path d="M5 13 L10 18 L19 8" stroke="#fff" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>242        </svg>243      </div>244    </div>245 246    <!-- Invisible Man -->247    <div class="item">248      <div class="doc-icon red">249        <div class="doc-lines">250          <div></div><div></div><div></div>251        </div>252      </div>253      <div class="text-wrap">254        <div class="title-line">Ralph-Ellison-Invisible-Man-Text</div>255        <div class="meta">09:05 · 2.3 MB · Download</div>256      </div>257      <div class="check"></div>258    </div>259 260    <!-- Footer button -->261    <div class="footer">262      <div class="open-files">Open files</div>263    </div>264    <div class="no-history">No earlier history</div>265  </div>266 267  <!-- Bottom gesture bar -->268  <div class="gesture"></div>269</div>270</body>271</html>