Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Tropical Glass Login</title>

<style>

/* --- CSS VARIABLES & RESET --- */

:root {

--primary-color: #10b981; /* Emerald Green */

--primary-dark: #059669;

--text-color: #ffffff;

--text-muted: #d1d5db;

--bg-overlay: rgba(0, 0, 0, 0.4);

--glass-bg: rgba(255, 255, 255, 0.08);

--glass-border: rgba(255, 255, 255, 0.15);

--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);

--input-bg: rgba(0, 0, 0, 0.2);

--error-color: #ef4444;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

}

body {

height: 100vh;

width: 100%;

display: flex;

justify-content: center;

align-items: center;

overflow: hidden;

background-color: #0f172a; /* Fallback color */

}

/* --- BACKGROUND & EFFECTS --- */

.bg-image {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

/* High quality vibrant realistic tropical background */

background-image: url('https://images.unsplash.com/photo-1542273917363-3b1817f69a2d?q=80&w=2674&auto=format&fit=crop');

background-size: cover;

background-position: center;

z-index: -2;

filter: blur(2px); /* Slight blur for depth */

transform: scale(1.05); /* Prevent blur edges */

}

.bg-overlay {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

/* Vignette effect */

background: radial-gradient(circle at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);

z-index: -1;

}

/* --- GLASS CARD --- */

.container {

position: relative;

width: 420px; /* Slightly wider for social icons */

min-height: 620px; /* Increased height for social icons */

perspective: 1000px;

}

.glass-card {

position: relative;

width: 100%;

height: 100%; /* Auto height handled by content */

background: var(--glass-bg);

backdrop-filter: blur(16px);

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

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

border-radius: 24px;

box-shadow: var(--glass-shadow);

padding: 40px;

display: flex;

flex-direction: column;

overflow: hidden;

}

/* --- TYPOGRAPHY --- */

h2 {

color: var(--text-color);

font-size: 28px;

font-weight: 600;

text-align: center;

margin-bottom: 10px;

letter-spacing: 0.5px;

}

p.subtitle {

color: var(--text-muted);

text-align: center;

font-size: 14px;

margin-bottom: 30px;

}

/* --- FORMS WRAPPER (For sliding animation) --- */

.form-wrapper {

position: relative;

width: 100%;

height: 520px; /* Increased height to fit social buttons */

}

.form-section {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);

opacity: 0;

visibility: hidden;

transform: translateX(120%);

}

.form-section.active {

opacity: 1;

visibility: visible;

transform: translateX(0);

}

.form-section.inactive-left {

transform: translateX(-120%);

opacity: 0;

visibility: hidden;

}

/* --- INPUT FIELDS --- */

.input-group {

position: relative;

margin-bottom: 20px;

}

.input-group input {

width: 100%;

padding: 14px 14px 14px 45px;

background: var(--input-bg);

border: 1px solid transparent;

border-radius: 12px;

outline: none;

color: var(--text-color);

font-size: 15px;

transition: all 0.3s ease;

}

.input-group input::placeholder {

color: rgba(255, 255, 255, 0.5);

}

.input-group input:focus {

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

background: rgba(0, 0, 0, 0.4);

box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);

}

/* Inline SVG Icons styling */

.input-icon {

position: absolute;

left: 14px;

top: 50%;

transform: translateY(-50%);

width: 20px;

height: 20px;

fill: none;

stroke: var(--text-muted);

stroke-width: 2;

stroke-linecap: round;

stroke-linejoin: round;

transition: stroke 0.3s ease;

}

.input-group input:focus + .input-icon {

stroke: var(--primary-color);

}

/* --- CHECKBOX & LINKS --- */

.options {

display: flex;

justify-content: space-between;

align-items: center;

font-size: 13px;

color: var(--text-muted);

margin-bottom: 25px;

}

.remember-me {

display: flex;

align-items: center;

gap: 6px;

cursor: pointer;

}

.remember-me input {

accent-color: var(--primary-color);

width: 14px;

height: 14px;

cursor: pointer;

}

.forgot-link {

color: var(--text-muted);

text-decoration: none;

transition: color 0.3s;

}

.forgot-link:hover {

color: var(--primary-color);

}

/* --- BUTTONS --- */

.btn {

width: 100%;

padding: 14px;

background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));

border: none;

border-radius: 12px;

color: white;

font-size: 16px;

font-weight: 600;

cursor: pointer;

transition: transform 0.2s, box-shadow 0.2s;

box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);

margin-bottom: 20px;

}

.btn:hover {

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);

}

.btn:active {

transform: translateY(0);

}

/* --- SOCIAL LOGIN --- */

.social-divider {

position: relative;

text-align: center;

margin: 10px 0 20px;

}

.social-divider span {

position: relative;

padding: 0 10px;

color: var(--text-muted);

font-size: 13px;

z-index: 1;

}

.social-divider::before {

content: "";

position: absolute;

top: 50%;

left: 0;

width: 100%;

height: 1px;

background: rgba(255, 255, 255, 0.2);

z-index: 0;

}

