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> {% extends "base.html" %}
<!-- This file was created as part of the Private.coffee project {% block content %}
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">
<div class="container"> <div class="container">
<h1>Welcome to Private.coffee</h1> <h1>Welcome to Private.coffee</h1>
<p> <p>
@ -131,50 +80,4 @@
</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,53 +1,5 @@
<!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
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"> <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>
@ -64,46 +16,4 @@
<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,53 +1,5 @@
<!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
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"> <div class="container">
<h1>Privacy Policy</h1> <h1>Privacy Policy</h1>
<p> <p>
@ -192,46 +144,4 @@
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,55 +1,5 @@
<!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
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"> <div class="container">
<h1>Terms of Service</h1> <h1>Terms of Service</h1>
<p> <p>
@ -197,46 +147,4 @@
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>