Dinawo/Julianum
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new ui header and video add to modal
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
.dinawo
2024-07-07 14:20:06 +02:00
parent 98fac9e68b
commit 87b5f583fa
4 changed files with 484 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
views/feathures.ejs
View File

@@ -113,27 +113,74 @@
}
.header-scrolled {
background-color: #1f2937; /* bg-gray-900 */
padding: 1rem; /* p-4 */
position: sticky;
top: 0; /* Collé en haut de la page */
z-index: 50; /* z-50 */
max-width: 40rem; /* max-w-xl */
border-radius: 9999px; /* rounded-full */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-xl */
transition: transform 0.3s ease, padding 0.3s ease; /* Transition douce pour la transformation et le padding */
transform: scale(0.8); /* Réduction de la taille */
left: 50%; /* Alignement horizontal au milieu */
background-color: rgba(31, 41, 55, 0.8); /* bg-gray-900 avec légère transparence */
backdrop-filter: blur(10px);
padding: 0.75rem 1.5rem; /* Ajustement du padding */
position: fixed; /* fixed au lieu de sticky pour un meilleur contrôle */
top: 1rem; /* Légèrement décollé du haut */
left: 50%;
transform: translateX(-50%);
z-index: 50;
max-width: 40rem;
border-radius: 9999px;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); /* Transition avec effet de rebond */
width: 100%; /* Initial width */
}
.header-scrolled:hover {
transform: translateX(-50%) scale(1); /* Agrandissement au survol */
padding: 2rem; /* Agrandissement du padding au survol */
transform: translateX(-50%) scale(1.05);
padding: 1rem 2rem;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.header-scrolled.is-reducing {
padding: 0.75rem 1.5rem; /* Ajoutez ici le padding réduit si différent */
left: 50%; /* Placer au centre de la page */
transform: translateX(-50%) scale(0.9); /* Réduction supplémentaire et centrage horizontal */
transition: all 0.5s ease;
width: 60%; /* Réduction de la largeur */
max-width: none; /* Supprime la limite max-width */
top: 1rem; /* Garder la position en haut */
margin: 0 auto; /* Centre l'élément */
position: fixed; /* Pour s'assurer que la position reste fixe */
}
.firstpage {
position: relative; /* Nécessaire pour le positionnement du pseudo-élément */
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.firstpage::before {
content: ""; /* Nécessaire pour que le pseudo-élément soit généré */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('/public/src/photo-1714548213565-9d241b6809d6.png');
background-size: cover; /* Assure que l'image de fond couvre tout l'espace disponible */
filter: brightness(50%); /* Applique le filtre uniquement à l'image de fond */
z-index: -1; /* S'assure que le pseudo-élément reste en arrière-plan */
}
</style>
</head>
<script>
window.addEventListener('scroll', function() {
var header = document.querySelector('.header-scrolled');
if (window.scrollY > 100) { // Ajustez cette valeur selon vos besoins
header.classList.add('is-reducing');
} else {
header.classList.remove('is-reducing');
}
});
</script>
<body class="bg-dark text-gray-200">
<header class="bg-gray-900 p-4 sticky top-0 z-50 glass">
<div class="container mx-auto flex justify-between items-center">
@@ -162,10 +209,10 @@
</nav>
</div>
</div>
<section id="home" class="py-24 px-4">
<section id="home" class="firstpage py-24 px-4">
<div class="container mx-auto text-center">
<h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord polyvalent</h1>
<p class="text-xl mb-10 max-w-2xl mx-auto">Gérez et modérez votre serveur Discord avec des commandes administratives puissantes</p>
<h1 class="text-5xl font-bold mb-6 gradient-text">Raphael, votre bot Discord avec des fonctionnalités avancées</h1>
<p class="text-xl mb-10 max-w-2xl mx-auto">Découvrez les fonctionnalités avancées de Raphael pour gérer et modérer votre serveur Discord efficacement.</p>
<a href="https://discord.com/oauth2/authorize?client_id=1232794371213230201" class="discord-button inline-block">
Inviter Raphael
</a>