-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
112 lines (105 loc) · 7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./assets/logo.png" type="image/x-icon" />
<title>SJCET Radio Community - Admin Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="./styles/styles.css" rel="stylesheet"/>
<style>
body {
font-family: "Poppins", sans-serif;
background-color: #f0f4f8;
}
</style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
<div class="loader-container fixed inset-0 flex items-center justify-center bg-white z-50" id="loader">
<img src="./assets/loader.png" alt="Radio Community SJCET Logo" class="loader" />
</div>
<div id="login-container" class="min-h-screen flex items-center justify-center p-4">
<div class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg p-8 rounded-xl shadow-2xl w-full max-w-md transform transition-all duration-300 hover:scale-105">
<h2 class="text-3xl font-bold mb-6 text-center text-indigo-700">Admin Login</h2>
<button id="google-signin" class="w-full bg-indigo-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300 flex items-center justify-center">
<svg class="w-6 h-6 mr-2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z" />
</svg>
Sign in with Google
</button>
</div>
</div>
<div id="dashboard-container" class="hidden min-h-screen flex flex-col bg-gradient-to-br from-blue-50 to-indigo-100">
<nav class="bg-white shadow-md w-full">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<span class="ml-2 font-bold text-xl text-indigo-800">Radio Community - Admin</span>
</div>
</div>
<div class="flex items-center">
<button id="logout-btn" class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-all duration-300">
Logout
</button>
</div>
</div>
</div>
</nav>
<main class="flex-grow max-w-7xl w-full mx-auto py-6 sm:px-6 lg:px-8">
<div class="px-4 py-6 sm:px-0">
<div id="main-options" class="grid grid-cols-1 md:grid-cols-2 gap-8">
<button id="responses-btn" class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg p-8 rounded-xl shadow-lg text-2xl font-bold text-indigo-800 hover:bg-indigo-100 transition-all duration-300">
Responses
</button>
<button id="events-btn" class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg p-8 rounded-xl shadow-lg text-2xl font-bold text-indigo-800 hover:bg-indigo-100 transition-all duration-300">
Events
</button>
</div>
<div id="responses-container" class="hidden mt-8">
<div class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-indigo-800">Responses</h2>
<button id="responses-back-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300">
Go Back
</button>
</div>
<div id="responses-list" class="space-y-4">
<!-- Responses will be dynamically inserted here -->
</div>
</div>
</div>
<div id="events-container" class="hidden mt-8">
<div class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6 mb-8">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-indigo-800">Events</h2>
<button id="events-back-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300">
Go Back
</button>
</div>
<h3 class="text-xl font-bold mb-4 text-indigo-700">Add New Event</h3>
<form id="add-event-form">
<div class="mb-4">
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-indigo-500" id="event-poster" type="file" accept="image/*" required />
</div>
<div class="flex items-center justify-between">
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all duration-300" type="submit">
Add Event
</button>
</div>
</form>
</div>
<div class="bg-white bg-opacity-80 backdrop-filter backdrop-blur-lg rounded-xl shadow-lg p-6">
<h3 class="text-xl font-bold mb-4 text-indigo-700">Existing Events</h3>
<div id="events-list" class="space-y-4">
<!-- Events will be dynamically inserted here -->
</div>
</div>
</div>
</div>
</main>
</div>
<script type="module" src="./scripts/index.js"></script>
</body>
</html>