-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
260 lines (256 loc) · 14.5 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
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sparkled</title>
<meta name="description" content="Sparkled: The modern LED sequencer"/>
<meta name="author" content="Chris Parton">
<meta name="keywords" content="sparkled, led, sequencer, chrislights"/>
<meta property="og:title" content="Sparkled"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content=""/>
<meta property="og:image" content=""/>
<meta property="og:image:width" content="470"/>
<meta property="og:image:height" content="246"/>
<meta property="og:site_name" content="Sparkled"/>
<meta property="og:description" content="Sparkled: The modern LED sequencer"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#7b5eea"/>
<meta name="msapplication-navbutton-color" content="#7b5eea"/>
<meta name="apple-mobile-web-app-status-bar-style" content="#7b5eea"/>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:400,400i,600,600i,700,700i" rel="stylesheet"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/colors/color.css"/>
<link rel="icon" type="image/x-icon" href="favicon.ico"/>
</head>
<body>
<div class="loader dark">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
<rect x="0" y="0" width="4" height="10" fill="#333">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0" dur="0.6s" repeatCount="indefinite"/>
</rect>
<rect x="10" y="0" width="4" height="10" fill="#333">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.2s" dur="0.6s" repeatCount="indefinite"/>
</rect>
<rect x="20" y="0" width="4" height="10" fill="#333">
<animateTransform attributeType="xml" attributeName="transform" type="translate" values="0 0; 0 20; 0 0" begin="0.4s" dur="0.6s" repeatCount="indefinite"/>
</rect>
</svg>
</div>
<div id="menu-wrap" class="menu-back cbp-af-header dark">
<div class="container">
<div class="row">
<div class="col-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light mx-lg-0">
<a href="index.html">
<img src="img/sparkled-logo.svg" class="navbar-logo" alt="Sparkled logo"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"> <span class="menu-icon__line menu-icon__line-left"></span> <span class="menu-icon__line"></span> <span class="menu-icon__line menu-icon__line-right"></span> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item"><a class="nav-link" href="#nav-link-target">Nav link</a></li> -->
<li class="nav-item my-2">
<a class="btn btn-primary" href="https://github.com/sparkled/sparkled" target="_blank" role="button">
GitHub
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
<div id="intro" class="section full-height height-auto-lg hide-over background-dark-blue-3">
<div class="hero-center-wrap relative-on-lg">
<div class="container">
<div class="row">
<div class="col-lg-6 text-center text-lg-left align-self-center z-bigger">
<h2 class="text-white">The modern LED sequencer.</h2>
<p class="mt-3 mb-4 pb-3 font-weight-normal text-white">Create synchronised lighting displays for your home in record time.</p> <a class="btn btn-primary ml-lg-0" href="#" role="button"><span>Coming Soon</span></a>
</div>
<div class="col-lg-6 mt-5 mt-lg-0">
<div class="img-wrap header-img">
<img src="img/sparkled-house.svg" alt="House with lighting display, powered by Sparkled"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section padding-top-bottom-big background-gradient-dark" id="concept">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-wrap text-center">
<h3 class="text-white">What is Sparkled?</h3>
</div>
</div>
<div class="col-md-4">
<div class="concept-box">
<h5 class="text-white">Modern</h5>
<p class="text-grey">The Sparkled web interface is designed to be fun and productive on all kinds of devices.</p>
</div>
</div>
<div class="col-md-4 mt-4 mt-md-0">
<div class="concept-box">
<h5 class="text-white">Fun</h5>
<p class="text-grey">Sparkled is designed with tech-savvy hobbyists in mind. Build something awesome and share your knowledge with the community!</p>
</div>
</div>
<div class="col-md-4 mt-4 mt-md-0">
<div class="concept-box">
<h5 class="text-white">Free</h5>
<p class="text-grey">Sparkled is and will always be open source. You can use it for free, and build whatever you want on top of the Sparkled API to make your installation extra amazing.</p>
</div>
</div>
<div class="col-md-12 padding-top-bottom">
<div class="line-sep"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 mt-5">
<h4 class="text-white">1. Design your stage</h4>
<p class="text-grey">A stage represents the objects that make up your lighting installation. We call these objects "stage props".</p>
</div>
<div class="col-md-6 mt-5">
<h4 class="text-white">2. Create your sequences</h4>
<p class="text-grey">Add awesome lighting effects to your stage props, all synchronised to audio of your choice.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 mt-5">
<h4 class="text-white">3. Build your playlists</h4>
<p class="text-grey">Group your sequences into playlists, which can be scheduled to run whenever you like.</p>
</div>
<div class="col-md-6 mt-5">
<h4 class="text-white">4. Let it sparkle!</h4>
<p class="text-grey">Enjoy the show (and show off your creation to the Sparkled community!)</p>
</div>
</div>
</div>
</div>
<div class="section padding-top-bottom-big background-gradient-dark" id="faq">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="title-wrap text-center">
<h3 class="text-white">FAQ</h3>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div id="accordion" class="accordion-style">
<div class="card">
<div class="card-header" id="headingOne"> <a class="text-white background-dark-blue-2" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> How much does Sparkled cost? </a>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<h6 class="text-white">How much does Sparkled cost?</h6>
<p class="text-grey">Nothing at all! Sparkled is open source and 100% free. There may be options to donate to the project or purchase an official training course in the future, but Sparkled itself will always be free.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo"> <a class="collapsed text-white background-dark-blue-2" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> What skills do I need? </a>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
<h6 class="text-white">What skills do I need?</h6>
<p class="text-grey">To install Sparkled and start creating sequences, all you need is a computer.</p>
<p class="text-grey">When you're ready to build your installation, you'll be doing some simple wiring, soldering and networking. Don't worry, the Sparkled documentation is there to help you along the way!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree"> <a class="collapsed text-white background-dark-blue-2" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> What equipment do I need? </a>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
<h6 class="text-white">What equipment do I need?</h6>
<p class="text-grey">To run Sparkled, you'll need a computer and a wireless router to control the lighting installation.</p>
<p class="text-grey">To put together your physical stage props, you'll need a soldering iron and basic electrical tools like wire strippers.</p>
<p class="text-grey">Most importantly, you'll need common sense around electricity. You'll never have to work with dangerous voltages, but safety first nonetheless!</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mt-4 mt-md-0">
<div id="accordion-snd" class="accordion-style">
<div class="card">
<div class="card-header" id="headingFour"> <a class="text-white background-dark-blue-2" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour"> When will Sparkled be available? </a>
</div>
<div id="collapseFour" class="collapse show" aria-labelledby="headingFour" data-parent="#accordion-snd">
<div class="card-body">
<h6 class="text-white">When will Sparkled be available?</h6>
<p class="text-grey">Sparkled is still a work in progress, there's no set release date yet, unfortunately!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingFive"> <a class="collapsed text-white background-dark-blue-2" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> Why should I choose Sparkled? </a>
</div>
<div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion-snd">
<div class="card-body">
<h6 class="text-white">Why should I choose Sparkled?</h6>
<p class="text-grey">Sparkled is designed to empower DIY-ers and hobbyists to create lighting installations with minimal time and cost.</p>
<p class="text-grey">There are other excellent solutions such as <a href="https://lightorama.com" target="_blank">Light-O-Rama</a>, but you might find yourself spending hundreds or thousands of dollars on specialised equipment.</p>
<p class="text-grey">Also, Sparkled has a modern web interface, which means you can productively work on your LED sequences from any kind of device.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingSix">
<a class="collapsed text-white background-dark-blue-2" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">How can I contribute?</a>
</div>
<div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion-snd">
<div class="card-body">
<h6 class="text-white">How can I contribute?</h6>
<p class="text-grey">Thanks for asking! Right now, the best way to help Sparkled grow is to spread the word and help build the Reddit and Discord communities.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12 text-grey">
Special thanks to EJ-Technologies for providing an Open Source license for <a href="https://www.ej-technologies.com/products/jprofiler/overview.html" target="_blank">JProfiler, the award winning all-in-one Java Profiler</a>.
</div>
</div>
</div>
</div>
<div class="section">
<div class="section py-4 background-dark-blue-4">
<div class="container">
<div class="row">
<div class="col">
<span>Copyright © <span id="current-year"></span> Chris Parton</span>
<a class="app-btn ml-3" href="https://chrisparton.net" target="_blank"><i class="fa fa-globe"></i></a>
<a class="app-btn ml-3" href="https://twitter.com/chrislights_" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="app-btn ml-3" href="https://linkedin.com/in/chrisparton1991" target="_blank"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/custom.js"></script>
<script>
document.querySelector('#current-year').innerHTML = new Date().getFullYear();
</script>
</body>
</html>