Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Gelişmiş Giriş Sayfası (PWA)</title>

<style>

:root {

--primary: #00ffcc;

--secondary: #0099ff;

--dark: #111;

--light: #f0f0f0;

--error: #ff4444;

--success: #00cc66;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

transition: all 0.3s ease;

}

body {

background-color: var(--dark);

color: var(--light);

min-height: 100vh;

display: flex;

flex-direction: column;

perspective: 1000px;

overflow-x: hidden;

}

.navbar {

background: rgba(0, 0, 0, 0.8);

backdrop-filter: blur(10px);

padding: 1rem 2rem;

display: flex;

justify-content: space-between;

align-items: center;

position: fixed;

width: 100%;

z-index: 1000;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

}

.logo {

color: var(--primary);

font-weight: bold;

font-size: 1.5rem;

text-shadow: 0 0 10px rgba(0, 255, 204, 0.5);

}

.hamburger {

color: var(--light);

font-size: 1.8rem;

cursor: pointer;

display: none;

}

.nav-links {

display: flex;

gap: 2rem;

align-items: center;

}

.nav-links a {

color: var(--light);

text-decoration: none;

font-weight: 500;

position: relative;

padding: 0.5rem 0;

}

.nav-links a::after {

content: '';

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: var(--primary);

transition: width 0.3s;

}

.nav-links a:hover::after {

width: 100%;

}

#language-select {

background: rgba(255, 255, 255, 0.1);

color: var(--light);

border: 1px solid rgba(255, 255, 255, 0.2);

padding: 0.5rem;

border-radius: 5px;

cursor: pointer;

}

.container {

flex: 1;

display: flex;

justify-content: center;

align-items: center;

padding: 2rem;

margin-top: 4rem;

}

.login-card {

background: rgba(0, 0, 0, 0.6);

backdrop-filter: blur(15px);

border-radius: 20px;

padding: 2.5rem;

width: 100%;

max-width: 500px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

border: 1px solid rgba(255, 255, 255, 0.1);

transform-style: preserve-3d;

transform: perspective(1000px);

position: relative;

overflow: hidden;

}

.login-card::before {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: linear-gradient(

45deg,

transparent,

rgba(0, 255, 204, 0.1),

transparent

);

transform: rotate(45deg);

animation: shine 3s infinite;

}

@keyframes shine {

0% { left: -50%; }

100% { left: 150%; }

}

.login-card h1 {

text-align: center;

margin-bottom: 2rem;

color: var(--primary);

font-size: 2rem;

text-shadow: 0 0 10px rgba(0, 255, 204, 0.3);

}

.form-group {

margin-bottom: 1.5rem;

position: relative;

}

.form-group label {

display: block;

margin-bottom: 0.5rem;

color: var(--light);

}

.form-group input {

width: 100%;

padding: 1rem 1rem 1rem 3rem;

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 10px;

color: var(--light);

font-size: 1rem;

outline: none;

}

.form-group input:focus {

border-color: var(--primary);

box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);

}

.form-group i {

position: absolute;

left: 1rem;

top: 50%;

transform: translateY(-50%);

color: var(--primary);

}

.btn {

width: 100%;

padding: 1rem;

background: linear-gradient(45deg, var(--primary), var(--secondary));

color: var(--dark);

border: none;

border-radius: 10px;

font-size: 1rem;

font-weight: bold;

cursor: pointer;

margin-top: 1rem;

transition: all 0.3s;

position: relative;

overflow: hidden;

}

.btn::after {

content: '';

position: absolute;

top: -50%;

left: -50%;

width: 200%;

height: 200%;

background: linear-gradient(

to bottom right,

transparent,

rgba(255, 255, 255, 0.3),

transparent

);

transform: rotate(45deg);

transition: all 0.5s;

}

.btn:hover {

transform: translateY(-3px);

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);

}

.btn:hover::after {

left: 100%;

}

.btn:active {

transform: translateY(0);

}

#message {

text-align: center;

margin-top: 1.5rem;

