kbe/aperonight
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat: Add premium login design system inspired by telecom aesthetics

Browse Source 
- Create comprehensive theme system with professional color palette
- Implement flat design login mockups for both dark and light themes
- Add telecom-inspired glassmorphism effects and micro-interactions
- Include Quantic Telecom reference design for professional styling
- Generate responsive login interfaces with premium animations
- Support both flat and gradient design variations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
kbe
2025-09-05 00:21:38 +02:00
parent a0e53325f7
commit d18c1a7b3e
6 changed files with 2249 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

480
.superdesign/design_iterations/quantic_login_1.html Normal file
View File

@@ -0,0 +1,480 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connexion - Quantic Telecom</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="quantic_telecom_theme.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-sans) !important;
background: var(--gradient-background) !important;
min-height: 100vh !important;
position: relative !important;
overflow-x: hidden !important;
}
/* Background grid pattern */
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(var(--grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
background-size: 50px 50px;
opacity: 0.3;
z-index: 0;
animation: gridShift 20s linear infinite;
}
@keyframes gridShift {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
/* Page entrance animation */
.page-container {
animation: pageLoad 800ms ease-out forwards;
opacity: 0;
transform: translateY(40px);
}
@keyframes pageLoad {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Logo animation */
.logo-container {
animation: logoFade 1200ms ease-out 200ms forwards;
opacity: 0;
transform: scale(0.8);
}
@keyframes logoFade {
to {
opacity: 1;
transform: scale(1);
}
}
/* Card slide animation */
.login-card {
background: var(--glass-bg) !important;
backdrop-filter: var(--glass-backdrop) !important;
border: 1px solid var(--glass-border) !important;
border-radius: var(--radius-lg) !important;
box-shadow: var(--shadow-xl) !important;
animation: cardSlide 600ms cubic-bezier(0.4, 0, 0.2, 1) 400ms forwards;
opacity: 0;
transform: translateY(30px);
transition: all 300ms ease-out;
}
.login-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-2xl);
}
@keyframes cardSlide {
to {
opacity: 1;
transform: translateY(0);
}
}
/* Input field styling */
.input-group {
position: relative;
margin-bottom: 1.5rem;
}
.input-field {
width: 100%;
padding: 1rem 3rem 1rem 1rem;
border: 2px solid var(--border);
border-radius: var(--radius-md);
background: var(--input);
color: var(--foreground);
font-size: 1rem;
transition: all 200ms ease-out;
outline: none;
}
.input-field:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--ring);
transform: scale(1.01);
}
.input-field:focus + .floating-label {
transform: translateY(-10px) scale(0.75);
color: var(--primary);
}
.floating-label {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
background: var(--input);
padding: 0 0.5rem;
color: var(--muted-foreground);
pointer-events: none;
transition: all 200ms ease-out;
}
.input-field:not(:placeholder-shown) + .floating-label {
transform: translateY(-10px) scale(0.75);
}
/* Password toggle */
.password-toggle {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--muted-foreground);
cursor: pointer;
transition: all 150ms ease-out;
opacity: 0.6;
}
.password-toggle:hover {
opacity: 1;
transform: translateY(-50%) rotate(90deg);
}
/* Button styling */
.login-button {
width: 100%;
padding: 1rem;
background: var(--gradient-primary) !important;
border: none;
border-radius: var(--radius-md);
color: var(--primary-foreground);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 200ms ease-out;
position: relative;
overflow: hidden;
}
.login-button:hover {
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
.login-button:active {
transform: scale(0.98);
}
/* Ripple effect */
.login-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transition: width 400ms ease-out, height 400ms ease-out;
transform: translate(-50%, -50%);
}
.login-button:active::before {
width: 300px;
height: 300px;
}
/* Checkbox styling */
.custom-checkbox {
appearance: none;
width: 1.25rem;
height: 1.25rem;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
background: var(--input);
cursor: pointer;
position: relative;
transition: all 200ms ease-out;
}
.custom-checkbox:checked {
background: var(--primary);
border-color: var(--primary);
animation: checkboxTick 250ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.custom-checkbox:checked::before {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--primary-foreground);
font-size: 0.875rem;
font-weight: bold;
}
@keyframes checkboxTick {
0% { transform: scale(0); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
/* Link styling */
.forgot-link {
color: var(--accent);
text-decoration: none;
position: relative;
transition: all 200ms ease-out;
}
.forgot-link::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--accent);
transition: width 200ms ease-out;
}
.forgot-link:hover::after {
width: 100%;
}
/* Validation states */
.input-error {
border-color: var(--destructive) !important;
animation: errorShake 300ms ease-out;
}
@keyframes errorShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-8px); }
75% { transform: translateX(8px); }
}
.input-success {
border-color: var(--success) !important;
animation: successPulse 500ms ease-out;
}
@keyframes successPulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); opacity: 0.8; }
100% { transform: scale(1); opacity: 1; }
}
/* Loading states */
.skeleton {
background: linear-gradient(90deg, var(--muted) 25%, var(--accent) 50%, var(--muted) 75%);
background-size: 200% 100%;
animation: skeleton 1.5s ease-in-out infinite;
}
@keyframes skeleton {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Responsive design */
@media (max-width: 640px) {
.login-card {
margin: 1rem;
padding: 2rem 1.5rem;
}
}
</style>
</head>
<body>
<div class="page-container relative z-10 flex items-center justify-center min-h-screen p-4">
<div class="w-full max-w-md">
<!-- Logo and Header -->
<div class="logo-container text-center mb-8">
<div class="mb-4">
<div class="w-16 h-16 mx-auto bg-gradient-to-br from-blue-600 to-blue-800 rounded-xl flex items-center justify-center">
<i data-lucide="wifi" class="w-8 h-8 text-white"></i>
</div>
</div>
<h1 class="text-2xl font-bold text-gray-900 mb-2">Quantic Telecom</h1>
<p class="text-gray-600 text-sm">Connexion Espace Client</p>
<p class="text-gray-500 text-xs mt-1">Votre espace client sécurisé</p>
</div>
<!-- Login Card -->
<div class="login-card p-8">
<form class="space-y-6">
<!-- Email Field -->
<div class="input-group">
<input
type="email"
class="input-field"
placeholder=" "
required
id="email"
>
<label class="floating-label" for="email">Adresse e-mail</label>
<div class="absolute right-3 top-1/2 transform -translate-y-1/2">
<i data-lucide="mail" class="w-5 h-5 text-gray-400"></i>
</div>
</div>
<!-- Password Field -->
<div class="input-group">
<input
type="password"
class="input-field"
placeholder=" "
required
id="password"
>
<label class="floating-label" for="password">Mot de passe</label>
<button type="button" class="password-toggle" onclick="togglePassword()">
<i data-lucide="eye" class="w-5 h-5"></i>
</button>
</div>
<!-- Remember Me -->
<div class="flex items-center justify-between">
<label class="flex items-center space-x-3 cursor-pointer">
<input type="checkbox" class="custom-checkbox" id="remember">
<span class="text-sm text-gray-700">Se souvenir de moi</span>
</label>
</div>
<!-- Login Button -->
<button type="submit" class="login-button">
<span class="relative z-10">SE CONNECTER</span>
</button>
<!-- Forgot Password -->
<div class="text-center">
<a href="#" class="forgot-link text-sm">Mot de passe oublié ?</a>
</div>
</form>
</div>
<!-- Support Footer -->
<div class="text-center mt-8 space-y-2">
<p class="text-xs text-gray-500">
Besoin d'aide ?
<a href="#" class="text-blue-600 hover:text-blue-800 transition-colors">Support technique</a>
</p>
<p class="text-xs text-gray-400">© 2024 Quantic Telecom - Tous droits réservés</p>
</div>
</div>
</div>
<script>
// Initialize Lucide icons
lucide.createIcons();
// Password toggle functionality
function togglePassword() {
const passwordField = document.getElementById('password');
const toggleIcon = document.querySelector('.password-toggle i');
if (passwordField.type === 'password') {
passwordField.type = 'text';
toggleIcon.setAttribute('data-lucide', 'eye-off');
} else {
passwordField.type = 'password';
toggleIcon.setAttribute('data-lucide', 'eye');
}
lucide.createIcons();
}
// Form validation
const form = document.querySelector('form');
const emailField = document.getElementById('email');
const passwordField = document.getElementById('password');
form.addEventListener('submit', function(e) {
e.preventDefault();
// Reset validation states
emailField.classList.remove('input-error', 'input-success');
passwordField.classList.remove('input-error', 'input-success');
let isValid = true;
// Email validation
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(emailField.value)) {
emailField.classList.add('input-error');
isValid = false;
} else {
emailField.classList.add('input-success');
}
// Password validation
if (passwordField.value.length < 6) {
passwordField.classList.add('input-error');
isValid = false;
} else {
passwordField.classList.add('input-success');
}
if (isValid) {
// Simulate login process
const button = document.querySelector('.login-button');
button.innerHTML = '<div class="flex items-center justify-center"><div class="animate-spin w-5 h-5 border-2 border-white border-t-transparent rounded-full mr-2"></div>Connexion...</div>';
setTimeout(() => {
alert('Connexion réussie ! (Demo)');
button.innerHTML = '<span class="relative z-10">SE CONNECTER</span>';
}, 2000);
}
});
// Real-time input validation
emailField.addEventListener('input', function() {
this.classList.remove('input-error', 'input-success');
});
passwordField.addEventListener('input', function() {
this.classList.remove('input-error', 'input-success');
});
// Add floating label behavior for better UX
document.querySelectorAll('.input-field').forEach(input => {
input.addEventListener('focus', function() {
this.nextElementSibling.classList.add('focused');
});
input.addEventListener('blur', function() {
if (!this.value) {
this.nextElementSibling.classList.remove('focused');
}
});
});
</script>
</body>
</html>