cesnimda/Inboxintel
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: landing page + logo, dev-mode banner + sync cap, non-blocking sync with progress splash

Browse Source
This commit is contained in:
cesnimda
2026-06-30 16:58:35 +02:00
parent dcb939e4f2
commit fe5920919f
29 changed files with 552 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles.css
+49
View File
@@ -61,3 +61,52 @@ input, select { background: var(--panel-2); border: 1px solid #2c3550; color: va
.card { background: var(--panel); border: 1px solid #2c3550; border-radius: 10px; padding: 14px; margin-top: 12px; }
.card.success { border-color: var(--ok); }
.card ul { font-size: 13px; color: var(--muted); }
/* ── Dev banner ── */
.dev-banner {
background: repeating-linear-gradient(45deg, #3a2e12, #3a2e12 12px, #332810 12px, #332810 24px);
color: #ffce6b; font-size: 13px; font-weight: 600; text-align: center;
padding: 6px 12px; border-bottom: 1px solid #5a4718;
}
/* ── Shared buttons ── */
.brand-link { text-decoration: none; color: var(--text); display: inline-flex; }
.ghost { background: transparent; border: 1px solid #36405c; color: var(--text); }
.ghost:hover { border-color: var(--accent); }
.cta {
background: var(--accent); color: #fff; border: none; border-radius: 8px;
padding: 12px 22px; font-size: 16px; font-weight: 700; cursor: pointer;
text-decoration: none; display: inline-block;
}
.cta:hover { background: #5d97ff; }
/* ── Landing page ── */
.landing { max-width: 1080px; margin: 0 auto; padding: 0 20px 60px; }
.landing-bar { display: flex; align-items: center; padding: 18px 0; }
.hero { text-align: center; padding: 48px 0 36px; }
.hero h1 { font-size: 42px; margin: 18px 0 10px; letter-spacing: -0.02em; }
.hero .sub { color: var(--muted); font-size: 18px; max-width: 640px; margin: 0 auto 24px; line-height: 1.5; }
.hero-cta { margin: 8px 0; }
.fineprint { color: var(--muted); font-size: 12px; margin-top: 14px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 24px; }
.feature { background: var(--panel); border: 1px solid #2c3550; border-radius: 12px; padding: 20px; }
.feature-icon { font-size: 26px; }
.feature h3 { margin: 10px 0 6px; font-size: 17px; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0; }
.closing { text-align: center; margin: 56px 0 20px; }
.closing h2 { font-size: 28px; margin-bottom: 18px; }
.landing-footer { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #2c3550; }
/* ── Sync splash ── */
.splash {
position: fixed; inset: 0; z-index: 1000;
background: rgba(10, 14, 22, 0.92); backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
}
.splash-card { text-align: center; max-width: 440px; padding: 32px; }
.splash-card h2 { margin: 16px 0 6px; }
.progress-track { height: 10px; background: var(--panel-2); border-radius: 6px; overflow: hidden; margin: 20px 0 10px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #4f8cff, #6fcf97); border-radius: 6px; transition: width 0.4s ease; }
.progress-fill[data-indeterminate="true"] { animation: indet 1.2s ease-in-out infinite; }
@keyframes indet { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.progress-label { color: var(--muted); font-size: 13px; }