Eluza133 commited on
Commit
cc990b2
·
verified ·
1 Parent(s): ae9e3e8

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +1336 -186
app.py CHANGED
@@ -11,7 +11,7 @@ import random
11
 
12
  app = Flask(__name__)
13
  app.secret_key = 'supersecretkey' # Замените на безопасный ключ в продакшене
14
- DATA_FILE = 'data_ostenhost.json'
15
  REPO_ID = "Eluza133/w1f9"
16
  HF_TOKEN_WRITE = os.getenv("HF_TOKEN") # Токен с правами записи
17
  HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE
@@ -89,7 +89,7 @@ def periodic_backup():
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>
@@ -131,24 +131,140 @@ def register():
131
  <head>
132
  <meta charset="UTF-8">
133
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
134
- <title>Регистрация</title>
135
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
136
  <style>
137
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
138
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
139
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
140
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
141
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
142
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
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; }
150
- button:hover { background: #2563eb; }
151
- .flash { color: #ef4444; margin-bottom: 10px; text-align: center; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
152
  @media (max-width: 768px) {
153
  .sidebar { transform: translateX(-100%); width: 200px; }
154
  .sidebar.active { transform: translateX(0); }
@@ -177,7 +293,7 @@ def register():
177
  <input type="password" name="password" placeholder="Пароль" required>
178
  <button type="submit">Зарегистрироваться</button>
179
  </form>
180
- <p>Уже есть аккаунт? <a href="{{ url_for('login') }}">Войти</a></p>
181
  </div>
182
  <script>
183
  function toggleSidebar() {
@@ -213,24 +329,140 @@ def login():
213
  <head>
214
  <meta charset="UTF-8">
215
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
216
- <title>Вход</title>
217
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
218
  <style>
219
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
220
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
221
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
222
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
223
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
224
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
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; }
232
- button:hover { background: #2563eb; }
233
- .flash { color: #ef4444; margin-bottom: 10px; text-align: center; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
234
  @media (max-width: 768px) {
235
  .sidebar { transform: translateX(-100%); width: 200px; }
236
  .sidebar.active { transform: translateX(0); }
@@ -259,7 +491,7 @@ def login():
259
  <input type="password" name="password" placeholder="Пароль" required>
260
  <button type="submit">Войти</button>
261
  </form>
262
- <p>Нет аккаунта? <a href="{{ url_for('register') }}">Зарегистрироваться</a></p>
263
  </div>
264
  <script>
265
  function toggleSidebar() {
@@ -293,37 +525,200 @@ def feed():
293
 
294
  html = '''
295
  <!DOCTYPE html>
296
- <html lang="ru">
297
  <head>
298
  <meta charset="UTF-8">
299
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
300
- <title>Лента</title>
301
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
302
  <style>
303
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
304
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
305
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
306
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
307
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
308
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
309
- .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
310
- .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
311
- .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
312
- .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); }
313
- .container { max-width: 1200px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
314
- .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
315
- .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; }
316
- .post-item:hover { transform: scale(1.02); }
317
- .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; cursor: pointer; }
318
- .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
319
- .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
320
- .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
321
- .username-link { color: #3b82f6; text-decoration: none; font-weight: 600; }
322
- .username-link:hover { text-decoration: underline; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
323
  .search-container { margin-bottom: 20px; }
324
- .search-input { width: 70%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: rgba(255, 255, 255, 0.8); }
325
- .search-btn { padding: 12px 20px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease; }
326
- .search-btn:hover { background: #2563eb; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
327
  @media (max-width: 768px) {
328
  .sidebar { transform: translateX(-100%); width: 200px; }
329
  .sidebar.active { transform: translateX(0); }
@@ -482,31 +877,186 @@ def post_page(post_id):
482
  <head>
483
  <meta charset="UTF-8">
484
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
485
- <title>{{ post['title'] }}</title>
486
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
487
  <style>
488
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
489
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
490
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
491
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
492
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
493
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
494
- .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
495
- .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
496
- .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
497
- .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); }
498
- .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; }
499
- video, img { width: 100%; border-radius: 8px; max-height: 400px; object-fit: cover; cursor: pointer; }
500
- .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; }
501
- .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
502
- .like-btn.liked { background: rgba(239, 68, 68, 0.9); }
503
- .like-btn.liked:hover { background: rgba(239, 68, 68, 1); }
504
- textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; resize: vertical; background: rgba(255, 255, 255, 0.8); }
505
- .comment { border-top: 1px solid #e2e8f0; padding: 10px 0; }
506
- .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
507
- .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
508
- .username-link { color: #3b82f6; text-decoration: none; font-weight: 600; }
509
- .username-link:hover { text-decoration: underline; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
510
  @media (max-width: 768px) {
511
  .sidebar { transform: translateX(-100%); width: 200px; }
512
  .sidebar.active { transform: translateX(0); }
@@ -553,7 +1103,7 @@ def post_page(post_id):
553
  {% endfor %}
554
  <a href="{{ url_for('feed') }}" class="btn">Назад к ленте</a>
555
  {% if not is_authenticated %}
556
- <p><a href="{{ url_for('login') }}">Войдите</a>, чтобы ставить лайки и комментировать.</p>
557
  {% endif %}
558
  </div>
559
  <div class="modal" id="imageModal" onclick="closeModal(event)">
@@ -689,37 +1239,200 @@ def profile():
689
  <head>
690
  <meta charset="UTF-8">
691
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
692
- <title>Профиль - {{ username }}</title>
693
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
694
  <style>
695
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
696
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
697
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
698
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
699
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
700
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
701
- .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
702
- .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
703
- .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
704
- .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); }
705
- .container { max-width: 800px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
706
- .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
707
- .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; }
708
- .post-item:hover { transform: scale(1.02); }
709
- .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; cursor: pointer; }
710
- .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; }
711
- .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
712
- .delete-btn { background: rgba(239, 68, 68, 0.9); }
713
- .delete-btn:hover { background: rgba(239, 68, 68, 1); }
714
- .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
715
- .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
716
- .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
717
- .avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
718
  .profile-info { margin-bottom: 20px; }
719
- textarea { width: 100%; padding: 12px; margin: 10px 0; border: 1px solid #e2e8f0; border-radius: 8px; resize: vertical; background: rgba(255, 255, 255, 0.8); }
720
- input[type="text"] { 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); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
721
  .share-btn { background: rgba(16, 185, 129, 0.9); }
722
  .share-btn:hover { background: rgba(16, 185, 129, 1); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
723
  @media (max-width: 768px) {
724
  .sidebar { transform: translateX(-100%); width: 200px; }
725
  .sidebar.active { transform: translateX(0); }
@@ -745,7 +1458,7 @@ def profile():
745
  {% endif %}
746
  <p>{{ bio }}</p>
747
  {% if link %}
748
- <p><a href="{{ link }}" target="_blank">{{ link }}</a></p>
749
  {% endif %}
750
  <p>Всего просмотров: {{ total_views }} | Всего лайков: {{ total_likes }}</p>
751
  <button class="btn share-btn" onclick="copyProfileLink()">Поделиться профилем</button>
@@ -902,35 +1615,192 @@ def user_profile(username):
902
  <head>
903
  <meta charset="UTF-8">
904
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
905
- <title>Профиль - {{ username }}</title>
906
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
907
  <style>
908
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
909
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
910
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
911
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
912
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
913
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
914
- .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
915
- .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
916
- .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
917
- .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); }
918
- .container { max-width: 800px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
919
- .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
920
- .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; }
921
- .post-item:hover { transform: scale(1.02); }
922
- .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; cursor: pointer; }
923
- .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; }
924
- .btn:hover { background: rgba(59, 130, 246, 1); transform: scale(1.05); }
925
- .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
926
- .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 2000; justify-content: center; align-items: center; }
927
- .modal img { max-width: 90%; max-height: 90%; object-fit: contain; transform: scale(1); transition: transform 0.2s ease; }
928
- .username-link { color: #3b82f6; text-decoration: none; font-weight: 600; }
929
- .username-link:hover { text-decoration: underline; }
930
- .avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; margin-bottom: 10px; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
931
  .profile-info { margin-bottom: 20px; }
932
  .share-btn { background: rgba(16, 185, 129, 0.9); }
933
  .share-btn:hover { background: rgba(16, 185, 129, 1); }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
934
  @media (max-width: 768px) {
935
  .sidebar { transform: translateX(-100%); width: 200px; }
936
  .sidebar.active { transform: translateX(0); }
@@ -956,7 +1826,7 @@ def user_profile(username):
956
  {% endif %}
957
  <p>{{ bio }}</p>
958
  {% if link %}
959
- <p><a href="{{ link }}" target="_blank">{{ link }}</a></p>
960
  {% endif %}
961
  <p>Всего просмотров: {{ total_views }} | Всего лайков: {{ total_likes }}</p>
962
  <button class="btn share-btn" onclick="copyProfileLink()">Поделиться профилем</button>
@@ -1142,25 +2012,148 @@ def upload():
1142
  <head>
1143
  <meta charset="UTF-8">
1144
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
1145
- <title>Загрузка контента</title>
1146
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
1147
  <style>
1148
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
1149
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
1150
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
1151
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
1152
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
1153
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: # 3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
1154
- .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
1155
- .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
1156
- .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
1157
- .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); }
1158
- .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; }
1159
- 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); }
1160
- button { padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
1161
- button:hover { background: #2563eb; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1162
  #progress-container { margin-top: 10px; }
1163
- #progress-bar { width: 0%; height: 20px; background: #3b82f6; border-radius: 8px; transition: width 0.3s ease; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1164
  @media (max-width: 768px) {
1165
  .sidebar { transform: translateX(-100%); width: 200px; }
1166
  .sidebar.active { transform: translateX(0); }
@@ -1254,33 +2247,189 @@ def admin_panel():
1254
  <head>
1255
  <meta charset="UTF-8">
1256
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
1257
- <title>Админ-панель</title>
1258
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
1259
  <style>
1260
- body { font-family: 'Poppins', sans-serif; background: linear-gradient(135deg, #e0e7ff, #f3f4f6); margin: 0; padding: 0; min-height: 100vh; }
1261
- .sidebar { position: fixed; left: 0; top: 0; width: 250px; height: 100%; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 20px; box-shadow: 2px 0 15px rgba(0,0,0,0.1); transition: transform 0.3s ease; z-index: 1000; }
1262
- .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
1263
- .nav-brand { font-size: 1.5em; font-weight: 600; color: #3b82f6; }
1264
- .nav-links { display: flex; flex-direction: column; gap: 10px; }
1265
- .nav-link { display: flex; align-items: center; gap: 10px; padding: 12px 15px; background: rgba(59, 130, 246, 0.1); color: #3b82f6; text-decoration: none; border-radius: 8px; transition: all 0.3s ease; }
1266
- .nav-link:hover { background: rgba(59, 130, 246, 0.3); color: #2563eb; transform: translateX(5px); }
1267
- .logout-btn { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
1268
- .logout-btn:hover { background: rgba(239, 68, 68, 0.3); color: #dc2626; }
1269
- .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); }
1270
- .container { max-width: 1200px; margin: 20px auto 20px 270px; padding: 20px; transition: margin-left 0.3s ease; }
1271
- .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
1272
- .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; }
1273
- .post-item:hover { transform: scale(1.02); }
1274
- .post-preview { width: 100%; border-radius: 8px; height: 200px; object-fit: cover; }
1275
- .delete-btn { padding: 10px; background: #ef4444; color: white; border: none; border-radius: 8px; cursor: pointer; width: 100%; transition: background 0.3s ease; }
1276
- .delete-btn:hover { background: #dc2626; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1277
  .search-container { margin-bottom: 20px; }
1278
- .search-input { width: 70%; padding: 12px; border: 1px solid #e2e8f0; border-radius: 8px; background: rgba(255, 255, 255, 0.8); }
1279
- .search-btn { padding: 12px 20px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background 0.3s ease; }
1280
- .search-btn:hover { background: #2563eb; }
1281
- .stats { font-size: 0.9em; color: #666; margin-top: 5px; }
1282
- .username-link { color: #3b82f6; text-decoration: none; font-weight: 600; }
1283
- .username-link:hover { text-decoration: underline; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1284
  @media (max-width: 768px) {
1285
  .sidebar { transform: translateX(-100%); width: 200px; }
1286
  .sidebar.active { transform: translateX(0); }
@@ -1360,4 +2509,5 @@ def admin_panel():
1360
  if __name__ == '__main__':
1361
  backup_thread = threading.Thread(target=periodic_backup, daemon=True)
1362
  backup_thread.start()
1363
- app.run(debug=True, host='0.0.0.0', port=7860)
 
 
11
 
12
  app = Flask(__name__)
13
  app.secret_key = 'supersecretkey' # Замените на безопасный ключ в продакшене
14
+ DATA_FILE = 'datatest.json'
15
  REPO_ID = "Eluza133/w1f9"
16
  HF_TOKEN_WRITE = os.getenv("HF_TOKEN") # Токен с правами записи
17
  HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE
 
89
  NAV_HTML = '''
90
  <aside class="sidebar" id="sidebar">
91
  <div class="sidebar-header">
92
+ <span class="nav-brand">OstenHost</span>
93
  </div>
94
  <nav class="nav-links">
95
  <a href="{{ url_for('feed') }}" class="nav-link"><span>📜</span> Лента</a>
 
131
  <head>
132
  <meta charset="UTF-8">
133
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
134
+ <title>OstenHost - Регистрация</title>
135
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
136
  <style>
137
+ body {
138
+ font-family: 'Orbitron', sans-serif;
139
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
140
+ margin: 0;
141
+ padding: 0;
142
+ min-height: 100vh;
143
+ overflow-x: hidden;
144
+ color: #00ffcc;
145
+ text-shadow: 0 0 5px #00ffcc;
146
+ }
147
+ .sidebar {
148
+ position: fixed;
149
+ left: 0;
150
+ top: 0;
151
+ width: 250px;
152
+ height: 100%;
153
+ background: rgba(13, 27, 42, 0.9);
154
+ padding: 20px;
155
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
156
+ transition: transform 0.5s ease;
157
+ z-index: 1000;
158
+ border-right: 2px solid #00ffcc;
159
+ }
160
+ .sidebar.active { transform: translateX(0); }
161
+ .sidebar-header {
162
+ display: flex;
163
+ justify-content: space-between;
164
+ align-items: center;
165
+ margin-bottom: 20px;
166
+ }
167
+ .nav-brand {
168
+ font-size: 1.8em;
169
+ font-weight: 700;
170
+ color: #ff007a;
171
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
172
+ animation: neon-flicker 1.5s infinite alternate;
173
+ }
174
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
175
+ .nav-link {
176
+ display: flex;
177
+ align-items: center;
178
+ gap: 10px;
179
+ padding: 12px 15px;
180
+ background: rgba(0, 255, 204, 0.1);
181
+ color: #00ffcc;
182
+ text-decoration: none;
183
+ border-radius: 8px;
184
+ transition: all 0.3s ease;
185
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
186
+ }
187
+ .nav-link:hover {
188
+ background: rgba(0, 255, 204, 0.3);
189
+ color: #ff007a;
190
+ transform: translateX(10px);
191
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
192
+ }
193
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
194
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
195
+ .menu-btn {
196
+ display: none;
197
+ font-size: 28px;
198
+ background: rgba(13, 27, 42, 0.9);
199
+ border: none;
200
+ color: #00ffcc;
201
+ cursor: pointer;
202
+ position: fixed;
203
+ top: 15px;
204
+ left: 15px;
205
+ z-index: 1001;
206
+ padding: 5px 10px;
207
+ border-radius: 5px;
208
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
209
+ }
210
+ .container {
211
+ max-width: 400px;
212
+ margin: 20px auto 20px 270px;
213
+ background: rgba(13, 27, 42, 0.85);
214
+ padding: 20px;
215
+ border-radius: 12px;
216
+ box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
217
+ transition: margin-left 0.5s ease;
218
+ animation: holographic 2s infinite;
219
+ }
220
+ input {
221
+ width: 100%;
222
+ padding: 12px;
223
+ margin: 10px 0;
224
+ border: 1px solid #ff007a;
225
+ border-radius: 8px;
226
+ box-sizing: border-box;
227
+ background: rgba(0, 0, 0, 0.5);
228
+ color: #00ffcc;
229
+ text-shadow: 0 0 5px #00ffcc;
230
+ transition: all 0.3s ease;
231
+ }
232
+ input:focus {
233
+ border-color: #00ffcc;
234
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
235
+ outline: none;
236
+ }
237
+ button {
238
+ padding: 12px;
239
+ background: #ff007a;
240
+ color: #00ffcc;
241
+ border: none;
242
+ border-radius: 8px;
243
+ cursor: pointer;
244
+ width: 100%;
245
+ transition: all 0.3s ease;
246
+ box-shadow: 0 0 10px #ff007a;
247
+ }
248
+ button:hover {
249
+ background: #00ffcc;
250
+ color: #ff007a;
251
+ box-shadow: 0 0 20px #00ffcc;
252
+ }
253
+ .flash {
254
+ color: #ff007a;
255
+ margin-bottom: 10px;
256
+ text-align: center;
257
+ text-shadow: 0 0 5px #ff007a;
258
+ }
259
+ @keyframes neon-flicker {
260
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
261
+ 20%, 24%, 55% { opacity: 0.7; }
262
+ }
263
+ @keyframes holographic {
264
+ 0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
265
+ 50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
266
+ 100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
267
+ }
268
  @media (max-width: 768px) {
269
  .sidebar { transform: translateX(-100%); width: 200px; }
270
  .sidebar.active { transform: translateX(0); }
 
293
  <input type="password" name="password" placeholder="Пароль" required>
294
  <button type="submit">Зарегистрироваться</button>
295
  </form>
296
+ <p>Уже есть аккаунт? <a href="{{ url_for('login') }}" style="color: #ff007a; text-shadow: 0 0 5px #ff007a;">Войти</a></p>
297
  </div>
298
  <script>
299
  function toggleSidebar() {
 
329
  <head>
330
  <meta charset="UTF-8">
331
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
332
+ <title>OstenHost - Вход</title>
333
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
334
  <style>
335
+ body {
336
+ font-family: 'Orbitron', sans-serif;
337
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
338
+ margin: 0;
339
+ padding: 0;
340
+ min-height: 100vh;
341
+ overflow-x: hidden;
342
+ color: #00ffcc;
343
+ text-shadow: 0 0 5px #00ffcc;
344
+ }
345
+ .sidebar {
346
+ position: fixed;
347
+ left: 0;
348
+ top: 0;
349
+ width: 250px;
350
+ height: 100%;
351
+ background: rgba(13, 27, 42, 0.9);
352
+ padding: 20px;
353
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
354
+ transition: transform 0.5s ease;
355
+ z-index: 1000;
356
+ border-right: 2px solid #00ffcc;
357
+ }
358
+ .sidebar.active { transform: translateX(0); }
359
+ .sidebar-header {
360
+ display: flex;
361
+ justify-content: space-between;
362
+ align-items: center;
363
+ margin-bottom: 20px;
364
+ }
365
+ .nav-brand {
366
+ font-size: 1.8em;
367
+ font-weight: 700;
368
+ color: #ff007a;
369
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
370
+ animation: neon-flicker 1.5s infinite alternate;
371
+ }
372
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
373
+ .nav-link {
374
+ display: flex;
375
+ align-items: center;
376
+ gap: 10px;
377
+ padding: 12px 15px;
378
+ background: rgba(0, 255, 204, 0.1);
379
+ color: #00ffcc;
380
+ text-decoration: none;
381
+ border-radius: 8px;
382
+ transition: all 0.3s ease;
383
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
384
+ }
385
+ .nav-link:hover {
386
+ background: rgba(0, 255, 204, 0.3);
387
+ color: #ff007a;
388
+ transform: translateX(10px);
389
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
390
+ }
391
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
392
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
393
+ .menu-btn {
394
+ display: none;
395
+ font-size: 28px;
396
+ background: rgba(13, 27, 42, 0.9);
397
+ border: none;
398
+ color: #00ffcc;
399
+ cursor: pointer;
400
+ position: fixed;
401
+ top: 15px;
402
+ left: 15px;
403
+ z-index: 1001;
404
+ padding: 5px 10px;
405
+ border-radius: 5px;
406
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
407
+ }
408
+ .container {
409
+ max-width: 400px;
410
+ margin: 20px auto 20px 270px;
411
+ background: rgba(13, 27, 42, 0.85);
412
+ padding: 20px;
413
+ border-radius: 12px;
414
+ box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
415
+ transition: margin-left 0.5s ease;
416
+ animation: holographic 2s infinite;
417
+ }
418
+ input {
419
+ width: 100%;
420
+ padding: 12px;
421
+ margin: 10px 0;
422
+ border: 1px solid #ff007a;
423
+ border-radius: 8px;
424
+ box-sizing: border-box;
425
+ background: rgba(0, 0, 0, 0.5);
426
+ color: #00ffcc;
427
+ text-shadow: 0 0 5px #00ffcc;
428
+ transition: all 0.3s ease;
429
+ }
430
+ input:focus {
431
+ border-color: #00ffcc;
432
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
433
+ outline: none;
434
+ }
435
+ button {
436
+ padding: 12px;
437
+ background: #ff007a;
438
+ color: #00ffcc;
439
+ border: none;
440
+ border-radius: 8px;
441
+ cursor: pointer;
442
+ width: 100%;
443
+ transition: all 0.3s ease;
444
+ box-shadow: 0 0 10px #ff007a;
445
+ }
446
+ button:hover {
447
+ background: #00ffcc;
448
+ color: #ff007a;
449
+ box-shadow: 0 0 20px #00ffcc;
450
+ }
451
+ .flash {
452
+ color: #ff007a;
453
+ margin-bottom: 10px;
454
+ text-align: center;
455
+ text-shadow: 0 0 5px #ff007a;
456
+ }
457
+ @keyframes neon-flicker {
458
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
459
+ 20%, 24%, 55% { opacity: 0.7; }
460
+ }
461
+ @keyframes holographic {
462
+ 0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
463
+ 50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
464
+ 100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
465
+ }
466
  @media (max-width: 768px) {
467
  .sidebar { transform: translateX(-100%); width: 200px; }
468
  .sidebar.active { transform: translateX(0); }
 
491
  <input type="password" name="password" placeholder="Пароль" required>
492
  <button type="submit">Войти</button>
493
  </form>
494
+ <p>Нет аккаунта? <a href="{{ url_for('register') }}" style="color: #ff007a; text-shadow: 0 0 5px #ff007a;">Зарегистрироваться</a></p>
495
  </div>
496
  <script>
497
  function toggleSidebar() {
 
525
 
526
  html = '''
527
  <!DOCTYPE html>
528
+ <html lang="ру">
529
  <head>
530
  <meta charset="UTF-8">
531
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
532
+ <title>OstenHost - Лента</title>
533
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
534
  <style>
535
+ body {
536
+ font-family: 'Orbitron', sans-serif;
537
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
538
+ margin: 0;
539
+ padding: 0;
540
+ min-height: 100vh;
541
+ overflow-x: hidden;
542
+ color: #00ffcc;
543
+ text-shadow: 0 0 5px #00ffcc;
544
+ }
545
+ .sidebar {
546
+ position: fixed;
547
+ left: 0;
548
+ top: 0;
549
+ width: 250px;
550
+ height: 100%;
551
+ background: rgba(13, 27, 42, 0.9);
552
+ padding: 20px;
553
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
554
+ transition: transform 0.5s ease;
555
+ z-index: 1000;
556
+ border-right: 2px solid #00ffcc;
557
+ }
558
+ .sidebar.active { transform: translateX(0); }
559
+ .sidebar-header {
560
+ display: flex;
561
+ justify-content: space-between;
562
+ align-items: center;
563
+ margin-bottom: 20px;
564
+ }
565
+ .nav-brand {
566
+ font-size: 1.8em;
567
+ font-weight: 700;
568
+ color: #ff007a;
569
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
570
+ animation: neon-flicker 1.5s infinite alternate;
571
+ }
572
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
573
+ .nav-link {
574
+ display: flex;
575
+ align-items: center;
576
+ gap: 10px;
577
+ padding: 12px 15px;
578
+ background: rgba(0, 255, 204, 0.1);
579
+ color: #00ffcc;
580
+ text-decoration: none;
581
+ border-radius: 8px;
582
+ transition: all 0.3s ease;
583
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
584
+ }
585
+ .nav-link:hover {
586
+ background: rgba(0, 255, 204, 0.3);
587
+ color: #ff007a;
588
+ transform: translateX(10px);
589
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
590
+ }
591
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
592
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
593
+ .menu-btn {
594
+ display: none;
595
+ font-size: 28px;
596
+ background: rgba(13, 27, 42, 0.9);
597
+ border: none;
598
+ color: #00ffcc;
599
+ cursor: pointer;
600
+ position: fixed;
601
+ top: 15px;
602
+ left: 15px;
603
+ z-index: 1001;
604
+ padding: 5px 10px;
605
+ border-radius: 5px;
606
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
607
+ }
608
+ .container {
609
+ max-width: 1200px;
610
+ margin: 20px auto 20px 270px;
611
+ padding: 20px;
612
+ transition: margin-left 0.5s ease;
613
+ }
614
+ .post-grid {
615
+ display: grid;
616
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
617
+ gap: 20px;
618
+ }
619
+ .post-item {
620
+ background: rgba(13, 27, 42, 0.85);
621
+ padding: 15px;
622
+ border-radius: 12px;
623
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
624
+ text-decoration: none;
625
+ color: #00ffcc;
626
+ transition: all 0.3s ease;
627
+ animation: holographic 2s infinite;
628
+ }
629
+ .post-item:hover {
630
+ transform: scale(1.05);
631
+ box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
632
+ }
633
+ .post-preview {
634
+ width: 100%;
635
+ border-radius: 8px;
636
+ height: 200px;
637
+ object-fit: cover;
638
+ cursor: pointer;
639
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
640
+ }
641
+ .modal {
642
+ display: none;
643
+ position: fixed;
644
+ top: 0;
645
+ left: 0;
646
+ width: 100%;
647
+ height: 100%;
648
+ background: rgba(0, 0, 0, 0.9);
649
+ z-index: 2000;
650
+ justify-content: center;
651
+ align-items: center;
652
+ }
653
+ .modal img {
654
+ max-width: 90%;
655
+ max-height: 90%;
656
+ object-fit: contain;
657
+ transform: scale(1);
658
+ transition: transform 0.2s ease;
659
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
660
+ }
661
+ .stats {
662
+ font-size: 0.9em;
663
+ color: #ff007a;
664
+ margin-top: 5px;
665
+ text-shadow: 0 0 5px #ff007a;
666
+ }
667
+ .username-link {
668
+ color: #00ffcc;
669
+ text-decoration: none;
670
+ font-weight: 600;
671
+ transition: all 0.3s ease;
672
+ }
673
+ .username-link:hover {
674
+ color: #ff007a;
675
+ text-shadow: 0 0 10px #ff007a;
676
+ }
677
  .search-container { margin-bottom: 20px; }
678
+ .search-input {
679
+ width: 70%;
680
+ padding: 12px;
681
+ border: 1px solid #ff007a;
682
+ border-radius: 8px;
683
+ background: rgba(0, 0, 0, 0.5);
684
+ color: #00ffcc;
685
+ text-shadow: 0 0 5px #00ffcc;
686
+ transition: all 0.3s ease;
687
+ }
688
+ .search-input:focus {
689
+ border-color: #00ffcc;
690
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
691
+ outline: none;
692
+ }
693
+ .search-btn {
694
+ padding: 12px 20px;
695
+ background: #ff007a;
696
+ color: #00ffcc;
697
+ border: none;
698
+ border-radius: 8px;
699
+ cursor: pointer;
700
+ transition: all 0.3s ease;
701
+ box-shadow: 0 0 10px #ff007a;
702
+ }
703
+ .search-btn:hover {
704
+ background: #00ffcc;
705
+ color: #ff007a;
706
+ box-shadow: 0 0 20px #00ffcc;
707
+ }
708
+ h1 {
709
+ color: #ff007a;
710
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
711
+ animation: neon-flicker 1.5s infinite alternate;
712
+ }
713
+ @keyframes neon-flicker {
714
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
715
+ 20%, 24%, 55% { opacity: 0.7; }
716
+ }
717
+ @keyframes holographic {
718
+ 0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
719
+ 50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
720
+ 100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
721
+ }
722
  @media (max-width: 768px) {
723
  .sidebar { transform: translateX(-100%); width: 200px; }
724
  .sidebar.active { transform: translateX(0); }
 
877
  <head>
878
  <meta charset="UTF-8">
879
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
880
+ <title>OstenHost - {{ post['title'] }}</title>
881
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
882
  <style>
883
+ body {
884
+ font-family: 'Orbitron', sans-serif;
885
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
886
+ margin: 0;
887
+ padding: 0;
888
+ min-height: 100vh;
889
+ overflow-x: hidden;
890
+ color: #00ffcc;
891
+ text-shadow: 0 0 5px #00ffcc;
892
+ }
893
+ .sidebar {
894
+ position: fixed;
895
+ left: 0;
896
+ top: 0;
897
+ width: 250px;
898
+ height: 100%;
899
+ background: rgba(13, 27, 42, 0.9);
900
+ padding: 20px;
901
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
902
+ transition: transform 0.5s ease;
903
+ z-index: 1000;
904
+ border-right: 2px solid #00ffcc;
905
+ }
906
+ .sidebar.active { transform: translateX(0); }
907
+ .sidebar-header {
908
+ display: flex;
909
+ justify-content: space-between;
910
+ align-items: center;
911
+ margin-bottom: 20px;
912
+ }
913
+ .nav-brand {
914
+ font-size: 1.8em;
915
+ font-weight: 700;
916
+ color: #ff007a;
917
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
918
+ animation: neon-flicker 1.5s infinite alternate;
919
+ }
920
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
921
+ .nav-link {
922
+ display: flex;
923
+ align-items: center;
924
+ gap: 10px;
925
+ padding: 12px 15px;
926
+ background: rgba(0, 255, 204, 0.1);
927
+ color: #00ffcc;
928
+ text-decoration: none;
929
+ border-radius: 8px;
930
+ transition: all 0.3s ease;
931
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
932
+ }
933
+ .nav-link:hover {
934
+ background: rgba(0, 255, 204, 0.3);
935
+ color: #ff007a;
936
+ transform: translateX(10px);
937
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
938
+ }
939
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
940
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
941
+ .menu-btn {
942
+ display: none;
943
+ font-size: 28px;
944
+ background: rgba(13, 27, 42, 0.9);
945
+ border: none;
946
+ color: #00ffcc;
947
+ cursor: pointer;
948
+ position: fixed;
949
+ top: 15px;
950
+ left: 15px;
951
+ z-index: 1001;
952
+ padding: 5px 10px;
953
+ border-radius: 5px;
954
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
955
+ }
956
+ .container {
957
+ max-width: 800px;
958
+ margin: 20px auto 20px 270px;
959
+ background: rgba(13, 27, 42, 0.85);
960
+ padding: 20px;
961
+ border-radius: 12px;
962
+ box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
963
+ transition: margin-left 0.5s ease;
964
+ animation: holographic 2s infinite;
965
+ }
966
+ video, img {
967
+ width: 100%;
968
+ border-radius: 8px;
969
+ max-height: 400px;
970
+ object-fit: cover;
971
+ cursor: pointer;
972
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
973
+ }
974
+ .btn {
975
+ display: inline-block;
976
+ margin: 10px 0;
977
+ padding: 12px 20px;
978
+ background: #ff007a;
979
+ color: #00ffcc;
980
+ text-decoration: none;
981
+ border-radius: 8px;
982
+ border: none;
983
+ cursor: pointer;
984
+ transition: all 0.3s ease;
985
+ box-shadow: 0 0 10px #ff007a;
986
+ }
987
+ .btn:hover {
988
+ background: #00ffcc;
989
+ color: #ff007a;
990
+ box-shadow: 0 0 20px #00ffcc;
991
+ }
992
+ .like-btn.liked { background: rgba(255, 0, 122, 0.9); }
993
+ .like-btn.liked:hover { background: rgba(255, 0, 122, 1); }
994
+ textarea {
995
+ width: 100%;
996
+ padding: 12px;
997
+ margin: 10px 0;
998
+ border: 1px solid #ff007a;
999
+ border-radius: 8px;
1000
+ resize: vertical;
1001
+ background: rgba(0, 0, 0, 0.5);
1002
+ color: #00ffcc;
1003
+ text-shadow: 0 0 5px #00ffcc;
1004
+ transition: all 0.3s ease;
1005
+ }
1006
+ textarea:focus {
1007
+ border-color: #00ffcc;
1008
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
1009
+ outline: none;
1010
+ }
1011
+ .comment {
1012
+ border-top: 1px solid #ff007a;
1013
+ padding: 10px 0;
1014
+ text-shadow: 0 0 5px #00ffcc;
1015
+ }
1016
+ .modal {
1017
+ display: none;
1018
+ position: fixed;
1019
+ top: 0;
1020
+ left: 0;
1021
+ width: 100%;
1022
+ height: 100%;
1023
+ background: rgba(0, 0, 0, 0.9);
1024
+ z-index: 2000;
1025
+ justify-content: center;
1026
+ align-items: center;
1027
+ }
1028
+ .modal img {
1029
+ max-width: 90%;
1030
+ max-height: 90%;
1031
+ object-fit: contain;
1032
+ transform: scale(1);
1033
+ transition: transform 0.2s ease;
1034
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
1035
+ }
1036
+ .username-link {
1037
+ color: #00ffcc;
1038
+ text-decoration: none;
1039
+ font-weight: 600;
1040
+ transition: all 0.3s ease;
1041
+ }
1042
+ .username-link:hover {
1043
+ color: #ff007a;
1044
+ text-shadow: 0 0 10px #ff007a;
1045
+ }
1046
+ h1, h3 {
1047
+ color: #ff007a;
1048
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
1049
+ animation: neon-flicker 1.5s infinite alternate;
1050
+ }
1051
+ @keyframes neon-flicker {
1052
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
1053
+ 20%, 24%, 55% { opacity: 0.7; }
1054
+ }
1055
+ @keyframes holographic {
1056
+ 0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
1057
+ 50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
1058
+ 100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
1059
+ }
1060
  @media (max-width: 768px) {
1061
  .sidebar { transform: translateX(-100%); width: 200px; }
1062
  .sidebar.active { transform: translateX(0); }
 
1103
  {% endfor %}
1104
  <a href="{{ url_for('feed') }}" class="btn">Назад к ленте</a>
1105
  {% if not is_authenticated %}
1106
+ <p><a href="{{ url_for('login') }}" style="color: #ff007a; text-shadow: 0 0 5px #ff007a;">Войдите</a>, чтобы ставить лайки и комментировать.</p>
1107
  {% endif %}
1108
  </div>
1109
  <div class="modal" id="imageModal" onclick="closeModal(event)">
 
1239
  <head>
1240
  <meta charset="UTF-8">
1241
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
1242
+ <title>OstenHost - Профиль {{ username }}</title>
1243
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
1244
  <style>
1245
+ body {
1246
+ font-family: 'Orbitron', sans-serif;
1247
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
1248
+ margin: 0;
1249
+ padding: 0;
1250
+ min-height: 100vh;
1251
+ overflow-x: hidden;
1252
+ color: #00ffcc;
1253
+ text-shadow: 0 0 5px #00ffcc;
1254
+ }
1255
+ .sidebar {
1256
+ position: fixed;
1257
+ left: 0;
1258
+ top: 0;
1259
+ width: 250px;
1260
+ height: 100%;
1261
+ background: rgba(13, 27, 42, 0.9);
1262
+ padding: 20px;
1263
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
1264
+ transition: transform 0.5s ease;
1265
+ z-index: 1000;
1266
+ border-right: 2px solid #00ffcc;
1267
+ }
1268
+ .sidebar.active { transform: translateX(0); }
1269
+ .sidebar-header {
1270
+ display: flex;
1271
+ justify-content: space-between;
1272
+ align-items: center;
1273
+ margin-bottom: 20px;
1274
+ }
1275
+ .nav-brand {
1276
+ font-size: 1.8em;
1277
+ font-weight: 700;
1278
+ color: #ff007a;
1279
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
1280
+ animation: neon-flicker 1.5s infinite alternate;
1281
+ }
1282
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
1283
+ .nav-link {
1284
+ display: flex;
1285
+ align-items: center;
1286
+ gap: 10px;
1287
+ padding: 12px 15px;
1288
+ background: rgba(0, 255, 204, 0.1);
1289
+ color: #00ffcc;
1290
+ text-decoration: none;
1291
+ border-radius: 8px;
1292
+ transition: all 0.3s ease;
1293
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
1294
+ }
1295
+ .nav-link:hover {
1296
+ background: rgba(0, 255, 204, 0.3);
1297
+ color: #ff007a;
1298
+ transform: translateX(10px);
1299
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
1300
+ }
1301
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
1302
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
1303
+ .menu-btn {
1304
+ display: none;
1305
+ font-size: 28px;
1306
+ background: rgba(13, 27, 42, 0.9);
1307
+ border: none;
1308
+ color: #00ffcc;
1309
+ cursor: pointer;
1310
+ position: fixed;
1311
+ top: 15px;
1312
+ left: 15px;
1313
+ z-index: 1001;
1314
+ padding: 5px 10px;
1315
+ border-radius: 5px;
1316
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
1317
+ }
1318
+ .container {
1319
+ max-width: 800px;
1320
+ margin: 20px auto 20px 270px;
1321
+ padding: 20px;
1322
+ transition: margin-left 0.5s ease;
1323
+ }
1324
+ .post-grid {
1325
+ display: grid;
1326
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1327
+ gap: 20px;
1328
+ }
1329
+ .post-item {
1330
+ background: rgba(13, 27, 42, 0.85);
1331
+ padding: 15px;
1332
+ border-radius: 12px;
1333
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
1334
+ transition: all 0.3s ease;
1335
+ animation: holographic 2s infinite;
1336
+ }
1337
+ .post-item:hover {
1338
+ transform: scale(1.05);
1339
+ box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
1340
+ }
1341
+ .post-preview {
1342
+ width: 100%;
1343
+ border-radius: 8px;
1344
+ height: 200px;
1345
+ object-fit: cover;
1346
+ cursor: pointer;
1347
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
1348
+ }
1349
+ .btn {
1350
+ display: inline-block;
1351
+ margin: 10px 0;
1352
+ padding: 12px 20px;
1353
+ background: #ff007a;
1354
+ color: #00ffcc;
1355
+ text-decoration: none;
1356
+ border-radius: 8px;
1357
+ border: none;
1358
+ cursor: pointer;
1359
+ transition: all 0.3s ease;
1360
+ box-shadow: 0 0 10px #ff007a;
1361
+ }
1362
+ .btn:hover {
1363
+ background: #00ffcc;
1364
+ color: #ff007a;
1365
+ box-shadow: 0 0 20px #00ffcc;
1366
+ }
1367
+ .delete-btn { background: rgba(255, 0, 122, 0.9); }
1368
+ .delete-btn:hover { background: rgba(255, 0, 122, 1); }
1369
+ .stats {
1370
+ font-size: 0.9em;
1371
+ color: #ff007a;
1372
+ margin-top: 5px;
1373
+ text-shadow: 0 0 5px #ff007a;
1374
+ }
1375
+ .modal {
1376
+ display: none;
1377
+ position: fixed;
1378
+ top: 0;
1379
+ left: 0;
1380
+ width: 100%;
1381
+ height: 100%;
1382
+ background: rgba(0, 0, 0, 0.9);
1383
+ z-index: 2000;
1384
+ justify-content: center;
1385
+ align-items: center;
1386
+ }
1387
+ .modal img {
1388
+ max-width: 90%;
1389
+ max-height: 90%;
1390
+ object-fit: contain;
1391
+ transform: scale(1);
1392
+ transition: transform 0.2s ease;
1393
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
1394
+ }
1395
+ .avatar {
1396
+ width: 100px;
1397
+ height: 100px;
1398
+ border-radius: 50%;
1399
+ object-fit: cover;
1400
+ margin-bottom: 10px;
1401
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
1402
+ }
1403
  .profile-info { margin-bottom: 20px; }
1404
+ textarea, input[type="text"] {
1405
+ width: 100%;
1406
+ padding: 12px;
1407
+ margin: 10px 0;
1408
+ border: 1px solid #ff007a;
1409
+ border-radius: 8px;
1410
+ background: rgba(0, 0, 0, 0.5);
1411
+ color: #00ffcc;
1412
+ text-shadow: 0 0 5px #00ffcc;
1413
+ transition: all 0.3s ease;
1414
+ }
1415
+ textarea:focus, input[type="text"]:focus {
1416
+ border-color: #00ffcc;
1417
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
1418
+ outline: none;
1419
+ }
1420
  .share-btn { background: rgba(16, 185, 129, 0.9); }
1421
  .share-btn:hover { background: rgba(16, 185, 129, 1); }
1422
+ h1, h2, h3 {
1423
+ color: #ff007a;
1424
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
1425
+ animation: neon-flicker 1.5s infinite alternate;
1426
+ }
1427
+ @keyframes neon-flicker {
1428
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
1429
+ 20%, 24%, 55% { opacity: 0.7; }
1430
+ }
1431
+ @keyframes holographic {
1432
+ 0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
1433
+ 50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
1434
+ 100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
1435
+ }
1436
  @media (max-width: 768px) {
1437
  .sidebar { transform: translateX(-100%); width: 200px; }
1438
  .sidebar.active { transform: translateX(0); }
 
1458
  {% endif %}
1459
  <p>{{ bio }}</p>
1460
  {% if link %}
1461
+ <p><a href="{{ link }}" target="_blank" style="color: #00ffcc; text-shadow: 0 0 5px #00ffcc;">{{ link }}</a></p>
1462
  {% endif %}
1463
  <p>Всего просмотров: {{ total_views }} | Всего лайков: {{ total_likes }}</p>
1464
  <button class="btn share-btn" onclick="copyProfileLink()">Поделиться профилем</button>
 
1615
  <head>
1616
  <meta charset="UTF-8">
1617
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
1618
+ <title>OstenHost - Профиль {{ username }}</title>
1619
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
1620
  <style>
1621
+ body {
1622
+ font-family: 'Orbitron', sans-serif;
1623
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
1624
+ margin: 0;
1625
+ padding: 0;
1626
+ min-height: 100vh;
1627
+ overflow-x: hidden;
1628
+ color: #00ffcc;
1629
+ text-shadow: 0 0 5px #00ffcc;
1630
+ }
1631
+ .sidebar {
1632
+ position: fixed;
1633
+ left: 0;
1634
+ top: 0;
1635
+ width: 250px;
1636
+ height: 100%;
1637
+ background: rgba(13, 27, 42, 0.9);
1638
+ padding: 20px;
1639
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
1640
+ transition: transform 0.5s ease;
1641
+ z-index: 1000;
1642
+ border-right: 2px solid #00ffcc;
1643
+ }
1644
+ .sidebar.active { transform: translateX(0); }
1645
+ .sidebar-header {
1646
+ display: flex;
1647
+ justify-content: space-between;
1648
+ align-items: center;
1649
+ margin-bottom: 20px;
1650
+ }
1651
+ .nav-brand {
1652
+ font-size: 1.8em;
1653
+ font-weight: 700;
1654
+ color: #ff007a;
1655
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
1656
+ animation: neon-flicker 1.5s infinite alternate;
1657
+ }
1658
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
1659
+ .nav-link {
1660
+ display: flex;
1661
+ align-items: center;
1662
+ gap: 10px;
1663
+ padding: 12px 15px;
1664
+ background: rgba(0, 255, 204, 0.1);
1665
+ color: #00ffcc;
1666
+ text-decoration: none;
1667
+ border-radius: 8px;
1668
+ transition: all 0.3s ease;
1669
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
1670
+ }
1671
+ .nav-link:hover {
1672
+ background: rgba(0, 255, 204, 0.3);
1673
+ color: #ff007a;
1674
+ transform: translateX(10px);
1675
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
1676
+ }
1677
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
1678
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
1679
+ .menu-btn {
1680
+ display: none;
1681
+ font-size: 28px;
1682
+ background: rgba(13, 27, 42, 0.9);
1683
+ border: none;
1684
+ color: #00ffcc;
1685
+ cursor: pointer;
1686
+ position: fixed;
1687
+ top: 15px;
1688
+ left: 15px;
1689
+ z-index: 1001;
1690
+ padding: 5px 10px;
1691
+ border-radius: 5px;
1692
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
1693
+ }
1694
+ .container {
1695
+ max-width: 800px;
1696
+ margin: 20px auto 20px 270px;
1697
+ padding: 20px;
1698
+ transition: margin-left 0.5s ease;
1699
+ }
1700
+ .post-grid {
1701
+ display: grid;
1702
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
1703
+ gap: 20px;
1704
+ }
1705
+ .post-item {
1706
+ background: rgba(13, 27, 42, 0.85);
1707
+ padding: 15px;
1708
+ border-radius: 12px;
1709
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
1710
+ transition: all 0.3s ease;
1711
+ animation: holographic 2s infinite;
1712
+ }
1713
+ .post-item:hover {
1714
+ transform: scale(1.05);
1715
+ box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
1716
+ }
1717
+ .post-preview {
1718
+ width: 100%;
1719
+ border-radius: 8px;
1720
+ height: 200px;
1721
+ object-fit: cover;
1722
+ cursor: pointer;
1723
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
1724
+ }
1725
+ .btn {
1726
+ display: inline-block;
1727
+ margin: 10px 0;
1728
+ padding: 12px 20px;
1729
+ background: #ff007a;
1730
+ color: #00ffcc;
1731
+ text-decoration: none;
1732
+ border-radius: 8px;
1733
+ border: none;
1734
+ cursor: pointer;
1735
+ transition: all 0.3s ease;
1736
+ box-shadow: 0 0 10px #ff007a;
1737
+ }
1738
+ .btn:hover {
1739
+ background: #00ffcc;
1740
+ color: #ff007a;
1741
+ box-shadow: 0 0 20px #00ffcc;
1742
+ }
1743
+ .stats {
1744
+ font-size: 0.9em;
1745
+ color: #ff007a;
1746
+ margin-top: 5px;
1747
+ text-shadow: 0 0 5px #ff007a;
1748
+ }
1749
+ .modal {
1750
+ display: none;
1751
+ position: fixed;
1752
+ top: 0;
1753
+ left: 0;
1754
+ width: 100%;
1755
+ height: 100%;
1756
+ background: rgba(0, 0, 0, 0.9);
1757
+ z-index: 2000;
1758
+ justify-content: center;
1759
+ align-items: center;
1760
+ }
1761
+ .modal img {
1762
+ max-width: 90%;
1763
+ max-height: 90%;
1764
+ object-fit: contain;
1765
+ transform: scale(1);
1766
+ transition: transform 0.2s ease;
1767
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
1768
+ }
1769
+ .username-link {
1770
+ color: #00ffcc;
1771
+ text-decoration: none;
1772
+ font-weight: 600;
1773
+ transition: all 0.3s ease;
1774
+ }
1775
+ .username-link:hover {
1776
+ color: #ff007a;
1777
+ text-shadow: 0 0 10px #ff007a;
1778
+ }
1779
+ .avatar {
1780
+ width: 100px;
1781
+ height: 100px;
1782
+ border-radius: 50%;
1783
+ object-fit: cover;
1784
+ margin-bottom: 10px;
1785
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
1786
+ }
1787
  .profile-info { margin-bottom: 20px; }
1788
  .share-btn { background: rgba(16, 185, 129, 0.9); }
1789
  .share-btn:hover { background: rgba(16, 185, 129, 1); }
1790
+ h1, h2, h3 {
1791
+ color: #ff007a;
1792
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
1793
+ animation: neon-flicker 1.5s infinite alternate;
1794
+ }
1795
+ @keyframes neon-flicker {
1796
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
1797
+ 20%, 24%, 55% { opacity: 0.7; }
1798
+ }
1799
+ @keyframes holographic {
1800
+ 0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
1801
+ 50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
1802
+ 100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
1803
+ }
1804
  @media (max-width: 768px) {
1805
  .sidebar { transform: translateX(-100%); width: 200px; }
1806
  .sidebar.active { transform: translateX(0); }
 
1826
  {% endif %}
1827
  <p>{{ bio }}</p>
1828
  {% if link %}
1829
+ <p><a href="{{ link }}" target="_blank" style="color: #00ffcc; text-shadow: 0 0 5px #00ffcc;">{{ link }}</a></p>
1830
  {% endif %}
1831
  <p>Всего просмотров: {{ total_views }} | Всего лайков: {{ total_likes }}</p>
1832
  <button class="btn share-btn" onclick="copyProfileLink()">Поделиться профилем</button>
 
2012
  <head>
2013
  <meta charset="UTF-8">
2014
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
2015
+ <title>OstenHost - Загрузка контента</title>
2016
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
2017
  <style>
2018
+ body {
2019
+ font-family: 'Orbitron', sans-serif;
2020
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
2021
+ margin: 0;
2022
+ padding: 0;
2023
+ min-height: 100vh;
2024
+ overflow-x: hidden;
2025
+ color: #00ffcc;
2026
+ text-shadow: 0 0 5px #00ffcc;
2027
+ }
2028
+ .sidebar {
2029
+ position: fixed;
2030
+ left: 0;
2031
+ top: 0;
2032
+ width: 250px;
2033
+ height: 100%;
2034
+ background: rgba(13, 27, 42, 0.9);
2035
+ padding: 20px;
2036
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
2037
+ transition: transform 0.5s ease;
2038
+ z-index: 1000;
2039
+ border-right: 2px solid #00ffcc;
2040
+ }
2041
+ .sidebar.active { transform: translateX(0); }
2042
+ .sidebar-header {
2043
+ display: flex;
2044
+ justify-content: space-between;
2045
+ align-items: center;
2046
+ margin-bottom: 20px;
2047
+ }
2048
+ .nav-brand {
2049
+ font-size: 1.8em;
2050
+ font-weight: 700;
2051
+ color: #ff007a;
2052
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
2053
+ animation: neon-flicker 1.5s infinite alternate;
2054
+ }
2055
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
2056
+ .nav-link {
2057
+ display: flex;
2058
+ align-items: center;
2059
+ gap: 10px;
2060
+ padding: 12px 15px;
2061
+ background: rgba(0, 255, 204, 0.1);
2062
+ color: #00ffcc;
2063
+ text-decoration: none;
2064
+ border-radius: 8px;
2065
+ transition: all 0.3s ease;
2066
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
2067
+ }
2068
+ .nav-link:hover {
2069
+ background: rgba(0, 255, 204, 0.3);
2070
+ color: #ff007a;
2071
+ transform: translateX(10px);
2072
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
2073
+ }
2074
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
2075
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
2076
+ .menu-btn {
2077
+ display: none;
2078
+ font-size: 28px;
2079
+ background: rgba(13, 27, 42, 0.9);
2080
+ border: none;
2081
+ color: #00ffcc;
2082
+ cursor: pointer;
2083
+ position: fixed;
2084
+ top: 15px;
2085
+ left: 15px;
2086
+ z-index: 1001;
2087
+ padding: 5px 10px;
2088
+ border-radius: 5px;
2089
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
2090
+ }
2091
+ .container {
2092
+ max-width: 600px;
2093
+ margin: 20px auto 20px 270px;
2094
+ background: rgba(13, 27, 42, 0.85);
2095
+ padding: 20px;
2096
+ border-radius: 12px;
2097
+ box-shadow: 0 0 30px rgba(0, 255, 204, 0.2);
2098
+ transition: margin-left 0.5s ease;
2099
+ animation: holographic 2s infinite;
2100
+ }
2101
+ input, textarea {
2102
+ width: 100%;
2103
+ padding: 12px;
2104
+ margin: 10px 0;
2105
+ border: 1px solid #ff007a;
2106
+ border-radius: 8px;
2107
+ box-sizing: border-box;
2108
+ background: rgba(0, 0, 0, 0.5);
2109
+ color: #00ffcc;
2110
+ text-shadow: 0 0 5px #00ffcc;
2111
+ transition: all 0.3s ease;
2112
+ }
2113
+ input:focus, textarea:focus {
2114
+ border-color: #00ffcc;
2115
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
2116
+ outline: none;
2117
+ }
2118
+ button {
2119
+ padding: 12px;
2120
+ background: #ff007a;
2121
+ color: #00ffcc;
2122
+ border: none;
2123
+ border-radius: 8px;
2124
+ cursor: pointer;
2125
+ width: 100%;
2126
+ transition: all 0.3s ease;
2127
+ box-shadow: 0 0 10px #ff007a;
2128
+ }
2129
+ button:hover {
2130
+ background: #00ffcc;
2131
+ color: #ff007a;
2132
+ box-shadow: 0 0 20px #00ffcc;
2133
+ }
2134
  #progress-container { margin-top: 10px; }
2135
+ #progress-bar {
2136
+ width: 0%;
2137
+ height: 20px;
2138
+ background: #00ffcc;
2139
+ border-radius: 8px;
2140
+ transition: width 0.3s ease;
2141
+ box-shadow: 0 0 10px #00ffcc;
2142
+ }
2143
+ h1 {
2144
+ color: #ff007a;
2145
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
2146
+ animation: neon-flicker 1.5s infinite alternate;
2147
+ }
2148
+ @keyframes neon-flicker {
2149
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
2150
+ 20%, 24%, 55% { opacity: 0.7; }
2151
+ }
2152
+ @keyframes holographic {
2153
+ 0% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
2154
+ 50% { box-shadow: 0 0 30px rgba(255, 0, 122, 0.2); }
2155
+ 100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.2); }
2156
+ }
2157
  @media (max-width: 768px) {
2158
  .sidebar { transform: translateX(-100%); width: 200px; }
2159
  .sidebar.active { transform: translateX(0); }
 
2247
  <head>
2248
  <meta charset="UTF-8">
2249
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
2250
+ <title>OstenHost - Админ-панель</title>
2251
+ <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
2252
  <style>
2253
+ body {
2254
+ font-family: 'Orbitron', sans-serif;
2255
+ background: linear-gradient(135deg, #0d1b2a, #1b263b);
2256
+ margin: 0;
2257
+ padding: 0;
2258
+ min-height: 100vh;
2259
+ overflow-x: hidden;
2260
+ color: #00ffcc;
2261
+ text-shadow: 0 0 5px #00ffcc;
2262
+ }
2263
+ .sidebar {
2264
+ position: fixed;
2265
+ left: 0;
2266
+ top: 0;
2267
+ width: 250px;
2268
+ height: 100%;
2269
+ background: rgba(13, 27, 42, 0.9);
2270
+ padding: 20px;
2271
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
2272
+ transition: transform 0.5s ease;
2273
+ z-index: 1000;
2274
+ border-right: 2px solid #00ffcc;
2275
+ }
2276
+ .sidebar.active { transform: translateX(0); }
2277
+ .sidebar-header {
2278
+ display: flex;
2279
+ justify-content: space-between;
2280
+ align-items: center;
2281
+ margin-bottom: 20px;
2282
+ }
2283
+ .nav-brand {
2284
+ font-size: 1.8em;
2285
+ font-weight: 700;
2286
+ color: #ff007a;
2287
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
2288
+ animation: neon-flicker 1.5s infinite alternate;
2289
+ }
2290
+ .nav-links { display: flex; flex-direction: column; gap: 15px; }
2291
+ .nav-link {
2292
+ display: flex;
2293
+ align-items: center;
2294
+ gap: 10px;
2295
+ padding: 12px 15px;
2296
+ background: rgba(0, 255, 204, 0.1);
2297
+ color: #00ffcc;
2298
+ text-decoration: none;
2299
+ border-radius: 8px;
2300
+ transition: all 0.3s ease;
2301
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.2);
2302
+ }
2303
+ .nav-link:hover {
2304
+ background: rgba(0, 255, 204, 0.3);
2305
+ color: #ff007a;
2306
+ transform: translateX(10px);
2307
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
2308
+ }
2309
+ .logout-btn { background: rgba(255, 0, 122, 0.1); color: #ff007a; }
2310
+ .logout-btn:hover { background: rgba(255, 0, 122, 0.3); color: #00ffcc; }
2311
+ .menu-btn {
2312
+ display: none;
2313
+ font-size: 28px;
2314
+ background: rgba(13, 27, 42, 0.9);
2315
+ border: none;
2316
+ color: #00ffcc;
2317
+ cursor: pointer;
2318
+ position: fixed;
2319
+ top: 15px;
2320
+ left: 15px;
2321
+ z-index: 1001;
2322
+ padding: 5px 10px;
2323
+ border-radius: 5px;
2324
+ box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
2325
+ }
2326
+ .container {
2327
+ max-width: 1200px;
2328
+ margin: 20px auto 20px 270px;
2329
+ padding: 20px;
2330
+ transition: margin-left 0.5s ease;
2331
+ }
2332
+ .post-grid {
2333
+ display: grid;
2334
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
2335
+ gap: 20px;
2336
+ }
2337
+ .post-item {
2338
+ background: rgba(13, 27, 42, 0.85);
2339
+ padding: 15px;
2340
+ border-radius: 12px;
2341
+ box-shadow: 0 0 20px rgba(0, 255, 204, 0.2);
2342
+ transition: all 0.3s ease;
2343
+ animation: holographic 2s infinite;
2344
+ }
2345
+ .post-item:hover {
2346
+ transform: scale(1.05);
2347
+ box-shadow: 0 0 30px rgba(255, 0, 122, 0.4);
2348
+ }
2349
+ .post-preview {
2350
+ width: 100%;
2351
+ border-radius: 8px;
2352
+ height: 200px;
2353
+ object-fit: cover;
2354
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
2355
+ }
2356
+ .delete-btn {
2357
+ padding: 10px;
2358
+ background: #ff007a;
2359
+ color: #00ffcc;
2360
+ border: none;
2361
+ border-radius: 8px;
2362
+ cursor: pointer;
2363
+ width: 100%;
2364
+ transition: all 0.3s ease;
2365
+ box-shadow: 0 0 10px #ff007a;
2366
+ }
2367
+ .delete-btn:hover {
2368
+ background: #00ffcc;
2369
+ color: #ff007a;
2370
+ box-shadow: 0 0 20px #00ffcc;
2371
+ }
2372
  .search-container { margin-bottom: 20px; }
2373
+ .search-input {
2374
+ width: 70%;
2375
+ padding: 12px;
2376
+ border: 1px solid #ff007a;
2377
+ border-radius: 8px;
2378
+ background: rgba(0, 0, 0, 0.5);
2379
+ color: #00ffcc;
2380
+ text-shadow: 0 0 5px #00ffcc;
2381
+ transition: all 0.3s ease;
2382
+ }
2383
+ .search-input:focus {
2384
+ border-color: #00ffcc;
2385
+ box-shadow: 0 0 15px rgba(0, 255, 204, 0.5);
2386
+ outline: none;
2387
+ }
2388
+ .search-btn {
2389
+ padding: 12px 20px;
2390
+ background: #ff007a;
2391
+ color: #00ffcc;
2392
+ border: none;
2393
+ border-radius: 8px;
2394
+ cursor: pointer;
2395
+ transition: all 0.3s ease;
2396
+ box-shadow: 0 0 10px #ff007a;
2397
+ }
2398
+ .search-btn:hover {
2399
+ background: #00ffcc;
2400
+ color: #ff007a;
2401
+ box-shadow: 0 0 20px #00ffcc;
2402
+ }
2403
+ .stats {
2404
+ font-size: 0.9em;
2405
+ color: #ff007a;
2406
+ margin-top: 5px;
2407
+ text-shadow: 0 0 5px #ff007a;
2408
+ }
2409
+ .username-link {
2410
+ color: #00ffcc;
2411
+ text-decoration: none;
2412
+ font-weight: 600;
2413
+ transition: all 0.3s ease;
2414
+ }
2415
+ .username-link:hover {
2416
+ color: #ff007a;
2417
+ text-shadow: 0 0 10px #ff007a;
2418
+ }
2419
+ h1, h2 {
2420
+ color: #ff007a;
2421
+ text-shadow: 0 0 10px #ff007a, 0 0 20px #ff007a;
2422
+ animation: neon-flicker 1.5s infinite alternate;
2423
+ }
2424
+ @keyframes neon-flicker {
2425
+ 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
2426
+ 20%, 24%, 55% { opacity: 0.7; }
2427
+ }
2428
+ @keyframes holographic {
2429
+ 0% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
2430
+ 50% { box-shadow: 0 0 20px rgba(255, 0, 122, 0.2); }
2431
+ 100% { box-shadow: 0 0 20px rgba(0, 255, 204, 0.2); }
2432
+ }
2433
  @media (max-width: 768px) {
2434
  .sidebar { transform: translateX(-100%); width: 200px; }
2435
  .sidebar.active { transform: translateX(0); }
 
2509
  if __name__ == '__main__':
2510
  backup_thread = threading.Thread(target=periodic_backup, daemon=True)
2511
  backup_thread.start()
2512
+ app.run(debug=True, host='0.0.0.0', port=7860)
2513
+