Tul xxx Tul

Viewing: admin_header.php

<?php
if(isset($message)){
   foreach($message as $message){
      echo '
      <div class="message">
         <span>'.$message.'</span>
         <i class="fas fa-times" onclick="this.parentElement.remove();"></i>
      </div>
      ';
   }
}
?>
<link rel="icon" href="../images/favi.ico" type="image/x-icon">
<!-- Google Fonts y FontAwesome para iconos modernos -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
body {
  font-family: 'Montserrat', Arial, sans-serif;
  margin: 0;
  background: #f7f7f7;
}
:root {
  --fastfood-red: #b30000;
  --fastfood-yellow: #ffd700;
  --fastfood-gold: #ffc107;
  --fastfood-dark: #7a1c1c;
  --fastfood-white: #fff;
  --fastfood-shadow: 0 4px 16px rgba(179,0,0,0.10);
}
.header {
  background: linear-gradient(90deg, var(--fastfood-red) 0%, var(--fastfood-gold) 100%);
  box-shadow: var(--fastfood-shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 4px solid var(--fastfood-yellow);
}
.header .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.header img {
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(179,0,0,0.15);
  margin-right: 1rem;
  border: 2.5px solid var(--fastfood-gold);
  background: var(--fastfood-white);
}
.header .logo {
  font-size: 2.2rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 2px;
  text-decoration: none;
  margin-right: 2rem;
  transition: color 0.2s;
  text-shadow: 0 2px 8px rgba(179,0,0,0.10);
}
.header .logo span {
  color: #111;
  text-shadow: 0 2px 8px rgba(255,193,7,0.18);
}
.header .navbar {
  display: flex;
  gap: 1.5rem;
}
.header .navbar a {
  color: #111 !important;
  font-size: 1.1rem;
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 2px 8px rgba(255,215,0,0.04);
  border: 2px solid transparent;
}
.header .navbar a:hover {
  background: var(--fastfood-yellow);
  color: var(--fastfood-red) !important;
  border-color: var(--fastfood-gold);
  box-shadow: 0 4px 16px rgba(255,193,7,0.18);
}
.header .navbar a i {
  color: #111 !important;
  transition: color 0.2s;
}
.header .navbar a:hover i {
  color: var(--fastfood-red) !important;
}
.header .icons {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  font-size: 1.5rem;
  color: #111;
  cursor: pointer;
}
.header .icons div {
  color: #111 !important;
  transition: color 0.2s, transform 0.2s;
}
.header .icons div:hover {
  color: var(--fastfood-gold) !important;
  transform: scale(1.12);
}
.header .profile {
  background: var(--fastfood-white);
  color: #111;
  position: absolute;
  top: 110%;
  right: 2rem;
  min-width: 220px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(179,0,0,0.18);
  padding: 1.2rem 1.5rem;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  animation: fadeIn 0.3s;
  border: 2px solid var(--fastfood-gold);
}
.header .profile.active {
  display: flex;
}
.header .profile p {
  font-weight: 700;
  margin-bottom: 0.7rem;
  font-size: 1.1rem;
  color: #111;
}
.header .profile i {
  color: #111 !important;
}
.header .profile .btn,
.header .profile .delete-btn {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(255,193,7,0.08);
  color: #111 !important;
  border: 2px solid var(--fastfood-gold);
  background: var(--fastfood-yellow);
}
.header .profile .btn:hover {
  background: var(--fastfood-gold);
  color: var(--fastfood-red) !important;
  border-color: var(--fastfood-red);
  box-shadow: 0 4px 16px rgba(255,193,7,0.18);
}
.header .profile .delete-btn {
  background: var(--fastfood-yellow);
  color: #111 !important;
  border: 2px solid var(--fastfood-red);
}
.header .profile .delete-btn:hover {
  background: var(--fastfood-red);
  color: var(--fastfood-yellow) !important;
  border-color: var(--fastfood-gold);
}

@media (max-width: 900px) {
  .header .flex {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
  }
  .header .navbar {
    margin: 1rem 0;
  }
}
@media (max-width: 700px) {
  .header .flex {
    flex-direction: row;
    padding: 0.7rem 1rem;
  }
  .header .navbar {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, var(--fastfood-red) 0%, var(--fastfood-gold) 100%);
    flex-direction: column;
    gap: 0;
    display: none;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 8px 32px rgba(179,0,0,0.18);
    z-index: 1001;
  }
  .header .navbar.active {
    display: flex;
  }
  .header .navbar a {
    padding: 1rem 2rem;
    border-radius: 0;
    border-bottom: 1px solid #fff2;
  }
  .header .icons {
    margin-left: auto;
  }
}
@media (max-width: 500px) {
  .header img {
    width: 60px;
    height: 60px;
  }
  .header .logo {
    font-size: 1.3rem;
  }
  .header .profile {
    right: 0.5rem;
    min-width: 160px;
    padding: 0.7rem 1rem;
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

<header class="header">
   <section class="flex">
      <img src="../images/favicon.png" width="100" height="100" alt="Logo">
      <a href="dashboard.php" class="logo"><span>Panel</span> CondorBurguer</a>
      <nav class="navbar" id="navbar">
         <a href="dashboard.php"><i class="fas fa-home"></i> Inicio</a>
         <a href="messages.php"><i class="fas fa-receipt"></i> Pedidos</a>
         <a href="products.php"><i class="fas fa-utensils"></i> Comidas</a>
         <!-- <a href="placed_orders.php"><i class="fas fa-box"></i> orders</a> -->
         <!-- <a href="users_accounts.php"><i class="fas fa-users"></i> Usuarios de la página</a> -->
         <a href="admin_accounts.php"><i class="fas fa-user-cog"></i> Usuarios</a>
      </nav>
      <div class="icons">
         <div id="menu-btn" class="fas fa-bars"></div>
         <div id="user-btn" class="fas fa-user"></div>
      </div>
      <div class="profile" id="profile-box">
         <?php
            $select_profile = $conn->prepare("SELECT * FROM `admin` WHERE id = ?");
            $select_profile->execute([$admin_id]);
            $fetch_profile = $select_profile->fetch(PDO::FETCH_ASSOC);
         ?>
         <p><i class="fas fa-user-circle"></i> <?= $fetch_profile['name']; ?></p>
         <a href="update_profile.php" class="btn"><i class="fas fa-edit"></i> Actualizar Perfíl</a>
         <div class="flex-btn">
            <!-- <a href="admin_login.php" class="option-btn">login</a> -->
            <!-- <a href="register_admin.php" class="option-btn">register</a> -->
         </div>
         <a href="../index.php" onclick="return confirm('Seguro que desea salir?');" class="delete-btn"><i class="fas fa-sign-out-alt"></i> Cerrar Sesión</a>
      </div>
   </section>
</header>

<script>
// Menú responsive y perfil
const menuBtn = document.getElementById('menu-btn');
const userBtn = document.getElementById('user-btn');
const navbar = document.getElementById('navbar');
const profileBox = document.getElementById('profile-box');

menuBtn.onclick = () => {
  navbar.classList.toggle('active');
  profileBox.classList.remove('active');
};
userBtn.onclick = () => {
  profileBox.classList.toggle('active');
  navbar.classList.remove('active');
};
document.addEventListener('click', function(e) {
  if (!menuBtn.contains(e.target) && !navbar.contains(e.target)) {
    navbar.classList.remove('active');
  }
  if (!userBtn.contains(e.target) && !profileBox.contains(e.target)) {
    profileBox.classList.remove('active');
  }
});
</script>
User / IP	: 216.73.216.95
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64