Hugging Face's logo

Spaces:
Eluza133
/
Host2
Sleeping

App Files Community
Eluza133 commited on
Commit
85f886c
·
verified ·
1 Parent(s): 4469b3d

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +25 -20
app.py CHANGED
@@ -87,10 +87,9 @@ def periodic_backup():
87
 
88
  # Базовый шаблон боковой навигации
89
  NAV_HTML = '''
90
- <aside class="sidebar">
91
  <div class="sidebar-header">
92
  <span class="nav-brand">Контент Хост</span>
93
- <button class="menu-btn" onclick="toggleSidebar()">☰</button>
94
  </div>
95
  <nav class="nav-links">
96
  <a href="{{ url_for('feed') }}" class="nav-link"><span>📜</span> Лента</a>
@@ -144,7 +143,7 @@ def register():
144
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
145
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
146
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
147
- .menu-btn { display: none; font-size: 24px; background: none; border: none; color: #3b82f6; cursor: pointer; }
148
  .container { max-width: 400px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
149
  input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
150
  button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
@@ -154,7 +153,7 @@ def register():
154
  .sidebar { transform: translateX(-100%); width: 200px; }
155
  .sidebar.active { transform: translateX(0); }
156
  .menu-btn { display: block; }
157
- .container { margin: 20px 10px; max-width: calc(100% - 20px); }
158
  input, button { font-size: 14px; padding: 10px; }
159
  .nav-brand { font-size: 1.2em; }
160
  .nav-link { padding: 10px; font-size: 14px; }
@@ -162,6 +161,7 @@ def register():
162
  </style>
163
  </head>
164
  <body>
 
165
  ''' + NAV_HTML + '''
166
  <div class="container">
167
  <h1>Регистрация</h1>
@@ -181,7 +181,7 @@ def register():
181
  </div>
182
  <script>
183
  function toggleSidebar() {
184
- document.querySelector('.sidebar').classList.toggle('active');
185
  }
186
  </script>
187
  </body>
@@ -225,7 +225,7 @@ def login():
225
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
226
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
227
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
228
- .menu-btn { display: none; font-size: 24px; background: none; border: none; color: #3b82f6; cursor: pointer; }
229
  .container { max-width: 400px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
230
  input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
231
  button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
@@ -235,7 +235,7 @@ def login():
235
  .sidebar { transform: translateX(-100%); width: 200px; }
236
  .sidebar.active { transform: translateX(0); }
237
  .menu-btn { display: block; }
238
- .container { margin: 20px 10px; max-width: calc(100% - 20px); }
239
  input, button { font-size: 14px; padding: 10px; }
240
  .nav-brand { font-size: 1.2em; }
241
  .nav-link { padding: 10px; font-size: 14px; }
@@ -243,6 +243,7 @@ def login():
243
  </style>
244
  </head>
245
  <body>
 
246
  ''' + NAV_HTML + '''
247
  <div class="container">
248
  <h1>Вход</h1>
@@ -262,7 +263,7 @@ def login():
262
  </div>
263
  <script>
264
  function toggleSidebar() {
265
- document.querySelector('.sidebar').classList.toggle('active');
266
  }
267
  </script>
268
  </body>
@@ -302,7 +303,7 @@ def feed():
302
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
303
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
304
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
305
- .menu-btn { display: none; font-size: 24px; background: none; border: none; color: #3b82f6; cursor: pointer; }
306
  .container { max-width: 1200px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
307
  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
308
  .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; transition: transform 0.3s ease; }
@@ -313,7 +314,7 @@ def feed():
313
  .sidebar { transform: translateX(-100%); width: 200px; }
314
  .sidebar.active { transform: translateX(0); }
315
  .menu-btn { display: block; }
316
- .container { margin: 20px 10px; max-width: calc(100% - 20px); }
317
  .post-grid { grid-template-columns: 1fr; gap: 15px; }
318
  .post-item { padding: 10px; }
319
  .post-preview { height: 150px; }
@@ -322,6 +323,7 @@ def feed():
322
  </style>
323
  </head>
324
  <body>
 
325
  ''' + NAV_HTML + '''
326
  <div class="container">
327
  <h1>Лента публикаций</h1>
@@ -345,7 +347,7 @@ def feed():
345
  </div>
346
  <script>
347
  function toggleSidebar() {
348
- document.querySelector('.sidebar').classList.toggle('active');
349
  }
350
  document.addEventListener('DOMContentLoaded', function() {
351
  const videos = document.querySelectorAll('.post-preview');
@@ -411,7 +413,7 @@ def post_page(post_id):
411
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
412
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
413
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
414
- .menu-btn { display: none; font-size: 24px; background: none; border: none; color: #3b82f6; cursor: pointer; }
415
  .container { max-width: 800px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
416
  video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; }
417
  .btn { display: inline-block; margin: 10px 0; padding: 12px 20px; background: rgba(59, 130, 246, 0.9); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; }
@@ -424,7 +426,7 @@ def post_page(post_id):
424
  .sidebar { transform: translateX(-100%); width: 200px; }
425
  .sidebar.active { transform: translateX(0); }
426
  .menu-btn { display: block; }
427
- .container { margin: 20px 10px; max-width: calc(100% - 20px); }
428
  video, img { max-height: 250px; }
429
  .btn, textarea { width: 100%; font-size: 14px; padding: 10px; margin: 5px 0; }
430
  h1 { font-size: 1.5em; }
@@ -433,6 +435,7 @@ def post_page(post_id):
433
  </style>
434
  </head>
435
  <body>
 
436
  ''' + NAV_HTML + '''
437
  <div class="container">
438
  <h1>{{ post['title'] }}</h1>
@@ -470,7 +473,7 @@ def post_page(post_id):
470
  </div>
471
  <script>
472
  function toggleSidebar() {
473
- document.querySelector('.sidebar').classList.toggle('active');
474
  }
475
  </script>
476
  </body>
@@ -516,7 +519,7 @@ def profile():
516
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
517
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
518
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
519
- .menu-btn { display: none; font-size: 24px; background: none; border: none; color: #3b82f6; cursor: pointer; }
520
  .container { max-width: 800px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
521
  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
522
  .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
@@ -531,7 +534,7 @@ def profile():
531
  .sidebar { transform: translateX(-100%); width: 200px; }
532
  .sidebar.active { transform: translateX(0); }
533
  .menu-btn { display: block; }
534
- .container { margin: 20px 10px; max-width: calc(100% - 20px); }
535
  .post-grid { grid-template-columns: 1fr; gap: 15px; }
536
  .post-item { padding: 10px; }
537
  .post-preview { height: 150px; }
@@ -541,6 +544,7 @@ def profile():
541
  </style>
542
  </head>
543
  <body>
 
544
  ''' + NAV_HTML + '''
545
  <div class="container">
546
  <h1>Профиль: {{ username }}</h1>
@@ -576,7 +580,7 @@ def profile():
576
  </div>
577
  <script>
578
  function toggleSidebar() {
579
- document.querySelector('.sidebar').classList.toggle('active');
580
  }
581
  document.addEventListener('DOMContentLoaded', function() {
582
  const videos = document.querySelectorAll('.post-preview');
@@ -676,7 +680,7 @@ def upload():
676
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
677
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
678
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
679
- .menu-btn { display: none; font-size: 24px; background: none; border: none; color: #3b82f6; cursor: pointer; }
680
  .container { max-width: 600px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
681
  input, textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
682
  button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
@@ -687,7 +691,7 @@ def upload():
687
  .sidebar { transform: translateX(-100%); width: 200px; }
688
  .sidebar.active { transform: translateX(0); }
689
  .menu-btn { display: block; }
690
- .container { margin: 20px 10px; max-width: calc(100% - 20px); }
691
  input, textarea, button { font-size: 14px; padding: 10px; margin: 5px 0; }
692
  h1 { font-size: 1.5em; }
693
  #progress-container { height: 15px; }
@@ -696,6 +700,7 @@ def upload():
696
  </style>
697
  </head>
698
  <body>
 
699
  ''' + NAV_HTML + '''
700
  <div class="container">
701
  <h1>Загрузить контент</h1>
@@ -740,7 +745,7 @@ def upload():
740
  xhr.send(formData);
741
  };
742
  function toggleSidebar() {
743
- document.querySelector('.sidebar').classList.toggle('active');
744
  }
745
  </script>
746
  </body>
 
87
 
88
  # Базовый шаблон боковой навигации
89
  NAV_HTML = '''
