Hugging Face's logo

Spaces:
taarhissian
/
Clubmanagerdemo
Running

App Files Community
taarhissian commited on
Commit
35b8014
·
verified ·
1 Parent(s): 8e84eb6

Update admin-dashboard.html

Browse files
Files changed (1) hide show
  1. admin-dashboard.html +79 -13
admin-dashboard.html CHANGED
@@ -1,15 +1,28 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Admin Dashboard</title>
7
- <link rel="stylesheet" href="styles.css">
8
- <script src="scripts/mockData.js"></script>
9
- <script src="scripts/admin.js" defer></script>
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
- <header><h1>Admin Dashboard</h1></header>
 
 
 
13
  <nav>
14
  <a href="#dashboard">Dashboard</a>
15
  <a href="#users">Users</a>
@@ -18,11 +31,12 @@
18
  </nav>
19
 
20
  <section id="dashboard">
21
- <h2>Metrics</h2>
22
  <div class="dashboard-grid">
23
- <div class="placeholder">User / Club Metrics</div>
24
- <div class="placeholder">Upcoming Matches</div>
25
- <div class="placeholder">Subscription Status</div>
 
26
  </div>
27
  </section>
28
 
@@ -38,14 +52,66 @@
38
  <option value="parents">Parents</option>
39
  <option value="all">All Users</option>
40
  </select>
41
- <textarea id="announcementText" placeholder="Type your announcement here..."></textarea>
42
  <button onclick="sendAnnouncement()">Send Announcement</button>
43
  </div>
44
  <div class="placeholder">
45
  <h3>Recent Announcements</h3>
46
- <ul id="announcementList"></ul>
 
 
 
 
47
  </div>
48
  </div>
49
  </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
50
  </body>
51
  </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Club Manager Admin Dashboard</title>
7
+ <style>
8
+ body { font-family: Arial, sans-serif; margin:0; padding:0; background:#f4f4f4; }
9
+ header, nav, section, footer { padding: 20px; }
10
+ nav { background:#2c3e50; color:#fff; display:flex; justify-content:space-around; }
11
+ nav a { color:#fff; text-decoration:none; font-weight:bold; }
12
+ section { margin:20px; background:#fff; padding:20px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,0.1); }
13
+ h2 { margin-top:0; }
14
+ .dashboard-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:20px; }
15
+ .box, .placeholder { background:#eee; color:#333; text-align:center; padding:40px 0; border-radius:4px; cursor:pointer; }
16
+ .box:hover { background:#ddd; }
17
+ button { padding:10px 15px; border:none; border-radius:4px; background:#3498db; color:#fff; cursor:pointer; }
18
+ button:hover { background:#2980b9; }
19
+ </style>
20
  </head>
21
  <body>
22
+
23
+ <header>
24
+ <h1>Admin Dashboard - Club Manager</h1>
25
+ </header>
26
  <nav>
27
  <a href="#dashboard">Dashboard</a>
28
  <a href="#users">Users</a>
 
31
  </nav>
32
 
33
  <section id="dashboard">
34
+ <h2>Dashboard Overview</h2>
35
  <div class="dashboard-grid">
36
+ <div class="box">Metrics / Stats</div>
37
+ <div class="box">User Management</div>
38
+ <div class="box">Subscription Status</div>
39
+ <div class="box">Event Scheduling</div>
40
  </div>
41
  </section>
42
 
 
52
  <option value="parents">Parents</option>
53
  <option value="all">All Users</option>
54
  </select>
55
+ <textarea id="announcementText" placeholder="Type your announcement here..." style="width:100%; height:80px; margin-top:10px; border-radius:4px; padding:8px;"></textarea>
56
  <button onclick="sendAnnouncement()">Send Announcement</button>
57
  </div>
58
  <div class="placeholder">
59
  <h3>Recent Announcements</h3>
60
+ <ul id="announcementList" style="text-align:left; max-height:150px; overflow-y:auto;">
61
+ <li>[Demo] U13 Lions match rescheduled to Saturday 3 PM.</li>
62
+ <li>[Demo] Coach Sarah uploaded new Passing Drill for U13 team.</li>
63
+ <li>[Demo] Parent Meeting scheduled for Friday evening.</li>
64
+ </ul>
65
  </div>
66
  </div>
67
  </section>
68
+
69
+ <!-- Modal for demo details -->
70
+ <div id="demoModal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); justify-content:center; align-items:center;">
71
+ <div style="background:#fff; border-radius:8px; padding:20px; max-width:500px; width:90%; text-align:left; position:relative;">
72
+ <span id="closeModal" style="position:absolute; right:15px; top:10px; cursor:pointer; font-weight:bold; font-size:18px;">&times;</span>
73
+ <div id="modalContent"></div>
74
+ </div>
75
+ </div>
76
+
77
+ <script>
78
+ const modal = document.getElementById('demoModal');
79
+ const modalContent = document.getElementById('modalContent');
80
+ const closeModal = document.getElementById('closeModal');
81
+
82
+ const demoData = {
83
+ "Metrics / Stats": "<h3>Metrics / Stats (Demo)</h3><p>Team U13 Lions: 7 Wins, 1 Loss</p><p>Top Scorer: Jacob Player - 12 Goals</p>",
84
+ "User Management": "<h3>User Management (Demo)</h3><p>Admins: 1, Coaches: 3, Players: 25, Parents: 20</p>",
85
+ "Subscription Status": "<h3>Subscription Status (Demo)</h3><p>U13 Lions: 100% paid</p>",
86
+ "Event Scheduling": "<h3>Event Scheduling (Demo)</h3><p>Next Training: Thursday 5 PM</p><p>Match: Saturday 3 PM vs U13 Panthers</p>"
87
+ };
88
+
89
+ document.querySelectorAll('.box').forEach(box => {
90
+ box.addEventListener('click', () => {
91
+ const key = box.textContent.trim();
92
+ modalContent.innerHTML = demoData[key] || "<p>No demo content available.</p>";
93
+ modal.style.display = "flex";
94
+ });
95
+ });
96
+
97
+ closeModal.onclick = () => { modal.style.display = "none"; }
98
+ window.onclick = (e) => { if(e.target == modal) modal.style.display = "none"; }
99
+
100
+ function sendAnnouncement() {
101
+ const recipient = document.getElementById('recipient').value;
102
+ const text = document.getElementById('announcementText').value.trim();
103
+ if(text === '') { alert('Please type an announcement before sending.'); return; }
104
+ const list = document.getElementById('announcementList');
105
+ const newItem = document.createElement('li');
106
+ newItem.textContent = `[Demo to ${recipient}] ${text}`;
107
+ list.prepend(newItem);
108
+ document.getElementById('announcementText').value = '';
109
+ alert('Announcement sent (demo placeholder)');
110
+ }
111
+ </script>
112
+
113
+ <footer>
114
+ <p>&copy; 2026 Club Manager App - Admin Dashboard. All rights reserved.</p>
115
+ </footer>
116
  </body>
117
  </html>