Upload 7 files

app.py

@@ -0,0 +1,155 @@
+from flask import Flask, render_template, send_file, jsonify, request, redirect, url_for, flash, abort
+from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
+from flask_sqlalchemy import SQLAlchemy
+from werkzeug.security import generate_password_hash, check_password_hash
+from werkzeug.utils import secure_filename
+from pathlib import Path
+import os
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your-secret-key'
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///users.db'
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+
+# Папка для хранения музыкальных файлов
+MUSIC_FOLDER = Path('static/music')
+app.config['MUSIC_FOLDER'] = MUSIC_FOLDER
+
+# Инициализация базы данных и менеджера авторизации
+db = SQLAlchemy(app)
+login_manager = LoginManager(app)
+login_manager.login_view = 'login'
+
+# Модель пользователя
+class User(UserMixin, db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    password_hash = db.Column(db.String(120), nullable=False)
+    favorite_tracks = db.relationship('FavoriteTrack', backref='user', lazy=True)
+
+# Модель избранных треков
+class FavoriteTrack(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    track_name = db.Column(db.String(200), nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    created_at = db.Column(db.DateTime, default=db.func.current_timestamp())
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+# Создаем папку для музыки, если её нет
+if not os.path.exists(MUSIC_FOLDER):
+    os.makedirs(MUSIC_FOLDER)
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        
+        if User.query.filter_by(username=username).first():
+            flash('Пользователь с таким именем уже существует')
+            return redirect(url_for('register'))
+        
+        user = User(username=username, password_hash=generate_password_hash(password))
+        db.session.add(user)
+        db.session.commit()
+        
+        return redirect(url_for('login'))
+    return render_template('register.html')
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        user = User.query.filter_by(username=username).first()
+        
+        if user and check_password_hash(user.password_hash, password):
+            login_user(user)
+            return redirect(url_for('index'))
+        flash('Неверное имя пользователя или пароль')
+    return render_template('login.html')
+
+@app.route('/logout')
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('index'))
+
+@app.route('/')
+def index():
+    music_files = [f for f in os.listdir(MUSIC_FOLDER) if f.endswith(('.mp3', '.wav', '.m4a', '.webm'))]
+    favorites = []
+    if current_user.is_authenticated:
+        # Получаем избранные треки, отсортированные по дате добавления (новые сверху)
+        favorite_tracks = FavoriteTrack.query.filter_by(user_id=current_user.id).order_by(FavoriteTrack.created_at.desc()).all()
+        favorites = [track.track_name for track in favorite_tracks]
+    return render_template('index.html', music_files=music_files, favorites=favorites)
+
+@app.route('/play/<filename>')
+def play_music(filename):
+    try:
+        return send_file(MUSIC_FOLDER / filename)
+    except Exception as e:
+        return str(e)
+
+@app.route('/tracks')
+def get_tracks():
+    music_files = [f for f in os.listdir(MUSIC_FOLDER) if f.endswith(('.mp3', '.wav', '.m4a', '.webm'))]
+    return jsonify(music_files)
+
+@app.route('/favorite/<filename>', methods=['POST'])
+@login_required
+def toggle_favorite(filename):
+    track = FavoriteTrack.query.filter_by(user_id=current_user.id, track_name=filename).first()
+    if track:
+        db.session.delete(track)
+        db.session.commit()
+        return jsonify({'status': 'removed'})
+    else:
+        # Добавляем трек в избранное с текущим временем
+        from datetime import datetime
+        new_favorite = FavoriteTrack(track_name=filename, user_id=current_user.id, created_at=datetime.now())
+        db.session.add(new_favorite)
+        db.session.commit()
+        return jsonify({'status': 'added'})
+
+@app.route('/favorites')
+@login_required
+def get_favorites():
+    # Получаем избранные треки, отсортированные по дате добавления (новые сверху)
+    favorite_tracks = FavoriteTrack.query.filter_by(user_id=current_user.id).order_by(FavoriteTrack.created_at.desc()).all()
+    favorites = [track.track_name for track in favorite_tracks]
+    return jsonify(favorites)
+
+@app.route('/upload', methods=['POST'])
+@login_required
+def upload_music():
+    if 'file' not in request.files:
+        return jsonify({'status': 'error', 'message': 'Файл не найден'}), 400
+    
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({'status': 'error', 'message': 'Файл не выбран'}), 400
+    
+    if file and file.filename.endswith(('.mp3', '.wav', '.m4a', '.webm')):
+        filename = secure_filename(file.filename)
+        # Проверяем, существует ли файл с таким именем
+        if os.path.exists(os.path.join(MUSIC_FOLDER, filename)):
+            # Добавляем временную метку к имени файла, чтобы избежать перезаписи
+            from datetime import datetime
+            timestamp = datetime.now().strftime('%Y%m%d%H%M%S')
+            name, ext = os.path.splitext(filename)
+            filename = f"{name}_{timestamp}{ext}"
+        
+        file.save(os.path.join(MUSIC_FOLDER, filename))
+        return jsonify({'status': 'success', 'filename': filename})
+    else:
+        return jsonify({'status': 'error', 'message': 'Недопустимый формат файла'}), 400
+
+if __name__ == '__main__':
+    with app.app_context():
+        db.create_all()
+    app.run(host='0.0.0.0', port=5000, debug=True)

requirements.txt

@@ -0,0 +1,7 @@
+flask==2.2.5
+flask-sqlalchemy==2.5.1
+flask-login==0.6.2
+pathlib==1.0.1
+werkzeug==2.3.7
+flask-session==0.8.0
+sqlalchemy==1.4.46

static/css/style.css

@@ -0,0 +1,713 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+    background-color: #121212;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+}
+
+.player-container {
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 24px;
+    background-color: #181818;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    gap: 24px;
+}
+
+.search-container {
+    position: relative;
+    flex: 1;
+    max-width: 400px;
+}
+
+.search-container input {
+    width: 100%;
+    padding: 12px 40px 12px 16px;
+    background-color: #282828;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 500px;
+    color: #fff;
+    font-size: 0.9rem;
+    transition: all 0.3s;
+}
+
+.search-container input:focus {
+    outline: none;
+    border-color: #1DB954;
+    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.3);
+}
+
+.search-container .search-icon {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    color: #b3b3b3;
+    pointer-events: none;
+}
+
+.auth-buttons {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.auth-link {
+    text-decoration: none;
+    color: #fff;
+    padding: 8px 32px;
+    border-radius: 500px;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    transition: all 0.3s;
+    background-color: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.auth-link:hover {
+    border-color: #fff;
+    transform: scale(1.04);
+}
+
+.username {
+    margin-right: 16px;
+    color: #fff;
+    font-weight: 500;
+}
+
+.auth-container {
+    max-width: 450px;
+    margin: 0 auto;
+    padding: 40px;
+    background-color: #181818;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+}
+
+.auth-form {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.form-group label {
+    color: #b3b3b3;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.form-group input {
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    background-color: #282828;
+    color: #fff;
+    font-size: 1rem;
+    transition: all 0.3s;
+}
+
+.form-group input:focus {
+    outline: none;
+    border-color: #1DB954;
+    box-shadow: 0 0 0 2px rgba(29, 185, 84, 0.3);
+}
+
+.auth-btn {
+    padding: 14px;
+    background-color: #1DB954;
+    color: #fff;
+    border: none;
+    border-radius: 500px;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 1rem;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    transition: all 0.3s;
+}
+
+.auth-btn:hover {
+    background-color: #1ed760;
+    transform: scale(1.04);
+}
+
+.alert {
+    padding: 12px;
+    margin-bottom: 20px;
+    background-color: rgba(255, 107, 107, 0.1);
+    color: #ff6b6b;
+    border: 1px solid rgba(255, 107, 107, 0.2);
+    border-radius: 4px;
+}
+
+.track-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 16px;
+    margin: 4px 0;
+    background-color: transparent;
+    color: #b3b3b3;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.track-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: #fff;
+}
+
+.track-item.active {
+    background-color: rgba(29, 185, 84, 0.2);
+    color: #fff;
+}
+
+.favorite-btn {
+    background: none;
+    border: none;
+    color: #b3b3b3;
+    cursor: pointer;
+    padding: 8px;
+    transition: all 0.3s;
+}
+
+.favorite-btn:hover {
+    color: #1DB954;
+    transform: scale(1.2);
+}
+
+.favorite-btn.active {
+    color: #1DB954;
+}
+
+#shuffle-btn.active {
+    color: #1DB954;
+}
+
+h1 {
+    text-align: center;
+    margin-bottom: 32px;
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(to right, #1DB954, #1ed760);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.playlist-tabs {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.tab-btn {
+    padding: 12px 24px;
+    background: transparent;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 500px;
+    color: #b3b3b3;
+    cursor: pointer;
+    font-weight: 600;
+    transition: all 0.3s;
+}
+
+.tab-btn:hover {
+    color: #fff;
+    border-color: rgba(255, 255, 255, 0.3);
+}
+
+.tab-btn.active {
+    background: #1DB954;
+    color: #fff;
+    border-color: #1DB954;
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+/* Стили для загрузки файлов */
+#upload-container {
+    padding: 20px 0;
+}
+
+.upload-area {
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    padding: 40px 20px;
+    text-align: center;
+    transition: all 0.3s ease;
+    background-color: rgba(255, 255, 255, 0.05);
+    cursor: pointer;
+}
+
+.upload-area.highlight {
+    border-color: #3498db;
+    background-color: rgba(52, 152, 219, 0.1);
+}
+
+.upload-area:hover, .upload-area.dragover {
+    border-color: #1DB954;
+    background-color: rgba(29, 185, 84, 0.1);
+}
+
+.upload-icon {
+    font-size: 48px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 16px;
+}
+
+.upload-text {
+    margin-bottom: 16px;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.upload-button {
+    display: inline-block;
+    padding: 10px 24px;
+    background-color: #1DB954;
+    color: white;
+    border-radius: 500px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.3s;
+    margin-bottom: 16px;
+}
+
+.upload-button:hover {
+    transform: scale(1.05);
+    background-color: #1ed760;
+}
+
+.upload-info {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.upload-progress-container {
+    margin-top: 24px;
+}
+
+.upload-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.upload-item {
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    padding: 12px 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.upload-item-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-right: 16px;
+}
+
+.upload-item-progress {
+    width: 150px;
+    height: 6px;
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-right: 16px;
+}
+
+.upload-item-progress-bar {
+    height: 100%;
+    background-color: #1DB954;
+    width: 0%;
+    transition: width 0.3s ease;
+}
+
+.upload-item-status {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.7);
+    width: 80px;
+    text-align: right;
+}
+
+.upload-item-status.success {
+    color: #1DB954;
+}
+
+.upload-item-status.error {
+    color: #ff5252;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.current-track {
+    margin-bottom: 32px;
+    padding: 24px;
+    background-color: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+}
+
+.track-info {
+    text-align: center;
+    margin-bottom: 24px;
+}
+
+.progress-container {
+    margin-bottom: 16px;
+}
+
+.progress-bar {
+    background: rgba(255, 255, 255, 0.1);
+    height: 4px;
+    border-radius: 2px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+}
+
+.progress {
+    background: #1DB954;
+    width: 0;
+    height: 100%;
+    border-radius: 2px;
+    transition: width 0.1s linear;
+}
+
+.time-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8rem;
+    color: #b3b3b3;
+    margin-top: 8px;
+}
+
+.controls {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 32px;
+}
+
+.control-btn {
+    background: none;
+    border: none;
+    color: #b3b3b3;
+    cursor: pointer;
+    font-size: 1.5rem;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s;
+}
+
+.control-btn:hover {
+    color: #fff;
+    transform: scale(1.1);
+}
+
+.control-btn.play-pause {
+    background-color: #1DB954;
+    color: #fff;
+    width: 56px;
+    height: 56px;
+    font-size: 2rem;
+}
+
+.control-btn.play-pause:hover {
+    background-color: #1ed760;
+    transform: scale(1.08);
+}
+
+.volume-control {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+#volume {
+    width: 100px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    background: rgba(255, 255, 255, 0.1);
+    height: 4px;
+    border-radius: 2px;
+}
+
+#volume::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #fff;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+#volume::-webkit-slider-thumb:hover {
+    background: #1DB954;
+    transform: scale(1.2);
+}
+
+.playlist {
+    background-color: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    padding: 24px;
+}
+
+.playlist-tabs {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.tab-btn {
+    background: none;
+    border: none;
+    color: #b3b3b3;
+    cursor: pointer;
+    font-size: 1rem;
+    font-weight: 700;
+    padding: 8px 16px;
+    border-radius: 500px;
+    transition: all 0.3s;
+}
+
+.tab-btn:hover {
+    color: #fff;
+}
+
+.tab-btn.active {
+    background-color: #1DB954;
+    color: #fff;
+}
+
+.tab-content {
+    display: none;
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+.tab-content.active {
+    display: block;
+}
+
+.tab-content::-webkit-scrollbar {
+    width: 8px;
+}
+
+.tab-content::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.tab-content::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+.tab-content::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+.playlist h2 {
+    margin-bottom: 16px;
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #fff;
+}
+
+#track-list {
+    list-style: none;
+    max-height: 400px;
+    overflow-y: auto;
+    padding-right: 8px;
+}
+
+#track-list::-webkit-scrollbar {
+    width: 8px;
+}
+
+#track-list::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+#track-list::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 4px;
+}
+
+#track-list::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.4);
+}
+
+/* Медиа-запросы для адаптивного дизайна */
+@media screen and (max-width: 768px) {
+    .player-container {
+        padding: 16px;
+        max-width: 100%;
+        border-radius: 0;
+    }
+    
+    .header {
+        flex-direction: column;
+        gap: 16px;
+        align-items: stretch;
+    }
+    
+    .search-container {
+        max-width: 100%;
+    }
+    
+    .auth-buttons {
+        justify-content: center;
+    }
+    
+    .auth-link {
+        padding: 8px 16px;
+        font-size: 0.7rem;
+    }
+    
+    .controls {
+        gap: 16px;
+    }
+    
+    .control-btn {
+        width: 36px;
+        height: 36px;
+        font-size: 1.2rem;
+    }
+    
+    .control-btn.play-pause {
+        width: 48px;
+        height: 48px;
+        font-size: 1.5rem;
+    }
+    
+    .playlist-tabs {
+        flex-wrap: wrap;
+    }
+    
+    .tab-btn {
+        flex: 1;
+        text-align: center;
+        padding: 8px 12px;
+    }
+    
+    .tab-content {
+        max-height: 300px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    h1 {
+        font-size: 1.5rem;
+        margin-bottom: 16px;
+    }
+    
+    .player-container {
+        padding: 12px;
+    }
+    
+    .current-track {
+        padding: 16px;
+        margin-bottom: 16px;
+    }
+    
+    .controls {
+        gap: 12px;
+    }
+    
+    .control-btn {
+        width: 32px;
+        height: 32px;
+        font-size: 1rem;
+    }
+    
+    .control-btn.play-pause {
+        width: 42px;
+        height: 42px;
+        font-size: 1.3rem;
+    }
+    
+    .volume-control {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 8px;
+    }
+    
+    #volume {
+        width: 80px;
+    }
+    
+    .track-item {
+        padding: 10px 12px;
+        font-size: 0.9rem;
+    }
+    
+    .auth-container {
+        padding: 20px;
+        max-width: 100%;
+    }
+    
+    .auth-form {
+        gap: 16px;
+    }
+    
+    .form-group input {
+        padding: 10px;
+        font-size: 0.9rem;
+    }
+    
+    .auth-btn {
+        padding: 12px;
+        font-size: 0.9rem;
+    }
+}

static/js/player.js

@@ -0,0 +1,428 @@
+class MusicPlayer {
+    constructor() {
+        this.audio = new Audio();
+        this.currentTrackIndex = 0;
+        this.isPlaying = false;
+        this.isShuffled = false;
+        this.shuffledIndexes = [];
+
+        // Элементы управления
+        this.playBtn = document.getElementById('play-btn');
+        this.prevBtn = document.getElementById('prev-btn');
+        this.nextBtn = document.getElementById('next-btn');
+        this.shuffleBtn = document.getElementById('shuffle-btn');
+        this.volumeControl = document.getElementById('volume');
+        this.progressBar = document.getElementById('progress-bar');
+        this.progress = document.getElementById('progress');
+        this.currentTimeSpan = document.getElementById('current-time');
+        this.durationSpan = document.getElementById('duration');
+        this.currentTrackName = document.getElementById('current-track-name');
+        this.trackList = document.getElementById('track-list');
+        this.likedList = document.getElementById('liked-list');
+        this.tabButtons = document.querySelectorAll('.tab-btn');
+        this.searchInput = document.getElementById('search-input');
+        this.dropArea = document.getElementById('drop-area');
+        this.fileInput = document.getElementById('file-input');
+
+        this.tracks = Array.from(this.trackList.getElementsByClassName('track-item'));
+        this.allTracks = [...this.tracks]; // Сохраняем копию всех треков
+        this.favoriteButtons = document.querySelectorAll('.favorite-btn');
+        
+        this.initEventListeners();
+    }
+
+    initEventListeners() {
+        // Поиск треков
+        this.searchInput.addEventListener('input', (e) => this.searchTracks(e.target.value));
+
+        // Кнопки управления
+        this.playBtn.addEventListener('click', () => this.togglePlay());
+        this.prevBtn.addEventListener('click', () => this.playPrevious());
+        this.nextBtn.addEventListener('click', () => this.playNext());
+        this.shuffleBtn.addEventListener('click', () => this.toggleShuffle());
+        
+        // Обработчики для drag-and-drop загрузки файлов
+        if (this.dropArea && this.fileInput) {
+            // Предотвращаем стандартное поведение браузера при перетаскивании файлов
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                this.dropArea.addEventListener(eventName, (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+            });
+            
+            // Добавляем визуальные эффекты при перетаскивании
+            ['dragenter', 'dragover'].forEach(eventName => {
+                this.dropArea.addEventListener(eventName, () => {
+                    this.dropArea.classList.add('highlight');
+                });
+            });
+            
+            ['dragleave', 'drop'].forEach(eventName => {
+                this.dropArea.addEventListener(eventName, () => {
+                    this.dropArea.classList.remove('highlight');
+                });
+            });
+            
+            // Обработка события drop для загрузки файлов
+            this.dropArea.addEventListener('drop', (e) => {
+                const files = e.dataTransfer.files;
+                if (files.length) {
+                    this.uploadFiles(files);
+                }
+            });
+            
+            // Обработка выбора файлов через кнопку
+            this.fileInput.addEventListener('change', (e) => {
+                const files = e.target.files;
+                if (files.length) {
+                    this.uploadFiles(files);
+                }
+            });
+        }
+
+        // Обработчики для вкладок
+        this.tabButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                // Удаляем класс active у всех кнопок и контента
+                this.tabButtons.forEach(btn => btn.classList.remove('active'));
+                document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+                
+                // Добавляем класс active текущей кнопке и соответствующему контенту
+                button.classList.add('active');
+                const tabName = button.dataset.tab;
+                const content = document.querySelector(`.tab-content[data-tab="${tabName}"]`);
+                if (content) {
+                    content.classList.add('active');
+                    // Обновляем список треков
+                    this.tracks = Array.from(content.getElementsByClassName('track-item'));
+                    // Переназначаем обработчики событий для треков
+                    this.tracks.forEach((track, index) => {
+                        track.addEventListener('click', (e) => {
+                            if (!e.target.closest('.favorite-btn')) {
+                                this.currentTrackIndex = index;
+                                this.loadAndPlayTrack();
+                            }
+                        });
+                    });
+                }
+            });
+        });
+        
+        // Управление громкостью
+        this.volumeControl.addEventListener('input', (e) => {
+            this.audio.volume = e.target.value;
+        });
+
+        // Прогресс воспроизведения
+        this.progressBar.addEventListener('click', (e) => {
+            const rect = this.progressBar.getBoundingClientRect();
+            const percent = (e.clientX - rect.left) / rect.width;
+            this.audio.currentTime = percent * this.audio.duration;
+        });
+
+        // События аудио
+        this.audio.addEventListener('timeupdate', () => this.updateProgress());
+        this.audio.addEventListener('ended', () => this.playNext());
+
+        // Клики по трекам
+        this.tracks.forEach((track, index) => {
+            track.addEventListener('click', (e) => {
+                if (!e.target.closest('.favorite-btn')) {
+                    this.currentTrackIndex = index;
+                    this.loadAndPlayTrack();
+                }
+            });
+        });
+
+        // Обработчики для кнопок избранного
+        this.favoriteButtons.forEach(btn => {
+            btn.addEventListener('click', async (e) => {
+                e.preventDefault();
+                const track = btn.dataset.track;
+                const response = await fetch(`/favorite/${track}`, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    }
+                });
+                
+                const result = await response.json();
+                if (result.status === 'added') {
+                    btn.classList.add('active');
+                } else {
+                    btn.classList.remove('active');
+                }
+            });
+        });
+    }
+
+    togglePlay() {
+        if (this.isPlaying) {
+            this.pause();
+        } else {
+            if (this.audio.src) {
+                this.play();
+            } else if (this.tracks.length > 0) {
+                this.loadAndPlayTrack();
+            }
+        }
+    }
+
+    play() {
+        this.audio.play();
+        this.isPlaying = true;
+        this.playBtn.innerHTML = '<i class="fas fa-pause"></i>';
+        this.tracks[this.currentTrackIndex].classList.add('active');
+    }
+
+    pause() {
+        this.audio.pause();
+        this.isPlaying = false;
+        this.playBtn.innerHTML = '<i class="fas fa-play"></i>';
+    }
+
+    playPrevious() {
+        if (this.tracks.length === 0) return;
+        this.tracks[this.currentTrackIndex].classList.remove('active');
+        
+        if (this.isShuffled) {
+            const currentShuffleIndex = this.shuffledIndexes.indexOf(this.currentTrackIndex);
+            const prevShuffleIndex = (currentShuffleIndex - 1 + this.tracks.length) % this.tracks.length;
+            this.currentTrackIndex = this.shuffledIndexes[prevShuffleIndex];
+        } else {
+            this.currentTrackIndex = (this.currentTrackIndex - 1 + this.tracks.length) % this.tracks.length;
+        }
+        
+        this.loadAndPlayTrack();
+    }
+
+    playNext() {
+        if (this.tracks.length === 0) return;
+        this.tracks[this.currentTrackIndex].classList.remove('active');
+        
+        if (this.isShuffled) {
+            const currentShuffleIndex = this.shuffledIndexes.indexOf(this.currentTrackIndex);
+            const nextShuffleIndex = (currentShuffleIndex + 1) % this.tracks.length;
+            this.currentTrackIndex = this.shuffledIndexes[nextShuffleIndex];
+        } else {
+            this.currentTrackIndex = (this.currentTrackIndex + 1) % this.tracks.length;
+        }
+        
+        this.loadAndPlayTrack();
+    }
+
+    loadAndPlayTrack() {
+        if (!this.tracks || this.tracks.length === 0 || this.currentTrackIndex >= this.tracks.length) {
+            console.error('No tracks available or invalid track index');
+            return;
+        }
+
+        const track = this.tracks[this.currentTrackIndex];
+        if (!track || !track.dataset.src) {
+            console.error('Invalid track data');
+            return;
+        }
+
+        const trackSrc = track.dataset.src;
+        this.audio.src = trackSrc;
+        this.currentTrackName.textContent = track.textContent.trim();
+        
+        // Удаляем класс active у всех треков в обеих вкладках
+        document.querySelectorAll('.track-item').forEach(t => t.classList.remove('active'));
+        // Добавляем класс active текущему треку
+        track.classList.add('active');
+        
+        this.play();
+    }
+
+    updateProgress() {
+        const duration = this.audio.duration;
+        const currentTime = this.audio.currentTime;
+        
+        if (duration) {
+            // Обновляем прогресс-бар
+            const progressPercent = (currentTime / duration) * 100;
+            this.progress.style.width = progressPercent + '%';
+            
+            // Обновляем время
+            this.currentTimeSpan.textContent = this.formatTime(currentTime);
+            this.durationSpan.textContent = this.formatTime(duration);
+        }
+    }
+
+    formatTime(seconds) {
+        const minutes = Math.floor(seconds / 60);
+        const remainingSeconds = Math.floor(seconds % 60);
+        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+    }
+
+    toggleShuffle() {
+        this.isShuffled = !this.isShuffled;
+        
+        if (this.isShuffled) {
+            // Активируем кнопку shuffle
+            this.shuffleBtn.classList.add('active');
+            
+            // Создаем массив индексов и перемешиваем его
+            this.shuffledIndexes = Array.from({ length: this.tracks.length }, (_, i) => i);
+            this.shuffleArray(this.shuffledIndexes);
+            
+            // Убедимся, что текущий трек будет первым в перемешанном списке
+            const currentIndex = this.shuffledIndexes.indexOf(this.currentTrackIndex);
+            if (currentIndex !== -1) {
+                // Меняем местами текущий индекс с первым элементом
+                [this.shuffledIndexes[0], this.shuffledIndexes[currentIndex]] = 
+                [this.shuffledIndexes[currentIndex], this.shuffledIndexes[0]];
+            }
+        } else {
+            // Деактивируем кнопку shuffle
+            this.shuffleBtn.classList.remove('active');
+        }
+    }
+    
+    shuffleArray(array) {
+        // Алгоритм Фишера-Йейтса для перемешивания массива
+        for (let i = array.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [array[i], array[j]] = [array[j], array[i]];
+        }
+        return array;
+    }
+    
+    searchTracks(query) {
+        query = query.toLowerCase();
+        const activeTab = document.querySelector('.tab-content.active');
+        const tracksList = activeTab.getElementsByClassName('track-item');
+        
+        Array.from(tracksList).forEach(track => {
+            const trackName = track.querySelector('.track-name').textContent.toLowerCase();
+            if (trackName.includes(query)) {
+                track.style.display = '';
+            } else {
+                track.style.display = 'none';
+            }
+        });
+    }
+    
+    async uploadFiles(files) {
+        const uploadList = document.getElementById('upload-list');
+        const uploadProgressContainer = document.getElementById('upload-progress-container');
+        
+        if (uploadProgressContainer) {
+            uploadProgressContainer.style.display = 'block';
+        }
+        
+        if (uploadList) {
+            uploadList.innerHTML = '';
+        }
+        
+        // Перебираем все файлы и загружаем их на сервер
+        for (const file of files) {
+            // Проверяем, что файл имеет допустимый формат
+            if (!file.name.match(/\.(mp3|wav|m4a|webm)$/i)) {
+                this.showUploadStatus(file.name, 'Недопустимый формат файла', 'error');
+                continue;
+            }
+            
+            // Создаем объект FormData для отправки файла
+            const formData = new FormData();
+            formData.append('file', file);
+            
+            try {
+                // Отображаем статус загрузки
+                this.showUploadStatus(file.name, 'Загрузка...', 'loading');
+                
+                // Отправляем файл на сервер
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                
+                const result = await response.json();
+                
+                if (result.status === 'success') {
+                    this.showUploadStatus(file.name, 'Загружено успешно', 'success');
+                    
+                    // Добавляем новый трек в список без перезагрузки страницы
+                    this.addTrackToList(result.filename);
+                } else {
+                    this.showUploadStatus(file.name, result.message || 'Ошибка загрузки', 'error');
+                }
+            } catch (error) {
+                console.error('Ошибка загрузки файла:', error);
+                this.showUploadStatus(file.name, 'Ошибка загрузки', 'error');
+            }
+        }
+    }
+    
+    showUploadStatus(filename, message, status) {
+        const uploadList = document.getElementById('upload-list');
+        if (!uploadList) return;
+        
+        const statusItem = document.createElement('div');
+        statusItem.className = `upload-status ${status}`;
+        statusItem.innerHTML = `
+            <span class="filename">${filename}</span>
+            <span class="message">${message}</span>
+        `;
+        
+        uploadList.appendChild(statusItem);
+    }
+    
+    addTrackToList(filename) {
+        // Добавляем новый трек в список всех треков
+        const trackList = document.getElementById('track-list');
+        if (!trackList) return;
+        
+        const newTrack = document.createElement('li');
+        newTrack.className = 'track-item';
+        newTrack.dataset.src = `/play/${filename}`;
+        
+        newTrack.innerHTML = `
+            <span class="track-name">${filename}</span>
+            <button class="favorite-btn" data-track="${filename}">
+                <i class="fas fa-heart"></i>
+            </button>
+        `;
+        
+        // Добавляем обработчик клика для нового трека
+        newTrack.addEventListener('click', (e) => {
+            if (!e.target.closest('.favorite-btn')) {
+                this.currentTrackIndex = this.tracks.length;
+                this.tracks.push(newTrack);
+                this.loadAndPlayTrack();
+            }
+        });
+        
+        // Добавляем обработчик для кнопки избранного
+        const favoriteBtn = newTrack.querySelector('.favorite-btn');
+        favoriteBtn.addEventListener('click', async (e) => {
+            e.preventDefault();
+            const track = favoriteBtn.dataset.track;
+            const response = await fetch(`/favorite/${track}`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            });
+            
+            const result = await response.json();
+            if (result.status === 'added') {
+                favoriteBtn.classList.add('active');
+            } else {
+                favoriteBtn.classList.remove('active');
+            }
+        });
+        
+        trackList.appendChild(newTrack);
+        
+        // Обновляем список треков
+        this.tracks = Array.from(trackList.getElementsByClassName('track-item'));
+    }
+}
+
+// Инициализация плеера
+document.addEventListener('DOMContentLoaded', () => {
+    const player = new MusicPlayer();
+});

