Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
8bd302a
·
verified ·
1 Parent(s): 90ce961

Update builder.html

Browse files
Files changed (1) hide show
  1. builder.html +116 -166
builder.html CHANGED
@@ -1,177 +1,127 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>GrapesJS Example</title>
7
- <!-- GrapesJS CSS -->
8
- <link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
9
- </head>
10
- <body>
11
- <div id="gjs"></div>
12
 
13
- <!-- GrapesJS JS -->
 
 
 
 
14
  <script src="https://unpkg.com/grapesjs"></script>
15
- <!-- Your Custom JS -->
16
- <script>
17
- const editor = grapesjs.init({
18
- container: '#gjs',
19
- fromElement: true,
20
- height: '100vh',
21
- storageManager: { type: 0 },
22
- plugins: [],
23
- pluginsOpts: {},
24
- selectorManager: {
25
- componentFirst: true,
26
- },
27
- styleManager: {
28
- sectors: [
29
- {
30
- name: 'Layout',
31
- properties: [
32
- {
33
- type: 'integer',
34
- name: 'width',
35
- units: ['px', '%'],
36
- defaults: 'auto',
37
- min: 0,
38
- },
39
- {
40
- type: 'integer',
41
- name: 'height',
42
- units: ['px', '%'],
43
- defaults: 'auto',
44
- min: 0,
45
- },
46
- {
47
- type: 'integer',
48
- name: 'margin',
49
- units: ['px', '%'],
50
- defaults: '0',
51
- },
52
- {
53
- type: 'integer',
54
- name: 'padding',
55
- units: ['px', '%'],
56
- defaults: '10px',
57
- },
58
- ],
59
- },
60
- {
61
- name: 'Decorations',
62
- properties: [
63
- {
64
- type: 'color',
65
- name: 'background-color',
66
- defaults: '#f0f0f0',
67
- },
68
- {
69
- type: 'integer',
70
- name: 'border-width',
71
- units: ['px'],
72
- defaults: '1px',
73
- },
74
- {
75
- type: 'color',
76
- name: 'border-color',
77
- defaults: '#ccc',
78
- },
79
- ],
80
- },
81
- {
82
- name: 'Flex',
83
- properties: [
84
- {
85
- type: 'select',
86
- name: 'flex-direction',
87
- defaults: 'row',
88
- options: [
89
- { value: 'row', name: 'Row' },
90
- { value: 'column', name: 'Column' },
91
- ],
92
- },
93
- {
94
- type: 'select',
95
- name: 'justify-content',
96
- defaults: 'space-between',
97
- options: [
98
- { value: 'flex-start', name: 'Flex Start' },
99
- { value: 'flex-end', name: 'Flex End' },
100
- { value: 'center', name: 'Center' },
101
- { value: 'space-between', name: 'Space Between' },
102
- { value: 'space-around', name: 'Space Around' },
103
- ],
104
- },
105
- ],
106
- },
107
- ],
108
- },
109
- });
110
 
111
- const domc = editor.DomComponents;
112
- const bm = editor.BlockManager;
 
 
 
 
 
113
 
114
- // Add a block with horizontal triple blocks
115
- bm.add('horizontal-triple-block', {
116
- label: 'Horizontal Triple Block',
117
- content: `
118
- <div style="display: flex; justify-content: space-between;">
119
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
120
- <div data-gjs-type="block-container"></div>
121
- </div>
122
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
123
- <div data-gjs-type="block-container"></div>
124
- </div>
125
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;">
126
- <div data-gjs-type="block-container"></div>
127
- </div>
128
- </div>
129
- `,
130
- });
131
 
132
- // Define a container for blocks
133
- domc.addType('block-container', {
134
- model: {
135
- defaults: {
136
- droppable: true,
137
- components: [],
138
- },
139
- },
140
- });
141
 
142
- // Define a button to add new blocks
143
- domc.addType('add-block-button', {
144
- model: {
145
- defaults: {
146
- components: `
147
- <button onclick="addNewBlock()">Add New Block</button>
148
- `,
149
- attributes: {
150
- 'data-gjs-type': 'add-block-button',
151
- },
152
- },
153
- },
154
- });
155
 
156
- // Function to add new blocks
157
- window.addNewBlock = function() {
158
- const newBlock = `
159
- <div style="display: flex; justify-content: space-between;">
160
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
161
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
162
- <div style="flex: 1; margin: 5px; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc;"></div>
163
- </div>
164
- `;
165
- editor.addComponents(newBlock);
166
- };
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
 
168
- // Add the button block
169
- bm.add('add-block-button', {
170
- label: 'Add Block Button',
171
- content: {
172
- type: 'add-block-button',
173
- },
174
- });
175
  </script>
176
- </body>
177
  </html>
 
1
  <!DOCTYPE html>
 
 
 
 
 
 
 
 
 
 
2
 
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <title>GrapesJS</title>
7
+ <link rel="stylesheet" href="href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
8
  <script src="https://unpkg.com/grapesjs"></script>
9
+ <style>
10
+ body,
11
+ html {
12
+ height: 100%;
13
+ margin: 0;
14
+ }
15
+ </style>
16
+ </head>
17
+
18
+ <body>
19
+ <div id="gjs" style="height:0px; overflow:hidden;">
20
+ <div class="panel">
21
+ <h1 class="welcome">Welcome to</h1>
22
+ <div class="big-title">
23
+ <svg class="logo" viewBox="0 0 100 100">
24
+ <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"/>
25
+ </svg>
26
+ <span>GrapesJS</span>
27
+ </div>
28
+ <div class="description">
29
+ This is a demo content from index.html. For the development, you shouldn't edit this file, instead you can
30
+ copy and rename it to _index.html, on next server start the new file will be served, and it will be ignored by git.
31
+ </div>
32
+ </div>
33
+ <style>
34
+ .panel {
35
+ width: 90%;
36
+ max-width: 700px;
37
+ border-radius: 3px;
38
+ padding: 30px 20px;
39
+ margin: 150px auto 0px;
40
+ background-color: #d983a6;
41
+ box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.25);
42
+ color:rgba(255,255,255,0.75);
43
+ font: caption;
44
+ font-weight: 100;
45
+ }
46
+
47
+ .welcome {
48
+ text-align: center;
49
+ font-weight: 100;
50
+ margin: 0px;
51
+ }
52
+
53
+ .logo {
54
+ width: 70px;
55
+ height: 70px;
56
+ vertical-align: middle;
57
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58
 
59
+ .logo path {
60
+ pointer-events: none;
61
+ fill: none;
62
+ stroke-linecap: round;
63
+ stroke-width: 7;
64
+ stroke: #fff
65
+ }
66
 
67
+ .big-title {
68
+ text-align: center;
69
+ font-size: 3.5rem;
70
+ margin: 15px 0;
71
+ }
 
 
 
 
 
 
 
 
 
 
 
 
72
 
73
+ .description {
74
+ text-align: justify;
75
+ font-size: 1rem;
76
+ line-height: 1.5rem;
77
+ }
 
 
 
 
78
 
79
+ </style>
80
+ </div>
 
 
 
 
 
 
 
 
 
 
 
81
 
82
+ <script type="text/javascript">
83
+ var editor = grapesjs.init({
84
+ showOffsets: 1,
85
+ noticeOnUnload: 0,
86
+ container: '#gjs',
87
+ height: '100%',
88
+ fromElement: true,
89
+ storageManager: { autoload: 0 },
90
+ styleManager : {
91
+ sectors: [{
92
+ name: 'General',
93
+ open: false,
94
+ buildProps: ['float', 'display', 'position', 'top', 'right', 'left', 'bottom']
95
+ },{
96
+ name: 'Flex',
97
+ open: false,
98
+ buildProps: ['flex-direction', 'flex-wrap', 'justify-content', 'align-items', 'align-content', 'order', 'flex-basis', 'flex-grow', 'flex-shrink', 'align-self']
99
+ },{
100
+ name: 'Dimension',
101
+ open: false,
102
+ buildProps: ['width', 'height', 'max-width', 'min-height', 'margin', 'padding'],
103
+ },{
104
+ name: 'Typography',
105
+ open: false,
106
+ buildProps: ['font-family', 'font-size', 'font-weight', 'letter-spacing', 'color', 'line-height', 'text-shadow'],
107
+ },{
108
+ name: 'Decorations',
109
+ open: false,
110
+ buildProps: ['border-radius-c', 'background-color', 'border-radius', 'border', 'box-shadow', 'background'],
111
+ },{
112
+ name: 'Extra',
113
+ open: false,
114
+ buildProps: ['transition', 'perspective', 'transform'],
115
+ }
116
+ ],
117
+ },
118
+ });
119
 
120
+ editor.BlockManager.add('testBlock', {
121
+ label: 'Block',
122
+ attributes: { class:'gjs-fonts gjs-f-b1' },
123
+ content: `<div style="padding-top:50px; padding-bottom:50px; text-align:center">Test block</div>`
124
+ })
 
 
125
  </script>
126
+ </body>
127
  </html>