-
Notifications
You must be signed in to change notification settings - Fork 43
Expand file tree
/
Copy pathhome.html
More file actions
279 lines (260 loc) · 14.6 KB
/
Copy pathhome.html
File metadata and controls
279 lines (260 loc) · 14.6 KB
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
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
{{ define "main" }}
{{ $style := resources.Get "assets/css/landing.scss" | resources.ToCSS -}}
<link rel="stylesheet" href="{{ $style.Permalink }}" />
<script>
window.i18nStrings = {
installChrome: '{{ T "Global.InstallBrowser.Chrome" }}',
installFirefox: '{{ T "Global.InstallBrowser.Firefox" }}',
installEdge: '{{ T "Global.InstallBrowser.Edge" }}',
installUnsupported: '{{ T "Global.Install" }}'
}
window.i18nSplide = {
next: '{{ T "Global.Carousel.Next" }}',
prev: '{{ T "Global.Carousel.Prev" }}',
first: '{{ T "Global.Carousel.First" }}',
last: '{{ T "Global.Carousel.Last" }}',
slideX: '{{ T "Global.Carousel.SlideX" ( dict "Count" "%s" ) }}',
}
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/combine/npm/odometer@0.4.8/themes/odometer-theme-default.min.css,npm/@splidejs/splide@3/dist/css/splide.min.css">
<script defer src="https://cdn.jsdelivr.net/combine/npm/odometer@0.4.8/odometer.min.js"></script>
<script defer src="/assets/js/landing.js" type="module"></script>
<section id="intro" class="px-4 pb-0 mb-0 intro-heading text-left">
<div class="container pt-4 px-3 pb-0 d-flex flex-column justify-content-center text-center" id="intro-info">
<h1 class="display-4 m-0 mb-3 p-0">{{ T "IndexPage.Intro.Tagline" }}</h1>
<p class="lead mb-4">{{ T "IndexPage.Intro.Description" }}</p>
<div id="intro-buttons" class="d-flex align-items-center flex-column flex-md-row justify-content-center">
<a id="install-intro" class="btn btn-white btn-lg install-btn disabled">
<p><span id="install-browser-icon"><span class="iconify-inline" data-icon="fa-solid:hourglass-start"></span></span> <span id="install-browser">{{ T "IndexPage.Intro.InstallButton.Loading" }}</span></p>
<p>{{ T "IndexPage.Intro.InstallButton.Description" }}</p>
</a>
<a href="#features" class="btn" id="read-more">{{ T "IndexPage.Intro.ReadMore" }}</a>
</div>
<img src="/assets/img/showcase/intro-hero.svg" alt='{{ T "IndexPage.Intro.HeroCaption" }}' class="w-100 pt-4">
</div>
</section>
<svg id="divider-1" xmlns="http://www.w3.org/2000/svg" version="1.1" class="w-100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 C 50 100 80 100 100 0 Z"/>
</svg>
<section id="features" class="container text-center py-4">
<h2>{{ T "IndexPage.Features.Heading" }}</h2>
<div class="row text-left">
<div class="col-12 col-lg-6">
<div class="align-items-center d-flex flex-column flex-md-row">
<div class="features-icon mb-3 mb-md-2">
<div class="features-circle">
<span class="iconify" data-icon="fa-solid:list"></span>
</div>
</div>
<div class="feature-info ml-md-4 mb-3 ml-md-0">
<h3>{{ T "IndexPage.Features.AddonsHeading" }}</h3>
<p>{{ T "IndexPage.Features.AddonsParagraph" }}</p>
</div>
</div>
<div class="align-items-center d-flex flex-column flex-md-row">
<div class="features-icon mb-3 mb-md-2">
<div class="features-circle">
<span class="iconify" data-icon="vaadin:cog"></span>
</div>
</div>
<div class="feature-info ml-md-4 mb-3 ml-md-0">
<h3>{{ T "IndexPage.Features.CustomizableHeading" }}</h3>
<p>{{ T "IndexPage.Features.CustomizableParagraph" }}</p>
</div>
</div>
<div class="align-items-center d-flex flex-column flex-md-row">
<div class="features-icon mb-3 mb-md-2">
<div class="features-circle">
<span class="iconify" data-icon="fluent:local-language-24-filled"></span>
</div>
</div>
<div class="feature-info ml-md-4 mb-3 ml-md-0">
<h3>{{ T "IndexPage.Features.InternationalHeading" }}</h3>
<p>{{ T "IndexPage.Features.InternationalParagraph" }}</p>
</div>
</div>
<div class="align-items-center d-flex flex-column flex-md-row">
<div class="features-icon mb-3 mb-md-2">
<div class="features-circle">
<span class="iconify" data-icon="el:opensource"></span>
</div>
</div>
<div class="feature-info ml-md-4 mb-3 ml-md-0">
<h3>{{ T "IndexPage.Features.OSHeading" }}</h3>
<p>{{ T "IndexPage.Features.OSParagraph" }}</p>
</div>
</div>
</div>
<div class="col-12 col-lg-6" id="intro-img">
<div class="splide d-flex align-items-stretch position-relative" id="intro-carousel">
<div class="splide__track">
<ul class="splide__list align-items-center">
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
{{ partial "youtube" (dict "id" "nQ4N9zlzj0M") }}
</div>
</li>
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
<img src="/assets/img/showcase/popup-light.png" alt='{{ T "IndexPage.Intro.Carousel.Popup.Caption" }}' class="show-only-light">
<img src="/assets/img/showcase/popup-dark.png" alt='{{ T "IndexPage.Intro.Carousel.Popup.Caption" }}' class="show-only-dark">
</div>
</li>
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
<img src="/assets/img/showcase/settings-light.png" alt='{{ T "IndexPage.Intro.Carousel.Settings.Caption" }}' class="show-only-light">
<img src="/assets/img/showcase/settings-dark.png" alt='{{ T "IndexPage.Intro.Carousel.Settings.Caption" }}' class="show-only-dark">
</div>
</li>
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
<img src="/assets/img/showcase/demo-1.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" ( dict "Count" 1 ) }}'>
</div>
</li>
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
<img src="/assets/img/showcase/demo-2.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" 2 }}'>
</div>
</li>
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
<img src="/assets/img/showcase/demo-3.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" 3 }}'>
</div>
</li>
<li class="splide__slide h-100">
<div class="carousel-item-wrapper h-100 d-flex justify-content-center align-items-center p-3">
<img src="/assets/img/showcase/demo-4.png" alt='{{ T "IndexPage.Intro.Carousel.Demo.Caption" 4 }}'>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<svg id="divider-2" xmlns="http://www.w3.org/2000/svg" version="1.1" class="w-100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 C 20 0 50 0 100 100 Z"/>
</svg>
<section id="highlights" class="py-4">
<h2 class="text-center">{{ T "IndexPage.Highlights.Heading" }}</h2>
<p class="text-center mb-3">
{{- .Scratch.Add "open_tag_1" "<a href='" }}
{{- .Scratch.Add "open_tag_1" ( "/addons" | relLangURL ) }}
{{- .Scratch.Add "open_tag_1" "' class='white-underline'>" }}
{{- T "IndexPage.Highlights.Paragraph" ( dict "OpenTag1" ( .Scratch.Get "open_tag_1" ) "CloseTag1" "</a>" ) | safeHTML -}}
</p>
<div class="splide" id="highlights-carousel">
<div class="splide__track">
<ul class="splide__list align-items-start">
{{- if ( index $.Site.Data.addons $.Page.Language.Lang ) }}
{{- template "addon-card" ( index $.Site.Data.addons $.Page.Language.Lang ) -}}
{{ else }}
{{- template "addon-card" $.Site.Data.addons.en -}}
{{ end -}}
</ul>
</div>
<!-- <a class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">{{ T "IndexPage.Intro.Carousel.Previous" }}</span>
</a>
<a class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">{{ T "IndexPage.Intro.Carousel.Next" }}</span>
</a> -->
</div>
</section>
<svg id="divider-3" xmlns="http://www.w3.org/2000/svg" version="1.1" class="w-100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 0 C 50 100 80 100 100 0 Z"/>
</svg>
<section id="install" class="container text-center py-4">
<div class="row">
<div class="col-12 col-lg-6 mb-4 d-md-flex flex-column justify-content-center">
<h2>{{ T "IndexPage.Install.Heading" }}</h2>
<p>{{ T "IndexPage.Install.Paragraph" }}</p>
<p>
<a class="btn btn-success dark-btn-white btn-lg mb-1" href="https://chrome.google.com/webstore/detail/fbeffbjdlemaoicjdapfpikkikjoneco" target="_blank" rel="noopener">
<span class="iconify-inline" data-icon="simple-icons:googlechrome"></span> {{ T "Global.ChromeShort" }}
</a>
<a class="btn btn-success dark-btn-white btn-lg mb-1" href="https://addons.mozilla.org/firefox/addon/scratch-messaging-extension/" target="_blank" rel="noopener">
<span class="iconify-inline" data-icon="simple-icons:firefoxbrowser"></span> {{ T "Global.FirefoxShort" }}
</a>
<a class="btn btn-success dark-btn-white btn-lg mb-1" href="https://microsoftedge.microsoft.com/addons/detail/iliepgjnemckemgnledoipfiilhajdjj" target="_blank" rel="noopener">
<span class="iconify-inline" data-icon="simple-icons:microsoftedge"></span> {{ T "Global.EdgeShort" }}
</a>
</p>
<p class="mb-4">
{{- .Scratch.Add "open_tag_2" "<a href='" }}
{{- .Scratch.Add "open_tag_2" ( "/docs/getting-started/installing#from-source" | relLangURL ) }}
{{- .Scratch.Add "open_tag_2" "' target='_blank' rel='noopener'>" }}
{{- T "IndexPage.Install.InstallButton.Other" ( dict "OpenTag1" "<a href='https://github.com/ScratchAddons/ScratchAddons/releases' target='_blank' rel='noopener'>" "CloseTag1" "</a>" "OpenTag2" ( .Scratch.Get "open_tag_2" ) "CloseTag2" "</a>" ) | safeHTML }}
</p>
<div class="">
<p id="total-users" style="font-size: 3rem; font-weight: 500; line-height: 3rem;" class="odometer mb-0"></p>
<p style="font-size: 1.75rem; font-weight: 500;">{{ T "IndexPage.Users" }}</p>
</div>
</div>
<div class="col-12 col-lg-6 d-md-flex flex-column justify-content-center">
<h2>Try</h2>
<p>Try some of the editor addons on TurboWarp before installing.</p>
<p>
<a class="btn btn-success dark-btn-white btn-lg mb-4" href="https://turbowarp.org/discover-addons" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 135.467 135.467" class="tw-icon"><path d="M98.192 1.204c-6.807.238-13.357 2.614-20.218 2.481-14.303.854-28.734.32-42.974.24-4.323-1.562-14.692 2.28-19.632 7.582-5.757 5.099-9.88 12.67-9.528 20.563-.585 2.59 2.655 10.996 2.145 9.186-3.048-6.151 2.036 4.726 1.333 6.589 1.045 12.599 4.386 27.163 16.26 33.89 3.327 1.708 11.174 3.291 4.647 7.217-6.228 9.08-5.964 21.685-1.254 31.34 6.966 11.962 22.255 15.536 35.143 13.595 7.323-1.644 14.712.557 21.999-.656 13.332-2.59 23.288-15.291 24.642-28.482.631-10.279-4.837-20.888-13.792-26.065 6.633-2.66 14.894-1.309 20.18-7.177 8.356-6.768 12.36-18.328 10.332-28.845 3.108-12.223.028-26.451-9.704-34.907-5.402-4.44-12.697-6.299-19.58-6.55Zm.112 12.491c8.845-.353 17.259 6.611 17.937 15.571-.26 7.166-1.9 14.2-.83 21.383-.87 9.122-10.128 16.217-19.188 14.284-4.79.366-10.896-6.132-12.154-6.71.528 9.713.301 19.443.38 29.164 11.59.787 17.88 16.23 10.979 25.284-3.968 7.175-13.046 9.719-20.683 8.02-10.39-.196-21.993 3.855-31.307-2.625-9.633-6.816-7.06-24.464 4.687-27.419 7.071-3.368 1.836-12.848 3.388-19.044-.257-6.483-6.262 3.321-10.588 1.53-7.526.691-14.583-4.652-16.424-11.9-2.849-8.363-2.462-17.443-5.32-25.804-1.58-10.348 8.274-20.262 18.63-18.96 14.84.14 29.724.575 44.542-.51 5.395-.261 10.644-1.653 15.95-2.264zM8.602 42.684l.14.316Zm50.8 45.835-.076.04zm25.047 7.218.017.74z" fill="currentColor"/><path fill="currentColor" d="M103.81 31.766q-1.056 4.619-1.584 10.029-.132 1.451.264 3.694.396 2.64.396 3.695 0 3.43-4.487 3.43-2.903 0-3.826-1.715-.132-2.903.131-7.917.264-5.938.264-7.917-.132 0-.395-.264-12.272.528-23.092 1.584-.264 1.715 0 4.222l.528 4.75q-.528 4.09-.528 12.14.396 3.43.396 29.425v9.633q0 2.243.66 3.167h8.18q5.015-.66 5.015 4.222 0 2.903-2.771 4.09-1.716.66-6.07.265-2.64-.264-6.202-.132-4.882.66-11.876 1.055-7.125.396-8.708-1.979-1.056-1.583 0-3.299 1.847-2.903 9.632-2.903 4.09 0 4.09-2.243 0-1.187-.131-2.243 0-3.299.132-5.806.395-7.125 0-20.057-.528-18.737.395-33.648l-.395-.395q-4.09.263-15.307-.132-.528 0-8.049.527 1.847 12.668 2.111 18.078l-.264 3.563q-.132 1.979-3.298 1.979-2.508 0-4.223-9.5-.792-5.675-1.583-11.48 0-.924-.924-3.167-.792-2.376-.792-3.563 0-3.299 5.014-4.09.396 0 1.32.131.924.132 1.32.132h32.723q12.14-.528 23.488-2.111.792-.396 2.375-.792 2.771-.264 4.75 1.32 1.98 1.451 1.32 4.222z"/></svg>
TurboWarp
</a>
</p>
<p class="text-center">
<img style="max-width: 100%;" src="/assets/img/showcase/tw-addons.png"></img>
</p>
</div>
</div>
</section>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Scratch Addons",
"url": "https://scratchaddons.com",
"image": "http://scratchaddons.com/assets/img/showcase/demo-1.png",
"screenshot": "http://scratchaddons.com/assets/img/showcase/demo-1.png",
"description": "Scratch Addons combines new and existing features and themes for the <a href='https://scratch.mit.edu'>Scratch</a> website and project editor into one easy-to-access and configurable browser extension..",
"applicationCategory": "http://schema.org/OtherApplication",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.713",
"ratingCount": "475"
},
"offers": {
"@type": "Offer",
"availability": "http://schema.org/InStock",
"price": 0,
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"url": "https://scratchaddons.com",
"logo": "https://scratchaddons.com/assets/img/icon.svg",
"name": "Scratch Addons"
}
</script>
{{ end }}
{{- define "addon-card" }}
{{ range . }}
{{ if and ( in .tags "recommended" ) ( fileExists (delimit (slice "static/assets/img/addons/" .id ".png") "") ) }}
<li class="splide__slide">
<div class="splide__slide card" id="addon-{{ .id }}">
<div class="card-img-wrapper">
<img src="/assets/img/addons/{{ .id }}.png" class="card-img-top" alt="{{ .name }}">
</div>
<div class="card-body">
<h5 class="card-title">{{ .name }}</h5>
<p class="card-text">{{ .description }}</p>
</div>
</div>
</li>
{{ end }}
{{ end }}
{{ end }}