Login Page in collabration with @REPLIT

<!DOCTYPE html>

<head>

<meta

name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1"

<meta

name="description"

content="Lumen is a quiet, intelligent workspace where focused professionals come to do their best work."

<title>Lumen | Sign In</title>

<link

href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"

rel="stylesheet"

{

"imports": {

"three": "https://unpkg.com/three@0.160.0/build/three.module.js"

}

</script>

<style>

:root {

--bg: #f3f7f6;

--bg-grad-1: rgba(17, 94, 89, 0.10);

--bg-grad-2: rgba(13, 148, 136, 0.08);

--card: rgba(255, 255, 255, 0.65);

--card-border: rgba(15, 75, 70, 0.10);

--text: #0f1f1d;

--text-muted: #5b6b69;

--primary: #0d6e64;

--primary-hover: #0a5953;

--primary-text: #ffffff;

--input-bg: rgba(255, 255, 255, 0.7);

--input-border: rgba(15, 75, 70, 0.18);

--input-border-focus: #0d6e64;

--face-fill: #ffffff;

--face-stroke: #d8e3e1;

--hair: #0d6e64;

--eye: #1c2826;

--hand-fill: #fde7d3;

--hand-stroke: #c9a886;

--blush: #ffb3a8;

--error: #b54848;

--shadow: 0 30px 80px -20px rgba(15, 75, 70, 0.25),

0 10px 30px -10px rgba(15, 75, 70, 0.15);

--toggle-bg: rgba(255, 255, 255, 0.7);

--divider: rgba(15, 75, 70, 0.12);

--three-color: #0d6e64;

}

html.dark {

--bg: #06100f;

--bg-grad-1: rgba(45, 212, 191, 0.18);

--bg-grad-2: rgba(34, 197, 184, 0.10);

--card: rgba(15, 30, 28, 0.55);

--card-border: rgba(94, 234, 212, 0.12);

--text: #e6f3f1;

--text-muted: #8aa3a0;

--primary: #2dd4bf;

--primary-hover: #5eead4;

--primary-text: #052622;

--input-bg: rgba(7, 22, 20, 0.55);

--input-border: rgba(94, 234, 212, 0.18);

--input-border-focus: #2dd4bf;

--face-fill: #e6f3f1;

--face-stroke: #2dd4bf;

--hair: #2dd4bf;

--eye: #06100f;

--hand-fill: #f5d4b3;

--hand-stroke: #b08864;

--blush: #ff8d80;

--error: #ff8a8a;

--shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6),

0 10px 30px -10px rgba(0, 0, 0, 0.4);

--toggle-bg: rgba(15, 30, 28, 0.7);

--divider: rgba(94, 234, 212, 0.12);

--three-color: #2dd4bf;

}

* { box-sizing: border-box; }

html, body {

margin: 0; padding: 0; height: 100%;

font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

background: var(--bg); color: var(--text);

transition: background 0.5s ease, color 0.5s ease;

-webkit-font-smoothing: antialiased; overflow: hidden;

}

#bg-canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.bg-fallback {

position: fixed; inset: 0; z-index: 0; pointer-events: none;

background:

radial-gradient(ellipse at 20% 20%, var(--bg-grad-1), transparent 55%),

radial-gradient(ellipse at 80% 75%, var(--bg-grad-2), transparent 55%);

}

.layout {

position: relative; z-index: 1; min-height: 100vh;

display: flex; align-items: center; justify-content: center;

padding: 24px; overflow-y: auto;

}

.stack {

display: flex; flex-direction: column; align-items: center;

gap: 0; width: 100%; max-width: 420px;

}

.avatar-wrap {

position: relative; width: 160px; height: 160px;

margin-bottom: -36px; z-index: 2;

filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));

animation: avatarIntro 0.8s ease-out backwards;

}

@keyframes avatarIntro {

from { opacity: 0; transform: translateY(-12px) scale(0.85); }

to { opacity: 1; transform: translateY(0) scale(1); }

}

.avatar-wrap svg { width: 100%; height: 100%; overflow: visible; }

