Skip to content

Commit

Permalink
Create 404.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@ViggoZ
ViggoZ committed Jul 2, 2024
1 parent 6a70f33 commit 5711668
Showing 1 changed file with 107 additions and 0 deletions.
107 changes: 107 additions & 0 deletions 404.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!DOCTYPE html>
<html lang="en" class="h-full dark:bg-gray-900 bg-white">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pintree - 404</title>
<meta name="keywords" content="Pintree Bookmarks link">
<meta name="description" content="Managing and Exporting your Bookmarks into a Website">

<link rel="stylesheet" href="css/tailwind.css">
</head>

<body class="h-full flex flex-col dark:bg-gray-900 bg-white">
<header class="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center">
<img class="h-8 w-auto" src="assets/logo.svg" alt="Pintree">
<a href="/" class="ml-4 font-extrabold text-2xl dark:text-white">Pintree</a>
</div>
<button id="themeToggleButton" type="button" aria-label="Switch theme"
class="rounded-full bg-white/90 p-2 shadow-lg ring-1 ring-gray-900/5 backdrop-blur transition dark:bg-gray-900 dark:ring-white/10 dark:hover:ring-white/20">
<svg id="sunIcon" viewBox="0 0 24 24" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
aria-hidden="true"
class="h-6 w-6 fill-gray-100 stroke-gray-500 transition dark:hidden">
<path
d="M8 12.25A4.25 4.25 0 0 1 12.25 8v0a4.25 4.25 0 0 1 4.25 4.25v0a4.25 4.25 0 0 1-4.25 4.25v0A4.25 4.25 0 0 1 8 12.25v0Z">
</path>
<path
d="M12.25 3v1.5M21.5 12.25H20M18.791 18.791l-1.06-1.06M18.791 5.709l-1.06 1.06M12.25 20v1.5M4.5 12.25H3M6.77 6.77 5.709 5.709M6.77 17.73l-1.061 1.061"
fill="none"></path>
</svg>
<svg id="moonIcon" viewBox="0 0 24 24" aria-hidden="true"
class="hidden h-6 w-6 fill-gray-700 stroke-gray-500 transition dark:block">
<path
d="M17.25 16.22a6.937 6.937 0 0 1-9.47-9.47 7.451 7.451 0 1 0 9.47 9.47ZM12.75 7C17 7 17 2.75 17 2.75S17 7 21.25 7C17 7 17 11.25 17 11.25S17 7 12.75 7Z"
stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</button>
</header>

<main class="flex flex-col justify-center items-center flex-grow bg-primary text-white dark:bg-gray-900">
<div class="text-center text-gray-700">
<h2 class="mb-2 text-[50px] font-bold leading-none sm:text-[80px] md:text-[100px] dark:text-gray-400 ">
404
</h2>
<h4 class="mb-3 text-[22px] font-semibold leading-tight dark:text-gray-600">
Oops! That page can’t be found
</h4>
<p class="mb-8 text-lg dark:text-gray-600">
The page you are looking for might have been deleted or moved.
</p>
<a class="group gap-2 inline-flex items-center justify-center rounded-full py-4 px-6 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-green-600 text-white hover:text-white hover:bg-green-700 active:bg-green-700 active:text-green-100 focus-visible:outline-green-600" color="blue" variant="solid" href="/"><span>Go To Home</span>
<div class="relative right-0 group-hover:translate-x-1 w-5 duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="arrow-right">
<path class="opacity-0 group-hover:opacity-100 duration-200" d="M5 12h14"></path>
<path d="m12 5 7 7-7 7"></path>
</svg>
</div>
</a>
</div>
</main>

<footer class="bg-white w-full dark:bg-gray-900 p-4">
<div class="flex justify-center space-x-6">
<a href="https://github.com/Pintree-io/pintree" class="text-gray-400 hover:text-gray-500">
<span class="sr-only">GitHub</span>
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
</div>
<div class="mt-8 text-center text-xs leading-5 text-gray-500 dark:text-gray-400">
&copy; <span id="currentYear"></span> Built with
<a href="https://pintree.io" class="text-green-600 hover:text-green-500" target="_blank">
Pintree
</a>
</div>
</footer>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
const yearElement = document.getElementById('currentYear');
const currentYear = new Date().getFullYear();
yearElement.textContent = currentYear;
});

const themeToggleButton = document.getElementById('themeToggleButton');
const sunIcon = document.getElementById('sunIcon');
const moonIcon = document.getElementById('moonIcon');

function toggleTheme() {
if (document.documentElement.classList.contains('dark')) {
document.documentElement.classList.remove('dark');
sunIcon.classList.remove('hidden');
moonIcon.classList.add('hidden');
} else {
document.documentElement.classList.add('dark');
sunIcon.classList.add('hidden');
moonIcon.classList.remove('hidden');
}
}

themeToggleButton.addEventListener('click', toggleTheme);
</script>
</body>

</html>

0 comments on commit 5711668

Please sign in to comment.