Formulaire de connexion et d'inscription avec arrière-plan 3D

Ouvrir dans l'éditeur Publiez votre code

Recommandé

9 September 2024

CodePen Accueil Étoiles et vitesse de distorsion

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>

Formulaire de connexion et d'inscription avec arrière-plan 3D

Recommandé

Générateur de mot de passe

Un code par alejandrokundrah

CodePen Accueil Étoiles et vitesse de distorsion

HTML

CSS

JS

Recommandé

Générateur de mot de passe

Un code par alejandrokundrah

CodePen Accueil Étoiles et vitesse de distorsion

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS