-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
231 lines (207 loc) · 11.4 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
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
---
layout: default
---
<!-- sets the layout. this layout is located in /_includes/_layouts/default.html -->
<!-- Page Header -->
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url('/assets/images/Banner/TeamDarkCropped2024.JPG')" onclick="showModal('myModal', '/assets/images/Banner/TeamFull2024.JPG', 'KnightKrawler Team - 2024')"> <!-- sets the backgroud image and pop-up -->
<div class="site-heading">
<h1>KnightKrawler Robotics</h1>
<h2>FRC Team 2052</h2>
</div>
</header>
<!-- code for the pop-up image in header. opens a modal on click using the code in phomodal.js -->
<div id="myModal" class="modal">
<span class="close" onclick="closeModal('myModal')">×</span>
<img class="modal-content" id="myModalImage" data-proofer-ignore>
<div class="modal-caption" id="myModalCaption"></div>
</div>
<script type="text/javascript" src="/assets/scripts/photomodal.js?refresh=2"></script>
<!-- sets up the news box using if and for loop from liquid control flow -->
<div class="container">
{% assign psize = site.posts | size %} <!-- creates a variable -->
{% if psize > 0 %} <!-- if there are more than 0 files in posts folder, shows the card -->
<div class="card news">
<div class="card-heading">
<i class="fas fa-newspaper"></i> NEWS
</div>
{% for post in site.posts reversed %} <!-- creates a separate paragraph for each file in posts -->
<div class="card-body">
<h2 class="post-title" itemprop="name"><a href="{{ site.baseurl }}{{ post.url | remove: '/'}}" itemprop="url">
{{ post.title }} <i class="fas fa-arrow-circle-right"></i>
</a></h2>
<p class="post-description">{{ post.excerpt | strip_html | truncatewords: 19 }}</p> <!-- truncatewords is the amount of words from the news file that is shown in the preview paragraph -->
</div>
{% endfor %}
</div>
{% endif %}
<div class="row justify-content-center pt-5">
<img class="center" id="hovergif" src="/assets/images/logo/logo-large.png" height="200"> <!-- this is the kk logo. links to the javascript that adds the gif on hover -->
<script type="text/javascript" src="/assets/scripts/hovergif.js?refresh=2"></script>
</div>
<!-- starting paragraphs -->
<div class="row justify-content-center">
<h1 class="kk center maroon text-center">
Welcome to Knightkrawler!
</h1>
</div>
<div class="row">
<p>
We are Irondale High School's Robotics Team, <a href="/glossary/#frc">FRC</a> Team 2052. KnightKrawler is a place where
everyone is welcome and students become professionals. We work hard to compete at the
highest levels of competition while doing our best to assist all teams and help everyone succeed.
</p>
<p>
<a href="/glossary/#graciousprofessionalism">Gracious Professionalism</a> is one of our core values. We work to ensure everyone has success
in robotics. How can we help? <a href="/contact">Contact us<a> and let's work together to build
awesome robots and the next generation of engineers and business professionals.
</p>
</div>
<br>
<!-- update paragraphs and videos that are side by side -->
<div class="row justify-content-center mt-5 mb-2">
<div class="col col-sm-12 col-md-6"> <!-- div that includes the paragraphs -->
<!-- <h2 class="maroon text-center">KnightKrawler's Top 10 Tips</h2>
<p class="text-center">Check out our <a href="/2020top10">top 10 tips</a> on what to do and look for at a 2024 <a href="/glossary/#frc" target="_blank">FRC</a> competition!</p>
<br> -->
<div class="row">
<div class="col-sm-12 col-md-12 center text-center">
<h2 class="maroon text-center">Week Zero!</h2>
<p> Every year KnightKrawler hosts a practice tournament prior to the first week of competition. This gives teams a chance to practice in a near-real competition experience. <a href="/2025-week-zero" target="_blank"> Learn more and register!</a></p>
<!-- <a class="a:link" href="https://www.youtube.com/watch?v=HzqGKjLf8m4" target="_blank">
<button type="button" class="linkbutton center"><font class="kk" size="4">Live Stream Link </font></button></a> -->
</div>
</div>
<div class="col-sm-12 col-md-12 center text-center">
<h2 class="maroon text-center">Important Dates at a Glance</h2>
<p><strong>Mark your calendars!</strong></p>
<!-- <p>No Upcoming Events!<br/></p> -->
<p>MinneTrials Competition<br/><b>December 7th, 2024</b></p>
<p><a href="/2025-week-zero/">Week Zero</a><br/><b>February 22th, 2025</b></p>
</div>
<br>
<div class="row">
<div class="col-sm-12 col-md-12 center text-center">
<h2 class="maroon text-center">New Resource!</h2>
<p>Check out our new <a href="/roundtable/">Roundtable</a> page! There you will find all about our weekly sunday night call with teams in FRC!</p>
</div>
</div>
</div>
<!-- div with videos. Usually game animation and robot reveal -->
<div class="col-sm-12 col-md-5 center">
<!-- Game Animation -->
<iframe class="youtube center results-padding" width="853" height="480" src="https://www.youtube.com/embed/9keeDyFxzY4?si=oJeyVNSpU_uZEu9s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<!-- Robot Reveal -->
<iframe class="youtube center results-padding" width="854" height="480" src="https://www.youtube.com/embed/7VQs6FM1P04?si=t54sWbShf6EMORvo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<!-- sponsors -->
<div class="row justify-content-center mt-5 mb-2">
<h2 class="maroon">Our King Sponsors</h2>
</div>
<div class="row ">
<div class="col justify-content-center sponsor-row">
<img src="/assets/images/sponsors/Groves.jpg" class="mx-auto d-block img-fluid max-200"/>
</div>
<div class="col justify-content-center sponsor-row">
<img src="/assets/images/sponsors/Medtronic.png" class="mx-auto d-block img-fluid max-200"/>
</div>
<div class="col justify-content-center sponsor-row">
<img src="/assets/images/sponsors/3M.png" class="mx-auto d-block img-fluid max-200"/>
</div>
<div class="col justify-content-center sponsor-row">
<img src="/assets/images/sponsors/QONQR.png" class="mx-auto d-block img-fluid max-200"/>
</div>
<div class="col justify-content-center sponsor-row">
<img src="/assets/images/sponsors/Irondale.jpg" class="mx-auto d-block img-fluid max-200"/>
</div>
<div class="justify-content-center sponsor-row">
<a href="https://ghaasfoundation.org/content/ghf/en/home.html" target="_blank">
<img src="/assets/images/sponsors/haas.png" class="mx-auto d-block img-fluid"/>
</a>
</div>
</div>
<div class="row justify-content-center">
<a href="/sponsors"> See all our sponsors <i class="fas fa-arrow-circle-right"></i></a>
</div>
<!-- FRC krawler stuff -->
<div class="row pt-5">
<div class="col-md-3 pt-5">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <!-- carousels scroll through a list of photos. -->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <!-- small indicators at the bottom where users can switch to photos in the list manually -->
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner"> <!-- list of images -->
<div class="carousel-item active">
<img src="/assets/images/scouting/ScoutingApp1-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp2-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp3-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp4-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp5-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp6-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp8-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp9-sm.png" class="mx-auto d-block img-fluid"/>
</div>
<div class="carousel-item">
<img src="/assets/images/scouting/ScoutingApp10-sm.png" class="mx-auto d-block img-fluid"/>
</div>
</div>
<a class="carousel-control-prev maroon" href="#carouselExampleIndicators" role="button" data-slide="prev"> <!-- arrows that scroll through -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<div class="col-md-9"> <!-- text paragraph for frc krawler -->
<p>
<h2 class="text-center maroon">FRC Krawler</h2>
</p>
<p>
<h5 class="text-center">The fully customizable <a href="/glossary/#scouting">scouting</a> solution</h5>
</p>
<ul> <!-- unordered list / bullet points for each li element -->
<li>A simple way to keep data event-to-event, and year-to-year.</li>
<li>Simultaneous scouting for more than six team members.</li>
<li>A user interface intuitive enough for an expert, and simple enough for a beginner.</li>
<li>The ability to sync via Bluetooth for use during competitions.</li>
<li>The ability to define the type of scouting you're doing, from match scouting to pit scouting.</li>
<li>The ability to search and sort data based on what was collected.</li>
<li>Provides the ability to back up data onto your PC.</li>
<li>Ability to export data into the .csv file format.</li>
<li>Available at no cost, for anyone and everyone!</li>
</ul>
<div class="row">
<div class="col-md-6">
<a href="https://play.google.com/store/apps/details?id=com.team2052.frckrawler" target="_blank"> <!-- shows the google play image and links it -->
<img src="assets/images/scouting/Google_Play_Badge.jpg" class="pl-3" />
</a>
</div>
<div class="col-md-6">
<div class="float-right">
<a href="/frckrawler/" > Details <i class="fas fa-arrow-circle-right"></i></a> <!-- details arrow in the bottom right -->
</div>
</div>
</div>
</div>
</div>
<!-- social media and copyright are coded into the default layout -->