Webleb - Extraits de Code - Un code de 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 code de Mete

Recommandé

Page d'accueil de Matrice Rouge

Modèle HTML de page de connexion Liquid Drop

Astéroïde

HTML

CSS

JS

Recommandé

Page d'accueil de Matrice Rouge

Modèle HTML de page de connexion Liquid Drop

Astéroïde

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS