Gestion de numeros dms - Freelance Job in Web design

About this project

Open

<!Doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestión de Usuarios</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
#dms-container {
position: absolute;
top: 10px;
left: 10px;
background-color: lightgray;
padding: 10px;
border-radius: 5px;
}
#dms {
font-weight: bold;
font-size: 24px;
}
.btn-container {
margin-top: 50px;
display: flex;
justify-content: center;
gap: 20px;
}
#createUserBtn, #gestionIngresosBtn {
font-size: 14px;
padding: 15px 30px;
cursor: pointer;
}
.user-list {
margin-top: 40px;
width: 100%;
}
.user-item {
background-color: lightgray;
padding: 10px;
margin-bottom: 10px;
border: 1px solid gray;
display: flex;
justify-content: space-between;
align-items: center;
}
.user-item.subagent {
background-color: lightgreen; /* Color para subagente */
}
.user-buttons button {
margin-left: 10px;
}
.gestion-form {
margin-top: 10px;
}
.modal {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.modal input {
margin-top: 10px;
padding: 5px;
width: 100%;
}
.modal button {
margin-top: 10px;
padding: 5px;
width: 100%;
}
</style>
</head>
<body>
<div id="dms-container">
<div id="dms">DMS: 1.000</div>
</div>

<div class="btn-container">
<button id="createUserBtn" onclick="crearUsuario()">Crear Usuario</button>
<button id="gestionIngresosBtn" onclick="abrirModalDMS()">Gestión de Ingresos</button>
</div>

<div class="user-list" id="userList"></div>


<div class="modal" id="modalGestionUsuario">
<label for="montoInputUsuario">¿Cuánto le quieres mover al usuario?:</label>
<input type="number" id="montoInputUsuario" step="any" oninput="limitarDecimales(this)">
<button onclick="procesarGestionUsuario()">Confirmar</button>
<button onclick="cerrarModal('modalGestionUsuario')">Cancelar</button>
</div>


<div class="modal" id="modalGestionDMS">
<label for="montoInputDMS">¿Cuánto quieres mover de DMS?:</label>
<input type="number" id="montoInputDMS" step="any" oninput="limitarDecimales(this)">
<button onclick="procesarGestionDMS()">Confirmar</button>
<button onclick="cerrarModal('modalGestionDMS')">Cancelar</button>
</div>

<script>
let dms = 1000;
let userInfoGlobal = null;

document.getElementById('dms').innerText = 'DMS: ' + dms.toFixed(2);

function crearUsuario() {
const nombre = prompt("Ingrese el nombre del usuario:");
if (!nombre) {
alert("Debe ingresar un nombre válido.");
Return;
}

const password = prompt("Ingrese la contraseña del usuario:");
if (!password) {
alert("Debe ingresar una contraseña.");
Return;
}

agregarUsuario(nombre);
}

function agregarUsuario(nombre) {
const userList = document.getElementById("userList");

const userItem = document.createElement("div");
userItem.className = "user-item";

const userInfo = document.createElement("span");
userInfo.className = "user-info";
userInfo.innerText = nombre + " - Monto: 0.00"; // Solo mostrar el nombre y el monto
userItem.appendChild(userInfo);

const buttonsDiv = document.createElement("div");
buttonsDiv.className = "user-buttons";

const btnGestionIngreso = document.createElement("button");
btnGestionIngreso.innerText = "Gestión Ingreso";
btnGestionIngreso.onclick = () => abrirModalUsuario(userInfo);
buttonsDiv.appendChild(btnGestionIngreso);

const btnGestion = document.createElement("button");
btnGestion.innerText = "Gestión";
btnGestion.onclick = () => toggleGestion(userItem, userInfo);
buttonsDiv.appendChild(btnGestion);

userItem.appendChild(buttonsDiv);
userList.appendChild(userItem);
}

function abrirModalUsuario(userInfo) {
userInfoGlobal = userInfo; // Guardamos el usuario seleccionado
document.getElementById("modalGestionUsuario").style.display = "block";
}

function abrirModalDMS() {
document.getElementById("modalGestionDMS").style.display = "block";
}

function cerrarModal(modalId) {
document.getElementById(modalId).style.display = "none";
userInfoGlobal = null;
}

function procesarGestionUsuario() {
const monto = parseFloat(document.getElementById("montoInputUsuario").value);
if (!isNaN(monto)) {
const currentMonto = obtenerMontoUsuario(userInfoGlobal);
if (monto < 0) {
const montoAbsoluto = Math.abs(monto);
if (currentMonto >= montoAbsoluto) {
actualizarMontoUsuario(userInfoGlobal, currentMonto - montoAbsoluto);
dms += montoAbsoluto;
actualizarDMS();
} else {
alert("El usuario no tiene suficiente saldo.");
}
} Else {
if (dms >= monto) {
actualizarMontoUsuario(userInfoGlobal, currentMonto + monto);
dms -= monto;
actualizarDMS();
} else {
alert("No tienes suficiente DMS.");
}
}
} Else {
alert("Monto inválido.");
}
CerrarModal('modalGestionUsuario'); // Cierra el modal después de la gestión
}

function procesarGestionDMS() {
const monto = parseFloat(document.getElementById("montoInputDMS").value);
if (!isNaN(monto)) {
if (monto < 0) {
const montoAbsoluto = Math.abs(monto);
if (dms >= montoAbsoluto) {
dms += monto;
actualizarDMS();
} else {
alert("No tienes suficiente DMS.");
}
} Else {
dms += monto;
actualizarDMS();
}
} else {
alert("Monto inválido.");
}
CerrarModal('modalGestionDMS'); // Cierra el modal después de la gestión
}

function obtenerMontoUsuario(userInfo) {
const montoTexto = userInfo.innerText.split(": ")[1];
return parseFloat(montoTexto);
}

function actualizarMontoUsuario(userInfo, nuevoMonto) {
const nombre = userInfo.innerText.split(" - ")[0];
userInfo.innerText = `${nombre} - Monto: ${nuevoMonto.toFixed(2)}`;
}

function actualizarDMS() {
document.getElementById('dms').innerText = 'DMS: ' + dms.toFixed(2);
}

function toggleGestion(userItem, userInfo) {
const existingForm = userItem.querySelector(".gestion-form");

if (existingForm) {
existingForm.remove(); // Si ya hay un formulario, lo elimina
} else {
const gestionForm = document.createElement("div");
gestionForm.className = "gestion-form";

const subagent = userItem.classList.contains("subagent");
const accion = subagent ? "Sacar de SubAgente" : "Subir a SubAgente";
const subagentBtn = document.createElement("button");
subagentBtn.innerText = accion;
subagentBtn.onclick = () => toggleSubagente(userItem);
gestionForm.appendChild(subagentBtn);

const eliminarBtn = document.createElement("button");
eliminarBtn.innerText = "Eliminar Usuario";
eliminarBtn.onclick = () => eliminarUsuario(userItem, userInfo);
gestionForm.appendChild(eliminarBtn);

userItem.appendChild(gestionForm);
}
}

function toggleSubagente(userItem) {
userItem.classList.toggle("subagent"); // Cambia la clase para cambiar el color
toggleGestion(userItem); // Oculta el formulario después de cambiar el estado
}

function eliminarUsuario(userItem, userInfo) {
const montoUsuario = obtenerMontoUsuario(userInfo);
if (montoUsuario > 0) {
alert("No puedes eliminar un usuario con montos disponibles.");
} Else if (confirm("¿Seguro que quieres eliminar al usuario?")) {
userItem.remove();
}
}

function limitarDecimales(input) {
// Limitar a dos dígitos después del punto decimal
const valor = input.value;
if (valor.includes(".")) {
Const partes = valor.split(".");
If (partes[1].length > 2) {
input.value = partes[0] + "." + Partes[1].substring(0, 2);
}
}
}
</script>
</body>
</html>

Quiero que este código se le ponga más decoración, más opciones y mas cosas.
Este es un código en donde puedes crear usuarios, los puedes hacer subagentes y puedes controlar la cantidad de monto que tienen.

Project overview

Este es un proyecto hecho para después conectarlo a una base de datos y poder operar cosas más fácil.

Category Design & Multimedia
Subcategory Web design
What do you need? Medium-sized change
Is this a project or a position? Project
Required availability As needed

Delivery term: Not specified

Skills needed

HTML CSS JavaScript

Gestión de números (Dms)

About this project

design-multimedia / web-design-1

Open

Other projects posted by J. D. B.