Dashboard di amministrazione pulita e reattiva

2064 ahmedakhi426

Apri nell'Editor Pubblica il Tuo Codice

Dashboard di amministrazione pulita e reattiva

Consigliato

27 September 2024

Pulsante al passaggio del mouse

3 June 2025

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Admin Dashboard</title>
  <link rel="stylesheet" href="styles.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>
  <div class="dashboard">
    
    <div class="sidebar">
      <div class="logo">Admin Panel</div>
      <ul>
        <li class="active"><a href="#"><i class="fas fa-home"></i> Dashboard</a></li>
        <li><a href="#"><i class="fas fa-users"></i> Users</a></li>
        <li><a href="#"><i class="fas fa-box"></i> Products</a></li>
        <li><a href="#"><i class="fas fa-cog"></i> Settings</a></li>
        <li><a href="#"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
      </ul>
    </div>

<div class="main-content">
      
      <div class="header">
        <div class="header-left">
          <h1>Dashboard</h1>
        </div>
        <div class="header-right">
          <div class="search-bar">
            <input type="text" placeholder="Search...">
            <i class="fas fa-search"></i>
          </div>
          <div class="notifications">
            <i class="fas fa-bell"></i>
            <span class="badge">3</span>
          </div>
          <div class="user-profile">
            <img src="https://via.placeholder.com/40" alt="User">
            <div class="dropdown">
              <a href="#">Settings</a>
              <a href="#">Logout</a>
            </div>
          </div>
        </div>
      </div>

<div class="content">
        <div class="card">
          <h2>Users</h2>
          <button id="add-user-btn" class="btn">Add User</button>
          <table id="user-table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Role</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

<div id="add-user-modal" class="modal">
    <div class="modal-content">
      <span class="close">×</span>
      <h2>Add User</h2>
      <form id="user-form">
        <label for="name">Name</label>
        <input type="text" id="name" required>
        <label for="email">Email</label>
        <input type="email" id="email" required>
        <label for="role">Role</label>
        <input type="text" id="role" required>
        <button type="submit">Save</button>
      </form>
    </div>
  </div>

CSS

/* General Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
  }
  
  body {
    background-color: #f4f7fa;
    color: #333;
  }
  
  .dashboard {
    display: flex;
    min-height: 100vh;
  }
  
  /* Sidebar */
  .sidebar {
    width: 250px;
    background-color: #2c3e50;
    color: #fff;
    padding: 20px;
  }
  
  .sidebar .logo {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 30px;
  }
  
  .sidebar ul {
    list-style: none;
  }
  
  .sidebar ul li {
    margin: 15px 0;
  }
  
  .sidebar ul li a {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
  }
  
  .sidebar ul li a i {
    margin-right: 10px;
  }
  
  .sidebar ul li.active a {
    color: #1abc9c;
  }
  
  /* Main Content */
  .main-content {
    flex: 1;
    background-color: #f4f7fa;
  }
  
  /* Header */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .header-left h1 {
    font-size: 24px;
    font-weight: 700;
  }
  
  .header-right {
    display: flex;
    align-items: center;
  }
  
  .search-bar {
    position: relative;
    margin-right: 20px;
  }
  
  .search-bar input {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 200px;
  }
  
  .search-bar i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
  }
  
  .notifications {
    position: relative;
    margin-right: 20px;
    cursor: pointer;
  }
  
  .notifications .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #e74c3c;
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
  }
  
  .user-profile {
    position: relative;
    cursor: pointer;
  }
  
  .user-profile img {
    border-radius: 50%;
  }
  
  .user-profile .dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 10px;
    z-index: 1;
  }
  
  .user-profile .dropdown a {
    display: block;
    padding: 5px 0;
    color: #333;
    text-decoration: none;
  }
  
  .user-profile:hover .dropdown {
    display: block;
  }
  
  /* Content */
  .content {
    padding: 20px;
  }
  
  .card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .card h2 {
    margin-bottom: 20px;
  }
  
  .btn {
    padding: 8px 16px;
    background-color: #1abc9c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .btn:hover {
    background-color: #16a085;
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
  }
  
  table th, table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }
  
  table th {
    background-color: #f8f9fa;
  }
  
  table tr:hover {
    background-color: #f1f1f1;
  }
  
  /* Modal */
  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }
  
  .modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    position: relative;
  }
  
  .modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
  }
  
  .modal h2 {
    margin-bottom: 20px;
  }
  
  .modal form label {
    display: block;
    margin-bottom: 5px;
  }
  
  .modal form input {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .modal form button {
    width: 100%;
    padding: 10px;
    background-color: #1abc9c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .modal form button:hover {
    background-color: #16a085;
  }

JS

// Sample Data
let users = [
    { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
    { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User" },
  ];
  
  // DOM Elements
  const userTable = document.getElementById("user-table").getElementsByTagName("tbody")[0];
  const addUserBtn = document.getElementById("add-user-btn");
  const addUserModal = document.getElementById("add-user-modal");
  const closeModal = document.querySelector(".close");
  const userForm = document.getElementById("user-form");
  
  // Render Users Table
  function renderUsers() {
    userTable.innerHTML = "";
    users.forEach((user) => {
      const row = userTable.insertRow();
      row.innerHTML = `
        <td>${user.id}</td>
        <td>${user.name}</td>
        <td>${user.email}</td>
        <td>${user.role}</td>
        <td>
          <button onclick="editUser(${user.id})">Edit</button>
          <button onclick="deleteUser(${user.id})">Delete</button>
        </td>
      `;
    });
  }
  
  // Add User
  addUserBtn.addEventListener("click", () => {
    addUserModal.style.display = "flex";
  });
  
  closeModal.addEventListener("click", () => {
    addUserModal.style.display = "none";
  });
  
  userForm.addEventListener("submit", (e) => {
    e.preventDefault();
    const name = document.getElementById("name").value;
    const email = document.getElementById("email").value;
    const role = document.getElementById("role").value;
  
    const newUser = {
      id: users.length + 1,
      name,
      email,
      role,
    };
  
    users.push(newUser);
    renderUsers();
    addUserModal.style.display = "none";
    userForm.reset();
  });
  
  // Edit User
  function editUser(id) {
    const user = users.find((user) => user.id === id);
    if (user) {
      document.getElementById("name").value = user.name;
      document.getElementById("email").value = user.email;
      document.getElementById("role").value = user.role;
      addUserModal.style.display = "flex";
  
      userForm.onsubmit = (e) => {
        e.preventDefault();
        user.name = document.getElementById("name").value;
        user.email = document.getElementById("email").value;
        user.role = document.getElementById("role").value;
        renderUsers();
        addUserModal.style.display = "none";
        userForm.reset();
      };
    }
  }
  
  // Delete User
  function deleteUser(id) {
    if (confirm("Are you sure you want to delete this user?")) {
      users = users.filter((user) => user.id !== id);
      renderUsers();
    }
  }
  
  // Initial Render
  renderUsers();

Dashboard di amministrazione pulita e reattiva

Consigliato

Battito del cuore

Pulsante al passaggio del mouse

Un codice di Metehan

HTML

CSS

JS

Consigliato

Battito del cuore

Pulsante al passaggio del mouse

Un codice di Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS