Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
2723dcd
·
verified ·
1 Parent(s): 7bf835c

Update buil_json.html

Browse files
Files changed (1) hide show
  1. buil_json.html +86 -46
buil_json.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Video List Editor</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" />
8
  <style>
9
  body {
@@ -12,7 +12,6 @@
12
  background-color: #f0f0f0;
13
  margin: 0;
14
  padding: 0;
15
- max-height: 250px; /* Устанавливаем максимальную высоту страницы */
16
  }
17
  h1 {
18
  background-color: #4CAF50;
@@ -27,7 +26,7 @@
27
  gap: 10px;
28
  margin-top: 20px;
29
  }
30
- .input-row input, .input-row textarea {
31
  padding: 10px;
32
  font-size: 16px;
33
  border: 1px solid #ccc;
@@ -38,7 +37,7 @@
38
  height: 300px;
39
  margin: 20px auto;
40
  }
41
- #addVideo, #saveToClipboard {
42
  color: white;
43
  background-color: #4CAF50;
44
  border: none;
@@ -48,70 +47,111 @@
48
  border-radius: 5px;
49
  margin-top: 20px;
50
  }
51
- #addVideo:hover, #saveToClipboard:hover {
52
  background-color: #388E3C;
53
  }
54
  .jsoneditor-menu {
55
  background-color: #4CAF50 !important;
56
  border-bottom: 1px solid #388E3C !important;
57
  }
58
- .jsoneditor{
59
  border: 1px #4CAF50 !important;
60
  border-bottom: 2px solid #388E3C !important;
61
  }
62
  </style>
63
  </head>
64
  <body>
65
- <h1>Редактор медиа листов</h1>
66
  <div>
67
  <div class="input-row">
68
- <label for="title">Название:</label>
69
- <input type="text" id="title" placeholder="Введите название">
70
- <label for="file">Ссылка на файл:</label>
71
- <input type="text" id="file" placeholder="Введите ссылку">
72
  </div>
73
- <button id="addVideo">Добавить медиа</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
74
  <button id="saveToClipboard">Сохранить в буфер обмена</button>
75
  </div>
76
  <div id="jsoneditor"></div>
77
 
78
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
79
  <script>
80
- document.addEventListener('DOMContentLoaded', function() {
81
- const container = document.getElementById('jsoneditor');
82
- const options = {
83
- mode: 'code',
84
- modes: ['code', 'tree'],
85
- onError: function(err) {
86
- alert(err.toString());
87
- }
88
- };
89
- const editor = new JSONEditor(container, options);
90
- let videoList = [];
91
- editor.set(videoList);
92
- document.getElementById('addVideo').addEventListener('click', function() {
93
- const title = document.getElementById('title').value;
94
- const file = document.getElementById('file').value;
95
- if (title && file) {
96
- videoList.push({ title, file });
97
- editor.set(videoList);
98
- document.getElementById('title').value = '';
99
- document.getElementById('file').value = '';
100
- } else {
101
- alert('Please fill in both title and file URL.');
102
- }
103
- });
104
- document.getElementById('saveToClipboard').addEventListener('click', function() {
105
- const json = editor.get();
106
- const jsonString = JSON.stringify(json); // Убираем параметры отступов
107
- navigator.clipboard.writeText(jsonString).then(function() {
108
- alert('JSON saved to clipboard!');
109
- }, function(err) {
110
- console.error('Could not copy text: ', err);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
  });
112
- });
113
- });
114
-
115
  </script>
116
  </body>
117
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Menu JSON Editor</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.css" />
8
  <style>
9
  body {
 
12
  background-color: #f0f0f0;
13
  margin: 0;
14
  padding: 0;
 
15
  }
16
  h1 {
17
  background-color: #4CAF50;
 
26
  gap: 10px;
27
  margin-top: 20px;
28
  }
29
+ .input-row input {
30
  padding: 10px;
31
  font-size: 16px;
32
  border: 1px solid #ccc;
 
37
  height: 300px;
38
  margin: 20px auto;
39
  }
40
+ button {
41
  color: white;
42
  background-color: #4CAF50;
43
  border: none;
 
47
  border-radius: 5px;
48
  margin-top: 20px;
49
  }
50
+ button:hover {
51
  background-color: #388E3C;
52
  }
