Modulo di accesso e registrazione (HTML, CSS, JS)

750 Metehan

Apri nell'Editor Pubblica il Tuo Codice

Modulo di accesso e registrazione (HTML, CSS, JS)

Consigliato

22 August 2025

Commento segnaposto codice HTML

23 June 2025

Esempio di modulo di accesso HTML

25 August 2025

Struttura del contenitore di animazione HTML

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giriş & Kayıt Formu</title>
    
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #1c1c1c; /* Dark background for neon effect */
            overflow: hidden;
        }

/* Neon glow background effect */
        body::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 600px;
            height: 600px;
            background: linear-gradient(45deg, #ff003c, #ffdd00);
            border-radius: 50%;
            filter: blur(150px);
            opacity: 0.5;
        }

.container {
            position: relative;
            background: rgba(255, 255, 255, 0.05); /* Glassmorphism effect */
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            width: 700px;
            min-height: 450px;
            overflow: hidden; /* Hide overflowing toggle panel */
        }

.container p {
            color: #ccc;
            font-size: 14px;
            margin: 15px 0;
        }

.container a {
            color: #fff;
            font-size: 14px;
            text-decoration: none;
            margin: 15px 0;
            font-weight: 500;
        }

.container a:hover {
            text-decoration: underline;
        }

.container button {
            border-radius: 20px;
            border: 1px solid #ff003c;
            background-color: #ff003c;
            color: #ffffff;
            font-size: 12px;
            font-weight: bold;
            padding: 12px 45px;
            letter-spacing: 1px;
            text-transform: uppercase;
            cursor: pointer;
            transition: transform 80ms ease-in, background-color 0.3s ease, box-shadow 0.3s ease;
        }

.container button:active {
            transform: scale(0.95);
        }

.container button:focus {
            outline: none;
        }
        
        .container button:hover {
            background-color: #ffdd00;
            border-color: #ffdd00;
            color: #1c1c1c;
            box-shadow: 0 0 20px #ffdd00;
        }

.container button.ghost {
            background-color: transparent;
            border-color: #ffffff;
        }
        
        .container button.ghost:hover {
            background-color: #fff;
            color: #1c1c1c;
            box-shadow: 0 0 20px #fff;
        }

.container form {
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 50px;
            height: 100%;
            text-align: center;
        }

.container input {
            background-color: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 10px;
            padding: 12px 15px;
            margin: 8px 0;
            width: 100%;
            color: #fff;
            outline: none;
            border: 1px solid transparent;
            transition: border-color 0.3s ease;
        }

.container input::placeholder {
            color: #ccc;
        }

.container input:focus {
            border-color: #ffdd00;
        }

h1 {
            font-weight: bold;
            margin: 0;
            color: #fff;
            text-shadow: 0 0 10px #ff003c;
        }

.form-container {
            position: absolute;
            top: 0;
            height: 100%;
            transition: all 0.6s ease-in-out;
        }

.sign-in-container {
            left: 0;
            width: 50%;
            z-index: 2;
        }

.container.right-panel-active .sign-in-container {
            transform: translateX(100%);
            opacity: 0;
        }

.sign-up-container {
            left: 0;
            width: 50%;
            opacity: 0;
            z-index: 1;
        }

.container.right-panel-active .sign-up-container {
            transform: translateX(100%);
            opacity: 1;
            z-index: 5;
            animation: show 0.6s;
        }

@keyframes show {
            0%, 49.99% {
                opacity: 0;
                z-index: 1;
            }
            50%, 100% {
                opacity: 1;
                z-index: 5;
            }
        }

.overlay-container {
            position: absolute;
            top: 0;
            left: 50%;
            width: 50%;
            height: 100%;
            overflow: hidden;
            transition: transform 0.6s ease-in-out;
            z-index: 100;
        }

.container.right-panel-active .overlay-container {
            transform: translateX(-100%);
        }

