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>My Files - Mock UI</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: 'Roboto', Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F7F7F7;15 }16 17 /* Status bar */18 .status-bar {19 position: absolute;20 top: 0; left: 0; width: 100%; height: 96px;21 background: #E9E9EA;22 color: #333;23 display: flex;24 align-items: center;25 padding: 0 32px;26 box-sizing: border-box;27 font-size: 30px;28 letter-spacing: 0.2px;29 }30 .status-left { display: flex; align-items: center; gap: 24px; }31 .status-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }32 .icon-battery, .icon-wifi {33 width: 36px; height: 36px;34 }35 36 /* App bar */37 .appbar {38 position: absolute;39 top: 96px; left: 0; width: 100%; height: 200px;40 background: #FAFAFA;41 border-bottom: 1px solid #DDD;42 box-sizing: border-box;43 padding: 24px 24px;44 display: flex;45 align-items: center;46 }47 .appbar-left { display: flex; align-items: center; gap: 28px; }48 .app-title { font-size: 48px; color: #333; font-weight: 500; }49 .app-sub { font-size: 26px; color: #7A7A7A; margin-top: 6px; }50 .title-wrap { display: flex; flex-direction: column; }51 .appbar-right { margin-left: auto; display: flex; align-items: center; gap: 24px; padding-right: 24px; }52 53 .crumbs {54 position: absolute;55 top: 296px; left: 0; width: 100%; height: 90px;56 background: #FFFFFF;57 display: flex; align-items: center;58 box-sizing: border-box;59 padding: 0 36px;60 border-bottom: 1px solid #E2E2E2;61 font-size: 30px;62 color: #4B4B4B;63 }64 .crumbs .active { color: #1E88E5; font-weight: 500; }65 .crumbs .sep { color: #9E9E9E; margin: 0 16px; }66 67 /* List area */68 .list-area {69 position: absolute;70 top: 386px; left: 0; right: 0; bottom: 740px; /* leave space for keyboard */71 overflow: hidden;72 }73 .file-item {74 display: flex;75 align-items: center;76 padding: 24px 36px;77 border-bottom: 1px solid #E9E9E9;78 background: #FFFFFF;79 }80 .circle {81 width: 96px; height: 96px; border-radius: 48px;82 background: #1E88E5; display: flex; align-items: center; justify-content: center;83 margin-right: 26px;84 }85 .file-text { display: flex; flex-direction: column; }86 .file-name { font-size: 36px; color: #333; }87 .file-sub { font-size: 24px; color: #8A8A8A; margin-top: 6px; }88 .file-meta { margin-left: auto; font-size: 22px; color: #8A8A8A; }89 90 /* Floating action button */91 .fab {92 position: absolute;93 right: 48px;94 bottom: 840px; /* sits above keyboard */95 width: 120px; height: 120px; border-radius: 60px;96 background: #D39B17;97 box-shadow: 0 8px 18px rgba(0,0,0,0.25);98 display: flex; align-items: center; justify-content: center;99 }100 .fab svg { width: 56px; height: 56px; }101 102 /* Modal overlay and card */103 .modal-overlay {104 position: absolute;105 top: 0; left: 0; width: 100%; height: 100%;106 background: rgba(0,0,0,0.22);107 }108 .modal {109 position: absolute;110 left: 100px; top: 620px;111 width: 880px; height: 520px;112 background: #FFFFFF;113 border-radius: 24px;114 box-shadow: 0 18px 40px rgba(0,0,0,0.35);115 padding: 36px;116 box-sizing: border-box;117 }118 .modal-title { font-size: 44px; color: #333; font-weight: 500; margin-bottom: 24px; }119 .modal-msg { font-size: 28px; color: #666; margin-bottom: 42px; }120 .input-line {121 height: 56px;122 border-bottom: 5px solid #E8A500;123 margin: 0 6px 32px 6px;124 }125 .modal-actions {126 position: absolute; right: 36px; bottom: 24px;127 display: flex; gap: 36px; align-items: center;128 font-size: 30px;129 }130 .btn-cancel { color: #777; letter-spacing: 0.5px; }131 .btn-ok { color: #E09B00; font-weight: 600; letter-spacing: 0.5px; }132 133 /* Keyboard mock */134 .keyboard {135 position: absolute;136 left: 0; right: 0; bottom: 0;137 height: 740px;138 background: #F2F4ED;139 border-top: 1px solid #DDD;140 box-sizing: border-box;141 padding: 24px 24px 32px 24px;142 }143 .kb-topbar {144 height: 80px;145 display: flex; align-items: center; gap: 28px;146 margin-bottom: 12px;147 }148 .kb-chip {149 background: #DDE8D6; color: #1A1A1A; font-size: 28px;150 border-radius: 16px; padding: 10px 16px;151 }152 .keys-row {153 display: flex; gap: 16px; justify-content: center; margin: 14px 0;154 }155 .key {156 width: 84px; height: 92px; background: #FFFFFF; border: 1px solid #E0E0E0;157 border-radius: 18px; display: flex; align-items: center; justify-content: center;158 color: #111; font-size: 34px; box-shadow: inset 0 -2px 0 #F0F0F0;159 }160 .key-wide { width: 180px; }161 .key-space { flex: 1; min-width: 420px; }162 .key-special { background: #DDE8D6; }163 .gesture-bar {164 position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);165 width: 280px; height: 8px; background: #999; border-radius: 8px;166 opacity: 0.7;167 }168 169 /* SVG folder icon */170 .folder-svg { width: 58px; height: 58px; }171 .folder-svg path { fill: #FFFFFF; }172</style>173</head>174<body>175<div id="render-target">176 177 <!-- Status Bar -->178 <div class="status-bar">179 <div class="status-left">180 <div>11:21</div>181 <div>33°</div>182 <div>⛭⟲</div>183 </div>184 <div class="status-right">185 <svg class="icon-wifi" viewBox="0 0 24 24">186 <path d="M2 8c5-4 15-4 20 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>187 <path d="M5 11c4-3 10-3 14 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>188 <path d="M8 14c3-2 5-2 8 0" stroke="#444" stroke-width="2" fill="none" stroke-linecap="round"/>189 <circle cx="12" cy="18" r="1.8" fill="#444"/>190 </svg>191 <svg class="icon-battery" viewBox="0 0 24 24">192 <rect x="2" y="6" width="18" height="12" rx="2" stroke="#444" stroke-width="2" fill="none"/>193 <rect x="4" y="8" width="12" height="8" fill="#444"/>194 <rect x="20" y="10" width="2" height="6" rx="1" fill="#444"/>195 </svg>196 </div>197 </div>198 199 <!-- App bar -->200 <div class="appbar">201 <div class="appbar-left">202 <svg width="56" height="56" viewBox="0 0 24 24">203 <path d="M3 6h18M3 12h18M3 18h18" stroke="#1E88E5" stroke-width="2" fill="none" stroke-linecap="round"/>204 </svg>205 <div class="title-wrap">206 <div class="app-title">My Files</div>207 <div class="app-sub">15 folders</div>208 </div>209 </div>210 <div class="appbar-right">211 <svg width="56" height="56" viewBox="0 0 24 24">212 <circle cx="11" cy="11" r="6" stroke="#1E88E5" stroke-width="2" fill="none"/>213 <path d="M16 16l5 5" stroke="#1E88E5" stroke-width="2" stroke-linecap="round"/>214 </svg>215 <svg width="44" height="44" viewBox="0 0 24 24">216 <circle cx="12" cy="5" r="2" fill="#1E88E5"/>217 <circle cx="12" cy="12" r="2" fill="#1E88E5"/>218 <circle cx="12" cy="19" r="2" fill="#1E88E5"/>219 </svg>220 </div>221 </div>222 223 <!-- Breadcrumbs -->224 <div class="crumbs">225 <div class="active">INTERNAL MEMORY</div>226 <div class="sep">›</div>227 <div>MUSIC</div>228 </div>229 230 <!-- Files list -->231 <div class="list-area">232 <div class="file-item">233 <div class="circle">234 <svg class="folder-svg" viewBox="0 0 24 24">235 <path d="M3 7h7l2 2h9v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>236 </svg>237 </div>238 <div class="file-text">239 <div class="file-name">Alarms</div>240 <div class="file-sub">—</div>241 </div>242 </div>243 244 <div class="file-item">245 <div class="circle">246 <svg class="folder-svg" viewBox="0 0 24 24">247 <path d="M3 7h7l2 2h9v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>248 </svg>249 </div>250 <div class="file-text">251 <div class="file-name">DCIM</div>252 <div class="file-sub">1 item</div>253 </div>254 <div class="file-meta">Jun 08, 2023, 12:19:47 PM</div>255 </div>256 257 <div class="file-item">258 <div class="circle">259 <svg class="folder-svg" viewBox="0 0 24 24">260 <path d="M3 7h7l2 2h9v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>261 </svg>262 </div>263 <div class="file-text">264 <div class="file-name">Documents</div>265 <div class="file-sub">Empty</div>266 </div>267 <div class="file-meta">Feb 27, 2023</div>268 </div>269 270 <div class="file-item">271 <div class="circle">272 <svg class="folder-svg" viewBox="0 0 24 24">273 <path d="M3 7h7l2 2h9v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z"/>274 </svg>275 </div>276 <div class="file-text">277 <div class="file-name">Download</div>278 <div class="file-sub">—</div>279 </div>280 </div>281 </div>282 283 <!-- Floating action button -->284 <div class="fab">285 <svg viewBox="0 0 24 24">286 <path d="M12 5v14M5 12h14" stroke="#FFFFFF" stroke-width="2.5" stroke-linecap="round"/>287 </svg>288 </div>289 290 <!-- Modal overlay and dialog -->291 <div class="modal-overlay"></div>292 <div class="modal">293 <div class="modal-title">Create a directory</div>294 <div class="modal-msg">Please enter the new folder name</div>295 <div class="input-line"></div>296 <div class="modal-actions">297 <div class="btn-cancel">CANCEL</div>298 <div class="btn-ok">OK</div>299 </div>300 </div>301 302 <!-- Keyboard -->303 <div class="keyboard">304 <div class="kb-topbar">305 <div class="kb-chip">☰</div>306 <div class="kb-chip">GIF</div>307 <div class="kb-chip">⚙</div>308 <div class="kb-chip">Gx</div>309 <div class="kb-chip">🎨</div>310 </div>311 312 <div class="keys-row">313 <div class="key">q</div><div class="key">w</div><div class="key">e</div><div class="key">r</div><div class="key">t</div>314 <div class="key">y</div><div class="key">u</div><div class="key">i</div><div class="key">o</div><div class="key">p</div>315 </div>316 <div class="keys-row">317 <div class="key">a</div><div class="key">s</div><div class="key">d</div><div class="key">f</div><div class="key">g</div>318 <div class="key">h</div><div class="key">j</div><div class="key">k</div><div class="key">l</div>319 </div>320 <div class="keys-row">321 <div class="key key-special">⇧</div>322 <div class="key">z</div><div class="key">x</div><div class="key">c</div><div class="key">v</div><div class="key">b</div><div class="key">n</div><div class="key">m</div>323 <div class="key key-special">⌫</div>324 </div>325 <div class="keys-row">326 <div class="key key-wide key-special">?123</div>327 <div class="key">,</div>328 <div class="key key-wide">😊</div>329 <div class="key key-space"></div>330 <div class="key">.</div>331 <div class="key key-wide key-special">✓</div>332 </div>333 <div class="gesture-bar"></div>334 </div>335 336</div>337</body>338</html>