.social-icons {

display: flex;

justify-content: center;

gap: 15px;

margin-bottom: 20px;

}

.social-btn {

width: 46px;

height: 46px;

border-radius: 12px;

background: rgba(255, 255, 255, 0.05);

border: 1px solid rgba(255, 255, 255, 0.1);

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

transition: all 0.3s ease;

}

.social-btn:hover {

background: rgba(255, 255, 255, 0.15);

transform: translateY(-3px);

border-color: rgba(255, 255, 255, 0.3);

}

.social-btn svg {

width: 22px;

height: 22px;

fill: white;

}

/* --- SWITCH LINK --- */

.switch-text {

text-align: center;

margin-top: 20px;

font-size: 14px;

color: var(--text-muted);

}

.switch-text a {

color: var(--primary-color);

text-decoration: none;

font-weight: 600;

margin-left: 5px;

cursor: pointer;

}

.switch-text a:hover {

text-decoration: underline;

}

/* --- TOAST NOTIFICATION --- */

#toast {

visibility: hidden;

min-width: 250px;

margin-left: -125px;

background-color: #333;

color: #fff;

text-align: center;

border-radius: 8px;

padding: 16px;

position: fixed;

z-index: 10;

left: 50%;

bottom: 30px;

font-size: 14px;

opacity: 0;

transition: opacity 0.5s, bottom 0.5s;

border-left: 4px solid var(--primary-color);

box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}

#toast.show {

visibility: visible;

opacity: 1;

bottom: 50px;

}

#toast.error {

border-left-color: var(--error-color);

}

/* --- RESPONSIVE --- */

@media (max-width: 480px) {

.container {

width: 90%;

min-height: 500px;

}

.glass-card {

padding: 30px 20px;

}

h2 { font-size: 24px; }

}

</style>

</head>

<body>

<h2>Welcome Back</h2>

<p class="subtitle">Enter your details to sign in</p>

</svg>

</div>

</svg>

</div>

<input type="checkbox"> Remember me

</label>

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

</div>

<span>Or continue with</span>

</div>

</svg>

</button>

</svg>

</button>

</svg>

</button>

</div>

Don't have an account? <a onclick="switchView('register')">Register</a>

</div>

</form>

<h2>Create Account</h2>

<p class="subtitle">Join us and start your journey</p>

</svg>

</div>

</svg>

</div>

</svg>

</div>

</svg>

</div>

<button type="submit" class="btn">Create Account</button>

</div>

</svg>

</button>

</svg>

</button>

</svg>

</button>

</div>

Already have an account? <a onclick="switchView('login')">Login</a>

</div>

</form>

</div>

<div id="toast">Message here</div>

// --- VIEW SWITCHING LOGIC ---

const loginForm = document.getElementById('login-form');

const registerForm = document.getElementById('register-form');

const container = document.querySelector('.glass-card');

function switchView(view) {

if (view === 'register') {

loginForm.classList.remove('active');

loginForm.classList.add('inactive-left'); // Slide out to left

setTimeout(() => {

registerForm.classList.remove('inactive-left');

registerForm.classList.add('active');

}, 50); // Small delay for smoother feel

} else {

registerForm.classList.remove('active');

// Normally register slides back to right, but simpler logic:

// Just remove active, and let login slide back in from left

loginForm.classList.remove('inactive-left');

loginForm.classList.add('active');

}

// --- VALIDATION & MOCK SUBMIT ---

function showToast(message, type = 'success') {

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

toast.textContent = message;

// Reset classes

toast.className = "show";

if (type === 'error') toast.classList.add('error');

// Hide after 3 seconds

setTimeout(function(){

toast.className = toast.className.replace("show", "");

}, 3000);

}

function handleLogin(e) {

e.preventDefault();

const user = document.getElementById('login-user').value;

const pass = document.getElementById('login-pass').value;

// Simple validation simulation

if (user && pass) {

// Here you would normally send an AJAX request

showToast(`Welcome back, ${user}! Redirecting...`, 'success');

// Simulate redirect visual feedback

document.querySelector('.btn').innerHTML = 'Signing in...';

document.querySelector('.btn').style.opacity = '0.8';

} else {

showToast('Please fill in all fields.', 'error');

}

function handleRegister(e) {

e.preventDefault();

const user = document.getElementById('reg-user').value;

const email = document.getElementById('reg-email').value;

const pass = document.getElementById('reg-pass').value;

const confirm = document.getElementById('reg-confirm').value;

// Validation

if (pass !== confirm) {

showToast('Passwords do not match!', 'error');

return;

}

if (pass.length < 6) {

showToast('Password must be at least 6 characters.', 'error');

return;

}

// Success simulation

showToast('Account created successfully! Please login.', 'success');

// Clear inputs and switch to login after delay

setTimeout(() => {

document.getElementById('register-form').reset();

switchView('login');

}, 1500);

}

</script>

</body>

</html>

CSS

JS

Metehan

Recommended