http://www.dustmat.cz/login

1<!DOCTYPE html>
2<html lang="cs">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1">
6    <title>Přihlášení | REWEB</title>
7    

7<script src="https://cdn.tailwindcss.com"></script>

7
8    

8<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

8
9    <style>
10        :root {
11            --brand-500: #1c59bb;
12            --brand-600: #17499b;
13        }
14    </style>
15</head>
16<body class="h-screen overflow-hidden bg-zinc-50 text-zinc-900">
17<div class="relative flex h-screen overflow-hidden">
18    <div class="flex h-full w-full items-center lg:w-1/2">
19        <div class="w-full max-w-md mx-auto px-6">
20                <div class="flex min-h-full flex-col justify-center">
21        <div class="mb-8 lg:mb-12 flex justify-center">
22            <img src="/build/images/svg/reweb-blue-logo.svg" alt="REWEB" class="h-auto w-[280px]" />
23        </div>
24
25        <div class="mb-6">
26            <h1 class="mb-2 text-3xl font-semibold text-zinc-800">Přihlášení</h1>
27            <p class="text-sm text-zinc-500">Zadejte své přihlašovací údaje pro přístup do administrace.</p>
28        </div>
29
30        
31        <form method="post" action="/login" class="space-y-5">
32            <div>
33                <label for="username" class="mb-1.5 block text-sm font-medium text-zinc-700">Login</label>
34                <input id="username" name="_username" type="text" value="" autocomplete="username" required autofocus
35                       class="h-11 w-full rounded-lg border border-zinc-300 bg-white px-4 py-2.5 text-sm text-zinc-800 placeholder:text-zinc-400 focus:border-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-500/10"
36                       placeholder="e-mail nebo id kanceláře">
37            </div>
38
39            <div x-data="{ showPassword: false }">
40                <label for="password" class="mb-1.5 block text-sm font-medium text-zinc-700">Heslo</label>
41                <div class="relative">
42                    <input id="password" name="_password" :type="showPassword ? 'text' : 'password'" autocomplete="current-password" required
43                           class="h-11 w-full rounded-lg border border-zinc-300 bg-white py-2.5 pl-4 pr-11 text-sm text-zinc-800 placeholder:text-zinc-400 focus:border-blue-300 focus:outline-none focus:ring-4 focus:ring-blue-500/10"
44                           placeholder="přístupové heslo">
45                    <button type="button" @click="showPassword = !showPassword" class="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 text-xs">
46                        <span x-show="!showPassword">Zobrazit</span>
47                        <span x-show="showPassword">Skrýt</span>
48                    </button>
49                </div>
50            </div>
51
52            <div class="flex items-center justify-between">
53                <label class="flex items-center gap-2 text-sm text-zinc-700">
54                    <input type="checkbox" name="_remember_me" class="rounded border-zinc-300 text-blue-600 focus:ring-blue-500" />
55                    <span>pamatovat si přihlášení</span>
56                </label>
57                <a href="/zapomenute-heslo" class="text-sm font-medium text-[var(--brand-500)] hover:text-[var(--brand-600)]">Zapomenuté heslo?</a>
58            </div>
59
60            <input type="hidden" name="_csrf_token" value="229605d.ZkruMmv8neHbMZ_MdeF7sBlmSpoPTk6ibDv18jJ7ZCk.NSuqeQ-br5OoX934HNZW01ZRANhfIX6UCGqvn2ZKDGIvH9p1DcStuJVk0g">
61
62            <button type="submit" class="w-full rounded-lg bg-[var(--brand-500)] px-4 py-3 text-sm font-medium text-white transition hover:bg-[var(--brand-600)]">
63                Přihlásit se
64            </button>
65        </form>
66    </div>
67        </div>
68    </div>
69
70    <div class="hidden h-full lg:block lg:w-1/2 overflow-hidden">
71        <img src="/build/images/security/login-fancy-bg.svg" alt="Login background" class="h-full w-full object-cover" />
72    </div>
73</div>
74</body>
75</html>