Merge pull request 'NewCss' (#23) from NewCss into master
Reviewed-on: WikiFantasy/WF-Website#23pull/25/head
commit
198d8d0a48
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
@ -0,0 +1 @@
|
|||||||
|
@import url(./style.css); /* Import de style.css */
|
||||||
@ -0,0 +1,54 @@
|
|||||||
|
/* Scrollbar globale */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 14px; /* Largeur de la barre verticale */
|
||||||
|
height: 14px; /* Hauteur de la barre horizontale */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Track (fond de la scrollbar) */
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: linear-gradient(180deg, #2a2b4d, #1e1e3f); /* Fond violet sombre */
|
||||||
|
border-radius: 8px; /* Coins arrondis */
|
||||||
|
box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7); /* Ombre interne pour profondeur */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajouter un motif discret sur le track */
|
||||||
|
::-webkit-scrollbar-track:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><text x="0" y="10" fill="%23ffffff33" font-size="12" font-family="serif">✦</text></svg>');
|
||||||
|
background-repeat: repeat;
|
||||||
|
opacity: 0.3; /* Motif semi-transparent */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Thumb (curseur) */
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: linear-gradient(45deg, #6a00ff, #3b0088); /* Dégradé violet-bleu */
|
||||||
|
border-radius: 10px; /* Coins arrondis pour élégance */
|
||||||
|
border: 2px solid #1e1e3f; /* Bord sombre pour contraste */
|
||||||
|
box-shadow: 0 0 10px rgba(106, 0, 255, 0.4); /* Lumière douce */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Ajouter un motif mystique sur le thumb */
|
||||||
|
::-webkit-scrollbar-thumb:before {
|
||||||
|
content: '❂'; /* Symbole mystique */
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255, 255, 255, 0.5); /* Couleur subtile */
|
||||||
|
font-family: 'Fantasy', sans-serif; /* Style runique */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Effet lumineux au survol */
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: linear-gradient(45deg, #7d00ff, #4b00aa); /* Dégradé plus lumineux */
|
||||||
|
box-shadow: 0 0 15px rgba(125, 0, 255, 0.7), 0 0 30px rgba(125, 0, 255, 0.5); /* Lumière amplifiée */
|
||||||
|
transform: scale(1.1); /* Légère croissance au survol */
|
||||||
|
}
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
<?php
|
||||||
|
global $twig;
|
||||||
|
|
||||||
|
|
||||||
|
echo $twig->render('head.html.twig', [
|
||||||
|
'title' => "Quiz",
|
||||||
|
'style' => "public/styles/styleCreate.css",
|
||||||
|
'scripts' => array("public/script/theme-toggle.js")
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
|
// Rendu du bandeau
|
||||||
|
echo $twig->render('bandeau.html.twig');
|
||||||
|
|
||||||
|
echo $twig->render('create.html.twig', [
|
||||||
|
'src' => $src,
|
||||||
|
'char' => $char
|
||||||
|
]);
|
||||||
|
?>
|
||||||
@ -1,16 +1,16 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
|
<a href="{{ racine }}/favorite"><img src="{{ racine }}/images/coeur.svg" alt="coeur" onmousedown="return false"></a>
|
||||||
<img id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
|
<img class='theme-icon' id="theme-icon" src="{{ racine }}/images/dark.svg" alt="toggle theme" onmousedown="return false" onclick="toggleTheme()">
|
||||||
<a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
|
<a href="{{ racine }}/quiz/1"><img src="{{ racine }}/images/quizz.svg" alt="quizz" onmousedown="return false"></a>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
|
<a href="{{ racine }}/"><img src="{{ racine }}/images/WIKIFANTASY.png" alt="Logo" onmousedown="return false"></a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search" onmousedown="return false"></a>
|
<a href="{{ racine }}/search"><img src="{{ racine }}/images/loupe.svg" alt="search" onmousedown="return false"></a>
|
||||||
<a href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user" onmousedown="return false"></a>
|
<a class="iconUser" href="{{ racine }}/profil"><img src="{{ racine }}/images/user_dark.png" alt="user" onmousedown="return false"></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
<div class="creation">
|
||||||
|
<form class="add" method="post" action="{{racine}}/add">
|
||||||
|
{% if src == true and char == true %}
|
||||||
|
<input type="hidden" id="req" name="req" value="both"/>
|
||||||
|
{% elseif src == true %}
|
||||||
|
<input type="hidden" id="req" name="req" value="src"/>
|
||||||
|
{% elseif char == true %}
|
||||||
|
<input type="hidden" id="req" name="req" value="src"/>
|
||||||
|
{% endif %}
|
||||||
|
{% if src == true %}
|
||||||
|
<h1>Source</h1>
|
||||||
|
<label for="titre">Titre de la source *</label>
|
||||||
|
<input type="text" class="champ" id="titre" name="titre" placeholder="Titre de la source" required/>
|
||||||
|
<label for="date">Année de sortie *</label>
|
||||||
|
<input type="number" id="date" name="date" min="1850" max="{{ "now"|date("Y") }}" required>
|
||||||
|
<label for="type">Type de source *</label>
|
||||||
|
|
||||||
|
<input type="radio" id="movie" name="type" value="Movie" checked>
|
||||||
|
<label for="movie">Film</label><br>
|
||||||
|
|
||||||
|
<input type="radio" id="serie" name="type" value="Serie">
|
||||||
|
<label for="serie">Serie</label>
|
||||||
|
|
||||||
|
<input type="radio" id="vg" name="type" value="VideoGame">
|
||||||
|
<label for="vg">Jeu Vidéo</label><br>
|
||||||
|
|
||||||
|
<input type="radio" id="anime" name="type" value="Anime">
|
||||||
|
<label for="anime">Anime</label>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
{% if char == true %}
|
||||||
|
<h1>Personnage</h1>
|
||||||
|
<label for="name">Nom de personnage *</label>
|
||||||
|
<input type="text" class="champ" id="name" name="name" placeholder="Nom du personnage" required/>
|
||||||
|
|
||||||
|
<label for="name">Image du personnage *</label>
|
||||||
|
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" required/>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
<input type="submit" class="btn" value="Soumettre"/>
|
||||||
|
</form>
|
||||||
|
<body>
|
||||||
|
<html>
|
||||||
Loading…
Reference in new issue