website/about.html at master · WPI-LNL/website · GitHub

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="description" content="Lens and Lights provides professional quality production services to the WPI community at an affordable price. Learn more about our club and meet our current executive board members here.">
		<title>Lens and Lights | About Us</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="assets/css/main.css">
		<script>
			(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
				(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
		  		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
		  	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

		  	ga('create', 'UA-66611753-1', 'auto');
		  	ga('send', 'pageview');
		</script>
		<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
		<!--[if lt IE 9]>
		  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Fav and touch icons -->
		<link rel="shortcut icon" href="assets/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="assets/ico/apple-touch-icon-57-precomposed.png">
		<script
		src="https://code.jquery.com/jquery-3.3.1.js"
		integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
		crossorigin="anonymous">
		</script>
		<script>
			$(function(){
			$("#header").load("/assets/html/header.html");
			$("#footer").load("/assets/html/footer.html");
			});
		</script>
	</head>
	<body>
		<div id="header"></div>
		<section class="bg-dark">
			<br>
			<div class="container" id="alert"></div>
			<div class="container mt-4" style="color: white">
				<h2>About Lens and Lights</h2>
				<p><br>We are Lens and Lights, a WPI student organization which provides quality lighting, sound, and projection
				services to the WPI community. We are a group of very passionate individuals who are interested in working with
				production equipment and advancing the WPI community.</p>
				<div class="row mt-4">
					<div class="col-md">
						<h3 class="h4 py-2" style="color: yellow">To On-Campus Organizations</h3>
						<p>Do you want to be seen and heard by the masses at your next event? Bring in Lens and Lights! We specialize
						in lighting and sound, from a simple spotlight or microphone to full-stage setups. We also run a movie
						theater with high quality film and digital projection capabilities. For more information or to request our services for an event, contact us at <a href="https://outlook.office.com/mail/deeplink/compose?to=lnl@wpi.edu" style="color: yellow">lnl@wpi.edu</a>.</p>
						<p><a href="https://outlook.office.com/mail/deeplink/compose?to=lnl@wpi.edu" class="btn btn-warning">Contact Us</a><br></p>
					</div>
					<div class="col-md">
						<h3 class="h4 py-2" style="color: yellow">To Interested Students</h3>
						<p>Want to work with high-quality equipment and become a driving force in getting things done on campus?
						Join LNL! We encourage you to stop by and chat or help out at any of our upcoming events. You can also pop by
						one of our general body meetings, every Wednesday at 5PM in AK233 when classes are in session, or visit our office on the third floor
						of the campus center.</p>
						<p><a href="/join" class="btn btn-warning">Join us!</a><br></p>
					</div>
				</div>
				<div class="row">
					<div class="col-md pt-3" style="color: white">
						<h3 class="h4 pt-2" style="color: yellow">History</h3>
						<p class="mb-0 pb-2">During the winter of 1961-62, five WPI students got together and formed an organization
						they called Lens and Lights. Check out our history page to learn more about how the club has grown over the
						years and to view photos from past decades.</p>
						<p><a href="/history" class="btn btn-warning">Learn More</a><br></p>
					</div>
					<div class="col-md pt-3" style="color: white">
						<h3 class="h4 pt-2" style="color: yellow">Equipment</h3>
						<p class="mb-0 pb-2">Ever wonder how we control the lighting or the sound systems used for events like <em>Can We Talk?</em> or the annual VEX Robotics
						event? If so, or if you simply want to learn more about the equipment LNL has in stock, you can browse through some of our inventory and learn more about our
						equipment on our Technical Overview page.</p>
						<p><a href="/equipment" class="btn btn-warning">Learn More</a><br></p>
					</div>
				</div>
				<br>
				<h2>Meet Our Officers</h2>
			</div>
			<div id="exec">
				<div class="row no-gutters mb-4 justify-content-center" style="color: black">
					<div class="card col-md-3 p-0 m-4" id="President-card">
						<img id="President-img" src="assets/img/officers/profile.png" class="card-img-top" alt="President"/>
						<div class="card-body">
							<h3 class="h5">President - <span id="President-name">Not available</span> <span id="President-year"></span></h3>
							<p class="card-text"><br>The President's job involves diplomacy - leading the executive board, managing club members, serving as a liaison between the club and WPI, and keeping the club running smoothly.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim President-card">
						<img id="Interim President-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim President"/>
						<div class="card-body">
							<h3 class="h5">Interim President - <span id="Interim President-name">Not available</span> <span id="Interim President-year"></span></h3>
							<p class="card-text"><br>The President's job involves diplomacy - leading the executive board, managing club members, serving as a liaison between the club and WPI, and keeping the club running smoothly.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Vice President-card">
						<img id="Vice President-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Vice President"/>
						<div class="card-body">
							<h3 class="h5">Vice President - <span id="Vice President-name">Not available</span> <span id="Vice President-year"></span></h3>
							<p class="card-text"><br>The Vice President is in charge of events and serves as a liaison between the club and our clients. They work with clients to select the best services for their event and are responsible for managing the logistics to ensure our events run smoothly.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim Vice President-card">
						<img id="Interim Vice President-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim Vice President"/>
						<div class="card-body">
							<h3 class="h5">Interim Vice President - <span id="Interim Vice President-name">Not available</span> <span id="Interim Vice President-year"></span></h3>
							<p class="card-text"><br>The Vice President is in charge of events and serves as a liaison between the club and our clients. They work with clients to select the best services for their event and are responsible for managing the logistics to ensure our events run smoothly.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Technical Director-card">
						<img id="Technical Director-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Technical Director"/>
						<div class="card-body">
							<h3 class="h5">Technical Director - <span id="Technical Director-name">Not available</span> <span id="Technical Director-year"></span></h3>
							<p class="card-text"><br>The Technical Director's responsibilities include the purchase, repair and upkeep of equipment. They are also responsible for training our members in the proper use of the equipment.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim Technical Director-card">
						<img id="Interim Technical Director-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim Technical Director"/>
						<div class="card-body">
							<h3 class="h5">Interim Technical Director - <span id="Interim Technical Director-name">Not available</span> <span id="Interim Technical Director-year"></span></h3>
							<p class="card-text"><br>The Technical Director's responsibilities include the purchase, repair and upkeep of equipment. They are also responsible for training our members in the proper use of the equipment.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Head Projectionist-card">
						<img id="Head Projectionist-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Head Projectionist"/>
						<div class="card-body">
							<h3 class="h5">Head Projectionist - <span id="Head Projectionist-name">Not available</span> <span id="Head Projectionist-year"></span></h3>
							<p class="card-text"><br>The Head Projectionist (HP) is in charge of the club's projectors, making sure they are kept clean and maintained. They also serve as a liaison between the club and clients looking to have projection at their event.
							Additionally, the HP is responsible for training all of our new projectionists.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim Head Projectionist-card">
						<img id="Interim Head Projectionist-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim Head Projectionist"/>
						<div class="card-body">
							<h3 class="h5">Interim Head Projectionist - <span id="Interim Head Projectionist-name">Not available</span> <span id="Interim Head Projectionist-year"></span></h3>
							<p class="card-text"><br>The Head Projectionist (HP) is in charge of the club's projectors, making sure they are kept clean and maintained. They also serve as a liaison between the club and clients looking to have projection at their event.
							Additionally, the HP is responsible for training all of our new projectionists.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Treasurer-card">
						<img id="Treasurer-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Treasurer"/>
						<div class="card-body">
							<h3 class="h5">Treasurer - <span id="Treasurer-name">Not available</span> <span id="Treasurer-year"></span></h3>
							<p class="card-text"><br>The Treasurer is in charge of the club’s financial operations, both with on-campus accounts at WPI and off-campus customers. Their responsibilities include billing clients, paying invoices, submitting reimbursements and balancing the club’s finances.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim Treasurer-card">
						<img id="Interim Treasurer-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim Treasurer"/>
						<div class="card-body">
							<h3 class="h5">Interim Treasurer - <span id="Interim Treasurer-name">Not available</span> <span id="Interim Treasurer-year"></span></h3>
							<p class="card-text"><br>The Treasurer is in charge of the club’s financial operations, both with on-campus accounts at WPI and off-campus customers. Their responsibilities include billing clients, paying invoices, submitting reimbursements and balancing the club’s finances.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Secretary-card">
						<img id="Secretary-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Secretary"/>
						<div class="card-body">
							<h3 class="h5">Secretary - <span id="Secretary-name">Not available</span> <span id="Secretary-year"></span></h3>
							<p class="card-text"><br>The Secretary keeps minutes during all the meetings. The secretary is also in charge of keeping accurate membership lists.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim Secretary-card">
						<img id="Interim Secretary-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim Secretary"/>
						<div class="card-body">
							<h3 class="h5">Interim Secretary - <span id="Interim Secretary-name">Not available</span> <span id="Interim Secretary-year"></span></h3>
							<p class="card-text"><br>The Secretary keeps minutes during all the meetings. The secretary is also in charge of keeping accurate membership lists.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Webmaster-card">
						<img id="Webmaster-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Webmaster"/>
						<div class="card-body">
							<h3 class="h5">Webmaster - <span id="Webmaster-name">Not available</span> <span id="Webmaster-year"></span></h3>
							<p class="card-text"><br>The Webmaster is responsible for maintaining the club's web services, including our internal database. They are also responsible for public relations and managing the club's social media.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4" id="Interim Webmaster-card">
						<img id="Interim Webmaster-img" src="assets/img/officers/profile.png" class="card-img-top" alt="Interim Webmaster"/>
						<div class="card-body">
							<h3 class="h5">Interim Webmaster - <span id="Interim Webmaster-name">Not available</span> <span id="Interim Webmaster-year"></span></h3>
							<p class="card-text"><br>The Webmaster is responsible for maintaining the club's web services, including our internal database. They are also responsible for public relations and managing the club's social media.</p>
						</div>
					</div>
					<div class="card col-md-3 p-0 m-4">
						<img src="assets/img/officers/boom_boom.JPG" class="card-img-top" alt="Boom Boom"/>
						<div class="card-body">
							<h3 class="h5">Mascot - Boom Boom</h3>
							<p class="card-text"><br>Boom Boom makes appearances at various LNL events. Boom Boom is responsible for boosting crew morale and always encourages us to reach higher.</p>
						</div>
					</div>
				</div>
			</div>

		</section>
		<!--Modal Views-->
		<div class="modal" tabindex="-1" role="dialog" id="critical-alert">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header" id="alert-header">
						<h5 class="modal-title" id="alert-title"></h5>
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body" id="alert-message">
						<p></p>
					</div>
					<div class="modal-footer">
						<button class="btn btn-secondary" data-dismiss="modal">Close</button>
					</div>
				</div>
			</div>
		</div>
		<form id="page-id">
			<input hidden name="project_id" value="LNL">
			<input id="dirID" hidden name="directory" value="">
			<input id="pageID" hidden name="page_id" value="">
		</form>
		<div id="footer"></div>
		<script>
		function setYear() {
			getNotifications();
			getOfficers(true);
		}

		function toggleMenu(){
        	if (document.getElementById("nav").style.display == "block"){
        		document.getElementById("nav").style.display = "none";
        	}else{
        		document.getElementById("nav").style.display = "block";
        	}
        }

		window.onload = setYear;
		</script>
    	<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    	<script src="assets/js/api.js"></script>
    	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
	</body>
</html>