jambotron_gang/reactive-mail-server
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Update all components to match Synthwave design showcase

Browse Source 
Co-authored-by: Junie <junie@jetbrains.com>
This commit is contained in:
Liosha84
2026-11-05 01:53:51 +01:00
co-authored by Junie
parent 587ebd86ba
commit 0d16342f9f
9 changed files with 417 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/components/login/login.component.ts
+19 -18
View File
@@ -9,58 +9,59 @@ import { Router } from '@angular/router';
standalone: true,
imports: [RouterLink, FormsModule],
template: `
<div class="min-h-screen relative flex items-center justify-center">
<!-- Synthwave фон -->
<div class="synth-bg" aria-hidden="true">
<div class="min-h-screen relative flex items-center justify-center theme-cyber-magenta">
<!-- Synthwave анимированный фон -->
<div class="synth-stage" aria-hidden="true">
<div class="synth-sun"></div>
<div class="synth-grid">
<div class="synth-grid-plane"></div>
<div class="synth-mountains"></div>
<div class="grid-container">
<div class="grid-plane"></div>
</div>
</div>
<!-- Форма логина -->
<div class="relative z-10 w-full max-w-md px-4">
<div class="glass-panel p-8">
<div class="glass-panel p-8 border-2 border-cyan-400 shadow-[0_0_50px_rgba(0,240,255,0.4)]">
<div class="text-center mb-8">
<div class="w-16 h-16 mx-auto rounded-xl bg-gradient-to-br from-synth-pink to-synth-cyan flex items-center justify-center text-synth-dark font-black text-2xl font-orbitron shadow-[0_0_20px_rgba(255,0,127,0.8)] mb-4">
<div class="w-16 h-16 mx-auto rounded-xl bg-gradient-to-br from-pink-500 to-cyan-400 flex items-center justify-center text-slate-950 font-black text-2xl font-orbitron shadow-[0_0_20px_rgba(255,0,127,0.8)] mb-4">
M
</div>
<h1 class="text-3xl font-orbitron font-extrabold tracking-wider neon-text-primary mb-2">
MAIL<span class="text-synth-cyan font-normal">SERVER</span>
<h1 class="text-3xl font-extrabold font-orbitron tracking-wider neon-text-primary mb-2">
MAIL<span class="text-cyan-400 font-normal">SERVER</span>
</h1>
<p class="text-sm text-slate-400 font-mono">Sign in to your mailbox</p>
<p class="text-sm text-cyan-300/70 font-mono tracking-widest uppercase">Synthwave Edition</p>
</div>
@if (error) {
<div class="mb-4 p-3 rounded-lg bg-synth-pink/20 border border-synth-pink/40 text-synth-pink text-sm font-mono">
<div class="mb-4 p-3 rounded-lg bg-pink-500/20 border border-pink-500/40 text-pink-400 text-sm font-mono">
{{ error }}
</div>
}
<form (ngSubmit)="onLogin()" class="space-y-4">
<div>
<label for="email" class="block text-xs font-mono text-synth-cyan mb-1">EMAIL</label>
<label for="email" class="block text-xs font-mono text-pink-400 mb-1">EMAIL</label>
<input id="email" type="email" [(ngModel)]="email" name="email" required
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
placeholder="user@example.com">
</div>
<div>
<label for="password" class="block text-xs font-mono text-synth-cyan mb-1">PASSWORD</label>
<label for="password" class="block text-xs font-mono text-pink-400 mb-1">PASSWORD</label>
<input id="password" type="password" [(ngModel)]="password" name="password" required
class="w-full bg-synth-darker/80 border border-synth-cyan/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-synth-pink focus:border-synth-cyan transition-all"
class="w-full bg-slate-950/80 border border-cyan-500/40 rounded-xl px-4 py-3 text-sm text-slate-200 font-mono focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-cyan-400 transition-all"
placeholder="••••••••">
</div>
<button type="submit" [disabled]="loading"
class="cyber-btn w-full py-3 rounded-xl text-sm font-bold mt-6">
{{ loading ? 'CONNECTING...' : 'LOGIN' }}
{{ loading ? '⏳ CONNECTING...' : '⚡ LOGIN' }}
</button>
</form>
<p class="text-center text-sm text-slate-400 mt-6">
<p class="text-center text-sm text-slate-400 mt-6 font-rajdhani">
No account?
<a routerLink="/register" class="text-synth-cyan hover:text-synth-pink font-mono transition-colors">
<a routerLink="/register" class="text-cyan-400 hover:text-pink-400 font-mono transition-colors">
Register here
</a>
</p>