Scribd
Upload
8 views20 pages

Admin Code

The document outlines the HTML and CSS for an admin dashboard for Project C.A.R.E., featuring a user interface for managing admin accounts and displaying student data. It includes sections for adding admins, viewing responses data in a table, and visualizing data with charts. The layout is responsive and includes interactive elements like dropdown menus and forms for user input.

Uploaded by

mikonemo08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views20 pages

Admin Code

The document outlines the HTML and CSS for an admin dashboard for Project C.A.R.E., featuring a user interface for managing admin accounts and displaying student data. It includes sections for adding admins, viewing responses data in a table, and visualizing data with charts. The layout is responsive and includes interactive elements like dropdown menus and forms for user input.

Uploaded by

mikonemo08
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

ADMIN HTML

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="CSS/admin-page-ht.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project C.A.R.E. - Admin Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<div class="marquee-container">
<div class="marquee-text">
Welcome to Project C.A.R.E. - Your Admin Dashboard!
</div>
</div>

<div class="admin-container" id="admin-container">


<div id="top-panel">
<div class="menu-top-panel" id="menu-top-panel"
onclick="toggleDropdown()">
<a>Data ▼</a>
<div class="dropdown" id="dropdown-menu">
<a id="overview" onclick="showTable()">Overview</a>
<a id="strand-chart" onclick="showChart()">Strand Chart</a>
</div>
</div>
</div>

<div id="background-logo">
<img src="IMAGES/CARE-LOGO-5.png" alt="Project C.A.R.E. Logo">
</div>

<div id="admin-form-container">
<div id="admin-form">
<h2>Add Admin</h2>

<form method="POST" action="">

<label>Username:</label>
<input type="text" name="system_username" required>

<label>Email:</label>
<input type="email" name="system_email" required>

<label>Position</label>
<input type="text" name="account_type" required>

<label>Password:</label>
<input type="password" name="system_password" required>

<input id="buttons" type="submit" name="submit" value="Add">


<input id="buttons" type="button" name="close" value="Close"
onclick="closeAdminForm()">
</form>

</div>
</div>

<div id="right-panel">
<div class="admin-avatar">
<img src="IMAGES/LOGO/login-icon.png" alt="">
</div>
<div class="nav-links">
<a id="profile"> Welcome Admin </a>
<a id="profile"><?php echo htmlspecialchars($adminName); ?></a>

<a href="#" id="add-admin" onclick="showAdminForm()">Add


Admin</a>

<input type="button" value="Logout" onclick="adminlogout()"


id="logout-btn" class="logout-btn">

</div>

</div>

<div id="table-container">
<h2>Responses Data</h2>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>Student ID</th>
<th>Statement ID</th>
<th>Rating</th>
<th>Rating Text</th>
<th>Strand</th>
<th>College Program</th>
</tr>
</thead>
<tbody>
<?php if (!empty($data)): ?>
<?php foreach ($data as $row): ?>
<tr>
<td><?php echo htmlspecialchars($row['id']); ?></td>
<td><?php echo htmlspecialchars($row['student_id']); ?></td>
<td><?php echo htmlspecialchars($row['statement_id']);
?></td>
<td><?php echo htmlspecialchars($row['rating']); ?></td>
<td><?php echo htmlspecialchars($row['rating_text']); ?></td>
<td><?php echo htmlspecialchars($row['strand']); ?></td>
<td><?php echo htmlspecialchars($row['college_program']); ?
></td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td colspan="7">No responses found</td>
</tr>
<?php endif; ?>
</tbody>
</table>
</div>

<div id="chart-container">
<h2>Most Taken Strands by Students</h2>
<canvas id="strandChart"></canvas>
</div>

<script>

// function adminlogout() {

// sessionStorage.clear();

// window.location.href = "login-page.php";
// }

document.addEventListener("touchmove", function(event) {
event.preventDefault();
}, { passive: false });

