Add Loadout subsite

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')),
 ]

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;
+    height: 100%;
-    display: flex;
+    margin: 0;
-    flex-direction: column;
 }
 
 ::-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 {
+.footer {
-    font-size: 1rem;
+    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 {
+/* The sidebar menu */
-    margin: 0;
+.sidebar {
-    color: #c55e00;
+    height: 100%; /* 100% Full-height */
-    font-size: 3em;
+    width: 0; /* 0 width - change this with JavaScript */
-}
+    position: fixed; /* Stay in place */
-
+    z-index: 1; /* Stay on top */
-.brand-text {
+    top: 0;
-    color: gold;
+    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;}
+  }

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);
+}

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";
+}

djlearn/pages/templates/pages/base.html

@@ -13,12 +13,20 @@
     </head>
 
     <body>
-        <main>
+        <div class="container">
 
-            <header class="header shade">
+            <div id="mySidebar" class="sidebar">
+                <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+                <a href="/" class="cool-link">Home</a>
+                <a href="/loadout/" class="cool-link">Loadout</a>
+                <a href="/about/" class="cool-link">About</a>
+                </div>
+
+            <div class="header shade">
                 <!-- left -->
                 <div class="header-left">
                     <a href="/"><img id="logo-img" src="{% static 'img/logo.png' %}" alt="Logo"></a>
+                    <button class="openbtn" onclick="openNav()">&#9776;</button>
                 </div>
                 <!-- center -->
                 <div class="header-center">
@@ -33,25 +41,24 @@
                         </span>
                     {% else %}
                         <span class="header-text">Sign in:</span>
-                        <a href="/auth/login/" class="header-link">PyHub</a>
+                        <a href="/auth/login/" class="cool-link">PyHub</a>
-                        <a href="#" class="header-link">Github</a>
+                        <a href="#" class="cool-link">Github</a>
-                        <a href="#" class="header-link">Twitter</a>
+                        <a href="#" class="cool-link">Twitter</a>
                     {% endif %}
                 </div>
-            </header>
+            </div>
-            
+                
-            <main class="bg">
+            <div class="content">
                 {% block content %}
                 {% endblock %}
-            </main>
+            </div>
 
-            <footer>
+            <div class="footer">
-                <div>
+                <div class="footer-content">
                     <p>made using Django ❤️</p>
                 </div>
-            </footer>
+            </div>
-
+        </div>
-        </main>
     </body>
 
 </html>

djlearn/pages/templates/pages/loadout.html

@@ -0,0 +1,85 @@
+{% extends 'pages/base.html' %}
+{% load static %}
+
+{% block title %}PyHub - Loadout{% endblock %}
+
+{% block extrahead %}
+    <link rel="stylesheet" href="{% static 'css/loadout.css' %}">
+{% endblock %}
+
+{% block content %}
+
+<div class="card-section">
+
+    <p class="card-category-headline">Other</p>
+    <div class="card-category">
+        <div class="card">
+            Knife
+        </div>
+        <div class="card">
+            Gloves
+        </div>
+    </div>
+
+    <p class="card-category-headline">Pistol</p>
+    <div class="card-category">
+        <div class="card">
+            Glock-18
+        </div>
+        <div class="card">
+            P2000
+        </div>
+        <div class="card">
+            USP-S
+        </div>
+        <div class="card">
+            Dual Berettas
+        </div>
+        <div class="card">
+            P250
+        </div>
+        <div class="card">
+            Tec-9
+        </div>
+        <div class="card">
+            CZ75-Auto
+        </div>
+        <div class="card">
+            Five-Seven
+        </div>
+        <div class="card">
+            Desert Eagle
+        </div>
+        <div class="card">
+            R8 Revolver
+        </div>
+    </div>
+
+    <p class="card-category-headline">SMG</p>
+    <div class="card-category">
+        <div class="card">
+            Mac-10
+        </div>
+        <div class="card">
+            MP9
+        </div>
+        <div class="card">
+            MP7
+        </div>
+        <div class="card">
+            MP5
+        </div>
+        <div class="card">
+            UMP-45
+        </div>
+        <div class="card">
+            P90
+        </div>
+        <div class="card">
+            PP-Bizon
+        </div>
+    </div>
+
+</div>
+
+{% endblock %}

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')
 ]

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')
+    return render(request, 'pages/login.html')
+
+def loadout(request):
+    return render(request, 'pages/loadout.html')