GD-ML/AndroidCode

1<!DOCTYPE html>2<html>3<head>4<meta charset="UTF-8">5<title>Files - Browse</title>6<style>7  body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }8  #render-target {9    width: 1080px; height: 2160px; position: relative; overflow: hidden;10    background: #eaf0fb; border-radius: 32px;11  }12  .status-bar {13    height: 90px; padding: 0 36px; display: flex; align-items: center; justify-content: space-between;14    color: #222; font-weight: 500; font-size: 28px;15  }16  .status-icons { display: flex; align-items: center; gap: 24px; color: #444; }17  .main { padding: 0 32px; }18  .search-wrap { padding: 8px 0 18px; }19  .search-bar {20    background: #fff; border-radius: 36px; height: 104px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);21    display: flex; align-items: center; padding: 0 26px; gap: 22px;22  }23  .search-text { flex: 1; color: #4b4f58; font-size: 36px; }24  .icon { width: 48px; height: 48px; }25  .divider-soft { height: 16px; }26  .quick-grid {27    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 4px;28  }29  .card {30    background: #fff; border-radius: 36px; padding: 32px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);31    display: flex; align-items: center; gap: 26px; min-height: 160px;32  }33  .card-title { font-size: 36px; color: #222; }34  .card-sub { font-size: 26px; color: #7a7f88; margin-top: 6px; }35  .card-col { display: flex; flex-direction: column; }36  .section {37    margin-top: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 4px;38  }39  .section h2 { margin: 0; font-size: 42px; color: #2a2d33; font-weight: 700; }40  .list-stack { display: flex; flex-direction: column; gap: 24px; margin-top: 20px; }41  .list-card {42    background: #fff; border-radius: 36px; padding: 32px; box-shadow: 0 2px 0 rgba(0,0,0,0.06);43    display: flex; align-items: center; gap: 26px; min-height: 150px;44  }45  .list-title { font-size: 36px; color: #222; }46  .list-sub { font-size: 26px; color: #7a7f88; margin-top: 6px; }47  .bottom-nav {48    position: absolute; left: 0; right: 0; bottom: 0; height: 280px; background: rgba(233,238,251,0.96);49    border-top: 1px solid rgba(0,0,0,0.06);50  }51  .nav-items { height: 220px; display: flex; align-items: center; justify-content: space-around; padding: 0 40px; }52  .nav-item { width: 280px; text-align: center; color: #6b717c; }53  .nav-item .label { font-size: 28px; margin-top: 14px; }54  .nav-icon { width: 60px; height: 60px; margin: 0 auto; display: block; }55  .nav-active .label { color: #16181b; font-weight: 700; }56  .nav-active .icon-highlight {57    width: 120px; height: 90px; background: rgba(69,97,255,0.1); border-radius: 40px; margin: 0 auto 8px;58    display: flex; align-items: center; justify-content: center;59  }60  .gesture {61    position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);62    width: 160px; height: 14px; background: #b9c0cf; border-radius: 10px;63  }64  .back-hint {65    position: absolute; bottom: 132px; left: 36px; width: 28px; height: 28px; color: #98a1b3;66  }67  /* small vertical dots icon */68  .dots { width: 36px; height: 36px; }69</style>70</head>71<body>72<div id="render-target">73 74  <!-- Status bar -->75  <div class="status-bar">76    <div>10:11</div>77    <div class="status-icons">78      <!-- simple mail icon -->79      <svg class="icon" viewBox="0 0 24 24">80        <path d="M3 6h18v12H3z" fill="none" stroke="#555" stroke-width="2" />81        <path d="M3 7l9 6 9-6" fill="none" stroke="#555" stroke-width="2"/>82      </svg>83      <!-- wifi -->84      <svg class="icon" viewBox="0 0 24 24">85        <path d="M2 10c6-6 14-6 20 0" fill="none" stroke="#555" stroke-width="2"/>86        <path d="M6 14c4-4 8-4 12 0" fill="none" stroke="#555" stroke-width="2"/>87        <circle cx="12" cy="18" r="2" fill="#555"/>88      </svg>89      <!-- battery -->90      <svg class="icon" viewBox="0 0 28 24">91        <rect x="2" y="6" width="20" height="12" rx="2" ry="2" fill="none" stroke="#555" stroke-width="2"/>92        <rect x="4" y="8" width="14" height="8" rx="1" fill="#555"/>93        <rect x="22" y="9" width="3" height="6" rx="1" fill="#555"/>94      </svg>95    </div>96  </div>97 98  <div class="main">99    <!-- Search bar -->100    <div class="search-wrap">101      <div class="search-bar">102        <!-- hamburger -->103        <svg class="icon" viewBox="0 0 24 24">104          <path d="M3 6h18M3 12h18M3 18h18" stroke="#222" stroke-width="2" stroke-linecap="round"/>105        </svg>106        <div class="search-text">Search in Files</div>107        <!-- search icon -->108        <svg class="icon" viewBox="0 0 24 24">109          <circle cx="10" cy="10" r="6" fill="none" stroke="#222" stroke-width="2"/>110          <path d="M15 15l6 6" stroke="#222" stroke-width="2" stroke-linecap="round"/>111        </svg>112      </div>113    </div>114 115    <div class="divider-soft"></div>116 117    <!-- Quick access grid -->118    <div class="quick-grid">119      <!-- Videos -->120      <div class="card">121        <svg class="icon" viewBox="0 0 24 24">122          <rect x="3" y="5" width="18" height="14" rx="2" fill="none" stroke="#22c45f" stroke-width="2"/>123          <polygon points="10,9 15,12 10,15" fill="#22c45f"/>124        </svg>125        <div class="card-col">126          <div class="card-title">Videos</div>127          <div class="card-sub">0 B</div>128        </div>129      </div>130      <!-- Audio -->131      <div class="card">132        <svg class="icon" viewBox="0 0 24 24">133          <path d="M8 5v10a3 3 0 1 0 2-3V5h6v8a3 3 0 1 0 2-3V5" fill="none" stroke="#8d57ff" stroke-width="2"/>134        </svg>135        <div class="card-col">136          <div class="card-title">Audio</div>137          <div class="card-sub">0 B</div>138        </div>139      </div>140      <!-- Documents & other -->141      <div class="card">142        <svg class="icon" viewBox="0 0 24 24">143          <path d="M6 3h8l4 4v14H6z" fill="none" stroke="#27c1ff" stroke-width="2"/>144          <path d="M14 3v5h5" fill="none" stroke="#27c1ff" stroke-width="2"/>145        </svg>146        <div class="card-col">147          <div class="card-title">Documents & other</div>148          <div class="card-sub">25 MB</div>149        </div>150      </div>151      <!-- Apps -->152      <div class="card">153        <svg class="icon" viewBox="0 0 24 24">154          <rect x="4" y="7" width="16" height="12" rx="4" fill="none" stroke="#999" stroke-width="2"/>155          <circle cx="8" cy="13" r="1.5" fill="#999"/>156          <circle cx="16" cy="13" r="1.5" fill="#999"/>157        </svg>158        <div class="card-col">159          <div class="card-title">Apps</div>160          <div class="card-sub">6.6 GB</div>161        </div>162      </div>163    </div>164 165    <!-- Collections -->166    <div class="section">167      <h2>Collections</h2>168      <svg class="dots" viewBox="0 0 24 24">169        <circle cx="12" cy="5" r="2" fill="#555"/>170        <circle cx="12" cy="12" r="2" fill="#555"/>171        <circle cx="12" cy="19" r="2" fill="#555"/>172      </svg>173    </div>174    <div class="list-stack">175      <div class="list-card">176        <svg class="icon" viewBox="0 0 24 24">177          <path d="M12 3l2.3 4.7 5.2.8-3.8 3.7.9 5.2L12 15l-4.6 2.4.9-5.2L4.5 8.5l5.2-.8L12 3z" fill="none" stroke="#f7b500" stroke-width="2"/>178        </svg>179        <div class="card-col">180          <div class="list-title">Favourites</div>181        </div>182      </div>183      <div class="list-card">184        <svg class="icon" viewBox="0 0 24 24">185          <rect x="5" y="9" width="14" height="10" rx="2" fill="none" stroke="#3c84ff" stroke-width="2"/>186          <path d="M8 9V7a4 4 0 0 1 8 0v2" fill="none" stroke="#3c84ff" stroke-width="2"/>187        </svg>188        <div class="card-col">189          <div class="list-title">Safe folder</div>190        </div>191      </div>192    </div>193 194    <!-- Storage devices -->195    <div class="section" style="margin-top: 40px;">196      <h2>Storage devices</h2>197    </div>198    <div class="list-stack">199      <div class="list-card">200        <svg class="icon" viewBox="0 0 24 24">201          <rect x="7" y="2" width="10" height="20" rx="2" fill="none" stroke="#666" stroke-width="2"/>202          <rect x="10" y="17" width="4" height="2" fill="#666"/>203        </svg>204        <div class="card-col">205          <div class="list-title">Internal storage</div>206          <div class="list-sub">45 GB free</div>207        </div>208      </div>209      <div class="list-card">210        <svg class="icon" viewBox="0 0 24 24">211          <rect x="4" y="5" width="16" height="3" rx="1" fill="#777"/>212          <rect x="4" y="10" width="16" height="3" rx="1" fill="#777"/>213          <rect x="4" y="15" width="16" height="3" rx="1" fill="#777"/>214        </svg>215        <div class="card-col">216          <div class="list-title">Other storage</div>217          <div class="list-sub">Browse cloud storage and developer files</div>218        </div>219      </div>220    </div>221  </div>222 223  <!-- Bottom navigation -->224  <div class="bottom-nav">225    <div class="nav-items">226      <div class="nav-item">227        <svg class="nav-icon" viewBox="0 0 24 24">228          <path d="M4 18l4-4M6 8l2-2M12 4l2 2M16 12l4 4" fill="none" stroke="#6b717c" stroke-width="2" stroke-linecap="round"/>229        </svg>230        <div class="label">Clean</div>231      </div>232      <div class="nav-item nav-active">233        <div class="icon-highlight">234          <svg class="nav-icon" viewBox="0 0 24 24">235            <circle cx="10" cy="10" r="6" fill="none" stroke="#16181b" stroke-width="2"/>236            <path d="M15 15l6 6" stroke="#16181b" stroke-width="2" stroke-linecap="round"/>237          </svg>238        </div>239        <div class="label">Browse</div>240      </div>241      <div class="nav-item">242        <svg class="nav-icon" viewBox="0 0 24 24">243          <path d="M4 8c6 6 10 6 16 0M10 12l4 4" fill="none" stroke="#6b717c" stroke-width="2" stroke-linecap="round"/>244        </svg>245        <div class="label">Nearby Share</div>246      </div>247    </div>248    <svg class="back-hint" viewBox="0 0 24 24">249      <path d="M14 5l-7 7 7 7" fill="none" stroke="#98a1b3" stroke-width="2" stroke-linecap="round"/>250    </svg>251    <div class="gesture"></div>252  </div>253 254</div>255</body>256</html>