function showAdminForm() {
document.getElementById("admin-form-container").style.display =
"block";

document.getElementById("table-container").classList.add("disabled-
overlay");
document.getElementById("chart-container").classList.add("disabled-
overlay");

document.getElementById("overview").classList.add("disabled-overlay");
document.getElementById("strand-chart").classList.add("disabled-
overlay");
document.getElementById("strandChart").classList.add("disabled-
overlay");
document.getElementById("menu-top-panel").classList.add("disabled-
overlay");
}

function closeAdminForm() {
document.getElementById("admin-form-container").style.display =
"none";

document.getElementById("table-container").classList.remove("disabled-
overlay");
document.getElementById("chart-container").classList.remove("disabled-
overlay");

document.getElementById("overview").classList.remove("disabled-
overlay");
document.getElementById("strand-chart").classList.remove("disabled-
overlay");
document.getElementById("strandChart").classList.remove("disabled-
overlay");
document.getElementById("menu-top-
panel").classList.remove("disabled-overlay");
}

document.addEventListener("DOMContentLoaded", function () {
document.getElementById("table-container").style.display = "none";
document.getElementById("chart-container").style.display = "none";
});

function toggleDropdown() {
var dropdown = document.getElementById("dropdown-menu");
dropdown.style.display = dropdown.style.display === "block" ? "none" :
"block";
}

function showTable() {
document.getElementById("table-container").style.display = "block";
document.getElementById("chart-container").style.display = "none";
document.getElementById("dropdown-menu").style.display = "none";
toggleDropdown();
}

function showChart() {
document.getElementById("chart-container").style.display = "block";
document.getElementById("table-container").style.display = "none";
document.getElementById("dropdown-menu").style.display = "none";
toggleDropdown();
loadChart();
}
// var strandData = <?php echo json_encode($strandData); ?>;
console.log("🔍 Debug: Strand Data from PHP:", strandData);

function loadChart() {
var ctx = document.getElementById('strandChart').getContext('2d');
var labels = Object.keys(strandData);
var data = Object.values(strandData);

if (!labels.length || !data.length) {
document.getElementById("chart-container").innerHTML = "<p
style='color: black; text-align: center; font-size: 30px;'>No Data Available</p>";
return;
}

new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: 'Number of Students',
data: data,
backgroundColor: ['#4A90E2', '#50E3C2', '#9013FE', '#F5A623',
'#FF5733'],
borderColor: '#fff',
borderWidth: 2,
barThickness: 70
}]
},
options: {
responsive: false,
maintainAspectRatio: false,
scales: {
x: { grid: { display: false } },
y: { beginAtZero: true, grid: { color: "#444" } }
}
}
});
}

</script>
</body>
</html>

ADMIN PAGE CSS


*{
margin: 0;
padding: 0;
}

html {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: linear-gradient(to right, #3A1078, #3795BD);
overflow: hidden;
touch-action: none;
}

body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Poppins', sans-serif;
position: fixed;
}

.marquee-container {
width: 100%;
height: 100vh;
overflow: hidden;
white-space: nowrap;
position: absolute;
color: white;
padding: 10px;
}

.marquee-text {
display: inline-block;
position: absolute;
right: -100%;
animation: marqueeMove 10s linear infinite;
}

@keyframes marqueeMove {
from {
right: -100%;
}
to {
right: 100%;
}
}

.admin-container {
top: 5%;
width: 80%;
height: 85vh;
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
border-radius: 15px;
display: flex;
flex-direction: column;
overflow: hidden;
position: absolute;
}

#background-logo {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
margin-left: 15%;
top: 2%;
}

#background-logo img {
opacity: 20%;
height: 100vh;
width: 100vh;
}

#top-panel {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: rgb(32, 87, 129);
color: white;
display: flex;
align-items: center;
padding: 0 20px;
backdrop-filter: blur(10px);
z-index: 10;
}

.menu-top-panel {
position: relative;
}

.menu-top-panel a {
color: white;
text-decoration: none;
font-size: 50px;
transition: 0.3s;
cursor: pointer;
position: relative;
}

.menu-top-panel a:hover {
color: #FFD700;
}

.dropdown {
display: none;
position: absolute;
background-color: white;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
min-width: 150px;
z-index: 100;
}

.dropdown a {
display: block;
padding: 10px;
text-decoration: none;
font-size: 20px;
color: black;
}

.menu-top-panel:hover .dropdown {
display: block;
}

.dropdown a:hover {
background-color: #ddd;
}

#right-panel {
position: absolute;
right: 0;
top: 60px;
height: calc(100% - 60px);
width: 60px;
background: rgba(144, 166, 177, 0.3);
transition: width 0.3s ease-in-out;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
/* backdrop-filter: blur(10px); */
z-index: 10;
padding-bottom: 20px;
}

#right-panel:hover {
width: 200px;
}

.admin-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
margin-bottom: 20px;
}

