Webleb - Extraits de Code

HTML CSS JS

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ACCESS // TERMINAL</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Expanded:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --bg: #0a0b09;
    --bg-2: #0f1210;
    --line: rgba(232,234,224,0.10);
    --line-strong: rgba(232,234,224,0.22);
    --ink: #e8eae0;
    --ink-dim: #8b8f83;
    --ink-faint: #565a50;
    --accent: #c8ff3d;
    --accent-dim: rgba(200,255,61,0.14);
    --cyan: #6fe3d4;
    --danger: #ff5f56;
    --glass: rgba(18,20,16,0.55);
  }

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
    background: var(--bg);
    color: var(--ink);
    font-family: 'Space Grotesk', sans-serif;
    overflow: hidden;
    cursor: none;
    -webkit-font-smoothing: antialiased;
  }

/* ---------- custom cursor ---------- */
  .cursor{
    position: fixed; top:0; left:0; width:18px; height:18px;
    border:1px solid var(--accent); border-radius:50%;
    pointer-events:none; z-index:999; transform: translate(-50%,-50%);
    transition: width .15s, height .15s, border-color .15s, background .15s;
    mix-blend-mode: difference;
  }
  .cursor::after{
    content:''; position:absolute; top:50%; left:50%; width:2px; height:2px;
    background: var(--accent); border-radius:50%; transform: translate(-50%,-50%);
  }
  .cursor.active{ width:34px; height:34px; background: var(--accent-dim); }
  @media (hover:none){ .cursor{ display:none; } body{ cursor:auto; } }

/* ---------- background atmosphere ---------- */
  .bg{
    position: fixed; inset:0; z-index:0;
    background:
      radial-gradient(ellipse 60% 50% at 50% 8%, rgba(200,255,61,0.07), transparent 60%),
      radial-gradient(ellipse 70% 60% at 85% 95%, rgba(111,227,212,0.05), transparent 60%),
      var(--bg);
  }
  .grid{
    position:fixed; inset:0; z-index:0; opacity:.35;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 78%);
  }
  canvas#field{ position:fixed; inset:0; z-index:0; opacity:.9; }

.scanline{
    position:fixed; left:0; right:0; height:120px; z-index:1; pointer-events:none;
    background: linear-gradient(180deg, transparent, rgba(200,255,61,0.05), transparent);
    animation: scan 9s linear infinite;
  }
  @keyframes scan{
    0%{ top:-120px; } 100%{ top:100%; }
  }

.vignette{
    position:fixed; inset:0; z-index:1; pointer-events:none;
    box-shadow: inset 0 0 220px rgba(0,0,0,0.75);
  }

/* ---------- HUD chrome ---------- */
  .hud{ position:fixed; inset:0; z-index:2; pointer-events:none; }
  .hud-corner{
    position:absolute; width:26px; height:26px; opacity:.75;
  }
  .hud-corner.tl{ top:22px; left:22px; border-top:1px solid var(--ink-dim); border-left:1px solid var(--ink-dim); }
  .hud-corner.tr{ top:22px; right:22px; border-top:1px solid var(--ink-dim); border-right:1px solid var(--ink-dim); }
  .hud-corner.bl{ bottom:22px; left:22px; border-bottom:1px solid var(--ink-dim); border-left:1px solid var(--ink-dim); }
  .hud-corner.br{ bottom:22px; right:22px; border-bottom:1px solid var(--ink-dim); border-right:1px solid var(--ink-dim); }

.hud-top{
    position:absolute; top:24px; left:60px; right:60px;
    display:flex; justify-content:space-between; align-items:flex-start;
    font-family:'JetBrains Mono', monospace; font-size:10.5px; letter-spacing:.08em;
    color: var(--ink-dim); text-transform:uppercase;
  }
  .hud-top .brand{ color: var(--ink); font-weight:600; letter-spacing:.14em; }
  .hud-top .brand span{ color: var(--accent); }
  .hud-top .status{ text-align:right; line-height:1.7; }
  .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--accent); margin-right:6px; box-shadow:0 0 8px var(--accent); animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.35;} }