53
  .jsoneditor-menu {
54
  background-color: #4CAF50 !important;
55
  border-bottom: 1px solid #388E3C !important;
56
  }
57
+ .jsoneditor {
58
  border: 1px #4CAF50 !important;
59
  border-bottom: 2px solid #388E3C !important;
60
  }
61
  </style>
62
  </head>
63
  <body>
64
+ <h1>Редактор JSON для меню</h1>
65
  <div>
66
  <div class="input-row">
67
+ <label for="title1">Название 1:</label>
68
+ <input type="text" id="title1" placeholder="Главная">
69
+ <label for="link1">Ссылка 1:</label>
70
+ <input type="text" id="link1" placeholder="https://example.com">
71
  </div>
72
+ <div class="input-row">
73
+ <label for="title2">Название 2:</label>
74
+ <input type="text" id="title2" placeholder="Контакты">
75
+ <label for="link2">Ссылка 2:</label>
76
+ <input type="text" id="link2" placeholder="https://example.com">
77
+ </div>
78
+ <button id="addMenu">Добавить меню</button>
79
+ </div>
80
+ <div>
81
+ <div class="input-row">
82
+ <label for="submenuTitle">Название подменю:</label>
83
+ <input type="text" id="submenuTitle" placeholder="Раздел">
84
+ <label for="submenuLink">Ссылка подменю:</label>
85
+ <input type="text" id="submenuLink" placeholder="https://example.com">
86
+ </div>
87
+ <button id="addSubmenu">Добавить подменю</button>
88
+ </div>
89
+ <div>
90
  <button id="saveToClipboard">Сохранить в буфер обмена</button>
91
  </div>
92
  <div id="jsoneditor"></div>
93
 
94
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
95
  <script>
96
+ document.addEventListener('DOMContentLoaded', function() {
97
+ const container = document.getElementById('jsoneditor');
98
+ const options = {
99
+ mode: 'code',
100
+ modes: ['code', 'tree'],
101
+ onError: function(err) {
102
+ alert(err.toString());
103
+ }
104
+ };
105
+ const editor = new JSONEditor(container, options);
106
+ let menuData = {
107
+ "menu": []
108
+ };
109
+ editor.set(menuData);
110
+
111
+ document.getElementById('addMenu').addEventListener('click', function() {
112
+ const title1 = document.getElementById('title1').value;
113
+ const link1 = document.getElementById('link1').value;
114
+ const title2 = document.getElementById('title2').value;
115
+ const link2 = document.getElementById('link2').value;
116
+ if (title1 && link1 && title2 && link2) {
117
+ menuData.menu.push({ "title": title1, "link": link1 });
118
+ menuData.menu.push({ "title": title2, "link": link2 });
119
+ editor.set(menuData);
120
+ document.getElementById('title1').value = '';
121
+ document.getElementById('link1').value = '';
122
+ document.getElementById('title2').value = '';
123
+ document.getElementById('link2').value = '';
124
+ } else {
125
+ alert('Please fill in all menu fields.');
126
+ }
127
+ });
128
+
129
+ document.getElementById('addSubmenu').addEventListener('click', function() {
130
+ const submenuTitle = document.getElementById('submenuTitle').value;
131
+ const submenuLink = document.getElementById('submenuLink').value;
132
+ if (submenuTitle && submenuLink) {
133
+ if (!menuData.menu[1].submenu) {
134
+ menuData.menu[1].submenu = [];
135
+ }
136
+ menuData.menu[1].submenu.push({ "title": submenuTitle, "link": submenuLink });
137
+ editor.set(menuData);
138
+ document.getElementById('submenuTitle').value = '';
139
+ document.getElementById('submenuLink').value = '';
140
+ } else {
141
+ alert('Please fill in both submenu fields.');
142
+ }
143
+ });
144
+
145
+ document.getElementById('saveToClipboard').addEventListener('click', function() {
146
+ const json = editor.get();
147
+ const jsonString = JSON.stringify(json, null, 2);
148
+ navigator.clipboard.writeText(jsonString).then(function() {
149
+ alert('JSON saved to clipboard!');
150
+ }, function(err) {
151
+ console.error('Could not copy text: ', err);
152
+ });
153
+ });
154
  });
 
 
 
155
  </script>
156
  </body>
157
  </html>