.overlay {
            background: #ff003c;
            background: -webkit-linear-gradient(to right, #ffdd00, #ff003c);
            background: linear-gradient(to right, #ffdd00, #ff003c);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 0 0;
            color: #ffffff;
            position: relative;
            left: -100%;
            height: 100%;
            width: 200%;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
        }

.container.right-panel-active .overlay {
            transform: translateX(50%);
        }

.overlay-panel {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            padding: 0 40px;
            text-align: center;
            top: 0;
            height: 100%;
            width: 50%;
            transform: translateX(0);
            transition: transform 0.6s ease-in-out;
        }
        
        .overlay-panel h1 {
            text-shadow: none;
        }

.overlay-left {
            transform: translateX(-20%);
        }

.container.right-panel-active .overlay-left {
            transform: translateX(0);
        }

.overlay-right {
            right: 0;
            transform: translateX(0);
        }

.container.right-panel-active .overlay-right {
            transform: translateX(20%);
        }

.social-container {
            margin: 20px 0;
        }

.social-container a {
            border: 1px solid #dddddd;
            border-radius: 50%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin: 0 5px;
            height: 40px;
            width: 40px;
            color: #fff;
            transition: all 0.3s ease;
        }

.social-container a:hover {
            color: #1c1c1c;
            background-color: #fff;
            border-color: #fff;
            transform: scale(1.1);
            box-shadow: 0 0 15px #fff;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .container {
                width: 95%;
                max-width: 450px;
            }
            .overlay-container {
                display: none;
            }
            .form-container {
                width: 100%;
            }
            .sign-in-container {
                opacity: 1;
                z-index: 2;
            }
            .sign-up-container {
                opacity: 0;
                z-index: 1;
            }
            .container.right-panel-active .sign-in-container {
                transform: none;
                opacity: 0;
                z-index: 1;
            }
            .container.right-panel-active .sign-up-container {
                transform: none;
                opacity: 1;
                z-index: 2;
            }
            
            /* We will use JS to toggle a class for mobile view */
            .mobile-toggle-panel {
                display: block;
                padding: 20px;
                text-align: center;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                background: rgba(0,0,0,0.3);
            }
        }
        
        @media (min-width: 769px) {
            .mobile-toggle-panel {
                display: none;
            }
        }

</style>
</head>
<body>

<div class="container" id="container">
        
        <div class="form-container sign-up-container">
            <form action="#">
                <h1>Hesap Oluştur</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <p>veya kayıt için e-postanızı kullanın</p>
                <input type="text" placeholder="Adınız" />
                <input type="email" placeholder="E-posta" />
                <input type="password" placeholder="Şifre" />
                <a href="mailto:cengizalagoz60@gmail.com">Şifremi Unuttum</a>
                <button>Kayıt Ol</button>
            </form>
        </div>
        
        
        <div class="form-container sign-in-container">
            <form action="#">
                <h1>Giriş Yap</h1>
                <div class="social-container">
                    <a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
                    <a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
                    <a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
                </div>
                <p>veya hesabınızı kullanın</p>
                <input type="email" placeholder="E-posta" />
                <input type="password" placeholder="Şifre" />
                <a href="mailto:cengizalagoz60@gmail.com">Şifremi Unuttum</a>
                <button>Giriş Yap</button>
            </form>
        </div>
        
        
        <div class="overlay-container">
            <div class="overlay">
                <div class="overlay-panel overlay-left">
                    <h1>Tekrar Hoşgeldin!</h1>
                    <p>Giriş yapmak ve bizimle bağlantıda kalmak için lütfen kişisel bilgilerinizi girin.</p>
                    <button class="ghost" id="signIn">Giriş Yap</button>
                </div>
                <div class="overlay-panel overlay-right">
                    <h1>Merhaba!</h1>
                    <p>Kişisel bilgilerinizi girin ve bizimle yolculuğa başlayın.</p>
                    <button class="ghost" id="signUp">Kayıt Ol</button>
                </div>
            </div>
        </div>
        
        
        <div class="mobile-toggle-panel">
             <p id="mobile-text">Hesabın yok mu? <a href="#" id="mobile-toggle-btn">Kayıt Ol</a></p>
        </div>
    </div>

// Desktop toggle
        signUpButton.addEventListener('click', () => {
            container.classList.add("right-panel-active");
        });

signInButton.addEventListener('click', () => {
            container.classList.remove("right-panel-active");
        });
        
        // Mobile toggle
        mobileToggleBtn.addEventListener('click', (e) => {
            e.preventDefault();
            container.classList.toggle("right-panel-active");
            
            if (container.classList.contains("right-panel-active")) {
                mobileText.innerHTML = 'Zaten hesabın var mı? <a href="#" id="mobile-toggle-btn">Giriş Yap</a>';
            } else {
                mobileText.innerHTML = 'Hesabın yok mu? <a href="#" id="mobile-toggle-btn">Kayıt Ol</a>';
            }
            
            // Re-assign the event listener to the new link
            document.getElementById('mobile-toggle-btn').addEventListener('click', arguments.callee);
        });

</script>

</body>
</html>

Consigliato

Commento segnaposto codice HTML

Esempio di modulo di accesso HTML

Struttura del contenitore di animazione HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS