-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (114 loc) · 4.25 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
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CTF Schedule</title>
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.js"></script>
<!-- Link to External CSS -->
<link rel="stylesheet" href="styles.css" />
<!-- Google Font: Orbitron -->
<link
href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="bg-cover bg-center bg-fixed" style="background-color: black">
<!-- Vertical CTF Text (Fixed Position) -->
<div class="vertical-ctf">
<span class="ctf-text">CTF</span>
</div>
<!-- Main Container -->
<div class="flex min-h-screen items-center justify-center bg-black">
<div class="w-full max-w-4xl bg-gray-800 p-8 rounded-xl shadow-2xl">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-5xl text-green-400 font-extrabold font-orbitron">
CTF Schedule
</h1>
<!-- Changed to Orbitron font -->
</header>
<div class="flex space-x-6">
<!-- Main Content -->
<main class="w-3/4">
<section class="schedule mb-10">
<ul class="event-list space-y-6">
<!-- Event Item 1 -->
<li
class="event flex justify-between items-center p-4 bg-gray-700 rounded-lg shadow-md hover:bg-gray-600"
>
<div>
<span class="event-name text-white font-semibold"
>Add Teams 🚀</span
>
</div>
<button
id="add_team_btn"
class="join-btn bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition duration-300"
>
Add
</button>
</li>
<!-- Event Item 2 -->
<li
class="event flex justify-between items-center p-4 bg-gray-700 rounded-lg shadow-md hover:bg-gray-600"
>
<div>
<span class="event-name text-white font-semibold"
>Team Details 📝</span
>
</div>
<button
id="full_team_detail"
class="join-btn bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"
>
See
</button>
</li>
<!-- Event Item 3 -->
<li
class="event flex justify-between items-center p-4 bg-gray-700 rounded-lg shadow-md hover:bg-gray-600"
>
<div>
<span class="event-name text-white font-semibold"
>Rounds 🔄</span
>
</div>
<button
id="round_btn"
class="join-btn bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300"
>
See
</button>
</li>
<!-- Event Item 4 -->
<li
class="event flex justify-between items-center p-4 bg-gray-700 rounded-lg shadow-md hover:bg-gray-600"
>
<div>
<span class="event-name text-white font-semibold"
>About 🎉</span
>
</div>
<button
class="join-btn bg-red-500 text-white px-4 py-2 rounded-lg hover:bg-red-600 transition duration-300"
id="about_btn"
>
See
</button>
</li>
</ul>
</section>
</main>
</div>
</div>
</div>
<!-- Link to the external JS file -->
<script src="index_scripts.js"></script>
</body>
</html>