Initialized base HTML template and refactored pages

Implemented a shared base HTML template to DRY up the markup across the service’s various pages, including the index, legal, privacy, and terms pages. This centralizes common elements like headers, footers, and imports, facilitating easier updates and consistency in design across the platform. Existing content from these individual pages is now extending the base template, adhering to best practices in templating and reducing code duplication.
This commit is contained in:
Kumi 2024-01-01 12:14:51 +01:00
parent 704808c82f
commit 7245f1474a
Signed by: kumi
GPG key ID: ECBCC9082395383F
5 changed files with 497 additions and 765 deletions

101
templates/base.html Normal file
View file

@ -0,0 +1,101 @@
<!DOCTYPE html>
<!-- This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee -->
<html>
<head>
<title>Private.coffee</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/img/logo-inv.svg" />
<link rel="stylesheet" href="assets/css/base.css" />
<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" />
<script src="assets/dist/js/jquery.min.js"></script>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="/">
<img
class="navbar-brand-img"
src="assets/img/logo-inv.svg"
alt="Private.coffee logo"
/>
Private.coffee
</a>
<ul class="navbar-nav">
<ul class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbardrop"
data-bs-toggle="dropdown"
>Status Page</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://status.private.coffee"
>Clearnet</a
>
<a
class="dropdown-item"
href="http://status.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion/"
>Tor</a
>
</div>
</ul>
</ul>
</div>
</nav>
<section id="content">
{% block content %}{% endblock %}
</section>
<footer class="page-footer font-small bg-dark text-white pt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Private.coffee</h5>
<p>
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3" />
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Legalese</h5>
<ul class="list-unstyled">
<li>
<a href="legal.html">Legal Notice</a>
</li>
<li>
<a href="privacy.html">Privacy Policy</a>
</li>
<li>
<a href="terms.html">Terms of Service</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Contact</h5>
<ul class="list-unstyled">
<li><a href="mailto:support@private.coffee">Email</a></li>
<li>
<a href="https://matrix.private.cf/#/#support:private.coffee"
>Matrix</a
>
</li>
<li>
<a href="https://kumig.it/privatecoffee/">KumiGit</a> |
<a href="https://github.com/privatecoffee/">GitHub</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>

View file

@ -1,56 +1,5 @@
<!DOCTYPE html>
<!-- This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee -->
<html>
<head>
<title>Private.coffee</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/img/logo-inv.svg" />
<link rel="stylesheet" href="assets/css/base.css" />
<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" />
<script src="assets/dist/js/jquery.min.js"></script>
<script src="assets/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<a class="navbar-brand" href="/">
<img
class="navbar-brand-img"
src="assets/img/logo-inv.svg"
alt="Private.coffee logo"
/>
Private.coffee
</a>
<ul class="navbar-nav">
<ul class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbardrop"
data-bs-toggle="dropdown"
>Status Page</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://status.private.coffee"
>Clearnet</a
>
<a
class="dropdown-item"
href="http://status.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion/"
>Tor</a
>
</div>
</ul>
</ul>
</div>
</nav>
<section id="content">
{% extends "base.html" %}
{% block content %}
<div class="container">
<h1>Welcome to Private.coffee</h1>
<p>
@ -131,50 +80,4 @@
</div>
</div>
</div>
</section>
<footer class="page-footer font-small bg-dark text-white pt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Private.coffee</h5>
<p>
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3" />
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Legalese</h5>
<ul class="list-unstyled">
<li>
<a href="legal.html">Legal Notice</a>
</li>
<li>
<a href="privacy.html">Privacy Policy</a>
</li>
<li>
<a href="terms.html">Terms of Service</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Contact</h5>
<ul class="list-unstyled">
<li><a href="mailto:support@private.coffee">Email</a></li>
<li>
<a href="https://matrix.private.cf/#/#support:private.coffee"
>Matrix</a
>
</li>
<li>
<a href="https://kumig.it/privatecoffee/">KumiGit</a> |
<a href="https://github.com/privatecoffee/">GitHub</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
{% endblock %}

View file

@ -1,53 +1,5 @@
<!DOCTYPE html>
<!-- This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee -->
<html>
<head>
<title>Private.coffee</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/img/logo-inv.svg" />
<link rel="stylesheet" href="assets/css/base.css" />
<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" />
<script src="assets/dist/js/jquery.min.js"></script>
<script src="assets/dist/js/popper.min.js"></script>
<script src="assets/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img
class="navbar-brand-img"
src="assets/img/logo-inv.svg"
alt="Private.coffee logo"
/>
Private.coffee
</a>
<ul class="navbar-nav">
<ul class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbardrop"
data-bs-toggle="dropdown"
>Status Page</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://status.private.coffee"
>Clearnet</a
>
<a class="dropdown-item" href="http://status.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion/"
>Tor</a
>
</div>
</ul>
</ul>
</nav>
<section id="content">
{% extends "base.html" %}
{% block content %}
<div class="container">
<h1>Legal Notice</h1>
<p>This is a legal notice for the website private.coffee</p>
@ -64,46 +16,4 @@
<a href="mailto:support@private.coffee">support@private.coffee</a>
</p>
</div>
</section>
<footer class="page-footer font-small bg-dark text-white pt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Private.coffee</h5>
<p>
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3" />
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Legalese</h5>
<ul class="list-unstyled">
<li>
<a href="legal.html">Legal Notice</a>
</li>
<li>
<a href="privacy.html">Privacy Policy</a>
</li>
<li>
<a href="terms.html">Terms of Service</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Contact</h5>
<ul class="list-unstyled">
<li><a href="mailto:support@private.coffee">Email</a></li>
<li><a href="https://matrix.private.cf/#/#support:private.coffee">Matrix</a></li>
<li>
<a href="https://kumig.it/privatecoffee/">KumiGit</a> |
<a href="https://github.com/privatecoffee/">GitHub</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
{% endblock %}

