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,57 +1,6 @@
<!DOCTYPE html> {% extends "base.html" %}
<!-- This file was created as part of the Private.coffee project {% block content %}
It is licensed under the MIT license <div class="container">
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">
<div class="container">
<h1>Welcome to Private.coffee</h1> <h1>Welcome to Private.coffee</h1>
<p> <p>
Private.coffee is a collection of services that respect your privacy. Private.coffee is a collection of services that respect your privacy.
@ -130,51 +79,5 @@
> >
</div> </div>
</div> </div>
</div> </div>
</section> {% endblock %}
<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,54 +1,6 @@
<!DOCTYPE html> {% extends "base.html" %}
<!-- This file was created as part of the Private.coffee project {% block content %}
It is licensed under the MIT license <div class="container">
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">
<div class="container">
<h1>Legal Notice</h1> <h1>Legal Notice</h1>
<p>This is a legal notice for the website private.coffee</p> <p>This is a legal notice for the website private.coffee</p>
<p>The website private.coffee is run by the following entity:</p> <p>The website private.coffee is run by the following entity:</p>
@ -63,47 +15,5 @@
Email: Email:
<a href="mailto:support@private.coffee">support@private.coffee</a> <a href="mailto:support@private.coffee">support@private.coffee</a>
</p> </p>
</div> </div>
</section> {% endblock %}
<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,54 +1,6 @@
<!DOCTYPE html> {% extends "base.html" %}
<!-- This file was created as part of the Private.coffee project {% block content %}
It is licensed under the MIT license <div class="container">
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">
<div class="container">
<h1>Privacy Policy</h1> <h1>Privacy Policy</h1>
<p> <p>
This is the privacy policy for the website private.coffee. It This is the privacy policy for the website private.coffee. It
@ -191,47 +143,5 @@
exclusively use "strictly necessary" first-party cookies, which is exclusively use "strictly necessary" first-party cookies, which is
also why you don't see any cookie banners on our website. also why you don't see any cookie banners on our website.
</p> </p>
</div> </div>
</section> {% endblock %}
<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,6 @@
<!DOCTYPE html> {% extends "base.html" %}
<!-- This file was created as part of the Private.coffee project {% block content %}
It is licensed under the MIT license <div class="container">
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">
<div class="container">
<h1>Terms of Service</h1> <h1>Terms of Service</h1>
<p> <p>
These are the terms of service for the website private.coffee and all These are the terms of service for the website private.coffee and all
@ -196,47 +146,5 @@
accounts of the users involved and delete their data. We may also accounts of the users involved and delete their data. We may also
report the users involved to the appropriate authorities. report the users involved to the appropriate authorities.
</p> </p>
</div> </div>
</section> {% endblock %}
<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>