Webleb - UI Elements - Bir garib giriş sayfası

HTML

<!DOCTYPE html>

<head>

<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>

<a href="#about">about</a>

<a href="#services">services</a>

<a href="#contact">contact</a>

</div>

</nav>

<h1>Developer Registration<span class="typed-cursor"></span></h1>

</div>

</div>

</div>

<label for="terms">I agree to the terms && conditions</label>

</div>

<span>npm install developer</span>

</button>

<span>// Already registered? <a href="#login">Login here</a></span>

</div>

</form>

</div>

// 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

/* 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

// 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();

});

Bir garib giriş sayfası

Recommended