Formulario de inicio de sesión y registro con fondo 3D

422 Metehan

Abrir en el editor Publica tu código

Formulario de inicio de sesión y registro con fondo 3D

Recomendado

16 July 2025

Formulario de inicio de sesión de Glassmorphic

15 May 2025

Mensaje de motivación

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Andev Web | Profesyonel Giriş & Kayıt</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">

<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">

:root {
            --primary-color: #ffffff;
            --secondary-color: #e0e0e0;
            --dark-color: #000000;
            --accent-color: #a27bfa;
            --purple-light: #c4b5fd;
        }

body {
            height: 100vh;
            width: 100%;
            overflow: hidden; /* Sayfa kaydırmasını engeller */
            background-color: #1a1a2e; /* 3D sahne yüklenemezse diye bir yedek renk */
        }

/* --- 3D ARKA PLAN İÇİN CANVAS --- */
        #bg-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Canvas'ı en arkaya gönderir */
        }

a {
            text-decoration: none;
            color: var(--accent-color);
            font-weight: 500;
        }

a:hover {
            text-decoration: underline;
        }

/* --- ANA GİRİŞ KUTUSU WRAPPER --- */
        .wrapper {
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            perspective: 1000px; /* 3D dönüş efekti için */
        }

/* --- DÖNÜŞ ANİMASYONU İÇİN KUTU --- */
        .login-box {
            position: relative;
            width: 420px;
            min-height: 600px; /* Sosyal medya ikonları için yükseklik artırıldı */
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        
        .login-box.flipped {
            transform: rotateY(180deg);
        }
        
        /* --- FORM KUTULARI (ÖN VE ARKA YÜZ) --- */
        .form-box {
            position: absolute;
            width: 100%;
            height: 100%;
            background: rgba(26, 26, 46, 0.25);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 6.5em 3em 3em 3em;
            color: var(--secondary-color);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
            backface-visibility: hidden; /* Arkada kalan yüzü gizler */
            display: flex;
            flex-direction: column;
        }
        
        .form-box.register {
            transform: rotateY(180deg); /* Kayıt formunu arkaya döndürür */
        }

/* --- ÜSTTEN ÇIKAN BAŞLIK --- */
        .login-header {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-color);
            width: 160px;
            height: 70px;
            border-radius: 0 0 20px 20px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }

.login-header span {
            font-size: 30px;
            color: var(--dark-color);
            font-weight: 600;
        }
        
        .login-header::before, .login-header::after {
            content: "";
            position: absolute;
            top: 0;
            width: 30px;
            height: 30px;
            background: transparent;
        }

.login-header::before {
            left: -30px;
            border-top-right-radius: 100%;
            box-shadow: 15px 0 0 0 var(--primary-color);
        }

.login-header::after {
            right: -30px;
            border-top-left-radius: 100%;
            box-shadow: -15px 0 0 0 var(--primary-color);
        }

/* --- GİRDİ ALANLARI --- */
        .input-box {
            position: relative;
            display: grid;
            grid-template-columns: max-content 1fr;
            align-items: center;
            column-gap: 0.75rem;
            border-bottom: 2px solid rgba(255, 255, 255, 0.3);
            margin: 15px 0; /* Margin azaltıldı */
        }

.input-icon, .input-eye {
            font-size: 1.25rem;
            color: var(--primary-color);
        }
        
        .input-field {
            width: 100%;
            height: 45px;
            background: none;
            border: none;
            outline: none;
            font-size: 1rem;
            color: var(--primary-color);
            position: relative;
            z-index: 1;
        }

.input-box-container {
            position: relative;
        }
        
        .label {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 500;
            color: var(--secondary-color);
            pointer-events: none;
            transition: top 0.3s, font-size 0.3s, color 0.3s;
        }
        
        .input-eye {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            cursor: pointer;
        }
        
        .input-field:focus + .label,
        .input-field:not(:placeholder-shown) + .label {
            top: -10px;
            font-size: 0.8rem;
            color: var(--accent-color);
        }

.remember-forgot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            margin: 1rem 0 1.5rem 0;
        }

.remember-me {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        #remember-me-checkbox {
            width: 16px;
            height: 16px;
            accent-color: var(--accent-color);
        }

.input-submit {
            width: 100%;
            height: 50px;
            background: var(--primary-color);
            color: var(--dark-color);
            font-size: 1rem;
            font-weight: 600;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            transition: 0.3s;
        }

