@cocreate/cocreatejs
Version:
A collaborative low code headless CMS and Javascript framework for building collaborative no code platforms, apps and UI's. Build powerful applications using HTML5 attributes or Javascript api.
691 lines (648 loc) • 24 kB
HTML
<style>
.hide-nav ~ #menuL {
margin-top: 0px;
max-height: -moz-available;
max-height: -webkit-fill-available;
max-height: fill-available;
will-change: transform;
transition: background 0.3s,
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
background 0.3s;
transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1),
background 0.3s,
-webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
transform: translateY(0);
-webkit-transform: translateY(0);
}
.system-status {
position: absolute;
overflow: hidden;
right: 30px;
top: 30px;
/*display: flex;*/
height: 12px;
width: 12px;
border: 2px solid #f7f7f7;
border-radius: 50%;
background-color: yellowgreen;
transition: 0.3s;
color: white;
word-wrap: none;
}
.system-status:hover {
position: absolute;
right: 0px;
top: 0px;
height: 100%;
width: 100%;
border-radius: 0%;
border: 0px solid #f7f7f7;
padding: 25px 20px;
}
.system-status.up::before {
content: "System up";
background-color: yellowgreen;
padding: 25px;
}
.system-status.down:hover {
background-color: #f44336;
}
.system-status.down::before {
content: "System Outage";
background-color: #f44336;
padding: 25px;
}
</style>
<div
class="width:100%"
resize-attribute="menu-icon"
resize-value="active"
resize-if="300px"
resize-selector="document; [menu-icon][]"></div>
<div
class="width:100%"
resize-attribute="menu-icon"
resize-value="false"
resize-if="50px"
resize-selector="document; [menu-icon][]"></div>
<div
class="width:100%"
resize-attribute="menu-icon"
resize-value="false"
resize-if="0px"
resize-selector="document; [menu-icon][]"></div>
<div
class="nav display:flex justify-content:space-between align-items:center padding:13px">
<!-- Logo -->
<a
href="{{path}}"
class="display:flex align-items:center gap:10px font-size:28px font-weight:bold">
<img src="{{path}}assets/icon.png" height="50px" alt="icon logo" />
<span>Co<span class="color:#1e90ff">Create</span></span>
</a>
<!-- Menu Icon -->
<a
menu-icon
toggle="width:0px,"
toggle-selector="document; #menuL"
toggle-attribute="style">
<span></span>
<span></span>
<span></span>
</a>
</div>
<!--Logo -->
<!-- <div
class="display:flex position:relative background:gainsboro padding-top:10px padding-bottom:10px">
<a href="{{path}}" class="display:block padding:13px background:gainsboro">
<img src="{{path}}assets/logo.png" height="40px" />
</a>
<div class="system-status up"></div>
</div> -->
<!--Search -->
<!-- <div class="cocreate-search padding:5px height:50px">
<form id="menu-search">
<input
type="text"
class="searchInput floating-label browser-default"
state_to="me1234" />
<span
class="position:relative bottom:28px right:14px float:right font-size:18px">
<a
actions="state, openModal"
modal-src="template-engine"
state_to="me1234"
modal-width="900px"
modal-height="100%"
modal-color="#229954"
modal-header="true"
modal-x=""
modal-y="">
<i src="/assets/svg/search.svg"></i>
</a>
</span>
</form>
</div> -->
<div class="padding-top:60px padding-right:5px">
<ul
class="overflow:auto display:flex flex-direction:column width:100% height:calc(100vh_-_140px) bottom:10px margin-right:5px">
<!--Navigation -->
<div class="display:none@md@lg@xl">
<!-- <li class="padding-right:10px font-size:20px line-height:40px height:40px">
<a href="/#features" class="padding-left:15px >Features</a>
</li> -->
<li
class="padding-right:10px font-size:20px line-height:40px height:40px">
<a href="/docs/" class="padding-left:15px">Docs</a>
</li>
<!-- <li class="padding-right:10px font-size:20px line-height:40px height:40px">
<a href="/blog/" class="padding-left:15px ">Blog</a>
</li>
<li class="padding-right:10px font-size:20px line-height:40px height:40px">
<a href="/discuss/" class="padding-left:15px ">Discuss</a>
</li>
<li class="padding-right:10px font-size:20px line-height:40px height:40px">
<a href="/university/" class="padding-left:15px ">University</a>
</li> -->
<hr />
</div>
<li
class="padding-right:10px font-size:20px line-height:40px height:40px">
<a
class="padding-left:15px width:100%"
show=".gettingstarted"
hide=".gettingstarted">
<span>Getting Started</span>
<span class="float:right"
><i class="fas fa-chevron-down gettingstarted" hidden></i
><i class="fas fa-chevron-up gettingstarted"></i
></span>
</a>
</li>
<div class="padding-bottom:20px gettingstarted">
<li class="padding-left:30px">
<a href="/docs/#introductions">
<span>Introduction</span>
</a>
</li>
<!-- <li class="padding-left:30px">
<a href="/docs/#keys">
<span >API Keys</span>
</a>
</li> -->
<li class="padding-left:30px">
<a href="#cdn">
<span>CDN</span>
</a>
</li>
</div>
<li class="padding-right:10px font-size:20px">
<a
class="padding-left:15px width:100%"
show=".cocreatejs"
hide=".cocreatejs">
<span>CoCreateJS</span>
<span class="float:right"
><i class="fas fa-chevron-down cocreatejs" hidden></i
><i class="fas fa-chevron-up cocreatejs"></i
></span>
</a>
</li>
<div class="padding-bottom:20px cocreatejs">
<li class="padding-left:30px">
<a href="/docs/elements.html">
<span id="collaboration-item" class="font-weight:600"
>Collaborative Elements</span
>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#input">
<span id="input-item">Input</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#textarea">
<span id="textarea-item">Textarea</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#contenteditable">
<span id="contenteditable-item">Contenteditable</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#radio">
<span id="radio-item">Radio</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#checkbox">
<span id="checkbox-item">Checkbox</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#select">
<span id="select-item">Select</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#form">
<span id="form-item">Form</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/elements.html#actions">
<span id="action-item">Actions</span>
</a>
</li>
<li class="margin-top:20px padding-left:30px">
<a href="/docs/templating.html">
<span id="templating-item" class="font-weight:600"
>Templating</span
>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/templating.html#fetch">
<span id="fetch-item">Fetch</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/templating.html#filter">
<span id="filter-item">Filter</span>
</a>
</li>
<!-- <li class="padding-left:45px">
<a href="/docs/templating.html#render">
<span >Render</span>
</a>
</li> -->
<li class="margin-top:20px padding-left:30px">
<a href="/docs/logic.html">
<span id="logic-item" class="font-weight:600">Logic</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/logic.html#state-attributes">
<span id="state-attributes-item">State Attributtes</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/logic.html#state-values">
<span id="state-values-item">State Values</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/logic.html#conditional-logic">
<span id="conditional-logic-item">Conditional Logic</span>
</a>
</li>
<li class="margin-top:20px padding-left:30px">
<a href="/docs/user-management.html">
<span id="user-item" class="font-weight:600"
>User Management</span
>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/user-management.html#signUp">
<span id="signUp-item">Sign Up</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/user-management.html#signIn">
<span id="signIn-item">Sign In</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/user-management.html#signOut">
<span id="signOut-item">Sign Out</span>
</a>
</li>
<li class="margin-top:20px padding-left:30px">
<a href="/docs/objects.html#crud_objects">
<span class="font-weight:600">CRUD API</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crud_create">
<span>Create</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crud_read">
<span>Read</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crud_update">
<span>Update</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crud_delete">
<span>Delete</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crud_readlist">
<span>List</span>
</a>
</li>
<li class="margin-top:20px padding-left:30px">
<a href="/docs/objects.html#crdt-objects">
<span class="font-weight:600">CRDT API</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crdt-init">
<span>Init</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crdt-get">
<span>Get</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crdt-update">
<span>Update</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#crdt-replace">
<span>Replace</span>
</a>
</li>
<li class="margin-top:20px padding-left:30px">
<a href="/docs/objects.html#websocket-objects">
<span class="font-weight:600">WebSocket API</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#websocket-create">
<span>Create</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#websocket-send">
<span>Send</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/objects.html#websocket-listen">
<span>Listen</span>
</a>
</li>
</div>
<li class="padding-right:10px font-size:20px" hidden>
<a
class="padding-left:15px width:100%"
show=".cocreatecss"
hide=".cocreatecss">
<span>CoCreateCSS</span>
<span class="float:right"
><i class="fas fa-chevron-down cocreatecss"></i
><i class="fas fa-chevron-up cocreatecss" hidden></i
></span>
</a>
</li>
<div id="" class="cocreatecss" hidden>
<li class="padding-left:30px">
<a href="/docs/utility">
<span>Utility Classes</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/navbar">
<span>Nav</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/sidenav">
<span>Sidenav</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/modal">
<span>Modal</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/floating-label">
<span>Floating Label</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/scroll">
<span>Scroll</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/fullscreen">
<span>Fullscreen</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/cards">
<span>Cards</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/avatar">
<span>Avatar</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/menu-icons">
<span>Menu Icons</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/parallax">
<span>Parallax</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/splitview">
<span>Splitview</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/overlay-scroll">
<span>Overlay Scroll</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/flip-item">
<span>Flip Item</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/random-color">
<span>Random Color</span>
</a>
</li>
</div>
<li class="padding-right:10px font-size:20px" hidden>
<a
class="padding-left:15px width:100%"
show=".modules"
hide=".modules">
<span>Components</span>
<span class="float:right"
><i class="fas fa-chevron-down modules"></i
><i class="fas fa-chevron-up modules" hidden></i
></span>
</a>
</li>
<div class="padding-bottom:20px modules" hidden>
<li class="padding-left:30px">
<a href="/docs/actions">
<span class="font-weight:600">Actions</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/api">
<span class="font-weight:600">Api</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/attributes">
<span class="font-weight:600">Attributes</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/form">
<span class="font-weight:600">Form</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/clone">
<span class="font-weight:600">Clone</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/dnd">
<span class="font-weight:600">Drag and Drop</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/calculate">
<span class="font-weight:600">Calculates</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/social-share">
<span class="font-weight:600">Select</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/progress">
<span class="font-weight:600">Progress</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/room">
<span>Room</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/social-share">
<span class="font-weight:600">Social Share</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/vdom">
<span class="font-weight:600">vDOM</span>
</a>
</li>
</div>
<li class="padding-right:10px font-size:20px display:none">
<a
class="padding-left:15px width:100%"
show=".modules"
hide=".modules">
<span>Modules</span>
<span class="float:right"
><i class="fas fa-chevron-down modules"></i
><i class="fas fa-chevron-up modules" hidden></i
></span>
</a>
</li>
<div class="padding-bottom:20px modules" hidden>
<li class="padding-left:30px">
<a href="/docs/search">
<span>Builder</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/datatable">
<span>Datatables</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/kanban">
<span>Kanban</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/progress-bar">
<span>Progress Bar</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/email">
<span>E-mail</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/search">
<span>Search</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/datatable">
<span>Select</span>
</a>
</li>
</div>
<li class="padding-right:10px font-size:20px display:none">
<a
class="padding-left:15px width:100%"
show=".plugins"
hide=".plugins">
<span>Plugins</span>
<span class="float:right"
><i class="fas fa-chevron-down plugins"></i
><i class="fas fa-chevron-up plugins" hidden></i
></span>
</a>
</li>
<div class="padding-bottom:20px plugins" hidden>
<li class="padding-left:30px">
<a href="/docs/charts">
<span>Charts</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/fullcalendar">
<span>Full Calendar</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/fullcalendar">
<span>Calendar Attributes</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/fullcalendar">
<span>Calendar Views</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/stripe">
<span>Stripe</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/stripe">
<span>Stripe Attributes</span>
</a>
</li>
<li class="padding-left:30px">
<a href="/docs/google-maps">
<span>Google Maps</span>
</a>
</li>
<li class="padding-left:45px">
<a href="/docs/google-maps">
<span>Map Attributes</span>
</a>
</li>
</div>
</ul>
</div>