login de bomba

Abrir no Editor Publique Seu Código

Recomendado

16 November 2024

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HACKKEVAKIB LOGIN</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Tektur:wght@400;700&display=swap');
        
        :root {
            --primary: #ff3e00;
            --secondary: #ff9500;
            --dark: #1a1a1a;
            --light: #f0f0f0;
        }
        
        body {
            font-family: 'Tektur', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            margin: 0;
            padding: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-image: 
                radial-gradient(circle at 20% 30%, rgba(255, 62, 0, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, rgba(255, 149, 0, 0.1) 0%, transparent 20%);
        }
        
        .login-container {
            position: relative;
            width: 380px;
            padding: 40px;
            background: rgba(30, 30, 30, 0.8);
            border-radius: 16px;
            box-shadow: 0 0 30px rgba(255, 62, 0, 0.3);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 62, 0, 0.2);
            z-index: 10;
            overflow: hidden;
            transform-style: preserve-3d;
            perspective: 1000px;
        }
        
        .login-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                transparent,
                transparent,
                transparent,
                rgba(255, 62, 0, 0.1)
            );
            transform: rotate(30deg);
            z-index: -1;
        }
        
        .title {
            text-align: center;
            margin-bottom: 30px;
            font-family: 'Black Ops One', cursive;
            font-size: 2.5rem;
            background: linear-gradient(to right, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255, 62, 0, 0.3);
            letter-spacing: 2px;
        }
        
        .input-group {
            position: relative;
            margin-bottom: 25px;
        }
        
        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--secondary);
            z-index: 2;
        }
        
        .form-input {
            width: 100%;
            padding: 15px 15px 15px 45px;
            background: rgba(20, 20, 20, 0.7);
            border: 1px solid rgba(255, 62, 0, 0.3);
            border-radius: 8px;
            color: var(--light);
            font-family: 'Tektur', sans-serif;
            font-size: 1rem;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        
        .form-input:focus {
            outline: none;
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(255, 62, 0, 0.3);
        }
        
        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }
        
        .btn {
            width: 100%;
            padding: 15px;
            background: linear-gradient(45deg, var(--primary), var(--secondary));
            border: none;
            border-radius: 8px;
            color: white;
            font-family: 'Tektur', sans-serif;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: 0.5s;
            z-index: -1;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(255, 62, 0, 0.4);
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn:active {
            transform: translateY(0);
        }
        
        .forgot-link {
            display: block;
            text-align: right;
            margin-top: 10px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .forgot-link:hover {
            color: var(--secondary);
        }
        
        /* Bomba efekti için CSS */
        .explosion {
            position: fixed;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--primary), transparent);
            box-shadow: 0 0 20px var(--primary), 0 0 40px var(--primary);
            transform: scale(0);
            opacity: 0;
            z-index: 100;
            pointer-events: none;
        }
        
        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: var(--secondary);
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
        }
        
        .countdown {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border: 3px solid var(--primary);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--primary);
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s ease;
        }
        
        .countdown.active {
            opacity: 1;
            transform: scale(1);
            animation: pulse 1s infinite alternate;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 62, 0, 0.7); }
            100% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 62, 0, 0); }
        }
        
        .shake {
            animation: shake 0.5s linear;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        
        /* Arkaplan efekti */
        .bg-effect {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            opacity: 0.1;
            background: 
                radial-gradient(circle at 20% 30%, var(--primary) 0%, transparent 20%),
                radial-gradient(circle at 80% 70%, var(--secondary) 0%, transparent 20%);
            animation: bgPulse 15s infinite alternate;
        }
        
        @keyframes bgPulse {
            0% { transform: scale(1); opacity: 0.1; }
            50% { transform: scale(1.2); opacity: 0.15; }
            100% { transform: scale(1); opacity: 0.1; }
        }
    </style>
</head>
<body>
    <div class="bg-effect"></div>
    
    <div class="login-container" id="loginContainer">
        <div class="countdown" id="countdown">5</div>
        <h1 class="title">PATLAYAN GİRİŞ</h1>
        
        <div class="input-group">
            <i class="fas fa-user"></i>
            <input type="text" class="form-input" placeholder="Kullanıcı Adı" id="username">
        </div>
        
        <div class="input-group">
            <i class="fas fa-lock"></i>
            <input type="password" class="form-input" placeholder="Şifre" id="password">
        </div>
        
        <a href="#" class="forgot-link">Şifremi Unuttum?</a>
        
        <button class="btn" id="loginBtn">GİRİŞ YAP</button>
    </div>

login de bomba

Recomendado

Alternar barra lateral

Um código de lebdev

Um código de Mete

HTML

CSS

JS

Recomendado

Alternar barra lateral

Um código de lebdev

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS