index.html - master - quantvector/Frontend-web

index.html
307 строк10 KB
YRM
Initial commit
04 май 2026, 21:47
04 май 2026, 21:4785bd8bf
<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto Auth</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: 'Segoe UI', sans-serif;
            background: #09090B;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        /* Animated neon background */
        body::before {
            content: "";
            position: absolute;
            width: 200%;
            height: 200%;
            background: repeating-linear-gradient(120deg,
                    rgba(139, 92, 246, 0.08) 0px,
                    rgba(139, 92, 246, 0.08) 2px,
                    transparent 2px,
                    transparent 80px);
            animation: moveBg 20s linear infinite;
        }

        @keyframes moveBg {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(-200px, -200px);
            }
        }

        /* Glass card */
        .card {
            position: relative;
            width: 420px;
            padding: 40px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(25px);
            box-shadow: 0 0 60px rgba(139, 92, 246, 0.25);
            z-index: 2;
        }

        /* Tabs */
        .tabs {
            display: flex;
            position: relative;
            margin-bottom: 30px;
        }

        .tab {
            flex: 1;
            text-align: center;
            padding: 12px;
            cursor: pointer;
            color: #aaa;
            transition: 0.3s;
        }

        .tab.active {
            color: #8B5CF6;
        }

        /* Sliding indicator */
        .indicator {
            position: absolute;
            bottom: 0;
            height: 2px;
            width: 50%;
            background: #8B5CF6;
            transition: transform 0.4s ease;
        }

        .indicator.right {
            transform: translateX(100%);
        }

        /* Forms container */
        .forms {
            position: relative;
            height: 230px;
            overflow: hidden;
        }

        /* Forms */
        form {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            display: flex;
            flex-direction: column;
            transition: transform 0.4s ease, opacity 0.4s ease;
        }

        form.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #loginForm {
            transform: translateX(0);
        }

        #registerForm {
            transform: translateX(100%);
        }

        .forms.show-register #loginForm {
            transform: translateX(-100%);
            opacity: 0;
        }

        .forms.show-register #registerForm {
            transform: translateX(0);
            opacity: 1;
        }

        /* Inputs */
        input {
            margin-bottom: 14px;
            padding: 12px;
            border-radius: 10px;
            border: none;
            background: rgba(255, 255, 255, 0.08);
            color: white;
            font-size: 14px;
        }

        input::placeholder {
            color: #888;
        }

        /* Button */
        button {
            padding: 14px;
            border: none;
            border-radius: 12px;
            background: #8B5CF6;
            color: white;
            font-size: 15px;
            cursor: pointer;
            transition: 0.3s;
        }

        button:hover {
            box-shadow: 0 0 20px #8B5CF6;
            transform: translateY(-2px);
        }
    </style>
</head>

<body>

    <div class="card">
        <div class="tabs">
            <div class="tab active" id="loginTab">Логин</div>
            <div class="tab" id="registerTab">Регистрация</div>
            <div class="indicator" id="indicator"></div>
        </div>

        <div class="forms" id="forms">
            <!-- Login -->
            <form id="loginForm">
                <input type="email" id="loginEmail" placeholder="Email" required>
                <input type="password" id="loginPassword" placeholder="Пароль" required>
                <button type="submit">Войти</button>
            </form>

            <!-- Register -->
            <form id="registerForm">
                <input type="text" id="registerLogin" placeholder="Логин" required>
                <input type="email" id="registerEmail" placeholder="Email" required>
                <input type="password" id="registerPassword" placeholder="Пароль" required>
                <button type="submit">Создать аккаунт</button>
            </form>
        </div>
    </div>

    <script>
        const loginTab = document.getElementById("loginTab");
        const registerTab = document.getElementById("registerTab");
        const forms = document.getElementById("forms");
        const indicator = document.querySelector(".indicator"); // Исправил получение индикатора

        // Переключение вкладок
        loginTab.onclick = () => {
            loginTab.classList.add("active");
            registerTab.classList.remove("active");
            forms.classList.remove("show-register");
            indicator.classList.remove("right");
        };

        registerTab.onclick = () => {
            registerTab.classList.add("active");
            loginTab.classList.remove("active");
            forms.classList.add("show-register");
            indicator.classList.add("right");
        };

        // === ЛОГИН ===
        document.getElementById("loginForm").addEventListener("submit", async (e) => {
            e.preventDefault();

            const email = document.getElementById("loginEmail").value;
            const password = document.getElementById("loginPassword").value;

            try {
                // Исправлен URL (убрано &quot;)
                const res = await fetch("http://100.96.16.111:8080/api/login", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        platform: "web", // или "mobile", если сервер строго требует именно это слово
                        auth_data: {
                            email: email,
                            password: password
                            // При логине поле "login" обычно не отправляется, но если сервер требует, можно добавить: login: ""
                        }
                    })
                });

                const data = await res.json();

                if (data.status === "success") {
                    // СОХРАНЯЕМ ДАННЫЕ ДЛЯ ДАШБОРДА
                    localStorage.setItem("token", data.token);
                    localStorage.setItem("userEmail", email);

                    // Вытаскиваем имя из почты (всё что до @), так как при логине мы не знаем логин
                    const tempLogin = email.split('@')[0];
                    localStorage.setItem("userLogin", tempLogin);

                    window.location.href = "dashboard.html";
                } else {
                    alert(data.message || "Ошибка входа");
                }

            } catch (error) {
                console.error(error);
                alert("Сервер недоступен");
            }
        });

        // === РЕГИСТРАЦИЯ ===
        document.getElementById("registerForm").addEventListener("submit", async (e) => {
            e.preventDefault();

            const login = document.getElementById("registerLogin").value;
            const email = document.getElementById("registerEmail").value;
            const password = document.getElementById("registerPassword").value;

            try {
                // Исправлен URL (убрано &quot;)
                const res = await fetch("http://100.96.16.111:8080/api/register", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        platform: "web", // или "mobile"
                        auth_data: {
                            email: email,
                            password: password,
                            login: login // Отправляем логин, как требует JSON-схема
                        }
                    })
                });

                const data = await res.json();

                if (data.status === "success") {
                    // СОХРАНЯЕМ ДАННЫЕ ДЛЯ ДАШБОРДА
                    localStorage.setItem("token", data.token);
                    localStorage.setItem("userEmail", email);
                    localStorage.setItem("userLogin", login);

                    window.location.href = "dashboard.html";
                } else {
                    alert(data.message || "Ошибка регистрации");
                }

            } catch (error) {
                console.error(error);
                alert("Сервер недоступен");
            }
        });
    </script>

</body>

</html>