|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Youth Peer Initiative | School Community Platform</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
<script src="https://code.highcharts.com/maps/highmaps.js"></script> |
|
|
<script src="https://code.highcharts.com/maps/modules/exporting.js"></script> |
|
|
<script src="https://code.highcharts.com/mapdata/countries/us/us-all.js"></script> |
|
|
|
|
|
<link |
|
|
rel="stylesheet" |
|
|
href="https://unpkg.com/[email protected]/dist/leaflet.css" |
|
|
/> |
|
|
|
|
|
<script |
|
|
src="https://unpkg.com/[email protected]/dist/leaflet.js"> |
|
|
</script> |
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.sidebar { |
|
|
transition: all 0.3s; |
|
|
} |
|
|
.sidebar.collapsed { |
|
|
width: 70px; |
|
|
} |
|
|
.sidebar.collapsed .sidebar-text { |
|
|
display: none; |
|
|
} |
|
|
.sidebar.collapsed .user-info { |
|
|
display: none; |
|
|
} |
|
|
.main-content { |
|
|
transition: margin-left 0.3s; |
|
|
} |
|
|
|
|
|
|
|
|
.dark .dark-bg-primary { |
|
|
background-color: #1a1a2e; |
|
|
} |
|
|
.dark .dark-bg-secondary { |
|
|
background-color: #16213e; |
|
|
} |
|
|
.dark .dark-text-light { |
|
|
color: #e2e8f0; |
|
|
} |
|
|
.dark .dark-border { |
|
|
border-color: #2d3748; |
|
|
}order-color: #2d3748; |
|
|
} |
|
|
#usaMap { |
|
|
height: 400px; |
|
|
width: 100%; |
|
|
} |
|
|
.tab-content { |
|
|
display: none; |
|
|
} |
|
|
.tab-content.active { |
|
|
display: block; |
|
|
} |
|
|
.club-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
|
|
} |
|
|
.notification-item:hover { |
|
|
background-color: rgba(124, 58, 237, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-white text-gray-800 "> |
|
|
|
|
|
<div class="flex h-screen overflow-hidden"> |
|
|
|
|
|
<div class="sidebar bg-purple-800 text-white flex flex-col dark-bg-secondary"> |
|
|
<div class="p-4 flex items-center justify-between border-b border-purple-700"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-users text-2xl"></i> |
|
|
<span class="sidebar-text text-l font-bold">Youth Peer Initiative</span> |
|
|
</div> |
|
|
<button id="toggleSidebar" class="text-white focus:outline-none"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="user-info p-4 flex flex-col items-center border-b border-purple-700"> |
|
|
<div class="w-24 h-24 rounded-full bg-white flex items-center justify-center mb-3 overflow-hidden"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<h3 class="font-semibold text-lg">Sarah Johnson</h3> |
|
|
<p class="text-purple-200 text-sm">[email protected]</p> |
|
|
<div class="mt-2 flex space-x-2"> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded-full text-xs"> |
|
|
<i class="fas fa-cog"></i> <span class="sidebar-text">Settings</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="flex-1 overflow-y-auto"> |
|
|
<ul> |
|
|
<li> |
|
|
<a href="#" data-tab="home" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-purple-500 bg-purple-700"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
<span class="sidebar-text">Home</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" data-tab="files" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent"> |
|
|
<i class="fas fa-folder mr-3"></i> |
|
|
<span class="sidebar-text">Files</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" data-tab="notifications" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent"> |
|
|
<i class="fas fa-bell mr-3"></i> |
|
|
<span class="sidebar-text">Notifications</span> |
|
|
<span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" data-tab="location" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent"> |
|
|
<i class="fas fa-map-marker-alt mr-3"></i> |
|
|
<span class="sidebar-text">Location</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" data-tab="graphs" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent"> |
|
|
<i class="fas fa-chart-line mr-3"></i> |
|
|
<span class="sidebar-text">Graphs</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" data-tab="reports" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent"> |
|
|
<i class="fas fa-file-alt mr-3"></i> |
|
|
<span class="sidebar-text">Reports</span> |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" data-tab="settings" class="tab-link flex items-center p-4 hover:bg-purple-700 border-l-4 border-transparent"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
<span class="sidebar-text">Settings</span> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="p-4 border-t border-purple-700"> |
|
|
<button id="darkModeToggle" class="flex items-center justify-between w-full p-2 rounded-lg bg-purple-700 hover:bg-purple-600"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-moon mr-2"></i> |
|
|
<span class="sidebar-text">Dark Mode</span> |
|
|
</div> |
|
|
<div class="w-10 h-5 bg-purple-900 rounded-full relative"> |
|
|
<div class="toggle-circle absolute w-4 h-4 bg-white rounded-full top-0.5 left-0.5 transition-transform"></div> |
|
|
</div> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content flex-1 overflow-y-auto"> |
|
|
|
|
|
<header class="bg-white shadow-sm p-4 flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold" id="currentTabTitle">Home</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="relative"> |
|
|
<button class="text-gray-600 focus:极速赛车开奖直播outline-none"> |
|
|
<i class="fas fa-bell text-xl"></i> |
|
|
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> |
|
|
</button> |
|
|
</div> |
|
|
<div class="w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white"> |
|
|
<span>SJ</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="p-6"> |
|
|
|
|
|
<div id="home" class="tab-content active"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Clubs</p> |
|
|
<h3 class="text-2xl font-bold">142</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i class="fas fa-users text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-semibold">+12 this month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Schools</p> |
|
|
<h3 class="text-2xl font-bold">67</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i class="fas fa-school text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-semibold">+3 this month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Total Students</p> |
|
|
<h3 class="text-2xl font-bold">8,742</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i class="fas fa-user-graduate text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-semibold">+324 this month</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div> |
|
|
<p class="text-gray-500">Active Projects</p> |
|
|
<h3 class="text-2xl font-bold">28</h3> |
|
|
</div> |
|
|
<div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> |
|
|
<i class="fas fa-project-diagram text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="text-green-500 text-sm font-semibold">+5 this month</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="lg:col-span-2 bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h2 class="text-lg font-semibold">Schools Location Map</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm">USA</button> |
|
|
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm">State</button> |
|
|
<button class="px-3 py-1 bg-gray-100 rounded-md text-sm">Local</button> |
|
|
</div> |
|
|
</div> |
|
|
<div id="usaMap" class="bg-gray-50 rounded-md"></div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Platform Statistics</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 bg-purple-100 rounded-full mr-3"> |
|
|
<i class="fas fa-chart-line text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Engagement Rate</p> |
|
|
<p class="font-semibold">45%</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-green-500 text-sm">↑ 5.2%</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 bg-blue-100 rounded-full mr-3"> |
|
|
<i class="fas fa-book text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Trainings</p> |
|
|
<p class="font-semibold">600</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-green-500 text-sm">↑ 12%</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 bg-green-100 rounded-full mr-3"> |
|
|
<i class="fas fa-comments text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Messages</p> |
|
|
<p class="font-semibold">7,000+</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-green-500 text-sm">↑ 23%</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray极速赛车开奖直播-50 rounded-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 bg-red-100 rounded-full mr-3"> |
|
|
<i class="fas fa-running text-red-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Bounce Rate</p> |
|
|
<p class="font-semibold">24%</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-red-500 text-sm">↓ 2.1%</span> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-2 bg-yellow-100 rounded-full mr-3"> |
|
|
<i class="fas fa-users text-yellow-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-gray-500">Visites</p> |
|
|
<p class="font-semibold">67K</p> |
|
|
</div> |
|
|
</div> |
|
|
<span class="text-green-500 text-sm">↑ 8.7%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Recent Activities</h2> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-user-plus text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New member joined</p> |
|
|
<p class="text-sm text-gray-500">Alex Johnson joined the Coding Club at Lincoln High School</p> |
|
|
<p class="text-xs text-gray-400">2 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-calendar-check text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New event created</p> |
|
|
<p class="text-sm text-gray-500">"Science Fair 2023" event created by STEM Club</p> |
|
|
<p class="text-xs text-gray-400">5 hours ago</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3 mt-1"> |
|
|
<i class="fas fa-comment-dots text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="font-medium">New discussion</p> |
|
|
<p class="text-sm text-gray-500">"Environmental Awareness" discussion started in Eco Club</p> |
|
|
<p class="text-xs text-gray-400">1 day ago</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="mt-4 text-purple-600 font-medium">View All Activities →</button> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Popular Clubs</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> |
|
|
<div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-code"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Coding Club</h3> |
|
|
<p class="text-xs text-gray-500">Lincoln High School</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span class="text-gray-500">45 members</span> |
|
|
<span class="text-green-500">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-atom"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">STEM Club</h3> |
|
|
<p class="text-xs text-gray-500">Jefferson High</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span class="text-gray-500">32 members</span> |
|
|
<span class="text-green-500">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-leaf"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Eco Club</h3> |
|
|
<p class="text-xs text-gray-500">Washington High</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span class="text-gray-500">28 members</span> |
|
|
<span class="text-green-500">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="club-card bg-gray-50 p-4 rounded-lg transition-all duration-300 cursor-pointer"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-yellow-500 flex items-center justify-center text-white mr-3"> |
|
|
<i class="fas fa-paint-brush"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Art Club</h3> |
|
|
<p class="text-xs text-gray-500">Roosevelt High</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-xs"> |
|
|
<span class="text-gray-500">36 members</span> |
|
|
<span class="text-green-500">Active</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-[70%_30%] gap-6 mb-6"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Engagement Overview</h2> |
|
|
<div class="h-80"> |
|
|
<canvas id="engagementChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Club Categories</h2> |
|
|
<div class="h-80"> |
|
|
<canvas id="clubCategoriesChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<h2 class="text-lg font-semibold mb-4">Monthly Participation</h2> |
|
|
<div > |
|
|
<canvas id="monthlyParticipationChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="files" class="tab-content"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Files & Resources</h2> |
|
|
<button class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Upload File |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-purple-600 text-white rounded-md">All Files</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Documents</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Images</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Videos</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Audio</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-file-pdf text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Club Guidelines.pdf</h3> |
|
|
<p class="text-sm text-gray-500">2.4 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Uploaded: 12/05/2023</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-purple-600 hover:text-purple-800"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-file-word text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Meeting Notes.docx</h3> |
|
|
<p class="text-sm text-gray-500">1.2 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Uploaded: 11/28/2023</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-purple-600 hover:text-purple-800"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-file-excel text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Budget.xlsx</h3> |
|
|
<p class="text-sm text-gray-500">3.1 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-between text-sm"> |
|
|
<span class="text-gray-500">Uploaded: 11/15/2023</span> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="text-purple-600 hover:text-purple-800"> |
|
|
<i class="fas fa-download"></i> |
|
|
</button> |
|
|
<button class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notifications" class="tab-content"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Notifications</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md"> |
|
|
<i class="fas fa-filter mr-2"></i> Filter |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md"> |
|
|
<i class="fas fa-check-double mr-2"></i> Mark All Read |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="space极速赛车开奖直播-y-4"> |
|
|
<div class="notification-item flex items-start p-4 border-b border-gray-200 rounded-lg hover:bg-purple-50 transition-colors"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-users text-purple-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium">New Club Request</h3> |
|
|
<span class="text-xs text-gray-500">10 min ago</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mt-1">"Debate Club" creation request from Jefferson High School needs your approval.</p> |
|
|
<div class="flex space-x-3 mt-3"> |
|
|
<button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md"> |
|
|
Approve |
|
|
</button> |
|
|
<button class="text-xs bg-gray-200 hover:bg-gray-300 px-3 py-1 rounded-md"> |
|
|
Decline |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-2 h-2 rounded-full bg-red-500 ml-2 mt-2"></div> |
|
|
</div> |
|
|
|
|
|
<div class="notification-item flex items-start p-4 border-b border-gray-200 rounded-lg hover:bg-purple-50 transition-colors"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-calendar-check text-blue-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium">Event Reminder</h3> |
|
|
<span class="text-xs text-gray-500">2 hours ago</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mt-1">"Science Fair 2023" is happening tomorrow at 10:00 AM in the school gym.</p> |
|
|
</div> |
|
|
<div class="w-2 h-2 rounded-full bg-red-500 ml-2 mt-2"></div> |
|
|
</div> |
|
|
|
|
|
<div class="notification-item flex items-start p-4 border-b border-gray-200 rounded-lg hover:bg-purple-50 transition-colors"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-4 mt-1"> |
|
|
<i class="fas fa-comment-dots text-green-600"></i> |
|
|
</div> |
|
|
<div class="flex-1"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<h3 class="font-medium">New Message</h3> |
|
|
<span class="text-xs text-gray-500">1 day ago</span> |
|
|
</div> |
|
|
<p class="text-gray-600 mt-1">You have 3 unread messages in the "Environmental Awareness" discussion.</p> |
|
|
<div class="flex space-x-3 mt-3"> |
|
|
<button class="text-xs bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-md"> |
|
|
View Messages |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="location" class="tab-content"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">School Locations</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md"> |
|
|
<i class="fas fa-plus mr-2"></i> Add School |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div id="detailedMap" class="h-96 bg-gray-50 rounded-lg"></div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-semibold mb-4">School Directory</h3> |
|
|
<div class="relative mb-4"> |
|
|
<input type="text" placeholder="Search schools..." class="w-full pl-10 pr-4 py-2 rounded-md border focus:outline-none focus:ring-2 focus:ring-purple-500"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="space-y-3 max-h-80 overflow-y-auto"> |
|
|
<div class="school-item p-3 bg-white rounded-md cursor-pointer hover:bg-purple-50 transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-school text-purple-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Lincoln High School</h4> |
|
|
<p class="text-xs text-gray-500">123 Education St, Springfield</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="school-item p-3 bg-white rounded-md cursor-pointer hover:bg-purple-50 transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-school text-blue-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Jefferson High School</h4> |
|
|
<p class="text-xs text-gray-500">456 Knowledge Ave, Jefferson</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="school-item p-3 bg-white rounded-md cursor-pointer hover:bg-purple-50 transition-colors"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-school text-green-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Washington High School</h4> |
|
|
<p class="text-xs text-gray-500">789 Wisdom Blvd, Washington</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="graphs" class="tab-content"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Analytics Dashboard</h2> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md"> |
|
|
<i class="fas fa-calendar mr-2"></i> Last 30 Days |
|
|
</button> |
|
|
<button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md"> |
|
|
<i class="fas fa-download mr-2"></i> Export |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-semibold mb-4">Club Growth</h3> |
|
|
<div class="h-64"> |
|
|
<canvas id="clubGrowthChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-semibold mb-4">Student Participation</h3> |
|
|
<div class="h-64"> |
|
|
<canvas id="participationChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"> |
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-semibold mb-4">Activity Types</h3> |
|
|
<div class="h-100"> |
|
|
<canvas id="activityTypesChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-4"> |
|
|
<h3 class="font-semibold mb-4">User Engagement</h3> |
|
|
<div class="h-100"> |
|
|
<canvas id="userEngagementChart"></canvas> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="reports" class="tab-content"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Reports</h2> |
|
|
<button class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-md flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Generate Report |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-4 py-2 bg-purple-600 text-white rounded-md">All Reports</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Monthly</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Quarterly</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Annual</button> |
|
|
<button class="px-4 py-2 bg-gray-100 rounded-md">Custom</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="min-w-full divide-y divide-gray-200"> |
|
|
<thead class="bg-gray-50"> |
|
|
<tr> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Report Name</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Generated By</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> |
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody class="bg-white divide-y divide-gray-200"> |
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-alt text-purple-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium">Monthly Engagement Report</div> |
|
|
<div class="text-sm text-gray-500">May 2023</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Monthly</span> |
|
|
</td> |
|
|
<td class="px-极速赛车开奖直播6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">06/01/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-purple-600 hover:text-purple-900 mr-3"> |
|
|
<i class="fas fa-eye"></i> View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"> |
|
|
<i class="fas fa-download"></i> Download |
|
|
</button> |
|
|
<button class="text-red-极速赛车开奖直播600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> Delete |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
|
|
|
<tr class="hover:bg-gray-50"> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center"> |
|
|
<i class="fas fa-file-alt text-blue-600"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<div class="text-sm font-medium">Quarterly Performance</div> |
|
|
<div class="text-sm text-gray-500">Q2 2023</div> |
|
|
</div> |
|
|
</div> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap"> |
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Quarterly</span> |
|
|
</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Johnson</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">07/15/2023</td> |
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> |
|
|
<button class="text-purple-600 hover:text-purple-900 mr-3"> |
|
|
<i class="fas fa-eye"></i> View |
|
|
</button> |
|
|
<button class="text-blue-600 hover:text-blue-900 mr-3"> |
|
|
<i class="fas fa-download"></i> Download |
|
|
</button> |
|
|
<button class="text-red-600 hover:text-red-900"> |
|
|
<i class="fas fa-trash"></i> Delete |
|
|
</button> |
|
|
</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="settings" class="tab-content"> |
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="text-2xl font-bold">Settings</h2> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
|
|
<div class="lg:col-span-2"> |
|
|
<div class="bg-gray-50 rounded-lg p-6 mb-6"> |
|
|
<h3 class="text-lg font-semibold mb-4">Profile Settings</h3> |
|
|
<div class="space-y-4"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Profile Picture</label> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-16 h-16 rounded-full bg-gray-200 overflow-hidden mr-4"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div> |
|
|
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm mr-2"> |
|
|
Change |
|
|
</button> |
|
|
<button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm"> |
|
|
Remove |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelectorAll('.tab-link').forEach(link => { |
|
|
link.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-content').forEach(content => { |
|
|
content.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
const tabId = this.getAttribute('data-tab'); |
|
|
document.getElementById(tabId).classList.add('active'); |
|
|
|
|
|
|
|
|
document.getElementById('currentTabTitle').textContent = this.querySelector('.sidebar-text').textContent; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-link').forEach(tab => { |
|
|
tab.classList.remove('border-purple-500', 'bg-purple-700'); |
|
|
tab.classList.add('border-transparent'); |
|
|
}); |
|
|
this.classList.remove('border-transparent'); |
|
|
this.classList.add('border-purple-500', 'bg-purple-700'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('toggleSidebar').addEventListener('click', function() { |
|
|
document.querySelector('.sidebar').classList.toggle('collapsed'); |
|
|
|
|
|
document.querySelector('.main-content').classList.toggle('mr-5'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('darkModeToggle').addEventListener('click', function() { |
|
|
document.documentElement.classList.toggle('dark'); |
|
|
localStorage.setItem('darkMode', document.documentElement.classList.contains('dark')); |
|
|
const toggleCircle = document.querySelector('.toggle-circle'); |
|
|
if (document.documentElement.classList.contains('dark')) { |
|
|
toggleCircle.style.transform = 'translateX(20px)'; |
|
|
} else { |
|
|
toggleCircle.style.transform = 'translateX(0)'; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
if (localStorage.getItem('darkMode') === 'true') { |
|
|
document.documentElement.classList.add('dark'); |
|
|
document.querySelector('.toggle-circle').style.transform = 'translateX(20px)'; |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
|
|
|
Highcharts.mapChart('usaMap', { |
|
|
chart: { |
|
|
map: 'countries/us/us-all' |
|
|
}, |
|
|
title: { |
|
|
text: '' |
|
|
}, |
|
|
mapNavigation: { |
|
|
enabled: true, |
|
|
buttonOptions: { |
|
|
verticalAlign: 'bottom' |
|
|
} |
|
|
}, |
|
|
colorAxis: { |
|
|
min: 0, |
|
|
stops: [ |
|
|
[0, '#E6E6FA'], |
|
|
[0.5, '#9370DB'], |
|
|
[1, '#4B0082'] |
|
|
] |
|
|
}, |
|
|
series: [{ |
|
|
data: [ |
|
|
['us-ma', 10], ['us-wa', 15], ['us-ca', 25], ['us-or', 8], |
|
|
['us-wi', 12], ['us-me', 5], ['us-mi', 18], ['us-nv', 7], |
|
|
['us-nm', 6], ['us-co', 9], ['us-wy', 3], ['us-ks', 4], |
|
|
['us-ne', 5], ['us-ok', 7], ['us-mo', 8], ['us-il', 14], |
|
|
['us-in', 10], ['us-vt', 2], ['us-ar', 5], ['us-tx', 22], |
|
|
['us-ri', 3], ['us-al', 7], ['us-ms', 5], ['us-nc', 12], |
|
|
['us-va', 11], ['us-ia', 6], ['us-md', 9], ['us-de', 2], |
|
|
['us-pa', 16], ['us-nj', 10], ['us-ny', 20], ['us-id', 4], |
|
|
['us-sd', 3], ['us-ct', 6], ['us-nh', 4], ['us-ky', 7], |
|
|
['us-oh', 14], ['us-tn', 9], ['us-wv', 3], ['us-dc', 5], |
|
|
['us-la', 8], ['us-fl', 18], ['us-ga', 12], ['us-sc', 7], |
|
|
['us-mn', 8], ['us-mt', 3], ['us-nd', 2], ['us-az', 9], |
|
|
['us-ut', 5], ['us-hi', 4], ['us-ak', 2] |
|
|
], |
|
|
name: 'Schools', |
|
|
states: { |
|
|
hover: { |
|
|
color: '#BADA55' |
|
|
} |
|
|
}, |
|
|
dataLabels: { |
|
|
enabled: true, |
|
|
format: '{point.name}' |
|
|
} |
|
|
}] |
|
|
}); |
|
|
|
|
|
|
|
|
const engagementCtx = document.getElementById('engagementChart').getContext('2d'); |
|
|
new Chart(engagementCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Engagement Rate', |
|
|
data: [35, 38, 42, 40, 45, 43, 47], |
|
|
borderColor: '#7C3AED', |
|
|
backgroundColor: 'rgba(124, 58, 237, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}, |
|
|
{ |
|
|
label: 'Participation', |
|
|
data: [28, 32, 35, 38, 42, 40, 45], |
|
|
borderColor: '#10B981', |
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const clubCategoriesCtx = document.getElementById('clubCategoriesChart').getContext('2d'); |
|
|
new Chart(clubCategoriesCtx, { |
|
|
type: 'doughnut', |
|
|
data: { |
|
|
labels: ['Academic', 'Arts', 'Sports', 'Community Service', 'STEM', 'Other'], |
|
|
datasets: [{ |
|
|
data: [25, 15, 20, 18, 12, 10], |
|
|
backgroundColor: [ |
|
|
'#7C3AED', |
|
|
'#3B82F6', |
|
|
'#10B981', |
|
|
'#F59E0B', |
|
|
'#EC4899', |
|
|
'#6B7280' |
|
|
], |
|
|
borderWidth: 0 |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right', |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const monthlyParticipationCtx = document.getElementById('monthlyParticipationChart').getContext('2d'); |
|
|
new Chart(monthlyParticipationCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'New Members', |
|
|
data: [120, 150, 180, 210, 240, 220, 250], |
|
|
backgroundColor: '#7C3AED' |
|
|
}, |
|
|
{ |
|
|
label: 'Active Members', |
|
|
data: [80, 100, 120, 150, 180, 200, 220], |
|
|
backgroundColor: '#10B981' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
x: { |
|
|
stacked: false, |
|
|
}, |
|
|
y: { |
|
|
stacked: false |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const clubGrowthCtx = document.getElementById('clubGrowthChart').getContext('2d'); |
|
|
new Chart(clubGrowthCtx, { |
|
|
type: 'line', |
|
|
data: { |
|
|
labels: ['2020', '2021', '2022', '2023'], |
|
|
datasets: [{ |
|
|
label: 'Total Clubs', |
|
|
data: [85, 105, 125, 142], |
|
|
borderColor: '#7C3AED', |
|
|
backgroundColor: 'rgba(124, 58, 237, 0.1)', |
|
|
tension: 0.3, |
|
|
fill: true |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const participationCtx = document.getElementById('participationChart').getContext('2d'); |
|
|
new Chart(participationCtx, { |
|
|
type: 'bar', |
|
|
data: { |
|
|
labels: ['Freshmen', 'Sophomores', 'Juniors', 'Seniors'], |
|
|
datasets: [{ |
|
|
label: 'Participation by Grade', |
|
|
data: [1200, 1800, 2200, 2500], |
|
|
backgroundColor: [ |
|
|
'#7C3AED', |
|
|
'#3B82F6', |
|
|
'#10B981', |
|
|
'#F59E0B' |
|
|
] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
display: false |
|
|
} |
|
|
}, |
|
|
scales: { |
|
|
y: { |
|
|
beginAtZero: true |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const activityTypesCtx = document.getElementById('activityTypesChart').getContext('2d'); |
|
|
new Chart(activityTypesCtx, { |
|
|
type: 'polarArea', |
|
|
data: { |
|
|
labels: ['Meetings', 'Events', 'Workshops', 'Fundraisers', 'Community Service'], |
|
|
datasets: [{ |
|
|
data: [45, 30, 25, 20, 15], |
|
|
backgroundColor: [ |
|
|
'#7C3AED', |
|
|
'#3B82F6', |
|
|
'#10B981', |
|
|
'#F59E0B', |
|
|
'#EC4899' |
|
|
] |
|
|
}] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'right', |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const userEngagementCtx = document.getElementById('userEngagementChart').getContext('2d'); |
|
|
new Chart(userEngagementCtx, { |
|
|
type: 'radar', |
|
|
data: { |
|
|
labels: ['Logins', 'Posts', 'Comments', 'Event Attendance', 'Resource Downloads'], |
|
|
datasets: [ |
|
|
{ |
|
|
label: 'Student Engagement', |
|
|
data: [85, 70, 65, 60, 50], |
|
|
backgroundColor: 'rgba(124, 58, 237, 0.2)', |
|
|
borderColor: '#7C3AED', |
|
|
pointBackgroundColor: '#7C3AED', |
|
|
pointBorderColor: '#fff', |
|
|
pointHoverBackgroundColor: '#fff', |
|
|
pointHoverBorderColor: '#7C3AED' |
|
|
}, |
|
|
{ |
|
|
label: 'Faculty Engagement', |
|
|
data: [90, 50, 40, 70, 30], |
|
|
backgroundColor: 'rgba(59, 130, 246, 0.2)', |
|
|
borderColor: '#3B82F6', |
|
|
pointBackgroundColor: '#3B82F6', |
|
|
pointBorderColor: '#fff', |
|
|
pointHoverBackgroundColor: '#fff', |
|
|
pointHoverBorderColor: '#3B82F6' |
|
|
} |
|
|
] |
|
|
}, |
|
|
options: { |
|
|
responsive: true, |
|
|
plugins: { |
|
|
legend: { |
|
|
position: 'top', |
|
|
} |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<script> |
|
|
document.addEventListener("DOMContentLoaded", function () { |
|
|
const schoolData = [ |
|
|
{ |
|
|
name: "Lincoln High School", |
|
|
address: "123 Education St, Springfield", |
|
|
lat: 37.208957, |
|
|
lng: -93.292299, |
|
|
}, |
|
|
{ |
|
|
name: "Jefferson High School", |
|
|
address: "456 Knowledge Ave, Jefferson", |
|
|
lat: 38.5767, |
|
|
lng: -92.1735, |
|
|
}, |
|
|
{ |
|
|
name: "Washington High School", |
|
|
address: "789 Wisdom Blvd, Washington", |
|
|
lat: 38.9072, |
|
|
lng: -77.0369, |
|
|
}, |
|
|
]; |
|
|
|
|
|
|
|
|
const map = L.map("detailedMap").setView([37.8, -96], 5); |
|
|
|
|
|
|
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { |
|
|
attribution: "© OpenStreetMap contributors", |
|
|
}).addTo(map); |
|
|
|
|
|
|
|
|
const markers = {}; |
|
|
|
|
|
|
|
|
schoolData.forEach((school) => { |
|
|
const marker = L.marker([school.lat, school.lng]) |
|
|
.addTo(map) |
|
|
.bindPopup(`<strong>${school.name}</strong><br>${school.address}`); |
|
|
markers[school.name] = marker; |
|
|
}); |
|
|
|
|
|
|
|
|
const schoolItems = document.querySelectorAll(".school-item"); |
|
|
|
|
|
schoolItems.forEach((item) => { |
|
|
item.addEventListener("click", () => { |
|
|
const name = item.querySelector("h4")?.textContent.trim(); |
|
|
const school = schoolData.find((s) => s.name === name); |
|
|
if (!school) return; |
|
|
|
|
|
|
|
|
schoolItems.forEach((el) => el.classList.remove("ring-2", "ring-purple-500")); |
|
|
item.classList.add("ring-2", "ring-purple-500"); |
|
|
|
|
|
|
|
|
const marker = markers[school.name]; |
|
|
map.setView([school.lat, school.lng], 14); |
|
|
marker.openPopup(); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const observer = new MutationObserver(() => { |
|
|
map.invalidateSize(); |
|
|
}); |
|
|
|
|
|
const tabContainer = document.getElementById("location"); |
|
|
if (tabContainer) { |
|
|
observer.observe(tabContainer, { attributes: true, attributeFilter: ["class"] }); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Ishwinder/webbuilder" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
