-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (147 loc) · 5.29 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Spindle</title>
<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=Dela+Gothic+One&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
/>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="navBar">
<a class="pagelink" href="/" > <div id="logoMark">Spindle</div></a>
<div id="pageOptions">
<a class="pagelink" href="/code"
><span class="material-symbols-rounded"> code_blocks </span> <span class ="navBarText" >Code</span>
</a>
<a class="pagelink" href="/docs">
<span class="material-symbols-rounded"> description </span>
<span class ="navBarText" >Documentation</span>
</a>
<a class="pagelink">
<span class="material-symbols-rounded"> school </span> <span class ="navBarText" >Exam Prep</span>
</a>
</div>
</div>
<div id="heroSection">
<img
id="spindlebrandImg"
src="https://cdn.glitch.global/e1bb975a-9da8-4eb1-bcd1-68066f8e9cd4/logo-no-background.png?v=1734132398879"
/>
<h1 id="spindleHook">
Meet <b class="brandname">Spindle,</b> the ultimate AP CSP Tool
</h1>
<div id="aboutSpindleSection">
Spindle is a brand-new open-source programming language designed to
mimic the language used for the AP Test
</div>
</div>
<h2>What makes Spindle Special?</h2>
<div id="subHeroSection">
<div class="card">
<b class="icon">
<span class="material-symbols-rounded">bolt </span>
</b>
<div class="container">
<b>Actually on the Test</b>
<p>
Spindle code mirrors the snytax of the AP CSP exam, so you'll be
tested on what you know directly.
</p>
</div>
</div>
<div class="card">
<b class="icon">
<span class="material-symbols-rounded"> school </span>
</b>
<div class="container">
<b>Interactive Learning</b>
<p>
Spindle is designed for hands-on learning. You make your own code
and get to see the results firsthand.
</p>
</div>
</div>
<div class="card">
<b class="icon">
<span class="material-symbols-rounded"> hourglass_top </span></b
>
<div class="container">
<b>Easy to Use</b>
<p>
Spindle only has what is on the AP EXAM, no more, no less. In
addition, Spindle is well documented.
</p>
</div>
</div>
<div class="card">
<b class="icon">
<span class="material-symbols-rounded"> rocket_launch </span></b
>
<div class="container">
<b>Quick Set Up</b>
<p>
Spindle can be downloaded in just a few steps, or if you don't want
to downloading anything, you can run Spindle code on our website!
</p>
</div>
</div>
</div>
<div id="spindleShowcase">
<h1>We take AP CSP Seriously</h1>
Experience the power of Spindle firsthand with our interactive demo. Write
code, see the results instantly, and learn the basics of the language in a
fun and engaging way. <br />
Don't believe us? Here's a peek at some Spindle Code: <br />
<div class="spindle-code">
<code>1. # Displays "hello" </code>
<code>2. text <-- "hello" </code>
<code>3. DISPLAY(text) </code>
</div>
</div>
<div id="launchDemo">
<a href="/code">Like what you see? Launch Demo</a>
</div>
<div id="optionsContiner" class="">
<div class="optionContainer">
<div class="optionTitle">
<b>How can I use it? </b>
</div>
<div id="iio4j7" class="am-desc">
Sparkle is available everywhere! If you want to get started as quickly
as possible, click the "code" option in the nav bar. Or if you want to
download it nativly on desktop, click the "download" option and follow
the instructions.
</div>
</div>
<div class="optionContainer">
<div class="optionTitle">
<b>How can I Improve It </b>
</div>
<div id="" class="">
Sparkle is open sourced under the MIT licence, and we could really use
your help! To support us,
<a href="https://github.com/spindle-project">
leave us a star on our github and contribute to our repos!
</a>
</div>
</div>
</div>
<div id="copyright">
<div id="" class="made-with">© Sparkle, 2024</div>
AP Computer Science Principles (CSP) is a trademark registered by
the College Board, which is not affiliated with, and does not endorse,
this project or site.
</div>
</body>
</html>