90
+ <aside class="sidebar" id="sidebar">
91
  <div class="sidebar-header">
92
  <span class="nav-brand">Контент Хост</span>
 
93
  </div>
94
  <nav class="nav-links">
95
  <a href="{{ url_for('feed') }}" class="nav-link"><span>📜</span> Лента</a>
 
143
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
144
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
145
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
146
+ .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
147
  .container { max-width: 400px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
148
  input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
149
  button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
 
153
  .sidebar { transform: translateX(-100%); width: 200px; }
154
  .sidebar.active { transform: translateX(0); }
155
  .menu-btn { display: block; }
156
+ .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
157
  input, button { font-size: 14px; padding: 10px; }
158
  .nav-brand { font-size: 1.2em; }
159
  .nav-link { padding: 10px; font-size: 14px; }
 
161
  </style>
162
  </head>
163
  <body>
164
+ <button class="menu-btn" onclick="toggleSidebar()">☰</button>
165
  ''' + NAV_HTML + '''
166
  <div class="container">
167
  <h1>Регистрация</h1>
 
181
  </div>
182
  <script>
183
  function toggleSidebar() {
184
+ document.getElementById('sidebar').classList.toggle('active');
185
  }
186
  </script>
187
  </body>
 
225
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
226
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
227
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
228
+ .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
229
  .container { max-width: 400px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
230
  input { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
231
  button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
 
235
  .sidebar { transform: translateX(-100%); width: 200px; }
236
  .sidebar.active { transform: translateX(0); }
237
  .menu-btn { display: block; }
238
+ .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
239
  input, button { font-size: 14px; padding: 10px; }
240
  .nav-brand { font-size: 1.2em; }
241
  .nav-link { padding: 10px; font-size: 14px; }
 
243
  </style>
244
  </head>
245
  <body>
246
+ <button class="menu-btn" onclick="toggleSidebar()">☰</button>
247
  ''' + NAV_HTML + '''
248
  <div class="container">
249
  <h1>Вход</h1>
 
263
  </div>
264
  <script>
265
  function toggleSidebar() {
266
+ document.getElementById('sidebar').classList.toggle('active');
267
  }
268
  </script>
269
  </body>
 
303
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
304
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
305
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
306
+ .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
307
  .container { max-width: 1200px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
308
  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
309
  .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); text-decoration: none; color: #2d3748; transition: transform 0.3s ease; }
 
314
  .sidebar { transform: translateX(-100%); width: 200px; }
315
  .sidebar.active { transform: translateX(0); }
316
  .menu-btn { display: block; }
317
+ .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
318
  .post-grid { grid-template-columns: 1fr; gap: 15px; }
319
  .post-item { padding: 10px; }
320
  .post-preview { height: 150px; }
 
323
  </style>
324
  </head>
325
  <body>
326
+ <button class="menu-btn" onclick="toggleSidebar()">☰</button>
327
  ''' + NAV_HTML + '''
328
  <div class="container">
329
  <h1>Лента публикаций</h1>
 
347
  </div>
348
  <script>
349
  function toggleSidebar() {
350
+ document.getElementById('sidebar').classList.toggle('active');
351
  }
352
  document.addEventListener('DOMContentLoaded', function() {
353
  const videos = document.querySelectorAll('.post-preview');
 
413
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
414
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
415
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
416
+ .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
417
  .container { max-width: 800px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
418
  video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; }
419
  .btn { display: inline-block; margin: 10px 0; padding: 12px 20px; background: rgba(59, 130, 246, 0.9); color: white; text-decoration: none; border-radius: 8px; border: none; cursor: pointer; transition: all 0.3s ease; }
 
426
  .sidebar { transform: translateX(-100%); width: 200px; }
427
  .sidebar.active { transform: translateX(0); }
428
  .menu-btn { display: block; }
429
+ .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
430
  video, img { max-height: 250px; }
431
  .btn, textarea { width: 100%; font-size: 14px; padding: 10px; margin: 5px 0; }
432
  h1 { font-size: 1.5em; }
 
435
  </style>
436
  </head>
437
  <body>
438
+ <button class="menu-btn" onclick="toggleSidebar()">☰</button>
439
  ''' + NAV_HTML + '''
440
  <div class="container">
441
  <h1>{{ post['title'] }}</h1>
 
473
  </div>
474
  <script>
475
  function toggleSidebar() {
476
+ document.getElementById('sidebar').classList.toggle('active');
477
  }
478
  </script>
479
  </body>
 
519
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
520
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
521
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
522
+ .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
523
  .container { max-width: 800px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
524
  .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
525
  .post-item { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 15px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
 
534
  .sidebar { transform: translateX(-100%); width: 200px; }
535
  .sidebar.active { transform: translateX(0); }
536
  .menu-btn { display: block; }
537
+ .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
538
  .post-grid { grid-template-columns: 1fr; gap: 15px; }
539
  .post-item { padding: 10px; }
540
  .post-preview { height: 150px; }
 
544
  </style>
545
  </head>
546
  <body>
547
+ <button class="menu-btn" onclick="toggleSidebar()">☰</button>
548
  ''' + NAV_HTML + '''
549
  <div class="container">
550
  <h1>Профиль: {{ username }}</h1>
 
580
  </div>
581
  <script>
582
  function toggleSidebar() {
583
+ document.getElementById('sidebar').classList.toggle('active');
584
  }
585
  document.addEventListener('DOMContentLoaded', function() {
586
  const videos = document.querySelectorAll('.post-preview');
 
680
  .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
681
  .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
682
  .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
683
+ .menu-btn { display: none; font-size: 28px; background: rgba(255, 255, 255, 0.9); border: none; color: #3b82f6; cursor: pointer; position: fixed; top: 15px; left: 15px; z-index: 1001; padding: 5px 10px; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
684
  .container { max-width: 600px; margin: 20px auto 20px 270px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); padding: 20px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); transition: margin-left 0.3s ease; }
685
  input, textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; box-sizing: border-box; background: rgba(255, 255, 255, 0.8); }
686
  button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
 
691
  .sidebar { transform: translateX(-100%); width: 200px; }
692
  .sidebar.active { transform: translateX(0); }
693
  .menu-btn { display: block; }
694
+ .container { margin: 60px 10px 20px 10px; max-width: calc(100% - 20px); }
695
  input, textarea, button { font-size: 14px; padding: 10px; margin: 5px 0; }
696
  h1 { font-size: 1.5em; }
697
  #progress-container { height: 15px; }
 
700
  </style>
701
  </head>
702
  <body>
703
+ <button class="menu-btn" onclick="toggleSidebar()">☰</button>
704
  ''' + NAV_HTML + '''
705
  <div class="container">
706
  <h1>Загрузить контент</h1>
 
745
  xhr.send(formData);
746
  };
747
  function toggleSidebar() {
748
+ document.getElementById('sidebar').classList.toggle('active');
749
  }
750
  </script>
751
  </body>