Add Loadout subsite
This commit is contained in:
parent
de6bdebd69
commit
ce7bb2476d
|
|
@ -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')),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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";
|
||||
}
|
||||
|
|
@ -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()">×</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()">☰</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="#" class="header-link">Github</a>
|
||||
<a href="#" class="header-link">Twitter</a>
|
||||
<a href="/auth/login/" class="cool-link">PyHub</a>
|
||||
<a href="#" class="cool-link">Github</a>
|
||||
<a href="#" class="cool-link">Twitter</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="bg">
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<div>
|
||||
<div class="footer">
|
||||
<div class="footer-content">
|
||||
<p>made using Django ❤️</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</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 %}
|
||||
|
|
@ -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')
|
||||
]
|
||||
|
|
@ -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')
|
||||
Loading…
Reference in New Issue