.card {

width: 100%; background: var(--card);

backdrop-filter: blur(28px) saturate(140%);

-webkit-backdrop-filter: blur(28px) saturate(140%);

border: 1px solid var(--card-border);

border-radius: 24px; padding: 56px 36px 32px;

box-shadow: var(--shadow);

animation: cardIntro 0.8s 0.1s ease-out backwards;

}

@keyframes cardIntro {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.card h1 { margin: 0; font-size: 26px; font-weight: 600; text-align: center; letter-spacing: -0.01em; }

.card .subtitle { margin: 8px 0 28px; text-align: center; color: var(--text-muted); font-size: 14px; }

.field { margin-bottom: 16px; }

.field-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }

.field label { font-size: 13px; font-weight: 500; color: var(--text); }

.field a.link { font-size: 12px; color: var(--primary); text-decoration: none; font-weight: 500; }

.field a.link:hover { text-decoration: underline; }

.input-wrap { position: relative; }

.field input[type="email"], .field input[type="password"], .field input[type="text"] {

width: 100%; height: 44px; padding: 0 14px;

font-family: inherit; font-size: 14px; color: var(--text);

background: var(--input-bg); border: 1px solid var(--input-border);

border-radius: 10px; outline: none;

transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}

.field input::placeholder { color: var(--text-muted); }

.field input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 3px rgba(13, 110, 100, 0.12); }

html.dark .field input:focus { box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18); }

.pwd-toggle {

position: absolute; right: 8px; top: 50%; transform: translateY(-50%);

width: 32px; height: 32px;

display: flex; align-items: center; justify-content: center;

border: none; background: transparent; color: var(--text-muted);

cursor: pointer; border-radius: 6px;

}

.pwd-toggle:hover { color: var(--text); background: rgba(0, 0, 0, 0.04); }

html.dark .pwd-toggle:hover { background: rgba(255, 255, 255, 0.06); }

.field-error { font-size: 12px; color: var(--error); margin-top: 6px; min-height: 14px; }

.row-checkbox {

display: flex; align-items: center; gap: 8px;

margin: 4px 0 22px; font-size: 13px; color: var(--text-muted);

}

.row-checkbox input { accent-color: var(--primary); width: 14px; height: 14px; }

.row-checkbox label { cursor: pointer; }

.btn-primary {

width: 100%; height: 46px;

background: var(--primary); color: var(--primary-text);

border: none; border-radius: 10px;

font-family: inherit; font-size: 14px; font-weight: 600;

cursor: pointer; transition: background 0.2s ease, transform 0.06s ease;

display: flex; align-items: center; justify-content: center; gap: 8px;

}

.btn-primary:hover { background: var(--primary-hover); }

.btn-primary:active { transform: scale(0.99); }

.btn-primary:disabled { opacity: 0.7; cursor: progress; }

.spinner {

width: 16px; height: 16px;

border: 2px solid rgba(255, 255, 255, 0.4);

border-top-color: var(--primary-text);

border-radius: 50%; animation: spin 0.7s linear infinite;

}

@keyframes spin { to { transform: rotate(360deg); } }

.divider {

display: flex; align-items: center; gap: 12px;

margin: 20px 0; font-size: 11px; color: var(--text-muted);

letter-spacing: 0.08em; text-transform: uppercase;

}

.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--divider); }

.sso-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.sso-btn {

height: 44px; background: var(--input-bg);

border: 1px solid var(--input-border); border-radius: 10px;

cursor: pointer; display: flex; align-items: center; justify-content: center;

color: var(--text); transition: background 0.15s ease, transform 0.06s ease;

}

.sso-btn:hover { background: rgba(0, 0, 0, 0.03); }

html.dark .sso-btn:hover { background: rgba(255, 255, 255, 0.04); }

.sso-btn svg { width: 18px; height: 18px; }

.footer-text { margin-top: 22px; text-align: center; font-size: 13px; color: var(--text-muted); }

.footer-text a { color: var(--primary); text-decoration: none; font-weight: 500; }

.footer-text a:hover { text-decoration: underline; }

.theme-toggle {

position: fixed; top: 20px; right: 20px; z-index: 10;

width: 40px; height: 40px; border-radius: 50%;

background: var(--toggle-bg); border: 1px solid var(--card-border);

color: var(--text); cursor: pointer;

display: flex; align-items: center; justify-content: center;

backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);

transition: background 0.2s ease;

}