.hud-bottom{
    position:absolute; bottom:24px; left:60px; right:60px;
    display:flex; justify-content:space-between; align-items:flex-end;
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.06em;
    color: var(--ink-faint); text-transform:uppercase;
  }
  .hud-bottom .coords{ display:flex; gap:22px; }

@media (max-width: 720px){
    .hud-top, .hud-bottom{ left:18px; right:18px; }
    .hud-top .status{ display:none; }
    .hud-corner{ width:16px; height:16px; }
    .hud-corner.tl,.hud-corner.tr{ top:14px; } .hud-corner.tl,.hud-corner.bl{ left:14px; } .hud-corner.tr,.hud-corner.br{ right:14px; } .hud-corner.bl,.hud-corner.br{ bottom:14px; }
  }

/* ---------- layout ---------- */
  .container{
    position:relative; z-index:3;
    display:flex; align-items:center; justify-content:center;
    min-height:100vh; padding:120px 24px;
  }

.wrapper{ display:flex; flex-direction:column; align-items:center; gap:22px; }

.eyebrow{
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.22em;
    color: var(--ink-dim); text-transform:uppercase; opacity:0; animation: rise .7s .1s ease forwards;
  }
  .eyebrow::before, .eyebrow::after{ content:''; width:24px; height:1px; background: var(--line-strong); }

/* ---------- switch ---------- */
  .switch-row{
    position:relative; display:flex; align-items:center; justify-content:center; gap:0;
    width:220px; opacity:0; animation: rise .7s .2s ease forwards;
  }
  .switch{
    position:relative; width:220px; height:44px;
    border:1px solid var(--line-strong); border-radius:999px;
    background: var(--glass); backdrop-filter: blur(10px);
    display:flex; align-items:center;
  }
  .toggle{ position:absolute; opacity:0; width:0; height:0; }

.switch .labels{
    position:relative; z-index:2; width:100%; height:100%;
    display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:center;
    font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
    pointer-events:none;
  }
  .switch .labels span{ color: var(--ink-faint); transition: color .35s ease; }

.slider{
    position:absolute; top:3px; left:3px; width:calc(50% - 4px); height:calc(100% - 6px);
    border-radius:999px; background: var(--accent-dim);
    border:1px solid var(--accent);
    transition: transform .4s cubic-bezier(.65,0,.35,1);
    z-index:1;
  }
  .toggle:checked ~ .slider{ transform: translateX(calc(100% + 2px)); }
  .toggle:checked ~ .labels span:first-child{ color: var(--ink-faint); }
  .toggle:checked ~ .labels span:last-child{ color: var(--accent); }
  .toggle:not(:checked) ~ .labels span:first-child{ color: var(--accent); }

.switch:focus-within{ border-color: var(--accent); }

/* ---------- flip card ---------- */
  .card-stage{
    width:340px; max-width: calc(100vw - 40px); height:420px;
    perspective: 1600px;
    opacity:0; animation: rise .8s .3s ease forwards;
  }
  .flip-card__inner{
    position:relative; width:100%; height:100%;
    transition: transform .9s cubic-bezier(.65,0,.35,1);
    transform-style: preserve-3d;
  }
  .toggle:checked ~ .card-stage .flip-card__inner{ transform: rotateY(180deg); }

.flip-card__front, .flip-card__back{
    position:absolute; inset:0;
    -webkit-backface-visibility:hidden; backface-visibility:hidden;
    border:1px solid var(--line-strong); border-radius:14px;
    background: var(--glass); backdrop-filter: blur(16px);
    padding:34px 30px 28px;
    display:flex; flex-direction:column;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  }
  .flip-card__back{ transform: rotateY(180deg); }

.flip-card__front::before, .flip-card__back::before{
    content:''; position:absolute; top:14px; left:14px; right:14px; bottom:14px;
    border:1px solid rgba(232,234,224,0.06); border-radius:8px; pointer-events:none;
  }

.card-id{
    font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:.1em;
    color: var(--ink-faint); text-transform:uppercase; margin-bottom:18px;
    display:flex; justify-content:space-between;
  }
  .card-id .live{ color: var(--accent); }