templates/index.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pulse</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+</head>
+<body>
+    <div class="player-container">
+        <div class="header">
+            <h1>Pulse</h1>
+            <div class="search-container">
+                <input type="text" id="search-input" placeholder="Поиск треков...">
+                <i class="fas fa-search search-icon"></i>
+            </div>
+            <div class="auth-buttons">
+                {% if current_user.is_authenticated %}
+                    <span class="username">{{ current_user.username }}</span>
+                    <a href="{{ url_for('logout') }}" class="auth-link">Выйти</a>
+                {% else %}
+                    <a href="{{ url_for('login') }}" class="auth-link">Войти</a>
+                    <a href="{{ url_for('register') }}" class="auth-link">Регистрация</a>
+                {% endif %}
+            </div>
+        </div>
+        
+        <div class="current-track">
+            <div class="track-info">
+                <span id="current-track-name">Выберите трек</span>
+            </div>
+            <div class="progress-container">
+                <div class="progress-bar" id="progress-bar">
+                    <div class="progress" id="progress"></div>
+                </div>
+                <div class="time-info">
+                    <span id="current-time">0:00</span>
+                    <span id="duration">0:00</span>
+                </div>
+            </div>
+        </div>
+
+        <div class="controls">
+            <button id="prev-btn" class="control-btn">
+                <i class="fas fa-step-backward"></i>
+            </button>
+            <button id="play-btn" class="control-btn">
+                <i class="fas fa-play"></i>
+            </button>
+            <button id="next-btn" class="control-btn">
+                <i class="fas fa-step-forward"></i>
+            </button>
+            <button id="shuffle-btn" class="control-btn">
+                <i class="fas fa-random"></i>
+            </button>
+            <div class="volume-control">
+                <i class="fas fa-volume-up"></i>
+                <input type="range" id="volume" min="0" max="1" step="0.1" value="1">
+            </div>
+        </div>
+
+        <div class="playlist">
+            <div class="playlist-tabs">
+                <button class="tab-btn active" data-tab="all">Плейлист</button>
+                <button class="tab-btn" data-tab="liked">Понравившиеся</button>
+                {% if current_user.is_authenticated %}
+                <button class="tab-btn" data-tab="upload">Добавить трек</button>
+                {% endif %}
+            </div>
+            <ul id="track-list" class="tab-content active" data-tab="all">
+                {% for music_file in music_files %}
+                <li class="track-item" data-src="{{ url_for('play_music', filename=music_file) }}">
+                    <span class="track-name">{{ music_file }}</span>
+                    {% if current_user.is_authenticated %}
+                    <button class="favorite-btn {% if music_file in favorites %}active{% endif %}" data-track="{{ music_file }}">
+                        <i class="fas fa-heart"></i>
+                    </button>
+                    {% endif %}
+                </li>
+                {% endfor %}
+            </ul>
+            <ul id="liked-list" class="tab-content" data-tab="liked">
+                {% for music_file in favorites %}
+                <li class="track-item" data-src="{{ url_for('play_music', filename=music_file) }}">
+                    <span class="track-name">{{ music_file }}</span>
+                    {% if current_user.is_authenticated %}
+                    <button class="favorite-btn active" data-track="{{ music_file }}">
+                        <i class="fas fa-heart"></i>
+                    </button>
+                    {% endif %}
+                </li>
+                {% endfor %}
+            </ul>
+            {% if current_user.is_authenticated %}
+            <div id="upload-container" class="tab-content" data-tab="upload">
+                <div class="upload-area" id="drop-area">
+                    <div class="upload-icon">
+                        <i class="fas fa-cloud-upload-alt"></i>
+                    </div>
+                    <p class="upload-text">Перетащите аудиофайлы сюда или</p>
+                    <label for="file-input" class="upload-button">Выберите файлы</label>
+                    <input type="file" id="file-input" accept="audio/*" multiple style="display: none;">
+                    <p class="upload-info">Поддерживаемые форматы: MP3, WAV, M4A, WEBM</p>
+                </div>
+                <div class="upload-progress-container" id="upload-progress-container" style="display: none;">
+                    <div class="upload-list" id="upload-list"></div>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='js/player.js') }}"></script>
+</body>
+</html>

templates/login.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Вход</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="auth-container">
+        <h1>Вход</h1>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="alert">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="POST" class="auth-form">
+            <div class="form-group">
+                <label for="username">Имя пользователя:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Пароль:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit" class="auth-btn">Войти</button>
+        </form>
+        <p>Нет аккаунта? <a href="{{ url_for('register') }}">Зарегистрироваться</a></p>
+    </div>
+</body>
+</html>

templates/register.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Регистрация</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+</head>
+<body>
+    <div class="auth-container">
+        <h1>Регистрация</h1>
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                {% for message in messages %}
+                    <div class="alert">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="POST" class="auth-form">
+            <div class="form-group">
+                <label for="username">Имя пользователя:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Пароль:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit" class="auth-btn">Зарегистрироваться</button>
+        </form>
+        <p>Уже есть аккаунт? <a href="{{ url_for('login') }}">Войти</a></p>
+    </div>
+</body>
+</html>