.theme-toggle:hover { background: var(--input-bg); }

.theme-toggle svg { width: 18px; height: 18px; }

.success-banner {

position: absolute; inset: 0;

background: var(--card);

backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);

border-radius: 24px;

display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px;

opacity: 0; pointer-events: none; transition: opacity 0.4s ease;

font-weight: 600; font-size: 18px;

}

.success-banner.show { opacity: 1; }

.success-banner small { font-weight: 400; font-size: 13px; color: var(--text-muted); }

.card-wrap { position: relative; width: 100%; }

/* Avatar parts */

.face-circle { fill: var(--face-fill); stroke: var(--face-stroke); stroke-width: 2; transition: fill 0.3s ease, stroke 0.3s ease; }

.hair { fill: var(--hair); transition: fill 0.3s ease; }

.eye-pupil {

fill: var(--eye);

transition: cx 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),

cy 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.3s ease;

}

.eye-white { fill: var(--face-fill); stroke: var(--eye); stroke-width: 1.2; transition: fill 0.3s ease, stroke 0.3s ease; }

.eyelid {

fill: var(--face-fill); stroke: var(--eye); stroke-width: 2; stroke-linecap: round;

transform-origin: center; transform: scaleY(0); transform-box: fill-box;

transition: transform 0.18s ease;

}

.closed .eyelid { transform: scaleY(1); }

.blink { animation: blink 5s infinite; }

.closed .blink { animation: none; }

@keyframes blink {

0%, 92%, 100% { transform: scaleY(0); }

94%, 96% { transform: scaleY(1); }

}

.blush { fill: var(--blush); opacity: 0; transition: opacity 0.3s ease; }

.closed .blush, .smiling .blush { opacity: 0.55; }

.mouth { fill: none; stroke: var(--eye); stroke-width: 2.6; stroke-linecap: round; transition: d 0.3s ease; }

.hands {

opacity: 0; transform: translateY(40px); transform-origin: 80px 130px;

transition: opacity 0.32s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);

}

.closed .hands { opacity: 1; transform: translateY(0); }

.hand { fill: var(--hand-fill); stroke: var(--hand-stroke); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

.head-group { transform-origin: 80px 110px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }

.tilted .head-group { transform: rotate(-5deg); }

.sparkle { opacity: 0; transition: opacity 0.3s ease; }

.successful .sparkle { opacity: 1; }

.visually-hidden {

position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;

overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;

}

</style>

</head>

<body>

</svg>

</button>

<defs>

</defs>

</g>

</g>

</g>

</g>

</svg>

</div>

<h1>Sign in to Lumen</h1>

<p class="subtitle">Welcome back to your workspace</p>

<div class="field-label-row"><label for="email">Email</label></div>

</div>

</div>

<label for="password">Password</label>

<a class="link" href="#">Forgot password?</a>

</div>

</svg>

</svg>

</button>

</div>

</div>

<label for="remember">Remember me for 30 days</label>

</div>

</button>

<div class="divider">Or continue with</div>

</svg>

</button>

</svg>

</button>

</svg>

</button>

</div>

<p class="footer-text">Don't have an account? <a href="#">Sign up</a></p>

</form>

</div>

Welcome back

<small>Redirecting to your workspace…</small>

</div>

</main>

import * as THREE from "three";

// ---------- Theme handling ----------

const root = document.documentElement;

const themeIcon = document.getElementById("themeIcon");

const themeBtn = document.getElementById("themeToggle");

const SUN_PATH = `<circle cx="12" cy="12" r="4"></circle>

<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>`;

const MOON_PATH = `<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>`;

const stored = localStorage.getItem("lumen-theme");

let manualOverride = stored === "light" || stored === "dark";

let theme = stored || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light");

applyTheme(theme);

function applyTheme(t) {

if (t === "dark") { root.classList.add("dark"); themeIcon.innerHTML = SUN_PATH; }

else { root.classList.remove("dark"); themeIcon.innerHTML = MOON_PATH; }

theme = t;

if (window.__updateThreeTheme) window.__updateThreeTheme(t);

}

themeBtn.addEventListener("click", () => {

const next = root.classList.contains("dark") ? "light" : "dark";

manualOverride = true;

localStorage.setItem("lumen-theme", next);

applyTheme(next);

});

window.matchMedia("(prefers-color-scheme: dark)")

.addEventListener("change", (e) => {

if (manualOverride) return;

applyTheme(e.matches ? "dark" : "light");

});

// ---------- 3D Background ----------

function initThree() {

const canvas = document.getElementById("bg-canvas");

let renderer;

try {

renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });

} catch (e) {

document.getElementById("bg-fallback").style.display = "block";

canvas.style.display = "none";

return;

}

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);