.nav-links {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
width: auto;
flex-grow: 1;
padding-top: 10px;
}

.nav-links #profile {
margin-top: -25px;
pointer-events: none;
}

.nav-links #add-admin {
margin-top: 60px;
}
.logout-btn {
background: rgb(231, 52, 12);
position: absolute;
opacity: 5%;
color: white;
padding: 10px 15px;
border: none;
bottom: 30px;
cursor: pointer;
font-size: 16px;
border-radius: 5px;
transition: 0.3s;
}

.logout-btn:hover {
background: darkred;
}

.nav-links a {
display: block;
width: 100%;
padding: 10px 0;
color: black;
padding: 10px;
margin: 5px 0;
transition: 0.3s;
opacity: 5%;
white-space: nowrap;
}

#right-panel:hover .nav-links a {
opacity: 1;
}

#right-panel:hover .logout-btn {
opacity: 1;
}

.nav-links a:hover {
background: #575757;
}

#table-container {
display: none;
top: 140px;
width: 90%;
height: 85%;
overflow-y: auto;
background: rgb(245, 245, 245, 0.6);
padding: 10px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: absolute;
top: 80px;
left: 48%;
transform: translateX(-50%);
}

.disabled-overlay {
pointer-events: none;
opacity: 0.5;
filter: blur(2px);
}

table {
width: 100%;
pointer-events: none;
border-collapse: collapse;
font-size: 14px;
}

th, td {
border: 1px solid #ddd;
padding: 6px;
text-align: center;
}

th {
background-color: #3795BD;
color: white;
font-size: 13px;
}

tr:hover {
background-color: #f5f5f5;
cursor: pointer;
}

#chart-container {
position: absolute;
height: 650px;
width: 1300px;
top: 90px;
left: 30px;
background: rgb(245, 245, 245, 0.6);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
padding: 10px;
}

canvas {
width: 100% !important;
height: 100% !important;
}

#strandChart {
position: absolute;
height: 100;
width: 100;
}

#admin-form-container {
display: none;
position: absolute;
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 0.95);
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
height:460px;
width: 300px;
}

#admin-form {
display: flex;
flex-direction: column;
}

form h2 {
text-align: center;
margin-top: 10px;
}

form label {
margin-top: 20px;
position: absolute;
font-weight: bold;
}

form input {
padding: 10px;
display: grid;
margin-top: 40px;
width: 275.5px;
border: 1px solid #ccc;
border-radius: 5px;
}

form input[id="buttons"] {
margin-top: 20px;
display: grid;
width: 298px;
padding: 10px 15px;
background: #3795BD;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}

form input[id="buttons"]:hover {
background: #2b7a9e;
transform: scale(1.05);
}

/* @media (max-width: 720px) and (orientation: portrait) {

body {

transform: rotate(90deg);
transform-origin: center center;
width: 100vh;
height: 100vw;
overflow: hidden;
bottom: 27.5%;
right: -61%;
position: fixed;
}

.admin-container {
width: 95vh;
height: 90vw;
transform: rotate(0deg);
}
} */

@media (max-width: 720px) {

.admin-container {
width: 90%;
height: 90%;
}

#background-logo {
position: absolute;
bottom: 0;
left: -200px;
}

#background-logo img {
height: 50vh;
width: 50vh;
}

#table-container {
width: 85%;
height: 90%;
left: 45%;
}

#chart-container {
height: 90%;
width: 85%;
top: 80px;
left: 2%;
}

You might also like