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 UI Mock</title>7<style>8 body { margin: 0; padding: 0; background: transparent; }9 #render-target {10 width: 1080px; height: 2400px;11 position: relative; overflow: hidden;12 background: #F3F3F5;13 font-family: "Inter", Arial, sans-serif;14 color: #222;15 }16 * { box-sizing: border-box; }17 18 /* Status bar */19 .status-bar {20 height: 120px;21 background: #F1F1F1;22 display: flex;23 align-items: center;24 justify-content: space-between;25 padding: 0 40px;26 font-size: 36px;27 color: #3A3A3A;28 }29 .status-left { display: flex; align-items: center; gap: 24px; }30 .status-right { display: flex; align-items: center; gap: 20px; font-size: 32px; }31 .dot { width: 10px; height: 10px; background: #777; border-radius: 50%; display: inline-block; }32 33 /* Header / Search */34 .header {35 padding: 24px 36px 16px;36 background: #F4F4F4;37 }38 .header-row {39 display: flex; align-items: center; gap: 24px;40 }41 .avatar {42 width: 92px; height: 92px; border-radius: 50%;43 background: #5A463A; color: #fff;44 display: flex; align-items: center; justify-content: center;45 font-weight: 700; font-size: 44px; position: relative;46 }47 .badge-red {48 position: absolute; right: -2px; top: -2px;49 width: 22px; height: 22px; background: #E74A3B; border: 3px solid #F4F4F4; border-radius: 50%;50 }51 .badge-small {52 position: absolute; left: -6px; bottom: -6px;53 width: 32px; height: 32px; background: #DADADA; border-radius: 50%;54 font-size: 20px; color: #7A7A7A; display: flex; align-items: center; justify-content: center;55 }56 .search {57 flex: 1; height: 112px; border: 4px solid #000; border-radius: 56px; background: #fff;58 display: flex; align-items: center; padding: 0 36px; justify-content: space-between;59 }60 .search .ph { color: #757575; font-size: 36px; }61 .search svg { width: 48px; height: 48px; fill: none; stroke: #575757; stroke-width: 6; }62 .header-icons { display: flex; align-items: center; gap: 22px; }63 .gift {64 width: 72px; height: 72px; border-radius: 18px; background: #FFE9D5;65 border: 1px solid #E2B28C; display: flex; align-items: center; justify-content: center;66 font-size: 22px; color: #B24D1A; font-weight: 700; position: relative;67 }68 .gift .tag {69 position: absolute; right: -12px; top: -10px; background: #F04A4A; color: #fff;70 font-size: 18px; padding: 2px 6px; border-radius: 10px;71 }72 .jicon { width: 52px; height: 52px; border-radius: 12px; background: #111; color: #fff; font-size: 28px;73 display: flex; align-items: center; justify-content: center;74 }75 76 /* Cards and sections */77 .card {78 background: #fff; border-radius: 36px; box-shadow: 0 6px 16px rgba(0,0,0,0.06);79 }80 .ad-card {81 margin: 22px 36px 8px; height: 320px; padding: 20px; position: relative;82 }83 .ad-label {84 position: absolute; left: 28px; top: 24px; font-size: 26px; color: #2E7D32;85 border: 2px solid #2E7D32; border-radius: 10px; padding: 4px 8px; background: #fff;86 }87 88 .premium-row {89 margin: 6px 36px 24px; color: #8A8A8A; font-size: 30px; display: flex; align-items: center; gap: 10px;90 }91 .premium-row svg { width: 24px; height: 24px; stroke: #8A8A8A; stroke-width: 6; fill: none; }92 93 .grid {94 display: flex; gap: 24px; padding: 0 36px; margin-bottom: 28px;95 }96 .promo-left { width: 498px; padding: 22px; }97 .promo-img {98 width: 100%; height: 220px; background: #E0E0E0; border: 1px solid #BDBDBD;99 border-radius: 22px; display: flex; align-items: center; justify-content: center; color: #757575; font-size: 30px;100 }101 .promo-title { margin: 18px 6px 12px; font-size: 34px; color: #E74A3B; font-weight: 700; }102 .promo-sub { margin: 0 6px 18px; font-size: 26px; color: #666; }103 .promo-btn {104 width: 220px; height: 76px; border-radius: 38px; background: #5E6BFF; color: #fff;105 display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px;106 }107 108 .tools-right { width: 498px; padding: 22px; }109 .tool-row { display: flex; align-items: center; gap: 22px; padding: 26px 8px; }110 .tool-icon {111 width: 70px; height: 70px; border-radius: 50%;112 background: linear-gradient(135deg,#8F87FF,#628CFF); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;113 }114 .tool-icon.orange { background: linear-gradient(135deg,#FFB36C,#FF8B2D); }115 .tool-text { font-size: 30px; color: #333; }116 .divider { height: 1px; background: #EFEFEF; margin: 0 8px; }117 118 /* Tabs */119 .tabs {120 margin: 28px 0 12px; padding: 24px 36px; display: flex; align-items: center; justify-content: space-between;121 }122 .tab-left { display: flex; align-items: baseline; gap: 40px; font-size: 44px; }123 .tab { color: #5A5A5A; }124 .tab.active { color: #222; position: relative; }125 .tab.active::after {126 content: ""; position: absolute; left: 12px; bottom: -16px; width: 90px; height: 8px; background: #677BFF; border-radius: 10px;127 }128 .menu-icon svg { width: 44px; height: 44px; stroke: #333; stroke-width: 8; fill: none; }129 130 /* Picture section */131 .section-card { margin: 0 36px 20px; padding: 20px; }132 .section-header {133 display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px;134 }135 .section-title { font-size: 38px; font-weight: 700; }136 .section-right { display: flex; align-items: center; gap: 10px; color: #999; }137 .section-right .x { width: 38px; height: 38px; border-radius: 50%; background: #EFEFEF; display: flex; align-items: center; justify-content: center; font-size: 24px; }138 .thumb-row { display: flex; gap: 18px; padding: 8px 2px 10px; }139 .thumb {140 width: 248px; height: 190px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;141 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 26px;142 }143 144 /* Uploads section */145 .upload-card { margin: 0 36px 24px; padding: 20px; position: relative; }146 .upload-item { display: flex; gap: 20px; padding: 18px 6px; }147 .cloud-thumb {148 width: 120px; height: 120px; background: #E0E0E0; border: 1px solid #BDBDBD; border-radius: 18px;149 display: flex; align-items: center; justify-content: center; color: #757575; font-size: 24px;150 }151 .file-info { display: flex; flex-direction: column; justify-content: center; }152 .file-name { font-size: 34px; color: #333; }153 .file-date { font-size: 26px; color: #888; margin-top: 6px; }154 155 /* Toast overlay */156 .toast {157 position: absolute; left: 140px; top: 1530px;158 background: #1C2530; color: #fff; border-radius: 42px;159 padding: 24px 36px; display: flex; align-items: center; gap: 20px;160 box-shadow: 0 8px 24px rgba(0,0,0,0.25);161 }162 .toast::before {163 content: ""; position: absolute; left: -18px; top: 0; bottom: 0; width: 18px; background: #29C3AF; border-radius: 12px 0 0 12px;164 }165 .toast svg { width: 44px; height: 44px; fill: none; stroke: #fff; stroke-width: 6; }166 .toast-text { font-size: 30px; white-space: nowrap; }167 168 /* FAB */169 .fab {170 position: absolute; right: 48px; bottom: 260px;171 width: 116px; height: 116px; border-radius: 50%; background: #111; color: #fff;172 display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,0.25);173 }174 .fab svg { width: 56px; height: 56px; fill: none; stroke: #fff; stroke-width: 10; }175 176 /* Bottom nav */177 .bottom-nav {178 position: absolute; left: 0; right: 0; bottom: 0;179 height: 170px; background: #fff; border-top: 1px solid #E8E8E8;180 display: flex; align-items: center; justify-content: space-around;181 }182 .nav-item { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #000; }183 .nav-item svg { width: 54px; height: 54px; stroke: #111; stroke-width: 8; fill: none; }184 .nav-dot {185 position: absolute; right: 110px; bottom: 140px; width: 16px; height: 16px; background: #E74A3B; border-radius: 50%;186 }187</style>188</head>189<body>190<div id="render-target">191 192 <!-- Status Bar -->193 <div class="status-bar">194 <div class="status-left">195 <div>9:08</div>196 <div class="dot"></div>197 <div class="dot"></div>198 <div class="dot"></div>199 </div>200 <div class="status-right">201 <span>◎</span>202 <span>🔋 100%</span>203 </div>204 </div>205 206 <!-- Header with search -->207 <div class="header">208 <div class="header-row">209 <div class="avatar">210 F211 <div class="badge-red"></div>212 <div class="badge-small">P</div>213 </div>214 <div class="search">215 <div class="ph">Search files in TeraBox</div>216 <svg viewBox="0 0 24 24"><circle cx="10" cy="10" r="7"></circle><line x1="16" y1="16" x2="22" y2="22"></line></svg>217 </div>218 <div class="header-icons">219 <div class="gift">220 🎁221 <div class="tag">AD</div>222 </div>223 <div class="jicon">♩</div>224 </div>225 </div>226 </div>227 228 <!-- Ad Card -->229 <div class="card ad-card">230 <div class="ad-label">Ad</div>231 <div style="width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:#BBBBBB; font-size:32px;">232 Sponsored content placeholder233 </div>234 </div>235 236 <!-- Premium row -->237 <div class="premium-row">238 <span>Premium Ad-free</span>239 <svg viewBox="0 0 24 24"><polyline points="8,4 16,12 8,20"></polyline></svg>240 </div>241 242 <!-- Grid cards -->243 <div class="grid">244 <div class="card promo-left">245 <div class="promo-img">[IMG: TeraBox Sharing Challenge]</div>246 <div class="promo-title">TeraBox Sharing Challenge</div>247 <div class="promo-sub">Share to Win Cash</div>248 <div class="promo-btn">View Now</div>249 </div>250 <div class="card tools-right">251 <div class="tool-row">252 <div class="tool-icon">📄</div>253 <div class="tool-text">Novels</div>254 </div>255 <div class="divider"></div>256 <div class="tool-row">257 <div class="tool-icon">📈</div>258 <div class="tool-text">Space Analyzer</div>259 </div>260 <div class="divider"></div>261 <div class="tool-row">262 <div class="tool-icon orange">📦</div>263 <div class="tool-text">Welfare Center</div>264 </div>265 </div>266 </div>267 268 <!-- Tabs -->269 <div class="tabs">270 <div class="tab-left">271 <div class="tab">Welfare Center</div>272 <div class="tab active">Recent</div>273 <div class="tab">Offline</div>274 </div>275 <div class="menu-icon">276 <svg viewBox="0 0 24 24"><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>277 </div>278 </div>279 280 <!-- Pictures viewed -->281 <div class="card section-card">282 <div class="section-header">283 <div class="section-title">Pictures viewed</div>284 <div class="section-right">285 <span>›</span>286 <div class="x">×</div>287 </div>288 </div>289 <div class="thumb-row">290 <div class="thumb">[IMG: Fitbit Walk Card]</div>291 <div class="thumb">[IMG: Fitbit Walk Card]</div>292 <div class="thumb">[IMG: Fitbit Walk Card]</div>293 <div class="thumb">[IMG: Fitbit Walk Card]</div>294 </div>295 </div>296 297 <!-- Uploads -->298 <div class="card upload-card">299 <div class="section-header">300 <div class="section-title">9 file(s) uploaded recently</div>301 <div class="section-right">302 <span>›</span>303 <div class="x">×</div>304 </div>305 </div>306 307 <div class="upload-item">308 <div class="cloud-thumb">[IMG: Cloud]</div>309 <div class="file-info">310 <div class="file-name">Diy tool kit.bin</div>311 <div class="file-date">2023-11-22</div>312 </div>313 </div>314 <div class="upload-item">315 <div class="cloud-thumb">[IMG: Cloud]</div>316 <div class="file-info">317 <div class="file-name">Diy tool kit.bin</div>318 <div class="file-date">2023-11-22</div>319 </div>320 </div>321 <div class="upload-item">322 <div class="cloud-thumb">[IMG: Cloud]</div>323 <div class="file-info">324 <div class="file-name">MvfitShare.PNG</div>325 <div class="file-date">—</div>326 </div>327 </div>328 </div>329 330 <!-- Toast overlay -->331 <div class="toast">332 <svg viewBox="0 0 24 24">333 <path d="M12 2l9 5v5c0 6-4.5 8.5-9 10-4.5-1.5-9-4-9-10V7l9-5z"></path>334 <path d="M8 12l3 3 5-6"></path>335 </svg>336 <div class="toast-text">Preparing for encrypted uploading...</div>337 </div>338 339 <!-- Floating Action Button -->340 <div class="fab">341 <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>342 </div>343 344 <!-- Bottom Nav -->345 <div class="bottom-nav">346 <div class="nav-item">347 <svg viewBox="0 0 24 24"><path d="M3 11l9-8 9 8"></path><path d="M5 10v10h14V10"></path></svg>348 </div>349 <div class="nav-item">350 <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="16" rx="2"></rect><path d="M8 4v16"></path></svg>351 </div>352 <div class="nav-item">353 <svg viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="3"></rect><circle cx="12" cy="12" r="4"></circle></svg>354 </div>355 <div class="nav-item">356 <svg viewBox="0 0 24 24"><polygon points="5,4 19,12 5,20"></polygon></svg>357 </div>358 <div class="nav-item">359 <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="8"></circle><circle cx="12" cy="12" r="3"></circle></svg>360 </div>361 </div>362 <div class="nav-dot"></div>363 364</div>365</body>366</html>