diff --git "a/app.py" "b/app.py" --- "a/app.py" +++ "b/app.py" @@ -13,7 +13,7 @@ import random app = Flask(__name__) app.secret_key = os.getenv("FLASK_SECRET_KEY", "supersecretkey") DATA_FILE = 'data_adusis.json' -REPO_ID = "Eluza133/w1f9" +REPO_ID = "Eluza133/A12d12s12" HF_TOKEN_WRITE = os.getenv("HF_TOKEN") HF_TOKEN_READ = os.getenv("HF_TOKEN_READ") or HF_TOKEN_WRITE @@ -124,15 +124,15 @@ BASE_STYLE = ''' --primary: #ff4d6d; --secondary: #00ddeb; --accent: #8b5cf6; - --background-light: #f5f6fa; - --background-dark: #1a1625; - --card-bg: rgba(255, 255, 255, 0.95); - --card-bg-dark: rgba(40, 35, 60, 0.95); + --background-light: #f7f9fc; + --background-dark: #1e1b2e; + --card-bg: rgba(255, 255, 255, 0.97); + --card-bg-dark: rgba(40, 35, 60, 0.97); --text-light: #2a1e5a; --text-dark: #e8e1ff; - --shadow: 0 10px 30px rgba(0, 0, 0, 0.2); - --glass-bg: rgba(255, 255, 255, 0.15); - --transition: all 0.3s ease; + --shadow: 0 12px 40px rgba(0, 0, 0, 0.15); + --glass-bg: rgba(255, 255, 255, 0.2); + --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); --online: #34c759; --offline: #ff3b30; } @@ -141,7 +141,7 @@ body { font-family: 'Inter', sans-serif; background: var(--background-light); color: var(--text-light); - line-height: 1.6; + line-height: 1.7; overflow-x: hidden; } body.dark { @@ -155,8 +155,8 @@ body.dark { width: 300px; height: 100%; background: var(--glass-bg); - backdrop-filter: blur(20px); - padding: 25px; + backdrop-filter: blur(15px); + padding: 30px; box-shadow: var(--shadow); z-index: 1000; transition: transform var(--transition); @@ -168,20 +168,24 @@ body.dark { display: flex; align-items: center; gap: 15px; - margin-bottom: 35px; + margin-bottom: 40px; } .nav-brand { - font-size: 1.8em; + font-size: 2em; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; color: transparent; } .logo { - width: 40px; - height: 40px; - border-radius: 14px; + width: 45px; + height: 45px; + border-radius: 16px; box-shadow: var(--shadow); + transition: transform var(--transition); +} +.logo:hover { + transform: scale(1.1); } .nav-links { display: flex; @@ -192,11 +196,11 @@ body.dark { display: flex; align-items: center; gap: 15px; - padding: 14px 25px; + padding: 15px 25px; background: var(--card-bg); color: var(--text-light); text-decoration: none; - border-radius: 14px; + border-radius: 16px; font-size: 1.1em; font-weight: 600; transition: var(--transition); @@ -207,19 +211,19 @@ body.dark .nav-link { color: var(--text-dark); } .nav-link:hover { - transform: translateX(5px); + transform: translateX(8px); background: var(--primary); color: white; - box-shadow: 0 6px 20px rgba(255, 77, 109, 0.4); + box-shadow: 0 8px 25px rgba(255, 77, 109, 0.5); } .nav-link .badge { position: absolute; right: 15px; background: var(--secondary); color: white; - padding: 4px 10px; - border-radius: 12px; - font-size: 0.8em; + padding: 5px 12px; + border-radius: 14px; + font-size: 0.85em; font-weight: 700; } .logout-btn { @@ -231,7 +235,7 @@ body.dark .nav-link { } .menu-btn { display: none; - font-size: 28px; + font-size: 30px; background: var(--glass-bg); border: none; color: var(--primary); @@ -252,15 +256,15 @@ body.dark .nav-link { .container { margin: 20px auto 20px 320px; max-width: 1200px; - padding: 25px; + padding: 30px; transition: var(--transition); } .btn { - padding: 14px 28px; + padding: 15px 30px; background: var(--primary); color: white; border: none; - border-radius: 14px; + border-radius: 16px; cursor: pointer; font-size: 1.1em; font-weight: 600; @@ -273,14 +277,14 @@ body.dark .nav-link { .btn:hover { transform: scale(1.05); background: #e6415f; - box-shadow: 0 8px 25px rgba(255, 77, 109, 0.5); + box-shadow: 0 10px 30px rgba(255, 77, 109, 0.6); } input, textarea, select { width: 100%; - padding: 14px; + padding: 15px; margin: 12px 0; border: none; - border-radius: 14px; + border-radius: 16px; background: var(--glass-bg); color: var(--text-light); font-size: 1.1em; @@ -292,7 +296,7 @@ body.dark input, body.dark textarea, body.dark select { } input:focus, textarea:focus, select:focus { outline: none; - background: rgba(255, 255, 255, 0.2); + background: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 4px var(--primary); } .modal { @@ -302,7 +306,7 @@ input:focus, textarea:focus, select:focus { left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.85); + background: rgba(0, 0, 0, 0.9); z-index: 2000; justify-content: center; align-items: center; @@ -314,7 +318,7 @@ input:focus, textarea:focus, select:focus { object-fit: contain; border-radius: 20px; box-shadow: var(--shadow); - animation: zoomIn 0.3s ease; + animation: zoomIn 0.4s ease; } .theme-toggle { position: fixed; @@ -325,7 +329,7 @@ input:focus, textarea:focus, select:focus { padding: 12px; border-radius: 50%; cursor: pointer; - font-size: 24px; + font-size: 26px; box-shadow: var(--shadow); transition: var(--transition); } @@ -335,8 +339,8 @@ input:focus, textarea:focus, select:focus { color: white; } .status-dot { - width: 10px; - height: 10px; + width: 12px; + height: 12px; border-radius: 50%; display: inline-block; margin-left: 8px; @@ -344,7 +348,7 @@ input:focus, textarea:focus, select:focus { .online { background: var(--online); } .offline { background: var(--offline); } @keyframes zoomIn { - from { opacity: 0; transform: scale(0.9); } + from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @media (max-width: 900px) { @@ -368,9 +372,10 @@ input:focus, textarea:focus, select:focus { } } @media (max-width: 480px) { - .nav-brand { font-size: 1.5em; } + .nav-brand { font-size: 1.6em; } .nav-link { font-size: 1em; padding: 12px 20px; } .btn { padding: 12px 20px; font-size: 1em; } + .logo { width: 40px; height: 40px; } } ''' @@ -446,7 +451,7 @@ def register(): .container { max-width: 500px; background: var(--card-bg); - padding: 35px; + padding: 40px; border-radius: 20px; box-shadow: var(--shadow); animation: slideUp 0.4s ease; @@ -455,10 +460,10 @@ def register(): background: var(--card-bg-dark); } h1 { - font-size: 2em; + font-size: 2.2em; font-weight: 800; text-align: center; - margin-bottom: 25px; + margin-bottom: 30px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; color: transparent; @@ -467,14 +472,14 @@ def register(): color: var(--secondary); text-align: center; margin-bottom: 15px; - font-size: 1em; + font-size: 1.1em; font-weight: 600; } .link { text-align: center; margin-top: 20px; color: var(--primary); - font-size: 1em; + font-size: 1.1em; text-decoration: none; font-weight: 600; transition: var(--transition); @@ -563,7 +568,7 @@ def login(): .container { max-width: 500px; background: var(--card-bg); - padding: 35px; + padding: 40px; border-radius: 20px; box-shadow: var(--shadow); animation: slideUp 0.4s ease; @@ -572,10 +577,10 @@ def login(): background: var(--card-bg-dark); } h1 { - font-size: 2em; + font-size: 2.2em; font-weight: 800; text-align: center; - margin-bottom: 25px; + margin-bottom: 30px; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; color: transparent; @@ -584,14 +589,14 @@ def login(): color: var(--secondary); text-align: center; margin-bottom: 15px; - font-size: 1em; + font-size: 1.1em; font-weight: 600; } .link { text-align: center; margin-top: 20px; color: var(--primary); - font-size: 1em; + font-size: 1.1em; text-decoration: none; font-weight: 600; transition: var(--transition); @@ -708,23 +713,6 @@ def feed(): 'text': comment_text, 'date': datetime.now().strftime('%Y-%m-%d %H:%M:%S') }] - elif 'share' in request.form: - share_to = request.form.get('share_to') - if share_to == 'chat': - data['general_chat'].append({ - 'sender': username, - 'time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'), - 'post_id': post_id - }) - elif share_to in data['users']: - chat_key = f"{min(username, share_to)}_{max(username, share_to)}" - if chat_key not in data['private_chats']: - data['private_chats'][chat_key] = [] - data['private_chats'][chat_key].append({ - 'sender': username, - 'time': datetime.now().strftime('%Y-%m-%d %H:%M:%S'), - 'post_id': post_id - }) save_data(data) return redirect(url_for('feed')) @@ -766,6 +754,7 @@ def feed(): justify-content: center; background: var(--background-light); overflow: hidden; + transition: background var(--transition); } body.dark .post-container { background: var(--background-dark); @@ -781,33 +770,61 @@ def feed(): width: 100%; height: 100%; z-index: 1; + transition: filter var(--transition); + loading: lazy; + } + .post-media:hover { + filter: brightness(1.1); + } + .play-btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(255, 255, 255, 0.9); + border: none; + border-radius: 50%; + width: 80px; + height: 80px; + font-size: 40px; + color: var(--primary); + cursor: pointer; + z-index: 2; + transition: var(--transition); + } + .play-btn:hover { + background: var(--primary); + color: white; + transform: translate(-50%, -50%) scale(1.1); } .post-overlay { position: absolute; - bottom: 80px; + bottom: 90px; left: 25px; right: 25px; z-index: 2; color: white; - background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); - padding: 20px; - border-radius: 14px; + background: linear-gradient(to top, rgba(0,0,0,0.85), transparent); + padding: 25px; + border-radius: 16px; pointer-events: none; } .post-overlay h2 { - font-size: 1.5em; + font-size: 1.6em; font-weight: 800; - margin-bottom: 10px; - text-shadow: 0 3px 6px rgba(0,0,0,0.9); + margin-bottom: 12px; + text-shadow: 0 4px 8px rgba(0,0,0,0.9); } .post-overlay p { - font-size: 1em; - text-shadow: 0 3px 6px rgba(0,0,0,0.9); + font-size: 1.1em; + text-shadow: 0 4px 8px rgba(0,0,0,0.9); } .username-link { color: var(--primary); font-weight: 700; text-decoration: none; + pointer-events: all; + transition: var(--transition); } .username-link:hover { color: var(--accent); @@ -822,7 +839,7 @@ def feed(): z-index: 3; } .action-btn { - background: rgba(255, 255, 255, 0.25); + background: rgba(255, 255, 255, 0.3); border: none; border-radius: 50%; width: 60px; @@ -834,23 +851,23 @@ def feed(): transition: var(--transition); color: white; font-size: 28px; - backdrop-filter: blur(10px); + backdrop-filter: blur(12px); box-shadow: var(--shadow); } .action-btn:hover { background: var(--primary); - transform: scale(1.1); + transform: scale(1.15); } .action-btn.liked { color: var(--primary); - background: rgba(255, 77, 109, 0.5); + background: rgba(255, 77, 109, 0.6); } .action-count { color: white; text-align: center; font-size: 16px; margin-top: 8px; - text-shadow: 0 3px 6px rgba(0,0,0,0.9); + text-shadow: 0 4px 8px rgba(0,0,0,0.9); } .comment-section { display: none; @@ -858,9 +875,9 @@ def feed(): bottom: 180px; left: 25px; right: 25px; - background: rgba(0, 0, 0, 0.85); + background: rgba(0, 0, 0, 0.9); padding: 20px; - border-radius: 14px; + border-radius: 16px; max-height: 60vh; overflow-y: auto; z-index: 4; @@ -883,10 +900,10 @@ def feed(): .comment-form textarea { flex-grow: 1; height: 45px; - background: rgba(255, 255, 255, 0.25); + background: rgba(255, 255, 255, 0.3); color: white; border: none; - border-radius: 10px; + border-radius: 12px; padding: 12px; font-size: 14px; resize: none; @@ -895,41 +912,15 @@ def feed(): padding: 12px 20px; font-size: 14px; } - .share-options { - display: none; - position: absolute; - bottom: 280px; - right: 25px; - background: rgba(0, 0, 0, 0.85); - padding: 15px; - border-radius: 14px; - z-index: 4; - box-shadow: var(--shadow); - } - .share-options.active { - display: block; - } - .share-option { - background: none; - border: none; - color: white; - padding: 10px 15px; - cursor: pointer; - width: 100%; - text-align: left; - font-size: 14px; - transition: var(--transition); - } - .share-option:hover { - background: var(--primary); - border-radius: 10px; - } - @media (max-width: 480px) { + @media (max-width: 900px) { + .feed-container { + padding: 0; + } .post-overlay { - bottom: 60px; + bottom: 70px; left: 15px; right: 15px; - padding: 15px; + padding: 20px; } .post-actions { bottom: 80px; @@ -949,11 +940,26 @@ def feed(): left: 15px; right: 15px; } + } + @media (max-width: 480px) { .post-overlay h2 { - font-size: 1.2em; + font-size: 1.3em; } .post-overlay p { - font-size: 0.9em; + font-size: 0.95em; + } + .play-btn { + width: 60px; + height: 60px; + font-size: 30px; + } + .action-btn { + width: 45px; + height: 45px; + font-size: 20px; + } + .comment-section { + bottom: 130px; } } @@ -966,9 +972,10 @@ def feed(): {% for post in posts %}
By: {{ post['uploader'] }} | {{ post['upload_date'] }}
Views: {{ post['views'] }} | Likes: {{ post['likes']|length }}
{% if is_authenticated %} -