<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lamba Login Ekranı</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
/* Başlangıçta ışıklar kapalı olacak şekilde varsayılan stilleri ayarlıyoruz */
body {
background-color: #050508; /* Koyu arkaplan */
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
overflow: hidden;
transition: background-color 0.5s;
}
/* --- Işıklar AÇIKKEN (body.lights-on) --- */
body.lights-on {
background-color: #161623;
}
.container {
display: flex;
align-items: center;
gap: 50px;
position: relative;
}
/* --- LAMBA TASARIMI --- */
.lamp-wrapper {
position: relative;
width: 200px;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
z-index: 10;
}
.lamp-shade {
width: 140px;
height: 110px;
background: #3e2d45; /* Kapalı renk */
border-radius: 20px 20px 10px 10px;
position: relative;
z-index: 2;
transform: perspective(200px) rotateX(10deg);
transition: background 0.3s;
}
/* Işık açılınca şapka rengi açılır */
body.lights-on .lamp-shade {
background: #7d5a8a;
}
.face {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 40px;
z-index: 3;
display: flex;
justify-content: space-between;
align-items: center;
}
.eye {
width: 12px;
height: 12px;
border-top: 3px solid #161623;
border-radius: 50%;
margin-top: 5px;
}
.mouth {
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
width: 24px;
height: 12px;
background: #161623;
border-radius: 0 0 20px 20px;
overflow: hidden;
}
.tongue {
width: 100%;
height: 60%;
background: #ff6b6b;
position: absolute;
bottom: 0;
border-radius: 10px 10px 0 0;
}
.lamp-stand {
width: 12px;
height: 120px;
background: linear-gradient(to right, #ccc, #999, #ccc);
margin-top: -10px;
z-index: 1;
}
.lamp-base {
width: 80px;
height: 20px;
background: linear-gradient(to right, #ccc, #999, #ccc);
border-radius: 50%;
margin-top: -5px;
}
/* Işık Huzmesi */
.light-beam {
position: absolute;
top: 100px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 300px solid rgba(255, 255, 220, 0.15);
z-index: 0;
opacity: 0; /* Başlangıçta görünmez */
transition: opacity 0.3s ease;
filter: blur(10px);
pointer-events: none;
}
body.lights-on .light-beam {
opacity: 1;
}
/* Ampul Parıltısı */
.light-bulb-glow {
position: absolute;
top: 100px;
width: 120px;
height: 20px;
background: rgba(255, 255, 200, 0.8);
border-radius: 50%;
filter: blur(5px);
z-index: 1;
opacity: 0; /* Başlangıçta görünmez */
transition: opacity 0.3s ease;
}
body.lights-on .light-bulb-glow {
opacity: 1;
}
/* Çekme İpi */
.pull-string {
position: absolute;
top: 100px;
left: 80px;
width: 2px;
height: 80px;
background: #fff;
z-index: 5;
cursor: pointer;
transform-origin: top center;
transition: height 0.2s;
}
.pull-knob {
position: absolute;
bottom: -10px;
left: -4px;
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
}
.pull-anim {
animation: pullCord 0.4s ease-in-out;
}
@keyframes pullCord {
0% { transform: scaleY(1); }
50% { transform: scaleY(1.3); }
100% { transform: scaleY(1); }
}
/* --- "İPİ ÇEK" YAZISI --- */
.instruction-text {
position: absolute;
top: 140px;
left: -100px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
opacity: 1; /* Başlangıçta görünür */
transition: opacity 0.5s;
animation: float 2s infinite ease-in-out;
}
body.lights-on .instruction-text {
opacity: 0; /* Işık açılınca gizle */
pointer-events: none;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
/* --- LOGIN FORMU --- */
.login-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 20px;
width: 350px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 0 15px rgba(169, 65, 201, 0.5), inset 0 0 20px rgba(169, 65, 201, 0.2);
opacity: 0; /* Başlangıçta gizli */
transform: translateY(20px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
/* Işık açılınca formu göster */
body.lights-on .login-card {
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
.login-card h2 {
color: #fff;
text-align: center;
margin-bottom: 30px;
font-size: 24px;
}
.input-group { margin-bottom: 20px; }
.input-group label { display: block; color: #aaa; margin-bottom: 5px; font-size: 14px; }
.input-group input {
width: 100%; padding: 12px; background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #fff; outline: none; transition: 0.3s;
}
.input-group input:focus { border-color: #a941c9; box-shadow: 0 0 8px rgba(169, 65, 201, 0.4); }
.btn-login {
width: 100%; padding: 12px; background: #9b4dca; border: none; border-radius: 8px;
color: white; font-weight: 600; cursor: pointer; margin-top: 10px; transition: background 0.3s;
}
.btn-login:hover { background: #b265e0; }
.forgot-pass { display: block; text-align: center; margin-top: 15px; color: #888; text-decoration: none; font-size: 13px; }
.forgot-pass:hover { color: #fff; }
</style>
</head>
<body class=""> <div class="container">
<div class="lamp-wrapper">
<div class="light-beam"></div>
<div class="light-bulb-glow"></div>
<div class="lamp-shade">
<div class="face">
<div class="eye"></div>
<div class="eye"></div>
<div class="mouth">
<div class="tongue"></div>
</div>
</div>
</div>
<div class="lamp-stand"></div>
<div class="lamp-base"></div>
<div class="pull-string" id="pullString" onclick="toggleLight()">
<div class="pull-knob"></div>
</div>
<div class="instruction-text">
İpi Çek <span>→</span>
</div>
</div>
<div class="login-card">
<h2>Giriş Yap</h2>
<div class="input-group">
<label>Kullanıcı Adı</label>
<input type="text" placeholder="">
</div>
<div class="input-group">
<label>Şifre</label>
<input type="password" placeholder="">
</div>
<button class="btn-login">Giriş</button>
<a href="#" class="forgot-pass">Şifremi unuttum?</a>
</div>
</div>
<script>
function toggleLight() {
const body = document.body;
const string = document.getElementById('pullString');
// Çekme animasyonu
string.classList.add('pull-anim');
setTimeout(() => {
string.classList.remove('pull-anim');
}, 400);
// 'lights-on' class'ını ekle veya çıkar
body.classList.toggle('lights-on');
}
</script>
</body>
</html>
Selamlar deneyin sonucu görün