Added API

API has auth

.gitignore

@@ -160,3 +160,6 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 .idea/
+
+# static
+staticfiles/

BH/settings.py

@@ -11,6 +11,7 @@ https://docs.djangoproject.com/en/3.0/ref/settings/
 """
 
 import os
+from dotenv import load_dotenv
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -23,9 +24,9 @@ TEMPLATES_DIR = os.path.join(BASE_DIR + '/templates')
 SECRET_KEY = '!2g)+m+_h9fq9%il5+t5#qnj^9502or6$=2!$==v=i2*c#7q*m'
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
+DEBUG = False
 
-ALLOWED_HOSTS = []
+ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'beyond-heroes.com', 'www.beyond-heroes.com']
 
 
 # Application definition
@@ -33,26 +34,43 @@ ALLOWED_HOSTS = []
 INSTALLED_APPS = [
     'crispy_forms',
     'crispy_bootstrap4',
+
     'blog.apps.BlogConfig',
     'users.apps.UsersConfig',
+    'api.apps.APIConfig',
+
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+    'django.contrib.sites', # for django-allauth
+
+    'corsheaders',
+    'dj_rest_auth',
+    'rest_framework',
+    'rest_framework.authtoken',
+    # 'allauth',
+    # 'allauth.account',
+    # 'allauth.socialaccount',
+    # 'dj_rest_auth.registration', # for api side user registration
 ]
 
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware', # cors-headers
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
+    # 'allauth.account.middleware.AccountMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
 
+CORS_ORIGIN_WHITELIST = ( 'http://localhost:3000', 'http://www.beyond-heroes.com')
+
 ROOT_URLCONF = 'BH.urls'
 
 TEMPLATES = [
@@ -103,6 +121,17 @@ AUTH_PASSWORD_VALIDATORS = [
     },
 ]
 
+REST_FRAMEWORK = {
+    'DEFAULT_PERMISSION_CLASSES': [
+        # 'rest_framework.permissions.AllowAny',
+        'rest_framework.permissions.IsAuthenticated',
+    ],
+    'DEFAULT_AUTHENTICATION_CLASSES': (
+        # 'rest_framework.authentication.SessionAuthentication', # causes CSRF Token conflicts in API
+        'rest_framework.authentication.TokenAuthentication',
+    )
+}
+
 
 # Internationalization
 # https://docs.djangoproject.com/en/3.0/topics/i18n/
@@ -121,6 +150,8 @@ USE_TZ = True
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/3.0/howto/static-files/
 
+# remember to `python manage.py collectstatic`
+STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 STATIC_URL = '/static/'
 MEDIA_ROOT = os.path.join(BASE_DIR + '/media')
 MEDIA_URL = '/media/'
@@ -128,3 +159,8 @@ MEDIA_URL = '/media/'
 CRISPY_TEMPLATE_PACK = 'bootstrap4'
 LOGIN_REDIRECT_URL = 'Home'
 LOGIN_URL = 'Login'
+
+EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' # prints to console
+# SITE_ID = 1 # for django-allauth
+
+DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

BH/urls.py

@@ -1,4 +1,4 @@
-"""TechBlog URL Configuration
+"""BH URL Configuration
 
 The `urlpatterns` list routes URLs to views. For more information please see:
     https://docs.djangoproject.com/en/3.0/topics/http/urls/
@@ -20,8 +20,12 @@ from django.urls import path, include
 
 urlpatterns = [
     path('', include('blog.urls')),
-    path('users/', include('users.urls')),
     path('admin/', admin.site.urls),
+    path('api/v1/', include('api.urls')),
+    path('users/', include('users.urls')),
+    path('api-auth/', include('rest_framework.urls')),
+    path('api/v1/dj-rest-auth/', include('dj_rest_auth.urls')),
+    # path('api/v1/dj-rest-auth/register/', include('dj_rest_auth.registration.urls')),
 ]
 
 if settings.DEBUG:

api/admin.py

@@ -0,0 +1,9 @@
+from django.contrib import admin
+from .models import *
+
+
+# Register your models here.
+admin.site.register(Province)
+admin.site.register(AssaultTroop)
+admin.site.register(Player)
+admin.site.register(Server)

api/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class APIConfig(AppConfig):
+    name = 'api'

api/migrations/0001_initial.py

@@ -0,0 +1,71 @@
+# Generated by Django 5.2.9 on 2026-02-19 10:09
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='Player',
+            fields=[
+                ('id', models.IntegerField(primary_key=True, serialize=False)),
+                ('name', models.CharField(max_length=50)),
+                ('faction', models.IntegerField()),
+                ('server', models.CharField(max_length=20)),
+            ],
+            options={
+                'ordering': ['id'],
+            },
+        ),
+        migrations.CreateModel(
+            name='Province',
+            fields=[
+                ('id', models.IntegerField(primary_key=True, serialize=False)),
+                ('name', models.CharField(max_length=100)),
+                ('faction', models.IntegerField()),
+                ('map', models.CharField(max_length=255)),
+                ('mov_speed', models.IntegerField()),
+                ('ats', models.JSONField(null=True)),
+            ],
+            options={
+                'ordering': ['id'],
+            },
+        ),
+        migrations.CreateModel(
+            name='Server',
+            fields=[
+                ('id', models.IntegerField(primary_key=True, serialize=False)),
+                ('players', models.IntegerField()),
+                ('capacity', models.IntegerField()),
+                ('region', models.CharField(max_length=3)),
+                ('address', models.CharField(max_length=20)),
+            ],
+            options={
+                'ordering': ['id'],
+            },
+        ),
+        migrations.CreateModel(
+            name='AssaultTroop',
+            fields=[
+                ('id', models.IntegerField(primary_key=True, serialize=False)),
+                ('name', models.CharField(max_length=100)),
+                ('faction', models.IntegerField()),
+                ('type', models.IntegerField()),
+                ('province', models.IntegerField()),
+                ('orders', models.JSONField(null=True)),
+                ('owner', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='ats', to=settings.AUTH_USER_MODEL)),
+            ],
+            options={
+                'ordering': ['id'],
+            },
+        ),
+    ]

api/models.py

@@ -0,0 +1,70 @@
+from django.db import models
+from django.contrib.auth.models import User
+from django.db.models.fields import CharField, IntegerField
+
+
+# Create your models here.
+class Province(models.Model):
+    id = models.IntegerField(primary_key = True)
+    name = models.CharField(max_length = 100, blank = False)
+    faction = models.IntegerField() # 0 - Neutral, 1 - Allies, 2 - Axis
+    map = models.CharField(max_length=255)
+    mov_speed = models.IntegerField()
+    ats = models.JSONField(null=True)
+
+    class Meta:
+        ordering = ['id']
+
+    def __str__(self):
+        return f"{self.name} - {self.faction}"
+
+
+class AssaultTroop(models.Model):
+    id = models.IntegerField(primary_key = True)
+    name = models.CharField(max_length = 100, blank = False)
+    faction = models.IntegerField() # 0 - Neutral, 1 - Allies, 2 - Axis
+    type = models.IntegerField()
+    province = models.IntegerField() # Province ID (-1 for not deployed)
+    orders = models.JSONField(null=True)
+    owner = models.ForeignKey(
+            'auth.User',
+            related_name='ats',
+            on_delete=models.CASCADE
+        )
+
+    class Meta:
+        ordering = ['id']
+
+    def __str__(self):
+        return f"{self.name} - {self.province},{self.faction}"
+
+
+
+class Player(models.Model):
+    id = models.IntegerField(primary_key = True)
+    name = models.CharField(max_length = 50, blank = False)
+    faction = models.IntegerField()
+    server = CharField(max_length = 20, blank = False)
+
+    class Meta:
+        ordering = ['id']
+
+    def __str__(self):
+        return self.name
+
+
+
+class Server(models.Model):
+    id = IntegerField(primary_key = True)
+    players = IntegerField() # total current players
+    capacity = IntegerField() # max player capacity
+    region = CharField(max_length = 3, blank = False) # 3 letter abb. for region
+    address = CharField(max_length = 20, blank = False)
+
+    class Meta:
+        ordering = ['id']
+
+    def __str__(self):
+        return f"{self.address} - {self.region}"
+
+

api/permissions.py

@@ -0,0 +1,12 @@
+from rest_framework import permissions
+
+class IsSuperUserOrReadOnly(permissions.BasePermission):
+	def has_permission(self, request, view):
+		if request.method in permissions.SAFE_METHODS:
+			return True
+		return request.user.is_superuser
+
+
+class IsStaff(permissions.BasePermission):
+	def has_permission(self, request, view):
+		return request.user.is_staff

api/serializers.py

@@ -0,0 +1,25 @@
+from rest_framework import serializers
+from .models import *
+
+class ProvinceSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Province
+        fields = ['id', 'name', 'faction', 'map', 'mov_speed', 'ats']
+
+
+class AssaultTroopSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = AssaultTroop
+        fields = ['id', 'name', 'faction', 'type', 'province', 'deployed', 'orders', 'owner']
+
+
+class PlayerSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Player
+        fields = ['id', 'name', 'faction', 'server']
+
+
+class ServerSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Server
+        fields = ['id', 'players', 'capacity', 'region', 'address']

api/templatetags/api_markdown_extras.py

@@ -0,0 +1,12 @@
+from django import template
+from django.template.defaultfilters import stringfilter
+
+import markdown as md
+
+
+register = template.Library()
+
+@register.filter()
+@stringfilter
+def markdown(value):
+    return md.markdown(value, extensions=['markdown.extensions.fenced_code'])

api/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

api/urls.py

@@ -0,0 +1,13 @@
+from django.urls import path
+from .views import * 
+
+urlpatterns = [
+    path('provinces/', ProvincesView.as_view()),
+    path('provinces/<int:pk>/', ProvinceView.as_view()),
+    path('assault_troops/', AssaultTroopsView.as_view()),
+    path('assault_troops/<int:nm>/', AssaultTroopView.as_view()),
+    path('players/', PlayersView.as_view()),
+    path('players/<int:nm>/', PlayerView.as_view()),
+    path('servers/', ServersView.as_view()),
+    path('servers/<int:nm>/', ServerView.as_view()),
+]

api/views.py

@@ -0,0 +1,48 @@
+from rest_framework import generics, permissions
+from .models import *
+from .serializers import *
+from .permissions import *
+
+
+class ProvincesView(generics.ListCreateAPIView):
+    permission_classes = (IsSuperUserOrReadOnly,)
+    queryset = Province.objects.all()
+    serializer_class = ProvinceSerializer
+
+class ProvinceView(generics.RetrieveUpdateDestroyAPIView):
+    permission_classes = (IsSuperUserOrReadOnly,)
+    queryset = Province.objects.all()
+    serializer_class = ProvinceSerializer
+
+
+class AssaultTroopsView(generics.ListCreateAPIView):
+    permission_classes = (IsSuperUserOrReadOnly,)
+    queryset = AssaultTroop.objects.all()
+    serializer_class = AssaultTroopSerializer
+
+class AssaultTroopView(generics.RetrieveUpdateDestroyAPIView):
+    permission_classes = (IsSuperUserOrReadOnly,)
+    queryset = AssaultTroop.objects.all()
+    serializer_class = AssaultTroopSerializer
+
+
+class PlayersView(generics.ListCreateAPIView):
+    permission_classes = (IsStaff,) # Only Staff can see player info, i.e. authorized servers
+    queryset = Player.objects.all()
+    serializer_class = PlayerSerializer
+
+class PlayerView(generics.RetrieveUpdateDestroyAPIView):
+    permission_classes = (IsStaff)
+    queryset = Player.objects.all()
+    serializer_class = PlayerSerializer
+
+
+class ServersView(generics.ListCreateAPIView):
+    permission_classes = (IsSuperUserOrReadOnly,)
+    queryset = Server.objects.all()
+    serializer_class = ServerSerializer
+
+class ServerView(generics.RetrieveUpdateDestroyAPIView):
+    permission_classes = (IsSuperUserOrReadOnly,)
+    queryset = Server.objects.all()
+    serializer_class = ServerSerializer

blog/migrations/0002_alter_blog_id_alter_post_id.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.2.9 on 2026-02-19 10:09
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('blog', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='blog',
+            name='id',
+            field=models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID'),
+        ),
+        migrations.AlterField(
+            model_name='post',
+            name='id',
+            field=models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID'),
+        ),
+    ]

requirements.txt

@@ -1,13 +1,16 @@
-Django==5.0.2
-django-bootstrap4==22.3
-django-braces==1.15.0
-django-cors-headers==4.3.1
-django-crispy-forms==2.1
-Markdown==3.4.1
+asgiref==3.11.0
+beautifulsoup4==4.14.3
+crispy-bootstrap4==2025.6
+Django==5.2.9
+django-bootstrap4==25.3
+django-braces==1.17.0
+django-cors-headers==4.9.0
+django-crispy-forms==2.5
+Markdown==3.10
 MarkupSafe==2.1.1
-crispy==0.7.3
-crispy-bootstrap4==2023.1
-bootstrap4==0.1.0
-cachetools==5.2.0
-certifi==2022.9.24
-cffi==1.15.1
+mysqlclient==2.2.7
+python-dotenv==1.2.1
+soupsieve==2.8
+sqlparse==0.5.4
+typing_extensions==4.15.0
+tzdata==2025.3

server.bat

@@ -1,5 +1,3 @@
 @ echo off
 echo The devlopment server will start in a few seconds...
-python manage.py makemigrations
-python manage.py migrate
 python manage.py runserver 3000

templates/base.html

@@ -3,97 +3,570 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Beyond Heroes</title>
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-  <!-- Custom CSS -->
-  <style>
-/*    body {
-      background-color: #f8f9fa;
-      color: #eeeeee;
-    }
-    .card {
-      border: 1px;
-      border-radius: 15px;
-      border-color: #eeeeee;
-      box-shadow: 0 0 10px rgba(250, 250, 250, 0.1);
-    }
-    .list-group-item {
-      background-color: #1e1f10;
-      border-color: #eeeeee;
-    }
-    .card-header {
-      background-color: #111111;
-      border-bottom: 1px solid #eeeeee;
-    }
-    .card-body {
-      background-color: #1e1f10;
-    }
-    .profile-image {
-      max-width: 125px;
-      border-radius: 50%;
-      padding: 20px;
-    }*/
-    .link {
+    <title>Beyond Heroes - Official Website</title>
+    <!-- <link rel="stylesheet" href="demo3.css"> -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Mozilla+Headline" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
+<style type="text/css">
+  :root {
+      --primary-color: #009020; /* Accents */
+      --primary-dark-color: #006020; /* Secondary Accents */
+      --secondary-color: #333; /* Dark gray for text */
+      --background-color: #1a1a1a; /* Dark background */
+      --card-bg-color: #2a2a2a; /* Background for cards */
+  /*    --font-family: 'Montserrat', sans-serif;*/
+  }
+
+  @font-face {
+      font-family: 'Alte DIN 1451 Mittelschrift';
+      src: url('mittelschrift.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
+  }
+  body {
+      font-family: 'Alte DIN 1451 Mittelschrift', sans-serif;
+  }
+
+  /* Allgemeine Stile (General Styles) */
+  body {
+      margin: 0;
+  /*    font-family: var(--font-family);*/
+      color: white;
+      background-color: var(--background-color);
+      line-height: 1.6;
+  }
+
+  h1, h2 {
+      font-family: 'Mozilla Headline';
+      letter-spacing: -1px;
+      margin: 0;
+  }
+
+  h3 {
+      margin: 0;
+  }
+
+  a {
+      color: var(--primary-color);
       text-decoration: none;
-    }
-  </style>
+  }
+
+  a:hover {
+      text-decoration: underline;
+  }
+
+  section {
+      padding: 60px 20px;
+  }
+
+  hr {
+      border: 0;
+      border-top: 1px solid #444;
+      margin: 15px 0;
+  }
+
+  /* Hero-Bereich (Hero Section) */
+  .hero-section {
+      position: relative;
+      height: 100vh; /* Volle Bildschirmhöhe (Full viewport height) */
+      background-size: cover;
+      background-position: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      color: white;
+  }
+
+  .hero-content {
+      background-color: rgba(0, 0, 0, 0.8);
+      padding: 40px;
+      margin: 0px 20%;
+      border-radius: 10px;
+  }
+
+  .hero-section h1 {
+      font-size: 4.7em;
+      font-weight: bold;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+  }
+
+  .hero-section p {
+      margin-block-start: 0;
+      font-size: 1.2em;
+      font-weight: lighter;
+      margin-bottom: 30px;
+  }
+
+  .discord-button {
+      background-color: var(--primary-color);
+      color: var(--background-color);
+      padding: 15px 30px;
+      letter-spacing: +0.8px;
+      border-radius: 50px;
+      font-weight: bold;
+      transition: background-color 0.3s ease;
+  }
+
+  .discord-button:hover {
+      background-color: var(--primary-dark-color);
+      text-decoration: none;
+  }
+
+  /* Team-Bereich (Team Section) */
+  .team-container {
+      display: flex;
+      gap: 40px;
+      max-width: 1200px;
+      margin: auto;
+      align-items: flex-start;
+  }
+
+  .dev-cards-column {
+      flex: 6;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+  }
+
+  .dev-card {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      background-color: var(--card-bg-color);
+      padding: 15px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background-color 0.3s ease;
+  }
+
+  .dev-card:hover, .dev-card.active {
+      background-color: var(--primary-color);
+      color: var(--background-color);
+  }
+
+  .dev-card:hover .dev-info p, .dev-card.active .dev-info p {
+      color: var(--background-color);
+  }
+
+  .dev-card img {
+      border-radius: 50%;
+      width: 60px;
+      height: 60px;
+      object-fit: cover;
+  }
+
+  .dev-info h3 {
+      margin-block-end: 0;
+  }
+
+  .dev-info p {
+      margin-block-start: 0;
+      margin-block-end: 0;
+      font-style: italic;
+      color: #bbb;
+  }
+
+  .dev-bio-column {
+      flex: 10;
+  }
+
+  #dev-bio-box {
+      background-color: var(--card-bg-color);
+      padding: 30px;
+      border-radius: 8px;
+      min-height: 975px; /* Stellt sicher, dass die Box groß genug ist (Ensures the box is large enough) */
+  }
+
+  #dev-bio-box p {
+      margin-block-start: 5px;
+      margin-block-end: 0;
+      font-size: 1.2em;
+  }
+
+  #dev-bio-box h3 {
+      color: var(--primary-color);
+      margin-block-end: 0;
+      font-size: 1.5em;
+  }
+
+  /* NEUE NAV-BAR (NEW NAV BAR) */
+  #navbar {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 00px;
+      z-index: 1000;
+      transition: background-color 0.3s ease, padding 0.3s ease;
+  }
+
+  #navbar .nav-brand{
+      margin-left: 40px;
+  }
+
+  #navbar .nav-links-div{
+      margin-right: 40px;
+  }
+
+  #navbar.scrolled {
+      position: fixed;
+      padding: 20px 40px;
+      top: 0;
+      background-color: var(--background-color); /* Feste Hintergrundfarbe (Solid background color) */
+      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
+      padding: 10px 40px;
+  }
+
+  #navbar.scrolled .nav-brand{
+      margin-left: 0px;
+  }
+
+  #navbar.scrolled .nav-links-div{
+      margin-right: 80px;
+  }
+
+  .nav-brand {
+      font-weight: bold;
+      font-size: 1.5em;
+      color: white;
+  }
+
+  .nav-links {
+      list-style: none;
+      letter-spacing: +0.6px;
+      display: flex;
+      gap: 30px;
+      margin: 0;
+      padding: 0;
+  }
+
+  .nav-links a {
+      color: white;
+      font-weight: bold;
+      transition: color 0.3s ease;
+  }
+
+  .nav-links button {
+      color: white;
+      font-weight: bold;
+      transition: color 0.3s ease;
+      background: transparent;
+      box-shadow: 0 0 0 #000;
+      border-width: 0;
+      font-size: 1em;
+      padding: 0px;
+  }
+
+  .nav-links a:hover, button:hover{
+      color: var(--primary-color);
+      text-decoration: none;
+  }
+
+  /* Responsive Design (Für kleinere Bildschirme) (For smaller screens) */
+  @media (max-width: 768px) {
+      .hero-section h1 {
+          font-size: 2.5em;
+      }
+      .hero-content p {
+          font-size: 1em;
+      }
+      .news-container, .team-container {
+          grid-template-columns: 1fr;
+          flex-direction: column;
+      }
+      .dev-bio-column {
+          min-height: auto;
+      }
+  }
+
+  /* NEUE ALLGEMEINE HILFSKLASSE (NEW GENERAL HELPER CLASS) */
+  .text-center {
+      text-align: center;
+  }
+
+  /* NEUER SUPPORT-BEREICH (NEW SUPPORT SECTION) */
+  #support-section {
+/*      margin-top: 90px;*/
+      padding: 80px 20px;
+/*      background-color: var(--card-bg-color);*/
+  }
+
+  #support-section h2 {
+      color: var(--primary-color);
+      font-size: 2.5em;
+      margin-bottom: 40px;
+      color: #eee;
+  }
+
+  #support-section h3 {
+      margin: 20px;
+      color: #ddd;
+  }
+
+  #support-section p {
+      max-width: 800px;
+      margin: auto;
+      font-size: 1.1em;
+      color: #bbb;
+  }
+
+  /* NEUER SUPPORT-BEREICH (NEW SUPPORT SECTION) */
+  #about-section {
+      padding: 80px 20px;
+      background-color: var(--card-bg-color);
+  }
+
+  #about-section h2 {
+      color: var(--primary-color);
+      font-size: 2.5em;
+      margin-bottom: 40px;
+  }
+
+  #about-section h3 {
+      margin: 20px;
+  }
+
+  #about-section p {
+      max-width: 800px;
+      margin: auto;
+      font-size: 1.1em;
+      color: #ccc;
+  }
+
+  /* Fußzeile (Footer) */
+  footer {
+      background-color: #111;
+      text-align: center;
+      padding: 30px;
+      margin-top: 50px;
+      font-size: 0.9em;
+      color: #bbb;
+  }
+  footer p {
+      margin: 0;
+  }
+  .footer-socials {
+      margin-bottom: 5px;
+  }
+
+  .footer-socials a {
+      color: #fff;
+      font-size: 2em; /* Größe der Icons (Size of the icons) */
+      margin: 0 50px;
+      transition: color 0.3s ease;
+  }
+  .footer-socials a:hover {
+      color: var(--primary-color);
+  }
+
+  /* Neuigkeiten-Bereich (News Section) */
+  #news-section h2, #team-section h2 {
+      text-align: center;
+      margin-bottom: 40px;
+      font-size: 2.5em;
+      color: var(--primary-color);
+  }
+
+  /* NEUE STILE FÜR DEN NEUIGKEITEN-BEREICH (NEW STYLES FOR NEWS SECTION) */
+  .news-container {
+      display: flex;
+      justify-content: center;
+      gap: 30px;
+      max-width: 1200px;
+      margin: auto;
+      flex-wrap: wrap; /* Erlaubt das Umbrechen auf kleineren Bildschirmen (Allows wrapping on smaller screens) */
+  }
+
+  .news-post {
+      background-color: var(--card-bg-color);
+      border-radius: 8px;
+      overflow: hidden; /* Stellt sicher, dass das Bild innerhalb der Form bleibt (Ensures the image stays within the shape) */
+      width: 350px; /* Feste Breite für jede Karte (Fixed width for each card) */
+      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
+      transition: transform 0.3s ease;
+  }
+
+  .news-post:hover {
+      transform: translateY(-5px);
+  }
+
+  .news-post img {
+      width: 100%;
+      height: 200px;
+      object-fit: cover;
+      display: block;
+  }
+
+  .post-content {
+      padding: 20px;
+  }
+
+  .news-post h3 {
+      color: var(--primary-color);
+      margin-block-end: 0;
+      font-size: 1.5em;
+  }
+
+  .news-post p {
+      font-size: 1.1em;
+  }
+
+  .news-post p.news-date {
+      margin-block-start: 0;
+      margin-block-end: 0;
+      font-style: italic;
+      font-size: 0.9em;
+      color: #bbb;
+      margin-bottom: 15px;
+  }
+
+  .news-post .read-more {
+      display: inline-block;
+      color: var(--primary-color);
+      font-weight: bold;
+      margin-top: 10px;
+  }
+  .news-post .read-more:hover {
+      text-decoration: underline;
+  }
+
+  /* ... Der Rest des CSS-Codes bleibt gleich ... */
+
+  /* Responsive Design (Für kleinere Bildschirme) */
+  @media (max-width: 768px) {
+      /* ... Die bereits existierenden Media-Query-Styles bleiben bestehen ... */
+      .news-container {
+          flex-direction: column;
+          align-items: center;
+      }
+      .news-post {
+          width: 90%; /* Nimmt fast die ganze Breite ein (Takes up almost the full width) */
+          max-width: 400px;
+      }
+  }
+
+  /*********************************************************************************************/
+
+    /* NEUER SUPPORT-BEREICH (NEW SUPPORT SECTION) */
+  #supporters-carousel {
+      padding-top: 50px;
+      text-align: center;
+/*      background-color: var(--card-bg-color);*/
+  }
+  #supporters-carousel h3 {
+      color: white;
+      font-size: 2em;
+      margin-bottom: 30px;
+  }
+  .carousel-container {
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+      max-width: 100%;
+  }
+  .carousel-content {
+      display: inline-block;
+      animation: scroll-left 20s linear infinite; /* Animation für das Karussell (Animation for the carousel) */
+  }
+  .supporter-item {
+      display: inline-block;
+      background-color: var(--card-bg-color);
+      border: 1px solid var(--primary-color);
+      color: white;
+      padding: 15px 25px;
+      border-radius: 8px;
+      margin: 0 10px;
+      text-align: center;
+      min-width: 150px;
+  }
+  .supporter-item h4 {
+      margin: 0;
+      font-size: 1.2em;
+  }
+  .supporter-item p {
+      margin: 5px 0 0;
+      font-size: 1.1em;
+      font-weight: bold;
+      color: var(--primary-color);
+  }
+  /* Animation Keyframes für das Scrollen (Animation keyframes for scrolling) */
+  @keyframes scroll-left {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+  }
+</style>
+
 </head>
 <body>
-  <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000;">
-        <a class="navbar-brand" href="/">
-            <img src="/media/logo.jpg" alt="BH Logo" height="40"> Beyond Heroes
-        </a>
-        <!-- <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button> -->
-        <div class="ml-auto"></div>
-        <div class="justify-content-center" id="navbarNav">
-            <ul class="navbar-nav">
-                <li class="nav-item" style="padding-right: 10px; padding-left: 10px;">
-                    <a class="nav-link" href="/news">News</a>
-                </li>
-                <li class="nav-item" style="padding-right: 10px; padding-left: 10px;">
-                    <a class="nav-link" href="/dev/">Development</a>
-                </li>
-                <li class="nav-item" style="padding-right: 10px; padding-left: 10px;">
-                    <a class="nav-link" href="/dev/support/">Support Us</a>
-                </li>
-            </ul>
-        </div>
-        <div class="ml-auto"></div>
-        <div class="justify-content-center" id="navbarNav">
-          <ul class="navbar-nav">
+
+    <nav id="navbar">
+        <div class="nav-brand">Beyond Heroes</div>
+        <div class="nav-links-div">
+          <ul class="nav-links">
             {% if user.is_authenticated %}
-            <li class="nav-item">
-              <form action="{% url 'Logout' %}" method="post">
-                  {% csrf_token %}
-                  <button class="nav-link btn btn-link" type="submit">Logout</button>
-              </form>
-            </li>
+              <li><a href="/#news-section">News</a></li>
             {% else %}
-            <li class="nav-item">
-              <a class="nav-link" href="{% url 'Login' %}">Login</a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="{% url 'Register' %}">Register</a>
-            </li>
+              <li><a href="/#hero-section">Home</a></li>
             {% endif %}
+              <li><a href="/#about-section">About</a></li>
+              <li><a href="/dev/support">Support Us</a></li>
+              {% if user.is_authenticated %}
+              <li class="nav-item">
+                <form action="{% url 'Logout' %}" method="post">
+                    {% csrf_token %}
+                    <button class="nav-link" type="submit">Logout</button>
+                </form>
+              </li>
+              {% else %}
+<!--               <li class="nav-item">
+                <a class="nav-link" href="{% url 'Login' %}">Login</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="{% url 'Register' %}">Register</a>
+              </li> -->
+              {% endif %}
           </ul>
-        </div>
+      </div>
     </nav>
 
-  {% block content %}
+    {% block content %}
     
-  {% endblock %}
+    {% endblock %}
+
+    <footer>
+      <div class="footer-socials">
+        <a href="https://www.youtube.com/@BeyondHeroesWWII/" target="blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
+        <a href="https://discord.gg/gnnfKKuumg" target="blank" aria-label="Discord"><i class="fab fa-discord"></i></a>
+        <!-- <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a> -->
+        <a href="https://www.reddit.com/r/beyondheroes/" target="blank" aria-label="Reddit"><i class="fab fa-reddit"></i></a>
+      </div>
+    </footer>
+
+    <script type="text/javascript">
+        const navbar = document.getElementById('navbar');
+        const heroSection = document.querySelector('.hero-section');
+
+        if (heroSection == null) {
+            navbar.classList.add('scrolled');
+        }
+        else {
+            window.addEventListener('scroll', () => {
+                const heroHeight = heroSection.offsetHeight;
+                if (window.scrollY > heroHeight - 70) {
+                    navbar.classList.add('scrolled');
+                } else {
+                    navbar.classList.remove('scrolled');
+                }
+            });
+        }
+    </script>
 
-  <div style="padding: 30px;"></div>
-  <footer>
-    <div class="container">
-      <!-- <p style="text-align: center;">&copy; Beyond Heroes. All rights reserved.</p> -->
-    </div>
-  </footer>
-  <!-- Bootstrap JavaScript and dependencies -->
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>
 </body>
 </html>

templates/base2.html

@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  {% if title %}
-  <title>WeBlog - {{ title }}</title>
-  {% else %}
-  <title>WeBlog - We connect your brains!</title>
-  {% endif %}
-  <link rel="icon" type="image/x-icon" href="WeBlog.ico">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-  <script src="https://code.jquery.com/jquery-3.1.1.min.js"  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="></script>
-</head>
-<body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary rounded-bottom" style="background: #a4e5ff; margin-bottom:10px">
-        <div class="container">
-            <a class="navbar-brand" href="/">TechBlog</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-                <ul class="navbar-nav">
-                    <li class="nav-item">
-                        <a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'About' %}">About</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'People' %}">People</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'Explore' %}">Explore</a>
-                    </li>
-                </ul>
-                <div style="margin-left: 60%;"></div>
-                <ul class="navbar-nav nav-rev" style="margin-right: 0px;">
-                    {% if user.is_authenticated %}
-                    <li class="nav-item">
-                        <a class="nav-link" id='a' href="{% url 'Blog Create' %}">Post</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" id='a' href="{% url 'Profile' %}">Profile</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" id='a' href="{% url 'Logout' %}">Logout</a>
-                    </li>
-                    {% else %}
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'Login' %}">Login</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" id=a href="{% url 'Register' %}">Register</a>
-                    </li>
-                    {% endif %}
-                </ul>
-            </div>
-        </div>
-    </nav>
-	<div id="container"
-	style="font-family: Rockwell; margin-bottom: 0; padding-bottom: 10px; padding-top: 20px; padding-right: 100px; padding-left: 100px;">
-	    {% if messages %}
-			{% for message in messages %}
-				<div class="alert alert-{{ message.tags }}">
-				{{ message }}
-				</div>
-			{% endfor %}
-	    {% endif %}
-	    {% block content %}
-	    {% endblock %}
-	</div>
-	<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
-	integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
-	crossorigin="anonymous"></script>
-	<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-	integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
-	crossorigin="anonymous"></script>
-	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
-	integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
-	crossorigin="anonymous"></script>
-</body>
-
-</html>

templates/blog/blogList.html

@@ -1,32 +1,49 @@
 {% extends 'base.html' %}
 {% block content %}
 
-  {% load markdown_extras %}
+{% load markdown_extras %}
+<!-- Main Content -->
+<div class="container mt-5">
+  <div class="row">
+    <div class="col-lg-8">
 
-  <div style="">
-    <h1 class="h1">We Blog</h1>
-    <p class="lead">We connect your brains!</p>
-    <hr class="my-4" />
-  </div>
-    <ul class="list-unstyled">
-      {% for post in blogs %}
-      <div class="jumbotron" id="jumbotron" style="background-color: #ffffff60;">
-        <li class="media">
-          <article class="media content-section">
-            <div class="media-body">
-              <div class="article-metadata">
-                <a class="mr-2" href="{% url 'NamedProfile' post.author.id %}">{{ post.author }}</a>
-                <small class="text-muted">{{ post.data_posted|date:"M j, Y" }}</small>
-                <br>
-              </div>
-              <a class="article-title" style="font-size: 40px;" href="{% url 'Blog' post.id %}">{{ post.title | markdown | safe }}</a>
-              <hr class="my-4" />
-              <p class="article-content">{{ post.content | markdown | safe }}</p>
+      <!-- Feed -->
+      <div class="card">
+        <div class="card-header">
+          Latest Posts
+        </div>
+        <div class="card-body">
+          {% for blog in blogs %}
+          <!-- Posts will be dynamically added here -->
+          <div class="card mb-3">
+            <div class="card-body">
+              <h4 class="card-title"><a href="{% url 'Blog' blog.id %}" class="text-dark">{{ blog.title }}</a></h4>
+              <p class="card-text">{{ blog.content | markdown | safe }}</p>
             </div>
-          </article>
-        </li>
+          </div>
+          <!-- End of Posts -->
+          {% endfor %}
+        </div>
       </div>
-      {% endfor %}
-    </ul>
+    </div>
+
+    <!-- Sidebar -->
+    <div class="col-lg-4">
+      <div class="card mb-4">
+        <div class="card-header">
+          Updates
+        </div>
+        <div class="card-body">
+          <ul class="list-group list-group-flush">
+            {% for topic in topics %}
+            <li class="list-group-item">{{ topic }}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </div>
+    </div>
+
   </div>
+</div>
+
 {% endblock %}

templates/blog/home.html

@@ -2,6 +2,8 @@
 {% block content %}
 
 {% load markdown_extras %}
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<br><br>
 <!-- Main Content -->
 <div class="container mt-5">
   <div class="row">

templates/index.html

@@ -1,24 +1,62 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <style type="text/css">
-        body {
-            background-image: url('/media/bg.jpg'); background-size: cover; background-repeat: no-repeat;
-        }
-    </style>
-    <div style="position: absolute; bottom: 1; right: 0;margin: 25px; width: 30%; background-color: rgba(0, 0, 0, 0.6); color: #eeeeee; border-radius: 2px;">
-        <div style="padding: 20px;">
-            <h2 style="text-align: justify;">Beyond Heroes</h2>
-            <p style="text-align: justify;">
-                The project that rose from the ashes of a game that was once. We aim to recreate the experience that we enjoyed throughout the years, while also adding new features that make it truly <i>Beyond</i> Heroes and Generals.<br>
-                Join Us on this journey to relive the old days and experience something new by clicking on the button below!
-            </p>
+
+    {% if not user.is_authenticated %}
+    <header class="hero-section" style="background-image: url('bg.png');">
+        <div class="hero-content">
+            <h1>BEYOND HEROES</h1>
+            <p style="letter-spacing: +0.7px;">The project that rose from the ashes of a game that brought us all together. We aim to recreate the experience that we enjoyed throughout the years, while also adding new features that make this game truly <i>Beyond Heroes</i> and Generals.</p>
+            <br>
+            <a href="{% url 'Register' %}" target="blank" class="discord-button">Join The Community</a>
+            <p style="padding-top: 20px; font-size: 1em">already a part? <a href="{% url 'Login' %}">Login</a></p>
         </div>
-    </div>
-    <div style="position: absolute; bottom: 0; right: 0; margin-right: 25px; margin-bottom: 30px;">
-        <button class="btn" style="padding: 5px 75px; font-family:'Trebuchet MS', sans-serif; font-size: 30px; font-weight: bold; background-color: #139358; color: white; border-radius: 2px;" onmouseover="this.style.backgroundColor='#0f7a4c'" onmouseout="this.style.backgroundColor='#139358'">
-            To Battle!
-        </button>
-    </div>
+    </header>
+    <br>
+
+    {% else %}
+    <section style="margin-top: 60px;" id="news-section">
+        <h2>DEVELOPMENT NEWS</h2>
+        <div class="news-container">
+            <article class="news-post">
+                <img src="https://picsum.photos/seed/news-1/400/250" alt="Gameplay Video">
+                <div class="post-content">
+                    <h3>New 3D Models!</h3>
+                    <p class="news-date">20 April 2025</p>
+                    <p>Look at the great looking 3D Models made by our skilled modellers... <a href="#news-section">Read More</a></p>
+                </div>
+            </article>
+            <article class="news-post">
+                <img src="https://picsum.photos/seed/news-4/400/250" alt="Alpha-Test">
+                <div class="post-content">
+                    <h3>Happy New Year!</h3>
+                    <p class="news-date">01 January 2025</p>
+                    <p>This was a great year and we have made good progress... <a href="#news-section">Read More</a></p>
+                </div>
+            </article>
+            <article class="news-post">
+                <img src="https://picsum.photos/seed/news-3/400/250" alt="Community Umfrage">
+                <div class="post-content">
+                    <h3>New 3D Models!</h3>
+                    <p class="news-date">26 November 2024</p>
+                    <p>Look at the great looking 3D Models made by our skilled modellers... <a href="#news-section">Read More</a></p>
+                </div>
+            </article>
+        </div>
+    </section>
+    {% endif %}
+
+    <br>
+    <section id="about-section" class="text-center">
+      <h2>ABOUT US</h2>
+        <h3 style="text-align: justify-all; letter-spacing: +0.5px;">Our Developers</h3>
+        <p style="text-align: justify;">
+            Made up of enthusiastic helpers from all over the globe, with a strong core in Germany, Poland, France, India, Argentina, Checkia, Slovakia, Canada, and more. Sharing ideas across so many cultures gives us fresh perspectives and helps us keep eyes on different parts that might be more relevant locally and their experience with other mmos. That way, we can reach farther and keep a foot in major countries around the globe. If you'd like to join, just fill out the <a href="https://forms.gle/wf4LTUHNW7hjPXcz6" target="blank">form</a> and don't be scared to hit us up on Discord! Our work environment is super hostile and we do require you to have a sense of humor and the latest version of sarcasm which you can get here <a href="https://en.wikipedia.org/wiki/Sarcasm" target="blank">Sarcasm-StopMakingNewBranches-win-x64.7z</a>
+        </p>
+        <h3 style="text-align: justify-all; letter-spacing: +0.5px;">Our Vision</h3>
+        <p style="text-align: justify;">
+          Beyond Heroes, aims to create an exciting World War gaming experience inspired by 'Heroes & Generals' but without the issues it had. Our goal is to provide the same immersive and challenging game while renewing some changes and upgrading the technical systems that preceded. Through strategic gameplay that made HnG so interesting, War, and balanced mechanics, our game aims to deliver a fun and rewarding experience that appeals to old and new players. We value our community and strive to provide a respectful and enjoyable environment that fosters teamwork, camaraderie, and sportsmanship. Also this text sounds corporate af, and thus this anti-climatic sentence is here to break with the same old corporate speech that makes us pay 5$ to open the game. The team is mostly comprised of people who share the same core values those being: Being against the new trend of p2w mechanics, combating <a href="https://colinmagazine.com/blogs/news/live-service-fatigue-are-we-tired-of-battle-passes-microtransactions" target="blank">microtransaction fatigue</a>, being in favour of <a href="https://www.stopkillinggames.com/" target="blank">stop killing games</a>, being in favour of <a href="https://www.youtube.com/watch?v=2_Dtmpe9qaQ" target="blank">clippy</a> and against anti-consumer practices <a href="https://www.forbes.com/sites/paultassi/2024/05/01/nba-2k-players-furious-about-kobe-bryant-collector-level-reward-removal/" target="blank">(1)</a> <a href="https://www.gamesindustry.biz/epic-ea-roblox-and-more-face-eu-complaint-over-tricking-players-into-spending" target="blank">(2)</a>, being absolutely against <a href="https://en.wikipedia.org/wiki/Enshittification" target="blank">enshittification</a>, and in favor of remakes.
+        </p>
+    </section>
 
 {% endblock %}

templates/support.html

@@ -1,34 +1,45 @@
 {% extends 'base.html' %}
 
 {% block content %}
-    <style type="text/css">
-        body {
-            background-image: url('/media/bg.jpg'); background-size: cover; background-repeat: no-repeat;
-        }
-    </style>
-    <div style="background-color: rgba(0, 0, 0, 0.6); color: #eeeeee; border-radius: 2px; margin-top: 10px;" class="container">
-        <div style="padding: 20px;">
-            <h2 style="text-align: justify;">Beyond Heroes</h2>
-            <p style="text-align: justify;">
-                The project that rose from the ashes of a game that was once. We aim to recreate the experience that we enjoyed throughout the years, while also adding new features that make it truly <i>Beyond</i> Heroes and Generals.<br>
-            </p>
-            <hr style="background-color: #999999;">
-            <div class="container">
-                <h3 style="text-align: justify;">Why Help Us</h3>
-                <p style="text-align: justify;">
-                    Similique earum unde unde exercitationem totam voluptatibus. Cupiditate reiciendis aut ducimus sunt. Sunt laboriosam rerum qui maxime quod aut aspernatur. Ipsa reprehenderit quas nihil vel dignissimos at. Repellendus minima dolorem ipsa sit est ipsum accusamus.<br>
-                </p>
-            </div>
-            <div class="container">
-                <h3 style="text-align: justify;">How to Help Us</h3>
-                <p style="text-align: justify;">
-                    Laborum nobis incidunt voluptate magnam voluptatibus. Itaque sequi eveniet vitae voluptas voluptatem ullam alias omnis. Officiis quia dolores architecto.Voluptate quia aspernatur excepturi voluptas molestias. Maxime magnam maiores sunt dolorum. Id possimus ullam rerum dignissimos.<br>
-                </p>
-                <button class="btn" style="padding: 5px 30px; font-family:'Trebuchet MS', sans-serif; font-size: 20px; font-weight: bold; background-color: #139358; color: white; border-radius: 2px;" onmouseover="this.style.backgroundColor='#0f7a4c'" onmouseout="this.style.backgroundColor='#139358'">
-                Donate
-                </button>
+    <br>
+    <section id="support-section" class="text-center">
+        <h2>SUPPORT US</h2>
+        <h3 style="text-align: justify-all; letter-spacing: +0.5px;">Hi! So, you want to support the project, I hear?</h3>
+        <p style="text-align: justify;">
+            Well, the main way you can do that is by joining the team or telling people to join the team! You can fill out these forms if you're interested in any <a class="text-light" href="#">dev position</a> or if you're interested in <a class="text-light" href="#">translation</a>.<br>
+        </p>
+        <h3 style="text-align: justify-all; letter-spacing: +0.5px;">If you want to help economically... let's talk first...</h3>
+        <p style="text-align: justify;">
+            Here's the thing, I really appreciate that you want to help us out, and we LOVE your energy. We really don't want to accept economic help, and there are a few reasons as to why. Mostly, we can't (or don't want to) promise anything, we don't want to get your hopes up, and we don't want to lead you to believe in something that might not happen. Giving us money has a worse ROI than playing it all on red in roulette, and as such, to me personally, it feels like asking for money from you just because you like us. If that's the case, okay, alright, no problem; we still have to solve the distribution issue, but whatever, we'll get to it eventually. Otherwise, understand that the reason the links are so hidden is exactly because we don't want you to feel like you wasted money - at least not before you knowingly and willingly understand that this is just like giving it to us because you like us and want to, or you have money to spare and don't care. If you want to specifically help out a team member, assign it on the message or something so I know who not to give it to :P
+            <br>
+        </p>
+        <p style="text-align: justify; margin-top: 10px;">
+            If you understand the above-mentioned stuff, then here's the links to our <a class="text-light" href="https://ko-fi.com/beyondheroes" target="blank">Ko-fi</a>, and <a class="text-light" href="https://www.buymeacoffee.com/beyondheroes" target="blank">Buy Me a Coffee</a>.
+        </p>
+
+        <div id="supporters-carousel">
+            <h3>Special Thanks to...</h3>
+            <div class="carousel-container">
+                <div class="carousel-content">
+                    <div class="supporter-item"><h4>J. Doe</h4><p>€500</p></div>
+                    <div class="supporter-item"><h4>A. Smith</h4><p>€250</p></div>
+                    <div class="supporter-item"><h4>M. Garcia</h4><p>€150</p></div>
+                    <div class="supporter-item"><h4>J. Doe</h4><p>€500</p></div>
+                    <div class="supporter-item"><h4>A. Smith</h4><p>€250</p></div>
+                    <div class="supporter-item"><h4>M. Garcia</h4><p>€150</p></div>
+                    <div class="supporter-item"><h4>L. Miller</h4><p>€100</p></div>
+                    <div class="supporter-item"><h4>P. Jones</h4><p>€80</p></div>
+                    <div class="supporter-item"><h4>T. Kim</h4><p>€60</p></div>
+                    <div class="supporter-item"><h4>J. Doe</h4><p>€500</p></div>
+                    <div class="supporter-item"><h4>A. Smith</h4><p>€250</p></div>
+                    <div class="supporter-item"><h4>M. Garcia</h4><p>€150</p></div>
+                    <div class="supporter-item"><h4>L. Miller</h4><p>€100</p></div>
+                    <div class="supporter-item"><h4>P. Jones</h4><p>€80</p></div>
+                    <div class="supporter-item"><h4>T. Kim</h4><p>€60</p></div>
+                </div>
             </div>
         </div>
-    </div>
+    </section>
+
 
 {% endblock %}

templates/users/login.html

@@ -1,6 +1,8 @@
 {% extends 'base.html' %}
 {% block content %}
 {% load crispy_forms_tags %}
+<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<br><br>
 <div class="container mt-5">
     <form method="POST">
         {% csrf_token %}

templates/users/logout.html

@@ -1,6 +1,9 @@
 {% extends 'base.html' %}
 {% block content %}
 {% load crispy_forms_tags %}
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <br><br>
 {% if messages %}
 {% for message in messages %}
     <div class="alert alert-{{message.tags}}">{{ message }}</div>

templates/users/register.html

@@ -1,6 +1,9 @@
 {% extends 'base.html' %}
 {% block content %}
 {% load crispy_forms_tags %}
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+<br>
+<br>
 <div class="container mt-5">
     <form method="POST">
         {% csrf_token %}

users/migrations/0002_alter_profile_id.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.2.9 on 2026-02-19 10:09
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('users', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='profile',
+            name='id',
+            field=models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID'),
+        ),
+    ]