Some UI Changes
Rishit-Pandit
parent
e5813ca7d8
commit
99da3f2800
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
db.sqlite3
BIN
db.sqlite3
Binary file not shown.
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -3,80 +3,534 @@
|
|||
<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;
|
||||
<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;*/
|
||||
}
|
||||
.card {
|
||||
border: 1px;
|
||||
border-radius: 15px;
|
||||
border-color: #eeeeee;
|
||||
box-shadow: 0 0 10px rgba(250, 250, 250, 0.1);
|
||||
|
||||
@font-face {
|
||||
font-family: 'Alte DIN 1451 Mittelschrift';
|
||||
src: url('mittelschrift.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
|
||||
}
|
||||
.list-group-item {
|
||||
background-color: #1e1f10;
|
||||
border-color: #eeeeee;
|
||||
body {
|
||||
font-family: 'Alte DIN 1451 Mittelschrift', sans-serif;
|
||||
}
|
||||
.card-header {
|
||||
background-color: #111111;
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
|
||||
/* Allgemeine Stile (General Styles) */
|
||||
body {
|
||||
margin: 0;
|
||||
/* font-family: var(--font-family);*/
|
||||
color: white;
|
||||
background-color: var(--background-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
.card-body {
|
||||
background-color: #1e1f10;
|
||||
|
||||
h1, h2 {
|
||||
font-family: 'Mozilla Headline';
|
||||
letter-spacing: -1px;
|
||||
margin: 0;
|
||||
}
|
||||
.profile-image {
|
||||
max-width: 125px;
|
||||
border-radius: 50%;
|
||||
padding: 20px;
|
||||
}*/
|
||||
.link {
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
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><a href="/#news-section">News</a></li>
|
||||
{% else %}
|
||||
<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 btn btn-link" type="submit">Logout</button>
|
||||
<button class="nav-link" type="submit">Logout</button>
|
||||
</form>
|
||||
</li>
|
||||
{% else %}
|
||||
<li class="nav-item">
|
||||
<!-- <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> -->
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -86,14 +540,33 @@
|
|||
|
||||
{% endblock %}
|
||||
|
||||
<div style="padding: 30px;"></div>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<!-- <p style="text-align: center;">© Beyond Heroes. All rights reserved.</p> -->
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
|
||||
</body>
|
||||
</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>
|
||||
BIN
templates/bg.jpg
BIN
templates/bg.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB |
|
|
@ -2,31 +2,48 @@
|
|||
{% block content %}
|
||||
|
||||
{% 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" />
|
||||
<!-- Feed -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Latest Posts
|
||||
</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 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>
|
||||
<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>
|
||||
</div>
|
||||
</article>
|
||||
</li>
|
||||
<!-- End of Posts -->
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</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 %}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
{% 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>
|
||||
</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;">
|
||||
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!
|
||||
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>
|
||||
</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>
|
||||
<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 %}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
|
|
@ -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>
|
||||
<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;">
|
||||
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>
|
||||
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>
|
||||
<hr style="background-color: #999999;">
|
||||
<div class="container">
|
||||
<h3 style="text-align: justify;">Why Help Us</h3>
|
||||
<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;">
|
||||
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>
|
||||
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>
|
||||
</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 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>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
</section>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in New Issue