testings

Open In Editor Publish Your Code

HTML

<?php
session_start();
include 'config.php';

$errors = [];
$username = $email = '';

// Generate CSRF token
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // CSRF token validation
    if (!isset($_POST['csrf_token']) || !hash_equals($_SESSION['csrf_token'], $_POST['csrf_token'])) {
        $errors[] = "Invalid request.";
    }

// Honeypot field to detect bots
    if (!empty($_POST['hidden_field'])) {
        die("Bot detected!");
    }

// Sanitize input
    $username = htmlspecialchars(trim($_POST['username']), ENT_QUOTES, 'UTF-8');
    $email = filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL);
    $password = trim($_POST['password']);

// Validate username (letters only, 8–16 chars)
    if (!preg_match("/^[A-Za-z]{8,16}$/", $username)) {
        $errors[] = "Username must be 8–16 characters long and contain only letters.";
    }

// Validate email
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $errors[] = "Invalid email format.";
    }

// Validate password
    if (!preg_match('/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/', $password)) {
        $errors[] = "Password must be at least 8 characters long, include upper/lowercase letters, a number, and a special character.";
    }

if (empty($errors)) {
        // Check if username or email already exists
        $checkStmt = $conn->prepare("SELECT id FROM users WHERE username = ? OR email = ?");
        $checkStmt->bind_param("ss", $username, $email);
        $checkStmt->execute();
        $checkStmt->store_result();

if ($checkStmt->num_rows > 0) {
            $errors[] = "Username or email already exists.";
        } else {
            // Insert new user
            $hashed_password = password_hash($password, PASSWORD_DEFAULT);
            $insertStmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
            $insertStmt->bind_param("sss", $username, $email, $hashed_password);

if ($insertStmt->execute()) {
                session_regenerate_id(true);
                $_SESSION['success'] = "Registration successful. Please login.";
                header("Location: login.php");
                exit();
            } else {
                $errors[] = "An unexpected error occurred. Please try again.";
            }
            $insertStmt->close();
        }
        $checkStmt->close();
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Registration</title>
    <link rel="stylesheet" href="style.css">
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <script>
        // Enforce letters only while typing
        function enforceLettersOnly(event) {
            event.target.value = event.target.value.replace(/[^A-Za-z]/g, '');
            updateUsernameIndicator(event.target.value.length);
        }

// Prevent pasting invalid characters
        function sanitizeOnPaste(event) {
            event.preventDefault();
            const text = (event.clipboardData || window.clipboardData).getData('text');
            const sanitized = text.replace(/[^A-Za-z]/g, '');
            event.target.value += sanitized;
            updateUsernameIndicator(event.target.value.length);
        }

// Update username character indicator
        function updateUsernameIndicator(length) {
            const indicator = document.getElementById('username-indicator');
            if (length === 0) {
                indicator.style.display = 'none';
            } else {
                indicator.style.display = 'block';
                if (length < 8) {
                    indicator.textContent = `Username: ${length}/8–16 (too short)`;
                    indicator.style.color = 'red';
                } else if (length > 16) {
                    indicator.textContent = `Username: ${length}/8–16 (too long)`;
                    indicator.style.color = 'red';
                } else {
                    indicator.textContent = `Username: ${length}/8–16 (valid)`;
                    indicator.style.color = 'black';
                }
            }
        }

// Disable right-click and key shortcuts
        document.addEventListener('contextmenu', event => event.preventDefault());
        document.addEventListener('keydown', function (e) {
            if (
                e.key === "F12" || 
                (e.ctrlKey && e.shiftKey && (e.key === "I" || e.key === "J")) || 
                (e.ctrlKey && e.key === "U") || 
                (e.ctrlKey && e.key === "S")
            ) {
                e.preventDefault();
            }
        });

// Detect Developer Tools by window resize (redirect if detected)
        let devtoolsOpen = false;
        const threshold = 160;
        setInterval(() => {
            if (window.outerWidth - window.innerWidth > threshold || 
                window.outerHeight - window.innerHeight > threshold) {
                if (!devtoolsOpen) {
                    devtoolsOpen = true;
                    window.location.href = "about:blank";
                }
            } else {
                devtoolsOpen = false;
            }
        }, 500);
    </script>
</head>
<body>
    
<div class="form-container">
    <h2>User Registration</h2>

<?php if (!empty($errors)): ?>
        <div class="error-box">
            <?php foreach ($errors as $error): ?>
                <p><?= htmlspecialchars($error, ENT_QUOTES, 'UTF-8') ?></p>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

<div class="input-group">
            <i class="fa fa-user"></i>
            <input type="text"
                   name="username"
                   placeholder="Username"
                   value="<?= htmlspecialchars($username) ?>"
                   required
                   minlength="8"
                   maxlength="16"
                   pattern="[A-Za-z]{8,16}"
                   title="Username must be 8–16 letters only"
                   oninput="enforceLettersOnly(event)"
                   onpaste="sanitizeOnPaste(event)">
        </div>
        
        <small id="username-indicator" style="display:none; text-align:left; margin-bottom:10px; font-size:12px;">
            Username: 0/8–16
        </small>

<div class="input-group">
            <i class="fa fa-envelope"></i>
            <input type="email" name="email" placeholder="Email" value="<?= htmlspecialchars($email) ?>" required>
        </div>

<div class="input-group">
            <i class="fa fa-lock"></i>
            <input type="password" name="password" placeholder="Password" required>
        </div>

<button type="submit">Register</button>
    </form>
    <p>Already have an account? <a href="login.php">Login here</a>.</p>
</div>

</body>
</html>

CSS

/* ============================
   Reset and Base Styles
============================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
    background-color: #1a1a1a;
    color: #fff;
}

/* ============================
   Network Canvas Background
============================ */
#network-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ============================
   Form Container
============================ */
.form-container {
    position: relative;
    background: rgba(37, 35, 35, 0.623);
    padding: 30px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    width: 350px;
    text-align: center;
    backdrop-filter: blur(10px);
    transition: transform 0.4s ease, background 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 1;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

.form-container:hover {
    transform: translateY(-50%) scale(1.03);
    background: rgba(3, 3, 3, 0.2);
}

.form-container h2 {
    margin-bottom: 20px;
    font-weight: bold;
}

/* ============================
   Input Group (with Icons)
============================ */
.input-group {
    position: relative;
    margin-bottom: 15px;
    width: 100%;
}

.input-group i {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    pointer-events: none;
    z-index: 1;
}

.input-group input {
    width: 100%;
    padding: 12px 12px 12px 40px; /* Space for icon */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.input-group input:focus {
    border-color: #3498db;
    background: rgba(255, 255, 255, 0.25);
}

/* ============================
   Buttons
============================ */
button {
    width: 100%;
    padding: 12px;
    background: #3498db;
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

button:hover {
    background: #2980b9;
    transform: scale(1.05);
}

/* ============================
   Error and Success Messages
============================ */
.error-box,
.success-box {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
}

.error-box {
    background: rgba(231, 76, 60, 0.85);
    color: #fff;
}

.success-box {
    background: rgba(46, 204, 113, 0.85);
    color: #fff;
}

/* ============================
   Links
============================ */
p {
    margin-top: 15px;
    font-size: 14px;
}

a {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

a:hover {
    text-decoration: underline;
    color: #2980b9;
}

/* ============================
   Responsive Design
============================ */
@media (max-width: 400px) {
    .form-container {
        width: 90%;
        padding: 20px;
    }
}

JS

const canvas = document.getElementById('network-canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const nodes = [];
const maxNodes = 100;
const maxDistance = 100;

class Node {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.vx = (Math.random() - 0.5) * 2;
        this.vy = (Math.random() - 0.5) * 2;
    }

update() {
        this.x += this.vx;
        this.y += this.vy;

if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
        if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
    }

draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, 2, 0, Math.PI * 2);
        ctx.fillStyle = '#00ffcc';
        ctx.fill();
    }
}

for (let i = 0; i < maxNodes; i++) {
    nodes.push(new Node(Math.random() * canvas.width, Math.random() * canvas.height));
}

function drawConnections() {
    for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
            const dx = nodes[i].x - nodes[j].x;
            const dy = nodes[i].y - nodes[j].y;
            const distance = Math.sqrt(dx * dx + dy * dy);

if (distance < maxDistance) {
                ctx.beginPath();
                ctx.moveTo(nodes[i].x, nodes[i].y);
                ctx.lineTo(nodes[j].x, nodes[j].y);
                ctx.strokeStyle = `rgba(0, 255, 204, ${1 - distance / maxDistance})`;
                ctx.stroke();
            }
        }
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

for (const node of nodes) {
        node.update();
        node.draw();
    }

drawConnections();

requestAnimationFrame(animate);
}

animate();

window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS