GD-ML/AndroidCode
13.4k
1<!DOCTYPE html>2<html>3<head>4<meta charset="utf-8">5<meta name="viewport" content="width=1080, initial-scale=1">6<style>7 body { margin: 0; padding: 0; background: transparent; font-family: Arial, Helvetica, sans-serif; }8 #render-target {9 width: 1080px; height: 2400px;10 position: relative; overflow: hidden;11 background: #0f1f1d; /* dark teal/greenish */12 color: #e7ece9;13 }14 15 /* General */16 .content { padding: 40px; }17 .muted { color: #97a7a2; }18 .accent { color: #87d8a7; }19 .divider { height: 1px; background: #23302e; margin: 16px 0; }20 21 /* Status bar */22 .status-bar {23 height: 96px;24 padding: 0 36px;25 display: flex;26 align-items: center;27 justify-content: space-between;28 color: #e7ece9;29 font-size: 38px;30 letter-spacing: 0.5px;31 }32 .status-right { display: flex; align-items: center; gap: 24px; }33 .status-icon { width: 36px; height: 36px; opacity: 0.85; }34 35 /* Top App Bar */36 .top-bar {37 height: 120px;38 display: flex;39 align-items: center;40 padding: 0 40px;41 }42 .hamburger { width: 64px; height: 64px; margin-right: 24px; }43 .title { font-size: 68px; font-weight: 700; letter-spacing: 0.5px; }44 .top-actions { margin-left: auto; display: flex; align-items: center; gap: 36px; }45 .icon-btn { width: 60px; height: 60px; }46 47 /* Filters */48 .filters {49 display: flex;50 align-items: center;51 gap: 24px;52 padding: 0 40px;53 }54 .chip {55 display: inline-flex;56 align-items: center;57 gap: 18px;58 border: 2px solid #3a4946;59 color: #cfe1db;60 padding: 18px 26px;61 border-radius: 28px;62 font-size: 34px;63 }64 .chip svg { width: 34px; height: 34px; }65 .grid-toggle { margin-left: auto; }66 .grid-toggle .icon-btn { width: 56px; height: 56px; opacity: 0.9; }67 68 /* Section title */69 .section-title {70 padding: 28px 40px 10px 40px;71 font-size: 40px;72 color: #c7d2cf;73 }74 75 /* Cards grid */76 .cards {77 padding: 0 40px 24px 40px;78 display: grid;79 grid-template-columns: 1fr 1fr;80 gap: 36px;81 }82 .card {83 position: relative;84 height: 500px;85 border-radius: 28px;86 background: #1d2524;87 border: 2px solid #2d3836;88 overflow: hidden;89 }90 .card .expand {91 position: absolute;92 top: 18px; right: 18px;93 width: 56px; height: 56px;94 background: rgba(20, 27, 26, 0.6);95 border-radius: 14px;96 display: flex; align-items: center; justify-content: center;97 border: 2px solid #2f3a38;98 }99 .card .thumb {100 position: absolute;101 left: 0; right: 0; top: 0; bottom: 120px;102 display: flex; align-items: center; justify-content: center;103 color: #9fb1ac;104 }105 .card .thumb .img {106 width: 200px; height: 200px;107 background: #E0E0E0; border: 1px solid #BDBDBD;108 display: flex; align-items: center; justify-content: center;109 color: #757575; font-size: 32px; border-radius: 16px;110 }111 .card .footer {112 position: absolute;113 left: 0; right: 0; bottom: 0;114 height: 120px;115 background: #18201f;116 border-top: 2px solid #2d3836;117 padding: 20px 28px;118 display: flex; flex-direction: column; justify-content: center;119 }120 .file-row {121 display: flex; align-items: center; gap: 18px;122 font-size: 36px;123 }124 .file-meta { margin-top: 8px; font-size: 30px; color: #97a7a2; }125 126 .type-pill {127 display: inline-flex; align-items: center; justify-content: center;128 background: #c57b73; color: #2a1d1b; font-weight: 700;129 width: 80px; height: 52px; border-radius: 10px; font-size: 28px;130 }131 .video-accent { color: #87d8a7; }132 133 /* Gesture pill */134 .gesture {135 position: absolute; bottom: 40px; left: 50%;136 transform: translateX(-50%);137 width: 360px; height: 16px; border-radius: 16px;138 background: #e7ece9; opacity: 0.6;139 }140</style>141</head>142<body>143<div id="render-target">144 145 <!-- Status bar -->146 <div class="status-bar">147 <div>12:23</div>148 <div class="status-right">149 <!-- Simple status glyphs -->150 <svg class="status-icon" viewBox="0 0 24 24">151 <circle cx="12" cy="12" r="10" fill="#cfe1db"></circle>152 <path d="M12 6v6l4 2" stroke="#0f1f1d" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"></path>153 </svg>154 <svg class="status-icon" viewBox="0 0 24 24">155 <path d="M2 18h20l-3-10H5z" fill="#cfe1db"></path>156 </svg>157 <svg class="status-icon" viewBox="0 0 24 24">158 <rect x="4" y="6" width="14" height="12" rx="2" fill="#cfe1db"></rect>159 <rect x="19" y="10" width="2" height="4" fill="#cfe1db"></rect>160 </svg>161 <div style="font-size:32px; color:#cfe1db;">100%</div>162 </div>163 </div>164 165 <!-- Top App Bar -->166 <div class="top-bar">167 <svg class="hamburger" viewBox="0 0 24 24">168 <path d="M3 6h18M3 12h18M3 18h18" stroke="#e7ece9" stroke-width="2.4" stroke-linecap="round"></path>169 </svg>170 <div class="title">Downloads</div>171 <div class="top-actions">172 <!-- Search -->173 <svg class="icon-btn" viewBox="0 0 24 24">174 <circle cx="11" cy="11" r="7" stroke="#e7ece9" stroke-width="2.2" fill="none"></circle>175 <path d="M20 20l-4.5-4.5" stroke="#e7ece9" stroke-width="2.2" stroke-linecap="round"></path>176 </svg>177 <!-- Kebab -->178 <svg class="icon-btn" viewBox="0 0 24 24">179 <circle cx="12" cy="5" r="2.2" fill="#e7ece9"></circle>180 <circle cx="12" cy="12" r="2.2" fill="#e7ece9"></circle>181 <circle cx="12" cy="19" r="2.2" fill="#e7ece9"></circle>182 </svg>183 </div>184 </div>185 186 <!-- Filters -->187 <div class="filters">188 <div class="accent" style="font-size:40px; margin-right:8px;">Downloads</div>189 </div>190 <div class="filters" style="margin-top: 16px;">191 <div class="chip">192 <svg viewBox="0 0 24 24">193 <path d="M4 6h12l4 6-4 6H4z" fill="none" stroke="#cfe1db" stroke-width="2"></path>194 <circle cx="9" cy="12" r="2" fill="#cfe1db"></circle>195 </svg>196 <span>Large files</span>197 </div>198 <div class="chip">199 <svg viewBox="0 0 24 24">200 <circle cx="12" cy="12" r="8" fill="none" stroke="#cfe1db" stroke-width="2"></circle>201 <path d="M12 8v5l3 2" stroke="#cfe1db" stroke-width="2" stroke-linecap="round"></path>202 </svg>203 <span>This week</span>204 </div>205 <div class="grid-toggle" style="margin-left:auto;">206 <svg class="icon-btn" viewBox="0 0 24 24">207 <rect x="3" y="5" width="6" height="5" fill="#cfe1db"></rect>208 <rect x="13" y="5" width="8" height="5" fill="#cfe1db"></rect>209 <rect x="3" y="14" width="6" height="6" fill="#cfe1db"></rect>210 <rect x="13" y="14" width="8" height="6" fill="#cfe1db"></rect>211 </svg>212 </div>213 </div>214 215 <div class="section-title">Files in Downloads</div>216 217 <!-- Cards Grid -->218 <div class="cards">219 220 <!-- Card 1: contacts.vcf -->221 <div class="card">222 <div class="expand">223 <svg viewBox="0 0 24 24">224 <path d="M3 10V3h7M21 10V3h-7M3 14v7h7M21 14v7h-7" fill="none" stroke="#cfe1db" stroke-width="2" stroke-linecap="round"></path>225 </svg>226 </div>227 <div class="thumb">228 <div class="img">[IMG: Contact Icon]</div>229 </div>230 <div class="footer">231 <div class="file-row">232 <svg viewBox="0 0 24 24" width="34" height="34">233 <circle cx="12" cy="8" r="3.5" fill="#cfe1db"></circle>234 <path d="M4 20c2-4 6-4 8-4s6 0 8 4" fill="none" stroke="#cfe1db" stroke-width="2" stroke-linecap="round"></path>235 </svg>236 <span style="font-weight:600;">contacts.vcf</span>237 </div>238 <div class="file-meta">76 B 11:24 AM</div>239 </div>240 </div>241 242 <!-- Card 2: video production -->243 <div class="card">244 <div class="thumb">245 <svg viewBox="0 0 120 120" width="120" height="120" class="video-accent">246 <rect x="20" y="40" width="80" height="50" rx="8" fill="none" stroke="#87d8a7" stroke-width="6"></rect>247 <rect x="20" y="32" width="20" height="8" fill="#87d8a7"></rect>248 <rect x="44" y="32" width="20" height="8" fill="#87d8a7"></rect>249 </svg>250 </div>251 <div class="footer">252 <div class="file-row">253 <svg viewBox="0 0 24 24" width="34" height="34">254 <rect x="3" y="8" width="18" height="12" rx="2" fill="#87d8a7"></rect>255 <rect x="3" y="6" width="6" height="2" fill="#87d8a7"></rect>256 </svg>257 <span style="font-weight:600;">production_id_3...</span>258 </div>259 <div class="file-meta">52.06 MB Dec 1</div>260 </div>261 </div>262 263 <!-- Card 3: PDF The Martian -->264 <div class="card">265 <div class="thumb">266 <div class="type-pill">PDF</div>267 </div>268 <div class="footer">269 <div class="file-row">270 <div class="type-pill" style="width:70px; height:44px; font-size:26px;">PDF</div>271 <span style="font-weight:600;">The Martian - A...</span>272 </div>273 <div class="file-meta">1.26 MB Nov 29</div>274 </div>275 </div>276 277 <!-- Card 4: PDF germanycountry... -->278 <div class="card">279 <div class="thumb">280 <div class="type-pill">PDF</div>281 </div>282 <div class="footer">283 <div class="file-row">284 <div class="type-pill" style="width:70px; height:44px; font-size:26px;">PDF</div>285 <span style="font-weight:600;">germanycountr...</span>286 </div>287 <div class="file-meta">51.00 MB Nov 9</div>288 </div>289 </div>290 291 <!-- Card 5: PDF (placeholder) -->292 <div class="card">293 <div class="thumb">294 <div class="type-pill">PDF</div>295 </div>296 <div class="footer">297 <div class="file-row">298 <div class="type-pill" style="width:70px; height:44px; font-size:26px;">PDF</div>299 <span style="font-weight:600;">Document.pdf</span>300 </div>301 <div class="file-meta">2.4 MB Nov 7</div>302 </div>303 </div>304 305 <!-- Card 6: PDF (placeholder) -->306 <div class="card">307 <div class="thumb">308 <div class="type-pill">PDF</div>309 </div>310 <div class="footer">311 <div class="file-row">312 <div class="type-pill" style="width:70px; height:44px; font-size:26px;">PDF</div>313 <span style="font-weight:600;">Report.pdf</span>314 </div>315 <div class="file-meta">840 KB Nov 5</div>316 </div>317 </div>318 319 </div>320 321 <!-- Gesture pill -->322 <div class="gesture"></div>323</div>324</body>325</html>