.input-submit:hover {
            background: var(--accent-color);
            color: var(--primary-color);
        }
        
        /* --- SOSYAL MEDYA GİRİŞ BÖLÜMÜ --- */
        .social-media-box {
            text-align: center;
            margin: 20px 0;
            font-size: 0.85rem;
        }

.social-media-box span {
            display: block;
            margin-bottom: 15px;
            color: var(--secondary-color);
        }

.social-icons {
            display: flex;
            justify-content: center;
            gap: 15px;
        }

.social-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            height: 45px;
            border: 2px solid var(--secondary-color);
            border-radius: 50%;
            color: var(--secondary-color);
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }

.social-icon:hover {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: var(--primary-color);
            transform: translateY(-3px);
            text-decoration: none;
        }

/* --- GEÇİŞ LİNKLERİ (KAYIT OL / GİRİŞ YAP) --- */
        .switch-link {
            text-align: center;
            font-size: 0.9rem;
            margin-top: auto; /* En alta iter */
        }
        
        .switch-link a {
            cursor: pointer;
        }

@media screen and (max-width: 450px) {
            .login-box {
                width: 100%;
                min-height: 580px;
            }
            .form-box {
                padding: 6.5em 1.5em 3em 1.5em;
            }
        }
    </style>
</head>
<body>
    
    <canvas id="bg-canvas"></canvas>

<div class="wrapper">
        <div class="login-box" id="login-box">
            
            
            <div class="form-box login">
                <div class="login-header">
                    <span>Giriş Yap</span>
                </div>
                <form action="https://www.web-leb.com/en" target="_blank">
                    <div class="input-box">
                        <i class="ri-mail-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="email" id="login-email" class="input-field" placeholder=" " required>
                            <label for="login-email" class="label">E-posta</label>
                        </div>
                    </div>
                    <div class="input-box">
                        <i class="ri-lock-2-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="password" id="login-pass" class="input-field" placeholder=" " required>
                            <label for="login-pass" class="label">Şifre</label>
                            <i class="ri-eye-off-line input-eye" id="login-eye"></i>
                        </div>
                    </div>
                    <div class="remember-forgot">
                        <div class="remember-me">
                            <input type="checkbox" id="remember-me-checkbox">
                            <label for="remember-me-checkbox">Beni Hatırla</label>
                        </div>
                        <a href="#">Şifreni mi unuttun?</a>
                    </div>
                    <button type="submit" class="input-submit">Giriş Yap</button>
                    <div class="social-media-box">
                        <span>veya sosyal medya ile devam et</span>
                        <div class="social-icons">
                            <a href="https://accounts.google.com/" target="_blank" class="social-icon"><i class="ri-google-fill"></i></a>
                            <a href="https://www.facebook.com/login/" target="_blank" class="social-icon"><i class="ri-facebook-fill"></i></a>
                            <a href="https://github.com/login" target="_blank" class="social-icon"><i class="ri-github-fill"></i></a>
                        </div>
                    </div>
                    <div class="switch-link">
                        <span>Hesabın yok mu? <a id="register-link">Kayıt Ol</a></span>
                    </div>
                </form>
            </div>

<div class="form-box register">
                <div class="login-header">
                    <span>Kayıt Ol</span>
                </div>
                <form action="https://www.web-leb.com/en" target="_blank">
                     <div class="input-box">
                        <i class="ri-user-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="text" id="reg-user" class="input-field" placeholder=" " required>
                            <label for="reg-user" class="label">Kullanıcı Adı</label>
                        </div>
                    </div>
                    <div class="input-box">
                        <i class="ri-mail-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="email" id="reg-email" class="input-field" placeholder=" " required>
                            <label for="reg-email" class="label">E-posta</label>
                        </div>
                    </div>
                    <div class="input-box">
                        <i class="ri-lock-2-line input-icon"></i>
                        <div class="input-box-container">
                            <input type="password" id="reg-pass" class="input-field" placeholder=" " required>
                            <label for="reg-pass" class="label">Şifre</label>
                            <i class="ri-eye-off-line input-eye" id="reg-eye"></i>
                        </div>
                    </div>
                    <button type="submit" class="input-submit">Kayıt Ol</button>
                    <div class="social-media-box">
                        <span>veya sosyal medya ile devam et</span>
                        <div class="social-icons">
                             <a href="https://accounts.google.com/" target="_blank" class="social-icon"><i class="ri-google-fill"></i></a>
                             <a href="https://www.facebook.com/login/" target="_blank" class="social-icon"><i class="ri-facebook-fill"></i></a>
                             <a href="https://github.com/login" target="_blank" class="social-icon"><i class="ri-github-fill"></i></a>
                        </div>
                    </div>
                    <div class="switch-link">
                        <span>Zaten hesabın var mı? <a id="login-link">Giriş Yap</a></span>
                    </div>
                </form>
            </div>

