Hugging Face's logo

Spaces:
DMTuit
/
psy_vk
Running

App Files Community
DmitrMakeev commited on
Commit
eff3515
·
verified ·
1 Parent(s): cec0237

Update buil_json.html

Browse files
Files changed (1) hide show
  1. buil_json.html +47 -60
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>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,6 +12,7 @@
12
  background-color: #f0f0f0;
13
  margin: 0;
14
  padding: 0;
 
15
  }
16
  h1 {
17
  background-color: #4CAF50;
@@ -26,7 +27,7 @@
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,7 +38,7 @@
37
  height: 300px;
38
  margin: 20px auto;
39
  }
40
- button {
41
  color: white;
42
  background-color: #4CAF50;
43
  border: none;
@@ -47,84 +48,70 @@
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
- <div class="input-row">
79
- <label for="title3">Название 3:</label>
80
- <input type="text" id="title3" placeholder="Мега-меню">
81
- </div>
82
- <div class="input-row">
83
- <label for="title4">Название 4:</label>
84
- <input type="text" id="title4" placeholder="Подменю">
85
- </div>
86
- <button id="addMenu">Добавить меню</button>
87
  </div>
88
  <div id="jsoneditor"></div>
89
 
90
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.9.2/jsoneditor.min.js"></script>
91
  <script>
92
- document.addEventListener('DOMContentLoaded', function() {
93
- const container = document.getElementById('jsoneditor');
94
- const options = {
95
- mode: 'code',
96
- modes: ['code', 'tree'],
97
- onError: function(err) {
98
- alert(err.toString());
99
- }
100
- };
101
- const editor = new JSONEditor(container, options);
102
- let menuData = {
103
- "menu": []
104
- };
105
- editor.set(menuData);
106
-
107
- document.getElementById('addMenu').addEventListener('click', function() {
108
- const title1 = document.getElementById('title1').value;
109
- const link1 = document.getElementById('link1').value;
110
- const title2 = document.getElementById('title2').value;
111
- const link2 = document.getElementById('link2').value;
112
- const title3 = document.getElementById('title3').value;
113
- const title4 = document.getElementById('title4').value;
114
-
115
- if (title1 && link1 && title2 && link2 && title3 && title4) {
116
- menuData.menu = [
117
- { "title": title1, "link": link1 },
118
- { "title": title2, "link": link2 },
119
- { "title": title3, "link": "#link" },
120
- { "title": title4, "link": "#link" }
121
- ];
122
- editor.set(menuData);
123
- } else {
124
- alert('Please fill in all menu fields.');
125
- }
126
- });
127
  });
 
 
 
128
  </script>
129
  </body>
130
  </html>
 
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
  background-color: #f0f0f0;
13
  margin: 0;
14
  padding: 0;
15
+ max-height: 250px; /* Устанавливаем максимальную высоту страницы */
16
  }
17
  h1 {
18
  background-color: #4CAF50;
 
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
  height: 300px;
39
  margin: 20px auto;
40
  }
41
+ #addVideo, #saveToClipboard {
42
  color: white;
43
  background-color: #4CAF50;
44
  border: none;
 
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>