@scarletgeek/web-kernel 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/babel.config.js +3 -0
- package/dist/BootHandler.d.ts +0 -0
- package/dist/KernelEvents.d.ts +9 -0
- package/dist/ProgramHandler.d.ts +14 -0
- package/dist/RequestHandler.d.ts +7 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1 -0
- package/dist/kernel.d.ts +24 -0
- package/dist/mix-manifest.json +3 -0
- package/dist/request/DataTransformer.d.ts +5 -0
- package/dist/request/Request.d.ts +16 -0
- package/dist/request/adapters.d.ts +2 -0
- package/dist/request/interfaces.d.ts +18 -0
- package/dist/types/IKernel.d.ts +27 -0
- package/dist/utils.d.ts +6 -0
- package/example/index.html +739 -0
- package/example/programs/myprogram.js +9 -0
- package/example/programs/register.js +7 -0
- package/example/requests/getposts.js +23 -0
- package/example/requests/register.js +7 -0
- package/example/script.js +50 -0
- package/mix-manifest.json +3 -0
- package/package.json +43 -0
- package/readme.md +221 -0
- package/src/BootHandler.ts +0 -0
- package/src/KernelEvents.ts +42 -0
- package/src/ProgramHandler.ts +106 -0
- package/src/RequestHandler.ts +31 -0
- package/src/index.ts +10 -0
- package/src/kernel.ts +94 -0
- package/src/request/DataTransformer.ts +19 -0
- package/src/request/Request.ts +70 -0
- package/src/request/adapters.ts +10 -0
- package/src/request/interfaces.ts +21 -0
- package/src/types/IKernel.ts +35 -0
- package/src/utils.ts +15 -0
- package/tsconfig.json +13 -0
- package/webpack.mix.js +14 -0
|
@@ -0,0 +1,739 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
+
<title>FlowTask - Project Management Reimagined</title>
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
color: #1a202c;
|
|
19
|
+
overflow-x: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
header {
|
|
23
|
+
background: rgba(255, 255, 255, 0.98);
|
|
24
|
+
backdrop-filter: blur(10px);
|
|
25
|
+
padding: 1.2rem 0;
|
|
26
|
+
position: fixed;
|
|
27
|
+
width: 100%;
|
|
28
|
+
top: 0;
|
|
29
|
+
z-index: 1000;
|
|
30
|
+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
nav {
|
|
34
|
+
max-width: 1400px;
|
|
35
|
+
margin: 0 auto;
|
|
36
|
+
display: flex;
|
|
37
|
+
justify-content: space-between;
|
|
38
|
+
align-items: center;
|
|
39
|
+
padding: 0 3rem;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.logo {
|
|
43
|
+
font-size: 1.8rem;
|
|
44
|
+
font-weight: 800;
|
|
45
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
46
|
+
-webkit-background-clip: text;
|
|
47
|
+
-webkit-text-fill-color: transparent;
|
|
48
|
+
background-clip: text;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.nav-menu {
|
|
52
|
+
display: flex;
|
|
53
|
+
list-style: none;
|
|
54
|
+
gap: 2.5rem;
|
|
55
|
+
align-items: center;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.nav-menu a {
|
|
59
|
+
color: #4a5568;
|
|
60
|
+
text-decoration: none;
|
|
61
|
+
font-weight: 500;
|
|
62
|
+
transition: color 0.3s;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.nav-menu a:hover {
|
|
66
|
+
color: #667eea;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.nav-cta {
|
|
70
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
71
|
+
color: white;
|
|
72
|
+
padding: 0.7rem 1.8rem;
|
|
73
|
+
border-radius: 8px;
|
|
74
|
+
font-weight: 600;
|
|
75
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.nav-cta:hover {
|
|
79
|
+
transform: translateY(-2px);
|
|
80
|
+
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.hero {
|
|
84
|
+
margin-top: 80px;
|
|
85
|
+
padding: 8rem 3rem 6rem;
|
|
86
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
87
|
+
position: relative;
|
|
88
|
+
overflow: hidden;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.hero::before {
|
|
92
|
+
content: '';
|
|
93
|
+
position: absolute;
|
|
94
|
+
top: 0;
|
|
95
|
+
left: 0;
|
|
96
|
+
right: 0;
|
|
97
|
+
bottom: 0;
|
|
98
|
+
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="2" fill="white" opacity="0.1"/></svg>');
|
|
99
|
+
animation: float 20s linear infinite;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes float {
|
|
103
|
+
from {
|
|
104
|
+
transform: translateY(0);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
to {
|
|
108
|
+
transform: translateY(-100px);
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.hero-content {
|
|
113
|
+
max-width: 1400px;
|
|
114
|
+
margin: 0 auto;
|
|
115
|
+
text-align: center;
|
|
116
|
+
position: relative;
|
|
117
|
+
z-index: 1;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.hero h1 {
|
|
121
|
+
font-size: 4.5rem;
|
|
122
|
+
color: white;
|
|
123
|
+
margin-bottom: 1.5rem;
|
|
124
|
+
font-weight: 800;
|
|
125
|
+
line-height: 1.1;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.hero p {
|
|
129
|
+
font-size: 1.4rem;
|
|
130
|
+
color: rgba(255, 255, 255, 0.95);
|
|
131
|
+
margin-bottom: 3rem;
|
|
132
|
+
max-width: 700px;
|
|
133
|
+
margin-left: auto;
|
|
134
|
+
margin-right: auto;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.hero-buttons {
|
|
138
|
+
display: flex;
|
|
139
|
+
gap: 1.5rem;
|
|
140
|
+
justify-content: center;
|
|
141
|
+
flex-wrap: wrap;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
.btn-primary {
|
|
145
|
+
background: white;
|
|
146
|
+
color: #667eea;
|
|
147
|
+
padding: 1.2rem 3rem;
|
|
148
|
+
border-radius: 12px;
|
|
149
|
+
text-decoration: none;
|
|
150
|
+
font-weight: 700;
|
|
151
|
+
font-size: 1.1rem;
|
|
152
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
153
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
.btn-primary:hover {
|
|
157
|
+
transform: translateY(-3px);
|
|
158
|
+
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.btn-secondary {
|
|
162
|
+
background: rgba(255, 255, 255, 0.2);
|
|
163
|
+
color: white;
|
|
164
|
+
padding: 1.2rem 3rem;
|
|
165
|
+
border-radius: 12px;
|
|
166
|
+
text-decoration: none;
|
|
167
|
+
font-weight: 700;
|
|
168
|
+
font-size: 1.1rem;
|
|
169
|
+
backdrop-filter: blur(10px);
|
|
170
|
+
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
171
|
+
transition: all 0.3s;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.btn-secondary:hover {
|
|
175
|
+
background: rgba(255, 255, 255, 0.3);
|
|
176
|
+
border-color: rgba(255, 255, 255, 0.5);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.dashboard-mockup {
|
|
180
|
+
max-width: 1200px;
|
|
181
|
+
margin: -80px auto 0;
|
|
182
|
+
position: relative;
|
|
183
|
+
z-index: 2;
|
|
184
|
+
padding: 0 3rem;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
.mockup-card {
|
|
188
|
+
background: white;
|
|
189
|
+
border-radius: 20px;
|
|
190
|
+
padding: 2rem;
|
|
191
|
+
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.mockup-placeholder {
|
|
195
|
+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
196
|
+
height: 500px;
|
|
197
|
+
border-radius: 12px;
|
|
198
|
+
display: flex;
|
|
199
|
+
align-items: center;
|
|
200
|
+
justify-content: center;
|
|
201
|
+
font-size: 2rem;
|
|
202
|
+
color: #64748b;
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.features {
|
|
206
|
+
padding: 10rem 3rem 6rem;
|
|
207
|
+
max-width: 1400px;
|
|
208
|
+
margin: 0 auto;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.section-header {
|
|
212
|
+
text-align: center;
|
|
213
|
+
margin-bottom: 5rem;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.section-tag {
|
|
217
|
+
color: #667eea;
|
|
218
|
+
font-weight: 700;
|
|
219
|
+
text-transform: uppercase;
|
|
220
|
+
letter-spacing: 2px;
|
|
221
|
+
font-size: 0.9rem;
|
|
222
|
+
margin-bottom: 1rem;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
.section-title {
|
|
226
|
+
font-size: 3.5rem;
|
|
227
|
+
color: #1a202c;
|
|
228
|
+
font-weight: 800;
|
|
229
|
+
margin-bottom: 1rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.section-subtitle {
|
|
233
|
+
font-size: 1.3rem;
|
|
234
|
+
color: #64748b;
|
|
235
|
+
max-width: 700px;
|
|
236
|
+
margin: 0 auto;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
.features-grid {
|
|
240
|
+
display: grid;
|
|
241
|
+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
242
|
+
gap: 3rem;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.feature-card {
|
|
246
|
+
padding: 3rem;
|
|
247
|
+
border-radius: 20px;
|
|
248
|
+
background: white;
|
|
249
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
250
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.feature-card:hover {
|
|
254
|
+
transform: translateY(-10px);
|
|
255
|
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.feature-icon {
|
|
259
|
+
width: 70px;
|
|
260
|
+
height: 70px;
|
|
261
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
262
|
+
border-radius: 15px;
|
|
263
|
+
display: flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
font-size: 2rem;
|
|
267
|
+
margin-bottom: 2rem;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.feature-title {
|
|
271
|
+
font-size: 1.8rem;
|
|
272
|
+
font-weight: 700;
|
|
273
|
+
margin-bottom: 1rem;
|
|
274
|
+
color: #1a202c;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
.feature-description {
|
|
278
|
+
color: #64748b;
|
|
279
|
+
line-height: 1.8;
|
|
280
|
+
font-size: 1.1rem;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.stats {
|
|
284
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
285
|
+
padding: 6rem 3rem;
|
|
286
|
+
color: white;
|
|
287
|
+
text-align: center;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.stats-grid {
|
|
291
|
+
max-width: 1200px;
|
|
292
|
+
margin: 0 auto;
|
|
293
|
+
display: grid;
|
|
294
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
295
|
+
gap: 4rem;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.stat-item h3 {
|
|
299
|
+
font-size: 4rem;
|
|
300
|
+
font-weight: 800;
|
|
301
|
+
margin-bottom: 0.5rem;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.stat-item p {
|
|
305
|
+
font-size: 1.2rem;
|
|
306
|
+
opacity: 0.95;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
.pricing {
|
|
310
|
+
padding: 8rem 3rem;
|
|
311
|
+
max-width: 1400px;
|
|
312
|
+
margin: 0 auto;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.pricing-grid {
|
|
316
|
+
display: grid;
|
|
317
|
+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
318
|
+
gap: 2.5rem;
|
|
319
|
+
margin-top: 4rem;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.pricing-card {
|
|
323
|
+
background: white;
|
|
324
|
+
border-radius: 20px;
|
|
325
|
+
padding: 3rem;
|
|
326
|
+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
327
|
+
transition: transform 0.3s, box-shadow 0.3s;
|
|
328
|
+
border: 2px solid transparent;
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
.pricing-card:hover {
|
|
332
|
+
transform: translateY(-10px);
|
|
333
|
+
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.pricing-card.featured {
|
|
337
|
+
border-color: #667eea;
|
|
338
|
+
position: relative;
|
|
339
|
+
}
|
|
340
|
+
|
|
341
|
+
.featured-badge {
|
|
342
|
+
position: absolute;
|
|
343
|
+
top: -15px;
|
|
344
|
+
right: 30px;
|
|
345
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
346
|
+
color: white;
|
|
347
|
+
padding: 0.5rem 1.5rem;
|
|
348
|
+
border-radius: 20px;
|
|
349
|
+
font-weight: 700;
|
|
350
|
+
font-size: 0.85rem;
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.plan-name {
|
|
354
|
+
font-size: 1.5rem;
|
|
355
|
+
font-weight: 700;
|
|
356
|
+
margin-bottom: 1rem;
|
|
357
|
+
color: #1a202c;
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.plan-price {
|
|
361
|
+
font-size: 3.5rem;
|
|
362
|
+
font-weight: 800;
|
|
363
|
+
color: #667eea;
|
|
364
|
+
margin-bottom: 0.5rem;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.plan-price span {
|
|
368
|
+
font-size: 1.2rem;
|
|
369
|
+
color: #64748b;
|
|
370
|
+
font-weight: 500;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.plan-description {
|
|
374
|
+
color: #64748b;
|
|
375
|
+
margin-bottom: 2rem;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.plan-features {
|
|
379
|
+
list-style: none;
|
|
380
|
+
margin-bottom: 2rem;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
.plan-features li {
|
|
384
|
+
padding: 0.8rem 0;
|
|
385
|
+
border-bottom: 1px solid #e2e8f0;
|
|
386
|
+
color: #4a5568;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
.plan-features li:last-child {
|
|
390
|
+
border-bottom: none;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
.plan-button {
|
|
394
|
+
width: 100%;
|
|
395
|
+
padding: 1.2rem;
|
|
396
|
+
border-radius: 12px;
|
|
397
|
+
text-align: center;
|
|
398
|
+
text-decoration: none;
|
|
399
|
+
font-weight: 700;
|
|
400
|
+
transition: all 0.3s;
|
|
401
|
+
display: block;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.plan-button.primary {
|
|
405
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
406
|
+
color: white;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
.plan-button.primary:hover {
|
|
410
|
+
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
.plan-button.secondary {
|
|
414
|
+
background: #f7fafc;
|
|
415
|
+
color: #667eea;
|
|
416
|
+
}
|
|
417
|
+
|
|
418
|
+
.plan-button.secondary:hover {
|
|
419
|
+
background: #edf2f7;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.cta-section {
|
|
423
|
+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
424
|
+
padding: 8rem 3rem;
|
|
425
|
+
text-align: center;
|
|
426
|
+
color: white;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.cta-section h2 {
|
|
430
|
+
font-size: 3.5rem;
|
|
431
|
+
font-weight: 800;
|
|
432
|
+
margin-bottom: 1.5rem;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
.cta-section p {
|
|
436
|
+
font-size: 1.3rem;
|
|
437
|
+
margin-bottom: 3rem;
|
|
438
|
+
opacity: 0.95;
|
|
439
|
+
}
|
|
440
|
+
|
|
441
|
+
footer {
|
|
442
|
+
background: #1a202c;
|
|
443
|
+
color: white;
|
|
444
|
+
padding: 4rem 3rem 2rem;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
.footer-content {
|
|
448
|
+
max-width: 1400px;
|
|
449
|
+
margin: 0 auto;
|
|
450
|
+
display: grid;
|
|
451
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
452
|
+
gap: 3rem;
|
|
453
|
+
margin-bottom: 3rem;
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
.footer-column h3 {
|
|
457
|
+
font-size: 1.2rem;
|
|
458
|
+
margin-bottom: 1.5rem;
|
|
459
|
+
}
|
|
460
|
+
|
|
461
|
+
.footer-column ul {
|
|
462
|
+
list-style: none;
|
|
463
|
+
}
|
|
464
|
+
|
|
465
|
+
.footer-column ul li {
|
|
466
|
+
margin-bottom: 0.8rem;
|
|
467
|
+
}
|
|
468
|
+
|
|
469
|
+
.footer-column a {
|
|
470
|
+
color: #a0aec0;
|
|
471
|
+
text-decoration: none;
|
|
472
|
+
transition: color 0.3s;
|
|
473
|
+
}
|
|
474
|
+
|
|
475
|
+
.footer-column a:hover {
|
|
476
|
+
color: white;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.footer-bottom {
|
|
480
|
+
text-align: center;
|
|
481
|
+
padding-top: 2rem;
|
|
482
|
+
border-top: 1px solid #2d3748;
|
|
483
|
+
color: #a0aec0;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
@media (max-width: 768px) {
|
|
487
|
+
nav {
|
|
488
|
+
padding: 0 1.5rem;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.nav-menu {
|
|
492
|
+
gap: 1rem;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.hero {
|
|
496
|
+
padding: 5rem 1.5rem 4rem;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.hero h1 {
|
|
500
|
+
font-size: 2.5rem;
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.hero p {
|
|
504
|
+
font-size: 1.1rem;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.dashboard-mockup {
|
|
508
|
+
margin-top: -50px;
|
|
509
|
+
padding: 0 1.5rem;
|
|
510
|
+
}
|
|
511
|
+
|
|
512
|
+
.mockup-placeholder {
|
|
513
|
+
height: 300px;
|
|
514
|
+
font-size: 1.5rem;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.section-title {
|
|
518
|
+
font-size: 2.5rem;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
.features-grid {
|
|
522
|
+
grid-template-columns: 1fr;
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
.pricing-grid {
|
|
526
|
+
grid-template-columns: 1fr;
|
|
527
|
+
}
|
|
528
|
+
|
|
529
|
+
.cta-section h2 {
|
|
530
|
+
font-size: 2.5rem;
|
|
531
|
+
}
|
|
532
|
+
}
|
|
533
|
+
</style>
|
|
534
|
+
</head>
|
|
535
|
+
|
|
536
|
+
<body>
|
|
537
|
+
<header>
|
|
538
|
+
<nav>
|
|
539
|
+
<div class="logo">FlowTask</div>
|
|
540
|
+
<ul class="nav-menu">
|
|
541
|
+
<li><a href="#features">Features</a></li>
|
|
542
|
+
<li><a href="#pricing">Pricing</a></li>
|
|
543
|
+
<li><a href="#about">About</a></li>
|
|
544
|
+
<li><a class="nav-cta" href="#signup">Start Free Trial</a></li>
|
|
545
|
+
</ul>
|
|
546
|
+
</nav>
|
|
547
|
+
</header>
|
|
548
|
+
|
|
549
|
+
<section class="hero">
|
|
550
|
+
<div class="hero-content">
|
|
551
|
+
<h1>Project Management<br>Reimagined</h1>
|
|
552
|
+
<p>The all-in-one workspace for teams to plan, track, and deliver amazing projects faster than ever before.
|
|
553
|
+
</p>
|
|
554
|
+
<div class="hero-buttons">
|
|
555
|
+
<a href="javascript:void(0);" id="link-button" class="btn-primary">Get Started Free</a>
|
|
556
|
+
<a href="javascript:void(0);" id="second-link-button" class="btn-secondary">Watch Demo</a>
|
|
557
|
+
</div>
|
|
558
|
+
</div>
|
|
559
|
+
</section>
|
|
560
|
+
|
|
561
|
+
<div class="dashboard-mockup">
|
|
562
|
+
<div class="mockup-card">
|
|
563
|
+
<div class="mockup-placeholder">
|
|
564
|
+
📊 Dashboard Preview
|
|
565
|
+
</div>
|
|
566
|
+
</div>
|
|
567
|
+
</div>
|
|
568
|
+
|
|
569
|
+
<section class="features" id="features">
|
|
570
|
+
<div class="section-header">
|
|
571
|
+
<div class="section-tag">Features</div>
|
|
572
|
+
<h2 class="section-title">Everything You Need</h2>
|
|
573
|
+
<p class="section-subtitle">Powerful features designed to help your team collaborate seamlessly and deliver
|
|
574
|
+
exceptional results.</p>
|
|
575
|
+
</div>
|
|
576
|
+
<div class="features-grid">
|
|
577
|
+
<div class="feature-card">
|
|
578
|
+
<div class="feature-icon">⚡</div>
|
|
579
|
+
<h3 class="feature-title">Lightning Fast</h3>
|
|
580
|
+
<p class="feature-description">Built for speed with real-time collaboration. See updates instantly as
|
|
581
|
+
your team works together.</p>
|
|
582
|
+
</div>
|
|
583
|
+
<div class="feature-card">
|
|
584
|
+
<div class="feature-icon">🎯</div>
|
|
585
|
+
<h3 class="feature-title">Smart Automation</h3>
|
|
586
|
+
<p class="feature-description">Automate repetitive tasks and workflows. Focus on what matters while
|
|
587
|
+
FlowTask handles the rest.</p>
|
|
588
|
+
</div>
|
|
589
|
+
<div class="feature-card">
|
|
590
|
+
<div class="feature-icon">📈</div>
|
|
591
|
+
<h3 class="feature-title">Advanced Analytics</h3>
|
|
592
|
+
<p class="feature-description">Get deep insights into team performance and project progress with
|
|
593
|
+
beautiful visualizations.</p>
|
|
594
|
+
</div>
|
|
595
|
+
<div class="feature-card">
|
|
596
|
+
<div class="feature-icon">🔒</div>
|
|
597
|
+
<h3 class="feature-title">Enterprise Security</h3>
|
|
598
|
+
<p class="feature-description">Bank-level encryption and compliance with SOC 2, GDPR, and HIPAA
|
|
599
|
+
standards.</p>
|
|
600
|
+
</div>
|
|
601
|
+
<div class="feature-card">
|
|
602
|
+
<div class="feature-icon">🔗</div>
|
|
603
|
+
<h3 class="feature-title">Seamless Integration</h3>
|
|
604
|
+
<p class="feature-description">Connect with 100+ apps including Slack, Google Drive, GitHub, and more.
|
|
605
|
+
</p>
|
|
606
|
+
</div>
|
|
607
|
+
<div class="feature-card">
|
|
608
|
+
<div class="feature-icon">🌍</div>
|
|
609
|
+
<h3 class="feature-title">Global Collaboration</h3>
|
|
610
|
+
<p class="feature-description">Work with teams across time zones with offline mode and multi-language
|
|
611
|
+
support.</p>
|
|
612
|
+
</div>
|
|
613
|
+
</div>
|
|
614
|
+
</section>
|
|
615
|
+
|
|
616
|
+
<section class="stats">
|
|
617
|
+
<div class="stats-grid">
|
|
618
|
+
<div class="stat-item">
|
|
619
|
+
<h3>50K+</h3>
|
|
620
|
+
<p>Active Teams</p>
|
|
621
|
+
</div>
|
|
622
|
+
<div class="stat-item">
|
|
623
|
+
<h3>2M+</h3>
|
|
624
|
+
<p>Projects Completed</p>
|
|
625
|
+
</div>
|
|
626
|
+
<div class="stat-item">
|
|
627
|
+
<h3>99.9%</h3>
|
|
628
|
+
<p>Uptime</p>
|
|
629
|
+
</div>
|
|
630
|
+
<div class="stat-item">
|
|
631
|
+
<h3>150+</h3>
|
|
632
|
+
<p>Countries</p>
|
|
633
|
+
</div>
|
|
634
|
+
</div>
|
|
635
|
+
</section>
|
|
636
|
+
|
|
637
|
+
<section class="pricing" id="pricing">
|
|
638
|
+
<div class="section-header">
|
|
639
|
+
<div class="section-tag">Pricing</div>
|
|
640
|
+
<h2 class="section-title">Simple, Transparent Pricing</h2>
|
|
641
|
+
<p class="section-subtitle">Choose the perfect plan for your team. All plans include a 14-day free trial.
|
|
642
|
+
</p>
|
|
643
|
+
</div>
|
|
644
|
+
<div class="pricing-grid">
|
|
645
|
+
<div class="pricing-card">
|
|
646
|
+
<h3 class="plan-name">Starter</h3>
|
|
647
|
+
<div class="plan-price">$12<span>/month</span></div>
|
|
648
|
+
<p class="plan-description">Perfect for small teams getting started</p>
|
|
649
|
+
<ul class="plan-features">
|
|
650
|
+
<li>Up to 10 team members</li>
|
|
651
|
+
<li>Unlimited projects</li>
|
|
652
|
+
<li>5GB storage</li>
|
|
653
|
+
<li>Basic analytics</li>
|
|
654
|
+
<li>Email support</li>
|
|
655
|
+
</ul>
|
|
656
|
+
<a href="javascript:void(0);" id="metrics-button" class="plan-button secondary">Get Metrics</a>
|
|
657
|
+
</div>
|
|
658
|
+
<div class="pricing-card featured">
|
|
659
|
+
<span class="featured-badge">Most Popular</span>
|
|
660
|
+
<h3 class="plan-name">Professional</h3>
|
|
661
|
+
<div class="plan-price">$29<span>/month</span></div>
|
|
662
|
+
<p class="plan-description">For growing teams that need more power</p>
|
|
663
|
+
<ul class="plan-features">
|
|
664
|
+
<li>Up to 50 team members</li>
|
|
665
|
+
<li>Unlimited projects</li>
|
|
666
|
+
<li>100GB storage</li>
|
|
667
|
+
<li>Advanced analytics</li>
|
|
668
|
+
<li>Priority support</li>
|
|
669
|
+
<li>Custom integrations</li>
|
|
670
|
+
</ul>
|
|
671
|
+
<a href="#" class="plan-button primary">Start Free Trial</a>
|
|
672
|
+
</div>
|
|
673
|
+
<div class="pricing-card">
|
|
674
|
+
<h3 class="plan-name">Enterprise</h3>
|
|
675
|
+
<div class="plan-price">$99<span>/month</span></div>
|
|
676
|
+
<p class="plan-description">For large organizations with advanced needs</p>
|
|
677
|
+
<ul class="plan-features">
|
|
678
|
+
<li>Unlimited team members</li>
|
|
679
|
+
<li>Unlimited projects</li>
|
|
680
|
+
<li>Unlimited storage</li>
|
|
681
|
+
<li>AI-powered insights</li>
|
|
682
|
+
<li>24/7 dedicated support</li>
|
|
683
|
+
<li>Custom integrations</li>
|
|
684
|
+
<li>Advanced security</li>
|
|
685
|
+
</ul>
|
|
686
|
+
<a href="#" class="plan-button secondary">Contact Sales</a>
|
|
687
|
+
</div>
|
|
688
|
+
</div>
|
|
689
|
+
</section>
|
|
690
|
+
|
|
691
|
+
<section class="cta-section">
|
|
692
|
+
<h2>Ready to Transform Your Workflow?</h2>
|
|
693
|
+
<p>Join thousands of teams already using FlowTask to deliver amazing results.</p>
|
|
694
|
+
<a href="javascript:void(0);" id="trail-button" class="btn-primary">Start Your Free Trial</a>
|
|
695
|
+
</section>
|
|
696
|
+
|
|
697
|
+
<footer>
|
|
698
|
+
<div class="footer-content">
|
|
699
|
+
<div class="footer-column">
|
|
700
|
+
<h3>FlowTask</h3>
|
|
701
|
+
<p>The modern project management platform for ambitious teams.</p>
|
|
702
|
+
</div>
|
|
703
|
+
<div class="footer-column">
|
|
704
|
+
<h3>Product</h3>
|
|
705
|
+
<ul>
|
|
706
|
+
<li><a href="#">Features</a></li>
|
|
707
|
+
<li><a href="#">Pricing</a></li>
|
|
708
|
+
<li><a href="#">Integrations</a></li>
|
|
709
|
+
<li><a href="#">Updates</a></li>
|
|
710
|
+
</ul>
|
|
711
|
+
</div>
|
|
712
|
+
<div class="footer-column">
|
|
713
|
+
<h3>Company</h3>
|
|
714
|
+
<ul>
|
|
715
|
+
<li><a href="#">About</a></li>
|
|
716
|
+
<li><a href="#">Careers</a></li>
|
|
717
|
+
<li><a href="#">Blog</a></li>
|
|
718
|
+
<li><a href="#">Press</a></li>
|
|
719
|
+
</ul>
|
|
720
|
+
</div>
|
|
721
|
+
<div class="footer-column">
|
|
722
|
+
<h3>Resources</h3>
|
|
723
|
+
<ul>
|
|
724
|
+
<li><a href="#">Documentation</a></li>
|
|
725
|
+
<li><a href="#">Help Center</a></li>
|
|
726
|
+
<li><a href="#">API Reference</a></li>
|
|
727
|
+
<li><a href="#">Community</a></li>
|
|
728
|
+
</ul>
|
|
729
|
+
</div>
|
|
730
|
+
</div>
|
|
731
|
+
<div class="footer-bottom">
|
|
732
|
+
<p>© 2024 FlowTask. All rights reserved. | Privacy Policy | Terms of Service</p>
|
|
733
|
+
</div>
|
|
734
|
+
</footer>
|
|
735
|
+
|
|
736
|
+
<script type="module" src="./script.js"></script>
|
|
737
|
+
</body>
|
|
738
|
+
|
|
739
|
+
</html>
|