-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
239 lines (229 loc) · 11.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-J5NHVLY7TP"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-J5NHVLY7TP');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="Better Teaching for freelancers. A simple and refreshing online teaching tool focusing on interactive in-class experience. Try for free and download Agora Flat for multiple platforms.">
<title>Flat Online Classroom</title>
<link rel="shortcut icon" href="./favicon_en.ico">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header class="navheader flex pa2">
<img src="./image/flat-icon_en.svg" alt="Agora Flat logo">
<div class="flex-1"></div>
<nav class="flex">
<ul class="mobile-disabled inline-flex list-none ma0 pa0">
<li class="pl2"><a href="https://github.com/netless-io/flat/issues" target="_blank">Feedback</a></li>
<!-- <li class="pl2">
<label for="lang">🌐</label>
<select id="lang">
<option>English</option>
</select>
</li> -->
<li class="pl2">
<a href="https://web.flat.agora.io/" target="_blank" class="try-btn inline-flex">
<span>Try for free with web</span>
</a>
</li>
<li class="pl2">
<a href="#download" class="download-btn inline-flex ml1">
Download
</a>
</li>
</ul>
<ul class="desktop-disabled inline-flex list-none ma0 pa0">
<!-- <li class="pl2">
<img id="lang-mobile" src="./image/language.svg" alt="language">
</li> -->
<li class="pl2">
<img id="folding-mobile" src="./image/folding.svg" alt="folding">
</li>
</ul>
</nav>
</header>
<main>
<header>
<div class="hero">
<p class="center title">Better Teaching for freelances</p>
<p class="center f2 subtitle">Simple, refreshing online teaching tool that focuses on the in-class interactive experience</p>
<div class="center mt4">
<a href="https://web.flat.agora.io/" target="_blank" class="try-btn inline-flex">
<span>Try for free with web</span>
</a>
<a href="#download" class="download-btn inline-flex ml1">
Download
</a>
</div>
</div>
<div class="center">
<img class="cover desktop mobile-disabled" loading="lazy" src="./image/hero-image.png" alt="cover">
<img class="cover mobile desktop-disabled" loading="lazy" src="./image/hero-mobile.png" alt="cover">
</div>
</header>
<section class="func-desc flex pa3">
<div class="pa2 flex-1">
<img src="./image/share.svg" alt="share">
<p class="f3 mt3">Share While Boarding</p>
<p class="subtitle">For online teaching scenarios where you are sharing while boar</p>
</div>
<div class="pa2 flex-1">
<img src="./image/extensive.svg" alt="extensive">
<p class="f3 mt3">Extensive Courseware</p>
<p class="subtitle">Synchronized sharing of courseware and animations</p>
</div>
<div class="pa2 flex-1">
<img src="./image/interaction.svg" alt="interaction">
<p class="f3 mt3">Windows Interactions</p>
<p class="subtitle">Windowed interaction, Support for switching on display</p>
</div>
</section>
<section class="carousel carousel-1 flex pa3">
<div class="images flex flex-align-center">
<img src="./image/carousel-1-interactive.webp" alt="interactive whiteboard">
<img src="./image/carousel-1-video.webp" alt="audio&video">
<img src="./image/carousel-1-courseware.webp" alt="courseware sharing">
<img src="./image/carousel-1-record.webp" alt="record&replace">
</div>
<div class="carousel-keys pa2">
<p class="subtitle">A professional online teaching tool</p>
<p class="f3 mt1">Designed with the whiteboard in mind, suitable for involve sharing while boarding</p>
<div class="items grid-2c mt4">
<span class="item active">Interactive whiteboard</span>
<span class="item">HD audio and video</span>
<span class="item">Courseware sharing</span>
<span class="item">Record & Replay</span>
</div>
</div>
</section>
<section class="carousel carousel-2 flex pa3">
<div class="carousel-keys pa2">
<p class="subtitle">Improve teacher teaching efficiency</p>
<p class="f3 mt1">While meeting teaching needs, it can easily adapt to changes from offline to online</p>
<div class="items grid-3c mt4">
<span class="item active">Book a class</span>
<span class="item">Upload file</span>
<span class="item">Q&A</span>
<span class="item">Issue rewards</span>
<span class="item">Authority manage</span>
<span class="item text-disabled" title="coming soon">Homework</span>
<span class="item text-disabled" title="coming soon">Data export</span>
</div>
</div>
<div class="images flex flex-align-center">
<img src="./image/carousel-2-class.webp" alt="book classes">
<img src="./image/carousel-2-upload.webp" alt="upload file">
<img src="./image/carousel-2-qa.webp" alt="q&a">
<img src="./image/carousel-2-rewards.webp" alt="issue rewards">
<img src="./image/carousel-2-authority.webp" alt="authority manage">
</div>
</section>
<section class="carousel carousel-3 flex pa3">
<div class="images flex flex-align-center">
<img src="./image/carousel-3-hand.webp" alt="raise hand">
<img src="./image/carousel-3-doodle.webp" alt="doodle">
<img src="./image/carousel-3-chat.webp" alt="group chat">
<img src="./image/carousel-3-replay.webp" alt="view replay">
<img src="./image/carousel-3-img.webp" alt="upload images">
</div>
<div class="carousel-keys pa2">
<p class="subtitle">Stimulate students' interest in learning</p>
<p class="f3 mt1">Improve learning concentration and participate in classroom interaction</p>
<div class="items grid-2c mt4">
<span class="item active">Raise hand to speak</span>
<span class="item">Doodle</span>
<span class="item">Group Chat</span>
<span class="item">View Replay</span>
<span class="item">Upload Images</span>
</div>
</div>
</section>
<section class="func-desc flex pa3">
<div class="pa2 flex-1">
<img src="./image/plugin.svg" alt="plugin">
<p class="f3 mt3">Scenario Plugin</p>
<p class="subtitle">Support common classroom plug-ins: YouTube, Google Docs, GeoGebra, Code Editor, Cut down</p>
</div>
<div class="pa2 flex-1">
<img src="./image/phone.svg" alt="phone">
<p class="f3 mt3">Mobile First</p>
<p class="subtitle">Support iOS, Android, iPadOS, macOS, Windows versions, not limited by devices</p>
</div>
<div class="pa2 flex-1">
<img src="./image/opensource.svg" alt="opensource">
<p class="f3 mt3">Open Source</p>
<p class="subtitle">Based on open source code, complete development quickly</p>
</div>
</section>
<section class="pa3">
<p class="center f3 mt3">Agora Flat has gained the trust of 1000+ individual teachers and school institutions</p>
<div class="school-list pa3">
<img src="./image/school1.svg" alt="Guangxi University of Finance and Economics">
<img src="./image/school2.svg" alt="Xiamen University of Technology">
<img src="./image/school3.svg" alt="Chengdu Technological University">
<img src="./image/school4.svg" alt="Jiangsu University">
<img src="./image/school5.svg" alt="Huazhong University of Science and Technology">
<img src="./image/school6.svg" alt="Nanjing Foreign Language School Xianlin Campus">
<img src="./image/school7.svg" alt="The Open University of BingTuan">
<img src="./image/school8.svg" alt="No.1 Middle School of Linyi shandong">
</div>
<div class="scroll mt4">
<div class="scroll-content desktop mobile-disabled"></div><div class="scroll-content desktop mobile-disabled"></div>
<div class="scroll-content mobile desktop-disabled"></div>
</div>
</section>
<section class="pa3" id="download">
<p class="center f3">Download</p>
<p class="center subtitle">Simultaneously supports iOS, Android, iPadOS, macOS, Windows versions, not limited by devices</p>
<div class="download-list mt4">
<a href="https://flat-storage-sg.oss-accelerate.aliyuncs.com/versions/latest/stable/win/Flat-x64-2.3.5.exe">
<div class="icon-container">
<img src="./image/windows.svg" alt="windows">
</div>
<span class="f1">Windows</span>
</a>
<a id="mac-download">
<div class="icon-container">
<img src="./image/mac.svg" alt="mac">
</div>
<span class="f1">macOS</span>
</a>
<a target="_blank" href="https://apps.apple.com/app/id1615707936">
<div class="icon-container">
<img src="./image/ios.svg" alt="ios">
</div>
<span class="f1">iOS</span>
</a>
<a target="_blank" href="https://play.google.com/store/apps/details?id=io.agora.flint">
<div class="icon-container">
<img src="./image/android.svg" alt="android">
</div>
<span class="f1">Android</span>
</a>
<a target="_blank" href="https://web.flat.agora.io/">
<div class="icon-container">
<img src="./image/web.svg" alt="web">
</div>
<span class="f1">Web</span>
</a>
</div>
</section>
</main>
<footer class="copyright mt4 pa2">
<div class="center f1">
<a href="./privacy.html">Privacy Policy</a>
<a href="./service.html">Service Agreement</a>
</div>
<div class="center mt1 f1">Copyright © 2023 Flat. All Rights Reserved</div>
</footer>
<script type="module" src="./main.js"></script>
</body>
</html>