Webleb - HTML UI Elements - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>Kullanıcı Giriş Sistemi</title>

<style>

* {

box-sizing: border-box;

margin: 0;

padding: 0;

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

}

body {

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

perspective: 1000px;

overflow: hidden;

position: relative;

}

.circuit-background {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: -1;

transform-style: preserve-3d;

animation: rotate 60s infinite linear;

opacity: 0.4;

}

@keyframes rotate {

0% {

transform: rotateY(0deg) rotateX(10deg);

}

100% {

transform: rotateY(360deg) rotateX(10deg);

}

.container {

background-color: rgba(255, 255, 255, 0.95);

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 255, 0, 0.3);

padding: 30px;

width: 400px;

max-width: 90%;

position: relative;

z-index: 10;

backdrop-filter: blur(5px);

border: 1px solid rgba(100, 255, 100, 0.3);

}

/* 3D Circuit Board Styling */

.circuit-board {

width: 150%;

height: 150%;

position: absolute;

top: -25%;

left: -25%;

transform-style: preserve-3d;

transform: rotateX(60deg) rotateZ(-45deg);

}

.pcb {

position: absolute;

width: 100%;

height: 100%;

background: linear-gradient(45deg, #0a6e0a, #25a025);

transform: translateZ(-20px);

background-image:

linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px),

linear-gradient(0deg, rgba(255,255,255,0.1) 1px, transparent 1px);

background-size: 50px 50px;

box-shadow: 0 0 40px rgba(0, 100, 0, 0.8);

}

.components {

position: absolute;

width: 100%;

height: 100%;

background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);

background-size: 30px 30px;

}

.chips {

position: absolute;

width: 100%;

height: 100%;

}

.chips:before {

content: "";

position: absolute;

top: 30%;

left: 40%;

width: 120px;

height: 120px;

background-color: #444;

transform: translateZ(10px);

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

}

.chips:after {

content: "";

position: absolute;

top: 50%;

left: 60%;

width: 80px;

height: 80px;

background-color: #555;

transform: translateZ(8px);

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

}

.connectors.left:before {

content: "";

position: absolute;

left: 10%;

top: 20%;

height: 60%;

width: 30px;

background-color: #333;

transform: translateZ(5px);

}

.connectors.right:before {

content: "";

position: absolute;

right: 10%;

top: 20%;

height: 60%;

width: 30px;

background-color: #333;

transform: translateZ(5px);

}

.tab-container {

display: flex;

margin-bottom: 20px;

border-bottom: 1px solid #e0e0e0;

}

.tab {

padding: 10px 20px;

cursor: pointer;

font-weight: 500;

color: #666;

position: relative;

}

.active-tab {

color: #4285f4;

}

.active-tab::after {

content: '';

position: absolute;

bottom: -1px;

left: 0;

width: 100%;

height: 2px;

background-color: #4285f4;

}

.form-group {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 8px;

font-size: 14px;

color: #555;

}

input {

width: 100%;

padding: 12px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 16px;

transition: border-color 0.3s;

}

input:focus {

border-color: #4285f4;

outline: none;

}

button {

background-color: #4285f4;

color: white;

border: none;

border-radius: 4px;

padding: 12px;

width: 100%;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s;

}

button:hover {

background-color: #3367d6;

}

.forgot-password {

text-align: right;

margin-top: -10px;

margin-bottom: 20px;

}

.forgot-password a {

color: #4285f4;

text-decoration: none;

font-size: 14px;

}

.forgot-password a:hover {

text-decoration: underline;

}

.form-content {

display: none;

}

.active-form {

display: block;

}

.register-link {

text-align: center;

margin-top: 20px;

font-size: 14px;

color: #666;

}

.register-link a {

color: #4285f4;

text-decoration: none;

}

.register-link a:hover {

text-decoration: underline;

}

</style>

</head>

<body>

</div>