.title{
    font-family:'Archivo Expanded', sans-serif;
    font-size:28px; font-weight:700; letter-spacing:-.01em;
    color: var(--ink); margin-bottom:4px; text-transform:uppercase;
  }
  .subtitle{
    font-family:'JetBrains Mono', monospace; font-size:11px; color: var(--ink-dim);
    letter-spacing:.04em; margin-bottom:26px;
  }

.flip-card__form{ display:flex; flex-direction:column; gap:14px; flex:1; }

.field{ position:relative; }
  .field label{
    position:absolute; top:-8px; left:12px; padding:0 6px;
    background: #101210; font-family:'JetBrains Mono', monospace;
    font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color: var(--ink-faint);
  }
  .flip-card__input{
    width:100%; height:46px; padding:0 14px;
    background: rgba(255,255,255,0.02);
    border:1px solid var(--line-strong); border-radius:8px;
    color: var(--ink); font-family:'Space Grotesk', sans-serif; font-size:14px;
    outline:none; transition: border-color .25s ease, background .25s ease;
  }
  .flip-card__input::placeholder{ color: var(--ink-faint); }
  .flip-card__input:focus{ border-color: var(--accent); background: rgba(200,255,61,0.04); }

.flip-card__btn{
    margin-top:auto; height:46px; border-radius:8px; border:1px solid var(--accent);
    background: var(--accent); color:#0a0b09; font-family:'Space Grotesk', sans-serif;
    font-weight:700; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
    cursor:pointer; transition: transform .15s ease, box-shadow .25s ease, background .25s ease;
    display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .flip-card__btn:hover{ box-shadow: 0 0 0 1px var(--accent), 0 10px 30px -8px rgba(200,255,61,0.5); }
  .flip-card__btn:active{ transform: translateY(1px) scale(.99); }
  .flip-card__btn::after{ content:'→'; transition: transform .25s ease; }
  .flip-card__btn:hover::after{ transform: translateX(4px); }

.foot-note{
    margin-top:16px; text-align:center; font-family:'JetBrains Mono', monospace;
    font-size:10px; color: var(--ink-faint); letter-spacing:.04em;
  }
  .foot-note b{ color: var(--ink-dim); font-weight:500; cursor:pointer; }

.msg{
    min-height:16px; font-family:'JetBrains Mono', monospace; font-size:10.5px;
    letter-spacing:.03em; text-align:center; opacity:0; transform:translateY(-4px);
    transition: opacity .25s ease, transform .25s ease;
  }
  .msg.show{ opacity:1; transform:translateY(0); }
  .msg.ok{ color: var(--accent); }
  .msg.err{ color: var(--danger); }

.field.invalid .flip-card__input{ border-color: var(--danger); background: rgba(255,95,86,0.05); }

.flip-card__btn.loading{ pointer-events:none; opacity:.7; }
  .flip-card__btn.loading::after{ content:''; width:12px; height:12px; border-radius:50%;
    border:2px solid rgba(10,11,9,0.35); border-top-color:#0a0b09; animation: spin .6s linear infinite; }
  @keyframes spin{ to{ transform: rotate(360deg); } }

@keyframes rise{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform: translateY(0); }
  }

@media (prefers-reduced-motion: reduce){
    .scanline, .dot, .flip-card__inner, .slider{ animation:none !important; transition:none !important; }
  }
</style>
</head>
<body>

<div class="hud-top">
      <div class="brand">ZENDA <span>×</span> M.HAN</div>
      <div class="status">
        <div><span class="dot"></span>SECURE_LINK // TLS 1.3</div>
        <div id="clock">00:00:00 IST</div>
      </div>
    </div>

<div class="hud-bottom">
      <div class="coords" id="coords">
        <span>LAT 41.0082° N</span>
        <span>LON 28.9784° E</span>
      </div>
      <div>NODE_07 // ACCESS_TERMINAL</div>
    </div>
  </div>

<div class="eyebrow">Kimlik Doğrulama Gerekli</div>

<label class="switch-row">
        <input type="checkbox" class="toggle" id="mode">
        <div class="switch">
          <span class="slider"></span>
          <div class="labels"><span>Giriş</span><span>Kayıt</span></div>
        </div>
      </label>

<div class="flip-card__front">
            <div class="card-id"><span>FORM_01 // LOGIN</span><span class="live">● LIVE</span></div>
            <div class="title">Tekrar Hoş Geldin</div>
            <div class="subtitle">Devam etmek için kimliğini doğrula</div>
            <form class="flip-card__form" id="loginForm" novalidate>
              <div class="field" id="loginEmailField">
                <label>E-posta</label>
                <input class="flip-card__input" name="email" placeholder="ad@alanadi.com" type="email" autocomplete="email">
              </div>
              <div class="field" id="loginPassField">
                <label>Şifre</label>
                <input class="flip-card__input" name="password" placeholder="••••••••" type="password" autocomplete="current-password">
              </div>
              <div class="msg" id="loginMsg"></div>
              <button class="flip-card__btn" type="submit">Giriş Yap</button>
            </form>
            <div class="foot-note">Hesabın yok mu? <b id="goSignup">Sağa kaydır</b></div>
          </div>

<div class="flip-card__back">
            <div class="card-id"><span>FORM_02 // SIGNUP</span><span class="live">● LIVE</span></div>
            <div class="title">Hesap Oluştur</div>
            <div class="subtitle">Erişim için birkaç bilgi yeterli</div>
            <form class="flip-card__form" id="signupForm" novalidate>
              <div class="field" id="signupNameField">
                <label>Ad Soyad</label>
                <input class="flip-card__input" name="name" placeholder="Adın Soyadın" type="text" autocomplete="name">
              </div>
              <div class="field" id="signupEmailField">
                <label>E-posta</label>
                <input class="flip-card__input" name="email" placeholder="ad@alanadi.com" type="email" autocomplete="email">
              </div>
              <div class="field" id="signupPassField">
                <label>Şifre</label>
                <input class="flip-card__input" name="password" placeholder="En az 6 karakter" type="password" autocomplete="new-password">
              </div>
              <div class="msg" id="signupMsg"></div>
              <button class="flip-card__btn" type="submit">Kayıt Ol</button>
            </form>
            <div class="foot-note">Zaten üye misin? <b id="goLogin">Sola kaydır</b></div>
          </div>

</div>
      </div>

</div>
  </div>

// live clock
  function tick(){
    const d = new Date();
    const p = n => String(n).padStart(2,'0');
    document.getElementById('clock').textContent = `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())} IST`;
  }
  tick(); setInterval(tick, 1000);

// drifting coordinate readout (purely decorative)
  const coordsEl = document.getElementById('coords');
  let lat = 41.0082, lon = 28.9784;
  setInterval(()=>{
    lat += (Math.random()-0.5)*0.0006;
    lon += (Math.random()-0.5)*0.0006;
    coordsEl.innerHTML = `<span>LAT ${lat.toFixed(4)}° N</span><span>LON ${lon.toFixed(4)}° E</span>`;
  }, 2200);

// particle field
  const canvas = document.getElementById('field');
  const ctx = canvas.getContext('2d');
  let w,h,particles;
  function resize(){
    w = canvas.width = window.innerWidth;
    h = canvas.height = window.innerHeight;
    const count = Math.floor((w*h)/26000);
    particles = Array.from({length: count}, ()=>({
      x: Math.random()*w, y: Math.random()*h,
      vx: (Math.random()-0.5)*0.15, vy: (Math.random()-0.5)*0.15,
      r: Math.random()*1.4 + 0.3
    }));
  }
  function draw(){
    ctx.clearRect(0,0,w,h);
    ctx.fillStyle = 'rgba(200,255,61,0.35)';
    particles.forEach(p=>{
      p.x += p.vx; p.y += p.vy;
      if(p.x<0) p.x=w; if(p.x>w) p.x=0;
      if(p.y<0) p.y=h; if(p.y>h) p.y=0;
      ctx.beginPath();
      ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
      ctx.fill();
    });
    requestAnimationFrame(draw);
  }
  resize(); draw();
  window.addEventListener('resize', resize);

// ---------- auth logic (client-side demo store) ----------
  const STORE_KEY = 'zenda_access_users';

function fakeLoad(btn, ms){
    return new Promise(res=>{
      btn.classList.add('loading');
      setTimeout(()=>{ btn.classList.remove('loading'); res(); }, ms);
    });
  }

const modeToggle = document.getElementById('mode');

// ----- signup -----
  const signupForm = document.getElementById('signupForm');
  const signupMsg = document.getElementById('signupMsg');
  const signupNameField = document.getElementById('signupNameField');
  const signupEmailField = document.getElementById('signupEmailField');
  const signupPassField = document.getElementById('signupPassField');

signupForm.addEventListener('submit', async (e)=>{
    e.preventDefault();
    const name = signupForm.name.value.trim();
    const email = signupForm.email.value.trim().toLowerCase();
    const pass = signupForm.password.value;

clearFieldStates(signupNameField, signupEmailField, signupPassField);

if(!name){ markField(signupNameField,true); setMsg(signupMsg,'Ad soyad gerekli.','err'); return; }
    if(!isEmail(email)){ markField(signupEmailField,true); setMsg(signupMsg,'Geçerli bir e-posta gir.','err'); return; }
    if(pass.length < 6){ markField(signupPassField,true); setMsg(signupMsg,'Şifre en az 6 karakter olmalı.','err'); return; }

const users = getUsers();
    if(users.some(u=>u.email === email)){
      markField(signupEmailField,true);
      setMsg(signupMsg,'Bu e-posta zaten kayıtlı. Giriş yap.','err');
      return;
    }

const btn = signupForm.querySelector('.flip-card__btn');
    setMsg(signupMsg,'Kayıt oluşturuluyor…','ok');
    await fakeLoad(btn, 700);

users.push({ name, email, pass });
    saveUsers(users);

setMsg(signupMsg, `Hoş geldin, ${name.split(' ')[0]}. Hesabın oluşturuldu.`, 'ok');
    signupForm.reset();

setTimeout(()=>{
      modeToggle.checked = false; // flip back to login
      document.getElementById('loginForm').email.value = email;
      setMsg(document.getElementById('loginMsg'), 'Hesabın hazır, şimdi giriş yap.', 'ok');
    }, 900);
  });

// ----- login -----
  const loginForm = document.getElementById('loginForm');
  const loginMsg = document.getElementById('loginMsg');
  const loginEmailField = document.getElementById('loginEmailField');
  const loginPassField = document.getElementById('loginPassField');

loginForm.addEventListener('submit', async (e)=>{
    e.preventDefault();
    const email = loginForm.email.value.trim().toLowerCase();
    const pass = loginForm.password.value;

clearFieldStates(loginEmailField, loginPassField);

if(!isEmail(email)){ markField(loginEmailField,true); setMsg(loginMsg,'Geçerli bir e-posta gir.','err'); return; }
    if(!pass){ markField(loginPassField,true); setMsg(loginMsg,'Şifreni gir.','err'); return; }

const users = getUsers();
    const match = users.find(u=>u.email === email && u.pass === pass);

const btn = loginForm.querySelector('.flip-card__btn');
    setMsg(loginMsg,'Doğrulanıyor…','ok');
    await fakeLoad(btn, 700);

if(!match){
      const exists = users.some(u=>u.email === email);
      markField(loginPassField,true);
      setMsg(loginMsg, exists ? 'Şifre yanlış.' : 'Bu e-posta ile kayıt bulunamadı.', 'err');
      return;
    }

setMsg(loginMsg, `Erişim onaylandı. Tekrar hoş geldin, ${match.name.split(' ')[0]}.`, 'ok');
    loginForm.reset();
  });

// ----- footer links flip the card -----
  document.getElementById('goSignup').addEventListener('click', ()=>{ modeToggle.checked = true; });
  document.getElementById('goLogin').addEventListener('click', ()=>{ modeToggle.checked = false; });
</script>

</body>
</html>

Preview

Open Advanced Editor Full Screen