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>TeraBox Recent UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }9 #render-target {10 width: 1080px;11 height: 2400px;12 position: relative;13 overflow: hidden;14 background: #F3F3F6;15 color: #222;16 }17 18 .status-bar {19 height: 120px;20 padding: 0 36px;21 display: flex;22 align-items: center;23 justify-content: space-between;24 color: #111;25 font-weight: 600;26 font-size: 40px;27 }28 .status-icons {29 display: flex;30 align-items: center;31 gap: 22px;32 color: #444;33 font-size: 36px;34 }35 .icon-circle { width: 18px; height: 18px; background:#7B7B7B; border-radius:50%; display:inline-block; }36 37 .content { padding: 0 36px 180px; }38 39 /* Top search row */40 .top-row {41 display: flex;42 align-items: center;43 gap: 26px;44 margin-top: 8px;45 }46 .avatar {47 width: 96px;48 height: 96px;49 border-radius: 50%;50 background: #5D4027;51 color: #fff;52 display: inline-flex;53 align-items: center;54 justify-content: center;55 font-weight: 700;56 font-size: 44px;57 position: relative;58 }59 .avatar .badge {60 position: absolute;61 top: -6px;62 right: -6px;63 width: 30px; height: 30px; background: #FF4D4F; border: 4px solid #F3F3F6; border-radius: 50%;64 }65 .avatar .tiny {66 position: absolute;67 bottom: -8px;68 left: -8px;69 width: 42px; height: 42px; border-radius: 50%; background: #DADADA; color:#606060;70 display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700;71 }72 73 .search-pill {74 flex: 1;75 height: 96px;76 border: 4px solid #101010;77 border-radius: 56px;78 background: #fff;79 display: flex;80 align-items: center;81 padding: 0 32px;82 box-shadow: 0 4px 0 rgba(0,0,0,0.10);83 }84 .search-pill span { color: #8E8E95; font-size: 38px; }85 .search-pill .spacer { flex: 1; }86 .search-icon { width: 52px; height: 52px; }87 .gift-ad {88 width: 86px; height: 86px; border-radius: 24px; background: #FFE3B0; display:flex; align-items:center; justify-content:center;89 position: relative; font-size: 28px; color:#C0392B; font-weight:700;90 }91 .gift-ad:after {92 content: "AD";93 position: absolute;94 bottom: -8px; right: -8px;95 background: #fff; color:#E74C3C; border: 2px solid #E74C3C;96 border-radius: 10px; font-size: 22px; padding: 2px 8px;97 }98 99 /* Card base */100 .card {101 background: #fff;102 border-radius: 34px;103 box-shadow: 0 10px 24px rgba(0,0,0,0.08);104 }105 106 .wide-ad {107 margin: 28px 0;108 height: 280px;109 border-radius: 38px;110 background: #fff;111 box-shadow: 0 10px 24px rgba(0,0,0,0.08);112 padding: 16px;113 display: flex;114 align-items: stretch;115 }116 .wide-ad .img {117 width: 100%;118 border-radius: 28px;119 background: #FFFFFF;120 display:flex; align-items:center; justify-content:center;121 box-shadow: inset 0 0 0 1px #E0E0E0;122 }123 .tagline {124 display:flex; align-items:center; gap:12px;125 color:#8C8C91; font-size: 34px;126 margin: 8px 6px 30px;127 }128 .shield {129 width: 40px; height: 40px; border-radius: 10px; background:#DDD; display:inline-flex; align-items:center; justify-content:center; color:#757575; font-weight:700;130 }131 132 .two-cards {133 display: grid;134 grid-template-columns: 1fr 1fr;135 gap: 28px;136 margin-bottom: 32px;137 }138 .promo-left {139 padding: 26px;140 }141 .promo-left .promo-img {142 height: 240px;143 border: 1px solid #BDBDBD;144 border-radius: 24px;145 background:#E0E0E0;146 display:flex; align-items:center; justify-content:center; color:#757575; font-size:34px;147 margin-bottom: 24px;148 }149 .promo-title { color:#8C8C91; font-size: 36px; margin-bottom: 18px; }150 .btn-primary {151 height: 88px; width: 320px;152 border-radius: 44px; background: #6D6AFF; color:#fff; font-size: 36px; font-weight:700;153 display:flex; align-items:center; justify-content:center;154 box-shadow: 0 8px 16px rgba(109,106,255,0.32);155 }156 .features-card { padding: 30px; }157 .feature-item { display:flex; align-items:center; gap: 22px; padding: 18px 0; }158 .feature-icon {159 width: 74px; height: 74px; border-radius: 50%;160 background: linear-gradient(180deg, #7B79FF, #6D6AFF);161 display:flex; align-items:center; justify-content:center;162 }163 .feature-icon.orange { background: linear-gradient(180deg, #FFBA73, #FF9F4D); }164 .feature-dot {165 width: 16px; height: 16px; background:#fff; border-radius:50%;166 }167 .feature-label { font-size: 36px; color:#4A4A4F; }168 169 /* Tabs */170 .tabs {171 margin-top: 24px;172 background: #fff;173 border-radius: 36px;174 padding: 30px 26px;175 box-shadow: 0 10px 24px rgba(0,0,0,0.08);176 display:flex; align-items:center; justify-content: space-between;177 }178 .tab-links {179 display:flex; gap: 46px; align-items:center;180 font-size: 44px; font-weight: 700; color:#3A3A40;181 }182 .tab-active { color:#1E1E1E; position: relative; }183 .tab-active:after {184 content:""; position:absolute; left:50%; transform: translateX(-50%);185 bottom: -18px; width: 120px; height: 10px; border-radius: 10px; background:#6D6AFF;186 }187 .hamburger {188 width: 60px; height: 60px;189 }190 191 /* Pictures viewed section */192 .section-card { margin-top: 24px; padding: 26px; }193 .section-header {194 display:flex; align-items:center; justify-content: space-between;195 margin-bottom: 18px;196 }197 .section-title {198 font-size: 42px; font-weight: 800; color:#29292E;199 display:flex; align-items:center; gap: 12px;200 }201 .chev { font-size: 42px; color:#9D9DA3; }202 .close-x {203 width: 52px; height: 52px; border-radius: 50%; background:#F1F1F4;204 display:flex; align-items:center; justify-content:center; color:#777; font-weight:700; font-size: 32px;205 }206 .thumbs {207 display:flex; gap: 24px;208 }209 .thumb {210 width: 220px; height: 180px; border-radius: 24px;211 background:#E0E0E0; border: 1px solid #BDBDBD;212 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;213 }214 215 /* Recent files section */216 .files-card { margin-top: 24px; padding: 26px; position: relative; }217 .file-row {218 display:flex; align-items:center; gap: 26px;219 padding: 22px 0;220 border-bottom: 1px solid #F0F0F2;221 }222 .file-row:last-child { border-bottom: 0; }223 .file-thumb {224 width: 108px; height: 108px; border-radius: 22px; background:#E0E0E0; border:1px solid #BDBDBD;225 display:flex; align-items:center; justify-content:center; color:#757575; font-size:30px;226 }227 .file-meta {228 flex:1;229 }230 .file-name { font-size: 40px; color:#2A2A31; }231 .file-date { font-size: 32px; color:#9D9DA3; margin-top: 6px; }232 233 /* Floating action button */234 .fab {235 position: absolute;236 right: 42px;237 bottom: 220px;238 width: 120px; height: 120px; border-radius: 60px;239 background:#000; box-shadow: 0 20px 40px rgba(0,0,0,0.25);240 display:flex; align-items:center; justify-content:center;241 }242 .fab svg { width: 56px; height: 56px; }243 244 /* Bottom nav bar */245 .bottom-nav {246 position: absolute;247 left: 0; right: 0; bottom: 0;248 height: 176px;249 background: #fff;250 border-top-left-radius: 34px;251 border-top-right-radius: 34px;252 box-shadow: 0 -8px 24px rgba(0,0,0,0.08);253 display:flex; align-items:center; justify-content: space-around;254 padding: 0 36px;255 }256 .nav-icon { width: 84px; height: 84px; display:flex; align-items:center; justify-content:center; }257 .dot-red {258 position: absolute; right: 120px; bottom: 156px;259 width: 18px; height: 18px; border-radius:50%; background:#FF4D4F;260 }261 .drag-handle {262 position: absolute; left: 50%; transform: translateX(-50%);263 bottom: 186px; width: 280px; height: 12px; border-radius: 8px; background:#D9D9DE;264 }265</style>266</head>267<body>268<div id="render-target">269 270 <!-- Status Bar -->271 <div class="status-bar">272 <div>9:07</div>273 <div class="status-icons">274 <span class="icon-circle"></span>275 <span class="icon-circle"></span>276 <span class="icon-circle"></span>277 <svg width="46" height="46" viewBox="0 0 24 24">278 <rect x="1" y="6" width="18" height="12" rx="3" fill="none" stroke="#444" stroke-width="2"/>279 <rect x="3" y="8" width="14" height="8" rx="2" fill="#444"/>280 <rect x="20" y="10" width="2" height="6" rx="1" fill="#444"/>281 </svg>282 <span style="font-weight:700;">100%</span>283 </div>284 </div>285 286 <div class="content">287 <!-- Search Row -->288 <div class="top-row">289 <div class="avatar">290 F291 <div class="badge"></div>292 <div class="tiny">P</div>293 </div>294 <div class="search-pill">295 <span>Search files in TeraBox</span>296 <div class="spacer"></div>297 <svg class="search-icon" viewBox="0 0 24 24">298 <circle cx="10" cy="10" r="6" fill="none" stroke="#888" stroke-width="2"></circle>299 <line x1="15" y1="15" x2="22" y2="22" stroke="#888" stroke-width="2" stroke-linecap="round"></line>300 </svg>301 </div>302 <div class="gift-ad">🎁</div>303 </div>304 305 <!-- Wide Ad -->306 <div class="wide-ad">307 <div class="img">[IMG: Ad Banner]</div>308 </div>309 310 <div class="tagline">311 <div class="shield">P</div>312 <span>Premium Ad-free</span>313 <span style="color:#B0B0B6;">›</span>314 </div>315 316 <!-- Two cards row -->317 <div class="two-cards">318 <div class="card promo-left">319 <div class="promo-img">[IMG: Double Gold Illustration]</div>320 <div class="promo-title">Double Gold</div>321 <div class="btn-primary">View Now</div>322 </div>323 324 <div class="card features-card">325 <div class="feature-item">326 <div class="feature-icon"><div class="feature-dot"></div></div>327 <div class="feature-label">Novels</div>328 </div>329 <div class="feature-item">330 <div class="feature-icon"><div class="feature-dot"></div></div>331 <div class="feature-label">Space Analyzer</div>332 </div>333 <div class="feature-item">334 <div class="feature-icon orange"><div class="feature-dot"></div></div>335 <div class="feature-label">Welfare Center</div>336 </div>337 </div>338 </div>339 340 <!-- Tabs -->341 <div class="tabs card">342 <div class="tab-links">343 <div>Welfare Center</div>344 <div class="tab-active">Recent</div>345 <div>Offline</div>346 </div>347 <svg class="hamburger" viewBox="0 0 24 24">348 <line x1="3" y1="6" x2="21" y2="6" stroke="#333" stroke-width="2" stroke-linecap="round"></line>349 <line x1="3" y1="12" x2="21" y2="12" stroke="#333" stroke-width="2" stroke-linecap="round"></line>350 <line x1="3" y1="18" x2="21" y2="18" stroke="#333" stroke-width="2" stroke-linecap="round"></line>351 </svg>352 </div>353 354 <!-- Pictures viewed -->355 <div class="card section-card">356 <div class="section-header">357 <div class="section-title">Pictures viewed <span class="chev">›</span></div>358 <div class="close-x">×</div>359 </div>360 <div class="thumbs">361 <div class="thumb">[IMG: Fitbit Card]</div>362 <div class="thumb">[IMG: Fitbit Card]</div>363 <div class="thumb">[IMG: Fitbit Card]</div>364 <div class="thumb">[IMG: Fitbit Card]</div>365 </div>366 </div>367 368 <!-- Recent files -->369 <div class="card files-card">370 <div class="section-header">371 <div class="section-title">9 file(s) uploaded recently <span class="chev">›</span></div>372 <div class="close-x">×</div>373 </div>374 375 <div class="file-row">376 <div class="file-thumb">[IMG]</div>377 <div class="file-meta">378 <div class="file-name">Diy tool kit.bin</div>379 <div class="file-date">2023-11-22</div>380 </div>381 </div>382 <div class="file-row">383 <div class="file-thumb">[IMG]</div>384 <div class="file-meta">385 <div class="file-name">Diy tool kit.bin</div>386 <div class="file-date">2023-11-22</div>387 </div>388 </div>389 <div class="file-row">390 <div class="file-thumb">[IMG]</div>391 <div class="file-meta">392 <div class="file-name">MvfitShare.PNG</div>393 <div class="file-date">2023-11-22</div>394 </div>395 </div>396 </div>397 </div>398 399 <!-- Floating action button -->400 <div class="fab">401 <svg viewBox="0 0 24 24">402 <line x1="12" y1="5" x2="12" y2="19" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>403 <line x1="5" y1="12" x2="19" y2="12" stroke="#fff" stroke-width="2" stroke-linecap="round"></line>404 </svg>405 </div>406 407 <!-- Bottom drag handle -->408 <div class="drag-handle"></div>409 410 <!-- Bottom Navigation -->411 <div class="bottom-nav">412 <div class="nav-icon">413 <svg viewBox="0 0 24 24">414 <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-6v-6H10v6H4a1 1 0 0 1-1-1z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>415 </svg>416 </div>417 <div class="nav-icon">418 <svg viewBox="0 0 24 24">419 <path d="M3 6h14l4 4v8a2 2 0 0 1-2 2H3z" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>420 <path d="M3 6v-1a2 2 0 0 1 2-2h8" stroke="#111" stroke-width="2" fill="none" stroke-linecap="round"/>421 </svg>422 </div>423 <div class="nav-icon">424 <svg viewBox="0 0 24 24">425 <rect x="3" y="4" width="18" height="16" rx="3" fill="none" stroke="#111" stroke-width="2"/>426 <path d="M8 16l3-4 3 2 3-4" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>427 </svg>428 </div>429 <div class="nav-icon">430 <svg viewBox="0 0 24 24">431 <polygon points="8,5 19,12 8,19" fill="none" stroke="#111" stroke-width="2" stroke-linejoin="round"/>432 </svg>433 </div>434 <div class="nav-icon">435 <svg viewBox="0 0 24 24">436 <circle cx="12" cy="12" r="9" fill="none" stroke="#111" stroke-width="2"/>437 <path d="M3 12h18M12 3a12 12 0 0 0 0 18" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round"/>438 </svg>439 </div>440 </div>441 <div class="dot-red"></div>442 443</div>444</body>445</html>