camera.position.z = 5;

const colorFromTheme = (t) => new THREE.Color(t === "dark" ? "#2dd4bf" : "#0d6e64");

const PARTICLE_COUNT = 1800;

const positions = new Float32Array(PARTICLE_COUNT * 3);

for (let i = 0; i < PARTICLE_COUNT; i++) {

positions[i * 3] = (Math.random() - 0.5) * 22;

positions[i * 3 + 1] = (Math.random() - 0.5) * 22;

positions[i * 3 + 2] = (Math.random() - 0.5) * 22;

}

const pGeom = new THREE.BufferGeometry();

pGeom.setAttribute("position", new THREE.BufferAttribute(positions, 3));

const pMat = new THREE.PointsMaterial({

size: 0.04, color: colorFromTheme(theme),

transparent: true, opacity: 0.55, sizeAttenuation: true,

});

const points = new THREE.Points(pGeom, pMat);

scene.add(points);

const wireMat = new THREE.MeshBasicMaterial({

color: colorFromTheme(theme),

wireframe: true, transparent: true, opacity: 0.18,

});

const torusKnot = new THREE.Mesh(new THREE.TorusKnotGeometry(1.4, 0.38, 128, 16), wireMat);

torusKnot.position.set(-2, 0, -4); scene.add(torusKnot);

const ico = new THREE.Mesh(new THREE.IcosahedronGeometry(1.8, 0), wireMat.clone());

ico.position.set(2.6, 1.6, -6); scene.add(ico);

const torus = new THREE.Mesh(new THREE.TorusGeometry(1.1, 0.28, 16, 64), wireMat.clone());

torus.position.set(0, -2.4, -5); scene.add(torus);

window.__updateThreeTheme = (t) => {

const c = colorFromTheme(t);

pMat.color.copy(c);

torusKnot.material.color.copy(c);

ico.material.color.copy(c);

torus.material.color.copy(c);

};

function resize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight, false);

}

resize();

window.addEventListener("resize", resize);

const start = performance.now();

function tick() {

const t = (performance.now() - start) / 1000;

points.rotation.y = t * 0.05;

points.rotation.x = Math.sin(t * 0.05) * 0.4;

torusKnot.rotation.x = t * 0.18;

torusKnot.rotation.y = t * 0.14;

ico.rotation.x = -t * 0.12;

ico.rotation.y = t * 0.16;

torus.rotation.x = t * 0.1;

torus.rotation.z = t * 0.08;

renderer.render(scene, camera);

requestAnimationFrame(tick);

}

tick();

canvas.addEventListener("webglcontextlost", (e) => {

e.preventDefault();

document.getElementById("bg-fallback").style.display = "block";

canvas.style.display = "none";

});

}

try { initThree(); }

catch (err) {

document.getElementById("bg-fallback").style.display = "block";

document.getElementById("bg-canvas").style.display = "none";

}

// ---------- Avatar reactivity ----------

const avatar = document.getElementById("avatar");

const leftPupil = document.getElementById("leftPupil");

const rightPupil = document.getElementById("rightPupil");

const leftHL = document.getElementById("leftHL");

const rightHL = document.getElementById("rightHL");

const mouth = document.getElementById("mouth");

const MOUTH = {

idle: "M 70 110 Q 80 112 90 110",

email: "M 70 110 Q 80 114 90 110",

password: "M 66 108 Q 80 122 94 108",

"password-visible": "M 68 109 Q 80 118 92 109",

submitting: "M 72 110 Q 80 116 88 110",

success: "M 62 106 Q 80 130 98 106",

};

const EYE_POS = {

idle: { l: { x: 60, y: 82 }, r: { x: 100, y: 82 } },

email: { l: { x: 56, y: 86 }, r: { x: 96, y: 86 } },

success: { l: { x: 60, y: 80 }, r: { x: 100, y: 80 } },

};