View file

@ -1,53 +1,5 @@
<!DOCTYPE html>
<!-- This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee -->
<html>
<head>
<title>Private.coffee</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/img/logo-inv.svg" />
<link rel="stylesheet" href="assets/css/base.css" />
<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" />
<script src="assets/dist/js/jquery.min.js"></script>
<script src="assets/dist/js/popper.min.js"></script>
<script src="assets/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img
class="navbar-brand-img"
src="assets/img/logo-inv.svg"
alt="Private.coffee logo"
/>
Private.coffee
</a>
<ul class="navbar-nav">
<ul class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbardrop"
data-bs-toggle="dropdown"
>Status Page</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://status.private.coffee"
>Clearnet</a
>
<a class="dropdown-item" href="http://status.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion/"
>Tor</a
>
</div>
</ul>
</ul>
</nav>
<section id="content">
{% extends "base.html" %}
{% block content %}
<div class="container">
<h1>Privacy Policy</h1>
<p>
@ -192,46 +144,4 @@
also why you don't see any cookie banners on our website.
</p>
</div>
</section>
<footer class="page-footer font-small bg-dark text-white pt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Private.coffee</h5>
<p>
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3" />
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Legalese</h5>
<ul class="list-unstyled">
<li>
<a href="legal.html">Legal Notice</a>
</li>
<li>
<a href="privacy.html">Privacy Policy</a>
</li>
<li>
<a href="terms.html">Terms of Service</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Contact</h5>
<ul class="list-unstyled">
<li><a href="mailto:support@private.coffee">Email</a></li>
<li><a href="https://matrix.private.cf/#/#support:private.coffee">Matrix</a></li>
<li>
<a href="https://kumig.it/privatecoffee/">KumiGit</a> |
<a href="https://github.com/privatecoffee/">GitHub</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
{% endblock %}

View file

@ -1,55 +1,5 @@
<!DOCTYPE html>
<!-- This file was created as part of the Private.coffee project
It is licensed under the MIT license
For more information, please visit https://private.coffee -->
<html>
<head>
<title>Private.coffee</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/svg+xml" href="assets/img/logo-inv.svg" />
<link rel="stylesheet" href="assets/css/base.css" />
<link rel="stylesheet" href="assets/dist/css/bootstrap.min.css" />
<script src="assets/dist/js/jquery.min.js"></script>
<script src="assets/dist/js/popper.min.js"></script>
<script src="assets/dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="/">
<img
class="navbar-brand-img"
src="assets/img/logo-inv.svg"
alt="Private.coffee logo"
/>
Private.coffee
</a>
<ul class="navbar-nav">
<ul class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbardrop"
data-bs-toggle="dropdown"
>Status Page</a
>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://status.private.coffee"
>Clearnet</a
>
<a
class="dropdown-item"
href="http://status.coffee2m3bjsrrqqycx6ghkxrnejl2q6nl7pjw2j4clchjj6uk5zozad.onion/"
>Tor</a
>
</div>
</ul>
</ul>
</nav>
<section id="content">
{% extends "base.html" %}
{% block content %}
<div class="container">
<h1>Terms of Service</h1>
<p>
@ -197,46 +147,4 @@
report the users involved to the appropriate authorities.
</p>
</div>
</section>
<footer class="page-footer font-small bg-dark text-white pt-4">
<div class="container text-center text-md-left">
<div class="row">
<div class="col-md-6 mt-md-0 mt-3">
<h5 class="text-uppercase">Private.coffee</h5>
<p>
Private.coffee is a collection of services that respect your
privacy.
</p>
</div>
<hr class="clearfix w-100 d-md-none pb-3" />
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Legalese</h5>
<ul class="list-unstyled">
<li>
<a href="legal.html">Legal Notice</a>
</li>
<li>
<a href="privacy.html">Privacy Policy</a>
</li>
<li>
<a href="terms.html">Terms of Service</a>
</li>
</ul>
</div>
<div class="col-md-3 mb-md-0 mb-3">
<h5 class="text-uppercase">Contact</h5>
<ul class="list-unstyled">
<li><a href="mailto:support@private.coffee">Email</a></li>
<li><a href="https://matrix.private.cf/#/#support:private.coffee">Matrix</a></li>
<li>
<a href="https://kumig.it/privatecoffee/">KumiGit</a> |
<a href="https://github.com/privatecoffee/">GitHub</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
{% endblock %}