-
Notifications
You must be signed in to change notification settings - Fork 6
/
index.html
161 lines (151 loc) · 5.23 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
---
title: Home
description: Open-source and free AAC communication board.
image: /images/montenegro-post-01.jpg
bottom_image: /images/aacgathering.jpg
---
<section class="hero" id="slider">
<div class="inner-hero text-container">
<div class="hero-text-container">
<h1 class="editable">{% t pages.indexTitleTop %}</h1>
<p class="subtext editable"><b>Cboard</b> <span>{% t pages.indexSubTitleTopin %}</span> <abbr
title="Augmentative and Alternative Communication">AAC</abbr>
{% t pages.indexSubTitleTop %}</p>
<div class="cta button alt"><a href="https://app.cboard.io">{% t button.star %}</a></div>
<div class="cta button alt"><a href="#section-download">{% t button.download %}</a></div>
</div>
</div>
</section>
<script>
var imgArray = [
'/images/montenegro-post-01.jpg',
'/images/serbia02.jpg',
'/images/croatia01.jpg',
'/images/ecaro-pilot-1.jpg',
'/images/sara-hero.png'
];
var curIndex = 0;
var imgDuration = 5000;
function slideShow() {
document.getElementById('slider').style = "background-image: url(" + imgArray[curIndex] + ")";
curIndex++;
if (curIndex == imgArray.length) { curIndex = 0; }
setTimeout("slideShow()", imgDuration);
}
slideShow();
</script>
<div class="content">
<section class="download" id="section-download">
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_downloadTitle %}</h2>
</div>
<div class="badges">
<a class="badge-link" href="https://play.google.com/store/apps/details?id=com.unicef.cboard">
<img class="editable" src="/images/google-play-badge.svg" alt="Screenshot" />
</a>
</div>
</div>
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_downloadTitleApple %}</h2>
</div>
<div class="badges">
<a class="badge-link" href="https://apps.apple.com/gb/app/aac-cboard-app/id6453683048">
<img class="editable" src="/images/app-store-badge.png" alt="Screenshot" />
</a>
</div>
</div>
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_downloadTitleWindows %}</h2>
</div>
<div class="badges">
<a class="badge-link" href="https://apps.microsoft.com/store/detail/XP9M5KQV699FLR">
<img class="editable" src="/images/windows-badge.png" alt="Windows app" />
</a>
</div>
</div>
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_downloadTitleAmazon %}</h2>
</div>
<div class="badges">
<a class="badge-link"
href="https://www.amazon.com/-/en/dp/B0BWGZBQ7V/ref=sr_1_2?crid=3KHHTU961DJKE&keywords=cboard&qid=1684203554&s=mobile-apps&sprefix=%2Cmobile-apps%2C245&sr=1-2">
<img class="editable" src="/images/amazon-app-store.png" alt="Screenshot" />
</a>
</div>
</div>
</section>
<section class="video" id="section-video">
<div class="container flex">
<iframe class="youtube-video" width="640" height="420" src="https://www.youtube.com/embed/pW1hRkibfps"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<div>
<div class="container flex">
<div class="segment-text">
<h1 class="editable">{% t pages.indexInfosTitle %}</h1>
<p class="subtext editable">{% t pages.indexInfosSubTitle %}</p>
</div>
</div>
<section class="info">
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_info1Title %}</h2>
<p class="editable">{% t pages.index_info1Desc %}</p>
</div>
<div class="image">
<img class="editable" src="/images/app/cant-speak-iphone-english.png" alt="Screenshot" />
</div>
</div>
</section>
<section class="info">
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_info2Title %}</h2>
<p class="editable">{% t pages.index_info2Desc %}</p>
</div>
<div class="image">
<img class="editable" src="/images/app/laptop-mockup.png" alt="Screenshot" />
</div>
</div>
</section>
<section class="info">
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_info3Title %}</h2>
<p class="editable">{% t pages.index_info3Desc %}</p>
</div>
<div class="image">
<img class="editable" src="/images/app/pizza-nexus-hindi.png" alt="Screenshot" />
</div>
</div>
</section>
<section class="info">
<div class="container flex">
<div class="text">
<h2 class="editable">{% t pages.index_info4Title %}</h2>
<p class="editable">{% t pages.index_info4Desc %}</p>
</div>
<div class="image">
<img class="editable" src="/images/app/home-board-ipad-hebrew.png" alt="Screenshot" />
</div>
</div>
</section>
<section class="hero" style="background-image: url({% include relative-src.html src=page.bottom_image %})">
<div class="inner-hero text-container">
<div class="hero-text-container">
<h2 class="editable">{% t pages.index_bottomTitle %}</h2>
<p class="subtext editable">{% t pages.index_bottomDesc %}</p>
<div class="cta button alt"><a href="https://github.com/cboard-org/cboard">Cboard GitHub</a></div>
</div>
</div>
</section>
</div>
</div>