</div>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

registerLink.addEventListener('click', () => {
            loginBox.classList.add('flipped');
        });

loginLink.addEventListener('click', () => {
            loginBox.classList.remove('flipped');
        });

// --- ŞİFRE GÖSTER/GİZLE FONKSİYONLARI ---
        function setupPasswordToggle(inputId, eyeId) {
            const passwordInput = document.getElementById(inputId);
            const eyeIcon = document.getElementById(eyeId);
            if (!passwordInput || !eyeIcon) return;

eyeIcon.addEventListener('click', () => {
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    eyeIcon.classList.replace('ri-eye-off-line', 'ri-eye-line');
                } else {
                    passwordInput.type = 'password';
                    eyeIcon.classList.replace('ri-eye-line', 'ri-eye-off-line');
                }
            });
        }
        setupPasswordToggle('login-pass', 'login-eye');
        setupPasswordToggle('reg-pass', 'reg-eye');

// --- 3D ARKA PLAN ANİMASYONU ---
        let scene, camera, renderer, shapes = [];
        const canvas = document.getElementById('bg-canvas');

function init() {
            scene = new THREE.Scene();
            
            const loader = new THREE.TextureLoader();
            loader.load('https://i.postimg.cc/5N1bYVz7/night-city.jpg', function(texture) {
                texture.encoding = THREE.sRGBEncoding;
                scene.background = texture;
            });

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 7;

renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true, alpha: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.outputEncoding = THREE.sRGBEncoding;

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
            scene.add(ambientLight);
            
            const pointLight1 = new THREE.PointLight(0xffffff, 1.2);
            pointLight1.position.set(5, 10, 10);
            scene.add(pointLight1);
            
            const pointLight2 = new THREE.PointLight(0xa27bfa, 2);
            pointLight2.position.set(-10, -5, -5);
            scene.add(pointLight2);

const geometries = [
                new THREE.IcosahedronGeometry(1, 0),
                new THREE.TorusKnotGeometry(0.8, 0.25, 100, 16),
                new THREE.DodecahedronGeometry(1.2, 0),
                new THREE.TorusGeometry(0.8, 0.3, 16, 100),
            ];

for (let i = 0; i < 20; i++) { 
                const geometry = geometries[Math.floor(Math.random() * geometries.length)];
                const material = new THREE.MeshStandardMaterial({
                    color: new THREE.Color(Math.random(), Math.random(), Math.random()),
                    metalness: 0.9,
                    roughness: 0.1,
                    envMap: scene.background,
                });
                const shape = new THREE.Mesh(geometry, material);

shape.position.set(
                    (Math.random() - 0.5) * 25,
                    (Math.random() - 0.5) * 25,
                    (Math.random() - 0.5) * 25
                );

shape.rotation.set(
                    Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI
                );

const scale = Math.random() * 0.5 + 0.5;
                shape.scale.set(scale, scale, scale);
                
                shapes.push(shape);
                scene.add(shape);
            }

window.addEventListener('resize', onWindowResize, false);
            document.addEventListener('mousemove', onMouseMove, false);
        }

let mouseX = 0, mouseY = 0;
        function onMouseMove(event) {
            mouseX = (event.clientX - window.innerWidth / 2) / 100;
            mouseY = (event.clientY - window.innerHeight / 2) / 100;
        }

function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function animate() {
            requestAnimationFrame(animate);

camera.position.x += (mouseX - camera.position.x) * 0.05;
            camera.position.y += (-mouseY - camera.position.y) * 0.05;
            camera.lookAt(scene.position);

shapes.forEach(shape => {
                shape.rotation.x += 0.001;
                shape.rotation.y += 0.0015;
            });
            
            renderer.render(scene, camera);
        }

init();
        animate();
    </script>
</body>
</html>

Formulario de inicio de sesión y registro con fondo 3D

Recomendado

Formulario de inicio de sesión de Glassmorphic

Un código de kouadioarmel055

Mensaje de motivación

HTML

CSS

JS

Recomendado

Formulario de inicio de sesión de Glassmorphic

Un código de kouadioarmel055

Mensaje de motivación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS