WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Uma página inicial estranha
1349
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
13 June 2024
26 May 2025
Um Código por mironovbogdan341
6 November 2024
Gradiente do cursor do mouse
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(); });
