WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Eine seltsame Homepage
1043
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
8 September 2024
23 March 2025
Schaltfläche „Hover Glow“
26 May 2025
Ein Code von mironovbogdan341
HTML
Copy
<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dev Registration</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Consolas', 'Courier New', monospace; } :root { --bg-dark: #0a192f; --text-primary: #64ffda; --text-secondary: #8892b0; --hover-color: #64ffda33; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--bg-dark); position: relative; color: var(--text-secondary); } /* Matrix rain effect */ .matrix-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0.1; } .navbar { position: fixed; top: 0; left: 0; right: 0; background: rgba(10, 25, 47, 0.9); padding: 1rem; border-bottom: 1px solid var(--text-primary); z-index: 1000; } .nav-links { display: flex; justify-content: flex-end; gap: 2rem; max-width: 1200px; margin: 0 auto; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 1rem; transition: color 0.3s ease; position: relative; } .nav-links a:hover { color: var(--text-primary); } .nav-links a::before { content: '>'; color: var(--text-primary); margin-right: 5px; opacity: 0; transition: opacity 0.3s ease; } .nav-links a:hover::before { opacity: 1; } .registration-container { background: rgba(10, 25, 47, 0.95); padding: 2.5rem; border-radius: 8px; border: 1px solid var(--text-primary); width: 90%; max-width: 450px; position: relative; z-index: 10; box-shadow: 0 0 20px var(--hover-color); } .close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-family: monospace; font-size: 1.5rem; } .close-btn:hover { color: var(--text-primary); } h1 { color: var(--text-primary); margin-bottom: 2rem; font-size: 1.5rem; position: relative; } h1::before { content: '// '; color: var(--text-secondary); } .form-group { margin-bottom: 1.5rem; position: relative; } .form-group::before { content: 'const'; position: absolute; left: -45px; color: #ff79c6; font-size: 0.9rem; top: 50%; transform: translateY(-50%); opacity: 0.7; } .form-group input { width: 100%; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--text-secondary); border-radius: 4px; color: #fff; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus { outline: none; border-color: var(--text-primary); box-shadow: 0 0 10px var(--hover-color); } .form-group input::placeholder { color: var(--text-secondary); opacity: 0.7; } .checkbox-group { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0; padding-left: 1rem; } .checkbox-group input[type="checkbox"] { width: 1.2rem; height: 1.2rem; background: transparent; border: 1px solid var(--text-secondary); cursor: pointer; } .register-btn { width: 100%; padding: 1rem; background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 4px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .register-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--hover-color); transform: translate(-50%, -50%); border-radius: 50%; transition: width 0.6s, height 0.6s; } .register-btn:hover::before { width: 300px; height: 300px; } .register-btn span { position: relative; z-index: 1; } .login-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; } .login-link a { color: var(--text-primary); text-decoration: none; } .login-link a:hover { text-decoration: underline; } .typed-cursor { display: inline-block; width: 2px; height: 1.2em; background: var(--text-primary); margin-left: 5px; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } </style> </head> <body> <canvas class="matrix-bg" id="matrix"></canvas> <nav class="navbar"> <div class="nav-links"> <a href="#home">home</a> <a href="#about">about</a> <a href="#services">services</a> <a href="#contact">contact</a> </div> </nav> <div class="registration-container"> <button class="close-btn">×</button> <h1>Developer Registration<span class="typed-cursor"></span></h1> <form id="registrationForm"> <div class="form-group"> <input type="text" id="username" placeholder="username = ' '" required> </div> <div class="form-group"> <input type="email" id="email" placeholder="email = ' '" required> </div> <div class="form-group"> <input type="password" id="password" placeholder="password = ' '" required> </div> <div class="checkbox-group"> <input type="checkbox" id="terms" required> <label for="terms">I agree to the terms && conditions</label> </div> <button type="submit" class="register-btn"> <span>npm install developer</span> </button> <div class="login-link"> <span>// Already registered? <a href="#login">Login here</a></span> </div> </form> </div> <script> // Matrix rain effect const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%'.split(''); const fontSize = 14; const columns = canvas.width / fontSize; const drops = new Array(Math.floor(columns)).fill(1); function drawMatrix() { ctx.fillStyle = 'rgba(10, 25, 47, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#64ffda'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) { const text = chars[Math.floor(Math.random() * chars.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) { drops[i] = 0; } drops[i]++; } } setInterval(drawMatrix, 50); // Form handling document.getElementById('registrationForm').addEventListener('submit', function(e) { e.preventDefault(); const username = document.getElementById('username').value; const email = document.getElementById('email').value; const password = document.getElementById('password').value; if (username && email && password) { console.log(` // User Registration Success { username: "${username}", email: "${email}", timestamp: "${new Date().toISOString()}" }`); alert('Registration successful! Check console for details.'); this.reset(); } }); document.querySelector('.close-btn').addEventListener('click', function() { document.querySelector('.registration-container').style.display = 'none'; }); // Window resize handling window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); </script> </body> </html>
CSS
Copy
/* Main variables and reset */ :root { --bg-dark: #0a192f; --text-primary: #64ffda; --text-secondary: #8892b0; --hover-color: #64ffda33; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Consolas', 'Courier New', monospace; } /* Body and background styles */ body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--bg-dark); position: relative; color: var(--text-secondary); } /* Matrix background canvas */ .matrix-bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0.1; } /* Navigation styles */ .navbar { position: fixed; top: 0; left: 0; right: 0; background: rgba(10, 25, 47, 0.9); padding: 1rem; border-bottom: 1px solid var(--text-primary); z-index: 1000; } .nav-links { display: flex; justify-content: flex-end; gap: 2rem; max-width: 1200px; margin: 0 auto; } .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 1rem; transition: color 0.3s ease; position: relative; } .nav-links a:hover { color: var(--text-primary); } .nav-links a::before { content: '>'; color: var(--text-primary); margin-right: 5px; opacity: 0; transition: opacity 0.3s ease; } .nav-links a:hover::before { opacity: 1; } /* Registration container styles */ .registration-container { background: rgba(10, 25, 47, 0.95); padding: 2.5rem; border-radius: 8px; border: 1px solid var(--text-primary); width: 90%; max-width: 450px; position: relative; z-index: 10; box-shadow: 0 0 20px var(--hover-color); } /* Close button styles */ .close-btn { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: var(--text-secondary); cursor: pointer; font-family: monospace; font-size: 1.5rem; } .close-btn:hover { color: var(--text-primary); } /* Heading styles */ h1 { color: var(--text-primary); margin-bottom: 2rem; font-size: 1.5rem; position: relative; } h1::before { content: '// '; color: var(--text-secondary); } /* Form group styles */ .form-group { margin-bottom: 1.5rem; position: relative; } .form-group::before { content: 'const'; position: absolute; left: -45px; color: #ff79c6; font-size: 0.9rem; top: 50%; transform: translateY(-50%); opacity: 0.7; } .form-group input { width: 100%; padding: 0.8rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--text-secondary); border-radius: 4px; color: #fff; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus { outline: none; border-color: var(--text-primary); box-shadow: 0 0 10px var(--hover-color); } .form-group input::placeholder { color: var(--text-secondary); opacity: 0.7; } /* Checkbox group styles */ .checkbox-group { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0; padding-left: 1rem; } .checkbox-group input[type="checkbox"] { width: 1.2rem; height: 1.2rem; background: transparent; border: 1px solid var(--text-secondary); cursor: pointer; } /* Register button styles */ .register-btn { width: 100%; padding: 1rem; background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: 4px; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; } .register-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: var(--hover-color); transform: translate(-50%, -50%); border-radius: 50%; transition: width 0.6s, height 0.6s; } .register-btn:hover::before { width: 300px; height: 300px; } .register-btn span { position: relative; z-index: 1; } /* Login link styles */ .login-link { text-align: center; margin-top: 1.5rem; font-size: 0.9rem; } .login-link a { color: var(--text-primary); text-decoration: none; } .login-link a:hover { text-decoration: underline; } /* Typing cursor animation */ .typed-cursor { display: inline-block; width: 2px; height: 1.2em; background: var(--text-primary); margin-left: 5px; animation: blink 1s infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* Responsive styles */ @media (max-width: 768px) { .registration-container { padding: 2rem; margin: 1rem; } .form-group::before { display: none; } }
JS
Copy
// Matrix rain effect implementation class MatrixRain { constructor() { this.canvas = document.getElementById('matrix'); this.ctx = this.canvas.getContext('2d'); // Set canvas dimensions this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; // Matrix characters this.chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%'.split(''); // Configuration this.fontSize = 14; this.columns = this.canvas.width / this.fontSize; this.drops = new Array(Math.floor(this.columns)).fill(1); // Bind methods this.draw = this.draw.bind(this); this.handleResize = this.handleResize.bind(this); // Initialize this.init(); } init() { // Start animation setInterval(this.draw, 50); // Add resize listener window.addEventListener('resize', this.handleResize); } draw() { // Create fade effect this.ctx.fillStyle = 'rgba(10, 25, 47, 0.05)'; this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); // Set character style this.ctx.fillStyle = '#64ffda'; this.ctx.font = this.fontSize + 'px monospace'; // Draw characters for (let i = 0; i < this.drops.length; i++) { const text = this.chars[Math.floor(Math.random() * this.chars.length)]; this.ctx.fillText(text, i * this.fontSize, this.drops[i] * this.fontSize); // Reset drop when it reaches bottom if (this.drops[i] * this.fontSize > this.canvas.height && Math.random() > 0.975) { this.drops[i] = 0; } this.drops[i]++; } } handleResize() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; this.columns = this.canvas.width / this.fontSize; this.drops = new Array(Math.floor(this.columns)).fill(1); } } // Form handling class class RegistrationForm { constructor() { this.form = document.getElementById('registrationForm'); this.closeBtn = document.querySelector('.close-btn'); this.init(); } init() { // Add form submit handler this.form.addEventListener('submit', this.handleSubmit.bind(this)); // Add close button handler this.closeBtn.addEventListener('click', this.handleClose.bind(this)); // Add input animations this.addInputEffects(); } handleSubmit(e) { e.preventDefault(); const formData = { username: document.getElementById('username').value, email: document.getElementById('email').value, password: document.getElementById('password').value }; if (this.validateForm(formData)) { this.submitForm(formData); } } validateForm(data) { return data.username && data.email && data.password; } submitForm(data) { // Log registration data in console in a dev-friendly format console.log(` // User Registration Success { username: "${data.username}", email: "${data.email}", timestamp: "${new Date().toISOString()}" }`); // Show success message alert('Registration successful! Check console for details.'); // Reset form this.form.reset(); } handleClose() { document.querySelector('.registration-container').style.display = 'none'; } addInputEffects() { const inputs = this.form.querySelectorAll('input[type="text"], input[type="email"], input[type="password"]'); inputs.forEach(input => { // Add focus effects input.addEventListener('focus', () => { input.parentElement.classList.add('focused'); }); input.addEventListener('blur', () => { input.parentElement.classList.remove('focused'); }); }); } } // Cursor animation class class TerminalCursor { constructor() { this.cursor = document.querySelector('.typed-cursor'); this.init(); } init() { // Cursor is already animated via CSS // This class can be extended to add more terminal-like effects } } // Initialize everything when DOM is loaded document.addEventListener('DOMContentLoaded', () => { const matrixRain = new MatrixRain(); const registrationForm = new RegistrationForm(); const terminalCursor = new TerminalCursor(); });
