login page update
This commit is contained in:
369
src/App.css
369
src/App.css
@@ -43,24 +43,7 @@
|
||||
/* ============================
|
||||
LOGIN PAGE
|
||||
============================ */
|
||||
.login-page {
|
||||
height: 100dvh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(160deg, #eef6ee 0%, #dcfce7 100%);
|
||||
padding: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-page__loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ── Loading state ──────────────────────────────────────── */
|
||||
.login-page__spinner {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@@ -70,42 +53,141 @@
|
||||
animation: spin 0.7s linear infinite;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: #fff;
|
||||
/* ── Login page — two-panel layout ─────────────────────── */
|
||||
.lp {
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: 55% 45%;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(160deg, #eef6ee 0%, #dcfce7 100%);
|
||||
}
|
||||
|
||||
/* Loading state wrapper */
|
||||
.lp--loading {
|
||||
grid-template-columns: 1fr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
background: var(--color-bg-soft);
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
/* ── Left: animated tree hero ───────────────────────────── */
|
||||
.lp__hero {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1.5rem;
|
||||
gap: 1.25rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.lp__hero-words {
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.lp__quote {
|
||||
font-family: "Sniglet", system-ui;
|
||||
font-size: 1.625rem;
|
||||
font-weight: 700;
|
||||
color: #16a34a;
|
||||
margin: 0 0 0.4rem;
|
||||
opacity: 0;
|
||||
animation: lp-rise 0.9s ease-out 3.0s forwards;
|
||||
}
|
||||
|
||||
.lp__subquote {
|
||||
font-size: 0.9375rem;
|
||||
color: #22c55e;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
animation: lp-rise 0.9s ease-out 3.35s forwards;
|
||||
}
|
||||
|
||||
/* ── Right: login panel ─────────────────────────────────── */
|
||||
.lp__panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
border-radius: 20px;
|
||||
border-top: 4px solid #22c55e;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.lp__form {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
background: #fff;
|
||||
border-radius: 24px;
|
||||
border-top: 4px solid #22c55e;
|
||||
padding: 2rem 1.75rem;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.lp__brand {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.625rem;
|
||||
animation: lp-rise 0.7s ease-out 0.1s both;
|
||||
}
|
||||
|
||||
.lp__icon {
|
||||
font-size: 3.25rem;
|
||||
line-height: 1;
|
||||
animation: lp-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.1s both;
|
||||
}
|
||||
|
||||
.lp__title {
|
||||
margin: 0;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
font-family: "Sniglet", system-ui;
|
||||
letter-spacing: -0.02em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.login-card__brand {
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.login-card__title {
|
||||
margin: 0 0 0.375rem;
|
||||
font-size: 1.625rem;
|
||||
font-weight: 700;
|
||||
color: #22c55e;
|
||||
letter-spacing: -0.02em;
|
||||
font-family: "Sniglet", system-ui;
|
||||
}
|
||||
|
||||
.login-card__tagline {
|
||||
.lp__tagline {
|
||||
margin: 0;
|
||||
color: #6b7280;
|
||||
font-size: 0.9375rem;
|
||||
text-align: center;
|
||||
line-height: 1.65;
|
||||
animation: lp-rise 0.7s ease-out 0.25s both;
|
||||
}
|
||||
|
||||
.login-card__actions {
|
||||
.lp__actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
animation: lp-rise 0.7s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
.lp__privacy {
|
||||
margin: 0;
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lp__error {
|
||||
margin: 0;
|
||||
padding: 0.625rem 0.75rem;
|
||||
color: #b91c1c;
|
||||
font-size: 0.875rem;
|
||||
background: #fef2f2;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* kept for other callers */
|
||||
.login-card__error {
|
||||
margin: 0;
|
||||
padding: 0.625rem 0.75rem;
|
||||
@@ -116,6 +198,189 @@
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* ── Tree animation ─────────────────────────────────────── */
|
||||
.tree-wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tree-svg {
|
||||
width: 100%;
|
||||
max-width: 290px;
|
||||
height: auto;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.t-trunk {
|
||||
stroke-dasharray: 200;
|
||||
stroke-dashoffset: 200;
|
||||
animation: t-draw 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||||
}
|
||||
|
||||
.t-root {
|
||||
stroke-dasharray: 120;
|
||||
stroke-dashoffset: 120;
|
||||
animation: t-draw 0.55s ease-out forwards;
|
||||
}
|
||||
|
||||
.t-branch {
|
||||
stroke-dasharray: 300;
|
||||
stroke-dashoffset: 300;
|
||||
animation: t-draw 0.65s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes t-draw {
|
||||
to { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
.t-leaf {
|
||||
transform-box: fill-box;
|
||||
transform-origin: center;
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
animation: t-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
|
||||
}
|
||||
|
||||
@keyframes t-pop {
|
||||
0% { transform: scale(0); opacity: 0; }
|
||||
60% { transform: scale(1.18); opacity: 1; }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.t-canopy {
|
||||
transform-origin: 140px 412px;
|
||||
animation: t-sway 5.5s ease-in-out 3.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes t-sway {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
28% { transform: rotate(1.8deg); }
|
||||
72% { transform: rotate(-1.5deg); }
|
||||
}
|
||||
|
||||
.t-particle {
|
||||
opacity: 0;
|
||||
animation: t-float linear infinite;
|
||||
}
|
||||
|
||||
@keyframes t-float {
|
||||
0% { transform: translateY(0) translateX(0); opacity: 0; }
|
||||
8% { opacity: 0.7; }
|
||||
88% { opacity: 0.35; }
|
||||
100% { transform: translateY(-380px) translateX(28px); opacity: 0; }
|
||||
}
|
||||
|
||||
/* ── Login animations ───────────────────────────────────── */
|
||||
@keyframes lp-rise {
|
||||
from { opacity: 0; transform: translateY(16px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes lp-pop {
|
||||
from { opacity: 0; transform: scale(0.55); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
|
||||
/* ── Login responsive — phones (≤ 640px) ───────────────── */
|
||||
@media (max-width: 640px) {
|
||||
/* Stack vertically: tree hero on top, login below */
|
||||
.lp {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: 56vh 1fr;
|
||||
}
|
||||
|
||||
.lp__hero {
|
||||
padding: 1.5rem 1rem;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Slightly smaller tree so it fits within the hero panel */
|
||||
.tree-svg {
|
||||
max-width: 220px;
|
||||
}
|
||||
|
||||
.lp__quote {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 0.2rem;
|
||||
}
|
||||
|
||||
.lp__subquote {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
.lp__panel {
|
||||
padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
|
||||
border-left: none;
|
||||
overflow-y: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lp__form {
|
||||
max-width: 420px;
|
||||
gap: 1.25rem;
|
||||
padding: 1.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.lp__title {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
.lp__icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.lp__tagline {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Login responsive — small phones (≤ 390px, e.g. iPhone SE) */
|
||||
@media (max-width: 390px) {
|
||||
.lp {
|
||||
grid-template-rows: 50vh 1fr;
|
||||
}
|
||||
|
||||
.tree-svg {
|
||||
max-width: 190px;
|
||||
}
|
||||
|
||||
.lp__quote {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.lp__subquote {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.lp__panel {
|
||||
padding: 1rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.lp__form {
|
||||
padding: 1.5rem 1.25rem;
|
||||
}
|
||||
|
||||
.lp__title {
|
||||
font-size: 1.625rem;
|
||||
}
|
||||
|
||||
.lp__icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.lp__form {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.lp__tagline {
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.google-sign-in-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -1667,9 +1932,7 @@
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .login-card__title {
|
||||
color: #4ade80;
|
||||
}
|
||||
/* login page is always light — no dark overrides */
|
||||
|
||||
/* -- Calendar -- */
|
||||
[data-theme="dark"] .calendar-day {
|
||||
@@ -2001,27 +2264,7 @@
|
||||
background: #333;
|
||||
}
|
||||
|
||||
/* -- Login page -- */
|
||||
[data-theme="dark"] .login-page {
|
||||
background: linear-gradient(160deg, #0f0f0f 0%, #0a2e14 50%, #0f0f0f 100%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .login-card {
|
||||
background: #1a1a1a;
|
||||
border-top-color: #4ade80;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.5),
|
||||
0 0 0 1px rgba(74, 222, 128, 0.08);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .login-card__tagline {
|
||||
color: #7a8a7a;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .login-card__error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
color: #f87171;
|
||||
}
|
||||
/* -- Login page — light mode only, no dark theme overrides -- */
|
||||
|
||||
/* -- Google sign-in btn -- */
|
||||
[data-theme="dark"] .google-sign-in-btn {
|
||||
|
||||
Reference in New Issue
Block a user