feat: add file upload

- Add button "Upload file" in header
- Add button "Upload file" in footer

Author: Aofled

generator/css/content/json-body.css

@@ -59,6 +59,18 @@
     border-radius: 3px;
 }
 
+.json-status-bar {
+    transition: all 0.3s ease;
+}
+
+.status-success {
+    color: #3ddc84 !important;
+}
+
+.status-error {
+    color: #ff4444 !important;
+}
+
 [data-theme="dark"] .json-body {
     background: #202124;
 }

generator/css/mobile/json-body-mobile.css

@@ -36,4 +36,8 @@
         -ms-overflow-style: none;
         scrollbar-width: none;
     }
+
+    #file-input {
+        font-size: 0.8rem;
+    }
 }

generator/js/app.js

@@ -1,11 +1,13 @@
 import { setupFooter } from './modules/footer.js';
 import { initJsonSetting } from './content/json-setting.js';
 import { initJsonBody } from './content/json-body.js';
+import { initFileLoader } from './file-loader.js';
 
 document.addEventListener('DOMContentLoaded', () => {
     setupFooter();
     initJsonSetting();
     initJsonBody();
+    initFileLoader();
 });
 
 document.querySelector('.theme-toggle').addEventListener('click', () => {

generator/js/file-loader.js

@@ -0,0 +1,39 @@
+export function initFileLoader() {
+  const fileInput = document.getElementById('file-input');
+  const jsonTextarea = document.getElementById('json-input');
+  const statusBar = document.getElementById('json-status');
+
+  document.querySelectorAll('[data-menu-item="load"]').forEach(button => {
+    button.addEventListener('click', (e) => {
+      e.preventDefault();
+      fileInput.click();
+    });
+  });
+
+  fileInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      try {
+        const content = event.target.result;
+        const parsed = JSON.parse(content);
+        jsonTextarea.value = JSON.stringify(parsed, null, 2);
+        statusBar.textContent = `Загружен файл: ${file.name}`;
+        statusBar.style.color = '#3ddc84';
+      } catch (error) {
+        statusBar.textContent = `Ошибка: ${error.message}`;
+        statusBar.style.color = '#ff4444';
+      }
+    };
+
+    reader.onerror = () => {
+      statusBar.textContent = 'Ошибка чтения файла';
+      statusBar.style.color = '#ff4444';
+    };
+
+    reader.readAsText(file);
+  });
+}

generator/json-generator.html

@@ -35,6 +35,7 @@
     <nav class="header-menu">
         <ul>
             <li><a href="#" data-menu-item="load">Загрузить файл</a></li>
+            <li><a href="#" data-menu-item="save">Сохранить файл</a></li>
         </ul>
     </nav>
     <button class="theme-toggle" aria-label="Toggle theme">
@@ -60,13 +61,13 @@
             <div class="json-status-bar" id="json-status">Готов к работе</div>
         </div>
     </div>
-    </div>
 </div>
 
 <footer class="footer">
     <nav class="footer-menu">
         <ul>
             <li><a href="#" data-menu-item="load">Загрузить файл</a></li>
+            <li><a href="#" data-menu-item="save">Сохранить файл</a></li>
         </ul>
         <div class="footer-info">
             <div class="footer-year">Программирование на Android © <span id="currentYear"></span></div>
@@ -82,11 +83,11 @@
     * { outline: 1px solid red; } /* For debugging */
 </style>
 -->
-
 <script>
     window.marked = window.marked || {
       parse: function(text) { return text; }
     };
 </script>
+<input type="file" id="file-input" accept=".json" style="display: none;">
 </body>
 </html>