@cocreate/text 1.20.12 → 1.20.14
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/.github/FUNDING.yml +3 -3
- package/.github/workflows/automated.yml +95 -95
- package/.github/workflows/manual.yml +44 -44
- package/CHANGELOG.md +1805 -1790
- package/CONTRIBUTING.md +96 -96
- package/CoCreate.config.js +26 -26
- package/LICENSE +683 -683
- package/README.md +97 -97
- package/demo/custom-rich-text.html +277 -277
- package/demo/demos.1.html +24 -24
- package/demo/demos.html +38 -38
- package/demo/index.html +74 -74
- package/demo/test-webpage.html +376 -376
- package/docs/index.html +276 -276
- package/package.json +11 -11
- package/release.config.js +21 -21
- package/src/index.js +470 -470
- package/src/saveDomText.js +32 -32
- package/src/updateDom.js +208 -208
- package/src/updateText.js +79 -79
- package/webpack.config.js +84 -84
package/demo/test-webpage.html
CHANGED
|
@@ -1,376 +1,376 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<title>CoCreateJS - A Low-code Javascript framework</title>
|
|
8
|
-
<meta
|
|
9
|
-
name="description"
|
|
10
|
-
content="A Low-code JavaScript framework for building collaborative No-code platforms, apps and UI" />
|
|
11
|
-
<link rel="icon" sizes="32x32" href="assets/favicon.ico" />
|
|
12
|
-
<meta name="robots" content="index,follow" />
|
|
13
|
-
<meta
|
|
14
|
-
property="og:image"
|
|
15
|
-
content="https://cdn.cocreate.app/docs/action.png" />
|
|
16
|
-
|
|
17
|
-
<!-- CoCreate CSS -->
|
|
18
|
-
<link
|
|
19
|
-
rel="stylesheet"
|
|
20
|
-
href="https://cdn.cocreate.app/latest/CoCreate.min.css"
|
|
21
|
-
type="text/css" />
|
|
22
|
-
<link
|
|
23
|
-
rel="stylesheet"
|
|
24
|
-
href="/index.css"
|
|
25
|
-
type="text/css"
|
|
26
|
-
collection="files"
|
|
27
|
-
document_id="6092da6b19ec8e58fc80c94e"
|
|
28
|
-
name="src"
|
|
29
|
-
save="true"
|
|
30
|
-
parse="true"
|
|
31
|
-
minified />
|
|
32
|
-
|
|
33
|
-
<link rel="manifest" href="/manifest.webmanifest" />
|
|
34
|
-
</head>
|
|
35
|
-
<style type="text/css" media="screen">
|
|
36
|
-
/*Sidenav Search Field */
|
|
37
|
-
.floating-label_field {
|
|
38
|
-
margin-top: 0px;
|
|
39
|
-
}
|
|
40
|
-
.hide-nav + #menuL {
|
|
41
|
-
margin-top: 0px;
|
|
42
|
-
max-height: -moz-available;
|
|
43
|
-
max-height: -webkit-fill-available;
|
|
44
|
-
max-height: fill-available;
|
|
45
|
-
will-change: transform;
|
|
46
|
-
transition: background 0.3s,
|
|
47
|
-
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
|
|
48
|
-
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
|
|
49
|
-
background 0.3s;
|
|
50
|
-
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
|
|
51
|
-
background 0.3s,
|
|
52
|
-
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
|
|
53
|
-
transform: translateY(0);
|
|
54
|
-
-webkit-transform: translateY(0);
|
|
55
|
-
}
|
|
56
|
-
</style>
|
|
57
|
-
|
|
58
|
-
<body>
|
|
59
|
-
<div
|
|
60
|
-
contenteditable
|
|
61
|
-
collection="test"
|
|
62
|
-
document_id="60c7d9d08692d10f1c183d0f"
|
|
63
|
-
name="html"
|
|
64
|
-
class="sortabl">
|
|
65
|
-
<!-- Navbar -->
|
|
66
|
-
<nav
|
|
67
|
-
class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px"
|
|
68
|
-
scroll="sticky-nav,hide-nav"
|
|
69
|
-
scroll-up="10"
|
|
70
|
-
scroll-down="10"
|
|
71
|
-
collection="components"
|
|
72
|
-
document_id="6091b71857a0e06b6d572d5c"
|
|
73
|
-
name="html"></nav>
|
|
74
|
-
|
|
75
|
-
<!-- SideNav Left-->
|
|
76
|
-
<sidenav
|
|
77
|
-
id="menuL"
|
|
78
|
-
class="cocreate-sidenav background:whitesmoke display:none"
|
|
79
|
-
collection="components"
|
|
80
|
-
document_id="6090c58598c42a332d21807f"
|
|
81
|
-
name="html"
|
|
82
|
-
content_id="content"
|
|
83
|
-
sidenav-default_desktop="offcanvas"
|
|
84
|
-
sidenav-default_tablet="offcanvas"
|
|
85
|
-
sidenav-default_phone="offcanvas"
|
|
86
|
-
sidenav-ontoggle_desktop="expanded"
|
|
87
|
-
sidenav-ontoggle_tablet="expanded"
|
|
88
|
-
sidenav-ontoggle_phone="expanded">
|
|
89
|
-
</sidenav>
|
|
90
|
-
|
|
91
|
-
<!-- Modal Viewport/Boundaries -->
|
|
92
|
-
<div
|
|
93
|
-
class="position:fixed margin-top:50px"
|
|
94
|
-
content_id="content"
|
|
95
|
-
id="modal-viewport"></div>
|
|
96
|
-
|
|
97
|
-
<!-- Main Content -->
|
|
98
|
-
<main class="width:auto" content_id="content">
|
|
99
|
-
<section
|
|
100
|
-
class="padding-top:80px padding-bottom:40px"
|
|
101
|
-
classname="test">
|
|
102
|
-
<div class="max-width:90% margin:0px_auto">
|
|
103
|
-
<div
|
|
104
|
-
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
105
|
-
<div class="flex-grow:1 width:300px">
|
|
106
|
-
<video loop autoplay muted class="width:100%">
|
|
107
|
-
<source
|
|
108
|
-
src="assets/dashboard-video.mp4"
|
|
109
|
-
type="video/mp4" />
|
|
110
|
-
</video>
|
|
111
|
-
</div>
|
|
112
|
-
<div
|
|
113
|
-
class="flex-grow:1 width:300px padding:0px_15px font-size:16px">
|
|
114
|
-
<h1 class="font-size:2rem">
|
|
115
|
-
A Low-code JavaScript
|
|
116
|
-
<span class="color:dodgerblue"
|
|
117
|
-
>Framework</span
|
|
118
|
-
>
|
|
119
|
-
</h1>
|
|
120
|
-
<span class="font-size:16px margin-top:10px"
|
|
121
|
-
>For Building Collaborative Apps, Platforms
|
|
122
|
-
and UI's</span
|
|
123
|
-
>
|
|
124
|
-
<!--<p class="margin-top:10px">HTML and CSS, No JS Required...</p>-->
|
|
125
|
-
<button
|
|
126
|
-
href="/docs/"
|
|
127
|
-
class="background-color:dodgerblue color:white border-radius-50px margin-top:20px padding:10px_30px">
|
|
128
|
-
Get Started
|
|
129
|
-
</button>
|
|
130
|
-
</div>
|
|
131
|
-
</div>
|
|
132
|
-
</div>
|
|
133
|
-
</section>
|
|
134
|
-
|
|
135
|
-
<!-- COMPANY SECTION -->
|
|
136
|
-
<section class="background:whitesmoke padding:30px_15px">
|
|
137
|
-
<div
|
|
138
|
-
class="padding:25px_0px display:flex flex-wrap:wrap justify-content:center flex-direction:row align-items:center">
|
|
139
|
-
<div class="padding:0px_10px">
|
|
140
|
-
<img
|
|
141
|
-
src="assets/stripe.png"
|
|
142
|
-
class="max-height:60px width:auto" />
|
|
143
|
-
</div>
|
|
144
|
-
<div class="padding:0px_10px">
|
|
145
|
-
<img
|
|
146
|
-
src="assets/twilio.png"
|
|
147
|
-
class="max-height:60px width:auto" />
|
|
148
|
-
</div>
|
|
149
|
-
<div class="padding:0px_10px">
|
|
150
|
-
<img
|
|
151
|
-
src="assets/sendgrid.png"
|
|
152
|
-
class="max-height:60px width:auto" />
|
|
153
|
-
</div>
|
|
154
|
-
<div class="padding:0px_10px">
|
|
155
|
-
<img
|
|
156
|
-
src="assets/plaid.png"
|
|
157
|
-
class="max-height:60px width:auto" />
|
|
158
|
-
</div>
|
|
159
|
-
<div class="padding:0px_10px">
|
|
160
|
-
<img
|
|
161
|
-
src="assets/shipengine.svg"
|
|
162
|
-
class="max-height:60px width:auto" />
|
|
163
|
-
</div>
|
|
164
|
-
<div class="padding:0px_10px">
|
|
165
|
-
<img
|
|
166
|
-
src="assets/googleMaps.png"
|
|
167
|
-
class="max-height:60px width:auto" />
|
|
168
|
-
</div>
|
|
169
|
-
</div>
|
|
170
|
-
</section>
|
|
171
|
-
|
|
172
|
-
<!-- Micro Component Architecture -->
|
|
173
|
-
<section
|
|
174
|
-
class="padding-top:80px padding-bottom:40px"
|
|
175
|
-
id="features">
|
|
176
|
-
<div class="max-width:90% margin:0px_auto">
|
|
177
|
-
<div
|
|
178
|
-
class="display:flex flex-wrap:wrap align-items:center">
|
|
179
|
-
<div class="flex-grow:1 width:300px">
|
|
180
|
-
<video loop autoplay muted class="width:100%">
|
|
181
|
-
<source
|
|
182
|
-
type="video/mp4"
|
|
183
|
-
src="assets/on-board-video.webm" />
|
|
184
|
-
</video>
|
|
185
|
-
</div>
|
|
186
|
-
<div
|
|
187
|
-
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
188
|
-
<h1
|
|
189
|
-
class="font-size:1.5rem text-transform:uppercase">
|
|
190
|
-
Micro Component Architecture
|
|
191
|
-
</h1>
|
|
192
|
-
<p class="margin-top:10px line-height:1.5">
|
|
193
|
-
Vanilla javascript, lightweight, single
|
|
194
|
-
purpose micro components. Easily modify,
|
|
195
|
-
remove and/or replace components. Highly
|
|
196
|
-
configuarable using HTML5 attributes. HTML5
|
|
197
|
-
developers can use a combination of
|
|
198
|
-
attributes to create a dynamic experience.
|
|
199
|
-
Javascript developers still have access to
|
|
200
|
-
API, callbacks and events.
|
|
201
|
-
</p>
|
|
202
|
-
<p></p>
|
|
203
|
-
<!--<a class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block">Sign Up Now</a>-->
|
|
204
|
-
</div>
|
|
205
|
-
</div>
|
|
206
|
-
</div>
|
|
207
|
-
</section>
|
|
208
|
-
|
|
209
|
-
<!-- Collaborative Headless CMS -->
|
|
210
|
-
<section
|
|
211
|
-
class="background:whitesmoke padding-top:80px padding-bottom:40px">
|
|
212
|
-
<div class="max-width:90% margin:0px_auto">
|
|
213
|
-
<div
|
|
214
|
-
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
215
|
-
<div class="flex-grow:1 width:300px">
|
|
216
|
-
<video loop autoplay muted class="width:100%">
|
|
217
|
-
<source
|
|
218
|
-
type="video/mp4"
|
|
219
|
-
src="assets/cards.webm" />
|
|
220
|
-
</video>
|
|
221
|
-
</div>
|
|
222
|
-
<div
|
|
223
|
-
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
224
|
-
<h1
|
|
225
|
-
class="font-size:1.5rem text-transform:uppercase">
|
|
226
|
-
Collaborative Headless CMS
|
|
227
|
-
</h1>
|
|
228
|
-
<p class="margin-top:10px line-height:1.5">
|
|
229
|
-
A lighting fast headless CMS over websocket,
|
|
230
|
-
providing CRUD and CRDT functionality.
|
|
231
|
-
Create, Read, Update, Delete and Filter
|
|
232
|
-
lists. Collaborate on Text, DOM and Objects.
|
|
233
|
-
Configure using HTML5 data-attibutes.
|
|
234
|
-
Supports offline editing and user cursor
|
|
235
|
-
positions in Inputs, Textareas, Rich Text
|
|
236
|
-
Editors and Code Editors. But of course...
|
|
237
|
-
Javascript developers still have access to
|
|
238
|
-
API, callbacks and events.
|
|
239
|
-
</p>
|
|
240
|
-
<a
|
|
241
|
-
class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block"
|
|
242
|
-
>Get Your API Key</a
|
|
243
|
-
>
|
|
244
|
-
</div>
|
|
245
|
-
</div>
|
|
246
|
-
</div>
|
|
247
|
-
</section>
|
|
248
|
-
|
|
249
|
-
<!-- Fully Customizable Admin Panel -->
|
|
250
|
-
<section class="padding-top:80px padding-bottom:40px">
|
|
251
|
-
<div class="max-width:90% margin:0px_auto">
|
|
252
|
-
<div
|
|
253
|
-
class="display:flex flex-wrap:wrap align-items:center">
|
|
254
|
-
<div class="flex-grow:1 width:300px">
|
|
255
|
-
<video loop autoplay muted class="width:100%">
|
|
256
|
-
<source
|
|
257
|
-
type="video/mp4"
|
|
258
|
-
src="assets/on-board-video.webm" />
|
|
259
|
-
</video>
|
|
260
|
-
</div>
|
|
261
|
-
<div
|
|
262
|
-
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
263
|
-
<h1
|
|
264
|
-
class="font-size:1.5rem text-transform:uppercase">
|
|
265
|
-
Fully Customizable Admin Panel
|
|
266
|
-
</h1>
|
|
267
|
-
<p class="margin-top:10px line-height:1.5">
|
|
268
|
-
HTML5 Admin dashboard UI powered by
|
|
269
|
-
CoCreateJS. It is 100% editable and used to
|
|
270
|
-
manage and create views for your data and
|
|
271
|
-
content. Use it as a Collaborative CRM, CMS
|
|
272
|
-
and ERP. Can be modified, replaced or used
|
|
273
|
-
as an example to build your own custom HTML5
|
|
274
|
-
admin dashboard.
|
|
275
|
-
</p>
|
|
276
|
-
<p></p>
|
|
277
|
-
<!--<a class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block">Sign Up Now</a>-->
|
|
278
|
-
</div>
|
|
279
|
-
</div>
|
|
280
|
-
</div>
|
|
281
|
-
</section>
|
|
282
|
-
|
|
283
|
-
<!-- Collaborative Builder -->
|
|
284
|
-
<section
|
|
285
|
-
class="background:whitesmoke padding-top:80px padding-bottom:40px">
|
|
286
|
-
<div class="max-width:90% margin:0px_auto">
|
|
287
|
-
<div
|
|
288
|
-
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
289
|
-
<div class="flex-grow:1 width:300px">
|
|
290
|
-
<video loop autoplay muted class="width:100%">
|
|
291
|
-
<source
|
|
292
|
-
type="video/mp4"
|
|
293
|
-
src="assets/cards.webm" />
|
|
294
|
-
</video>
|
|
295
|
-
</div>
|
|
296
|
-
<div
|
|
297
|
-
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
298
|
-
<h1
|
|
299
|
-
class="font-size:1.5rem text-transform:uppercase">
|
|
300
|
-
Collaborative Drag-n-Drop Builder
|
|
301
|
-
</h1>
|
|
302
|
-
<p class="margin-top:10px line-height:1.5">
|
|
303
|
-
We are in the process of using CoCreateJS
|
|
304
|
-
components to create an experimental NO Code
|
|
305
|
-
expereince. Every page of the adminUI can be
|
|
306
|
-
edited in the drag and drop builder.
|
|
307
|
-
CoCreate builder UI is completely
|
|
308
|
-
customizable and supports editing of any
|
|
309
|
-
html5 template. Can be modified, replaced or
|
|
310
|
-
used as an example to build your own custom
|
|
311
|
-
drang and drop builder.
|
|
312
|
-
</p>
|
|
313
|
-
</div>
|
|
314
|
-
</div>
|
|
315
|
-
</div>
|
|
316
|
-
</section>
|
|
317
|
-
|
|
318
|
-
<!-- Thirdparty API Intergration -->
|
|
319
|
-
<section class="padding-top:80px padding-bottom:40px">
|
|
320
|
-
<div class="max-width:90% margin:0px_auto">
|
|
321
|
-
<div
|
|
322
|
-
class="display:flex flex-wrap:wrap align-items:center">
|
|
323
|
-
<div class="flex-grow:1 width:300px">
|
|
324
|
-
<video loop autoplay muted class="width:100%">
|
|
325
|
-
<source
|
|
326
|
-
type="video/mp4"
|
|
327
|
-
src="assets/on-board-video.webm" />
|
|
328
|
-
</video>
|
|
329
|
-
</div>
|
|
330
|
-
<div
|
|
331
|
-
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
332
|
-
<h1
|
|
333
|
-
class="font-size:1.5rem text-transform:uppercase">
|
|
334
|
-
Thirdparty API Intergration
|
|
335
|
-
</h1>
|
|
336
|
-
<p class="margin-top:10px line-height:1.5">
|
|
337
|
-
We have put together a few thirdparty APIs
|
|
338
|
-
and developed them to be used and configured
|
|
339
|
-
with HTML5 attributes. Build custom flows
|
|
340
|
-
and logic without ever leaving the html
|
|
341
|
-
page... The CoCreate Way... Almost forgot,
|
|
342
|
-
Javascript developers still have access to
|
|
343
|
-
API, callbacks and events.
|
|
344
|
-
</p>
|
|
345
|
-
<p></p>
|
|
346
|
-
<!--<a class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block">Sign Up Now</a>-->
|
|
347
|
-
</div>
|
|
348
|
-
</div>
|
|
349
|
-
</div>
|
|
350
|
-
</section>
|
|
351
|
-
|
|
352
|
-
<button
|
|
353
|
-
href="https://github.com/CoCreate-app/CoCreate-website/tree/master/src/index.html?message=docs%3A%20describe%20your%20change..."
|
|
354
|
-
target="_blank"
|
|
355
|
-
class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
356
|
-
<i
|
|
357
|
-
class="height:20px fill:#505050"
|
|
358
|
-
src="/assets/svg/pencil-alt.svg"></i>
|
|
359
|
-
</button>
|
|
360
|
-
</main>
|
|
361
|
-
|
|
362
|
-
<!-- Footer -->
|
|
363
|
-
<footer
|
|
364
|
-
id="spreadtheword"
|
|
365
|
-
content_id="content"
|
|
366
|
-
class="padding:100px_0px background-size:cover background-position:center position:relative color:white"
|
|
367
|
-
style="background-image: url(/assets/banner.png)"
|
|
368
|
-
collection="components"
|
|
369
|
-
document_id="6092ebcc19ec8e58fc80c9e3"
|
|
370
|
-
name="html"></footer>
|
|
371
|
-
</div>
|
|
372
|
-
|
|
373
|
-
<!--CoCreateJS-->
|
|
374
|
-
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
|
375
|
-
</body>
|
|
376
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
+
<title>CoCreateJS - A Low-code Javascript framework</title>
|
|
8
|
+
<meta
|
|
9
|
+
name="description"
|
|
10
|
+
content="A Low-code JavaScript framework for building collaborative No-code platforms, apps and UI" />
|
|
11
|
+
<link rel="icon" sizes="32x32" href="assets/favicon.ico" />
|
|
12
|
+
<meta name="robots" content="index,follow" />
|
|
13
|
+
<meta
|
|
14
|
+
property="og:image"
|
|
15
|
+
content="https://cdn.cocreate.app/docs/action.png" />
|
|
16
|
+
|
|
17
|
+
<!-- CoCreate CSS -->
|
|
18
|
+
<link
|
|
19
|
+
rel="stylesheet"
|
|
20
|
+
href="https://cdn.cocreate.app/latest/CoCreate.min.css"
|
|
21
|
+
type="text/css" />
|
|
22
|
+
<link
|
|
23
|
+
rel="stylesheet"
|
|
24
|
+
href="/index.css"
|
|
25
|
+
type="text/css"
|
|
26
|
+
collection="files"
|
|
27
|
+
document_id="6092da6b19ec8e58fc80c94e"
|
|
28
|
+
name="src"
|
|
29
|
+
save="true"
|
|
30
|
+
parse="true"
|
|
31
|
+
minified />
|
|
32
|
+
|
|
33
|
+
<link rel="manifest" href="/manifest.webmanifest" />
|
|
34
|
+
</head>
|
|
35
|
+
<style type="text/css" media="screen">
|
|
36
|
+
/*Sidenav Search Field */
|
|
37
|
+
.floating-label_field {
|
|
38
|
+
margin-top: 0px;
|
|
39
|
+
}
|
|
40
|
+
.hide-nav + #menuL {
|
|
41
|
+
margin-top: 0px;
|
|
42
|
+
max-height: -moz-available;
|
|
43
|
+
max-height: -webkit-fill-available;
|
|
44
|
+
max-height: fill-available;
|
|
45
|
+
will-change: transform;
|
|
46
|
+
transition: background 0.3s,
|
|
47
|
+
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
|
|
48
|
+
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
|
|
49
|
+
background 0.3s;
|
|
50
|
+
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
|
|
51
|
+
background 0.3s,
|
|
52
|
+
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
|
|
53
|
+
transform: translateY(0);
|
|
54
|
+
-webkit-transform: translateY(0);
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
|
+
|
|
58
|
+
<body>
|
|
59
|
+
<div
|
|
60
|
+
contenteditable
|
|
61
|
+
collection="test"
|
|
62
|
+
document_id="60c7d9d08692d10f1c183d0f"
|
|
63
|
+
name="html"
|
|
64
|
+
class="sortabl">
|
|
65
|
+
<!-- Navbar -->
|
|
66
|
+
<nav
|
|
67
|
+
class="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px"
|
|
68
|
+
scroll="sticky-nav,hide-nav"
|
|
69
|
+
scroll-up="10"
|
|
70
|
+
scroll-down="10"
|
|
71
|
+
collection="components"
|
|
72
|
+
document_id="6091b71857a0e06b6d572d5c"
|
|
73
|
+
name="html"></nav>
|
|
74
|
+
|
|
75
|
+
<!-- SideNav Left-->
|
|
76
|
+
<sidenav
|
|
77
|
+
id="menuL"
|
|
78
|
+
class="cocreate-sidenav background:whitesmoke display:none"
|
|
79
|
+
collection="components"
|
|
80
|
+
document_id="6090c58598c42a332d21807f"
|
|
81
|
+
name="html"
|
|
82
|
+
content_id="content"
|
|
83
|
+
sidenav-default_desktop="offcanvas"
|
|
84
|
+
sidenav-default_tablet="offcanvas"
|
|
85
|
+
sidenav-default_phone="offcanvas"
|
|
86
|
+
sidenav-ontoggle_desktop="expanded"
|
|
87
|
+
sidenav-ontoggle_tablet="expanded"
|
|
88
|
+
sidenav-ontoggle_phone="expanded">
|
|
89
|
+
</sidenav>
|
|
90
|
+
|
|
91
|
+
<!-- Modal Viewport/Boundaries -->
|
|
92
|
+
<div
|
|
93
|
+
class="position:fixed margin-top:50px"
|
|
94
|
+
content_id="content"
|
|
95
|
+
id="modal-viewport"></div>
|
|
96
|
+
|
|
97
|
+
<!-- Main Content -->
|
|
98
|
+
<main class="width:auto" content_id="content">
|
|
99
|
+
<section
|
|
100
|
+
class="padding-top:80px padding-bottom:40px"
|
|
101
|
+
classname="test">
|
|
102
|
+
<div class="max-width:90% margin:0px_auto">
|
|
103
|
+
<div
|
|
104
|
+
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
105
|
+
<div class="flex-grow:1 width:300px">
|
|
106
|
+
<video loop autoplay muted class="width:100%">
|
|
107
|
+
<source
|
|
108
|
+
src="assets/dashboard-video.mp4"
|
|
109
|
+
type="video/mp4" />
|
|
110
|
+
</video>
|
|
111
|
+
</div>
|
|
112
|
+
<div
|
|
113
|
+
class="flex-grow:1 width:300px padding:0px_15px font-size:16px">
|
|
114
|
+
<h1 class="font-size:2rem">
|
|
115
|
+
A Low-code JavaScript
|
|
116
|
+
<span class="color:dodgerblue"
|
|
117
|
+
>Framework</span
|
|
118
|
+
>
|
|
119
|
+
</h1>
|
|
120
|
+
<span class="font-size:16px margin-top:10px"
|
|
121
|
+
>For Building Collaborative Apps, Platforms
|
|
122
|
+
and UI's</span
|
|
123
|
+
>
|
|
124
|
+
<!--<p class="margin-top:10px">HTML and CSS, No JS Required...</p>-->
|
|
125
|
+
<button
|
|
126
|
+
href="/docs/"
|
|
127
|
+
class="background-color:dodgerblue color:white border-radius-50px margin-top:20px padding:10px_30px">
|
|
128
|
+
Get Started
|
|
129
|
+
</button>
|
|
130
|
+
</div>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
</section>
|
|
134
|
+
|
|
135
|
+
<!-- COMPANY SECTION -->
|
|
136
|
+
<section class="background:whitesmoke padding:30px_15px">
|
|
137
|
+
<div
|
|
138
|
+
class="padding:25px_0px display:flex flex-wrap:wrap justify-content:center flex-direction:row align-items:center">
|
|
139
|
+
<div class="padding:0px_10px">
|
|
140
|
+
<img
|
|
141
|
+
src="assets/stripe.png"
|
|
142
|
+
class="max-height:60px width:auto" />
|
|
143
|
+
</div>
|
|
144
|
+
<div class="padding:0px_10px">
|
|
145
|
+
<img
|
|
146
|
+
src="assets/twilio.png"
|
|
147
|
+
class="max-height:60px width:auto" />
|
|
148
|
+
</div>
|
|
149
|
+
<div class="padding:0px_10px">
|
|
150
|
+
<img
|
|
151
|
+
src="assets/sendgrid.png"
|
|
152
|
+
class="max-height:60px width:auto" />
|
|
153
|
+
</div>
|
|
154
|
+
<div class="padding:0px_10px">
|
|
155
|
+
<img
|
|
156
|
+
src="assets/plaid.png"
|
|
157
|
+
class="max-height:60px width:auto" />
|
|
158
|
+
</div>
|
|
159
|
+
<div class="padding:0px_10px">
|
|
160
|
+
<img
|
|
161
|
+
src="assets/shipengine.svg"
|
|
162
|
+
class="max-height:60px width:auto" />
|
|
163
|
+
</div>
|
|
164
|
+
<div class="padding:0px_10px">
|
|
165
|
+
<img
|
|
166
|
+
src="assets/googleMaps.png"
|
|
167
|
+
class="max-height:60px width:auto" />
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</section>
|
|
171
|
+
|
|
172
|
+
<!-- Micro Component Architecture -->
|
|
173
|
+
<section
|
|
174
|
+
class="padding-top:80px padding-bottom:40px"
|
|
175
|
+
id="features">
|
|
176
|
+
<div class="max-width:90% margin:0px_auto">
|
|
177
|
+
<div
|
|
178
|
+
class="display:flex flex-wrap:wrap align-items:center">
|
|
179
|
+
<div class="flex-grow:1 width:300px">
|
|
180
|
+
<video loop autoplay muted class="width:100%">
|
|
181
|
+
<source
|
|
182
|
+
type="video/mp4"
|
|
183
|
+
src="assets/on-board-video.webm" />
|
|
184
|
+
</video>
|
|
185
|
+
</div>
|
|
186
|
+
<div
|
|
187
|
+
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
188
|
+
<h1
|
|
189
|
+
class="font-size:1.5rem text-transform:uppercase">
|
|
190
|
+
Micro Component Architecture
|
|
191
|
+
</h1>
|
|
192
|
+
<p class="margin-top:10px line-height:1.5">
|
|
193
|
+
Vanilla javascript, lightweight, single
|
|
194
|
+
purpose micro components. Easily modify,
|
|
195
|
+
remove and/or replace components. Highly
|
|
196
|
+
configuarable using HTML5 attributes. HTML5
|
|
197
|
+
developers can use a combination of
|
|
198
|
+
attributes to create a dynamic experience.
|
|
199
|
+
Javascript developers still have access to
|
|
200
|
+
API, callbacks and events.
|
|
201
|
+
</p>
|
|
202
|
+
<p></p>
|
|
203
|
+
<!--<a class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block">Sign Up Now</a>-->
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</section>
|
|
208
|
+
|
|
209
|
+
<!-- Collaborative Headless CMS -->
|
|
210
|
+
<section
|
|
211
|
+
class="background:whitesmoke padding-top:80px padding-bottom:40px">
|
|
212
|
+
<div class="max-width:90% margin:0px_auto">
|
|
213
|
+
<div
|
|
214
|
+
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
215
|
+
<div class="flex-grow:1 width:300px">
|
|
216
|
+
<video loop autoplay muted class="width:100%">
|
|
217
|
+
<source
|
|
218
|
+
type="video/mp4"
|
|
219
|
+
src="assets/cards.webm" />
|
|
220
|
+
</video>
|
|
221
|
+
</div>
|
|
222
|
+
<div
|
|
223
|
+
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
224
|
+
<h1
|
|
225
|
+
class="font-size:1.5rem text-transform:uppercase">
|
|
226
|
+
Collaborative Headless CMS
|
|
227
|
+
</h1>
|
|
228
|
+
<p class="margin-top:10px line-height:1.5">
|
|
229
|
+
A lighting fast headless CMS over websocket,
|
|
230
|
+
providing CRUD and CRDT functionality.
|
|
231
|
+
Create, Read, Update, Delete and Filter
|
|
232
|
+
lists. Collaborate on Text, DOM and Objects.
|
|
233
|
+
Configure using HTML5 data-attibutes.
|
|
234
|
+
Supports offline editing and user cursor
|
|
235
|
+
positions in Inputs, Textareas, Rich Text
|
|
236
|
+
Editors and Code Editors. But of course...
|
|
237
|
+
Javascript developers still have access to
|
|
238
|
+
API, callbacks and events.
|
|
239
|
+
</p>
|
|
240
|
+
<a
|
|
241
|
+
class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block"
|
|
242
|
+
>Get Your API Key</a
|
|
243
|
+
>
|
|
244
|
+
</div>
|
|
245
|
+
</div>
|
|
246
|
+
</div>
|
|
247
|
+
</section>
|
|
248
|
+
|
|
249
|
+
<!-- Fully Customizable Admin Panel -->
|
|
250
|
+
<section class="padding-top:80px padding-bottom:40px">
|
|
251
|
+
<div class="max-width:90% margin:0px_auto">
|
|
252
|
+
<div
|
|
253
|
+
class="display:flex flex-wrap:wrap align-items:center">
|
|
254
|
+
<div class="flex-grow:1 width:300px">
|
|
255
|
+
<video loop autoplay muted class="width:100%">
|
|
256
|
+
<source
|
|
257
|
+
type="video/mp4"
|
|
258
|
+
src="assets/on-board-video.webm" />
|
|
259
|
+
</video>
|
|
260
|
+
</div>
|
|
261
|
+
<div
|
|
262
|
+
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
263
|
+
<h1
|
|
264
|
+
class="font-size:1.5rem text-transform:uppercase">
|
|
265
|
+
Fully Customizable Admin Panel
|
|
266
|
+
</h1>
|
|
267
|
+
<p class="margin-top:10px line-height:1.5">
|
|
268
|
+
HTML5 Admin dashboard UI powered by
|
|
269
|
+
CoCreateJS. It is 100% editable and used to
|
|
270
|
+
manage and create views for your data and
|
|
271
|
+
content. Use it as a Collaborative CRM, CMS
|
|
272
|
+
and ERP. Can be modified, replaced or used
|
|
273
|
+
as an example to build your own custom HTML5
|
|
274
|
+
admin dashboard.
|
|
275
|
+
</p>
|
|
276
|
+
<p></p>
|
|
277
|
+
<!--<a class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block">Sign Up Now</a>-->
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
</div>
|
|
281
|
+
</section>
|
|
282
|
+
|
|
283
|
+
<!-- Collaborative Builder -->
|
|
284
|
+
<section
|
|
285
|
+
class="background:whitesmoke padding-top:80px padding-bottom:40px">
|
|
286
|
+
<div class="max-width:90% margin:0px_auto">
|
|
287
|
+
<div
|
|
288
|
+
class="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse">
|
|
289
|
+
<div class="flex-grow:1 width:300px">
|
|
290
|
+
<video loop autoplay muted class="width:100%">
|
|
291
|
+
<source
|
|
292
|
+
type="video/mp4"
|
|
293
|
+
src="assets/cards.webm" />
|
|
294
|
+
</video>
|
|
295
|
+
</div>
|
|
296
|
+
<div
|
|
297
|
+
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
298
|
+
<h1
|
|
299
|
+
class="font-size:1.5rem text-transform:uppercase">
|
|
300
|
+
Collaborative Drag-n-Drop Builder
|
|
301
|
+
</h1>
|
|
302
|
+
<p class="margin-top:10px line-height:1.5">
|
|
303
|
+
We are in the process of using CoCreateJS
|
|
304
|
+
components to create an experimental NO Code
|
|
305
|
+
expereince. Every page of the adminUI can be
|
|
306
|
+
edited in the drag and drop builder.
|
|
307
|
+
CoCreate builder UI is completely
|
|
308
|
+
customizable and supports editing of any
|
|
309
|
+
html5 template. Can be modified, replaced or
|
|
310
|
+
used as an example to build your own custom
|
|
311
|
+
drang and drop builder.
|
|
312
|
+
</p>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</section>
|
|
317
|
+
|
|
318
|
+
<!-- Thirdparty API Intergration -->
|
|
319
|
+
<section class="padding-top:80px padding-bottom:40px">
|
|
320
|
+
<div class="max-width:90% margin:0px_auto">
|
|
321
|
+
<div
|
|
322
|
+
class="display:flex flex-wrap:wrap align-items:center">
|
|
323
|
+
<div class="flex-grow:1 width:300px">
|
|
324
|
+
<video loop autoplay muted class="width:100%">
|
|
325
|
+
<source
|
|
326
|
+
type="video/mp4"
|
|
327
|
+
src="assets/on-board-video.webm" />
|
|
328
|
+
</video>
|
|
329
|
+
</div>
|
|
330
|
+
<div
|
|
331
|
+
class="flex-grow:1 width:300px padding-left:15px padding-right:15px">
|
|
332
|
+
<h1
|
|
333
|
+
class="font-size:1.5rem text-transform:uppercase">
|
|
334
|
+
Thirdparty API Intergration
|
|
335
|
+
</h1>
|
|
336
|
+
<p class="margin-top:10px line-height:1.5">
|
|
337
|
+
We have put together a few thirdparty APIs
|
|
338
|
+
and developed them to be used and configured
|
|
339
|
+
with HTML5 attributes. Build custom flows
|
|
340
|
+
and logic without ever leaving the html
|
|
341
|
+
page... The CoCreate Way... Almost forgot,
|
|
342
|
+
Javascript developers still have access to
|
|
343
|
+
API, callbacks and events.
|
|
344
|
+
</p>
|
|
345
|
+
<p></p>
|
|
346
|
+
<!--<a class="text-decoration-underline padding:10px_30px background:#3690FF background:#3790FF:hover min-width:30% text-align:center color:#fff color:#ddd:hover transition:0.4s margin-top:30px display:inline-block">Sign Up Now</a>-->
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</section>
|
|
351
|
+
|
|
352
|
+
<button
|
|
353
|
+
href="https://github.com/CoCreate-app/CoCreate-website/tree/master/src/index.html?message=docs%3A%20describe%20your%20change..."
|
|
354
|
+
target="_blank"
|
|
355
|
+
class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
|
|
356
|
+
<i
|
|
357
|
+
class="height:20px fill:#505050"
|
|
358
|
+
src="/assets/svg/pencil-alt.svg"></i>
|
|
359
|
+
</button>
|
|
360
|
+
</main>
|
|
361
|
+
|
|
362
|
+
<!-- Footer -->
|
|
363
|
+
<footer
|
|
364
|
+
id="spreadtheword"
|
|
365
|
+
content_id="content"
|
|
366
|
+
class="padding:100px_0px background-size:cover background-position:center position:relative color:white"
|
|
367
|
+
style="background-image: url(/assets/banner.png)"
|
|
368
|
+
collection="components"
|
|
369
|
+
document_id="6092ebcc19ec8e58fc80c9e3"
|
|
370
|
+
name="html"></footer>
|
|
371
|
+
</div>
|
|
372
|
+
|
|
373
|
+
<!--CoCreateJS-->
|
|
374
|
+
<script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
|
|
375
|
+
</body>
|
|
376
|
+
</html>
|