Un codice di bachir123

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

5 June 2025

Un codice di youssefdahroug2005

7 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Futuristic AI Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #111;
            font-family: 'Poppins', sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: #fff;
     	    overfolow:hidden;
        }

.login-container {
            width: 350px;
            padding: 30px;
            border-radius: 15px;
            background: black;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
            backdrop-filter: blur(10px);
      
        }

h1 {
            font-size: 30px;
            margin-bottom: 20px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: white;
        }

.input-field {
            margin-bottom: 20px;
            position: relative;
        }

.input-field input {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            color: black;
            font-size: 16px;
            outline: none;
            box-sizing: border-box;
            transition: all 0.3s ease-in-out;
        }

.input-field input:focus {
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid #6a3edc;
        }

.login-btn {
            width: 100%;
            padding: 12px;
            background: #6a3edc;
            color: black;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.login-btn:hover {
            background: #3b4cca;
            transform: scale(1.05);
        }

.forgot-password {
            margin-top: 10px;
            font-size: 14px;
            color: #ccc;
            text-decoration: none;
            transition: color 0.3s ease;
        }

.forgot-password:hover {
            color: #fff;
        }

.background-effect {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.15), rgba(0, 0, 0, 0.6));
            z-index: -1;
            animation: pulse 3s infinite;
        }

@keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.0);
            }
            100% {
                transform: scale(1);
            }
        }

.animate-border {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 15px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            animation: border-animation 3s infinite;
        }

@keyframes border-animation {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>
</head>
<body>

<div class="login-container">
    <div class="animate-border"></div>
    <h1>Login</h1>
    <div class="input-field">
        <input type="text" id="username" placeholder="Username" required>
    </div>
    <div class="input-field">
        <input type="password" id="password" placeholder="Password" required>
    </div>
    <button class="login-btn" onclick="login()">Log In</button>
    <a href="#" class="forgot-password">Forgot password?</a>
</div>

if (username === "" || password === "") {
            alert("Please fill out both fields.");
        } else {
            alert("Login Successful!");
        }
    }
</script>

</body>
</html>

Un codice di bachir123

Consigliato

Un codice di yuhhxn

Un codice di youssefdahroug2005

Un codice di alejandrokundrah

HTML

CSS

JS

Consigliato

Un codice di yuhhxn

Un codice di youssefdahroug2005

Un codice di alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS