This repository has been archived by the owner on Dec 16, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
254 lines (240 loc) · 10 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
<!doctype html>
<html lang="en">
<head>
<title><%= title %> - <%= subtitle %></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="<%= description %>">
<link rel="icon" type="image/png" href="assets/img/logo_250.png" />
<link rel="stylesheet" href="assets/3p/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/3p/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/main.css">
<!-- Google Analytics -->
<script>
window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
ga('create', 'UA-112613053-1', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
</head>
<body>
<header class="masthead">
<nav class="navbar navbar-expand-sm navbar-dark">
<a href="#" class="navbar-brand">
<img src="assets/img/logo_400.png" alt="" width="60" height="60" class="d-inline-block align-top">
</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>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="https://foalts.gitbook.io/docs/" class="nav-link text-white" id="documentation">
Documentation
</a>
</li>
<li class="nav-item">
<a href="https://github.com/FoalTS/foal" class="nav-link text-white" id="github">
<i class="fa fa-github" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a href="https://twitter.com/FoalTs" class="nav-link text-white" id="twitter">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item">
<a href="https://www.youtube.com/channel/UCQFojM334E0YdoDq56MjfOQ" class="nav-link text-white" id="youtube">
<i class="fa fa-youtube" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</nav>
<div class="container content">
<div class="row">
<div class="col-lg-12 d-flex flex-column justify-content-center px-4">
<h1 class="text-center"><%= title %></h1>
<h3 class="text-center"><%= subtitle %></h3>
<div class="terminal-wrapper">
<div id="typed-strings" style="display: none;">
<span>
<span class="text-muted">></span> npm install -g @foal/cli<br>
<span class="text-muted">></span> foal createapp my-app<br>
<span class="text-muted">></span> cd my-app<br>
<span class="text-muted">></span> npm run develop
</span>
</div>
<div class="terminal m-auto">
<span id="typed"></span>
</div>
</div>
<div class="text-center">
<a href="https://foalts.gitbook.io/docs/tutorials/simple-to-do-list/1-installation" class="btn mt-3 btn-white" id="get-started">
Get started
<i class="fa fa-arrow-circle-right fa-fw" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
</header>
<section class="screenshot-container">
<img src="assets/img/screenshot.png" alt="">
</section>
<!-- <section class="testimony-container">
<div class="container">
<div class="text">
« Testimony »
</div>
</div>
</section> -->
<section class="feature-section">
<div class="container">
<div class="row">
<div class="col-md-6 d-flex">
<div class="flex-fill p-md-4">
<h4>TypeScript</h4>
<h5>JavaScript that scales.</h5>
<p class="text-justify mb-0">
TypeScript brings you optional static type-checking along with the latest ECMAScript
features. Writing FoalTS with TypeScript has been and will always be fundamental. Code
is more elegant and concise. Most of the silly mistakes are caught at compilation. And
autocompletion is well-handled and the API is better documented.
</p>
</div>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center">
<img src="assets/img/typescript3.png" class="mt-3 mt-md-0">
</div>
</div>
</div>
</section>
<section class="feature-section">
<div class="container">
<div class="row">
<div class="col-md-6 d-flex order-md-last">
<div class="flex-fill p-md-4">
<h4>Simple and Intuitive</h4>
<h5>No magic. No overengineering.</h5>
<p class="text-justify mb-0">
Keeping things simple is a challenge when creating an application.
Simple code is easier to handle and understand, and therefore easier
to maintain, debug and extend. Many frameworks, in trying to provide
a large number of features and tools, tend to become complex, cumbersome
and sometimes incomprehensible. In Foal, the architecture and components
are designed to keep the code as simple as possible. Complexity is only
used when there is no other option.
</p>
</div>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center">
<img src="assets/img/simple-and-intuitive4.png" class="mt-3 mt-md-0">
</div>
</div>
</div>
</section>
<section class="feature-section pb-4">
<div class="container">
<div class="row">
<div class="col-md-6 d-flex">
<div class="flex-fill p-md-4">
<h4>Batteries Included</h4>
<h5>Auth, ORM, CLI, Scripts, OpenAPI, GraphQL, ...</h5>
<p class="text-justify mb-0">
Validation, authentication, sanitiziation, error handling, compilation,
CLI, job scheduling, password hashing, permission management, token
generation, ..., most web applications need these features and developers
should not spend their time re-inventing the wheel. FoalTS allows you to
be productive and focus on business logic rather than wasting your time
building everything from scratch.
</p>
</div>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center order-last">
<img src="assets/img/batteries-included4.png" class="mt-3 mt-md-0">
</div>
</div>
</div>
</section>
<section class="get-started-container">
<a href="https://foalts.gitbook.io/docs/tutorials/simple-to-do-list/1-installation" class="btn btn-white" id="get-started2">
Get started
<i class="fa fa-arrow-circle-right fa-fw" aria-hidden="true"></i>
</a>
</section>
<section class="badges-container">
<div class="container">
<a href="https://github.com/FoalTS/foal/blob/master/LICENSE">
<img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="License: MIT">
</a>
<img src="https://img.shields.io/badge/node-%3E%3D8-brightgreen.svg" alt="node version">
<a href="https://badge.fury.io/js/%40foal%2Fcore">
<img src="https://badge.fury.io/js/%40foal%2Fcore.svg" alt="npm version">
</a>
<a href="https://travis-ci.org/FoalTS/foal">
<img src="https://travis-ci.org/FoalTS/foal.svg?branch=add-travis" alt="Build Status">
</a>
<a href="https://codecov.io/github/FoalTS/foal">
<img src="https://codecov.io/gh/FoalTS/foal/branch/master/graphs/badge.svg" alt="Code coverage">
</a>
<a href="https://snyk.io/test/npm/@foal/core">
<img src="https://snyk.io/test/npm/@foal/core/badge.svg" alt="Known Vulnerabilities">
</a>
<a href="https://github.com/FoalTS/foal/commits/master">
<img src="https://img.shields.io/github/commit-activity/y/FoalTS/foal.svg" alt="Commit activity">
</a>
<a href="https://github.com/FoalTS/foal/commits/master">
<img src="https://img.shields.io/github/last-commit/FoalTS/foal.svg" alt="Last commit">
</a>
<a href="https://img.shields.io/badge/2FA-npm,%20GitHub-green.svg">
<img src="https://img.shields.io/badge/2FA-npm,%20GitHub-green.svg" alt="2FA">
</a>
</div>
</section>
<footer class="mastfoot">
Code licensed under MIT License.
</footer>
<script src="assets/3p/jquery/jquery.min.js"></script>
<script src="assets/3p/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="assets/3p/typed.js/typed.min.js"></script>
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 18,
showCursor: false
});
</script>
<script>
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
function attachMetricToLink(id, label) {
var getStarted = document.getElementById(id);
getStarted.addEventListener('click', function (event) {
event.preventDefault();
ga('send', 'event', label, 'click', {
hitCallback: createFunctionWithTimeout(function () {
window.location = event.target.href || event.target.parentElement.href;
})
});
});
}
attachMetricToLink('get-started', 'Get Started Button');
attachMetricToLink('get-started2', 'Get Started 2 Button');
attachMetricToLink('github', 'Github Button');
attachMetricToLink('twitter', 'Twitter Button');
attachMetricToLink('documentation', 'Documentation Button');
</script>
</body>
</html>