1
1
<!DOCTYPE html>
2
2
< html lang ="en ">
3
3
< head >
4
- < meta charset ="utf-8 " />
4
+ < meta charset ="UTF-8 " />
5
+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 " />
5
6
< meta http-equiv ="X-UA-Compatible " content ="IE=edge " />
6
- < meta name =" viewport " content =" width=device-width, initial-scale=1 " />
7
+
7
8
< title > CoCreateJS - Collaborative Html elements</ title >
8
9
< meta
9
10
name ="description "
10
11
content ="A codeless Javascript framework for building collaborative no code platforms, apps and UI " />
12
+
13
+ < meta name ="keywords " content ="web apps, AI, design, development " />
14
+ < meta name ="robots " content ="index, follow " />
15
+ < meta name ="author " content ="CoCreate " />
16
+ < meta name ="generator " content ="CoCreateJS " />
17
+
18
+ <!-- Canonical Tag -->
19
+ < link rel ="canonical " href ="https://cocreate.app " />
20
+
11
21
< link
12
22
rel ="icon "
13
23
type ="image/png "
14
24
sizes ="32x32 "
15
- href ="https://cocreate.app/images /favicon.ico " />
25
+ href ="../assets /favicon.ico " />
16
26
17
27
< link
18
28
rel ="stylesheet "
19
29
href ="../index.css "
20
30
array ="files "
21
31
object ="60888216117c640e7596303f "
22
32
key ="src "
23
- type ="text/css " />
33
+ type ="text/css "
34
+ parse ="true " />
24
35
25
36
<!-- Google tag (gtag.js) -->
26
37
< script
46
57
47
58
< body >
48
59
< nav
49
- class ="width:100% display:flex align-items:center background:transparent padding-top:10px padding-bottom:10px "
50
60
content_id ="content "
51
61
scroll ="sticky-nav, "
52
62
scroll-up ="5 "
53
63
scroll-down ="5 "
54
64
path ="../ "
55
65
src ="../components/navbar.html "> </ nav >
56
- < sidenav
57
- id ="menuL "
58
- class ="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl "
59
- resizable
60
- resize-selector ="[content_id='content'] "
61
- resize-property ="margin-left "
62
- resize-value ="width ">
63
- < menu
64
- array ="files "
65
- object ="603717b07de7fb350ae9fec8 "
66
- key ="src "> </ menu >
67
- < div resize ="right "> </ div >
68
- </ sidenav >
69
66
70
67
<!-- Modal Viewport/Boundaries -->
71
68
<!--<div class="position:fixed margin-top:50px" content_id="content" id="modal-viewport"></div>-->
72
69
73
70
<!-- Main Content -->
74
- < main class ="padding-top :15px padding:15px @lg@xl " content_id ="content ">
71
+ < main class ="padding:15px padding:25px @lg@xl " content_id ="content ">
75
72
< section >
76
73
< div
77
74
class ="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px ">
78
75
< div class ="display:flex align-items:center ">
79
76
< h2 > CoCreateJS</ h2 >
80
77
</ div >
81
78
< div
82
- class ="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white ">
79
+ class ="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px ">
83
80
< div
84
81
class ="display:flex align-items:center transition:0.3s padding-left:10px "
85
82
share-network ="true "
@@ -199,7 +196,7 @@ <h3 class="padding-top:20px">Input</h3>
199
196
key ="input-demo "
200
197
save ="false "
201
198
id ="input-demo "
202
- input-selector =".input-demo "
199
+ input-selector ="document; .input-demo "
203
200
input-attribute ="value "
204
201
input-events ="input, onload "
205
202
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -210,7 +207,7 @@ <h3 class="padding-top:20px">Input</h3>
210
207
211
208
< div
212
209
id ="input-demo-preview "
213
- class ="position:relative overflow:auto background-color:white ">
210
+ class ="position:relative overflow:auto ">
214
211
< div class ="input-demo padding:20px "> </ div >
215
212
</ div >
216
213
@@ -287,7 +284,7 @@ <h3 class="padding-top:20px">Textarea</h3>
287
284
key ="textarea-demo "
288
285
save ="false "
289
286
id ="textarea-demo "
290
- input-selector =".textarea-demo "
287
+ input-selector ="document; .textarea-demo "
291
288
input-attribute ="value "
292
289
input-events ="input, onload "
293
290
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -298,7 +295,7 @@ <h3 class="padding-top:20px">Textarea</h3>
298
295
299
296
< div
300
297
id ="textarea-demo-preview "
301
- class ="position:relative overflow:auto background-color:white ">
298
+ class ="position:relative overflow:auto ">
302
299
< div class ="textarea-demo padding:20px "> </ div >
303
300
</ div >
304
301
@@ -381,7 +378,7 @@ <h3 class="padding-top:20px">Contenteditable</h3>
381
378
key ="contenteditable-demo "
382
379
save ="false "
383
380
id ="contenteditable-demo "
384
- input-selector =".contenteditable-demo "
381
+ input-selector ="document; .contenteditable-demo "
385
382
input-attribute ="value "
386
383
input-events ="input, onload "
387
384
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -392,7 +389,7 @@ <h3 class="padding-top:20px">Contenteditable</h3>
392
389
393
390
< div
394
391
id ="contenteditable-demo-preview "
395
- class ="position:relative overflow:auto background-color:white ">
392
+ class ="position:relative overflow:auto ">
396
393
< div
397
394
class ="contenteditable-demo padding:20px "> </ div >
398
395
</ div >
@@ -472,7 +469,7 @@ <h3 class="padding-top:20px">Radio</h3>
472
469
key ="radio-demo "
473
470
save ="false "
474
471
id ="radio-demo "
475
- input-selector =".radio-demo "
472
+ input-selector ="document; .radio-demo "
476
473
input-attribute ="value "
477
474
input-events ="input, onload "
478
475
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -483,7 +480,7 @@ <h3 class="padding-top:20px">Radio</h3>
483
480
484
481
< div
485
482
id ="radio-demo-preview "
486
- class ="position:relative overflow:auto background-color:white ">
483
+ class ="position:relative overflow:auto ">
487
484
< div class ="radio-demo padding:20px "> </ div >
488
485
</ div >
489
486
@@ -561,7 +558,7 @@ <h3 class="padding-top:20px">Checkbox</h3>
561
558
key ="checkbox-demo "
562
559
save ="false "
563
560
id ="checkbox-demo "
564
- input-selector =".checkbox-demo "
561
+ input-selector ="document; .checkbox-demo "
565
562
input-attribute ="value "
566
563
input-events ="input, onload "
567
564
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -572,7 +569,7 @@ <h3 class="padding-top:20px">Checkbox</h3>
572
569
573
570
< div
574
571
id ="checkbox-demo-preview "
575
- class ="position:relative overflow:auto background-color:white ">
572
+ class ="position:relative overflow:auto ">
576
573
< div class ="checkbox-demo padding:20px "> </ div >
577
574
</ div >
578
575
@@ -649,7 +646,7 @@ <h3 class="padding-top:20px">Select</h3>
649
646
key ="select-demo "
650
647
save ="false "
651
648
id ="select-demo "
652
- input-selector =".select-demo "
649
+ input-selector ="document; .select-demo "
653
650
input-attribute ="value "
654
651
input-events ="input, onload "
655
652
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -660,7 +657,7 @@ <h3 class="padding-top:20px">Select</h3>
660
657
661
658
< div
662
659
id ="select-demo-preview "
663
- class ="position:relative overflow:auto background-color:white ">
660
+ class ="position:relative overflow:auto ">
664
661
< div class ="select-demo padding:20px "> </ div >
665
662
</ div >
666
663
@@ -743,7 +740,7 @@ <h3 class="padding-top:20px">Form</h3>
743
740
key ="form-demo "
744
741
save ="false "
745
742
id ="form-demo "
746
- input-selector =".form-demo "
743
+ input-selector ="document; .form-demo "
747
744
input-attribute ="value "
748
745
input-events ="input, onload "
749
746
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -754,7 +751,7 @@ <h3 class="padding-top:20px">Form</h3>
754
751
755
752
< div
756
753
id ="form-demo-preview "
757
- class ="position:relative overflow:auto background-color:white ">
754
+ class ="position:relative overflow:auto ">
758
755
< div class ="form-demo padding:20px "> </ div >
759
756
</ div >
760
757
@@ -854,7 +851,7 @@ <h3 class="padding-top:20px">Actions</h3>
854
851
key ="actions-demo "
855
852
save ="false "
856
853
id ="actions-demo "
857
- input-selector =".actions-demo "
854
+ input-selector ="document; .actions-demo "
858
855
input-attribute ="value "
859
856
input-events ="input, onload "
860
857
class ="height:100% width:100% outline:none border:none resize:none padding:5px "> </ textarea >
@@ -865,7 +862,7 @@ <h3 class="padding-top:20px">Actions</h3>
865
862
866
863
< div
867
864
id ="actions-demo-preview "
868
- class ="position:relative overflow:auto background-color:white ">
865
+ class ="position:relative overflow:auto ">
869
866
< div class ="actions-demo padding:20px "> </ div >
870
867
</ div >
871
868
@@ -1245,40 +1242,58 @@ <h4>
1245
1242
</ ul >
1246
1243
</ section >
1247
1244
</ div >
1248
- <!-- Previous & Next -->
1249
- < div
1250
- class ="padding:10px width:100% margin-top:20px display:flex flex-wrap:wrap justify-content:flex-start ">
1245
+
1246
+ <!-- Previous & Next -->
1247
+ < section
1248
+ class ="width:100% margin-top:20px display:flex flex-wrap:wrap ">
1251
1249
< div
1252
1250
class ="padding:30px_15px border:1px_solid_#ddd flex-basis:50% ">
1253
- < p class ="color:#888 "> Previous Topic</ p >
1254
- < p
1255
- class ="color:#000 margin-top:10px font-size:20px font-size:12px@xs line-height:27px ">
1256
- < a class ="color:#1877F2:hover " href ="#introduction "
1257
- > Getting started</ a
1258
- >
1251
+ < p > Previous Topic</ p >
1252
+ < p class ="font-size:20px font-size:12px@xs ">
1253
+ < a href ="#introduction "> Getting started</ a >
1259
1254
</ p >
1260
1255
</ div >
1261
1256
< div
1262
1257
class ="padding:30px_15px border:1px_solid_#ddd flex-basis:50% text-align:right ">
1263
- < p class ="color:#888 "> Next Topic</ p >
1264
- < p
1265
- class ="color:#000 margin-top:10px font-size:20px font-size:12px@xs line-height:27px ">
1266
- < a class ="color:#1877F2:hover " href ="./templating.html "
1258
+ < p > Next Topic</ p >
1259
+ < p class ="font-size:20px font-size:12px@xs ">
1260
+ < a href ="./templating.html "
1267
1261
> Fetch a list and render the data using a
1268
1262
template</ a
1269
1263
>
1270
1264
</ p >
1271
1265
</ div >
1272
- </ div >
1266
+ </ section >
1267
+
1273
1268
< button
1274
1269
href ="https://github.com/CoCreate-app/CoCreateJS/tree/master/docs/elements.html?message=docs%3A%20describe%20your%20change... "
1275
1270
target ="_blank "
1276
- class ="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4) ">
1277
- < i class =" height:20px " src ="../assets/svg/pencil-alt.svg "> </ i >
1271
+ class ="button-round ">
1272
+ < i src ="../assets/svg/pencil-alt.svg "> </ i >
1278
1273
</ button >
1279
1274
</ main >
1280
1275
1281
- < script src ="https://CoCreate.app/dist/CoCreate.js "> </ script >
1276
+ <!-- Footer -->
1277
+ < footer
1278
+ id ="spreadtheword "
1279
+ content_id ="content "
1280
+ path ="../ "
1281
+ src ="../components/footer.html "
1282
+ class ="margin-left:0px!important@xs@sm@md "> </ footer >
1283
+
1284
+ <!-- Sidenav -->
1285
+ < sidenav
1286
+ id ="menuL "
1287
+ class ="top:0px left:0px width:0px width:300px@xl "
1288
+ resizable
1289
+ resize-selector ="document; main, document; nav, document; footer "
1290
+ resize-attribute ="style "
1291
+ resize-property ="margin-left ">
1292
+ < menu path ="../ " src ="./components/menu.html "> </ menu >
1293
+ < div resize ="right "> </ div >
1294
+ </ sidenav >
1295
+
1296
+ < script src ="../dist/CoCreate.js "> </ script >
1282
1297
<!-- <script src="../dist/CoCreate.js"></script> -->
1283
1298
</ body >
1284
1299
</ html >
0 commit comments