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>File Manager UI</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; height: 2400px; position: relative; overflow: hidden;11    background: #FFFFFF;12  }13 14  /* Status bar */15  .status-bar {16    height: 120px; display: flex; align-items: center; padding: 0 40px;17    color: #7A7A7A; font-weight: 500;18  }19  .status-bar .time { font-size: 48px; }20  .status-icons { margin-left: auto; display: flex; align-items: center; gap: 28px; }21  .status-icons svg { width: 50px; height: 50px; stroke: #7A7A7A; fill: none; }22 23  /* Top toolbar */24  .top-toolbar {25    height: 150px; display: flex; align-items: center; justify-content: space-between;26    padding: 0 60px; border-bottom: 1px solid #E9E9E9;27  }28  .tb-icon { position: relative; width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; }29  .tb-icon svg { width: 64px; height: 64px; stroke: #7D7D7D; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }30  .tb-icon .red-dot { position: absolute; left: -8px; top: 6px; width: 16px; height: 16px; background: #FF3B30; border-radius: 50%; }31 32  /* Category grid */33  .categories { padding: 36px 60px 28px; display: flex; flex-wrap: wrap; gap: 40px 40px; }34  .cat { width: calc(25% - 30px); text-align: center; }35  .cat-icon {36    width: 130px; height: 130px; border-radius: 65px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;37    color: #FFFFFF;38  }39  .cat-label { font-size: 32px; color: #4A4A4A; }40  .green { background: #26C281; }41  .orange { background: #FF7A45; }42  .purple { background: #8E5AD7; }43  .pink { background: #FF5C93; }44  .blue { background: #1E88E5; }45  .red { background: #F75959; }46  .cat-icon svg { width: 72px; height: 72px; fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }47  .cat-icon .zip-text, .cat-icon .apk-text { font-size: 36px; font-weight: 700; letter-spacing: 1px; }48 49  .divider { height: 16px; border-top: 1px solid #E9E9E9; }50 51  /* Sections */52  .section { padding: 10px 30px 0; }53  .section-header {54    height: 90px; display: flex; align-items: center; border-bottom: 1px solid #F0F0F0;55  }56  .sec-icon {57    width: 38px; height: 38px; border-radius: 8px; background: #D7F0D7; border: 1px solid #BBDDBB; margin-right: 20px;58  }59  .section-title { font-size: 36px; color: #444; flex: 1; }60  .chevron { width: 44px; height: 44px; stroke: #9B9B9B; fill: none; stroke-width: 3; }61 62  /* Pictures content */63  .thumb-placeholder {64    width: 320px; height: 190px; margin: 28px 0 20px 68px;65    background: #E0E0E0; border: 1px solid #BDBDBD; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;66  }67 68  /* Music row */69  .file-row { display: flex; align-items: center; gap: 26px; padding: 26px 16px 26px 38px; }70  .file-icon {71    width: 120px; height: 120px; border-radius: 16px; background: #FF6FA2; position: relative; display: flex; align-items: center; justify-content: center;72    color: #FFFFFF;73  }74  .file-icon .mp3-text { font-size: 40px; font-weight: 800; }75  .file-icon .note {76    position: absolute; right: 12px; bottom: 10px; width: 28px; height: 28px;77  }78  .file-info { flex: 1; }79  .file-name { font-size: 36px; color: #333; margin-bottom: 8px; }80  .file-meta { font-size: 28px; color: #8F8F8F; }81  .check-circle {82    width: 52px; height: 52px; border-radius: 26px; border: 2px solid #C9C9C9; margin-right: 24px;83  }84 85  /* Home indicator */86  .home-indicator {87    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);88    width: 260px; height: 12px; background: #7A7A7A; border-radius: 6px;89  }90</style>91</head>92<body>93<div id="render-target">94 95  <!-- Status bar -->96  <div class="status-bar">97    <span class="time">8:45</span>98    <div class="status-icons">99      <!-- Wi-Fi -->100      <svg viewBox="0 0 48 48">101        <path d="M6 18c10-8 26-8 36 0" stroke-width="3"></path>102        <path d="M12 24c7-6 17-6 24 0" stroke-width="3"></path>103        <path d="M18 30c4-4 8-4 12 0" stroke-width="3"></path>104        <circle cx="24" cy="36" r="2.8" fill="#7A7A7A" stroke="none"></circle>105      </svg>106      <!-- Battery -->107      <svg viewBox="0 0 48 48">108        <rect x="6" y="14" width="32" height="20" rx="3"></rect>109        <rect x="40" y="18" width="4" height="12" rx="1"></rect>110        <rect x="10" y="18" width="24" height="12" fill="#7A7A7A" stroke="none"></rect>111      </svg>112    </div>113  </div>114 115  <!-- Toolbar -->116  <div class="top-toolbar">117    <div class="tb-icon">118      <svg viewBox="0 0 48 48">119        <path d="M6 12h36M6 24h36M6 36h36"></path>120      </svg>121      <span class="red-dot"></span>122    </div>123    <div class="tb-icon">124      <svg viewBox="0 0 48 48">125        <rect x="6" y="12" width="36" height="30" rx="4"></rect>126        <path d="M14 8v8M34 8v8"></path>127      </svg>128    </div>129    <div class="tb-icon">130      <svg viewBox="0 0 48 48">131        <circle cx="24" cy="24" r="18"></circle>132        <path d="M24 24v-10M24 24l8 4"></path>133      </svg>134    </div>135    <div class="tb-icon">136      <svg viewBox="0 0 48 48">137        <path d="M6 18h16l6 6h14v18H6z"></path>138      </svg>139    </div>140    <div class="tb-icon">141      <svg viewBox="0 0 48 48">142        <circle cx="22" cy="22" r="14"></circle>143        <path d="M34 34l8 8"></path>144      </svg>145    </div>146  </div>147 148  <!-- Categories -->149  <div class="categories">150    <div class="cat">151      <div class="cat-icon green">152        <svg viewBox="0 0 48 48">153          <circle cx="34" cy="16" r="4" stroke="none" fill="#FFFFFF"></circle>154          <path d="M10 34l9-10 8 8 7-6 10 8" stroke="#FFFFFF" stroke-width="3.5" fill="none"></path>155        </svg>156      </div>157      <div class="cat-label">Images</div>158    </div>159 160    <div class="cat">161      <div class="cat-icon orange">162        <svg viewBox="0 0 48 48">163          <path d="M18 14l18 10-18 10z" fill="#FFFFFF" stroke="none"></path>164        </svg>165      </div>166      <div class="cat-label">Videos</div>167    </div>168 169    <div class="cat">170      <div class="cat-icon purple">171        <svg viewBox="0 0 48 48">172          <path d="M16 12h16l6 6v20H16z"></path>173          <path d="M20 24h16M20 30h12"></path>174        </svg>175      </div>176      <div class="cat-label">Docs</div>177    </div>178 179    <div class="cat">180      <div class="cat-icon pink">181        <svg viewBox="0 0 48 48">182          <path d="M20 14v16" ></path>183          <circle cx="16" cy="34" r="6" stroke="#FFFFFF" fill="none"></circle>184          <path d="M28 16v10"></path>185          <circle cx="28" cy="32" r="6" stroke="#FFFFFF" fill="none"></circle>186        </svg>187      </div>188      <div class="cat-label">Music</div>189    </div>190 191    <div class="cat">192      <div class="cat-icon green">193        <div class="apk-text">APK</div>194      </div>195      <div class="cat-label">APKs</div>196    </div>197 198    <div class="cat">199      <div class="cat-icon blue">200        <svg viewBox="0 0 48 48">201          <path d="M24 10v20"></path>202          <path d="M16 22l8 8 8-8"></path>203        </svg>204      </div>205      <div class="cat-label">Downloads</div>206    </div>207 208    <div class="cat">209      <div class="cat-icon orange">210        <div class="zip-text">ZIP</div>211      </div>212      <div class="cat-label">Archives</div>213    </div>214 215    <div class="cat">216      <div class="cat-icon red">217        <svg viewBox="0 0 48 48">218          <rect x="10" y="10" width="10" height="10" fill="#FFFFFF" stroke="none"></rect>219          <rect x="28" y="10" width="10" height="10" fill="#FFFFFF" stroke="none"></rect>220          <rect x="10" y="28" width="10" height="10" fill="#FFFFFF" stroke="none"></rect>221          <rect x="28" y="28" width="10" height="10" fill="#FFFFFF" stroke="none"></rect>222        </svg>223      </div>224      <div class="cat-label">More</div>225    </div>226  </div>227 228  <div class="divider"></div>229 230  <!-- Pictures Section -->231  <div class="section">232    <div class="section-header">233      <div class="sec-icon"></div>234      <div class="section-title">Pictures</div>235      <svg class="chevron" viewBox="0 0 48 48"><path d="M18 10l12 14-12 14"></path></svg>236    </div>237    <div class="thumb-placeholder">[IMG: Picture thumbnail]</div>238  </div>239 240  <!-- Music Section -->241  <div class="section">242    <div class="section-header">243      <div class="sec-icon"></div>244      <div class="section-title">Music</div>245      <svg class="chevron" viewBox="0 0 48 48"><path d="M18 10l12 14-12 14"></path></svg>246    </div>247 248    <div class="file-row">249      <div class="file-icon">250        <div class="mp3-text">MP3</div>251        <svg class="note" viewBox="0 0 24 24">252          <path d="M8 6v10" stroke="#FFFFFF" stroke-width="2" fill="none"></path>253          <circle cx="6" cy="18" r="4" stroke="#FFFFFF" stroke-width="2" fill="none"></circle>254        </svg>255      </div>256      <div class="file-info">257        <div class="file-name">au_uu_SzH34yR2.mp3</div>258        <div class="file-meta">00:00:00 | 1.14KB</div>259      </div>260      <div class="check-circle"></div>261    </div>262  </div>263 264  <!-- Home indicator -->265  <div class="home-indicator"></div>266 267</div>268</body>269</html>