GD-ML/AndroidCode
13.4k
1<html>2<head>3<meta charset="UTF-8">4<title>Android Files UI Mock</title>5<style>6 body { margin: 0; padding: 0; background: transparent; font-family: "Roboto", Arial, sans-serif; }7 #render-target {8 width: 1080px;9 height: 2400px;10 position: relative;11 overflow: hidden;12 background: #e7efe3;13 }14 15 /* Generic */16 .row { display: flex; }17 .col { display: flex; flex-direction: column; }18 .title { font-size: 58px; color: #1f2b1f; font-weight: 700; }19 .muted { color: #6c7b6c; }20 .shadow { box-shadow: 0 6px 14px rgba(0,0,0,0.08); }21 22 /* Top search */23 .search-wrap {24 position: absolute;25 top: 145px;26 left: 50px;27 right: 50px;28 height: 140px;29 background: #ffffff;30 border-radius: 80px;31 display: flex;32 align-items: center;33 padding: 0 40px;34 }35 .search-icon { width: 70px; height: 70px; margin-right: 26px; }36 .search-placeholder {37 font-size: 44px; color: #7a8877; flex: 1;38 }39 .right-icon { width: 70px; height: 70px; }40 41 /* Recent section */42 .recent {43 position: absolute;44 top: 340px;45 left: 50px;46 right: 50px;47 }48 .thumbs { margin-top: 28px; display: flex; gap: 44px; }49 .thumb {50 width: 486px;51 height: 340px;52 background: #E0E0E0;53 border: 1px solid #BDBDBD;54 border-radius: 24px;55 color: #757575;56 display: flex; align-items: center; justify-content: center;57 font-size: 34px;58 text-align: center;59 }60 .thumb-label { margin-top: 24px; font-size: 44px; color: #1e261e; font-weight: 600; }61 .thumb-sub { font-size: 34px; color: #657565; margin-top: 6px; }62 63 /* Categories */64 .categories {65 position: absolute;66 top: 970px;67 left: 50px;68 right: 50px;69 }70 .grid {71 margin-top: 28px;72 display: grid;73 grid-template-columns: 1fr 1fr;74 grid-gap: 34px;75 }76 .tile {77 background: #ffffff;78 border-radius: 36px;79 height: 210px;80 padding: 42px;81 display: flex;82 align-items: center;83 }84 .tile-icon {85 width: 84px; height: 84px;86 background: #eaf3e6;87 border-radius: 18px;88 display: flex; align-items: center; justify-content: center;89 margin-right: 36px;90 }91 .tile h4 { margin: 0; font-size: 46px; color: #1f2b1f; font-weight: 700; }92 .tile p { margin: 6px 0 0 0; font-size: 34px; color: #6e7e6e; }93 .red-dot {94 position: absolute;95 width: 26px; height: 26px; background: #d64033; border-radius: 50%;96 right: 64px;97 }98 99 /* Collections */100 .collections {101 position: absolute;102 top: 1690px;103 left: 50px; right: 50px;104 }105 .list {106 margin-top: 28px;107 display: flex; flex-direction: column; gap: 26px;108 }109 .list-item {110 height: 160px; background: #ffffff; border-radius: 28px;111 display: flex; align-items: center; padding: 0 40px;112 }113 .list-icon {114 width: 84px; height: 84px; background: #eaf3e6; border-radius: 18px;115 display: flex; align-items: center; justify-content: center; margin-right: 32px;116 }117 .list-title { font-size: 48px; color: #1e261e; font-weight: 600; }118 .more {119 position: absolute; right: 10px; top: 0; transform: translateY(10px);120 }121 122 /* Bottom navigation */123 .bottom-nav {124 position: absolute; left: 0; right: 0; bottom: 0;125 height: 190px; background: #e7efe3; border-top: 1px solid rgba(0,0,0,0.05);126 display: flex; justify-content: space-around; align-items: center;127 }128 .nav-item { display: flex; flex-direction: column; align-items: center; color: #607060; }129 .nav-item span { font-size: 34px; margin-top: 10px; }130 .nav-active { color: #0f3417; }131 .nav-active .icon-pill {132 width: 96px; height: 96px; border-radius: 30px; background: #dbe9d8;133 display: flex; align-items: center; justify-content: center;134 }135 136 /* Small status bar line */137 .home-indicator {138 position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);139 width: 360px; height: 10px; background: #616a61; opacity: .5; border-radius: 6px;140 }141 142 /* Heading dots icon */143 .dots {144 position: absolute; right: 18px; top: 10px;145 width: 26px; height: 90px; display: flex; align-items: center;146 }147</style>148</head>149<body>150<div id="render-target">151 152 <!-- Search bar -->153 <div class="search-wrap shadow">154 <!-- hamburger -->155 <svg class="search-icon" viewBox="0 0 24 24">156 <rect x="3" y="5" width="18" height="2" fill="#344834"></rect>157 <rect x="3" y="11" width="18" height="2" fill="#344834"></rect>158 <rect x="3" y="17" width="18" height="2" fill="#344834"></rect>159 </svg>160 <div class="search-placeholder">Search in Files</div>161 <!-- search -->162 <svg class="right-icon" viewBox="0 0 24 24">163 <circle cx="11" cy="11" r="6.5" stroke="#344834" stroke-width="2" fill="none"></circle>164 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#344834" stroke-width="2" />165 </svg>166 </div>167 168 <!-- Recent -->169 <div class="recent">170 <div class="row" style="justify-content: space-between; align-items: center;">171 <div class="title">Recent</div>172 </div>173 174 <div class="thumbs">175 <div class="col" style="width:486px;">176 <div class="thumb shadow">[IMG: Widget screenshots collage]</div>177 <div class="thumb-label">Pictures</div>178 <div class="thumb-sub">Images</div>179 </div>180 <div class="col" style="width:486px;">181 <div class="thumb shadow">[IMG: Green plant close-up]</div>182 <div class="thumb-label">Behance</div>183 <div class="thumb-sub">Images</div>184 </div>185 </div>186 </div>187 188 <!-- Categories -->189 <div class="categories">190 <div class="title">Categories</div>191 <div class="grid">192 <!-- Downloads -->193 <div class="tile shadow">194 <div class="tile-icon">195 <svg width="48" height="48" viewBox="0 0 24 24">196 <path d="M12 3v10m0 0l-4-4m4 4l4-4" stroke="#2f4a2f" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>197 <rect x="4" y="18" width="16" height="2" fill="#2f4a2f"/>198 </svg>199 </div>200 <div>201 <h4>Downloads</h4>202 <p>10 MB</p>203 </div>204 </div>205 <!-- Images -->206 <div class="tile shadow">207 <div class="tile-icon">208 <svg width="48" height="48" viewBox="0 0 24 24">209 <rect x="3" y="5" width="18" height="14" rx="2" ry="2" stroke="#2f4a2f" stroke-width="2" fill="none"/>210 <path d="M7 13l3-3 4 5 3-3 2 3" stroke="#2f4a2f" stroke-width="2" fill="none"/>211 </svg>212 </div>213 <div>214 <h4>Images</h4>215 <p>35 MB</p>216 </div>217 </div>218 <!-- Videos -->219 <div class="tile shadow">220 <div class="tile-icon">221 <svg width="48" height="48" viewBox="0 0 24 24">222 <rect x="3" y="6" width="14" height="12" rx="2" stroke="#2f4a2f" stroke-width="2" fill="none"/>223 <polygon points="10,12 14,14 14,10" fill="#2f4a2f"/>224 <rect x="19" y="8" width="2" height="8" fill="#2f4a2f"/>225 </svg>226 </div>227 <div>228 <h4>Videos</h4>229 <p>5.8 MB</p>230 </div>231 </div>232 <!-- Audio -->233 <div class="tile shadow">234 <div class="tile-icon">235 <svg width="48" height="48" viewBox="0 0 24 24">236 <path d="M9 7v9a3 3 0 1 1-2-2.83V7h8v6a3 3 0 1 1-2-2.83V7" stroke="#2f4a2f" stroke-width="2" fill="none" stroke-linecap="round"/>237 </svg>238 </div>239 <div>240 <h4>Audio</h4>241 <p>15 kB</p>242 </div>243 </div>244 <!-- Documents -->245 <div class="tile shadow">246 <div class="tile-icon">247 <svg width="48" height="48" viewBox="0 0 24 24">248 <path d="M6 3h7l5 5v13H6z" stroke="#2f4a2f" stroke-width="2" fill="none"/>249 <path d="M13 3v6h6" stroke="#2f4a2f" stroke-width="2" fill="none"/>250 </svg>251 </div>252 <div>253 <h4>Documents & o</h4>254 <p>11 MB</p>255 </div>256 </div>257 <!-- Apps -->258 <div class="tile shadow" style="position: relative;">259 <div class="tile-icon">260 <svg width="48" height="48" viewBox="0 0 24 24">261 <rect x="4" y="8" width="16" height="10" rx="2" ry="2" stroke="#2f4a2f" stroke-width="2" fill="none"/>262 <circle cx="9" cy="13" r="1.5" fill="#2f4a2f"/>263 <circle cx="15" cy="13" r="1.5" fill="#2f4a2f"/>264 <path d="M8 6l2 2M16 6l-2 2" stroke="#2f4a2f" stroke-width="2" stroke-linecap="round"/>265 </svg>266 </div>267 <div>268 <h4>Apps</h4>269 <p>21 GB</p>270 </div>271 <div class="red-dot" style="top: 32px;"></div>272 </div>273 </div>274 </div>275 276 <!-- Collections -->277 <div class="collections">278 <div style="position: relative;">279 <div class="title">Collections</div>280 <div class="dots">281 <svg width="36" height="100" viewBox="0 0 8 24">282 <circle cx="4" cy="4" r="2" fill="#475847"></circle>283 <circle cx="4" cy="12" r="2" fill="#475847"></circle>284 <circle cx="4" cy="20" r="2" fill="#475847"></circle>285 </svg>286 </div>287 </div>288 <div class="list">289 <div class="list-item shadow">290 <div class="list-icon">291 <svg width="44" height="44" viewBox="0 0 24 24">292 <path d="M12 4l2.4 4.86 5.4.78-3.9 3.8.92 5.36L12 16.9l-4.82 1.9.92-5.36L4.2 9.64l5.4-.78z" fill="#2f4a2f"/>293 </svg>294 </div>295 <div class="list-title">Favorites</div>296 </div>297 <div class="list-item shadow">298 <div class="list-icon">299 <svg width="44" height="44" viewBox="0 0 24 24">300 <rect x="4" y="9" width="16" height="10" rx="2" stroke="#2f4a2f" stroke-width="2" fill="none"/>301 <path d="M8 9V7a4 4 0 0 1 8 0v2" stroke="#2f4a2f" stroke-width="2" fill="none"/>302 </svg>303 </div>304 <div class="list-title">Safe folder</div>305 </div>306 </div>307 </div>308 309 <!-- Bottom Navigation -->310 <div class="bottom-nav">311 <div class="nav-item">312 <svg width="64" height="64" viewBox="0 0 24 24">313 <path d="M5 20h14M7 14l2 2 8-8" stroke="#5a6b5a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>314 <path d="M8 6l2 2" stroke="#5a6b5a" stroke-width="2" stroke-linecap="round"/>315 </svg>316 <span>Clean</span>317 </div>318 319 <div class="nav-item nav-active">320 <div class="icon-pill">321 <svg width="60" height="60" viewBox="0 0 24 24">322 <circle cx="11" cy="11" r="6.5" stroke="#0f3417" stroke-width="2" fill="none"></circle>323 <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="#0f3417" stroke-width="2"/>324 </svg>325 </div>326 <span>Browse</span>327 </div>328 329 <div class="nav-item">330 <svg width="64" height="64" viewBox="0 0 24 24">331 <path d="M5 12h14M12 5l4 4M12 19l4-4" stroke="#5a6b5a" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>332 </svg>333 <span>Nearby Share</span>334 </div>335 </div>336 337 <div class="home-indicator"></div>338</div>339</body>340</html>