3D पृष्ठभूमि के साथ लॉगिन और पंजीकरण फ़ॉर्म

624 Metehan

संपादक में खोलें अपना कोड प्रकाशित करें

3D पृष्ठभूमि के साथ लॉगिन और पंजीकरण फ़ॉर्म

अनुशंसित

10 August 2024

HTML लॉगिन फॉर्म कोड

4 July 2025

वॉयस लैब लॉगिन पेज: गूगल साइन-इन और ईमेल फॉर्म

20 September 2025

HTML सूरजमुखी लॉगिन फ़ॉर्म टेम्पलेट

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>

3D पृष्ठभूमि के साथ लॉगिन और पंजीकरण फ़ॉर्म

अनुशंसित

HTML लॉगिन फॉर्म कोड

वॉयस लैब लॉगिन पेज: गूगल साइन-इन और ईमेल फॉर्म

HTML सूरजमुखी लॉगिन फ़ॉर्म टेम्पलेट

HTML

CSS

JS

अनुशंसित

HTML लॉगिन फॉर्म कोड

वॉयस लैब लॉगिन पेज: गूगल साइन-इन और ईमेल फॉर्म

HTML सूरजमुखी लॉगिन फ़ॉर्म टेम्पलेट

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS