-
Notifications
You must be signed in to change notification settings - Fork 4
/
roles.html
166 lines (150 loc) · 7.16 KB
/
roles.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Karla:wght@400;500;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/8663eb90fc.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/roles.css">
<title>Roles | NUS Students' Computing Club</title>
</head>
<body>
<div id="navbar">
<a href="https://nuscomputing.com" width="40" id="logo"><img src="assets/black-logo.png" width="40"
id="logo"></a>
<div id="options">
<p><a href="elections.html">Home</a></p>
<p><a href="manifesto.html">Manifesto</a></p>
<p><a href="candidates.html">Candidates</a></p>
<p><a style="color: #feca57;" href="roles.html">Roles</a></p>
<!-- <p><a href="nomination.html">Nomination</a></p> -->
<!-- <p><a href="voting.html">Voting</a></p>-->
<!--p><a href="internalresults.html">Results</a></p-->
<p><a href="externalresults.html">Results</a></p>
</div>
</div>
<div id="main-container">
<img src="assets/elections/comclub_structure.svg" alt="" id="hero-img">
<img src="assets/elections/comclub_structure.svg" alt="" id="hero-img-dup">
<p id="segment-header">Roles</p>
<br>
<!-- PRESIDENTIAL WING -->
<button class="accordion">Presidential Wing</button>
<div class="panel">
<ul id="panel-list">
<li><b>President</b></li>
<li>Finance Secretary</li>
<!-- <ul>
<li style="margin-left:1em">Assistant Finance Secretary</li>
</ul> -->
<li>Tech Lead</li>
<ul>
<li style="margin-left:1em">Deputy Tech Lead</li>
</ul>
<li>General Secretary</li>
<ul>
<li style="margin-left:1em">Deputy General Secretary</li>
</ul>
<li>Operations Secretary</li>
</ul>
<button style="margin-bottom: 7px;" id="panel-button" data-href="elections/presidentialwing.html"
onclick="window.open(this.getAttribute('data-href'), '_self')">More information<i
style="margin-left: 5px;" class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- EXTERNAL RELATION -->
<button class="accordion">External Relations</button>
<div class="panel">
<ul id="panel-list">
<li><b>Vice President (External Relations)</b></li>
<li>Director of Marketing </li>
<ul>
<li style="margin-left:1em">Deputy Director of Marketing (Sponsorships)</li>
<li style="margin-left:1em">Deputy Director of Marketing (Merchandise)</li>
</ul>
<li>Director of Publicity </li>
<ul>
<li style="margin-left:1em">Deputy Director of Publicity (Content & Graphics)</li>
<li style="margin-left:1em">Deputy Director of Publicity (Photo & Video)</li>
</ul>
</ul>
<button style="margin-bottom: 7px;" id="panel-button" data-href="elections/externalrelations.html"
onclick="window.open(this.getAttribute('data-href'), '_self')">More information<i
style="margin-left: 5px;" class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- INTERNAL RELATION -->
<button class="accordion">Internal Relations</button>
<div class="panel">
<ul id="panel-list">
<li><b>Vice President (Internal Relations)</b></li>
<li>Director of Welfare</li>
<ul>
<li style="margin-left:1em">Deputy Director of Welfare</li>
</ul>
<li>Director of Sports</li>
<ul>
<li style="margin-left:1em">Deputy Director of Sports</li>
</ul>
</ul>
<button style="margin-bottom: 7px;" id="panel-button" data-href="elections/internalrelations.html"
onclick="window.open(this.getAttribute('data-href'), '_self')">More information<i
style="margin-left: 5px;" class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- STUDENT DEVELOPMENT -->
<button class="accordion">Student Development</button>
<div class="panel">
<ul id="panel-list">
<li><b>Vice President (Student Development)</b></li>
<li>Director of Academic Liaison</li>
<ul>
<li style="margin-left:1em">Deputy Director of Academic Liaison</li>
</ul>
<li>Director of Community Engagement</li>
<li>Director of Rag & Flag</li>
<!-- <ul>
<li style="margin-left:1em">Deputy Director of Community Engagement</li>
</ul> -->
</ul>
<button style="margin-bottom: 7px;" id="panel-button" data-href="elections/studentdevelopment.html"
onclick="window.open(this.getAttribute('data-href'), '_self')">More information<i
style="margin-left: 5px;" class="fa-solid fa-arrow-right"></i></button>
</div>
<!-- STUDENT LIFE -->
<button class="accordion">Student Life</button>
<div class="panel">
<ul id="panel-list">
<li><b>Vice President (Student Life)</b></li>
<li>Director of Freshmen Orientation Projects</li>
<ul>
<li style="margin-left:1em">Deputy Director of Freshmen Orientation Projects</li>
<li style="margin-left:1em">Deputy Director of Freshmen Orientation Projects</li>
</ul>
<li>Director of Student Engagement</li>
<ul>
<li style="margin-left:1em">Deputy Director of Student Engagement</li>
</ul>
</ul>
<button style="margin-bottom: 7px;" id="panel-button" data-href="elections/studentlife.html"
onclick="window.open(this.getAttribute('data-href'), '_self')">More information<i
style="margin-left: 5px;" class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</body>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</html>