From ce7bb2476dd103a18ab1923afc1ba4a7318b33e0 Mon Sep 17 00:00:00 2001 From: lukas Date: Fri, 16 Dec 2022 18:09:58 +0100 Subject: [PATCH] Add Loadout subsite --- djlearn/djlearn/urls.py | 2 +- djlearn/pages/static/css/base.css | 132 +++++++++++++++------ djlearn/pages/static/css/loadout.css | 37 ++++++ djlearn/pages/static/js/base.js | 12 ++ djlearn/pages/templates/pages/base.html | 35 +++--- djlearn/pages/templates/pages/loadout.html | 85 +++++++++++++ djlearn/pages/urls.py | 1 + djlearn/pages/views.py | 5 +- 8 files changed, 257 insertions(+), 52 deletions(-) create mode 100644 djlearn/pages/static/css/loadout.css create mode 100644 djlearn/pages/templates/pages/loadout.html diff --git a/djlearn/djlearn/urls.py b/djlearn/djlearn/urls.py index 2b487eb..37f5dcd 100644 --- a/djlearn/djlearn/urls.py +++ b/djlearn/djlearn/urls.py @@ -18,6 +18,6 @@ from django.urls import include, path urlpatterns = [ path('', include('pages.urls')), - path('polls/', include('polls.urls')), path('admin/', admin.site.urls), + path('polls/', include('polls.urls')), ] diff --git a/djlearn/pages/static/css/base.css b/djlearn/pages/static/css/base.css index a39e366..593a08b 100644 --- a/djlearn/pages/static/css/base.css +++ b/djlearn/pages/static/css/base.css @@ -1,11 +1,10 @@ -body { +html, body { font-family: monospace; - margin: 0; + font-size: 1.1rem; overflow-x: hidden; color: white; - min-height: 100vh; - display: flex; - flex-direction: column; + height: 100%; + margin: 0; } ::-webkit-scrollbar { @@ -20,7 +19,10 @@ p { margin: 0; } -.bg { +.container { + height: 100%; + display: flex; + flex-direction: column; background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed; background-size: cover; } @@ -34,26 +36,10 @@ p { background: rgba(0,0,0,0.5); } -footer { - width: 100vw; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: 0.75rem; - position: absolute; - bottom: 0; -} - -footer p { - margin: 0.5em; -} - .header { width: 100vw; display: flex; flex-flow: row; - position: absolute; } .header-left { @@ -77,22 +63,41 @@ footer p { align-items: center; } -.header-link { +.cool-link { color: white; margin: 1rem; - font-size: 1rem; text-decoration: underline 0.1em #c55e00; text-underline-offset: 0.1em; transition: text-decoration-color 300ms, text-underline-offset 300ms; } -.header-link:hover { +.cool-link:hover { text-decoration-color: red; text-underline-offset: 0.2em; } -.header-text { - font-size: 1rem; +.footer { + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 0.75rem; + bottom: 0; + margin: 1px 0px 1px 0px; +} + +.footer-content { + margin-right: 5px; +} + +.footer p { + margin: 0.5em; +} + +.content { + flex: 1; + overflow: auto; } #logo-img { @@ -100,12 +105,67 @@ footer p { height: 50px; } -.brand { - margin: 0; - color: #c55e00; - font-size: 3em; -} - -.brand-text { - color: gold; -} +/* The sidebar menu */ +.sidebar { + height: 100%; /* 100% Full-height */ + width: 0; /* 0 width - change this with JavaScript */ + position: fixed; /* Stay in place */ + z-index: 1; /* Stay on top */ + top: 0; + left: 0; + background-color: black; + overflow-x: hidden; /* Disable horizontal scroll */ + padding-top: 60px; /* Place content 60px from the top */ + transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */ + } + + /* The sidebar links */ + .sidebar a { + padding: 8px 8px 8px 32px; + font-size: 1.5rem; + display: block; + margin: 0.5rem; + } + + /* When you mouse over the navigation links, change their color */ + .sidebar a:hover { + color: gray; + } + + /* Position and style the close button (top right corner) */ + .sidebar .closebtn { + position: absolute; + top: 0; + right: 25px; + font-size: 36px; + margin-left: 50px; + color: white; + text-decoration: none; + transition: 0.3s; + } + + /* The button used to open the sidebar */ + .openbtn { + font-size: 20px; + cursor: pointer; + background-color: transparent; + color: white; + padding: 10px 15px; + border: none; + } + + .openbtn:hover { + background-color: #444; + } + + /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ + #main { + transition: margin-left .5s; /* If you want a transition effect */ + padding: 20px; + } + + /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ + @media screen and (max-height: 450px) { + .sidebar {padding-top: 15px;} + .sidebar a {font-size: 18px;} + } \ No newline at end of file diff --git a/djlearn/pages/static/css/loadout.css b/djlearn/pages/static/css/loadout.css new file mode 100644 index 0000000..6b51026 --- /dev/null +++ b/djlearn/pages/static/css/loadout.css @@ -0,0 +1,37 @@ +.card-section { + min-height: 100vh; + width: 100vw; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding-top: 5px; +} + +.card-category-headline { + margin-top: 1em; + color: #c55e00; + font-size: 1.2em; +} + +.card-category { + width: 100vw; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; + padding-top: 5px; +} + +.card { + display: flex; + align-items: center; + justify-content: center; + border: 1px solid red; + border-radius: 25px; + min-width: 30%; + min-height: 200px; + margin: 10px; + background: rgba(0,0,0,0.5); +} \ No newline at end of file diff --git a/djlearn/pages/static/js/base.js b/djlearn/pages/static/js/base.js index 3118418..1e20c1d 100644 --- a/djlearn/pages/static/js/base.js +++ b/djlearn/pages/static/js/base.js @@ -17,3 +17,15 @@ function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } + +/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */ +function openNav() { + document.getElementById("mySidebar").style.width = "250px"; + document.getElementById("main").style.marginLeft = "250px"; +} + +/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */ +function closeNav() { + document.getElementById("mySidebar").style.width = "0"; + document.getElementById("main").style.marginLeft = "0"; +} \ No newline at end of file diff --git a/djlearn/pages/templates/pages/base.html b/djlearn/pages/templates/pages/base.html index 9ce460d..975a850 100644 --- a/djlearn/pages/templates/pages/base.html +++ b/djlearn/pages/templates/pages/base.html @@ -13,12 +13,20 @@ -
+
-
+ + +
Logo +
@@ -33,25 +41,24 @@ {% else %} Sign in: - PyHub - Github - Twitter + PyHub + Github + Twitter {% endif %}
-
- -
+
+ +
{% block content %} {% endblock %} -
+ - - - + + \ No newline at end of file diff --git a/djlearn/pages/templates/pages/loadout.html b/djlearn/pages/templates/pages/loadout.html new file mode 100644 index 0000000..2c4dd7a --- /dev/null +++ b/djlearn/pages/templates/pages/loadout.html @@ -0,0 +1,85 @@ +{% extends 'pages/base.html' %} +{% load static %} + +{% block title %}PyHub - Loadout{% endblock %} + +{% block extrahead %} + +{% endblock %} + +{% block content %} + +
+ +

Other

+
+
+ Knife +
+
+ Gloves +
+
+ +

Pistol

+
+
+ Glock-18 +
+
+ P2000 +
+
+ USP-S +
+
+ Dual Berettas +
+
+ P250 +
+
+ Tec-9 +
+
+ CZ75-Auto +
+
+ Five-Seven +
+
+ Desert Eagle +
+
+ R8 Revolver +
+
+ +

SMG

+
+
+ Mac-10 +
+
+ MP9 +
+
+ MP7 +
+
+ MP5 +
+
+ UMP-45 +
+
+ P90 +
+
+ PP-Bizon +
+
+ +
+ +{% endblock %} \ No newline at end of file diff --git a/djlearn/pages/urls.py b/djlearn/pages/urls.py index f7703c8..f1a2f97 100644 --- a/djlearn/pages/urls.py +++ b/djlearn/pages/urls.py @@ -4,4 +4,5 @@ from . import views urlpatterns = [ path('', views.index, name='index'), path('auth/', include('django.contrib.auth.urls')), + path('loadout/', views.loadout, name='loadout') ] \ No newline at end of file diff --git a/djlearn/pages/views.py b/djlearn/pages/views.py index ce7dfb4..0311a23 100644 --- a/djlearn/pages/views.py +++ b/djlearn/pages/views.py @@ -4,4 +4,7 @@ def index(request): return render(request, 'pages/index.html') def login(request): - return render(request, 'pages/login.html') \ No newline at end of file + return render(request, 'pages/login.html') + +def loadout(request): + return render(request, 'pages/loadout.html') \ No newline at end of file