GD-ML/AndroidCode
13.4k
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>Downloads Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F7E1DC; /* soft blush */15 font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;16 color: #4B2E2A;17 }18 19 /* Status bar */20 .status-bar {21 height: 100px;22 padding: 24px 36px 0 36px;23 box-sizing: border-box;24 display: flex;25 align-items: center;26 justify-content: space-between;27 color: #5A3A35;28 font-size: 36px;29 opacity: 0.95;30 }31 .sys-icons {32 display: flex;33 align-items: center;34 gap: 20px;35 }36 .sys-dot { width: 12px; height: 12px; background:#6B6B6B; border-radius: 50%; display:inline-block; }37 38 /* App header */39 .appbar {40 padding: 8px 36px 24px 36px;41 }42 .appbar-row {43 display: flex; align-items: center; justify-content: space-between;44 }45 .appbar-left, .appbar-right { display: flex; align-items: center; gap: 24px; }46 .title {47 font-size: 72px;48 font-weight: 700;49 margin: 18px 0 16px 0;50 letter-spacing: -0.5px;51 }52 .section-link {53 color: #C0392B;54 font-weight: 600;55 font-size: 40px;56 margin: 6px 0 10px 0;57 }58 59 /* Chips */60 .chips { display: flex; gap: 24px; flex-wrap: wrap; padding: 8px 0 18px 0; }61 .chip {62 display: inline-flex; align-items: center; gap: 14px;63 padding: 16px 26px;64 border-radius: 40px;65 border: 2px solid #E8CEC8;66 background: #FAECE9;67 color: #6B4B45;68 font-size: 34px;69 box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4);70 }71 .chip svg { width: 32px; height: 32px; }72 73 /* Files section header */74 .section-bar {75 margin-top: 10px;76 padding: 14px 0;77 display: flex; align-items: center; justify-content: space-between;78 }79 .section-bar .label { font-size: 40px; font-weight: 600; color: #5A3A35; }80 .icon-btn { width: 56px; height: 56px; display:flex; align-items:center; justify-content:center; }81 82 /* Grid of cards */83 .grid {84 padding: 10px 36px 120px 36px;85 display: grid;86 grid-template-columns: repeat(2, 1fr);87 gap: 28px;88 box-sizing: border-box;89 }90 .card {91 background: #FFFFFF;92 border: 2px solid #E9D6D1;93 border-radius: 26px;94 overflow: hidden;95 }96 .preview {97 position: relative;98 height: 420px;99 background: #FFFFFF;100 display: flex; align-items: center; justify-content: center;101 }102 /* Image placeholder inside preview (required by instructions) */103 .img-ph {104 width: 86%;105 height: 78%;106 background: #E0E0E0;107 border: 1px solid #BDBDBD;108 color: #757575;109 font-size: 32px;110 display: flex; align-items: center; justify-content: center;111 border-radius: 12px;112 }113 .expand {114 position: absolute; right: 18px; top: 18px; opacity: 0.65;115 }116 .meta {117 background: #FBE9E6;118 padding: 18px 22px 26px 22px;119 display: flex; gap: 18px; align-items: flex-start;120 }121 .meta .name { font-size: 34px; color: #5A3A35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }122 .meta .sub { font-size: 28px; color: #8D6F69; margin-top: 6px; }123 .avatar {124 width: 44px; height: 44px; display:flex; align-items:center; justify-content:center;125 }126 .pdf-tag {127 background:#E74C3C; color:#fff; font-weight:700; border-radius:9px; padding:6px 10px; font-size:24px;128 }129 130 /* Gesture bar */131 .gesture {132 position: absolute; left: 50%; transform: translateX(-50%);133 bottom: 30px; width: 360px; height: 12px; border-radius: 8px;134 background: #A6A0A0;135 opacity: 0.8;136 }137 138 /* Simple icon styling */139 .i24 { width: 56px; height: 56px; }140 .i32 { width: 44px; height: 44px; }141 .muted { color:#6F6A69; }142</style>143</head>144<body>145<div id="render-target">146 147 <!-- Status Bar -->148 <div class="status-bar">149 <div>12:10</div>150 <div class="sys-icons">151 <span class="sys-dot"></span>152 <svg width="40" height="30" viewBox="0 0 24 24" fill="none" stroke="#6B6B6B" stroke-width="2">153 <path d="M2 8l10-6 10 6v8l-10 6-10-6z"/>154 </svg>155 <svg width="50" height="28" viewBox="0 0 24 24" fill="none" stroke="#6B6B6B" stroke-width="2">156 <rect x="1" y="7" width="22" height="10" rx="2"></rect>157 <rect x="20" y="9" width="3" height="6" rx="1" fill="#6B6B6B"></rect>158 </svg>159 <div>100%</div>160 </div>161 </div>162 163 <!-- App Bar -->164 <div class="appbar">165 <div class="appbar-row">166 <div class="appbar-left">167 <!-- Hamburger -->168 <svg class="i24" viewBox="0 0 24 24" fill="none" stroke="#4B2E2A" stroke-width="2.4" stroke-linecap="round">169 <path d="M3 6h18M3 12h18M3 18h12"/>170 </svg>171 <div class="title">Downloads</div>172 </div>173 <div class="appbar-right">174 <!-- Search -->175 <svg class="i24" viewBox="0 0 24 24" fill="none" stroke="#4B2E2A" stroke-width="2.4">176 <circle cx="11" cy="11" r="7"></circle>177 <path d="M21 21l-4.5-4.5"></path>178 </svg>179 <!-- Overflow -->180 <svg class="i24" viewBox="0 0 24 24" fill="#4B2E2A">181 <circle cx="12" cy="5" r="2"></circle>182 <circle cx="12" cy="12" r="2"></circle>183 <circle cx="12" cy="19" r="2"></circle>184 </svg>185 </div>186 </div>187 188 <div class="section-link">Downloads</div>189 190 <!-- Chips -->191 <div class="chips">192 <div class="chip">193 <svg viewBox="0 0 24 24" fill="none" stroke="#6B4B45" stroke-width="2">194 <path d="M3 7l7-4 11 6-7 4-11-6z"></path>195 <circle cx="9" cy="7" r="1.5" fill="#6B4B45"></circle>196 </svg>197 Large files198 </div>199 <div class="chip">200 <svg viewBox="0 0 24 24" fill="none" stroke="#6B4B45" stroke-width="2">201 <circle cx="12" cy="12" r="9"></circle>202 <path d="M12 7v6l4 2"></path>203 </svg>204 This week205 </div>206 </div>207 208 <!-- Files header -->209 <div class="section-bar">210 <div class="label">Files in Downloads</div>211 <div class="icon-btn">212 <svg class="i32" viewBox="0 0 24 24" fill="#6B4B45">213 <rect x="3" y="4" width="7" height="7" rx="1"></rect>214 <rect x="14" y="4" width="7" height="7" rx="1"></rect>215 <rect x="3" y="15" width="7" height="7" rx="1"></rect>216 <rect x="14" y="15" width="7" height="7" rx="1"></rect>217 </svg>218 </div>219 </div>220 </div>221 222 <!-- Grid of cards -->223 <div class="grid">224 225 <!-- Card 1: contacts -->226 <div class="card">227 <div class="preview">228 <div class="img-ph">[IMG: Contact preview]</div>229 <div class="expand">230 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">231 <path d="M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6"/>232 </svg>233 </div>234 </div>235 <div class="meta">236 <div class="avatar">237 <svg viewBox="0 0 24 24" width="42" height="42" fill="none" stroke="#6F6F6F" stroke-width="2">238 <circle cx="12" cy="8" r="3"></circle>239 <path d="M5 20c1.5-4 12.5-4 14 0"></path>240 </svg>241 </div>242 <div>243 <div class="name">contacts_2023-…</div>244 <div class="sub">0 B 10:57 AM</div>245 </div>246 </div>247 </div>248 249 <!-- Card 2: contacts.vcf -->250 <div class="card">251 <div class="preview">252 <div class="img-ph">[IMG: Contact preview]</div>253 <div class="expand">254 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">255 <path d="M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6"/>256 </svg>257 </div>258 </div>259 <div class="meta">260 <div class="avatar">261 <svg viewBox="0 0 24 24" width="42" height="42" fill="none" stroke="#6F6F6F" stroke-width="2">262 <circle cx="12" cy="8" r="3"></circle>263 <path d="M5 20c1.5-4 12.5-4 14 0"></path>264 </svg>265 </div>266 <div>267 <div class="name">contacts.vcf</div>268 <div class="sub">60 B Dec 6</div>269 </div>270 </div>271 </div>272 273 <!-- Card 3: PDF Events -->274 <div class="card">275 <div class="preview">276 <div class="img-ph">[IMG: PDF preview]</div>277 <div class="expand">278 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">279 <path d="M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6"/>280 </svg>281 </div>282 </div>283 <div class="meta">284 <div class="pdf-tag">PDF</div>285 <div>286 <div class="name">Events.pdf</div>287 <div class="sub">203 kB Oct 23</div>288 </div>289 </div>290 </div>291 292 <!-- Card 4: PDF Original+Glazed -->293 <div class="card">294 <div class="preview">295 <div class="img-ph">[IMG: PDF preview]</div>296 <div class="expand">297 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">298 <path d="M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6"/>299 </svg>300 </div>301 </div>302 <div class="meta">303 <div class="pdf-tag">PDF</div>304 <div>305 <div class="name">Original+Glazed…</div>306 <div class="sub">27.14 kB Sep 14</div>307 </div>308 </div>309 </div>310 311 <!-- Card 5 -->312 <div class="card">313 <div class="preview">314 <div class="img-ph">[IMG: File preview]</div>315 <div class="expand">316 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">317 <path d="M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6"/>318 </svg>319 </div>320 </div>321 <div class="meta">322 <div class="pdf-tag">PDF</div>323 <div>324 <div class="name">Receipt.pdf</div>325 <div class="sub">115 kB Aug 02</div>326 </div>327 </div>328 </div>329 330 <!-- Card 6 -->331 <div class="card">332 <div class="preview">333 <div class="img-ph">[IMG: File preview]</div>334 <div class="expand">335 <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="#8A8A8A" stroke-width="2">336 <path d="M9 3H3v6M15 3h6v6M3 15v6h6M21 15v6h-6"/>337 </svg>338 </div>339 </div>340 <div class="meta">341 <div class="pdf-tag">PDF</div>342 <div>343 <div class="name">Notes.pdf</div>344 <div class="sub">80 kB Jul 15</div>345 </div>346 </div>347 </div>348 </div>349 350 <!-- Bottom gesture bar -->351 <div class="gesture"></div>352</div>353</body>354</html>