googledonts/templates/index.html
Kumi 0b57f6cfe6
feat: add styled footer to index page
Styled the footer with background color and text color for improved visual consistency. Rearranged HTML structure to correctly enclose content within the main and footer tags, enhancing semantic structure and maintainability.
2024-08-05 16:36:51 +02:00

83 lines
2.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>GoogleDonts</title>
<link
href="https://nobsdelivr.private.coffee/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<style>
body {
background-color: #f8f9fa;
}
.hero {
background: gray;
color: white;
padding: 100px 0;
}
.hero h1 {
font-size: 3.5rem;
}
.hero p {
font-size: 1.25rem;
}
.example-code {
background-color: #e9ecef;
padding: 15px;
border-radius: 5px;
font-family: monospace;
}
footer {
background-color: #343a40;
color: white;
}
</style>
</head>
<body>
<header class="hero text-center">
<div class="container">
<h1 class="display-4">Welcome to GoogleDonts</h1>
<p class="lead">
GoogleDonts is a proxy service to Google Fonts. It allows you to use
Google Fonts without any data being sent to Google.
</p>
</div>
</header>
<main class="container text-center my-5">
<p class="lead">
To use the proxy, simply replace
<code>https://fonts.googleapis.com/</code> with
<code>{{ domain }}</code> in the URL.
</p>
<p>Example:</p>
<div class="example-code">
<code>{{ domain }}css?family=Montserrat:400,700</code>
</div>
</main>
<footer class="text-center py-4">
<h2 class="mt-5">Privacy</h2>
<p>
GoogleDonts is a privacy-focused service. It does not track you or log
any data. It creates a fully separate connection to Google Fonts for
each request, so Google does not see your IP address or any other
information about you.
</p>
<p>
The service is open-source and you can view the source code on
<a href="https://git.private.coffee/privatecoffee/googledonts"
>Private.coffee Git</a
>.
</p>
<p>
Brought to you by <a href="https://private.coffee">Private.coffee</a>
</p>
</footer>
<script src="https://nobsdelivr.private.coffee/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>