min-height: 1.5rem;

font-weight: bold;

}

.social-login {

display: flex;

justify-content: center;

gap: 1.5rem;

margin-top: 2rem;

}

.social-btn {

width: 50px;

height: 50px;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

background: rgba(255, 255, 255, 0.1);

color: var(--light);

font-size: 1.5rem;

cursor: pointer;

transition: all 0.3s;

}

.social-btn:hover {

transform: translateY(-5px) scale(1.1);

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);

}

.social-btn.google { color: #db4437; }

.social-btn.facebook { color: #4267B2; }

.social-btn.twitter { color: #1DA1F2; }

.floating-figures {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

pointer-events: none;

z-index: -1;

}

.figure {

position: absolute;

border-radius: 50%;

filter: blur(60px);

opacity: 0.3;

}

.figure-1 {

width: 200px;

height: 200px;

background: var(--primary);

top: 20%;

left: 10%;

animation: float 8s infinite ease-in-out;

}

.figure-2 {

width: 300px;

height: 300px;

background: var(--secondary);

bottom: 15%;

right: 10%;

animation: float 10s infinite ease-in-out 2s;

}

@keyframes float {

0%, 100% { transform: translateY(0) translateX(0); }

50% { transform: translateY(-20px) translateX(20px); }

}

@media (max-width: 768px) {

.hamburger {

display: block;

}

.nav-links {

position: fixed;

top: 4.5rem;

left: 0;

width: 100%;

background: rgba(0, 0, 0, 0.9);

flex-direction: column;

gap: 1rem;

padding: 1rem 0;

clip-path: circle(0 at 90% -10%);

transition: clip-path 0.5s ease-out;

}

.nav-links.show {

clip-path: circle(1000px at 90% -10%);

}

.login-card {

padding: 1.5rem;

}

</style>

</head>

<body>

<a href="#" data-key="home">Anasayfa</a>

<a href="#" data-key="about">Hakkında</a>

<a href="#" data-key="contact">İletişim</a>

</select>

</div>

</nav>

</div>

<h1 data-key="welcome">Hoş Geldiniz</h1>

<label for="username" data-key="username">Kullanıcı Adı</label>

</div>

<label for="password" data-key="password">Şifre</label>

</div>

<span data-key="login">Giriş Yap</span>

</button>

</div>

</div>

</div>

</form>

</div>

// Hamburger Menü

document.getElementById("hamburger").addEventListener("click", () => {

document.getElementById("nav-links").classList.toggle("show");

});

// Çoklu Dil Desteği

const translations = {

tr: {

home: "Anasayfa",

about: "Hakkında",

contact: "İletişim",

welcome: "Hoş Geldiniz",

username: "Kullanıcı Adı",

password: "Şifre",

login: "Giriş Yap",

enterUsernamePlaceholder: "Kullanıcı adınızı girin",

enterPasswordPlaceholder: "Şifrenizi girin",

loginSuccess: "Giriş başarılı! Yönlendiriliyorsunuz...",

loginError: "Hatalı kullanıcı adı veya şifre!"

},

en: {

home: "Home",

about: "About",

contact: "Contact",

welcome: "Welcome",

username: "Username",

password: "Password",

login: "Login",

enterUsernamePlaceholder: "Enter your username",

enterPasswordPlaceholder: "Enter your password",

loginSuccess: "Login successful! Redirecting...",

loginError: "Invalid username or password!"

},

de: {

home: "Startseite",

about: "Über uns",

contact: "Kontakt",

welcome: "Willkommen",

username: "Benutzername",

password: "Passwort",

login: "Anmelden",

enterUsernamePlaceholder: "Geben Sie Ihren Benutzernamen ein",

enterPasswordPlaceholder: "Geben Sie Ihr Passwort ein",

loginSuccess: "Anmeldung erfolgreich! Weiterleitung...",

loginError: "Ungültiger Benutzername oder Passwort!"

},

fr: {

home: "Accueil",

about: "À propos",

contact: "Contact",

welcome: "Bienvenue",

username: "Nom d'utilisateur",

password: "Mot de passe",

login: "Connexion",

enterUsernamePlaceholder: "Entrez votre nom d'utilisateur",

enterPasswordPlaceholder: "Entrez votre mot de passe",

loginSuccess: "Connexion réussie! Redirection...",

loginError: "Nom d'utilisateur ou mot de passe invalide!"

}

};

function updateLanguage(lang) {

const elements = document.querySelectorAll("[data-key]");

elements.forEach((el) => {

const key = el.getAttribute("data-key");

if (translations[lang] && translations[lang][key]) {

if (el.tagName === 'INPUT') {

el.placeholder = translations[lang][key];

} else {

el.textContent = translations[lang][key];

}

});

}

const languageSelect = document.getElementById("language-select");

const savedLang = localStorage.getItem("selectedLanguage") || navigator.language.slice(0, 2) || "tr";

languageSelect.value = savedLang in translations ? savedLang : "tr";

updateLanguage(languageSelect.value);

languageSelect.addEventListener("change", () => {

const selectedLang = languageSelect.value;

localStorage.setItem("selectedLanguage", selectedLang);

updateLanguage(selectedLang);

});

// Giriş Kontrolü

document.getElementById("login-form").addEventListener("submit", function (e) {

e.preventDefault();

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

const message = document.getElementById("message");

const currentLang = languageSelect.value;

// 3D animasyon efekti

this.style.transform = "perspective(1000px) rotateX(5deg)";

setTimeout(() => {

this.style.transform = "perspective(1000px) rotateX(0)";

}, 300);

if (username === "admin" && password === "1234") {

message.textContent = translations[currentLang].loginSuccess;

message.style.color = "var(--success)";

// Başarılı giriş animasyonu

this.querySelector(".btn").style.background = "linear-gradient(45deg, var(--success), var(--primary))";

setTimeout(() => {

// Giriş başarılıysa yönlendirme yapılabilir

// window.location.href = "dashboard.html";

}, 1500);

} else {

message.textContent = translations[currentLang].loginError;

message.style.color = "var(--error)";

// Hatalı giriş animasyonu

this.style.animation = "shake 0.5s";

setTimeout(() => {

this.style.animation = "";

}, 500);

}

});

// Service Worker Kaydı

if ('serviceWorker' in navigator) {

window.addEventListener('load', () => {

navigator.serviceWorker.register('sw.js')

.then(reg => console.log("Service Worker kayıtlı:", reg.scope))

.catch(err => console.error("Service Worker hatası:", err));

});

}

// Çevrimdışı kullanım için bildirim

window.addEventListener('online', () => {

const message = document.getElementById("message");

message.textContent = "Çevrimiçi moda geçildi";

message.style.color = "var(--success)";

setTimeout(() => message.textContent = "", 3000);

});

window.addEventListener('offline', () => {

const message = document.getElementById("message");

message.textContent = "Çevrimdışı moddasınız (sınırlı işlevsellik)";

message.style.color = "var(--error)";

});

// PWA yükleme istemi

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {

e.preventDefault();

deferredPrompt = e;

// Uygulamayı yükle butonu gösterebilirsiniz

setTimeout(() => {

if (deferredPrompt) {

const message = document.getElementById("message");

message.innerHTML = 'Uygulamayı ana ekrana eklemek ister misiniz? <button id="install-btn" style="background: var(--primary); border: none; padding: 5px 10px; border-radius: 5px; margin-left: 10px; cursor: pointer;">Yükle</button>';

message.style.color = "var(--light)";

document.getElementById("install-btn").addEventListener('click', () => {

deferredPrompt.prompt();

deferredPrompt.userChoice.then((choiceResult) => {

if (choiceResult.outcome === 'accepted') {

console.log('Kullanıcı PWA yükleme istemini kabul etti');

}

deferredPrompt = null;

});

}

}, 5000);

});

</script>

</body>

</html>

CSS

JS

Pwa