6
6
< meta name ="viewport " content ="width=device-width, initial-scale=1 ">
7
7
< title > CoCreateCSS - A utility first, atomic CSS framework</ title >
8
8
< meta name ="description " content ="A Low-code JavaScript framework for building collaborative No-code platforms, apps and UI ">
9
- < link rel ="icon " type ="image/png " sizes ="32x32 " href ="https://cdn. cocreate.app/favicon.ico ">
9
+ < link rel ="icon " type ="image/png " sizes ="32x32 " href ="https://cocreate.app/images /favicon.ico ">
10
10
11
11
<!-- CoCreate CSS -->
12
- < link rel ="stylesheet " href ="https://cdn .cocreate.app/latest/ CoCreate.min .css " type ="text/css " />
12
+ < link rel ="stylesheet " href ="https://server .cocreate.app/CoCreateJS/dist/ CoCreate.css " type ="text/css " />
13
13
14
- <!-- Font Awesome -->
15
- < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css " crossorigin ="anonymous " />
16
-
17
- <!-- Codemirror -->
18
- <!--<link rel="stylesheet" href="https://server.cocreate.app/CoCreate-plugins/CoCreate-codemirror/src/CoCreate-codemirror.css" type="text/css" />-->
19
- < link rel =stylesheet href ="https://codemirror.net/lib/codemirror.css " async defer >
20
-
21
14
</ head >
22
15
< style type ="text/css " media ="screen ">
23
16
/*Sidenav Search Field */
40
33
</ style >
41
34
42
35
< body >
43
- < navbar class ="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px " data-main_content_id ="content " data-scroll ="sticky-nav,hide-nav " data-scroll_up ="10 " data-scroll_down ="10 " data-collection ="components " data-document_id ="60395ef42b3ac232657040fd " name ="html ">
44
- </ navbar >
45
- < sidenav id ="menuL " class ="cocreate-sidenav background:whitesmoke " data-main_content ="content " sidenav-default_desktop ="expanded " sidenav-default_tablet ="offcanvas " sidenav-ontoggle_desktop ="offcanvas " sidenav-ontoggle_tablet ="expanded ">
46
- < menu data-collection ="components " data-document_id ="603717b07de7fb350ae9fec8 " name ="html "> </ menu >
47
- < div class ="resizeHandler "> </ div >
48
- </ sidenav >
49
36
50
37
<!-- Navbar -->
51
- < nav class ="nav display:flex align-items:center padding-top:10px padding-bottom:10px background:whitesmoke "
52
- data-main_content_id ="content "
53
- data-scroll ="sticky-nav,hide-nav "
54
- data-scroll_up ="10 "
55
- data-scroll_down ="10 ">
56
-
57
- <!-- Logo -->
58
- < a href ="./index.html " class ="height:50px padding:5px_10px_5px_20px display:none@xs@sm@md ">
59
- < img data-collection ="organizations " data-document_id ="" name ="logo " src ="https://cdn.cocreate.app/logo.png " height ="40px " />
60
- </ a >
61
-
62
- <!-- Menu Icon -->
63
- < a class ="menu_icon display:none@md@lg@xl " data-toggle ="active " data-toggle_sidenav ="menuL ">
64
- < span > </ span >
65
- < span > </ span >
66
- < span > </ span >
67
- </ a >
68
-
69
- <!-- Icon Logo -->
70
- < a href ="./index.html " class ="height:50px padding:5px_12px display:none@lg@xl ">
71
- < img data-collection ="organizations " data-document_id ="" name ="icon-logo " src ="images/icon.png " height ="40px " alt ="icon logo ">
72
- </ a >
73
-
74
- <!-- Navigation -->
75
- < div class ="display:flex align-items:center overflow:overlay height:50px width:100% color:#555 margin-left:15px padding-top:3px display:none!important@xs@sm ">
76
- < a href ="./index.html#features " class ="margin-right:25px color:dodgerblue:hover "> FEATURES</ a >
77
- < a href ="./elements.html " class ="margin-right:25px color:dodgerblue:hover "> DOCS</ a >
78
- < a href ="./blog.html " class ="margin-right:25px color:dodgerblue:hover "> BLOG</ a >
79
- < a href ="./discuss.html " class ="margin-right:25px color:dodgerblue:hover "> DISCUSS</ a >
80
- < a href ="./university.html " class ="margin-right:25px color:dodgerblue:hover "> UNIVERSITY</ a >
81
- </ div >
82
-
83
- <!-- Horizontal Scroll Nav/Tabs -->
84
- < div class ="display:flex direction:rtl overflow:overlay align-items:center width:400px width:100%@xs@sm height:50px padding-right:10px font-size:20px ">
85
-
86
- <!-- Social Share -->
87
- < div class ="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white ">
88
- < div class ="display:flex align-items:center transition:0.3s padding-left:10px " data-share_network ="true " data-share_text ="Enter decription here " data-share_title ="testing im a title " data-share_height ="600 " data-share_width ="700 " data-share_media ="https://cdn.cocreate.app/docs/boilerplate.png ">
89
- < a href ="https://github.com/CoCreate-app " target ="_blank " class ="margin-right:15px "> < i class ="fab fa-github "> </ i > </ a >
90
- < a href ="https://twitter.com/CoCreate_App " target ="_blank " class ="margin-right:15px "> < i class ="fab fa-twitter "> </ i > </ a >
91
- < a href ="https://www.facebook.com/CoCreate.apps " target ="_blank " class ="margin-right:15px "> < i class ="fab fa-facebook "> </ i > </ a >
92
- < a href ="https://www.instagram.com/cocreate_app/ " target ="_blank " class ="margin-right:15px "> < i class ="fab fa-instagram "> </ i > </ a >
93
- </ div >
94
-
95
- <!-- fullscreen toogle and icon transform-->
96
- < a class ="margin-right:15px " data-fullscreen > < i data-transform_to ="fas fa-compress " class ="fas fa-expand "> </ i > </ a >
97
-
98
- </ div >
99
-
100
- <!-- Avatar -->
101
- < div class ="avatar-wrapper margin:5px_0px margin-right:10px ">
102
- < a class ="avatar round " target ="modal " href ="https://server.cocreate.app/CoCreate-adminUI/user-profile/user-profile.html "
103
- data-pass_collection ="modules "
104
- data-pass_prefix =""
105
- data-pass_document_id ="5dd010bccbc25f0cdb1a4d9f "
106
- data-pass_to ="render "
107
- data-modal_width ="300px "
108
- data-modal_height ="375px "
109
- data-modal_color ="#229954 "
110
- data-modal_header ="false ">
111
- < span data-collection ="users "
112
- data-document_id =""
113
- name ="name "
114
- class ="sessionUser_Id avatar-name ">
115
- < i class ="fas fa-sign-in-alt "> </ i >
116
- </ span >
117
- < span data-collection ="users " data-document_id ="" name ="profile_image " class ="sessionUser_Id avatar-image ">
118
- < img src ="images/Velazquez.jpg " onerror ="this.style.display='none' "/>
119
- </ span >
120
- </ a >
121
- < div class ="avatar-status off "> </ div >
122
- </ div >
123
-
38
+ < nav class ="nav display:flex align-items:center background:whitesmoke padding-top:10px padding-bottom:10px " data-main_content_id ="content " data-scroll ="sticky-nav,hide-nav " data-scroll_up ="10 " data-scroll_down ="10 " data-collection ="components " data-document_id ="60395ef42b3ac232657040fd " name ="html ">
124
39
</ nav >
125
40
126
41
<!-- SideNav Left-->
144
59
<!-- Navigation -->
145
60
< div class ="color:#212121 text-transform:uppercase ">
146
61
< a href ="./index.html#features " class ="display:block color:dodgerblue:hover padding:12px_24px "> Features</ a >
147
- < a href ="./elements " class ="display:block color:dodgerblue:hover padding:12px_24px "> Docs</ a >
62
+ < a href ="./docs// elements " class ="display:block color:dodgerblue:hover padding:12px_24px "> Docs</ a >
148
63
< a href ="./blog " class ="display:block color:dodgerblue:hover padding:12px_24px "> Blog</ a >
149
64
< a href ="./discuss.html " class ="display:block color:dodgerblue:hover padding:12px_24px "> Discuss</ a >
150
65
< a href ="./university.html " class ="display:block color:dodgerblue:hover padding:12px_24px "> University</ a >
161
76
< section class ="padding-top:80px padding-bottom:40px ">
162
77
< div class =" max-width:90% margin:0px_auto ">
163
78
< div class ="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse ">
164
- < div class ="flex-grow:1 width:300px ">
79
+ < div class ="flex-grow:1 min- width:300px width:50% ">
165
80
< video loop autoplay muted class ="width:100% ">
166
81
< source src ="images/dashboard-video.mp4 " type ="video/mp4 ">
167
82
</ video >
168
83
</ div >
169
- < div class ="flex-grow:1 width:300px padding:0px_15px font-size:16px ">
84
+ < div class ="flex-grow:1 min- width:300px width:50% padding:0px_15px font-size:16px ">
170
85
< h1 class ="font-size:2rem "> A Utility First, < span class ="color:dodgerblue "> Atomic CSS Framework</ span > </ h1 >
171
86
< span class ="font-size:16px margin-top:10px "> For Building Collaborative Apps, Platforms and UI's</ span >
172
87
<!--<p class="margin-top:10px">HTML and CSS, No JS Required...</p>-->
@@ -205,12 +120,12 @@ <h1 class="font-size:2rem">A Utility First, <span class="color:dodgerblue">Atom
205
120
< section class ="padding-top:80px padding-bottom:40px " id ="features ">
206
121
< div class ="max-width:90% margin:0px_auto ">
207
122
< div class ="display:flex flex-wrap:wrap align-items:center ">
208
- < div class ="flex-grow:1 width:300px ">
123
+ < div class ="flex-grow:1 min- width:300px width:50% ">
209
124
< video loop autoplay muted class ="width:100% ">
210
125
< source type ="video/mp4 " src ="images/on-board-video.webm ">
211
126
</ video >
212
127
</ div >
213
- < div class ="flex-grow:1 width:300px padding-left:15px padding-right:15px ">
128
+ < div class ="flex-grow:1 min- width:300px width:50% padding-left:15px padding-right:15px ">
214
129
< h1 class ="font-size:1.5rem text-transform:uppercase "> Micro Component Architecture</ h1 >
215
130
< p class ="margin-top:10px line-height:1.5 "> Vanilla javascript, lightweight, single purpose micro components. Easily modify, remove and/or replace components. Highly configuarable using HTML5 data-attributes. HTML5 developers can use a combination of data-attributes to create a dynamic experience. Javascript developers still have access to API, callbacks and events.</ p >
216
131
< p > </ p >
@@ -224,12 +139,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Micro Component Architectu
224
139
< section class ="background:whitesmoke padding-top:80px padding-bottom:40px ">
225
140
< div class ="max-width:90% margin:0px_auto ">
226
141
< div class ="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse ">
227
- < div class ="flex-grow:1 width:300px ">
142
+ < div class ="flex-grow:1 min- width:300px width:50% ">
228
143
< video loop autoplay muted class ="width:100% ">
229
144
< source type ="video/mp4 " src ="images/cards.webm ">
230
145
</ video >
231
146
</ div >
232
- < div class ="flex-grow:1 width:300px padding-left:15px padding-right:15px ">
147
+ < div class ="flex-grow:1 min- width:300px width:50% padding-left:15px padding-right:15px ">
233
148
< h1 class ="font-size:1.5rem text-transform:uppercase "> Collaborative Headless CMS</ h1 >
234
149
< p class ="margin-top:10px line-height:1.5 "> A lighting fast headless CMS over websocket, providing CRUD and CRDT functionality. Create, Read, Update, Delete and Filter lists. Collaborate on Text, DOM and Objects. Configure using HTML5 data-attibutes. Supports offline editing and user cursor positions in Inputs, Textareas, Rich Text Editors and Code Editors. But of course... Javascript developers still have access to API, callbacks and events.</ p >
235
150
< 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 "> Get Your API Key</ a >
@@ -242,12 +157,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Collaborative Headless CMS
242
157
< section class ="padding-top:80px padding-bottom:40px ">
243
158
< div class ="max-width:90% margin:0px_auto ">
244
159
< div class ="display:flex flex-wrap:wrap align-items:center ">
245
- < div class ="flex-grow:1 width:300px ">
160
+ < div class ="flex-grow:1 min- width:300px width:50% ">
246
161
< video loop autoplay muted class ="width:100% ">
247
162
< source type ="video/mp4 " src ="images/on-board-video.webm ">
248
163
</ video >
249
164
</ div >
250
- < div class ="flex-grow:1 width:300px padding-left:15px padding-right:15px ">
165
+ < div class ="flex-grow:1 min- width:300px width:50% padding-left:15px padding-right:15px ">
251
166
< h1 class ="font-size:1.5rem text-transform:uppercase "> Fully Customizable Admin Panel</ h1 >
252
167
< p class ="margin-top:10px line-height:1.5 "> HTML5 Admin dashboard UI powered by CoCreateJS. It is 100% editable and used to manage and create views for your data and content. Use it as a Collaborative CRM, CMS and ERP. Can be modified, replaced or used as an example to build your own custom HTML5 admin dashboard.</ p >
253
168
< p > </ p >
@@ -261,12 +176,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Fully Customizable Admin P
261
176
< section class ="background:whitesmoke padding-top:80px padding-bottom:40px ">
262
177
< div class ="max-width:90% margin:0px_auto ">
263
178
< div class ="display:flex flex-wrap:wrap align-items:center flex-direction:row-reverse ">
264
- < div class ="flex-grow:1 width:300px ">
179
+ < div class ="flex-grow:1 min- width:300px width:50% ">
265
180
< video loop autoplay muted class ="width:100% ">
266
181
< source type ="video/mp4 " src ="images/cards.webm ">
267
182
</ video >
268
183
</ div >
269
- < div class ="flex-grow:1 width:300px padding-left:15px padding-right:15px ">
184
+ < div class ="flex-grow:1 min- width:300px width:50% padding-left:15px padding-right:15px ">
270
185
< h1 class ="font-size:1.5rem text-transform:uppercase "> Collaborative Drag-n-Drop Builder</ h1 >
271
186
< p class ="margin-top:10px line-height:1.5 "> We are in the process of using CoCreateJS components to create an experimental NO Code expereince. Every page of the adminUI can be edited in the drag and drop builder. CoCreate builder UI is completely customizable and supports editing of any html5 template. Can be modified, replaced or used as an example to build your own custom drang and drop builder.</ p >
272
187
</ div >
@@ -278,12 +193,12 @@ <h1 class="font-size:1.5rem text-transform:uppercase">Collaborative Drag-n-Drop
278
193
< section class ="padding-top:80px padding-bottom:40px ">
279
194
< div class ="max-width:90% margin:0px_auto ">
280
195
< div class ="display:flex flex-wrap:wrap align-items:center ">
281
- < div class ="flex-grow:1 width:300px ">
196
+ < div class ="flex-grow:1 min- width:300px width:50% ">
282
197
< video loop autoplay muted class ="width:100% ">
283
198
< source type ="video/mp4 " src ="images/on-board-video.webm ">
284
199
</ video >
285
200
</ div >
286
- < div class ="flex-grow:1 width:300px padding-left:15px padding-right:15px ">
201
+ < div class ="flex-grow:1 min- width:300px width:50% padding-left:15px padding-right:15px ">
287
202
< h1 class ="font-size:1.5rem text-transform:uppercase "> Thirdparty API Intergration</ h1 >
288
203
< p class ="margin-top:10px line-height:1.5 "> We have put together a few thirdparty APIs and developed them to be used and configured with HTML5 data-attributes. Build custom flows and logic without ever leaving the html page... The CoCreate Way... Almost forgot, Javascript developers still have access to API, callbacks and events.</ p >
289
204
< p > </ p >
@@ -302,7 +217,7 @@ <h1 class="text-align:center">SPREAD THE WORD!</h1>
302
217
303
218
< div class ="margin:20px_30px padding-bottom:20px font-size:21px border-bottom:1px_solid_white ">
304
219
<!-- Social Share -->
305
- < div class ="display:flex justify-content:center " data-share_network =" true " data-share_text =" Enter decription here " data-share_title =" testing im a title " data-share_height =" 600 " data-share_width =" 700 " data-share_media ="https://cdn.cocreate.app/docs/boilerplate .png ">
220
+ < div class ="display:flex justify-content:center social_share " data-height =" 600 " data-width =" 500 " data-media ="https://via.placeholder.com/300/09f/fff .png ">
306
221
< a href ="https://twitter.com/CoCreate_App " target ="_blank " class ="margin:15px color:white "> < i class ="fab fa-twitter "> </ i > </ a >
307
222
< a href ="https://www.facebook.com/CoCreate.apps/ " target ="_blank " class ="margin:15px color:white "> < i class ="fab fa-facebook "> </ i > </ a >
308
223
< a href ="https://www.instagram.com/cocreate_app/ " target ="_blank " class ="margin:15px color:white "> < i class ="fab fa-instagram "> </ i > </ a >
@@ -316,11 +231,17 @@ <h1 class="text-align:center">SPREAD THE WORD!</h1>
316
231
</ div >
317
232
</ footer >
318
233
319
- < script src ="./apikey.js "> </ script >
320
- < script src ="https://cdn.cocreate.app/latest/CoCreate.min.js " > </ script >
321
-
322
-
323
-
234
+ < script >
235
+ var config = {
236
+ apiKey : 'c2b08663-06e3-440c-ef6f-13978b42883a' ,
237
+ organization_Id : '5de0387b12e200ea63204d6c' ,
238
+ host : 'wss://server.cocreate.app:8088'
239
+ }
240
+ </ script >
241
+
242
+ <!--CoCreateJS-->
243
+ <!--<script src="https://cdn.cocreate.app/latest/CoCreate.min.js" ></script>-->
244
+ < script src ="https://server.cocreate.app/CoCreateJS/dist/CoCreate.js " > </ script >
324
245
325
246
</ body >
326
247
</ html >
0 commit comments