Scribd
Upload
3 views

DMP?

The document is an HTML template for a login interface and user panel, featuring a dark theme with glowing effects. It includes a login form, a sidebar menu for navigation, and sections for user information, aimbot settings, easy headshot options, and configuration. The JavaScript handles user login and dynamic section display based on menu selection.

Uploaded by

frailisan01
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views

DMP?

The document is an HTML template for a login interface and user panel, featuring a dark theme with glowing effects. It includes a login form, a sidebar menu for navigation, and sections for user information, aimbot settings, easy headshot options, and configuration. The JavaScript handles user login and dynamic section display based on menu selection.

Uploaded by

frailisan01
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BIG DOOA</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #111;
color: #fff;
}

.hidden {
display: none;
}

.login-container {
text-align: center;
background: #222;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 255, 0.6); /* Azul Glow */
position: absolute; /* Cambié esto para posicionarlo */
top: 50%; /* Centrado verticalmente */
left: 50%; /* Centrado horizontalmente */
transform: translate(-50%, -50%); /* Ajuste para realmente centrarlo */
color: #00ffff; /* Texto con azul claro */
}

.login-container h2 {
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff; /* Glow azul */
}

.login-container input {
background: #333;
color: #fff;
border: 2px solid #00ffff;
padding: 10px;
border-radius: 4px;
margin: 10px;
box-shadow: 0 0 5px rgba(0, 255, 255, 0.6); /* Resplandor azul */
}

.login-container button {
background: #00ffff;
color: #111;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
box-shadow: 0 0 5px rgba(0, 255, 255, 0.6); /* Resplandor azul */
transition: all 0.3s ease;
}

.login-container button:hover {
background: #00b8b8;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); /* Efecto Glow más fuerte al
pasar el mouse */
}

.panel-container {
display: flex;
width: 100%;
height: 100%;
visibility: hidden; /* Aseguramos que el panel esté oculto inicialmente */
}

.sidebar {
width: 200px;
background: #333;
padding: 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0 0 20px rgba(255, 0, 255, 0.6); /* Magenta Glow */
}

.sidebar h3 {
margin-bottom: 20px;
align-self: center;
color: #ff00ff; /* Magenta color */
text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; /* Glow magenta */
}

.avatar {
width: 80px;
height: 80px;
background: #555;
color: #fff;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
align-self: center;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(255, 0, 255, 0.6); /* Magenta Glow */
}

.info {
margin-bottom: 20px;
text-align: left;
}

.info p {
margin: 10px 0;
}

.menu {
width: 100%;
}

.menu-item {
padding: 10px;
margin-bottom: 5px;
width: 100%;
background: #444;
color: #fff;
text-align: left;
cursor: pointer;
border-radius: 4px;
transition: 0.3s;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); /* Azul Glow */
}

.menu-item:hover,
.menu-item.active {
background: #00b8b8;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.8); /* Efecto azul más fuerte */
}

.main-panel {
flex-grow: 1;
background: #222;
padding: 20px;
border-radius: 0 8px 8px 0;
}

.main-panel h2 {
margin-bottom: 20px;
color: #ff00ff; /* Magenta */
text-shadow: 0 0 10px #ff00ff, 0 0 20px #ff00ff; /* Glow magenta */
}

.section {
display: none;
}

.section.active {
display: block;
}

.option {
display: flex;
justify-content: space-between;
align-items: center;
background: #333;
padding: 10px;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 0 0 10px rgba(0, 255, 255, 0.6); /* Azul Glow */
}

.option span {
font-size: 18px;
}

.switch {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}

input:checked + .slider {
background-color: #ff00ff; /* Magenta */
}

input:checked + .slider:before {
transform: translateX(20px);
}
</style>
</head>
<body>
<div class="login-container" id="login-container">
<h2>Iniciar Sesión</h2>
<form id="login-form">
<input type="text" id="username" placeholder="Usuario" required>
<input type="password" id="password" placeholder="Contraseña" required>
<button type="submit">Entrar</button>
</form>
<p id="login-message"></p>
</div>

<div class="panel-container hidden" id="panel-container">


<div class="sidebar">
<div class="avatar" id="avatar">U</div>
<div class="menu">
<div class="menu-item active" data-section="user-info">User
Información</div>
<div class="menu-item" data-section="aimbot">Aimbot 🔫</div>
<div class="menu-item" data-section="easy-headshot">Easy Headshot 💥</div>
<div class="menu-item" data-section="config">Configuración ⚙️</div> <!--
Nuevo item de menú -->
</div>
</div>

<div class="main-panel">
<div class="section active" id="user-info">
<h2>Información de Usuario</h2>
<p><strong>Usuario:</strong> <span id="user-info-display"></span></p>
<p><strong>Contraseña:</strong> <span
id="password-info-display"></span></p>
<p><strong>Status:</strong> VIP</p>
</div>

<div class="section" id="aimbot">


<h2>Aimbot 🔫</h2>
<div class="option">
<span>Aim Lock 🎯</span>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="option">
<span>No Recoil 🚀</span>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
<div class="option">
<span>Precision 🧿</span>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</div>

<div class="section" id="easy-headshot">


<h2>Easy Headshot 💥</h2>
<div class="option">
<span>Inyectar ESP ANTENA</span>
<input type="file" id="file-input" accept=".so, .txt">
</div>
<div class="option">
<span>No Yellow Crosshair ➕</span>
<label class="switch">
<input type="checkbox">
<span class="slider"></span>
</label>
</div>
</div>
<!-- Sección de configuración -->
<div class="section" id="config">
<h2>Configuración ⚙️</h2>
<div class="option">
<span>Inyectar Config</span>
<input type="file" id="config-input" accept=".config, .txt">
</div>
</div>
</div>
</div>

<script>
// Inicio de sesión
document.getElementById('login-form').addEventListener('submit', function(e) {
e.preventDefault();
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username && password) {
document.getElementById('login-container').classList.add('hidden');
document.getElementById('panel-container').classList.remove('hidden');
document.getElementById('panel-container').style.visibility = 'visible'; //
Mostramos el panel
document.getElementById('user-info-display').textContent = username;
document.getElementById('password-info-display').textContent = password; //
Contraseña visible
document.getElementById('avatar').textContent =
username.charAt(0).toUpperCase() + username.charAt(1).toUpperCase(); // Mostrar
iniciales del usuario
} else {
document.getElementById('login-message').textContent = 'Por favor ingresa
tus credenciales.';
}
});

// Panel de usuario y otras secciones


document.querySelectorAll('.menu-item').forEach(item => {
item.addEventListener('click', function() {
document.querySelectorAll('.menu-item').forEach(menu =>
menu.classList.remove('active'));
item.classList.add('active');
const sectionId = item.getAttribute('data-section');
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});
document.getElementById(sectionId).classList.add('active');
});
});
</script>
</body>
</html>

You might also like