function setAvatarState(state) {

avatar.classList.remove("closed", "smiling", "tilted", "successful");

mouth.setAttribute("d", MOUTH[state] || MOUTH.idle);

const pos = state === "email" ? EYE_POS.email

: state === "success" ? EYE_POS.success

: EYE_POS.idle;

leftPupil.setAttribute("cx", pos.l.x); leftPupil.setAttribute("cy", pos.l.y);

rightPupil.setAttribute("cx", pos.r.x); rightPupil.setAttribute("cy", pos.r.y);

leftHL.setAttribute("cx", pos.l.x + 1.4); leftHL.setAttribute("cy", pos.l.y - 1.4);

rightHL.setAttribute("cx", pos.r.x + 1.4); rightHL.setAttribute("cy", pos.r.y - 1.4);

if (state === "email") avatar.classList.add("tilted");

else if (state === "password") avatar.classList.add("closed", "smiling");

else if (state === "password-visible") avatar.classList.add("smiling");

else if (state === "success") avatar.classList.add("smiling", "successful");

}

function passwordFocusState() {

return pwdInput.type === "text" ? "password-visible" : "password";

}

setAvatarState("idle");

// ---------- Form behavior ----------

const emailInput = document.getElementById("email");

const pwdInput = document.getElementById("password");

const emailError = document.getElementById("emailError");

const pwdError = document.getElementById("passwordError");

const form = document.getElementById("loginForm");

const submitBtn = document.getElementById("submitBtn");

const submitLabel = document.getElementById("submitLabel");

const successBanner = document.getElementById("successBanner");

let currentFocus = null;

emailInput.addEventListener("focus", () => { currentFocus = "email"; setAvatarState("email"); });

emailInput.addEventListener("blur", () => { if (currentFocus === "email") currentFocus = null; if (!currentFocus) setAvatarState("idle"); });

pwdInput.addEventListener("focus", () => { currentFocus = "password"; setAvatarState(passwordFocusState()); });

pwdInput.addEventListener("blur", () => { if (currentFocus === "password") currentFocus = null; if (!currentFocus) setAvatarState("idle"); });

function validEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); }

emailInput.addEventListener("input", () => {

if (emailInput.value && !validEmail(emailInput.value)) emailError.textContent = "Enter a valid email address";

else emailError.textContent = "";

});

pwdInput.addEventListener("input", () => { pwdError.textContent = ""; });

// Password show/hide

const pwdToggle = document.getElementById("pwdToggle");

const pwdIconOpen = document.getElementById("pwdIconOpen");

const pwdIconOff = document.getElementById("pwdIconOff");

pwdToggle.addEventListener("click", () => {

const willShow = pwdInput.type === "password";

pwdInput.type = willShow ? "text" : "password";

pwdIconOpen.style.display = willShow ? "none" : "";

pwdIconOff.style.display = willShow ? "" : "none";

pwdToggle.setAttribute("aria-label", willShow ? "Hide password" : "Show password");

pwdInput.focus();

if (currentFocus === "password") setAvatarState(passwordFocusState());

});

// Submit

form.addEventListener("submit", async (e) => {

e.preventDefault();

let ok = true;

if (!validEmail(emailInput.value)) { emailError.textContent = "Enter a valid email address"; ok = false; }

if (pwdInput.value.length < 6) { pwdError.textContent = "Password must be at least 6 characters"; ok = false; }

if (!ok) return;

submitBtn.disabled = true;

submitLabel.textContent = "Signing in";

const sp = document.createElement("span");

sp.className = "spinner";

submitBtn.prepend(sp);

emailInput.blur(); pwdInput.blur();

setAvatarState("submitting");

await new Promise((r) => setTimeout(r, 1300));

setAvatarState("success");

submitBtn.disabled = false;

sp.remove();

submitLabel.textContent = "Sign in";

successBanner.classList.add("show");

setTimeout(() => {

successBanner.classList.remove("show");

setAvatarState("idle");

form.reset();

emailError.textContent = "";

pwdError.textContent = "";

}, 2200);

});

</script>

</body>

</html>

RahulpGupta

Search This Blog

Login Page in collabration with @REPLIT

Comments