Hugging Face's logo

Spaces:
DMTuit
/
psy_vk2
Sleeping

App Files Community
DmitrMakeev commited on
Commit
44597da
·
verified ·
1 Parent(s): a8ce2b2

Create builder2.html

Browse files
Files changed (1) hide show
  1. builder2.html +83 -0
builder2.html ADDED
@@ -0,0 +1,83 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>GrapesJS with Basic Blocks</title>
6
+ <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
7
+ <script src="https://unpkg.com/grapesjs"></script>
8
+ <script src="path/to/grapesjs-blocks-basic.min.js"></script>
9
+ <style>
10
+ body, html {
11
+ height: 100%;
12
+ margin: 0;
13
+ }
14
+ </style>
15
+ </head>
16
+ <body>
17
+ <div id="gjs" style="height:0px; overflow:hidden;">
18
+ <div class="panel">
19
+ <h1 class="welcome">Welcome to</h1>
20
+ <div class="big-title">
21
+ <svg class="logo" viewBox="0 0 100 100">
22
+ <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
23
+ </svg>
24
+ <span>GrapesJS</span>
25
+ </div>
26
+ <div class="description">
27
+ This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
28
+ copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
29
+ </div>
30
+ <button class="add-button">Ещё добавь</button>
31
+ </div>
32
+ </div>
33
+
34
+ <script type="text/javascript">
35
+ var editor = grapesjs.init({
36
+ fromElement: 1,
37
+ container: "#gjs",
38
+ plugins: ["gjs-blocks-basic"],
39
+ pluginsOpts: {
40
+ "gjs-blocks-basic": {
41
+ blocks: ['column1', 'column2', 'column3', 'column3-7'],
42
+ category: 'Basic',
43
+ flexGrid: false,
44
+ stylePrefix: 'gjs-',
45
+ addBasicStyle: true,
46
+ labelColumn1: '1 Column',
47
+ labelColumn2: '2 Columns',
48
+ labelColumn3: '3 Columns',
49
+ labelColumn37: '2 Columns 3/7',
50
+ rowHeight: 75
51
+ }
52
+ }
53
+ });
54
+
55
+ editor.BlockManager.add('welcome-block', {
56
+ label: 'Welcome Title',
57
+ content: `<h1 class="welcome">Welcome to</h1>`
58
+ });
59
+
60
+ editor.BlockManager.add('big-title-block', {
61
+ label: 'Big Title',
62
+ content: `
63
+ <div class="big-title">
64
+ <svg class="logo" viewBox="0 0 100 100">
65
+ <path d="M40 5l-12.9 7.4 -12.9 7.4c-1.4 0.8-2.7 2.3-3.7 3.9 -0.9 1.6-1.5 3.5-1.5 5.1v14.9 14.9c0 1.7 0.6 3.5 1.5 5.1 0.9 1.6 2.2 3.1 3.7 3.9l12.9 7.4 12.9 7.4c1.4 0.8 3.3 1.2 5.2 1.2 1.9 0 3.8-0.4 5.2-1.2l12.9-7.4 12.9-7.4c1.4-0.8 2.7-2.2 3.7-3.9 0.9-1.6 1.5-3.5 1.5-5.1v-14.9 -12.7c0-4.6-3.8-6-6.8-4.2l-28 16.2"/>
66
+ </svg>
67
+ <span>GrapesJS</span>
68
+ </div>
69
+ `
70
+ });
71
+
72
+ editor.BlockManager.add('description-block', {
73
+ label: 'Description',
74
+ content: `<div class="description">This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.</div>`
75
+ });
76
+
77
+ editor.BlockManager.add('button-block', {
78
+ label: 'Add Button',
79
+ content: `<button class="add-button">Ещё добавь</button>`
80
+ });
81
+ </script>
82
+ </body>
83
+ </html>