| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>CorpCRM — Корпоративный сервер</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <style> |
| * { font-family: 'Inter', sans-serif; } |
| |
| |
| ::-webkit-scrollbar { width: 6px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.3); border-radius: 3px; } |
| |
| |
| @keyframes fadeInUp { |
| from { opacity: 0; transform: translateY(24px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| @keyframes slideInLeft { |
| from { opacity: 0; transform: translateX(-30px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| @keyframes pulse-ring { |
| 0% { transform: scale(0.9); opacity: 0.7; } |
| 50% { transform: scale(1.05); opacity: 0.3; } |
| 100% { transform: scale(0.9); opacity: 0.7; } |
| } |
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-8px); } |
| } |
| @keyframes gradient-shift { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
| |
| .animate-fade-in-up { animation: fadeInUp 0.6s ease-out forwards; } |
| .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; } |
| .animate-slide-left { animation: slideInLeft 0.5s ease-out forwards; } |
| .delay-100 { animation-delay: 0.1s; } |
| .delay-200 { animation-delay: 0.2s; } |
| .delay-300 { animation-delay: 0.3s; } |
| .delay-400 { animation-delay: 0.4s; } |
| .delay-500 { animation-delay: 0.5s; } |
| |
| .gradient-bg { |
| background: linear-gradient(-45deg, #0f172a, #1e293b, #0c4a6e, #164e63); |
| background-size: 400% 400%; |
| animation: gradient-shift 15s ease infinite; |
| } |
| |
| .glass-card { |
| background: rgba(255, 255, 255, 0.03); |
| backdrop-filter: blur(20px); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| } |
| |
| .input-field { |
| background: rgba(15, 23, 42, 0.6); |
| border: 1px solid rgba(100, 116, 139, 0.2); |
| transition: all 0.3s ease; |
| } |
| .input-field:focus { |
| background: rgba(15, 23, 42, 0.8); |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); |
| } |
| .input-field:hover:not(:focus) { |
| border-color: rgba(100, 116, 139, 0.4); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #2563eb, #3b82f6); |
| transition: all 0.3s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| .btn-primary::before { |
| content: ''; |
| position: absolute; |
| top: 0; left: -100%; |
| width: 100%; height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); |
| transition: left 0.5s ease; |
| } |
| .btn-primary:hover::before { left: 100%; } |
| .btn-primary:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35); |
| } |
| .btn-primary:active { transform: translateY(0); } |
| .btn-primary:disabled { |
| opacity: 0.6; |
| cursor: not-allowed; |
| transform: none !important; |
| box-shadow: none !important; |
| } |
| |
| .grid-pattern { |
| background-image: |
| linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px); |
| background-size: 40px 40px; |
| } |
| |
| .orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.15; |
| animation: pulse-ring 6s ease-in-out infinite; |
| } |
| |
| .password-strength-bar { |
| transition: width 0.4s ease, background-color 0.4s ease; |
| } |
| |
| .toast { |
| transform: translateX(120%); |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| .toast.show { |
| transform: translateX(0); |
| } |
| |
| . ForgotLink:hover { color: #60a5fa; } |
| |
| |
| .otp-input { |
| width: 52px; height: 60px; |
| text-align: center; |
| font-size: 1.5rem; |
| font-weight: 700; |
| background: rgba(15, 23, 42, 0.6); |
| border: 2px solid rgba(100, 116, 139, 0.2); |
| border-radius: 12px; |
| color: white; |
| transition: all 0.2s ease; |
| outline: none; |
| } |
| .otp-input:focus { |
| border-color: #3b82f6; |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); |
| } |
| .otp-input.filled { |
| border-color: #22c55e; |
| background: rgba(34, 197, 94, 0.08); |
| } |
| |
| |
| .node { |
| width: 10px; height: 10px; |
| background: rgba(59, 130, 246, 0.4); |
| border-radius: 50%; |
| position: absolute; |
| animation: float 4s ease-in-out infinite; |
| } |
| .node::after { |
| content: ''; |
| position: absolute; |
| width: 100%; height: 100%; |
| border-radius: 50%; |
| background: rgba(59, 130, 246, 0.2); |
| transform: scale(2); |
| } |
| </style> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| corp: { |
| 50: '#eff6ff', |
| 100: '#dbeafe', |
| 200: '#bfdbfe', |
| 500: '#3b82f6', |
| 600: '#2563eb', |
| 700: '#1d4ed8', |
| 900: '#1e3a5f', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| </head> |
| <body class="gradient-bg min-h-screen grid-pattern overflow-hidden relative"> |
|
|
| |
| <div class="orb w-96 h-96 bg-blue-500 top-[-10%] left-[-5%]" style="animation-delay: 0s;"></div> |
| <div class="orb w-80 h-80 bg-cyan-500 bottom-[-10%] right-[10%]" style="animation-delay: 2s;"></div> |
| <div class="orb w-64 h-64 bg-indigo-500 top-[40%] right-[-5%]" style="animation-delay: 4s;"></div> |
|
|
| |
| <div id="toastContainer" class="fixed top-6 right-6 z-50 flex flex-col gap-3"></div> |
|
|
| |
| <div class="min-h-screen flex relative z-10"> |
|
|
| |
| <div class="hidden lg:flex lg:w-[55%] flex-col justify-between p-12 relative overflow-hidden"> |
| |
| |
| <div class="node top-[15%] left-[20%]" style="animation-delay: 0.5s;"></div> |
| <div class="node top-[35%] left-[60%]" style="animation-delay: 1.5s;"></div> |
| <div class="node top-[65%] left-[30%]" style="animation-delay: 2.5s;"></div> |
| <div class="node top-[80%] left-[70%]" style="animation-delay: 0.8s;"></div> |
| <div class="node top-[50%] left-[80%]" style="animation-delay: 3s;"></div> |
|
|
| |
| <div class="animate-slide-left"> |
| <div class="flex items-center gap-3 mb-2"> |
| <div class="w-11 h-11 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30"> |
| <i data-lucide="shield-check" class="w-6 h-6 text-white"></i> |
| </div> |
| <span class="text-white font-bold text-2xl tracking-tight">Corp<span class="text-blue-400">CRM</span></span> |
| </div> |
| <p class="text-slate-400 text-sm ml-1">Корпоративная система управления</p> |
| </div> |
|
|
| |
| <div class="flex-1 flex flex-col justify-center max-w-lg"> |
| <h1 class="text-white text-4xl xl:text-5xl font-extrabold leading-tight animate-fade-in-up opacity-0" style="animation-delay: 0.2s;"> |
| Добро пожаловать<br> |
| <span class="bg-gradient-to-r from-blue-400 to-cyan-400 bg-clip-text text-transparent">в рабочее пространство</span> |
| </h1> |
| <p class="text-slate-400 text-lg mt-5 opacity-0 animate-fade-in-up" style="animation-delay: 0.4s;"> |
| Корпоративная CRM-система для работы с клиентами, сделками и задачами. Войдите, чтобы получить доступ к своим инструментам и данным. |
| </p> |
|
|
| |
| <div class="grid grid-cols-3 gap-4 mt-10 opacity-0 animate-fade-in-up" style="animation-delay: 0.6s;"> |
| <div class="glass-card rounded-xl p-4 text-center"> |
| <i data-lucide="users" class="w-5 h-5 text-blue-400 mx-auto mb-2"></i> |
| <div class="text-xs text-slate-400">Клиенты</div> |
| </div> |
| <div class="glass-card rounded-xl p-4 text-center"> |
| <i data-lucide="kanban" class="w-5 h-5 text-cyan-400 mx-auto mb-2"></i> |
| <div class="text-xs text-slate-400">Сделки</div> |
| </div> |
| <div class="glass-card rounded-xl p-4 text-center"> |
| <i data-lucide="bar-chart-3" class="w-5 h-5 text-indigo-400 mx-auto mb-2"></i> |
| <div class="text-xs text-slate-400">Аналитика</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="animate-fade-in opacity-0" style="animation-delay: 0.8s;"> |
| <div class="flex items-center gap-2 text-slate-500 text-xs"> |
| <i data-lucide="lock" class="w-3 h-3"></i> |
| <span>Защищённое соединение • TLS 1.3 • ISO 27001</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="w-full lg:w-[45%] flex items-center justify-center p-6 sm:p-8"> |
| <div class="w-full max-w-md"> |
|
|
| |
| <div class="lg:hidden flex items-center gap-3 mb-8 justify-center animate-fade-in"> |
| <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-cyan-400 rounded-xl flex items-center justify-center shadow-lg shadow-blue-500/30"> |
| <i data-lucide="shield-check" class="w-5 h-5 text-white"></i> |
| </div> |
| <span class="text-white font-bold text-xl tracking-tight">Corp<span class="text-blue-400">CRM</span></span> |
| </div> |
|
|
| |
| <div id="loginForm" class="glass-card rounded-2xl p-8 sm:p-10 animate-fade-in-up opacity-0" style="animation-delay: 0.3s;"> |
| |
| |
| <div class="mb-8"> |
| <h2 class="text-white text-2xl font-bold">Вход в систему</h2> |
| <p class="text-slate-400 mt-2 text-sm">Введите данные для доступа к корпоративному серверу</p> |
| </div> |
|
|
| |
| <div class="flex items-center gap-2 mb-6 px-3 py-2.5 rounded-lg bg-emerald-500/10 border border-emerald-500/20"> |
| <div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div> |
| <span class="text-emerald-400 text-xs font-medium">Сервер доступен</span> |
| <span class="text-slate-500 text-xs ml-auto">v4.2.1</span> |
| </div> |
|
|
| |
| <form id="authForm" onsubmit="return false;" autocomplete="on"> |
| |
| |
| <div class="mb-4"> |
| <label class="block text-slate-300 text-sm font-medium mb-2" for="email"> |
| Электронная почта |
| </label> |
| <div class="relative"> |
| <i data-lucide="mail" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-slate-500 pointer-events-none"></i> |
| <input |
| type="email" |
| id="email" |
| name="email" |
| class="input-field w-full rounded-xl pl-11 pr-4 py-3 text-white text-sm placeholder-slate-500 outline-none" |
| placeholder="name@company.ru" |
| autocomplete="email" |
| required |
| > |
| </div> |
| <p id="emailError" class="text-red-400 text-xs mt-1.5 hidden"> |
| <span class="flex items-center gap-1"><i data-lucide="alert-circle" class="w-3 h-3"></i> Введите корректный email</span> |
| </p> |
| </div> |
|
|
| |
| <div class="mb-4"> |
| <label class="block text-slate-300 text-sm font-medium mb-2" for="password"> |
| Пароль |
| </label> |
| <div class="relative"> |
| <i data-lucide="key-round" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-slate-500 pointer-events-none"></i> |
| <input |
| type="password" |
| id="password" |
| name="password" |
| class="input-field w-full rounded-xl pl-11 pr-12 py-3 text-white text-sm placeholder-slate-500 outline-none" |
| placeholder="••••••••" |
| autocomplete="current-password" |
| required |
| > |
| <button type="button" id="togglePassword" class="absolute right-3.5 top-1/2 -translate-y-1/2 text-slate-500 hover:text-slate-300 transition-colors"> |
| <i data-lucide="eye" class="w-4.5 h-4.5"></i> |
| </button> |
| </div> |
| <p id="passwordError" class="text-red-400 text-xs mt-1.5 hidden"> |
| <span class="flex items-center gap-1"><i data-lucide="alert-circle" class="w-3 h-3"></i> Пароль обязателен</span> |
| </p> |
| </div> |
|
|
| |
| <div id="passwordStrength" class="mb-4 hidden"> |
| <div class="flex items-center justify-between mb-1.5"> |
| <span class="text-xs text-slate-400">Надёжность пароля</span> |
| <span id="strengthLabel" class="text-xs font-medium"></span> |
| </div> |
| <div class="w-full h-1.5 rounded-full bg-slate-700 overflow-hidden"> |
| <div id="strengthBar" class="password-strength-bar h-full rounded-full" style="width: 0%"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex items-center justify-between mb-6"> |
| <label class="flex items-center gap-2.5 cursor-pointer group"> |
| <div class="relative"> |
| <input type="checkbox" id="rememberMe" class="sr-only peer"> |
| <div class="w-4.5 h-4.5 rounded border-2 border-slate-600 peer-checked:border-blue-500 peer-checked:bg-blue-500 transition-all flex items-center justify-center"> |
| <i data-lucide="check" class="w-3 h-3 text-white opacity-0 peer-checked:opacity-100"></i> |
| </div> |
| </div> |
| <span class="text-sm text-slate-400 group-hover:text-slate-300 transition-colors">Запомнить меня</span> |
| </label> |
| <button type="button" onclick="showForgotPassword()" class="text-sm text-blue-400 hover:text-blue-300 transition-colors font-medium"> |
| Забыли пароль? |
| </button> |
| </div> |
|
|
| |
| <button type="submit" id="loginBtn" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-sm flex items-center justify-center gap-2"> |
| <span id="loginBtnText">Войти в систему</span> |
| <i data-lucide="arrow-right" class="w-4 h-4" id="loginBtnIcon"></i> |
| <div id="loginSpinner" class="hidden"> |
| <svg class="animate-spin w-5 h-5 text-white" fill="none" viewBox="0 0 24 24"> |
| <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
| <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
| </svg> |
| </div> |
| </button> |
| </form> |
|
|
| |
| <div class="flex items-center gap-4 my-6"> |
| <div class="flex-1 h-px bg-slate-700/50"></div> |
| <span class="text-slate-500 text-xs">или</span> |
| <div class="flex-1 h-px bg-slate-700/50"></div> |
| </div> |
|
|
| |
| <button onclick="ssoLogin()" class="w-full py-3.5 rounded-xl border border-slate-600/50 text-slate-300 text-sm font-medium hover:bg-slate-700/40 hover:border-slate-500/50 transition-all flex items-center justify-center gap-2.5"> |
| <i data-lucide="fingerprint" class="w-4.5 h-4.5"></i> |
| Войти через SSO |
| </button> |
|
|
| |
| <p class="text-center text-slate-500 text-xs mt-6"> |
| Нет учётной записи? |
| <button onclick="showToast('Обратитесь к администратору для регистрации', 'info')" class="text-blue-400 hover:text-blue-300 transition-colors font-medium"> |
| Запросить доступ |
| </button> |
| </p> |
| </div> |
|
|
| |
| <div id="twoFAForm" class="glass-card rounded-2xl p-8 sm:p-10 hidden"> |
| |
| <div class="text-center mb-8"> |
| <div class="w-16 h-16 bg-blue-500/10 border border-blue-500/20 rounded-2xl flex items-center justify-center mx-auto mb-5"> |
| <i data-lucide="smartphone" class="w-8 h-8 text-blue-400"></i> |
| </div> |
| <h2 class="text-white text-2xl font-bold">Двухфакторная проверка</h2> |
| <p class="text-slate-400 mt-2 text-sm">Введите код из приложения-аутентификатора</p> |
| </div> |
|
|
| <p class="text-slate-400 text-sm text-center mb-6"> |
| Код отправлен на <span id="maskedEmail" class="text-slate-300 font-medium">u***@company.ru</span> |
| </p> |
|
|
| |
| <div class="flex justify-center gap-3 mb-6" id="otpContainer"> |
| <input type="text" maxlength="1" class="otp-input" data-index="0" inputmode="numeric" autocomplete="one-time-code"> |
| <input type="text" maxlength="1" class="otp-input" data-index="1" inputmode="numeric"> |
| <input type="text" maxlength="1" class="otp-input" data-index="2" inputmode="numeric"> |
| <input type="text" maxlength="1" class="otp-input" data-index="3" inputmode="numeric"> |
| <input type="text" maxlength="1" class="otp-input" data-index="4" inputmode="numeric"> |
| <input type="text" maxlength="1" class="otp-input" data-index="5" inputmode="numeric"> |
| </div> |
|
|
| |
| <div class="text-center mb-6"> |
| <p class="text-slate-500 text-xs"> |
| Не получили код? |
| <button id="resendBtn" onclick="resendCode()" class="text-blue-400 hover:text-blue-300 font-medium transition-colors"> |
| Отправить повторно |
| </button> |
| <span id="resendTimer" class="text-slate-400 hidden"> через <span id="timerCount">30</span>с</span> |
| </p> |
| </div> |
|
|
| |
| <button id="verify2FABtn" onclick="verify2FA()" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-sm flex items-center justify-center gap-2"> |
| <span>Подтвердить</span> |
| <i data-lucide="check-circle" class="w-4 h-4"></i> |
| </button> |
|
|
| <button onclick="backToLogin()" class="w-full mt-4 py-3 text-slate-400 text-sm font-medium hover:text-slate-300 transition-colors flex items-center justify-center gap-2"> |
| <i data-lucide="arrow-left" class="w-4 h-4"></i> |
| Вернуться к входу |
| </button> |
| </div> |
|
|
| |
| <div id="forgotPasswordForm" class="glass-card rounded-2xl p-8 sm:p-10 hidden"> |
| |
| <div class="text-center mb-8"> |
| <div class="w-16 h-16 bg-amber-500/10 border border-amber-500/20 rounded-2xl flex items-center justify-center mx-auto mb-5"> |
| <i data-lucide="key" class="w-8 h-8 text-amber-400"></i> |
| </div> |
| <h2 class="text-white text-2xl font-bold">Сброс пароля</h2> |
| <p class="text-slate-400 mt-2 text-sm">Введите email для получения ссылки сброса</p> |
| </div> |
|
|
| <div class="mb-6"> |
| <div class="relative"> |
| <i data-lucide="mail" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4.5 h-4.5 text-slate-500 pointer-events-none"></i> |
| <input |
| type="email" |
| id="resetEmail" |
| class="input-field w-full rounded-xl pl-11 pr-4 py-3 text-white text-sm placeholder-slate-500 outline-none" |
| placeholder="name@company.ru" |
| > |
| </div> |
| </div> |
|
|
| <button onclick="sendResetLink()" class="btn-primary w-full py-3.5 rounded-xl text-white font-semibold text-sm flex items-center justify-center gap-2"> |
| <span>Отправить ссылку</span> |
| <i data-lucide="send" class="w-4 h-4"></i> |
| </button> |
|
|
| <button onclick="backToLogin()" class="w-full mt-4 py-3 text-slate-400 text-sm font-medium hover:text-slate-300 transition-colors flex items-center justify-center gap-2"> |
| <i data-lucide="arrow-left" class="w-4 h-4"></i> |
| Вернуться к входу |
| </button> |
| </div> |
|
|
| |
| <div id="successScreen" class="glass-card rounded-2xl p-8 sm:p-10 hidden"> |
| |
| <div class="text-center"> |
| <div class="w-20 h-20 bg-emerald-500/10 border border-emerald-500/20 rounded-full flex items-center justify-center mx-auto mb |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