<div class="tab active-tab" id="login-tab" onclick="showTab('login')">Giriş Yap</div>

</div>

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

</div>

<label for="password">Şifre</label>

</div>

<a href="#" onclick="showTab('forgot')">Şifremi unuttum</a>

</div>

<button type="submit">Giriş Yap</button>

Hesabınız yok mu? <a href="#" onclick="showTab('register')">Yeni üye oluştur</a>

</div>

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

</div>

<label for="email">E-posta</label>

</div>

<label for="new-password">Şifre</label>

</div>

<label for="confirm-password">Şifre Tekrar</label>

</div>

<button type="submit">Kayıt Ol</button>

Zaten hesabınız var mı? <a href="#" onclick="showTab('login')">Giriş yap</a>

</div>

<label for="forgot-email">E-posta</label>

</div>

<button type="submit">Şifre Sıfırlama Bağlantısı Gönder</button>

<a href="#" onclick="showTab('login')">Giriş sayfasına dön</a>

</div>

function showTab(tabName) {

// Hide all forms

document.getElementById('login-form').classList.remove('active-form');

document.getElementById('register-form').classList.remove('active-form');

document.getElementById('forgot-form').classList.remove('active-form');

// Remove active class from tabs

document.getElementById('login-tab').classList.remove('active-tab');

document.getElementById('register-tab').classList.remove('active-tab');

// Show selected form

document.getElementById(tabName + '-form').classList.add('active-form');

// If login or register tab, add active class

if (tabName === 'login' || tabName === 'register') {

document.getElementById(tabName + '-tab').classList.add('active-tab');

}

// Add dynamic circuit elements to enhance 3D effect

document.addEventListener('DOMContentLoaded', function() {

const circuitBoard = document.querySelector('.circuit-board');

// Create random circuit traces

for (let i = 0; i < 50; i++) {

const trace = document.createElement('div');

trace.className = 'circuit-trace';

trace.style.position = 'absolute';

trace.style.height = '2px';

trace.style.width = Math.random() * 100 + 50 + 'px';

trace.style.backgroundColor = 'rgba(0, 255, 100, 0.5)';

trace.style.top = Math.random() * 100 + '%';

trace.style.left = Math.random() * 100 + '%';

trace.style.transform = 'translateZ(' + (Math.random() * 5) + 'px) rotate(' + (Math.random() * 360) + 'deg)';

trace.style.boxShadow = '0 0 5px rgba(0, 255, 0, 0.7)';

circuitBoard.appendChild(trace);

}

// Create random component elements

for (let i = 0; i < 30; i++) {

const component = document.createElement('div');

component.className = 'component';

component.style.position = 'absolute';

// Randomize component type

const type = Math.floor(Math.random() * 4);

if (type === 0) { // Capacitor

component.style.width = '10px';

component.style.height = '20px';

component.style.backgroundColor = '#ddd';

component.style.borderRadius = '5px';

} else if (type === 1) { // Resistor

component.style.width = '25px';

component.style.height = '8px';

component.style.backgroundColor = '#a37b45';

} else if (type === 2) { // Small chip

component.style.width = '15px';

component.style.height = '15px';

component.style.backgroundColor = '#333';

} else { // LED

component.style.width = '6px';

component.style.height = '6px';

component.style.backgroundColor = 'red';

component.style.borderRadius = '50%';

component.style.boxShadow = '0 0 5px red';

}

component.style.top = Math.random() * 100 + '%';

component.style.left = Math.random() * 100 + '%';

component.style.transform = 'translateZ(' + (Math.random() * 8 + 2) + 'px)';

circuitBoard.appendChild(component);

}

});

</script>

</body>

</html>

Un codice di Mete

Consigliato

Gioco del Toast Catcher

Orologio digitale domestico

Pulsante Hover Bagliore

HTML

CSS

JS

Consigliato

Gioco del Toast Catcher

Orologio digitale domestico

Pulsante Hover Bagliore

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS