Skip to content

Commit

Permalink
feat: add some page design
Browse files Browse the repository at this point in the history
  • Loading branch information
@DevNono
DevNono committed May 14, 2024
1 parent 7e82ef4 commit 2ae49e8
Show file tree
Hide file tree
Showing 2 changed files with 160 additions and 7 deletions.
82 changes: 79 additions & 3 deletions web/www/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">

<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"><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="flex flex-col items-center justify-center">
<img class="w-32 h-auto" src="https://etu.utt.fr/uploads/logos/ung.png?cachebuster-prod" alt="Logo UNG" />
</div>
<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">Se connecter</h1>
</div>

<div class="mt-5">
<a href="/login/cas"
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 text-bold">
<img class="w-6 h-auto"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ1ZKoT1PRAT6Mevq78RfRYeh3Hhgm-NhdVbwC1Yioew&s"
alt="Logo CAS UTT" />
Se connecter avec le CAS
</a>
</div>
</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");
}
}
</script>
</body>

</html>
85 changes: 81 additions & 4 deletions web/www/login.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">

<head>
<title>TurboSwitch - Login</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>
<a href="/login/cas">login</a>
<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="flex flex-col items-center justify-center">
<img class="w-32 h-auto" src="https://etu.utt.fr/uploads/logos/ung.png?cachebuster-prod" alt="Logo UNG" />
<h1 class="text-3xl font-bold text-gray-800 dark:text-white">Formulaire d'emprunt des Joy-Cons</h1>
</div>
<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">
<h2 class="block text-2xl font-bold text-gray-800 dark:text-white">Se connecter</h1>
</div>

<div class="mt-5">
<a href="/login/cas"
class="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-medium rounded-lg border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-800 font-bold">
<img class="w-6 h-auto"
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJ1ZKoT1PRAT6Mevq78RfRYeh3Hhgm-NhdVbwC1Yioew&s"
alt="Logo CAS UTT" />
Se connecter avec le CAS
</a>
</div>
</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");
}
}
</script>
</body>
</html>

</html>

0 comments on commit 2ae49e8

Please sign in to comment.