updated to video upload

Dockerfile

@@ -1,4 +1,4 @@
-# Use the official Python image from the Docker Hub
+# Stage 1: Build stage
 FROM python:3.11-slim AS build
 
 # Set the working directory in the container
@@ -11,6 +11,7 @@ RUN apt-get update && apt-get install -y \
     libssl-dev \
     python3-dev \
     cargo \
+    g++ \
     curl \
     && rm -rf /var/lib/apt/lists/*
 
@@ -30,17 +31,25 @@ FROM python:3.11-slim
 # Set the working directory in the container
 WORKDIR /app
 
-# Copy only the necessary files from the build stage
-COPY --from=build /app /app
-COPY --from=build /root/.cargo /root/.cargo
-
 # Install runtime dependencies
 RUN apt-get update && apt-get install -y \
     libffi-dev \
     libssl-dev \
+    g++ \
+    curl \
     && rm -rf /var/lib/apt/lists/*
 
-# Install Gunicorn
+# Install Rust
+RUN curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y
+ENV PATH="/root/.cargo/bin:${PATH}"
+
+# Copy only the necessary files from the build stage
+COPY --from=build /app /app
+COPY --from=build /root/.cargo /root/.cargo
+
+# Install Gunicorn and other Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
 RUN pip install gunicorn
 
 # Make port 5000 available to the world outside this container

app.py

@@ -1,5 +1,5 @@
 import os
-from flask import Flask, render_template, request, redirect, url_for
+from flask import Flask, render_template, request, redirect, url_for, session
 from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
 from flask_bcrypt import Bcrypt
@@ -32,7 +32,7 @@ migrate = Migrate(app, db)
 
 @login_manager.user_loader
 def load_user(user_id):
-    return User.query.get(int(user_id))
+    return db.session.get(User, int(user_id))
 
 # Modele pentru baza de date
 class User(db.Model, UserMixin):
@@ -40,22 +40,20 @@ class User(db.Model, UserMixin):
     username = db.Column(db.String(80), unique=True, nullable=False)
     password = db.Column(db.String(120), nullable=False)
     role = db.Column(db.String(20), nullable=False, default='user')
+    theme = db.Column(db.String(10), nullable=False, default='light')
 
 class Player(db.Model):
     id = db.Column(db.Integer, primary_key=True)
-    username = db.Column(db.String(80), nullable=False)
-    hostname = db.Column(db.String(120), nullable=False)
-    ip = db.Column(db.String(15), nullable=False)
+    username = db.Column(db.String(80), unique=True, nullable=False)
+    hostname = db.Column(db.String(120), unique=True, nullable=False)
     password = db.Column(db.String(120), nullable=False)
-    user_id = db.Column(db.Integer, db.ForeignKey('user.id', name='fk_user_id'), nullable=True)
 
 class Group(db.Model):
     id = db.Column(db.Integer, primary_key=True)
     name = db.Column(db.String(80), unique=True, nullable=False)
-    players = db.relationship('Player', secondary='group_players', backref='groups')
-    content = db.relationship('Content', backref='group', lazy=True)
+    players = db.relationship('Player', secondary='group_player', backref='groups')
 
-group_players = db.Table('group_players',
+group_player = db.Table('group_player',
     db.Column('group_id', db.Integer, db.ForeignKey('group.id'), primary_key=True),
     db.Column('player_id', db.Integer, db.ForeignKey('player.id'), primary_key=True)
 )
@@ -113,25 +111,18 @@ def logout():
 
 @app.route('/upload_content', methods=['GET', 'POST'])
 @login_required
+@admin_required
 def upload_content():
+    if request.method == 'POST':
+        # Handle file upload logic here
+        pass
+
+    target_type = request.args.get('target_type')
+    target_id = request.args.get('target_id')
+    return_url = request.args.get('return_url', url_for('dashboard'))
     players = Player.query.all()
     groups = Group.query.all()
-    if request.method == 'POST':
-        target_type = request.form['target_type']
-        target_id = request.form['target_id']
-        files = request.files.getlist('files')
-        duration = int(request.form['duration'])
-
-        for file in files:
-            filename = secure_filename(file.filename)
-            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-            file.save(file_path)
-            new_content = Content(file_name=filename, duration=duration, player_id=target_id if target_type == 'player' else None, group_id=target_id if target_type == 'group' else None)
-            db.session.add(new_content)
-        
-        db.session.commit()
-        return redirect(url_for('dashboard'))
-    return render_template('upload_content.html', players=players, groups=groups)
+    return render_template('upload_content.html', target_type=target_type, target_id=target_id, players=players, groups=groups, return_url=return_url)
 
 @app.route('/admin')
 @login_required
@@ -243,7 +234,7 @@ def delete_group_content(content_id):
 @login_required
 @admin_required
 def delete_group(group_id):
-    group = Group.query.get_or_404(group_id)
+    group = db.session.get(Group, group_id)
     db.session.delete(group)
     db.session.commit()
     return redirect(url_for('dashboard'))
@@ -251,7 +242,7 @@ def delete_group(group_id):
 @app.route('/player/<int:player_id>')
 @login_required
 def player_page(player_id):
-    player = Player.query.get_or_404(player_id)
+    player = db.session.get(Player, player_id)
     content = Content.query.filter_by(player_id=player_id).all()
     return render_template('player_page.html', player=player, content=content)
 
@@ -339,10 +330,8 @@ def add_player():
     if request.method == 'POST':
         username = request.form['username']
         hostname = request.form['hostname']
-        ip = request.form['ip']
-        password = request.form['password']
-        hashed_password = bcrypt.generate_password_hash(password).decode('utf-8')
-        new_player = Player(username=username, hostname=hostname, ip=ip, password=hashed_password)
+        password = bcrypt.generate_password_hash(request.form['password']).decode('utf-8')
+        new_player = Player(username=username, hostname=hostname, password=password)
         db.session.add(new_player)
         db.session.commit()
         return redirect(url_for('dashboard'))
@@ -376,13 +365,29 @@ def edit_player(player_id):
     if request.method == 'POST':
         player.username = request.form['username']
         player.hostname = request.form['hostname']
-        player.ip = request.form['ip']
         if request.form['password']:
             player.password = bcrypt.generate_password_hash(request.form['password']).decode('utf-8')
         db.session.commit()
         return redirect(url_for('player_page', player_id=player.id))
     return render_template('edit_player.html', player=player)
 
+@app.route('/change_theme', methods=['POST'])
+@login_required
+@admin_required
+def change_theme():
+    theme = request.form['theme']
+    current_user.theme = theme
+    db.session.commit()
+    return redirect(url_for('admin'))
+
+@app.context_processor
+def inject_theme():
+    if current_user.is_authenticated:
+        theme = current_user.theme
+    else:
+        theme = 'light'
+    return dict(theme=theme)
+
 if __name__ == '__main__':
     with app.app_context():
         db.create_all()  # Creează toate tabelele

docker-compose.yml

@@ -1,8 +1,8 @@
-version: '3.8'
+
 
 services:
   web:
-    image: digi_signage_server_app:latest
+    image: digi_signage:latest
     ports:
       - "7100:5000"
     environment:

migrations/alembic.ini

@@ -1,17 +1,56 @@
-# A generic, single database configuration.
-
 [alembic]
-# template used to generate migration files
-# file_template = %%(rev)s_%%(slug)s
+# path to migration scripts
+script_location = migrations
 
-# set to 'true' to run the environment during
-# the 'revision' command, regardless of autogenerate
+# template used to generate migration files
+file_template = %%(rev)s_%%(slug)s
+
+# timezone to use when rendering the date within the migration file as well as the filename.
+# string value is passed to datetime.datetime.strftime(), default is to use UTC.
+# output_timezone = UTC
+
+# max length of characters to apply to the "slug" field
+# truncate_slug_length = 40
+
+# set to 'true' to run the environment during the 'revision' command, regardless of autogenerate
 # revision_environment = false
 
+# set to 'true' to allow .pyc and .pyo files without a source .py file to be detected as revisions
+# sourceless = false
+
+# version location specification; this defaults
+# to migrations/versions.  When using multiple version
+# directories, initial revisions must be specified with --version-path.
+# The path separator used here should be the separator specified by "os.pathsep".
+# version_locations = %(here)s/bar:%(here)s/bat:migrations/versions
+
+# the output encoding used when revision files
+# are written from script.py.mako
+# output_encoding = utf-8
+
+sqlalchemy.url = sqlite:///dashboard.db
+
+[post_write_hooks]
+# post_write_hooks defines scripts or Python functions that are run
+# on newly generated revision scripts.  See the documentation for further
+# detail and examples
+# hooks =
+
+# format the generated revision script to be PEP8 compliant
+# hooks = pep8
+
+# python
+# hook_1.type = python
+# hook_1.entrypoint = myproject.please_run_pep8
+# hook_1.options = {"treat-as-warning": "true"}
+
+# exec
+# hook_2.type = exec
+# hook_2.entrypoint = /usr/bin/pep8
+# hook_2.options =
 
-# Logging configuration
 [loggers]
-keys = root,sqlalchemy,alembic,flask_migrate
+keys = root,sqlalchemy,alembic
 
 [handlers]
 keys = console
@@ -26,18 +65,15 @@ qualname =
 
 [logger_sqlalchemy]
 level = WARN
-handlers =
+handlers = console
 qualname = sqlalchemy.engine
+# propagate = 0
 
 [logger_alembic]
 level = INFO
-handlers =
+handlers = console
 qualname = alembic
-
-[logger_flask_migrate]
-level = INFO
-handlers =
-qualname = flask_migrate
+# propagate = 0
 
 [handler_console]
 class = StreamHandler
@@ -47,4 +83,4 @@ formatter = generic
 
 [formatter_generic]
 format = %(levelname)-5.5s [%(name)s] %(message)s
-datefmt = %H:%M:%S
+datefmt = %H:%M:%S

migrations/env.py

@@ -1,8 +1,8 @@
+from __future__ import with_statement
 import logging
 from logging.config import fileConfig
 
-from flask import current_app
-
+from sqlalchemy import engine_from_config, pool
 from alembic import context
 
 # this is the Alembic Config object, which provides
@@ -14,30 +14,13 @@ config = context.config
 fileConfig(config.config_file_name)
 logger = logging.getLogger('alembic.env')
 
-
-def get_engine():
-    try:
-        # this works with Flask-SQLAlchemy<3 and Alchemical
-        return current_app.extensions['migrate'].db.get_engine()
-    except (TypeError, AttributeError):
-        # this works with Flask-SQLAlchemy>=3
-        return current_app.extensions['migrate'].db.engine
-
-
-def get_engine_url():
-    try:
-        return get_engine().url.render_as_string(hide_password=False).replace(
-            '%', '%%')
-    except AttributeError:
-        return str(get_engine().url).replace('%', '%%')
-
-
 # add your model's MetaData object here
 # for 'autogenerate' support
 # from myapp import mymodel
 # target_metadata = mymodel.Base.metadata
-config.set_main_option('sqlalchemy.url', get_engine_url())
-target_db = current_app.extensions['migrate'].db
+from flask import current_app
+config.set_main_option('sqlalchemy.url', current_app.config.get('SQLALCHEMY_DATABASE_URI'))
+target_metadata = current_app.extensions['migrate'].db.metadata
 
 # other values from the config, defined by the needs of env.py,
 # can be acquired:
@@ -45,12 +28,6 @@ target_db = current_app.extensions['migrate'].db
 # ... etc.
 
 
-def get_metadata():
-    if hasattr(target_db, 'metadatas'):
-        return target_db.metadatas[None]
-    return target_db.metadata
-
-
 def run_migrations_offline():
     """Run migrations in 'offline' mode.
 
@@ -65,7 +42,7 @@ def run_migrations_offline():
     """
     url = config.get_main_option("sqlalchemy.url")
     context.configure(
-        url=url, target_metadata=get_metadata(), literal_binds=True
+        url=url, target_metadata=target_metadata, literal_binds=True
     )
 
     with context.begin_transaction():
@@ -79,29 +56,14 @@ def run_migrations_online():
     and associate a connection with the context.
 
     """
-
-    # this callback is used to prevent an auto-migration from being generated
-    # when there are no changes to the schema
-    # reference: http://alembic.zzzcomputing.com/en/latest/cookbook.html
-    def process_revision_directives(context, revision, directives):
-        if getattr(config.cmd_opts, 'autogenerate', False):
-            script = directives[0]
-            if script.upgrade_ops.is_empty():
-                directives[:] = []
-                logger.info('No changes in schema detected.')
-
-    conf_args = current_app.extensions['migrate'].configure_args
-    if conf_args.get("process_revision_directives") is None:
-        conf_args["process_revision_directives"] = process_revision_directives
-
-    connectable = get_engine()
+    connectable = engine_from_config(
+        config.get_section(config.config_ini_section),
+        prefix="sqlalchemy.",
+        poolclass=pool.NullPool,
+    )
 
     with connectable.connect() as connection:
-        context.configure(
-            connection=connection,
-            target_metadata=get_metadata(),
-            **conf_args
-        )
+        context.configure(connection=connection, target_metadata=target_metadata)
 
         with context.begin_transaction():
             context.run_migrations()

migrations/versions/0de18b4ddaa3_initial_migration.py

@@ -1,34 +0,0 @@
-"""Initial migration
-
-Revision ID: 0de18b4ddaa3
-Revises: 
-Create Date: 2025-01-20 14:50:44.116314
-
-"""
-from alembic import op
-import sqlalchemy as sa
-
-
-# revision identifiers, used by Alembic.
-revision = '0de18b4ddaa3'
-down_revision = None
-branch_labels = None
-depends_on = None
-
-
-def upgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('player', schema=None) as batch_op:
-        batch_op.add_column(sa.Column('user_id', sa.Integer(), nullable=True))
-        batch_op.create_foreign_key('fk_user_id', 'user', ['user_id'], ['id'])
-
-    # ### end Alembic commands ###
-
-
-def downgrade():
-    # ### commands auto generated by Alembic - please adjust! ###
-    with op.batch_alter_table('player', schema=None) as batch_op:
-        batch_op.drop_constraint('fk_user_id', type_='foreignkey')
-        batch_op.drop_column('user_id')
-
-    # ### end Alembic commands ###

migrations/versions/173774695298_add_theme_column_to_user_table.py

@@ -0,0 +1,28 @@
+"""Add theme column to user table
+
+Revision ID: 173774695298
+Revises: c07c6e720021
+Create Date: 2025-01-23 15:16:46.761912
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = '173774695298'
+down_revision = 'c07c6e720021'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    pass
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    pass
+    # ### end Alembic commands ###

migrations/versions/c07c6e720021_add_theme_column_to_user_table.py

@@ -0,0 +1,28 @@
+"""Add theme column to user table
+
+Revision ID: c07c6e720021
+Revises: e341b0e3043c
+Create Date: 2025-01-23 15:13:01.413532
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'c07c6e720021'
+down_revision = 'e341b0e3043c'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    pass
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    pass
+    # ### end Alembic commands ###

migrations/versions/e341b0e3043c_initial_migration.py

@@ -0,0 +1,72 @@
+"""Initial migration
+
+Revision ID: e341b0e3043c
+Revises: 
+Create Date: 2025-01-23 15:09:25.485823
+
+"""
+from alembic import op
+import sqlalchemy as sa
+
+
+# revision identifiers, used by Alembic.
+revision = 'e341b0e3043c'
+down_revision = None
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_table('group',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('name', sa.String(length=80), nullable=False),
+    sa.PrimaryKeyConstraint('id'),
+    sa.UniqueConstraint('name')
+    )
+    op.create_table('player',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('username', sa.String(length=80), nullable=False),
+    sa.Column('hostname', sa.String(length=120), nullable=False),
+    sa.Column('password', sa.String(length=120), nullable=False),
+    sa.PrimaryKeyConstraint('id'),
+    sa.UniqueConstraint('hostname'),
+    sa.UniqueConstraint('username')
+    )
+    op.create_table('user',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('username', sa.String(length=80), nullable=False),
+    sa.Column('password', sa.String(length=120), nullable=False),
+    sa.Column('role', sa.String(length=20), nullable=False),
+    sa.Column('theme', sa.String(length=10), nullable=False),
+    sa.PrimaryKeyConstraint('id'),
+    sa.UniqueConstraint('username')
+    )
+    op.create_table('content',
+    sa.Column('id', sa.Integer(), nullable=False),
+    sa.Column('file_name', sa.String(length=120), nullable=False),
+    sa.Column('duration', sa.Integer(), nullable=False),
+    sa.Column('player_id', sa.Integer(), nullable=True),
+    sa.Column('group_id', sa.Integer(), nullable=True),
+    sa.ForeignKeyConstraint(['group_id'], ['group.id'], ),
+    sa.ForeignKeyConstraint(['player_id'], ['player.id'], ),
+    sa.PrimaryKeyConstraint('id')
+    )
+    op.create_table('group_players',
+    sa.Column('group_id', sa.Integer(), nullable=False),
+    sa.Column('player_id', sa.Integer(), nullable=False),
+    sa.ForeignKeyConstraint(['group_id'], ['group.id'], ),
+    sa.ForeignKeyConstraint(['player_id'], ['player.id'], ),
+    sa.PrimaryKeyConstraint('group_id', 'player_id')
+    )
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_table('group_players')
+    op.drop_table('content')
+    op.drop_table('user')
+    op.drop_table('player')
+    op.drop_table('group')
+    # ### end Alembic commands ###

requirements.txt

@@ -3,7 +3,7 @@ bcrypt==4.2.1
 blinker==1.9.0
 click==8.1.8
 Flask==3.1.0
-
+Flask-Bcrypt==1.0.1
 Flask-Login==0.6.3
 Flask-Migrate==4.1.0
 Flask-SQLAlchemy==3.1.1
@@ -16,4 +16,3 @@ SQLAlchemy==2.0.37
 typing_extensions==4.12.2
 Werkzeug==3.1.3
 gunicorn==20.1.0
-Flask-Bcrypt==1.0.1

templates/add_group.html

@@ -3,8 +3,21 @@
 <head>
     <title>Add Group</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Add Group</h1>
         <form action="{{ url_for('add_group') }}" method="post">

templates/add_player.html

@@ -3,11 +3,24 @@
 <head>
     <title>Add Player</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Add Player</h1>
-        <form action="{{ url_for('add_player') }}" method="post">
+        <form method="POST" action="{{ url_for('add_player') }}">
             <div class="mb-3">
                 <label for="username" class="form-label">Player Name</label>
                 <input type="text" class="form-control" id="username" name="username" required>
@@ -16,10 +29,6 @@
                 <label for="hostname" class="form-label">Hostname</label>
                 <input type="text" class="form-control" id="hostname" name="hostname" required>
             </div>
-            <div class="mb-3">
-                <label for="ip" class="form-label">IP Address</label>
-                <input type="text" class="form-control" id="ip" name="ip" required>
-            </div>
             <div class="mb-3">
                 <label for="password" class="form-label">Password</label>
                 <input type="password" class="form-control" id="password" name="password" required>

templates/admin.html

@@ -3,60 +3,101 @@
 <head>
     <title>Admin Panel</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Admin Panel</h1>
-        <h2>Manage Users</h2>
-        <table class="table">
-            <thead>
-                <tr>
-                    <th>Username</th>
-                    <th>Role</th>
-                    <th>Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for user in users %}
-                    <tr>
-                        <td>{{ user.username }}</td>
-                        <td>{{ user.role }}</td>
-                        <td>
-                            <form action="{{ url_for('change_role', user_id=user.id) }}" method="post" class="d-inline">
-                                <select name="role" class="form-select d-inline-block" style="width: auto;">
-                                    <option value="user" {% if user.role == 'user' %}selected{% endif %}>User</option>
-                                    <option value="admin" {% if user.role == 'admin' %}selected{% endif %}>Admin</option>
-                                </select>
-                                <button type="submit" class="btn btn-sm btn-primary">Change Role</button>
-                            </form>
-                            <form action="{{ url_for('delete_user', user_id=user.id) }}" method="post" class="d-inline">
-                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this user?');">Delete</button>
-                            </form>
-                        </td>
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+            <div class="card-header">
+                <h2>Manage Users</h2>
+            </div>
+            <div class="card-body">
+                <!-- Manage User Roles Section -->
+                <h3>Manage User Roles</h3>
+                <table class="table">
+                    <thead>
+                        <tr>
+                            <th>Username</th>
+                            <th>Role</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {% for user in users %}
+                            <tr>
+                                <td>{{ user.username }}</td>
+                                <td>{{ user.role }}</td>
+                                <td>
+                                    <form action="{{ url_for('change_role', user_id=user.id) }}" method="post" class="d-inline">
+                                        <select name="role" class="form-select d-inline-block" style="width: auto;">
+                                            <option value="user" {% if user.role == 'user' %}selected{% endif %}>User</option>
+                                            <option value="admin" {% if user.role == 'admin' %}selected{% endif %}>Admin</option>
+                                        </select>
+                                        <button type="submit" class="btn btn-sm btn-primary">Change Role</button>
+                                    </form>
+                                    <form action="{{ url_for('delete_user', user_id=user.id) }}" method="post" class="d-inline">
+                                        <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this user?');">Delete</button>
+                                    </form>
+                                </td>
+                            </tr>
+                        {% endfor %}
+                    </tbody>
+                </table>
 
-        <h2>Create New User</h2>
-        <form action="{{ url_for('create_user') }}" method="post">
-            <div class="mb-3">
-                <label for="username" class="form-label">Username</label>
-                <input type="text" class="form-control" id="username" name="username" required>
+                <!-- Add New User Section -->
+                <h3 class="mt-4">Add New User</h3>
+                <form action="{{ url_for('create_user') }}" method="post">
+                    <div class="mb-3">
+                        <label for="username" class="form-label">Username</label>
+                        <input type="text" class="form-control" id="username" name="username" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="password" class="form-label">Password</label>
+                        <input type="password" class="form-control" id="password" name="password" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="role" class="form-label">Role</label>
+                        <select class="form-select" id="role" name="role" required>
+                            <option value="user">User</option>
+                            <option value="admin">Admin</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="btn btn-success">Create User</button>
+                </form>
             </div>
-            <div class="mb-3">
-                <label for="password" class="form-label">Password</label>
-                <input type="password" class="form-control" id="password" name="password" required>
+        </div>
+
+        <!-- Change Theme Section -->
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+            <div class="card-header">
+                <h2>Change Theme</h2>
             </div>
-            <div class="mb-3">
-                <label for="role" class="form-label">Role</label>
-                <select class="form-select" id="role" name="role" required>
-                    <option value="user">User</option>
-                    <option value="admin">Admin</option>
-                </select>
+            <div class="card-body">
+                <form action="{{ url_for('change_theme') }}" method="post">
+                    <div class="mb-3">
+                        <label for="theme" class="form-label">Select Theme</label>
+                        <select class="form-select" id="theme" name="theme" required>
+                            <option value="light" {% if theme == 'light' %}selected{% endif %}>Light</option>
+                            <option value="dark" {% if theme == 'dark' %}selected{% endif %}>Dark</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="btn btn-primary">Change Theme</button>
+                </form>
             </div>
-            <button type="submit" class="btn btn-success">Create User</button>
-        </form>
+        </div>
 
         <div class="mt-4">
             <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
@@ -65,4 +106,4 @@
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>

templates/dashboard.html

@@ -5,8 +5,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Dashboard</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Dashboard</h1>
 
@@ -15,110 +25,116 @@
             <a href="{{ url_for('logout') }}" class="btn btn-danger">Sign Out</a>
         </div>
 
-        <!-- Users Management Section -->
-        {% if current_user.role == 'admin' %}
-        <div class="card mb-4">
-            <div class="card-header bg-info text-white">
-                <h2>Users Management</h2>
-            </div>
-            <div class="card-body text-center">
-                <a href="{{ url_for('admin') }}" class="btn btn-info btn-lg">Manage Users</a>
-            </div>
-        </div>
-        {% endif %}
+        <div class="row">
+            <div class="col-md-8">
+                <!-- Players Section -->
+                <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+                    <div class="card-header bg-primary text-white">
+                        <h2>Players</h2>
+                    </div>
+                    <div class="card-body">
+                        <ul class="list-group">
+                            {% for player in players %}
+                                <li class="list-group-item d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <strong>{{ player.username }}</strong>
+                                    </div>
+                                    <div>
+                                        <a href="{{ url_for('player_page', player_id=player.id) }}" class="btn btn-sm btn-secondary">Manage Player</a>
+                                        <a href="{{ url_for('player_fullscreen', player_id=player.id) }}" class="btn btn-sm btn-primary">Full Screen</a>
+                                        {% if current_user.role == 'admin' %}
+                                        <form action="{{ url_for('delete_player', player_id=player.id) }}" method="post" style="display:inline;">
+                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this player?');">Delete</button>
+                                        </form>
+                                        {% endif %}
+                                    </div>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                        {% if current_user.role == 'admin' %}
+                        <div class="mt-3">
+                            <a href="{{ url_for('add_player') }}" class="btn btn-success">Add Player</a>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
 
-        <!-- Players Section -->
-        <div class="card mb-4">
-            <div class="card-header bg-primary text-white">
-                <h2>Players</h2>
-            </div>
-            <div class="card-body">
-                <ul class="list-group">
-                    {% for player in players %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>
-                                <strong>{{ player.username }}</strong> ({{ player.ip }})
-                            </div>
-                            <div>
-                                <a href="{{ url_for('player_page', player_id=player.id) }}" class="btn btn-sm btn-secondary">Manage Player</a>
-                                <a href="{{ url_for('player_fullscreen', player_id=player.id) }}" class="btn btn-sm btn-primary">Full Screen</a>
-                                {% if current_user.role == 'admin' %}
-                                <form action="{{ url_for('delete_player', player_id=player.id) }}" method="post" style="display:inline;">
-                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this player?');">Delete</button>
-                                </form>
-                                {% endif %}
-                            </div>
-                        </li>
-                    {% endfor %}
-                </ul>
+                <!-- Groups Section -->
+                <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+                    <div class="card-header bg-success text-white">
+                        <h2>Player Groups</h2>
+                    </div>
+                    <div class="card-body">
+                        <ul class="list-group">
+                            {% for group in groups %}
+                                <li class="list-group-item d-flex justify-content-between align-items-center">
+                                    <div>
+                                        <strong>{{ group.name }}</strong> ({{ group.players | length }} players)
+                                        <ul class="list-group mt-2">
+                                            {% for player in group.players %}
+                                                <li class="list-group-item">
+                                                    {{ player.username }}
+                                                </li>
+                                            {% endfor %}
+                                        </ul>
+                                    </div>
+                                    <div>
+                                        <a href="{{ url_for('manage_group', group_id=group.id) }}" class="btn btn-sm btn-secondary">Manage Group</a>
+                                        <a href="{{ url_for('group_fullscreen', group_id=group.id) }}" class="btn btn-sm btn-primary">Full Screen</a>
+                                        {% if current_user.role == 'admin' %}
+                                        <form action="{{ url_for('delete_group', group_id=group.id) }}" method="post" style="display:inline;">
+                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this group?');">Delete</button>
+                                        </form>
+                                        {% endif %}
+                                    </div>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                        {% if current_user.role == 'admin' %}
+                        <div class="mt-3">
+                            <a href="{{ url_for('add_group') }}" class="btn btn-primary">Add Group</a>
+                        </div>
+                        {% endif %}
+                    </div>
+                </div>
+
+                <!-- Content Upload Section -->
+                <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+                    <div class="card-header bg-warning text-dark">
+                        <h2>Content Upload</h2>
+                    </div>
+                    <div class="card-body text-center">
+                        <a href="{{ url_for('upload_content') }}" class="btn btn-warning btn-lg">Upload Content</a>
+                    </div>
+                </div>
+
+                <!-- Integrate Player Section -->
                 {% if current_user.role == 'admin' %}
-                <div class="mt-3">
-                    <a href="{{ url_for('add_player') }}" class="btn btn-success">Add Player</a>
+                <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+                    <div class="card-header bg-dark text-white">
+                        <h2>Integrate Player</h2>
+                    </div>
+                    <div class="card-body text-center">
+                        <a href="{{ url_for('integrate_player') }}" class="btn btn-dark btn-lg">Integrate Player</a>
+                    </div>
                 </div>
                 {% endif %}
             </div>
-        </div>
 
-        <!-- Groups Section -->
-        <div class="card mb-4">
-            <div class="card-header bg-success text-white">
-                <h2>Player Groups</h2>
-            </div>
-            <div class="card-body">
-                <ul class="list-group">
-                    {% for group in groups %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>
-                                <strong>{{ group.name }}</strong> ({{ group.players | length }} players)
-                                <ul class="list-group mt-2">
-                                    {% for player in group.players %}
-                                        <li class="list-group-item">
-                                            {{ player.username }} ({{ player.ip }})
-                                        </li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                            <div>
-                                <a href="{{ url_for('manage_group', group_id=group.id) }}" class="btn btn-sm btn-secondary">Manage Group</a>
-                                <a href="{{ url_for('group_fullscreen', group_id=group.id) }}" class="btn btn-sm btn-primary">Full Screen</a>
-                                {% if current_user.role == 'admin' %}
-                                <form action="{{ url_for('delete_group', group_id=group.id) }}" method="post" style="display:inline;">
-                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this group?');">Delete</button>
-                                </form>
-                                {% endif %}
-                            </div>
-                        </li>
-                    {% endfor %}
-                </ul>
-                {% if current_user.role == 'admin' %}
-                <div class="mt-3">
-                    <a href="{{ url_for('add_group') }}" class="btn btn-primary">Add Group</a>
+            <!-- App Settings Section -->
+            {% if current_user.role == 'admin' %}
+            <div class="col-md-4">
+                <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
+                    <div class="card-header bg-info text-white">
+                        <h2>App Settings</h2>
+                    </div>
+                    <div class="card-body text-center">
+                        <a href="{{ url_for('admin') }}" class="btn btn-info btn-lg">Go to Settings</a>
+                    </div>
                 </div>
-                {% endif %}
             </div>
+            {% endif %}
         </div>
-
-        <!-- Content Upload Section -->
-        <div class="card mb-4">
-            <div class="card-header bg-warning text-dark">
-                <h2>Content Upload</h2>
-            </div>
-            <div class="card-body text-center">
-                <a href="{{ url_for('upload_content') }}" class="btn btn-warning btn-lg">Upload Content</a>
-            </div>
-        </div>
-
-        <!-- Integrate Player Section -->
-        {% if current_user.role == 'admin' %}
-        <div class="card mb-4">
-            <div class="card-header bg-dark text-white">
-                <h2>Integrate Player</h2>
-            </div>
-            <div class="card-body text-center">
-                <a href="{{ url_for('integrate_player') }}" class="btn btn-dark btn-lg">Integrate Player</a>
-            </div>
-        </div>
-        {% endif %}
     </div>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>

templates/integrate_player.html

@@ -3,13 +3,26 @@
 <head>
     <title>Integrate Player</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Integrate Player</h1>
 
         <!-- Players Section -->
-        <div class="card mb-4">
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
             <div class="card-header bg-primary text-white">
                 <h2>Players</h2>
             </div>
@@ -17,7 +30,7 @@
                 <div class="row">
                     {% for player in players %}
                         <div class="col-md-4 mb-3">
-                            <div class="card">
+                            <div class="card {{ 'dark-mode' if theme == 'dark' else '' }}">
                                 <div class="card-body">
                                     <h5 class="card-title">{{ player.username }}</h5>
                                     <p class="card-text">{{ player.ip }}</p>
@@ -35,7 +48,7 @@
         </div>
 
         <!-- Groups Section -->
-        <div class="card mb-4">
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
             <div class="card-header bg-success text-white">
                 <h2>Groups</h2>
             </div>
@@ -43,7 +56,7 @@
                 <div class="row">
                     {% for group in groups %}
                         <div class="col-md-4 mb-3">
-                            <div class="card">
+                            <div class="card {{ 'dark-mode' if theme == 'dark' else '' }}">
                                 <div class="card-body">
                                     <h5 class="card-title">{{ group.name }}</h5>
                                     <p class="card-text">{{ group.players | length }} players</p>

templates/manage_group.html

@@ -3,13 +3,26 @@
 <head>
     <title>Manage Group</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Manage Group: {{ group.name }}</h1>
 
         <!-- Add Players to Group Section -->
-        <div class="card mb-4">
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
             <div class="card-header bg-primary text-white">
                 <h2>Add Players to Group</h2>
             </div>
@@ -29,17 +42,17 @@
         </div>
 
         <!-- Players in Group Section -->
-        <div class="card mb-4">
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
             <div class="card-header bg-secondary text-white">
                 <h2>Players in Group</h2>
             </div>
             <div class="card-body">
                 <ul class="list-group">
                     {% for player in group.players %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>{{ player.username }} ({{ player.ip }})</div>
+                        <li class="list-group-item {{ 'dark-mode' if theme == 'dark' else '' }}">
+                            {{ player.username }} ({{ player.ip }})
                             <form action="{{ url_for('remove_player_from_group', group_id=group.id, player_id=player.id) }}" method="post" class="d-inline">
-                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to remove this player from the group?');">Remove</button>
+                                <button type="submit" class="btn btn-danger btn-sm float-end">Remove</button>
                             </form>
                         </li>
                     {% endfor %}
@@ -47,57 +60,15 @@
             </div>
         </div>
 
-        <!-- Upload Content Section -->
-        <div class="card mb-4">
-            <div class="card-header bg-success text-white">
-                <h2>Upload Content for Group</h2>
-            </div>
-            <div class="card-body">
-                <form action="{{ url_for('upload_content_to_group', group_id=group.id) }}" method="post" enctype="multipart/form-data">
-                    <div class="mb-3">
-                        <label for="files" class="form-label">Select Images</label>
-                        <input type="file" class="form-control" id="files" name="files" multiple required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="duration" class="form-label">Display Duration (seconds)</label>
-                        <input type="number" class="form-control" id="duration" name="duration" required>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Upload</button>
-                </form>
-            </div>
-        </div>
-
-        <!-- Manage Group Content Section -->
-        <div class="card mb-4">
-            <div class="card-header bg-warning text-dark">
-                <h2>Manage Group Content</h2>
-            </div>
-            <div class="card-body">
-                <ul class="list-group">
-                    {% for content in group.content %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>{{ content.file_name }} - {{ content.duration }} seconds</div>
-                            <div>
-                                <!-- Edit Duration Form -->
-                                <form action="{{ url_for('edit_group_content', content_id=content.id) }}" method="post" class="d-inline">
-                                    <input type="number" name="duration" value="{{ content.duration }}" class="form-control d-inline-block" style="width: 80px;" required>
-                                    <button type="submit" class="btn btn-sm btn-warning">Edit</button>
-                                </form>
-                                <!-- Delete Content Form -->
-                                <form action="{{ url_for('delete_group_content', content_id=content.id) }}" method="post" class="d-inline">
-                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this content?');">Delete</button>
-                                </form>
-                            </div>
-                        </li>
-                    {% endfor %}
-                </ul>
-                <a href="{{ url_for('group_fullscreen', group_id=group.id) }}" class="btn btn-primary mt-3">Full Screen</a>
-            </div>
+        <!-- Replace Upload Content Card with Button -->
+        {% if current_user.role == 'admin' %}
+        <div class="text-center mb-4">
+            <a href="{{ url_for('upload_content', target_type='group', target_id=group.id, return_url=request.url) }}" class="btn btn-primary">Upload Content</a>
         </div>
+        {% endif %}
 
         <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
     </div>
-
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

templates/player_auth.html

@@ -3,8 +3,21 @@
 <head>
     <title>Player Authentication</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Player Authentication</h1>
         <form action="{{ url_for('player_fullscreen', player_id=player_id) }}" method="post">

templates/player_page.html

@@ -3,13 +3,26 @@
 <head>
     <title>Player Schedule</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Player Schedule for {{ player.username }}</h1>
 
         <!-- Player Info Section -->
-        <div class="card mb-4">
+        <div class="card mb-4 {{ 'dark-mode' if theme == 'dark' else '' }}">
             <div class="card-header bg-info text-white">
                 <h2>Player Info</h2>
             </div>
@@ -32,76 +45,24 @@
                 <h4 class="text-center">Member of Group(s):</h4>
                 <ul class="list-group">
                     {% for group in player.groups %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>{{ group.name }}</div>
-                            <form action="{{ url_for('remove_player_from_group', group_id=group.id, player_id=player.id) }}" method="post" class="d-inline">
-                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to remove this player from the group?');">Remove</button>
-                            </form>
-                        </li>
+                        <li class="list-group-item {{ 'dark-mode' if theme == 'dark' else '' }}">{{ group.name }}</li>
                     {% endfor %}
                 </ul>
             {% else %}
-                <h4 class="text-center">Not a member of any group</h4>
+                <p class="text-center">This player is not a member of any groups.</p>
             {% endif %}
         </div>
 
-        <!-- Schedule Section -->
-        <div class="card mb-4">
-            <div class="card-header bg-primary text-white">
-                <h2>Schedule</h2>
-            </div>
-            <div class="card-body">
-                <ul class="list-group">
-                    {% for item in content %}
-                        <li class="list-group-item d-flex justify-content-between align-items-center">
-                            <div>
-                                {{ item.file_name }} - {{ item.duration }} seconds
-                            </div>
-                            {% if not player.groups %}
-                            <div>
-                                <!-- Edit Duration Form -->
-                                <form action="{{ url_for('edit_content', content_id=item.id) }}" method="post" class="d-inline">
-                                    <input type="number" name="duration" value="{{ item.duration }}" class="form-control d-inline-block" style="width: 80px;" required>
-                                    <button type="submit" class="btn btn-sm btn-warning">Edit</button>
-                                </form>
-                                <!-- Delete Resource Form -->
-                                <form action="{{ url_for('delete_content', content_id=item.id) }}" method="post" class="d-inline">
-                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Are you sure you want to delete this resource?');">Delete</button>
-                                </form>
-                            </div>
-                            {% endif %}
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-
-        <!-- Upload Section -->
-        {% if not player.groups %}
-        <div class="card mb-4">
-            <div class="card-header bg-success text-white">
-                <h2>Upload Content</h2>
-            </div>
-            <div class="card-body">
-                <form action="{{ url_for('upload_content_to_player', player_id=player.id) }}" method="post" enctype="multipart/form-data">
-                    <div class="mb-3">
-                        <label for="files" class="form-label">Select Images</label>
-                        <input type="file" class="form-control" id="files" name="files" multiple required>
-                    </div>
-                    <div class="mb-3">
-                        <label for="duration" class="form-label">Display Duration (seconds)</label>
-                        <input type="number" class="form-control" id="duration" name="duration" required>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Upload</button>
-                </form>
-            </div>
+        <!-- Replace Upload Content Card with Button -->
+        {% if current_user.role == 'admin' %}
+        <div class="text-center mb-4">
+            <a href="{{ url_for('upload_content', target_type='player', target_id=player.id, return_url=request.url) }}" class="btn btn-primary">Upload Content</a>
         </div>
         {% endif %}
 
         <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Back to Dashboard</a>
         <a href="{{ url_for('player_fullscreen', player_id=player.id) }}" class="btn btn-primary">Full Screen</a>
     </div>
-
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </html>

templates/register.html

@@ -3,8 +3,21 @@
 <head>
     <title>Register</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Register</h1>
         <form action="{{ url_for('register') }}" method="post">

templates/upload_content.html

@@ -3,32 +3,58 @@
 <head>
     <title>Upload Content</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        body.dark-mode {
+            background-color: #121212;
+            color: #ffffff;
+        }
+        .card.dark-mode {
+            background-color: #1e1e1e;
+            color: #ffffff;
+        }
+        .dark-mode label, .dark-mode th, .dark-mode td {
+            color: #ffffff;
+        }
+    </style>
 </head>
-<body>
+<body class="{{ 'dark-mode' if theme == 'dark' else '' }}">
     <div class="container py-5">
         <h1 class="text-center mb-4">Upload Content</h1>
         <form method="POST" enctype="multipart/form-data">
             <div class="mb-3">
                 <label for="target_type" class="form-label">Target Type:</label>
-                <select name="target_type" id="target_type" class="form-select" required>
-                    <option value="player">Player</option>
-                    <option value="group">Group</option>
+                <select name="target_type" id="target_type" class="form-select" required {% if target_type %}disabled{% endif %}>
+                    <option value="player" {% if target_type == 'player' %}selected{% endif %}>Player</option>
+                    <option value="group" {% if target_type == 'group' %}selected{% endif %}>Group</option>
                 </select>
+                {% if target_type %}
+                    <input type="hidden" name="target_type" value="{{ target_type }}">
+                {% endif %}
             </div>
             <div class="mb-3">
                 <label for="target_id" class="form-label">Target ID:</label>
-                <select name="target_id" id="target_id" class="form-select" required>
+                <select name="target_id" id="target_id" class="form-select" required {% if target_id %}disabled{% endif %}>
                     <optgroup label="Players">
                         {% for player in players %}
-                            <option value="{{ player.id }}">{{ player.username }}</option>
+                            <option value="{{ player.id }}" {% if target_type == 'player' and target_id == player.id %}selected{% endif %}>{{ player.username }}</option>
                         {% endfor %}
                     </optgroup>
                     <optgroup label="Groups">
                         {% for group in groups %}
-                            <option value="{{ group.id }}">{{ group.name }}</option>
+                            <option value="{{ group.id }}" {% if target_type == 'group' and target_id == group.id %}selected{% endif %}>{{ group.name }}</option>
                         {% endfor %}
                     </optgroup>
                 </select>
+                {% if target_id %}
+                    <input type="hidden" name="target_id" value="{{ target_id }}">
+                {% endif %}
+            </div>
+            <div class="mb-3">
+                <label for="media_type" class="form-label">Media Type:</label>
+                <select name="media_type" id="media_type" class="form-select" required>
+                    <option value="image">Image</option>
+                    <option value="video">Video</option>
+                </select>
             </div>
             <div class="mb-3">
                 <label for="files" class="form-label">Files:</label>
@@ -40,8 +66,26 @@
             </div>
             <button type="submit" class="btn btn-primary">Upload</button>
         </form>
+        <a href="{{ return_url }}" class="btn btn-secondary mt-3">Back</a>
         <a href="{{ url_for('dashboard') }}" class="btn btn-secondary mt-3">Back to Dashboard</a>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
+    <script>
+        document.getElementById('files').addEventListener('change', function(event) {
+            const files = event.target.files;
+            const mediaType = document.getElementById('media_type').value;
+            if (mediaType === 'video' && files.length > 0) {
+                const videoFile = files[0];
+                const videoElement = document.createElement('video');
+                videoElement.preload = 'metadata';
+                videoElement.onloadedmetadata = function() {
+                    window.URL.revokeObjectURL(videoElement.src);
+                    const duration = videoElement.duration;
+                    document.getElementById('duration').value = Math.round(duration);
+                }
+                videoElement.src = URL.createObjectURL(videoFile);
+            }
+        });
+    </script>
 </body>
 </html>