Painel de administração limpo e responsivo

1511 ahmedakhi426

Abrir no Editor Publique Seu Código Precisa de um site?

Painel de administração limpo e responsivo

Recomendado

10 July 2025

Exemplo de tela de carregamento animada em HTML com CSS

10 March 2025

Barra de navegação responsiva premium

21 October 2024

Entradas de um dígito com um elemento

HTML

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

Recomendado

Exemplo de tela de carregamento animada em HTML com CSS

Barra de navegação responsiva premium

Entradas de um dígito com um elemento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS