commit bcd0a504476401cbb066cf48f0daf030aef51dec
parent 605f9ff6d2110a6b310ad94c65a37ef373c657b0
Author: gerco <[email protected]>
Date: Thu, 19 May 2022 23:14:24 +0200
layout ofzo
Diffstat:
7 files changed, 241 insertions(+), 111 deletions(-)
diff --git a/server/routes.py b/server/routes.py
@@ -55,7 +55,8 @@ def search_connect():
""" index.html (home-page) route """
@app.route("/")
def index():
- return render_template('index.html')
+ form = LoginForm()
+ return render_template('index.html', form=form)
""" about.html route """
@app.route("/about")
diff --git a/server/site.db b/server/site.db
Binary files differ.
diff --git a/server/static/main.css b/server/static/main.css
@@ -16,19 +16,7 @@ h1, h2, h3, h4, h5, h6 {
}
nav {
- /*2a4b98, 2a4583
- 2a9a6d, 2a825f
- h: 156*/
-background: repeating-linear-gradient(
- 45deg,
- hsl(156, 57%, 38%),
- hsl(156, 57%, 38%) 10px,
- hsl(156, 51%, 34%) 10px,
- hsl(156, 51%, 34%) 20px
-);
-color: #fff;
-font-size: 15pt;
}
nav code {
@@ -36,11 +24,11 @@ nav code {
}
nav a {
- color: #fff;
+ color: rgb(0, 0, 0);
}
nav a:hover {
- color: #fff;
+ color: rgb(0, 0, 0);
text-decoration: underline;
}
@@ -110,4 +98,10 @@ a.article-title:hover {
#trap-map {
height: 300px;
+}
+
+#sidebar {
+ min-width: 250px;
+ max-width: 250px;
+ min-height: 100vh;
}
\ No newline at end of file
diff --git a/server/templates/backup.html b/server/templates/backup.html
@@ -0,0 +1,96 @@
+<main role="main" class="container">
+ <div class="row">
+ <div class="col-md-8">
+ {% for category, message in get_flashed_messages(with_categories=true) %}
+ <div class="alert alert-{{ category }}">
+ {{ message }}
+ </div>
+ {% endfor %}
+ {% block content %}{% endblock %}
+ </div>
+ <div class="col-md-4">
+ <div class="content-section">
+ <h3>Welkom <b>{{ current_user.name if current_user.is_authenticated else 'gast' }}</b>!</h3>
+ {% if not current_user.is_authenticated %}
+ <p>
+ Hallo! Jij bent nog niet ingelogd. Heb jij al een account moet jij bovenrechts op inloggen
+ klikken.
+ </p>
+ <p>
+ Heb jij al onze producten gekocht maar jij hebt nog geen account? Je kan makkelijk een account
+ registreren en je muizenvallen inschrijven!
+ </p>
+ <p>
+ Jij bent nieuw en wilt ons producten kopen of testen? Ga naar ons shop om onze aanbiedingen in
+ te kunnen zien.
+ </p>
+ {% else %}
+ <p class='text-muted'>
+ <ul class="list-group">
+ <li class="list-group-item list-group-item-light">
+ <a href="{{ url_for('account') }}">Profielinstellingen</a>
+ </li>
+ <li class="list-group-item list-group-item-light">
+ <a href="{{ url_for('traps') }}">Uw muizenvallen</a>
+ </li>
+ <li class="list-group-item list-group-item-light">
+ <a href="{{ url_for('trap_connect') }}">Muizenval verbinden</a>
+ </li>
+ {% if current_user.type == 'admin' %}
+ <li class="list-group-item list-group-item-light">
+ <a href="#">Gebruikers bewerken</a>
+ </li>
+ {% endif %}
+ </ul>
+ </p>
+ {% endif %}
+ </div>
+ {% if current_user.is_authenticated %}
+ {% with contact = current_user.contact_class() %}
+ {% if contact %}
+ <div class="content-section">
+ <h3>Contact</h3>
+ <h5>
+ <b>{{ contact.name }}</b>
+ </h5>
+ <p>
+ E-Mail: <a href="mailto:{{ contact.email }}">{{ contact.email }}</a><br>
+ Tel.: {{ contact.phone }}
+ </p>
+ <p>
+ {% autoescape false %}
+ {{ contact.address | replace('\n', '<br>') }}<br>
+ {% endautoescape %}
+ </p>
+ </div>
+ {% endif %}
+ {% endwith %}
+ {% endif %}
+ </div>
+ </div>
+</main>
+<header class="site-header">
+ <nav class="navbar navbar-expand-md fixed-top">
+ <div class="container">
+ <a class="navbar-brand mr-4" href="/">
+ <b><code>muizenval.tk</code></b>
+ </a>
+ <div class="collapse navbar-collapse" id="navbarToggle">
+ <div class="navbar-nav mr-auto">
+ <a class="nav-item nav-link" href="{{ url_for('about') }}">Over ons</a>
+ <a class="nav-item nav-link" href="{{ url_for('producten') }}">Producten</a>
+ </div>
+ <!-- Navbar Right Side -->
+ <div class="navbar-nav">
+ {% if current_user.is_authenticated %}
+ <a class="nav-item nav-link" href="{{ url_for('logout') }}">Uitloggen</a>
+ {% else %}
+ <a class="nav-item nav-link" href="{{ url_for('login') }}">Inloggen</a>
+ <a class="nav-item nav-link" href="{{ url_for('register') }}">Registeren</a>
+ {% endif %}
+ </div>
+ </div>
+ </div>
+ </nav>
+</header>
+<!--nav bar-->
+\ No newline at end of file
diff --git a/server/templates/connect.html b/server/templates/connect.html
@@ -1,6 +1,7 @@
{% extends "layout.html" %}
{% block content %}
-<div class="content-section">
+<article class="media content-section">
+<div class="media-body">
<h1>Verbindt een muizenval</h1>
<p>Press the connect-button and enter the MAC-address of your trap:</p>
<form method="POST" action="">
@@ -28,4 +29,5 @@
</div>
</form>
</div>
+</article>
{% endblock content %}
\ No newline at end of file
diff --git a/server/templates/index.html b/server/templates/index.html
@@ -1,10 +1,70 @@
{% extends "layout.html" %}
{% block content %}
<article class="media content-section">
- <div class="media-body">
- <h2>Welkom!</h2>
- {#} <a class="ml-2" href="{{ url_for('traps') }}">Bekijk de vallen</a> {#}
- </div>
+
+ <div class="media-body">
+ <h2> Muizenvallen</h2>
+
+ <p>Kies hier uit de meerdere artikelen die we ter beschikking hebben.</p>
+
+ </div>
+
</article>
+<!DOCTYPE html>
+<html>
+
+<head>
+ <style>
+ div.gallery {
+ margin: 5px;
+ border: 1px solid #ccc;
+ float: left;
+ width: 220px;
+ }
+
+ div.gallery:hover {
+ border: 1.5px solid #777;
+ }
+
+ div.gallery img {
+ width: 100%;
+ height: auto;
+ }
+
+ div.title {
+ padding: 5px;
+ text-align: center;
+ font-size: 20px;
+
+ font-weight: bold;
+ }
+
+ div.desc {
+ padding: 7px;
+ text-align: center;
+ font-size: 12px;
+
+ }
+ </style>
+
+
+</head>
+
+<body>
+ <div class="gallery">
+ <!---- <a target="_blank" href=""> -->
+ <img src="../static/product_pics/muizenval1.jpg" alt="Cinque Terre" width="800" height="600">
+ </a>
+ <div class="title">slimme muizenval 3000</div>
+ <div class="desc">De gekste muizenval ter wereld!! (source: trust me bro)</div>
+
+ </div>
+
+
+
+</body>
+
+</html>
+
{% endblock content %}
\ No newline at end of file
diff --git a/server/templates/layout.html b/server/templates/layout.html
@@ -40,103 +40,74 @@
<title>muizenval.tk</title>
{% endif %}
</head>
+<body>
+ <nav class="navbar fixed-top bg-light">
+ <div class="container">
+ <a class="navbar-brand" href="{{ url_for('index') }}">
+ <img src="/static/logo.svg" alt="" width="50%" height="50%">
+ Home
+ </a>
+ <ul class="nav nav-pills">
+ {% if not current_user.is_authenticated %}
+ <li class="nav-item">
+ <a class="nav-link active" href="{{ url_for('login') }}">Login</a>
+ </li>
-<body>
- <header class="site-header">
- <nav class="navbar navbar-expand-md fixed-top">
- <div class="container">
- <a class="navbar-brand mr-4" href="/">
- <b><code>muizenval.tk</code></b>
- </a>
- <div class="collapse navbar-collapse" id="navbarToggle">
- <div class="navbar-nav mr-auto">
- <a class="nav-item nav-link" href="{{ url_for('about') }}">Over ons</a>
- <a class="nav-item nav-link" href="{{ url_for('producten') }}">Producten</a>
- </div>
- <!-- Navbar Right Side -->
- <div class="navbar-nav">
- {% if current_user.is_authenticated %}
- <a class="nav-item nav-link" href="{{ url_for('logout') }}">Uitloggen</a>
- {% else %}
- <a class="nav-item nav-link" href="{{ url_for('login') }}">Inloggen</a>
- <a class="nav-item nav-link" href="{{ url_for('register') }}">Registeren</a>
- {% endif %}
- </div>
- </div>
- </div>
- </nav>
- </header>
- <main role="main" class="container">
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('register') }}">Registeren</a>
+ </li>
+ {% else %}
+ <li class="nav-item">
+ <a class="nav-link active" href="{{ url_for('logout') }}">Logout</a>
+ </li>
+ {% endif %}
+ </ul>
+ </div>
+ </nav>
+
+ <div class="container" style="padding-top:20px;">
<div class="row">
- <div class="col-md-8">
- {% for category, message in get_flashed_messages(with_categories=true) %}
- <div class="alert alert-{{ category }}">
- {{ message }}
- </div>
- {% endfor %}
- {% block content %}{% endblock %}
- </div>
- <div class="col-md-4">
- <div class="content-section">
- <h3>Welkom <b>{{ current_user.name if current_user.is_authenticated else 'gast' }}</b>!</h3>
- {% if not current_user.is_authenticated %}
- <p>
- Hallo! Jij bent nog niet ingelogd. Heb jij al een account moet jij bovenrechts op inloggen
- klikken.
- </p>
- <p>
- Heb jij al onze producten gekocht maar jij hebt nog geen account? Je kan makkelijk een account
- registreren en je muizenvallen inschrijven!
- </p>
- <p>
- Jij bent nieuw en wilt ons producten kopen of testen? Ga naar ons shop om onze aanbiedingen in
- te kunnen zien.
- </p>
- {% else %}
- <p class='text-muted'>
- <ul class="list-group">
- <li class="list-group-item list-group-item-light">
- <a href="{{ url_for('account') }}">Profielinstellingen</a>
- </li>
- <li class="list-group-item list-group-item-light">
- <a href="{{ url_for('traps') }}">Uw muizenvallen</a>
- </li>
- <li class="list-group-item list-group-item-light">
- <a href="{{ url_for('trap_connect') }}">Muizenval verbinden</a>
- </li>
- {% if current_user.type == 'admin' %}
- <li class="list-group-item list-group-item-light">
- <a href="#">Gebruikers bewerken</a>
- </li>
- {% endif %}
- </ul>
- </p>
- {% endif %}
- </div>
+ <!-- sidebar -->
+ <div class="col-3">
+ {% if current_user.is_authenticated %}
+ <ul class="nav nav-pills flex-column nav-justified">
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('traps') }}">Dashboard</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('trap_connect') }}">Koppel een val</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" href="{{ url_for('about') }}">about</a>
+ </li>
{% if current_user.is_authenticated %}
- {% with contact = current_user.contact_class() %}
- {% if contact %}
- <div class="content-section">
- <h3>Contact</h3>
- <h5>
- <b>{{ contact.name }}</b>
- </h5>
- <p>
- E-Mail: <a href="mailto:{{ contact.email }}">{{ contact.email }}</a><br>
- Tel.: {{ contact.phone }}
- </p>
- <p>
- {% autoescape false %}
- {{ contact.address | replace('\n', '<br>') }}<br>
- {% endautoescape %}
- </p>
- </div>
- {% endif %}
- {% endwith %}
+ <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">{{current_user.name}}
+
+ </a>
+
+ <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
+ <li><a class="dropdown-item" href="{{ url_for('account') }}">Instellingen</a></li>
+
+ <li><hr class="dropdown-divider"></li>
+ <li><a class="dropdown-item" href="{{ url_for('logout') }}">Uitloggen</a></li>
+ </ul>
+
+ <ul class="dropdown-menu">
+ <li><a class="dropdown-item" href="{{ url_for('account') }}">Instellingen</a></li>
+ <li><a class="dropdown-item" href="{{ url_for('logout') }}">Uitloggen</a></li>
+ </ul>
{% endif %}
+ </ul>
+ {% endif %}
+ </div>
+
+ <!-- content-->
+ <div class="col-7">
+ {% block content %}{% endblock %}
</div>
</div>
- </main>
+ </div>
+
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
@@ -147,6 +118,11 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
+ <script>
+
+ const dropdownElementList = document.querySelectorAll('.dropdown-toggle')
+ const dropdownList = [...dropdownElementList].map(dropdownToggleEl => new bootstrap.Dropdown(dropdownToggleEl))
+ </script>
</body>
</html>
\ No newline at end of file
