FusionLab • Login


    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
            overflow: hidden;
            font-family: 'Inter', sans-serif;
            background: #0f0f0f;
        }

        #bgCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
        }

        .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            width: 100%;
            max-width: 400px;
            padding: 2rem;
            box-sizing: border-box;
            text-align: center;
            background: rgba(20, 20, 20, 0.8);
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }

        .login-content {
            animation: fadeIn 1.5s ease-in-out;
        }

        .login-content img {
            width: 150px;
            height: auto;
            margin-bottom: 1rem;
        }

        .login-content h4 {
            font-size: 1.5rem;
            font-weight: 300;
            color: #eee;
            margin-bottom: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
            text-align: left;
        }

        .form-group label {
            display: block;
            color: #ccc;
            margin-bottom: 0.5rem;
        }

        .form-group input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #444;
            border-radius: 8px;
            background: #222;
            color: #fff;
            font-size: 1rem;
        }

        .login-btn {
            width: 100%;
            padding: 1rem;
            font-size: 1.1rem;
            border: none;
            border-radius: 8px;
            background: #00e0ff;
            color: #000;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s ease;
        }

        .login-btn:hover {
            background: #8e2de2;
            color: #fff;
        }

        .error-message {
            color: #ff4d4d;
            margin-top: 1rem;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
         footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
            padding: 1rem;
            color: #888;
            font-size: 0.9rem;
            z-index: 2;
        }
    </style>

    <canvas id="bgCanvas"></canvas>

    <div class="login-container">
        <div class="login-content">
            <img alt="FusionLab Logo" src="/static/studio/fusionlab.png" width="150" height="150">
            <h4>Login to FusionLab</h4>

            <form method="post" id="loginForm">
                <input type="hidden" name="csrfmiddlewaretoken" value="04Oz5OyMICxlx6dStYK8uHRvZ8wZZU5ZSdp6jqCHCaG2ud3nZVpZbBlMlVRMNhHL">
                <div class="form-group">
                    <label for="username">Username</label>
                    <input type="text" name="username" id="username" required>
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" required>
                </div>
                <button type="submit" class="login-btn" id="loginButton">
                    <span class="button-text">Login</span>
                    <span class="spinner" style="display: none;">
                        <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <style>.spinner_ajPY {
                                transform-origin: center;
                                animation: spinner_AtaB .75s infinite linear
                            }

                            @keyframes spinner_AtaB {
                                100% {
                                    transform: rotate(360deg)
                                }
                            }</style>
                            <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
                                  opacity=".25" fill="currentColor"/>
                            <path d="M10.72,19.9a8,8,0,0,1-6.5-9.79A7.77,7.77,0,0,1,10.4,4.16a8,8,0,0,1,9.49,6.52A1.54,1.54,0,0,0,21.38,12h.13a1.37,1.37,0,0,0,1.38-1.54,11,11,0,1,0-12.53,12.53A1.54,1.54,0,0,0,12,21.34h0A1.47,1.47,0,0,0,10.72,19.9Z"
                                  class="spinner_ajPY" fill="currentColor"/>
                        </svg>
                    </span>
                </button>
            </form>

            <style>
                .login-btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 8px;
                }

                .spinner {
                    display: inline-flex;
                    align-items: center;
                }

                .spinner svg {
                    width: 20px;
                    height: 20px;
                }
            </style>

            <script>
                document.getElementById('loginForm').addEventListener('submit', function (e) {
                    const button = document.getElementById('loginButton');
                    const buttonText = button.querySelector('.button-text');
                    const spinner = button.querySelector('.spinner');

                    // Disable button and show spinner
                    button.disabled = true;
                    buttonText.textContent = 'Please Wait, Logging you in...';
                    spinner.style.display = 'inline-flex';

                    // If form is invalid, re-enable the button
                    if (!this.checkValidity()) {
                        button.disabled = false;
                        buttonText.textContent = 'Login';
                        spinner.style.display = 'none';
                    }
                });

                // Handle form submission errors by re-enabling the button
                document.addEventListener('DOMContentLoaded', function () {
                    const errorMessage = document.querySelector('.error-message');
                    if (errorMessage) {
                        const button = document.getElementById('loginButton');
                        const buttonText = button.querySelector('.button-text');
                        const spinner = button.querySelector('.spinner');

                        button.disabled = false;
                        buttonText.textContent = 'Login';
                        spinner.style.display = 'none';
                    }
                });
            </script>

            
        </div>
    </div>
    <!-- Footer -->
    <footer>
        &copy;  FusionLab • Cyberboy Inc • Built for creators, by creators.
    </footer>

    <script>
        // Your existing canvas background animation script here
        const canvas = document.getElementById('bgCanvas');
        const ctx = canvas.getContext('2d');
        let width = window.innerWidth;
        let height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;

        const numParticles = 80;
        const particles = [];

        for (let i = 0; i < numParticles; i++) {
            particles.push({
                x: Math.random() * width,
                y: Math.random() * height,
                vx: -0.5 + Math.random(),
                vy: -0.5 + Math.random(),
                radius: Math.random() * 2 + 1
            });
        }

        function draw() {
            ctx.clearRect(0, 0, width, height);
            for (let i = 0; i < numParticles; i++) {
                const p = particles[i];
                ctx.beginPath();
                ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255,255,255,0.7)';
                ctx.fill();

                for (let j = i + 1; j < numParticles; j++) {
                    const p2 = particles[j];
                    const dx = p.x - p2.x;
                    const dy = p.y - p2.y;
                    const dist = Math.sqrt(dx * dx + dy * dy);
                    if (dist < 100) {
                        ctx.beginPath();
                        ctx.strokeStyle = 'rgba(255,255,255,0.1)';
                        ctx.moveTo(p.x, p.y);
                        ctx.lineTo(p2.x, p2.y);
                        ctx.stroke();
                    }
                }

                p.x += p.vx;
                p.y += p.vy;

                if (p.x < 0 || p.x > width) p.vx *= -1;
                if (p.y < 0 || p.y > height) p.vy *= -1;
            }
            requestAnimationFrame(draw);
        }

        draw();

        window.addEventListener('resize', () => {
            width = window.innerWidth;
            height = window.innerHeight;
            canvas.width = width;
            canvas.height = height;
        });
    </script>