GD-ML/AndroidCode
13.4k
1<html lang="en">2<head>3<meta charset="UTF-8">4<title>Android Files - Browse</title>5<meta name="viewport" content="width=1080, initial-scale=1.0">6<style>7 body { margin:0; padding:0; background: transparent; }8 #render-target {9 width:1080px; height:2400px; position:relative; overflow:hidden;10 background:#121416; color:#ffffff; font-family: Roboto, Arial, sans-serif;11 }12 13 /* Status bar */14 .status-bar {15 height:90px; padding:0 32px; display:flex; align-items:center; justify-content:space-between;16 color:#d9e0e6; font-size:32px; letter-spacing:0.5px;17 }18 .status-right { display:flex; align-items:center; gap:22px; }19 .status-icon svg { width:36px; height:36px; fill:#d9e0e6; }20 21 /* Search header */22 .search-wrap { padding:0 36px; }23 .search-bar {24 margin-top:12px; height:120px; border-radius:60px; background:#1c1f22;25 display:flex; align-items:center; justify-content:space-between; padding:0 30px;26 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);27 }28 .search-left { display:flex; align-items:center; gap:30px; }29 .search-text { color:#cfd8dc; font-size:40px; }30 .icon-btn svg { width:48px; height:48px; fill:#cfd8dc; }31 32 /* Page content */33 .content { padding:26px 36px 220px; }34 .section-title { font-size:54px; font-weight:600; margin:24px 0 24px; }35 .recent-grid {36 display:grid; grid-template-columns:1fr 1fr 1fr; gap:26px;37 }38 .recent-card { }39 .img-ph {40 width:100%; height:260px; background:#E0E0E0;41 border:1px solid #BDBDBD; display:flex; align-items:center; justify-content:center;42 color:#757575; font-size:28px; text-align:center; border-radius:18px;43 }44 .caption { margin-top:18px; font-size:40px; font-weight:600; }45 .subcaption { margin-top:6px; font-size:30px; color:#aab4bd; }46 47 /* Categories */48 .cat-title { margin-top:30px; }49 .cat-grid { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }50 .cat-tile {51 background:#191d20; border-radius:26px; height:170px; padding:26px;52 display:flex; align-items:center; justify-content:space-between;53 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);54 }55 .cat-left { display:flex; align-items:center; gap:26px; }56 .cat-icon svg { width:56px; height:56px; fill:#cfd8dc; }57 .cat-label { font-size:44px; }58 .cat-size { font-size:32px; color:#9fb0bb; }59 60 /* Info bubble card */61 .bubble-card {62 position:relative; background:#a7cdf5; color:#0b2540;63 border-radius:26px; padding:26px; height:300px;64 }65 .bubble-card .bubble-content { display:flex; align-items:center; gap:20px; }66 .bubble-illustration {67 width:160px; height:120px; background:#E0E0E0; border:1px solid #BDBDBD;68 display:flex; align-items:center; justify-content:center; color:#555; border-radius:14px;69 }70 .bubble-text { font-size:40px; line-height:1.3; }71 .bubble-tail {72 position:absolute; bottom:-24px; left:80px; width:0; height:0;73 border-left:24px solid transparent; border-right:24px solid transparent;74 border-top:24px solid #a7cdf5;75 }76 77 /* Safe folder tile */78 .safe-folder {79 margin-top:36px; background:#191d20; border-radius:26px; height:140px; padding:26px;80 display:flex; align-items:center; gap:24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);81 font-size:42px;82 }83 .lock-icon svg { width:48px; height:48px; fill:#cfd8dc; }84 85 /* Bottom navigation */86 .bottom-nav {87 position:absolute; left:0; bottom:0; width:100%; height:180px;88 background:#171a1d; display:flex; align-items:center; justify-content:space-around;89 box-shadow: 0 -4px 12px rgba(0,0,0,0.35);90 }91 .nav-item { display:flex; flex-direction:column; align-items:center; gap:14px; color:#9fb0bb; font-size:36px; }92 .nav-item.active { color:#ffffff; }93 .nav-icon svg { width:56px; height:56px; fill:currentColor; }94 .browse-pill {95 width:116px; height:116px; border-radius:58px; background:#2a3948;96 display:flex; align-items:center; justify-content:center;97 }98 99 /* Helper small dots (ellipsis) */100 .dots { color:#9fb0bb; font-size:44px; }101</style>102</head>103<body>104<div id="render-target">105 106 <!-- Status bar -->107 <div class="status-bar">108 <div>11:39</div>109 <div class="status-right">110 <div class="status-icon">111 <!-- Location/sun icon simplified -->112 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"></circle><path d="M12 1v4M12 19v4M1 12h4M19 12h4M4.2 4.2l2.8 2.8M17 17l2.8 2.8M17 7l2.8-2.8M4.2 19.8 7 17" stroke="#d9e0e6" stroke-width="2" fill="none"/></svg>113 </div>114 <div class="status-icon">115 <!-- WiFi -->116 <svg viewBox="0 0 24 24"><path d="M2 8c5-4 15-4 20 0M5 12c3-3 11-3 14 0M8 16c2-2 6-2 8 0"></path><circle cx="12" cy="19" r="2"></circle></svg>117 </div>118 <div class="status-icon">119 <!-- Battery -->120 <svg viewBox="0 0 28 20">121 <rect x="1" y="3" width="22" height="14" rx="2" ry="2"></rect>122 <rect x="24" y="7" width="3" height="6" rx="1"></rect>123 <rect x="3" y="5" width="15" height="10" fill="#d9e0e6"></rect>124 </svg>125 </div>126 </div>127 </div>128 129 <!-- Search Header -->130 <div class="search-wrap">131 <div class="search-bar">132 <div class="search-left">133 <div class="icon-btn">134 <!-- Hamburger -->135 <svg viewBox="0 0 24 24"><path d="M3 5h18M3 12h18M3 19h18" stroke="#cfd8dc" stroke-width="2" fill="none" stroke-linecap="round"/></svg>136 </div>137 <div class="search-text">Search in Files</div>138 </div>139 <div class="icon-btn">140 <!-- Search -->141 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="#cfd8dc" stroke-width="2" fill="none"/><path d="M16.5 16.5L21 21" stroke="#cfd8dc" stroke-width="2" stroke-linecap="round"/></svg>142 </div>143 </div>144 </div>145 146 <!-- Content -->147 <div class="content">148 <div class="section-title">Recent</div>149 150 <div class="recent-grid">151 <div class="recent-card">152 <div class="img-ph">[IMG: PDF preview - COVID-19 Clinical Management]</div>153 <div class="caption">Download</div>154 <div class="subcaption">Documents & other</div>155 </div>156 <div class="recent-card">157 <div class="img-ph">[IMG: Canned coffee - screenshots]</div>158 <div class="caption">Screenshots</div>159 <div class="subcaption">Images</div>160 </div>161 <div class="recent-card">162 <div class="img-ph">[IMG: Camera shots - Eiffel Tower & Unicorn]</div>163 <div class="caption">Camera</div>164 <div class="subcaption">Images</div>165 </div>166 </div>167 168 <div class="section-title cat-title">Categories</div>169 170 <div class="cat-grid">171 <div class="cat-tile">172 <div class="cat-left">173 <div class="cat-icon">174 <!-- Download -->175 <svg viewBox="0 0 24 24"><path d="M12 3v10"></path><path d="M7 9l5 5 5-5"></path><path d="M3 21h18"></path></svg>176 </div>177 <div class="cat-label">Downloads</div>178 </div>179 <div class="cat-size">6.1 MB</div>180 </div>181 182 <div class="cat-tile">183 <div class="cat-left">184 <div class="cat-icon">185 <!-- Image -->186 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"></rect><circle cx="9" cy="11" r="2"></circle><path d="M7 17l4-3 3 2 3-3 3 4"></path></svg>187 </div>188 <div class="cat-label">Images</div>189 </div>190 <div class="cat-size">29 MB</div>191 </div>192 193 <div class="cat-tile">194 <div class="cat-left">195 <div class="cat-icon">196 <!-- Video -->197 <svg viewBox="0 0 24 24"><rect x="3" y="5" width="14" height="14" rx="2"></rect><path d="M17 9l4-2v10l-4-2"></path></svg>198 </div>199 <div class="cat-label">Videos</div>200 </div>201 <div class="cat-size">43 MB</div>202 </div>203 204 <div class="cat-tile">205 <div class="cat-left">206 <div class="cat-icon">207 <!-- Audio -->208 <svg viewBox="0 0 24 24"><path d="M8 5v10a3 3 0 1 0 2-2V5h8v6" stroke="#cfd8dc" stroke-width="2" fill="none"/></svg>209 </div>210 <div class="cat-label">Audio</div>211 </div>212 <div class="cat-size">0 B</div>213 </div>214 215 <!-- Info Bubble -->216 <div class="bubble-card">217 <div class="bubble-content">218 <div class="bubble-illustration">[IMG: Locked blue folder]</div>219 <div class="bubble-text">Move private files to this locked folder.</div>220 </div>221 <div class="bubble-tail"></div>222 </div>223 224 <div class="cat-tile">225 <div class="cat-left">226 <div class="cat-icon">227 <!-- Apps -->228 <svg viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="2"></rect><rect x="14" y="3" width="7" height="7" rx="2"></rect><rect x="3" y="14" width="7" height="7" rx="2"></rect><rect x="14" y="14" width="7" height="7" rx="2"></rect></svg>229 </div>230 <div class="cat-label">Apps</div>231 </div>232 <div class="cat-size">8.5 GB</div>233 </div>234 235 <div class="cat-tile" style="justify-content:flex-end">236 <div class="dots">⋮</div>237 </div>238 </div>239 240 <div class="safe-folder">241 <div class="lock-icon">242 <!-- Lock -->243 <svg viewBox="0 0 24 24"><rect x="5" y="11" width="14" height="10" rx="2"></rect><path d="M8 11V8a4 4 0 0 1 8 0v3" fill="none" stroke="#cfd8dc" stroke-width="2"/></svg>244 </div>245 <div>Safe folder</div>246 </div>247 </div>248 249 <!-- Bottom Navigation -->250 <div class="bottom-nav">251 <div class="nav-item">252 <div class="nav-icon">253 <!-- Sparkle/Clean -->254 <svg viewBox="0 0 24 24"><path d="M12 2l2 5 5 2-5 2-2 5-2-5-5-2 5-2 2-5z" fill="currentColor"/></svg>255 </div>256 <div>Clean</div>257 </div>258 <div class="nav-item active">259 <div class="browse-pill">260 <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="currentColor" stroke-width="2" fill="none"/><path d="M16.5 16.5L21 21" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>261 </div>262 <div>Browse</div>263 </div>264 <div class="nav-item">265 <div class="nav-icon">266 <!-- Nearby Share (waves) -->267 <svg viewBox="0 0 24 24"><path d="M6 9c3-3 9-3 12 0M6 15c3 3 9 3 12 0" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>268 </div>269 <div>Nearby Share</div>270 </div>271 </div>272 273</div>274</body>275</html>