एडमिन डैशबोर्ड साफ़ और उत्तरदायी

अनुशंसित

24 March 2025

अलार्म घड़ी और स्टॉपवॉच ऐप उपयोगकर्ता इंटरफ़ेस

18 October 2024

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

एडमिन डैशबोर्ड साफ़ और उत्तरदायी

अनुशंसित

AdminHub एडमिन डैशबोर्ड v2.1

अलार्म घड़ी और स्टॉपवॉच ऐप उपयोगकर्ता इंटरफ़ेस

कार्ड डैशबोर्ड

HTML

CSS

JS

अनुशंसित

AdminHub एडमिन डैशबोर्ड v2.1

अलार्म घड़ी और स्टॉपवॉच ऐप उपयोगकर्ता इंटरफ़ेस

कार्ड डैशबोर्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS