Skip to content

Commit

Permalink
Merge pull request #1 from DevNono/design
Browse files Browse the repository at this point in the history
feat: add some page design
AlbanSdl authored May 15, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
2 parents 5c56356 + 9dd3ff4 commit 58c1ddb
Showing 3 changed files with 327 additions and 14 deletions.
85 changes: 80 additions & 5 deletions web/www/borrow.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>TurboSwitch - Emprunt</title>

<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<form method="post">
<input type="text" name="joycons" placeholder="joycons" />
<button type="submit">submit</button>
</form>
<div class="flex flex-col items-center justify-center min-h-screen py-6 bg-gray-50 dark:bg-neutral-900 duration-300 transition-all">
<div
class="mt-7 bg-white border border-gray-200 rounded-xl shadow-sm dark:bg-neutral-900 dark:border-neutral-700 w-96">
<div class="p-4 sm:p-7">
<div class="text-center">
<h1 class="block text-2xl font-bold text-gray-800 dark:text-white">Emprunter des joycons</h1>
<p class="block text-md text-gray-800 dark:text-white">Joycons disponibles&nbsp;: <span id="joycons-left" class="text-[#2a7fba] font-bold">0</span></p>
</div>

<form class="flex flex-col items-center justify-center gap-2 mt-4" method="post">
<input class="border-2 border-gray-300 rounded-md box-border py-2 px-4 focus:outline-none focus:border-blue-500" type="text" name="joycons" placeholder="Nombre de joycons">
<button class="bg-[#2d8fce] hover:bg-[#2a7fba] duration-300 box-border transition-all text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center">
<svg class="w-5 h-5 mr-2" stroke="currentColor" stroke-width="2" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z"/>
<path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13"/>
<path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z"/>
</svg>
<div>
Emprunter
</div>
</button>
</form>
</div>
</div>
</div>
<div class="group fixed bottom-0 right-0 p-4 flex items-end justify-end w-24 h-24">
<!-- main -->
<button type="button" onclick="switchTheme()"
class="text-white shadow-xl flex items-center justify-center p-3 rounded-full bg-gradient-to-r from-cyan-500 to-blue-500 z-50 absolute svg-containers relative">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 duration-300 transition-all absolute">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
</svg>
</div>
</div>

<script defer>
tailwind.config = {
darkMode: 'class',
};

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia(
'(prefers-color-scheme: dark)').matches)) {
localStorage.setItem('color-theme', 'light');
switchTheme();
} else {
localStorage.setItem('color-theme', 'dark');
switchTheme();
}

// Whenever the user explicitly chooses light mode
function switchTheme() {
if (localStorage.getItem('color-theme') !== 'dark') {
document.documentElement.classList.add('dark');
localStorage.setItem('color-theme', 'dark');

document.querySelector(".svg-containers").children[0].classList.add("opacity-0")
document.querySelector(".svg-containers").children[1].classList.remove("opacity-0");
} else {
document.documentElement.classList.remove('dark');
localStorage.setItem('color-theme', 'light');

document.querySelector(".svg-containers").children[0].classList.remove("opacity-0")
document.querySelector(".svg-containers").children[1].classList.add("opacity-0");
}
}

window.onload = () => {
const urlSearchParams = new URLSearchParams(window.location.search);
document.getElementById("joycons-left").innerText = Math.max(0, Math.min(100, Number(urlSearchParams.get("joyconsLeft")) || 0));
}
</script>
</body>
</html>
Loading

0 comments on commit 58c1ddb

Please sign in to comment.