|
11 | 11 | <meta name="robots" content="index,follow" />
|
12 | 12 |
|
13 | 13 | <!-- CoCreate CSS -->
|
14 |
| - <link rel="stylesheet" href="https://server.cocreate.app/css/CoCreate.min.css" type="text/css" /> |
| 14 | + <link rel="stylesheet" href="https://cdn.cocreate.app/latest/CoCreate.min.css" type="text/css" /> |
15 | 15 |
|
16 |
| - <!-- Font Awesome --> |
17 |
| - <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" crossorigin="anonymous" /> |
18 |
| - |
19 |
| - <!-- Codemirror --> |
20 |
| - <link rel="stylesheet" href="https://server.cocreate.app/CoCreate-plugins/CoCreate-codemirror/src/CoCreate-codemirror.css" type="text/css" /> |
21 |
| - <link rel=stylesheet href="https://codemirror.net/lib/codemirror.css" async defer> |
22 |
| - |
23 |
| - <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.21.0/themes/prism.min.css" rel="stylesheet" /> |
24 | 16 | </head>
|
25 | 17 |
|
26 | 18 | <body>
|
@@ -68,53 +60,28 @@ <h4><span>socket-server</span> <span class="cocreate-badge success">string</span
|
68 | 60 | </div>
|
69 | 61 |
|
70 | 62 | <div class="flex-grow:1 min-width:300px width:50% padding:0px_10px margin:20px_0px border-bottom:1px_solid_lightgrey">
|
71 |
| - <!-- SandBox --> |
72 |
| - <h2 class="border-bottom:1px_solid_lightgrey padding:5px_0px">Demo</h2> |
73 |
| - <div class="position:sticky top:0 padding:10px_0px height:100vh"> |
74 |
| - <div class="container svColumn overflow:hidden card border-radius:2px width:auto height:100%" id="sandbox"> |
75 |
| - <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6 z-index:7"> |
76 |
| - <a class="margin-right:10px" id="preview" show="preview" hide="code"><i class="far fa-eye"></i></a> |
77 |
| - <a class="margin-right:10px hidden" id="code" show="code" hide="preview"><i class="fas fa-code"></i></a> |
78 |
| - <!--<a class="margin-right:10px"><i class="far fa-window-maximize"></i></a>--> |
79 |
| - <a target="modal" href="module_activity_datatable.html" |
80 |
| - pass-collection="modules" |
81 |
| - pass-document_id="" |
82 |
| - pass-filter-value="" |
83 |
| - pass-prefix="" |
84 |
| - pass-to="render" |
85 |
| - modal-width="600px" |
86 |
| - modal-height="400px" |
87 |
| - modal-color="#229954" |
88 |
| - modal-header="false" |
89 |
| - class="margin-right:10px"> |
90 |
| - <i class="fas fa-external-link-alt"></i> |
91 |
| - </a> |
92 |
| - <a class="fs-toggle margin-right:5px" fullscreen target="#sandbox"><i class="fas fa-expand"></i></a> |
93 |
| - </div> |
94 |
| - |
95 |
| - <div class="svRow"> |
96 |
| - |
97 |
| - <div class="svColumn"> |
98 |
| - |
99 |
| - <div class="svPanel"> |
100 |
| - <div realtime="false" |
101 |
| - collection="modules" |
102 |
| - document_id="5eefe30952c6e94c75fb5e3f" |
103 |
| - name="html" |
104 |
| - id="7" |
105 |
| - class="codemirror height:100% min-width:300px"> |
106 |
| - </div> |
107 |
| - </div> |
108 |
| - <div class="svSplitter svHorizontal"> </div> |
109 |
| - |
110 |
| - <div class="svPanel"> |
111 |
| - <iframe get-value="7" frameBorder="0" height="100%" width="100%" class="min-width:300px"></iframe> |
112 |
| - </div> |
113 |
| - |
114 |
| - </div> |
115 |
| - </div> |
116 |
| - </div> |
117 |
| - <!-- End SandBox --> |
| 63 | + <!-- SandBox --> |
| 64 | + <div class="position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px" id="playground"> |
| 65 | + |
| 66 | + <div id="demo-code" resizable class="position:relative height:50%"> |
| 67 | + <textarea type="code" lang="html" collection="demos" document_id="" name="demo" save="false" id="demo" class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea> |
| 68 | + <div resize="bottom" class="background:lightgrey"></div> |
| 69 | + </div> |
| 70 | + |
| 71 | + <div id="demo-preview" class="position:relative display:flex height:100% background-color:white"> |
| 72 | + <div get-value="#demo" class="padding:20px"></div> |
| 73 | + </div> |
| 74 | + |
| 75 | + <div class="font-size:20px position:absolute top:10px right:10px opacity:0.6"> |
| 76 | + <a class="margin-right:10px" id="eye" show="#eye-slash" hide="#eye, #demo-preview" toggle="code-height" toggle-target="#demo-code"><i class="far fa-eye"></i></a> |
| 77 | + <a class="margin-right:10px" hidden id="eye-slash" show="#eye, #demo-preview" hide="#eye-slash" toggle="code-height" toggle-target="#demo-code"><i class="fas fa-eye-slash"></i></a> |
| 78 | + <a class="margin-right:10px" id="code" show="#code-slash" hide="#code, #demo-code"><i class="fa fa-code"></i></a> |
| 79 | + <a class="margin-right:10px" hidden id="code-slash" show="#code, #demo-code" hide="#code-slash"><i class="fas fa-code"></i></a> |
| 80 | + <a class="margin-right:5px" fullscreen target="#playground"><i class="fas fa-expand"></i></a> |
| 81 | + </div> |
| 82 | + |
| 83 | + </div> |
| 84 | + <!-- End SandBox --> |
118 | 85 | </div>
|
119 | 86 | </div>
|
120 | 87 |
|
|
0 commit comments