Webleb - Extraits de Code - Une page d'accueil bizarre

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

});

Une page d'accueil bizarre

Recommandé

Onglet surchargé

Modèle gratuit de page d'accueil

Extrait de code HTML pour menu burger

HTML

CSS

JS

Recommandé

Onglet surchargé

Modèle gratuit de page d'accueil

Extrait de code HTML pour menu burger

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS