mirror of
https://github.com/LucasVbr/game-lib.git
synced 2026-05-13 17:21:51 +00:00
Reupload v1.0
This commit is contained in:
Lucàs
@@ -0,0 +1,41 @@
|
||||
# GameLIB
|
||||
|
||||
[](https://lucasvbr.github.io/game-lib/)
|
||||
[](https://forthebadge.com)
|
||||
|
||||
[](https://forthebadge.com)
|
||||
[](https://forthebadge.com)
|
||||
[](https://forthebadge.com)
|
||||
|
||||
Dans le cadre d'un projet tutoré, nous devions réaliser un Site Internet (Afin de valider notre apprentissage de l'HTML5 et le CSS3).
|
||||
Nous avons décidé de créer une __plateforme de vente de jeux vidéos dématérialisé__. (A la manière de *Epic Games* ou *Steam*)
|
||||
Il s'agit d'une **simulation** car aucun achat ne peut aboutir.
|
||||
Toutes les données sont **stocké localement** sur le navigateur.
|
||||
|
||||
### Pré-requis
|
||||
|
||||
Il vous faut disposer d'une connexion internet.
|
||||
|
||||
### Installation
|
||||
|
||||
Aucune installation requise, il vous suffit de cliquer sur le lien suivant : [Website](https://lucasvbr.github.io/game-lib/)
|
||||
|
||||
|
||||
|
||||
|
||||
## Fabriqué avec
|
||||
|
||||
* [HTML5](https://developer.mozilla.org/fr/docs/Web/HTML), [CSS3](https://developer.mozilla.org/fr/docs/Web/CSS), [JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript)
|
||||
* [SublimeText3](https://www.sublimetext.com) - Editeur de texte
|
||||
* [GitHub Desktop](https://desktop.github.com) - Gestionnaire de version
|
||||
|
||||
## Auteurs
|
||||
* **Lilian Strub** _alias_ [@Lavix31](https://github.com/Lavix31)
|
||||
* **Lucas Vabre** _alias_ [@LucasVbr](https://github.com/lucasvbr)
|
||||
* **Noé Villeneuve** _alias_ [@NonoL3Robot](https://github.com/NonoL3Robot)
|
||||
* **Tristan Nogaret** _alias_ [@Zanter12](https://github.com/Zanter12)
|
||||
|
||||
Lisez la liste des [contributeurs](https://github.com/lucasvbr/GameLIB/contributors) pour voir qui à aidé au projet !
|
||||
|
||||
## Informations
|
||||
Date de création : Novembre 2020
|
||||
@@ -0,0 +1,83 @@
|
||||
/*
|
||||
* aPropos.css
|
||||
*
|
||||
* @author Vabre Lucas, Nogaret Tristan
|
||||
*/
|
||||
|
||||
:root { /* Pour scroll fluidement jusqu'a l'encrage */
|
||||
scroll-behavior: smooth; /* Rend le scroll lent et ne fais pas mal aux yeux */
|
||||
}
|
||||
|
||||
.mini-menu { /* Caractéritiques du mini-menu */
|
||||
border-radius: 5px; /* Arrondi les coin du menu */
|
||||
padding: 20px; /* Defini les merges internes du menu */
|
||||
margin: 10px; /* Défini les marges extérieurs du menu */
|
||||
background-color: var(--overlay-color); /* Attribue la 2e couleur de fond au menu */
|
||||
display: inline-block; /* Affiche les element en ligne */
|
||||
position: fixed; /* Fixe la position du menu */
|
||||
top: 0; /* Aligne le menu en haut */
|
||||
z-index: 9999; /* Affiche le menu au prmier plan */
|
||||
}
|
||||
|
||||
.mini-menu ul { /* Caractéristiques de la liste du menu */
|
||||
display: inline-block; /* Affiche les element en ligne */
|
||||
padding: 0; /* Defini les marges interieures */
|
||||
margin: 0; /* Defini les marges extérieures */
|
||||
}
|
||||
|
||||
.mini-menu li { /* Caractéristqiues des elements de la liste */
|
||||
text-decoration: none; /* Enleve les décoration appliqué au texte */
|
||||
}
|
||||
|
||||
.mini-menu p { /* Modifie l'aspect du texte dans le menu */
|
||||
margin: 0; /* Defini la marge externes du texte */
|
||||
text-align: left; /* Aligne le texte à gauche */
|
||||
}
|
||||
|
||||
.profil { /* Caractéristiques des photos */
|
||||
border-radius: 50%; /* Mets les photos sous formes de disques */
|
||||
width: 120px; /* Défini ses dimensions */
|
||||
filter: grayscale(1); /* Attribut un filtre noir et blanc */
|
||||
display: inline-block; /* Affiche la photo en ligne */
|
||||
}
|
||||
|
||||
.name-block { /* Caractéristiques du bloc de nom */
|
||||
display: inline-block; /* Affiche les éléments en ligne */
|
||||
vertical-align: top; /* Aligne le block nom en haut */
|
||||
}
|
||||
|
||||
.name { /* Caractériqtiques du nom */
|
||||
margin-bottom: 0; /* Définie la marge inférieure du nom phonétique */
|
||||
}
|
||||
|
||||
.name-ph { /* Caractéristques du nom phonétiques */
|
||||
margin-top: 0; /* Définie la marge supérieure du nom phonétique */
|
||||
}
|
||||
|
||||
|
||||
article { /* Caractéristiques de la section */
|
||||
background-color: var(--overlay-color); /* Attribue la 2e couleur de fond a la section */
|
||||
border-radius: 5px; /* Arrondi les coin du menu */
|
||||
padding: 25px; /* Modifie les marges intérieures */
|
||||
margin-top: 15px; /* Modifie la marge extérieure suérieures */
|
||||
}
|
||||
|
||||
.section-right { /* Caractéristqiue des sections à droite */
|
||||
margin-top: 50px; /* Modifie la marge extérieure supérieures */
|
||||
}
|
||||
|
||||
.section-right div { /* Caractéristqiue de la sous branche div des sections à droite */
|
||||
margin-left: 50%; /* Modifie la marge extérieure gauche */
|
||||
}
|
||||
|
||||
.section-right div div {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.section-right article { /* Caractéristqiue de la sous branche article des sections à droite */
|
||||
margin-left: 50%; /* Modifie la marge extérieure gauche */
|
||||
}
|
||||
|
||||
.section-left { /* Carctéristiques des sections à gauches */
|
||||
margin-right: 50%; /* Modifie la marge extérieure droite */
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/*
|
||||
* abonnement.css
|
||||
*
|
||||
* Feuille de style utilisé dans contact.css
|
||||
*
|
||||
* @author Nogaret Tristan, Vabre Lucas
|
||||
*/
|
||||
|
||||
.div_a { /* Modifie les caractéristiques de la premières div*/
|
||||
margin-top: 50px; /* Crée un marge de 50px vers le haut */
|
||||
}
|
||||
|
||||
.offre { /* Modifie les caractéristiques du cadre princpal, celui du haut */
|
||||
margin: auto; /* Donne les marge de manière automatique */
|
||||
vertical-align: middle; /* Aligne la case au milieu de la page */
|
||||
text-align: center; /* Aligne le texte au centre de la case */
|
||||
width: 70%; /* Définie la largeur que cela prnd sur la page du site */
|
||||
}
|
||||
|
||||
.avantages { /* Modifie les caractéristiques des 3 cadres du bas */
|
||||
margin: auto; /* Définie les bordures extérieures de manière automatique */
|
||||
vertical-align: middle; /* Aligne le tableau au centre de la page */
|
||||
text-align: center; /* Aligne le texte au centre de la case du tableau */
|
||||
border-collapse: separate; /* Sépare les cases du tableau d'un nombre de pixel indiqué en dessous */
|
||||
border-spacing: 25px; /* Donnel'écart entre les case du tableau */
|
||||
width: 73%; /* Définie la taille que cela prends sur la page */
|
||||
}
|
||||
|
||||
.cout { /* Modifie les caractéristiques du cadre princpal, celui du haut */
|
||||
margin: auto; /* Définie les bordures extérieures de manière automatique */
|
||||
vertical-align: middle; /* Aligne la case au ilieu de la page */
|
||||
text-align: center; /* Aligne le texte au milieu */
|
||||
width: 40%; /* Définie la place que le cadre prends sur la page */
|
||||
margin-bottom: 25px; /* Définie la marge du bas */
|
||||
}
|
||||
|
||||
caption { /* Modifie les caractéristiques de "Les avantages :" */
|
||||
margin: 25px 0px -20px 25px; /* Définie bordures extérieurs du titre de tableau */
|
||||
text-align: left; /* Aligne le texte à gauche */
|
||||
}
|
||||
|
||||
.boutton { /* Modifie les caractéristiques du bouton */
|
||||
margin-left: calc(85% - 120px); /* Place le bouton à l'endroit adéquats sur la page */
|
||||
font-size: 1.3em; /* définie la taille du texte */
|
||||
padding: 20px; /* Définie la taille des marges internes*/
|
||||
|
||||
transition: all 0.2s; /* Défini la durée des transitions */
|
||||
}
|
||||
|
||||
td { /* Modifie les caractéristiques de toutes les cases de tout les tableaux */
|
||||
border-radius: var(--border-radius-5); /* Crée un bord arrondi pour les cases */
|
||||
}
|
||||
|
||||
/* Modification des couleurs pour chaque case (et de la taille de la première case) */
|
||||
|
||||
.titre { /* Modifie les caractéristiques du cadre du haut */
|
||||
background: linear-gradient(#9b59b6, #8e44ad); /* Donne un dégradé et défini la couleur (dégradé de violet) */
|
||||
height: 400px; /* Modifie la hauteur de la case */
|
||||
}
|
||||
|
||||
.titre > h3 {
|
||||
color: var(--text-color); /* Donne la couleur du texte en fonction du light ou dark mode */
|
||||
}
|
||||
|
||||
.td1 { /* Modifie les caractéristiques du cadre de droite */
|
||||
background: linear-gradient(45deg, #e74c3c, #c0392b); /* Donne un dégradé et défini la couleur (dégradé de rouge) */
|
||||
}
|
||||
|
||||
.td2 { /* Modifie les caractéristiques du cadre du milieu */
|
||||
background: linear-gradient(45deg, #2ecc71, #27ae60); /* Donne un dégradé et défini la couleur (dégradé de vert) */
|
||||
}
|
||||
|
||||
.td3 { /* Modifie les caractéristiques du cadre de gauche */
|
||||
background: linear-gradient(45deg, #3498db, #2980b9); /* Donne un dégradé et défini la couleur (dégradé de bleu) */
|
||||
}
|
||||
|
||||
.prix { /* Modifie les caractéristiques du cadre du bas */
|
||||
background: linear-gradient(#9b59b6 , #8e44ad); /* Donne un dégradé et défini la couleur (dégradé de violet) */
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* card.css
|
||||
*
|
||||
* Affichage des cartes, utilisé dans le index.html
|
||||
*
|
||||
* @author Vabre Lucas, Nogaret Tristan
|
||||
*/
|
||||
|
||||
/* ### Variables principales utilisés ### */
|
||||
:root { /* caractéristiques de la page */
|
||||
--border-card-radius: 5px; /* Arrondi les coins */
|
||||
}
|
||||
|
||||
/* ### Collection de Cartes (en ligne) ### */
|
||||
.card-collection { /* carctéristiques des cartes de collections */
|
||||
text-align: center; /* Centre le texte, et les blocs surtout */
|
||||
}
|
||||
|
||||
.categorie { /* Affichage des blocs des catégories */
|
||||
background-color: var(--overlay-color); /* Defini la couleur de fond */
|
||||
border-radius: var(--border-card-radius); /* Defini la bordure */
|
||||
}
|
||||
|
||||
.categorie > h2 { /* Titres des catégories */
|
||||
text-align: center; /* Centre le texte */
|
||||
padding-top: 20px; /* Marge interne de 20px de tout les cotés */
|
||||
}
|
||||
|
||||
/* ### Cartes ### */
|
||||
.card { /* Caractéristiques de la carte */
|
||||
margin: 15px; /* Marge de 15px de tout les cotés */
|
||||
border-collapse: collapse; /* Enlève les séparation */
|
||||
display: inline-block; /* Affiche les cartes en lignes */
|
||||
}
|
||||
|
||||
.card-picture img { /* caractéristique de l'image de survol */
|
||||
border-radius: var(--border-card-radius); /* Arrondi des bordures de la carte */
|
||||
overflow: hidden; /* Cache le surplus de l'élément */
|
||||
box-shadow: 0 0 5px black; /* Crée une légère ombre derrière la carte (effet 3D) */
|
||||
transition: 0.25s; /* pour faire transition fluide */
|
||||
}
|
||||
|
||||
.card-picture img:hover { /* Modification de l'image au survol */
|
||||
transform: scale(1.04); /* augmente la taille de l'image */
|
||||
box-shadow: 0 0 10px var(--overlay-color); /* Donne un effet d'ombre coloré à l'image */
|
||||
opacity: 75%; /* change l'opacité de l'image */
|
||||
transition: 0.25s; /* pour faire transition fluide */
|
||||
}
|
||||
|
||||
.vertical img { /* image verticale */
|
||||
height:325px; /* longueur */
|
||||
width:240px; /* largeur */
|
||||
}
|
||||
|
||||
|
||||
.horizontal img { /* image horizontale */
|
||||
width:300px; /* largeur */
|
||||
height:169px; /* longueur */
|
||||
}
|
||||
|
||||
/* ### Cellule "Texte" du tableau ### */
|
||||
.card-info { /* cractéristiques des cartes d'infos */
|
||||
background-color: var(--overlay-color); /* Attribut la 2e couleur de fond */
|
||||
border-radius: 15px; /* Arrondi les coins */
|
||||
padding:10px; /* Définie les bordures extérieures */
|
||||
}
|
||||
|
||||
.card-info a { /* lien sur le nom du jeu */
|
||||
text-decoration: none; /* Enlève le soulignement */
|
||||
}
|
||||
|
||||
.card-title { /* nom du jeu */
|
||||
text-align: left; /* Aligné a gauche */
|
||||
margin: 0; /* Pas de marges */
|
||||
color: var(--text-color); /* Couleur courrante du texte */
|
||||
}
|
||||
|
||||
.card-editor { /* editeur du jeu */
|
||||
text-align: left; /* Aligné a gauche */
|
||||
margin: 0 0 5px 0; /* Marge de 5px vers le bas */
|
||||
color: grey; /* couleur du texte en gris */
|
||||
}
|
||||
|
||||
.card-price { /* prix des jeux */
|
||||
margin: 5px; /* Marge de 5px de tout les cotés */
|
||||
font-size: 20px; /* Taille du texte de 20px */
|
||||
text-align: right; /* Aligné a droite */
|
||||
}
|
||||
|
||||
.tag { /* réduction */
|
||||
background-color: var(--main-color); /* Couleur définie dans style.css */
|
||||
border-radius: var(--border-card-radius); /* Même bordure que les cartes */
|
||||
padding: 5px; /* Marge interne de px de tout les cotés */
|
||||
font-size: 16px; /* Taille du texte de 16px */
|
||||
}
|
||||
|
||||
.card-info strike { /* prix barré si réduction */
|
||||
color: grey; /* Couleur du texte en gris */
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
/*
|
||||
* clicker.css
|
||||
*
|
||||
* Feuille de style de l'easter Egg:
|
||||
* clicker.html
|
||||
*
|
||||
* @author Vabre Lucas
|
||||
*/
|
||||
|
||||
/* ### Partie Centrale ### */
|
||||
#cookie { /* Image du cookie */
|
||||
position: absolute; /* Objet qui se fie uniquement a la taille de la fenêtre */
|
||||
top: 50%; /* Centre verticalement */
|
||||
left: 50%; /* Centre horizontalement */
|
||||
transform: translate(-50%, -50%); /* De 50% de lui même pour ce centrer parfaitement */
|
||||
}
|
||||
|
||||
#clicker { /* Image où il faut cliquer */
|
||||
background-image: url(../img/icons/cookie.webp); /* Image du cookie */
|
||||
width: 150px; /* Taille du cookie */
|
||||
height: 150px; /* Hauteur du cookie */
|
||||
transition: 0.025s; /* Transition de l'animation */
|
||||
}
|
||||
|
||||
#clicker:active{ /* Lors du click sur l'image */
|
||||
transform: scale(1.5); /* Grossi le cookie */
|
||||
transition: 0.025s all; /* Transition de l'animation */
|
||||
}
|
||||
|
||||
#score, #persecond { /* Style de du texte sous le gros cookie */
|
||||
text-align: center; /* Texte centré */
|
||||
}
|
||||
|
||||
/* ### Tableau des améliorations ### */
|
||||
#upgrades { /* Tableau */
|
||||
margin: 10px; /* Marge de tout les cotés */
|
||||
border-collapse: collapse; /* Enlève l'espacement entre les cases */
|
||||
}
|
||||
|
||||
#upgrades tr:nth-child(2n+1) { /* Style des lignes */
|
||||
background-color: var(--overlay-color); /* Couleur de fond */
|
||||
}
|
||||
|
||||
#upgrades tr td { /* cases du tableau */
|
||||
border: 1px solid black; /* Bordure des cases */
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* contact.css
|
||||
*
|
||||
* Feuille de style de contact.html
|
||||
*
|
||||
* @author Lilian Strub, Vabre Lucas
|
||||
*/
|
||||
|
||||
form { /* Caractéristiques du formulaire de la page */
|
||||
background-color: var(--overlay-color); /* Couleur de fond */
|
||||
border-radius: var(--border-radius-5); /* Arrondissement des bordures */
|
||||
font-family: "Helvetica"; /* Police d'écriture du formulaire */
|
||||
|
||||
width: 500px; /* Epaisseur de 500px */
|
||||
margin: 50px auto; /* Marge de 50px en haut et en bas, centre horizontalement */
|
||||
padding: 15px; /* Marge interne de tout les cotés */
|
||||
}
|
||||
|
||||
h1 { /* Titres(1) */
|
||||
text-align: center; /* Centre */
|
||||
}
|
||||
|
||||
input, textarea { /* Caractéristiques des zones ou l'on peut écrire et des messages affichés avant d'écrire */
|
||||
font-size: 16px; /* Taille de la police */
|
||||
margin-top: 5px; /* Marge vers le haut */
|
||||
margin-bottom: 10px; /* Marge vers le bas */
|
||||
padding: 5px; /* Marge interne de tout les cotés */
|
||||
|
||||
border-radius: var(--border-radius-5); /* Arrondissement des bordures */
|
||||
border-style: none; /* Efface les bordures de bases */
|
||||
border-width: 0px; /* Enlève l'épaisseur des bordures de base */
|
||||
}
|
||||
|
||||
label { /* Texte qui décrit l'input */
|
||||
margin-top: 10px; /* Marge vers le haut */
|
||||
}
|
||||
|
||||
textarea { /* Grande zone de texte */
|
||||
resize: none; /* Ne peut pas se faire modifier la taille */
|
||||
}
|
||||
|
||||
em { /* Elements en italiques */
|
||||
font-weight: bold; /* Met en gras */
|
||||
color: var(--main-color); /* Couleur du texte */
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
/*
|
||||
* cookieConsent.js
|
||||
*
|
||||
* Utilisé pour l'overlay du cookie
|
||||
*
|
||||
* @author Villeneuve Noé, Vabre Lucas
|
||||
*/
|
||||
|
||||
/* ### Bandeau des cookies ### */
|
||||
#cookieConsent { /* Bandeau des cookies */
|
||||
background-color: var(--overlay-color); /* Couleur de fond */
|
||||
opacity: 90%; /* Opacité du bandeau */
|
||||
min-height: 26px; /* Hauteur minimale */
|
||||
font-size: 20px; /* Taille du texte */
|
||||
color: var(--text-color); /* Couleur du texte */
|
||||
line-height: 26px; /* Hauteur des lignes de texte */
|
||||
padding: 10px 0px 10px 30px; /* Marge interne en haut, en bas et à gauche */
|
||||
position: fixed; /* Position fixé sur l'écran */
|
||||
bottom: 0; /* Positionné en bas de l'écran */
|
||||
left: 0; /* Est placé a gauche */
|
||||
right: 0; /* et a droite => prend toute la largeur de la page */
|
||||
z-index: 9999; /* Affiché au premier plan */
|
||||
}
|
||||
|
||||
.textCookieConsent { /* Texte du bandeau */
|
||||
float: left; /* Positionner a gauche */
|
||||
font-size: 0.9em; /* Modifie la taille du texte */
|
||||
margin: 0; /* Enlève les marges */
|
||||
padding-top: 10px; /* Marge interne vers le haut */
|
||||
}
|
||||
|
||||
/* ### Boutton Croix ### */
|
||||
.closeCookieConsent { /* Croix pour fermer le bandeau */
|
||||
float: right; /* Positionne a droite */
|
||||
height: 20px; /* Hauteur de 20px */
|
||||
width: 20px; /* Taille de 20px */
|
||||
margin-top: -10px; /* Marge vers le haut */
|
||||
font-weight: bold; /* Affiche en gras */
|
||||
}
|
||||
|
||||
.closeCookieConsent:hover { /* Croix au survol */
|
||||
color: #FFF; /* Rend le croix plus blanche, effet brillant */
|
||||
cursor: pointer; /* Change le curseur */
|
||||
}
|
||||
|
||||
/* ### Boutton "c'est noté" ### */
|
||||
#cookieConsentOK {
|
||||
margin-top: 15px; /* Marge vers le haut */
|
||||
padding: 5px 10px; /* Marge interne de 5px vers le haut et le bas et 10px a droite et a gauche */
|
||||
float: right; /* Obejt flottant positionné a droite */
|
||||
}
|
||||
|
||||
/* ### Texte "Plus d'infos" ### */
|
||||
#konamicode { /* Boutton "plus d'infos" */
|
||||
color: var(--main-color); /* Couleur du texte */
|
||||
}
|
||||
|
||||
#konamicode:hover { /* Boutton "plus d'infos" au passage de la souris */
|
||||
cursor: pointer; /* souris montre un lien clicable */
|
||||
text-decoration: underline; /* Souligne le texte */
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
/*
|
||||
* error.css
|
||||
*
|
||||
* Feuille de Style utilisé pour la page d'erreur
|
||||
* (error.html)
|
||||
*
|
||||
* @author Nogaret Tristan, Vabre Lucas
|
||||
*/
|
||||
|
||||
a { /* Annule l'effet fait par la page de style principale */
|
||||
text-decoration: underline; /* Souligne le texte */
|
||||
}
|
||||
|
||||
/* Ajustement du texte sur la page */
|
||||
.titre, .sous-titre, p { /* Mise en forme du texte */
|
||||
text-align: center; /* Centre le texte */
|
||||
}
|
||||
|
||||
.titre { /* Mot d'erreur */
|
||||
font-size: 5em; /* Augmente drastiquement la taille de l'écriture */
|
||||
}
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
/*
|
||||
* jeu.css
|
||||
*
|
||||
* Feuille de style utilisé dans la page
|
||||
* jeu.html.
|
||||
*
|
||||
* @author Vabre Lucas
|
||||
*/
|
||||
|
||||
/* ### Zone de Navigation ### */
|
||||
.jeu-nav {
|
||||
background-color: var(--overlay-color); /* Met en couleur de fond la deuxieme couleur principale */
|
||||
border-radius: var(--border-radius-5); /* Met une bordure de 5px */
|
||||
}
|
||||
|
||||
.jeu-nav ul li { /* Element de la zone de navigation */
|
||||
display: inline-block; /* Affiche les éléments */
|
||||
vertical-align: middle; /* Aligne verticalement les éléments */
|
||||
}
|
||||
|
||||
/* ### Affichage de la partie principale ### */
|
||||
.jeu-part {
|
||||
display: inline-flex; /* Affiche les éléments flexiblement */
|
||||
width: 100%; /* Prend la totalité du container */
|
||||
height: 500px; /* A une hauteur minimale de 500px */
|
||||
}
|
||||
|
||||
#picture-ingame { /* Image du jeu */
|
||||
background-repeat: no-repeat; /* Ne pas répéter l'image si l'espace alloué est plus grand qu'elle même */
|
||||
width: 70%; /* Prend 70% du container */
|
||||
height: 500px; /* Prend les 500px du container */
|
||||
border-radius: var(--border-radius-5); /* Bordure arrondis de l'élément */
|
||||
background-size: cover; /* L'image prend la totalité de l'espace qui lui est attribué */
|
||||
background-position: center center; /* Place l'image au centre de l'espace alloué */
|
||||
overflow: hidden; /* Cache le surplus de la photo */
|
||||
}
|
||||
|
||||
#picture-ingame iframe { /* Vidéo importée de Youtube */
|
||||
width: 100%; /* Prend la totalité de la taille qui lui est attribué */
|
||||
height: 100%; /* Prend la totalité de la hauteur qui lui est attribué */
|
||||
}
|
||||
|
||||
/* ### Partie droite de la vidéo/image ### */
|
||||
.side-part {
|
||||
margin-left: 16px; /* Met une marge de 16 vers la gauche */
|
||||
width: 30%; /* Prend 30% du container */
|
||||
}
|
||||
|
||||
.background-picture-cover { /* Fond du logo du jeu */
|
||||
background-color: var(--overlay-color); /* Couleur de fond du logo du jeu */
|
||||
border-radius: var(--border-radius-5); /* Bordures arrondis */
|
||||
padding: 10px; /* Marges intenes de tout les cotés */
|
||||
height: 30%; /* Prend 30% de la hauteur */
|
||||
}
|
||||
|
||||
|
||||
#picture-logo { /* Logo du jeu */
|
||||
background-position: center center; /* Centre le logo du jeu */
|
||||
background-size: contain; /* Toute l'image doit etre présente dans le bloc */
|
||||
background-repeat: no-repeat; /* Ne pas répéter l'image si il y a trop d'espace */
|
||||
height: 100%; /* Prend 100% de la hauteur qui lui est alloué */
|
||||
}
|
||||
|
||||
.text-part { /* Partie textuelle du jeu */
|
||||
background-color: var(--overlay-color); /* Couleur de fond */
|
||||
border-radius: var(--border-radius-5); /* Bordures arrondis */
|
||||
padding: 5px; /* Marge interne de tout les cotés */
|
||||
margin-top: 16px; /* Marge de tout les cotés */
|
||||
}
|
||||
|
||||
.text-part h2 { /* Titre du jeu */
|
||||
margin-top: 5px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ### Partie du prix ### */
|
||||
.price-part {
|
||||
text-align: right; /* Aligne le texte à droite */
|
||||
margin: 0 10px 10px 0; /* Met une marge de 10px a droite et en bas */
|
||||
display: block; /* Affiche les élément l'un en dessous de l'autre */
|
||||
}
|
||||
|
||||
#price { /* Element contenant la valeur du prix */
|
||||
margin-bottom: 16px; /* Met une marge vers le bas */
|
||||
font-size: 1.1em; /* Change la taille de la police */
|
||||
}
|
||||
|
||||
/* ### Partie plus d'info ### */
|
||||
.plus-info {
|
||||
margin-top: 100px; /* Met une marge vers le haut */
|
||||
background-color: var(--overlay-color); /* Couleur de fond */
|
||||
border-radius: var(--border-radius-5); /* Bordure arrondis */
|
||||
padding: 15px /* Marge interne de tout les cotés */
|
||||
}
|
||||
|
||||
.plus-info table { /* Tableau interne de la partie "plus d'info" */
|
||||
text-align: center; /* Centre les éléments du tableau */
|
||||
width: 100%; /* Prend la totalité de la longueur de la page */
|
||||
padding-bottom: 30px; /* Crée une marge interne vers le bas */
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
/*
|
||||
* lightmode.css
|
||||
*
|
||||
* Feuille de style qui est utilisé pour le module
|
||||
* de l'affichage sombre / clair
|
||||
* Utilisé avec lightmode.js
|
||||
*
|
||||
* @author Vabre Lucas
|
||||
*/
|
||||
|
||||
/* ### Mode Clair ### */
|
||||
.light-theme { /* Variables utilisés pour le mode Jour */
|
||||
--background-color:#ecf0f1; /* Couleur de fond général */
|
||||
--overlay-color:#bdc3c7; /* Deuxieme couleur de fond */
|
||||
--text-color:#2c3e50; /* Couleur du texte */
|
||||
transition-duration: 0.5s; /* Transition de 0.5 secondes */
|
||||
}
|
||||
|
||||
/* ### Mode sombre ### */
|
||||
.dark-theme { /* Variables utilisés pour le mode Nuit */
|
||||
--background-color:#2c3e50; /* Couleur de fond général */
|
||||
--overlay-color:#34495e; /* Deuxieme couleur de fond */
|
||||
--text-color:#ecf0f1; /* Couleur du texte */
|
||||
transition-duration: 0.5s; /* Transition de 0.5 secondes */
|
||||
}
|
||||
|
||||
/* */
|
||||
#light-mode { /* Boutton jour-nuit */
|
||||
cursor: pointer; /* Au survol déchange le curseur pour montrer que c'est un boutton clicable */
|
||||
}
|
||||
|
||||
.li-night-mode {/* Element contenant le boutton jour/nuit */
|
||||
padding: 0; /* Enlève les marges internes */
|
||||
margin: 0; /* Enlève les marges */
|
||||
}
|
||||
|
||||
.li-night-mode img { /* Iconne de la lune / soleil */
|
||||
width: 40px; /* Défini la taille de l'iconne */
|
||||
height: 40px; /* Defini la hauteur de l'iconne */
|
||||
}
|
||||
|
||||
.li-maincolor img { /* Element li qui contient l'Iconne de l'engrenage */
|
||||
width: 30px; /* Défini la taille de l'iconne */
|
||||
height: 30px; /* Defini la hauteur de l'iconne */
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
* listeJeux.css
|
||||
*
|
||||
* @author Vabre Lucas
|
||||
*/
|
||||
|
||||
td img { /* Image du jeu */
|
||||
width:300px; /* Taille de l'image */
|
||||
border-radius: var(--border-radius-5); /* Mordure des arrondis */
|
||||
}
|
||||
|
||||
td p, h3 { /* Paragraphes et titres(3) */
|
||||
text-align: center; /* Aligne le texte au centre */
|
||||
}
|
||||
|
||||
.price { /* Le prix */
|
||||
text-align: right; /* Aligne le texte à droite */
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/*
|
||||
* maincolor.css
|
||||
*
|
||||
* Selection de la couleur principale
|
||||
* qui se fera manipuler par le script
|
||||
* maincolor.js
|
||||
*
|
||||
* @author Vabre Lucas
|
||||
*/
|
||||
|
||||
/*
|
||||
Données :
|
||||
bleu : #3498db
|
||||
vert : #2ecc71
|
||||
violet : #9b59b6
|
||||
rouge : #e74c3c
|
||||
*/
|
||||
|
||||
/* ### Couleurs sélectionnables ### */
|
||||
.main-blue { /* Couleur Bleu */
|
||||
--main-color: #3498db; /* Modifie la valeur de la variable --main-color */
|
||||
}
|
||||
|
||||
.main-green { /* Couleur Vert */
|
||||
--main-color: #2ecc71; /* Modifie la valeur de la variable --main-color */
|
||||
}
|
||||
|
||||
.main-purple { /* Couleur Violet */
|
||||
--main-color: #9b59b6; /* Modifie la valeur de la variable --main-color */
|
||||
}
|
||||
|
||||
.main-red { /* Couleur Rouge */
|
||||
--main-color: #e74c3c; /* Modifie la valeur de la variable --main-color */
|
||||
}
|
||||
|
||||
/* ### Panneau de selection ### */
|
||||
.color-picker {/* Panneau de selection des couleurs */
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
border: solid var(--background-color) 3px;
|
||||
background-color: var(--overlay-color);
|
||||
}
|
||||
|
||||
.color-picker > p {/* Petit texte dans le panneau de selection des couleurs */
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
|
||||
.li-maincolor:hover > .color-picker {/* Affichage du panneau au survol de l'engrenage */
|
||||
display: block; /* Affiche l'élément en dessous de l'engrenage */
|
||||
}
|
||||
|
||||
/* ### Bouttons de couleurs ### */
|
||||
.color-picker li div { /* Rectagles de couleurs sélectionnable */
|
||||
width: 50px; /* Largeur de 50px */
|
||||
height: 30px; /* Hauteur de 30px */
|
||||
border-radius: var(--border-radius-5); /* Bordure arrondis de 5px */
|
||||
}
|
||||
|
||||
.color-picker li div:hover { /* Survol des bouttons de couleur */
|
||||
cursor: pointer; /* Met le curseur en mode pointeur */
|
||||
}
|
||||
|
||||
/* ### Couleurs des bouttons de couleurs ### */
|
||||
#color-blue {background-color: #3498db;} /* Couleur de fond en Bleu */
|
||||
#color-green {background-color: #2ecc71;} /* Couleur de fond en Vert */
|
||||
#color-purple {background-color: #9b59b6;} /* Couleur de fond en Violet */
|
||||
#color-red {background-color: #e74c3c;} /* Couleur de fond en Rouge */
|
||||
+127
@@ -0,0 +1,127 @@
|
||||
/*
|
||||
* style.css
|
||||
* @author Vabre Lucas, Strub Lilian
|
||||
*/
|
||||
|
||||
:root { /* Variables Principales utilisé dans plupart des pages */
|
||||
--border-radius-5 : 5px; /* Bordures arrondis de 5px */
|
||||
--border-radius-15 : 15px; /* Bordures arrondis de 15px */
|
||||
}
|
||||
|
||||
/* ### Entête de la page ### */
|
||||
header {
|
||||
text-align: center; /* Centre le texte (le logo) */
|
||||
}
|
||||
|
||||
header img { /* image de l'entête (logo) */
|
||||
margin: 25px 0 25px 0; /* met une marge en haut et en bas de 25px */
|
||||
}
|
||||
|
||||
/* ### Corps de la page ### */
|
||||
@font-face { /* Police d'écriture */
|
||||
font-family: "Cabin-Regular"; /* Définis les polices d'écritures à utiliser dans le site */
|
||||
src: url('../font/Cabin-Regular.ttf');
|
||||
}
|
||||
|
||||
body { /* Corps */
|
||||
font-family: Cabin-Regular, Arial, consolas;
|
||||
color: var(--text-color); /* Défini la couleur générale du texte */
|
||||
background-color: var(--background-color); /* Défini la couleur d'arrière plan du site */
|
||||
|
||||
padding: 0; /* Enlève les marges intenes */
|
||||
margin: 0; /* Enlève les marges */
|
||||
width: 100%; /* Fait prendre la taille du site, l'intégralité de l'écran */
|
||||
}
|
||||
|
||||
.container { /* Container de la page (centrage) */
|
||||
margin-left: 10%;
|
||||
margin-right:10%;
|
||||
}
|
||||
|
||||
h3, a { /* Met les titres(3) et les lien */
|
||||
color : var(--main-color); /* Couleur du texte en la couleur sélectionnées */
|
||||
}
|
||||
|
||||
a { /* Tout les liens du site */
|
||||
text-decoration: none; /* Enlève le souligné des liens clicables */
|
||||
}
|
||||
|
||||
|
||||
th, tr, td { /* Enlève les espacements des tableaux */
|
||||
border-collapse: collapse; /* Bordures collées */
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: none;
|
||||
color: var(--overlay-color);
|
||||
}
|
||||
|
||||
abbr { /* Les unicodes */
|
||||
text-decoration: none; /* Pour enlever le soulignement des elements unicodes */
|
||||
}
|
||||
|
||||
.boutton { /* Affichage du boutton */
|
||||
background-color: var(--main-color); /* Couleur de fond */
|
||||
color: var(--text-color); /* Couleur du texte */
|
||||
font-size: 1.0em; /* Taille du texte */
|
||||
|
||||
border-radius: var(--border-radius-5); /* Arrondis des bordures */
|
||||
padding: 14px; /* Marge intene */
|
||||
border-style: none; /* Enlève la bordure de base */
|
||||
border-width: 0px; /* Enlève l'épaisseur des bordure de base */
|
||||
|
||||
box-shadow: 0 0 15px var(--main-color); /* Lumière arrière */
|
||||
transition: 0.2s; /* Durée d'animation */
|
||||
}
|
||||
|
||||
.boutton:hover { /* Boutton au survol */
|
||||
cursor: pointer; /* Affichage du pointeur de la souris */
|
||||
box-shadow: 0 0 0; /* Enlève l'effet de lumière */
|
||||
}
|
||||
|
||||
/* ### Menu ### */
|
||||
nav ul { /* La liste délément dans le panneau de navigation */
|
||||
text-align: center; /* Centre le texte */
|
||||
background-color: var(--overlay-color); /* Met en couleur de font la couleur secondaire */
|
||||
margin: auto 25% auto 25%; /* Centre l'élément de 25% de chaque cotés */
|
||||
padding: 0; /* Enlève la marge interne par défaut du "ul" */
|
||||
border-radius: var(--border-radius-15); /* Bordure arrondis de 15px */
|
||||
}
|
||||
|
||||
nav li { /* Chaque éléments dans le panneau de navigation */
|
||||
display: inline-block; /* Affiche tout les éléments du menu en ligne */
|
||||
text-decoration: none; /* Enlève les puce de la liste */
|
||||
padding: 10px; /* Marge interne de tout les cotés */
|
||||
margin: 5px; /* Marge de tout les cotés */
|
||||
font-size: 1.1em; /* Taille du texte */
|
||||
vertical-align: middle; /* Aligne au milieu verticalement */
|
||||
}
|
||||
|
||||
nav a { /* Lien du panneau de navigation */
|
||||
color: var(--text-color); /* Texte en couleur normale */
|
||||
}
|
||||
|
||||
.active { /* Page sélectionnée dans le panneau de navigation */
|
||||
color: var(--main-color); /* Couleur sélectionnée */
|
||||
}
|
||||
|
||||
/* ### Pied de page ### */
|
||||
footer { /* Bandeau de pied de page */
|
||||
margin-top: 50px; /* Défini une marge vers le haut */
|
||||
width: 100%; /* La taille de l'élément prend la longueur de la page */
|
||||
background-color: var(--overlay-color); /* Couleur de fond de l'élément */
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
footer div {/* Les quatres catégories du pied de page */
|
||||
display: inline-block; /* Met les éléments en ligne */
|
||||
vertical-align: center; /* Aligne au milieu verticalement */
|
||||
}
|
||||
|
||||
footer div img {/* Les images du pied de page => Logo + Discord */
|
||||
margin: 20px; /* Défini une marge de tout les cotés */
|
||||
}
|
||||
|
||||
footer p {/* "tout droits réservés" */
|
||||
text-align: right; /* aligne le texte a droite */
|
||||
}
|
||||
Binary file not shown.
@@ -0,0 +1,190 @@
|
||||
<!--
|
||||
> aPropos.html
|
||||
> @author Lilian Strub, Vabre Lucas
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GameLib | A Propos</title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/aPropos.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
|
||||
<header>
|
||||
<img src="" alt="Logo du site : GameLib" width="300px" id="logo">
|
||||
</header>
|
||||
|
||||
<!-- Menu de Navigation entre les pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a class="active" href="aPropos.html">A propos</a></li>
|
||||
<li class="li-night-mode"><img onclick="LightModeButton(false)" id="light-mode" ></li>
|
||||
<li class="li-maincolor">
|
||||
<img id="maincolor-mode">
|
||||
<ul class="color-picker">
|
||||
<p>Selectionnez une couleur</p>
|
||||
<li><div id="color-blue" alt="couleur bleu" onclick="SetMainColor('blue');"></div></li>
|
||||
<li><div id="color-green" alt="couleur verte" onclick="SetMainColor('green');"></div></li>
|
||||
<li><div id="color-purple" alt="couleur violette" onclick="SetMainColor('purple');"></div></li>
|
||||
<li><div id="color-red" alt="couleur rouge" onclick="SetMainColor('red');"></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Menu permettant d'aller d'un programmeur à l'autre rapidement -->
|
||||
|
||||
<div class="mini-menu">
|
||||
<p><u>Menu rapide:</u></p>
|
||||
<ul class="sous">
|
||||
<li><a href="#lucas-vabre">Vabre Lucàs</a></li>
|
||||
<li><a href="#lilian">Strub Lilian</a></li>
|
||||
<li><a href="#noe">Villeneuve Noé</a></li>
|
||||
<li><a href="#tristan">Nogaret Tristan</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<section id="lucas-vabre" class="section-left">
|
||||
<div>
|
||||
<img class="profil" alt="Image de Lucas Vabre" src="../img/staff/lucas-vabre.jpg">
|
||||
<div class="name-block">
|
||||
<h3 class="name">Lucas Vabre</h3>
|
||||
<h4 class="name-ph">/lyka vab<abbr title="U+0281">ʁ</abbr>/</h4>
|
||||
<h3>Web Master</h3>
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
<p>Enchanté <abbr title="U+1F44B">👋</abbr>! Je suis Lucàs Vabre, déjà 18 ans et élève de première année en DUT Informatique au sein de l'IUT de Rodez. J'ai eu l'honneur d'être désigné comme Web master (Chef de Projet si vous préférez) et pour commencer, j'ai découvert une équipe sympathique qui s'est investi et s'est prêté au jeu du site Web.
|
||||
Mon rôle était de soutenir les membres de mon équipe bien évidemment, mais aussi de m'attaquer aux éléments un peu plus avancé du Web pour limiter la perte de temps (sans prétention).</p>
|
||||
|
||||
<p>Au final, cette expérience m'a été très bénéfique concernant l'organisation et le travail en équipe, la communication est très importante pour la cohésion du groupe !</p>
|
||||
<p>Avec un peu plus de temps, j'aurais aimé rendre le site responsive (qui s'adapte sur téléphone et tablette) seulement cela n'a pas pu se faire.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="lilian" class="section-right">
|
||||
<div>
|
||||
<img class="profil" src="../img/staff/lilian-strub.jpg" >
|
||||
<div class="name-block">
|
||||
<h3 class="name">Lilian Strub</h3>
|
||||
<h4 class="name-ph">/lilj<abbr title="U+0251">ɑ̃</abbr>
|
||||
st<abbr title="U+0281">ʁ</abbr>yb/</h4>
|
||||
<h3>Developpeur</h3>
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
<p>Je suis Lilian Strub, 19 ans et élève de 1re année de DUT
|
||||
Informatique à l'IUT de Rodez. Pour le choix du sujet, on s'est
|
||||
rapidement orienté vers les jeux vidéo et on a directement
|
||||
pensé à créer notre propre site web de vente de jeux vidéo.
|
||||
De plus, on pouvait améliorer notre site comme l'on voulait ce
|
||||
qui nous permettait d'éviter de faire les mêmes erreurs que
|
||||
d'autres sites concurrents.</p>
|
||||
<p>La répartition des tâches s'est faite instantanément.
|
||||
Pour ma part, j'ai décidé de faire le formulaire car c'était
|
||||
une notion pas énormément abordée en cours et donc cela
|
||||
m'intéressé fortement. Aussi, mon but était de créer une belle
|
||||
interface fonctionnelle tout en respectant le cahier des charges.</p>
|
||||
<p>Ce projet m'a permis de mieux travailler en groupe via
|
||||
différentes réunions mises en place au préalable, de revoir
|
||||
des notions mal ou pas assez bien comprises en classe et
|
||||
d'effectuer une tâche plutôt conséquente en un temps réduit.
|
||||
Évidemment, j'ai rencontré plusieurs problèmes durant mon projet
|
||||
dont j'ai dû y faire face ce qui m'a entrainé à bien gérer des
|
||||
situations parfois complexes. C'était vraiment une superbe
|
||||
expérience que je revivrai avec joie !</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="noe" class="section-left">
|
||||
<div>
|
||||
<img class="profil" alt="Image de Noé Villeneuve" src="../img/staff/noe-villeneuve.jpeg">
|
||||
<div class="name-block">
|
||||
<h3 class="name">Noé Villeneuve</h3>
|
||||
<h4 class="name-ph">/n<abbr title="U+0254">ɔ</abbr>e viln<abbr title="U+153">œ</abbr>v/</h4>
|
||||
<h3>Web Developpeur</h3>
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
<p>Je suis Noé Villeneuve, élève de 1ère année de DUT Informatique à l'IUT
|
||||
de Rodez. Les jeux vidéos étant le centre d'intêret de tous les membres du projet,
|
||||
Nous n'avons pas eu trop de mal à trouver d'idée pour réaliser notre site.
|
||||
Nous avons ainsi décidé de nous orienter vers un site vitrine de vente de jeux vidéos.</p>
|
||||
<p>La première chose dont je me suis occupé est la redirection vers l'easter egg
|
||||
du site, car l'aspect ludique m'a attiré et m'as permis de développer
|
||||
tout en m'amusant. J'y ai consacré une grosse partie de mon temps.
|
||||
J'ai ainsi pu coder en html, en css et en js.</p>
|
||||
<p>Ce projet m'a permis d'apprendre énormément de mon propre côté, notamment en JavaScript.
|
||||
J'ai rencontré plusieurs problèmes lors de sa réalisation ce qui m'a permis de découvrir
|
||||
d'autres façons de faire et ainsi de les surmonter. J'ai également utiliser pour la
|
||||
première fois 2 outils de travail/organisation en groupe : Trello et Github qui sont
|
||||
très pratiques et ergonomiques. C'était une expérience agréable, très bonne entente
|
||||
dans le groupe, motivant pour la suite.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="tristan" class="section-right">
|
||||
<div>
|
||||
<img class="profil" alt="Image de Tristan Nogaret" src="../img/staff/Parfait.png">
|
||||
<div class="name-block">
|
||||
<h3 class="name">Tristan Nogaret</h3>
|
||||
<h4 class="name-ph">/t<abbr title="U+0281">ʁ</abbr>ist<abbr title="U+0251">ɑ̃</abbr> n<abbr title="U+0254">ɔ</abbr>ɡa<abbr title="U+0281">ʁ</abbr><abbr title="U+025B">ɛ</abbr>/</h4>
|
||||
<h3>Web Developpeur</h3>
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
<p>Je suis Tristan Nogaret, jeune étudiant de 17 ans, en première année informatique. On a décidé de faire ce site avec notre groupe, composé des 4 autres élèves présent sur cette page, pour le projet de fin de semestre demandé par notre établissement. On s’est orienté assez naturellement sur ce domaine parce que on aime tous les jeux vidéo dans ce groupe, cela nous est apparut évident qu’il fallait qu’on fasse dans ce domaine. On a traité autour de ça et on s’est dit qu'une plateforme de vente de jeu était le plus intéressant pour nous, car on allait toucher différents aspect de la programmation web.</p>
|
||||
|
||||
<p>Personnellement, il y a eu un aspect qui m’a attiré assez vite, c’était le retour client via un WebHook discord. C’est donc la première chose que j’ai décidé de faire. Je n’ai pas réussi rapidement, mais j’ai trouvé et compris ce qu’il fallait faire (avec l’aide du Web Master). Après cela j’ai rencontré différentes problématiques matérielles, mais j’ai quand même réussi à faire quelques choses. Par exemple la page d’abonnement ainsi que la page d’erreur. La page d’abonnement a été un peu plus complexe que la page d’erreur, mais les deux étaient un bon entraînement.</p>
|
||||
|
||||
<p>Grâce à ce projet j’ai pu toucher à l’HTML, au CSS et au JS, ce qui était mon but, de découvrir un peu plus dans ces différents langages. Je suis satisfait de ce que j’ai réussi à faire, même si mes objectifs n’étaient pas haut. J'ai également découvert Github et Trello, qyui nous ont beaucoup aidé dans notre organisation. Je me retrouve donc avec un peu plus de connaissance et d’expérience et j’ai également pu apprendre à travailler en groupe et à distance, donc pas une situation simple à appréhender. La création de ce site est donc totalement gagnante ! Et bien sûr merci à vous d'avoir consulté notre site !</p>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- pied de page -->
|
||||
<footer>
|
||||
<div style="vertical-align: top;">
|
||||
<a href="https://discord.gg/tkFzmH8ngr">
|
||||
<img id="discord" alt="logo Discord" src="" width="50px">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img id="footer-logo" alt="Logo du site : GameLib" src="" width="200px">
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A Propos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p>GameLib <abbr title="U+00A9">©</abbr> tout droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
LightModeOnLoad(false);
|
||||
MainColorOnLoad();
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,129 @@
|
||||
<!--
|
||||
> abonnement.html
|
||||
> @author Nogaret Tristan
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GameLib | Abonnement</title>
|
||||
<meta charset="utf-8">
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale et celle unique à la page) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/abonnement.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
<!-- Logo en haut de la page, centré -->
|
||||
<header>
|
||||
<img src="../img/icons/logo-night.svg" width="300px" id="logo">
|
||||
</header>
|
||||
|
||||
<!-- Menu de Navigation entre les pages commun à toute les pages -->
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a class="active" href="abonnement.html">Abonnement</a></li> <!-- Page en cours mise comme active -->
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A propos</a></li>
|
||||
|
||||
<!-- Portion pour modifier le style de la page (mode jour ou nuit et changement de couleur) -->
|
||||
|
||||
<li class="li-night-mode"><img onclick="LightModeButton(false)" id="light-mode" ></li>
|
||||
<li class="li-maincolor">
|
||||
<img id="maincolor-mode">
|
||||
<ul class="color-picker">
|
||||
<p>Selectionnez une couleur</p>
|
||||
<li><div id="color-blue" alt="couleur bleu" onclick="SetMainColor('blue');"></div></li>
|
||||
<li><div id="color-green" alt="couleur verte" onclick="SetMainColor('green');"></div></li>
|
||||
<li><div id="color-purple" alt="couleur violette" onclick="SetMainColor('purple');"></div></li>
|
||||
<li><div id="color-red" alt="couleur rouge" onclick="SetMainColor('red');"></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Annonce de l'offre -->
|
||||
<div class="div_a">
|
||||
|
||||
<!-- Tableau correspondant à la première case -->
|
||||
<table class="offre">
|
||||
<td class="titre">
|
||||
|
||||
<!-- Texte inscrit dans la case -->
|
||||
<h1>Offre spéciale</h1>
|
||||
<br>
|
||||
<h3>Cet abonnement vous propose plusieurs avantages, lié au site et au discord de notre site.</h3>
|
||||
<h3>Regardez-les ci-dessous.</h3>
|
||||
</td>
|
||||
</table>
|
||||
|
||||
<!-- Avantages proposés par l'offre -->
|
||||
<table class="avantages">
|
||||
<caption><h1>Les avantages :</h1></caption>
|
||||
<td class="td1"> <!-- Case de gauche -->
|
||||
<h2>1 jeu gratuit <u>chaque semaine</u></h2>
|
||||
</td>
|
||||
<td class="td2"> <!-- Case du milieu -->
|
||||
<h2>Précommande de jeu <u>prioritaire</u></h2>
|
||||
</td>
|
||||
<td class="td3"> <!-- Case de droite -->
|
||||
<h2><u>Rôle spécial</u> sur le Discord du site</h2>
|
||||
</td>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Prix et achat -->
|
||||
<table class="cout">
|
||||
|
||||
<!-- Case indquant le prix -->
|
||||
|
||||
<td class="prix">
|
||||
<h2>Prix :</h2>
|
||||
<h2>4.99€/Mois</h2>
|
||||
</td>
|
||||
</table>
|
||||
|
||||
<!-- Envoi du message après avoir cliqué sur "S'abonner" -->
|
||||
<button class="boutton" onclick="alert('Demande d\'abonnement reçu');">S'abonner</button>
|
||||
|
||||
<!-- Pied de page -->
|
||||
<footer>
|
||||
<div style="vertical-align: top;">
|
||||
<a href="https://discord.gg/tkFzmH8ngr">
|
||||
<img id="discord" alt="logo Discord" src="" width="50px">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img id="footer-logo" alt="Logo du site : GameLib" src="" width="200px">
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A Propos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p>GameLib <abbr title="U+00A9">©</abbr> tout droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Java script commun à toutes les pages (correspond au mode jour nuit) -->
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
LightModeOnLoad(false);
|
||||
MainColorOnLoad();
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!--
|
||||
> clicker.html
|
||||
> @author Vabre Lucas
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GameLib | Cookie Clicker</title>
|
||||
<meta charset="utf-8">
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale et celle unique à la page) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/clicker.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="icon" type="image/png" href="../img/icons/cookie.webp"/>
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
<img id="discord" style="display: none;">
|
||||
<img id="footer-logo" style="display: none;">
|
||||
|
||||
<!-- Logo en haut de la page, centré -->
|
||||
<header>
|
||||
<img src="" alt="Logo du site : GameLib" width="300px" id="logo">
|
||||
</header>
|
||||
|
||||
<!-- Menu de Navigation entre les pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A propos</a></li>
|
||||
<li class="li-night-mode"><img onclick="LightModeButton(false)" id="light-mode" ></li>
|
||||
<li class="li-maincolor"><img id="maincolor-mode"></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Image du cookie à cliquer -->
|
||||
<table id="cookie">
|
||||
<tr>
|
||||
<td>
|
||||
<div id="clicker" alt="Image d'un gros cookie" onclick="OneCookie(1)"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Affichage du score et du nombre de cookie par seconde -->
|
||||
<tr>
|
||||
<td>
|
||||
<h1 id="score">0</h1>
|
||||
<h2 id="persecond"></h2>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Partie tableau pour acheter les améliorations -->
|
||||
<table id="upgrades" style="text-align: center; border: 1px solid black;">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>Nom</td>
|
||||
<td>Prix</td>
|
||||
<td>Niveau</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="icon-1"><img src="../img/icons/cookie.webp" alt="boutton cookie" width="25px" height="25px" onclick="Buy(15,1)"></td>
|
||||
<td>Auto-click</td>
|
||||
<td id="price-1">15</td>
|
||||
<td id="level-1">0</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- Lien vers les pages de java script -->
|
||||
<script type="text/javascript" src="../js/clicker.js"></script>
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
LightModeOnLoad(false);
|
||||
Initialisation();
|
||||
MainColorOnLoad();
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!--
|
||||
> contact.html
|
||||
> @author Lilian Strub, Vabre Lucas, Nogaret Tristan
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GameLib | Contact</title>
|
||||
<meta charset="utf-8">
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale et celle unique à la page) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/contact.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
|
||||
<!-- Logo en haut de la page, centré -->
|
||||
<header>
|
||||
<img src="" alt="Logo du site : GameLib" width="300px" id="logo">
|
||||
</header>
|
||||
|
||||
<!-- Menu de Navigation entre les pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a class="active" href="contact.html">Contact</a></li> <!-- Page en cours mise comme active -->
|
||||
<li><a href="aPropos.html">A propos</a></li>
|
||||
|
||||
<!-- Portion pour modifier le style de la page (mode jour ou nuit et changement de couleur) -->
|
||||
<li class="li-night-mode"><img onclick="LightModeButton(false)" id="light-mode" ></li>
|
||||
<li class="li-maincolor">
|
||||
<img id="maincolor-mode">
|
||||
<ul class="color-picker">
|
||||
<p>Selectionnez une couleur</p>
|
||||
<li><div id="color-blue" alt="couleur bleu" onclick="SetMainColor('blue');"></div></li>
|
||||
<li><div id="color-green" alt="couleur verte" onclick="SetMainColor('green');"></div></li>
|
||||
<li><div id="color-purple" alt="couleur violette" onclick="SetMainColor('purple');"></div></li>
|
||||
<li><div id="color-red" alt="couleur rouge" onclick="SetMainColor('red');"></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Formulaire de Contact -->
|
||||
<form method="post">
|
||||
|
||||
<!-- Demande du genre de l'utilisateur avec une case à cocher -->
|
||||
<h1>Formulaire de contact</h1>
|
||||
<p><i>Complétez le formulaire. Les champs marqué par <em>*</em> sont <em>obligatoires</em>.</i></p>
|
||||
<label for="male">Homme</label>
|
||||
<input type="radio" id ="male" name="gender" value="male" checked>
|
||||
|
||||
<label for="female">Femme</label>
|
||||
<input type="radio" id ="female" name="gender" value="female"><br><br>
|
||||
|
||||
<!-- Demande des infos personnelles et du contact de l'utilisateur -->
|
||||
<label for="fname">Prénom : <em>*</em></label><br>
|
||||
<input type="text" id="fname" name="fname" required="" placeholder="Jean" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$"><br>
|
||||
|
||||
<label for="lname">Nom : <em>*</em></label><br>
|
||||
<input type="text" id="lname" name="lname" required="" placeholder="du Besson" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$"><br>
|
||||
|
||||
<label for="age">Age :</label><br>
|
||||
<input type="number" id="age" name="age" min="18" max="80" required="" pattern="[0-9]{2}" placeholder="18"><br>
|
||||
|
||||
<label for="email">Email : <em>*</em></label><br>
|
||||
<input type="email" id="email" name="email" placeholder="exemple@domaine.fr" required="" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}"><br>
|
||||
|
||||
<label for="telephone">Téléphone :</label ><br>
|
||||
<input type="tel" id="telephone" name="telephone" placeholder="01 23 45 67 89" required="" pattern="^(?:0|\(?\+33\)?\s?|0033\s?)[1-79](?:[\.\-\s]?\d\d){4}$"><br>
|
||||
|
||||
<!-- Message de l'utilisateur -->
|
||||
<label for="msg">Commentaire : <em>*</em></label>
|
||||
<br>
|
||||
<textarea id="msg" name="user_message" rows="4" cols="48" required=""></textarea>
|
||||
<br><br>
|
||||
<input type="checkbox" name="conditions" required=""> J'accepte les conditions d'utilisations
|
||||
<br><br>
|
||||
<input id="submit" class="boutton" type="button" value="Envoyer" onclick="Submit()"><br>
|
||||
</form>
|
||||
|
||||
<!-- Pied de page -->
|
||||
<footer>
|
||||
<div style="vertical-align: top;">
|
||||
<a href="https://discord.gg/tkFzmH8ngr">
|
||||
<img id="discord" alt="logo Discord" src="" width="50px">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img id="footer-logo" alt="Logo du site : GameLib" src="" width="200px">
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A Propos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p>GameLib <abbr title="U+00A9">©</abbr> tout droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
<!-- Import des Scripts -->
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/contact.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
/* Fonctions a executer au chargement de la page */
|
||||
window.onload = function () {
|
||||
/* Affichage du mode sombre */
|
||||
LightModeOnLoad(false); // False car ce n'est pas index.html
|
||||
MainColorOnLoad();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fonction intermédiaire entre le formulaire
|
||||
* de contact et la fonction SendContactMessage()
|
||||
* pour plus de lisibilité.
|
||||
*/
|
||||
function Submit() {
|
||||
|
||||
/* Récupère tout les éléments HTML nécessaire */
|
||||
let prenom = document.getElementById("fname").value;
|
||||
let nom = document.getElementById("lname").value;
|
||||
let age = document.getElementById("age").value;
|
||||
let email = document.getElementById("email").value;
|
||||
let tel = document.getElementById("telephone").value;
|
||||
let message = document.getElementById("msg").value;
|
||||
let button = document.getElementById('submit');
|
||||
|
||||
/* Execution de la fonction d'envoi */
|
||||
button.onclick = SendContactMessage(prenom, nom, age, email, tel, message);
|
||||
}
|
||||
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!--
|
||||
> dev.html
|
||||
> @author Vabre Lucas
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GameLib | Developper Panel</title>
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
<style type="text/css">
|
||||
td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
|
||||
<header>
|
||||
<img src="" alt="Logo du site : GameLib" width="300px" id="logo">
|
||||
</header>
|
||||
|
||||
<!-- Menu de Navigation entre les pages -->
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A propos</a></li>
|
||||
<li class="li-night-mode"><img onclick="LightModeButton(false)" id="light-mode" ></li>
|
||||
<li class="li-maincolor">
|
||||
<img id="maincolor-mode">
|
||||
<ul class="color-picker">
|
||||
<p>Selectionnez une couleur</p>
|
||||
<li><div id="color-blue" alt="couleur bleu" onclick="SetMainColor('blue');"></div></li>
|
||||
<li><div id="color-green" alt="couleur verte" onclick="SetMainColor('green');"></div></li>
|
||||
<li><div id="color-purple" alt="couleur violette" onclick="SetMainColor('purple');"></div></li>
|
||||
<li><div id="color-red" alt="couleur rouge" onclick="SetMainColor('red');"></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
<h1>Developper Panel</h1>
|
||||
<div>
|
||||
<table style="border-collapse: collapse;">
|
||||
<tbody id="game-list"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pied de page -->
|
||||
<footer>
|
||||
<div style="vertical-align: top;">
|
||||
<a href="https://discord.gg/tkFzmH8ngr">
|
||||
<img id="discord" alt="logo Discord" src="" width="50px">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img id="footer-logo" alt="Logo du site : GameLib" src="" width="200px">
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A Propos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p>GameLib <abbr title="U+00A9">©</abbr> tout droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="../js/jeu.js"></script>
|
||||
<script type="text/javascript" src="../js/data.js"></script>
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
ShowGameAll();
|
||||
LightModeOnLoad(false);
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!--
|
||||
> error.html
|
||||
> @author Nogaret Tristan
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>GameLib | Erreur</title>
|
||||
<meta charset="utf-8">
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale et celle unique à la page) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/error.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
|
||||
<!-- Annule l'affichage du menu cliquable -->
|
||||
<img id="logo" style="display: none;">
|
||||
<img id="light-mode" style="display: none;">
|
||||
<img id="maincolor-mode" style="display: none;">
|
||||
<img id="discord" style="display: none;">
|
||||
<img id="footer-logo" style="display: none;">
|
||||
|
||||
<!-- Affichage du message d'erreur et lien vers la page principale -->
|
||||
<h1 class="titre">Erreur 404</h1>
|
||||
<h2 class="sous-titre">La page que vous recherchez n'existe pas</h2>
|
||||
<p>Pour retourner sur la page principale cliquez <a href="../index.html">ici</a></p>
|
||||
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
LightModeOnLoad(false);
|
||||
MainColorOnLoad();
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+138
@@ -0,0 +1,138 @@
|
||||
<!--
|
||||
> index.html
|
||||
> @author Vabre Lucas
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title id="game-title-0">Game Lib | </title>
|
||||
<meta charset="utf-8">
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale et celle unique à la page) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/jeu.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set">
|
||||
|
||||
<img id="logo" style="display: none;">
|
||||
|
||||
<div class="container">
|
||||
<div class="jeu-nav">
|
||||
<!-- Retour vers la page principale -->
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil | </a></li>
|
||||
<li id="game-title-1"></li>
|
||||
|
||||
<!-- Portion pour modifier le style de la page (mode jour ou nuit et changement de couleur) -->
|
||||
|
||||
<li class="li-night-mode">
|
||||
<img onclick="LightModeButton(false)" id="light-mode" >
|
||||
</li>
|
||||
<li class="li-maincolor">
|
||||
<img id="maincolor-mode">
|
||||
<ul class="color-picker">
|
||||
<p>Selectionnez une couleur</p>
|
||||
<li><div id="color-blue" alt="couleur bleu" onclick="SetMainColor('blue');"></div></li>
|
||||
<li><div id="color-green" alt="couleur verte" onclick="SetMainColor('green');"></div></li>
|
||||
<li><div id="color-purple" alt="couleur violette" onclick="SetMainColor('purple');"></div></li>
|
||||
<li><div id="color-red" alt="couleur rouge" onclick="SetMainColor('red');"></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Corps de page -->
|
||||
<div class="jeu-part">
|
||||
<div id="picture-ingame">
|
||||
<iframe id="video" src="" frameborder="0" alt="vidéo de présentation du jeu" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="side-part">
|
||||
<div class="background-picture-cover">
|
||||
<div id="picture-logo" alt="logo du jeu"></div>
|
||||
<!-- <div id="picture-cover"></div> -->
|
||||
</div>
|
||||
|
||||
<div class="text-part">
|
||||
<h2 id="game-title-2">Game Title</h2>
|
||||
<p id="game-description">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
||||
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
||||
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
||||
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
||||
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
<div class="price-part">
|
||||
<p>
|
||||
<span id="price">Gratuit</span>
|
||||
</p>
|
||||
<input type="button" class="boutton" id="pay-button" name="" onclick="alert('Fonction non disponible pour le moment')" value="Acheter">
|
||||
<!-- <div>
|
||||
<span>Acheter</span>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plus d'infos -->
|
||||
<div class="plus-info">
|
||||
<h3>Plus d'informations</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Développeurs</th>
|
||||
<th>Editeurs</th>
|
||||
<th>Classification</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td id="dev">Nom developpeur</td>
|
||||
<td id="editor">Nom editeur</td>
|
||||
<td id="pegi">Pegi 12</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- pied de page -->
|
||||
<footer>
|
||||
<div style="vertical-align: top;">
|
||||
<a href="https://discord.gg/tkFzmH8ngr">
|
||||
<img id="discord" alt="logo Discord" src="" width="50px">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img id="footer-logo" alt="Logo du site : GameLib" src="" width="200px">
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A Propos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p>GameLib <abbr title="U+00A9">©</abbr> tout droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script type="text/javascript" src="../js/data.js"></script>
|
||||
<script type="text/javascript" src="../js/jeu.js"></script>
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
|
||||
<!-- Fonctions exécutés au chargement de la page -->
|
||||
<script type="text/javascript">
|
||||
|
||||
/* Au démarrage de la page */
|
||||
window.onload = function() {
|
||||
MainColorOnLoad();
|
||||
PageJeu(); // Affiche les données de la page a partir du data.js
|
||||
LightModeOnLoad(false); // Met a jour le mode sombre
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
<!--
|
||||
> index.html
|
||||
> @author Vabre Lucas
|
||||
-->
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Game Lib | Liste des Jeux</title>
|
||||
<meta charset="utf-8">
|
||||
<!-- lien vers les différentes pages css créée (les 3 communes à chaque page principale et celle unique à la page) -->
|
||||
<link rel="stylesheet" type="text/css" href="../css/lightmode.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/maincolor.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="../css/listeJeux.css">
|
||||
</head>
|
||||
<body class="" id="body">
|
||||
<div class="" id="color-set"> <!-- Pour l'affichage des couleurs -->
|
||||
|
||||
<!-- Logo en haut de la page, centré -->
|
||||
<header>
|
||||
<img src="" alt="Logo du site : GameLib" width="300px" id="logo">
|
||||
</header>
|
||||
|
||||
<!-- Menu de Navigation entre les pages commun à toute les pages -->
|
||||
<div class="container">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a class="active" href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A propos</a></li>
|
||||
|
||||
<!-- Portion pour modifier le style de la page (mode jour ou nuit et changement de couleur) -->
|
||||
<li class="li-night-mode"><img onclick="LightModeButton(false)" id="light-mode" ></li>
|
||||
<li class="li-maincolor">
|
||||
<img id="maincolor-mode">
|
||||
<ul class="color-picker">
|
||||
<p>Selectionnez une couleur</p>
|
||||
<li><div id="color-blue" alt="couleur bleu" onclick="SetMainColor('blue');"></div></li>
|
||||
<li><div id="color-green" alt="couleur verte" onclick="SetMainColor('green');"></div></li>
|
||||
<li><div id="color-purple" alt="couleur violette" onclick="SetMainColor('purple');"></div></li>
|
||||
<li><div id="color-red" alt="couleur rouge" onclick="SetMainColor('red');"></div></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- Affichage des différents jeux sur la page -->
|
||||
<table style="margin: 20px auto 0px auto; width: 100%">
|
||||
<caption style="font-size: 1.5em; text-align: left; margin-bottom: 10px;">Liste des jeux</caption>
|
||||
|
||||
<thead style="text-align: center; background-color: var(--overlay-color);">
|
||||
<th>N°</th>
|
||||
<th>Image</th>
|
||||
<th>Titre</th>
|
||||
<th>Developpeur</th>
|
||||
<th>Prix</th>
|
||||
</thead>
|
||||
|
||||
<tbody id="test">
|
||||
<!-- Liste des Jeux -->
|
||||
</tbody>
|
||||
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="5">
|
||||
<p style="text-align: center;">Voilà tout notre stock pour le moment ! Reviens plus tard pour de nouveaux ajouts</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- pied de page -->
|
||||
<footer>
|
||||
<div style="vertical-align: top;">
|
||||
<a href="https://discord.gg/tkFzmH8ngr">
|
||||
<img id="discord" alt="logo Discord" src="" width="50px">
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<img id="footer-logo" alt="Logo du site : GameLib" src="" width="200px">
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="../index.html">Accueil</a></li>
|
||||
<li><a href="listeJeux.html">Jeux</a></li>
|
||||
<li><a href="abonnement.html">Abonnement</a></li>
|
||||
<li><a href="contact.html">Contact</a></li>
|
||||
<li><a href="aPropos.html">A Propos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<p>GameLib <abbr title="U+00A9">©</abbr> tout droits réservés</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Lien vers les pages java script -->
|
||||
<script type="text/javascript" src="../js/lightmode.js"></script>
|
||||
<script type="text/javascript" src="../js/data.js"></script>
|
||||
<script type="text/javascript" src="../js/jeu.js"></script>
|
||||
<script type="text/javascript" src="../js/maincolor.js"></script>
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
LightModeOnLoad(false);
|
||||
MainColorOnLoad();
|
||||
ShowGameList();
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Vendored
BIN
Binary file not shown.
Vendored
BIN
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 339 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 438 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 449 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 610 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 545 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 345 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1007 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 349 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 81 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 992 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 224 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 189 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 466 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#2c3e50" viewBox="0 0 245 240"><path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="#ecf0f1" viewBox="0 0 245 240"><path d="M104.4 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zM140.9 103.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/><path d="M189.5 20h-134C44.2 20 35 29.2 35 40.6v135.2c0 11.4 9.2 20.6 20.5 20.6h113.4l-5.3-18.5 12.8 11.9 12.1 11.2 21.5 19V40.6c0-11.4-9.2-20.6-20.5-20.6zm-38.6 130.6s-3.6-4.3-6.6-8.1c13.1-3.7 18.1-11.9 18.1-11.9-4.1 2.7-8 4.6-11.5 5.9-5 2.1-9.8 3.5-14.5 4.3-9.6 1.8-18.4 1.3-25.9-.1-5.7-1.1-10.6-2.7-14.7-4.3-2.3-.9-4.8-2-7.3-3.4-.3-.2-.6-.3-.9-.5-.2-.1-.3-.2-.4-.3-1.8-1-2.8-1.7-2.8-1.7s4.8 8 17.5 11.8c-3 3.8-6.7 8.3-6.7 8.3-22.1-.7-30.5-15.2-30.5-15.2 0-32.2 14.4-58.3 14.4-58.3 14.4-10.8 28.1-10.5 28.1-10.5l1 1.2c-18 5.2-26.3 13.1-26.3 13.1s2.2-1.2 5.9-2.9c10.7-4.7 19.2-6 22.7-6.3.6-.1 1.1-.2 1.7-.2 6.1-.8 13-1 20.2-.2 9.5 1.1 19.7 3.9 30.1 9.6 0 0-7.9-7.5-24.9-12.7l1.4-1.6s13.7-.3 28.1 10.5c0 0 14.4 26.1 14.4 58.3 0 0-8.5 14.5-30.6 15.2z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
|
||||
fill="#2c3e50" stroke="none">
|
||||
<path d="M6033 12790 c-409 -27 -913 -104 -973 -149 -61 -44 -60 -36 -60 -519
|
||||
l-1 -443 -22 -9 c-12 -4 -98 -31 -192 -60 -190 -58 -383 -128 -555 -203 -136
|
||||
-58 -420 -199 -505 -250 l-60 -36 -310 308 c-170 170 -320 314 -332 320 -30
|
||||
15 -97 14 -136 -3 -41 -17 -256 -171 -412 -295 -394 -312 -817 -735 -1126
|
||||
-1126 -186 -235 -297 -397 -309 -450 -18 -78 -10 -88 325 -425 l314 -315 -36
|
||||
-60 c-51 -86 -192 -370 -250 -505 -75 -172 -145 -365 -203 -555 -29 -93 -56
|
||||
-180 -60 -192 l-9 -22 -443 -1 c-485 0 -474 1 -521 -62 -34 -46 -98 -426 -134
|
||||
-793 -24 -252 -24 -838 0 -1090 36 -367 100 -748 135 -794 46 -62 36 -61 520
|
||||
-61 l443 -1 9 -22 c4 -12 31 -98 60 -192 58 -190 128 -383 203 -555 58 -136
|
||||
199 -420 250 -505 l36 -60 -308 -310 c-170 -170 -314 -320 -320 -332 -15 -30
|
||||
-14 -97 3 -136 17 -41 171 -256 295 -412 312 -394 735 -817 1126 -1126 235
|
||||
-186 397 -297 450 -309 78 -18 88 -10 425 325 l315 314 60 -36 c86 -51 370
|
||||
-192 505 -250 172 -75 365 -145 555 -203 94 -29 180 -56 192 -60 l22 -9 1
|
||||
-443 c0 -485 -1 -474 62 -521 46 -34 426 -98 793 -134 252 -24 838 -24 1090 0
|
||||
367 36 748 100 794 135 62 46 61 36 61 520 l1 443 22 9 c12 4 99 31 192 60
|
||||
190 58 383 128 555 203 136 58 420 199 505 250 l60 36 310 -308 c171 -170 320
|
||||
-314 332 -320 30 -15 97 -14 136 3 41 17 256 171 412 295 394 312 817 735
|
||||
1126 1126 186 235 297 397 309 450 18 78 10 88 -325 425 l-314 315 36 60 c51
|
||||
86 192 370 250 505 75 172 145 365 203 555 29 94 56 180 60 192 l9 22 443 1
|
||||
c485 0 474 -1 521 62 34 46 98 426 134 793 24 252 24 838 0 1090 -36 367 -100
|
||||
748 -135 794 -46 62 -36 61 -520 61 l-443 1 -9 22 c-4 12 -31 99 -60 192 -58
|
||||
190 -128 383 -203 555 -58 136 -199 420 -250 505 l-36 60 308 310 c170 171
|
||||
314 320 320 332 15 30 14 97 -3 136 -17 41 -171 256 -295 412 -312 394 -735
|
||||
817 -1126 1126 -235 186 -397 297 -450 309 -78 18 -88 10 -425 -325 l-315
|
||||
-314 -60 36 c-86 51 -370 192 -505 250 -172 75 -365 145 -555 203 -93 29 -180
|
||||
56 -192 60 l-22 9 -1 443 c0 485 1 474 -62 521 -46 34 -432 99 -783 132 -200
|
||||
19 -733 27 -922 15z m660 -3441 c1017 -92 1935 -737 2383 -1674 170 -355 261
|
||||
-715 283 -1118 41 -739 -194 -1457 -668 -2037 -471 -578 -1145 -953 -1901
|
||||
-1060 -208 -29 -572 -29 -780 0 -660 93 -1242 382 -1705 845 -463 463 -752
|
||||
1045 -845 1705 -29 208 -29 572 0 780 107 756 482 1430 1060 1901 619 505
|
||||
1364 731 2173 658z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,44 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
|
||||
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
|
||||
width="1280.000000pt" height="1280.000000pt" viewBox="0 0 1280.000000 1280.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
<metadata>
|
||||
Created by potrace 1.15, written by Peter Selinger 2001-2017
|
||||
</metadata>
|
||||
<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
|
||||
fill="#ecf0f1" stroke="none">
|
||||
<path d="M6033 12790 c-409 -27 -913 -104 -973 -149 -61 -44 -60 -36 -60 -519
|
||||
l-1 -443 -22 -9 c-12 -4 -98 -31 -192 -60 -190 -58 -383 -128 -555 -203 -136
|
||||
-58 -420 -199 -505 -250 l-60 -36 -310 308 c-170 170 -320 314 -332 320 -30
|
||||
15 -97 14 -136 -3 -41 -17 -256 -171 -412 -295 -394 -312 -817 -735 -1126
|
||||
-1126 -186 -235 -297 -397 -309 -450 -18 -78 -10 -88 325 -425 l314 -315 -36
|
||||
-60 c-51 -86 -192 -370 -250 -505 -75 -172 -145 -365 -203 -555 -29 -93 -56
|
||||
-180 -60 -192 l-9 -22 -443 -1 c-485 0 -474 1 -521 -62 -34 -46 -98 -426 -134
|
||||
-793 -24 -252 -24 -838 0 -1090 36 -367 100 -748 135 -794 46 -62 36 -61 520
|
||||
-61 l443 -1 9 -22 c4 -12 31 -98 60 -192 58 -190 128 -383 203 -555 58 -136
|
||||
199 -420 250 -505 l36 -60 -308 -310 c-170 -170 -314 -320 -320 -332 -15 -30
|
||||
-14 -97 3 -136 17 -41 171 -256 295 -412 312 -394 735 -817 1126 -1126 235
|
||||
-186 397 -297 450 -309 78 -18 88 -10 425 325 l315 314 60 -36 c86 -51 370
|
||||
-192 505 -250 172 -75 365 -145 555 -203 94 -29 180 -56 192 -60 l22 -9 1
|
||||
-443 c0 -485 -1 -474 62 -521 46 -34 426 -98 793 -134 252 -24 838 -24 1090 0
|
||||
367 36 748 100 794 135 62 46 61 36 61 520 l1 443 22 9 c12 4 99 31 192 60
|
||||
190 58 383 128 555 203 136 58 420 199 505 250 l60 36 310 -308 c171 -170 320
|
||||
-314 332 -320 30 -15 97 -14 136 3 41 17 256 171 412 295 394 312 817 735
|
||||
1126 1126 186 235 297 397 309 450 18 78 10 88 -325 425 l-314 315 36 60 c51
|
||||
86 192 370 250 505 75 172 145 365 203 555 29 94 56 180 60 192 l9 22 443 1
|
||||
c485 0 474 -1 521 62 34 46 98 426 134 793 24 252 24 838 0 1090 -36 367 -100
|
||||
748 -135 794 -46 62 -36 61 -520 61 l-443 1 -9 22 c-4 12 -31 99 -60 192 -58
|
||||
190 -128 383 -203 555 -58 136 -199 420 -250 505 l-36 60 308 310 c170 171
|
||||
314 320 320 332 15 30 14 97 -3 136 -17 41 -171 256 -295 412 -312 394 -735
|
||||
817 -1126 1126 -235 186 -397 297 -450 309 -78 18 -88 10 -425 -325 l-315
|
||||
-314 -60 36 c-86 51 -370 192 -505 250 -172 75 -365 145 -555 203 -93 29 -180
|
||||
56 -192 60 l-22 9 -1 443 c0 485 1 474 -62 521 -46 34 -432 99 -783 132 -200
|
||||
19 -733 27 -922 15z m660 -3441 c1017 -92 1935 -737 2383 -1674 170 -355 261
|
||||
-715 283 -1118 41 -739 -194 -1457 -668 -2037 -471 -578 -1145 -953 -1901
|
||||
-1060 -208 -29 -572 -29 -780 0 -660 93 -1242 382 -1705 845 -463 463 -752
|
||||
1045 -845 1705 -29 208 -29 572 0 780 107 756 482 1430 1060 1901 619 505
|
||||
1364 731 2173 658z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
@@ -0,0 +1,23 @@
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2233.41 1007.47">
|
||||
<defs>
|
||||
<style>.cls-1{fill:#2c3e50;}</style>
|
||||
</defs>
|
||||
|
||||
<!-- Partie GAME -->
|
||||
<!-- Lettre G -->
|
||||
<path class="cls-1" d="M567.71,597.38q-55.94,0-104-21.06a267.4,267.4,0,0,1-45.06-24,236.3,236.3,0,0,1-39.81-33.22A279.6,279.6,0,0,1,346,479.62a236,236,0,0,1-24.33-45.4,267.14,267.14,0,0,1,0-207.88A236.79,236.79,0,0,1,346,181a280.73,280.73,0,0,1,32.89-39.47,237.25,237.25,0,0,1,39.81-33.22,268.85,268.85,0,0,1,45.06-24q48-21,104-21.06a275.74,275.74,0,0,1,67.09,8.23,241.64,241.64,0,0,1,62.5,25.32A261.06,261.06,0,0,1,792,184.9l-93.41,61.18A154.5,154.5,0,0,0,567.71,175a151.56,151.56,0,0,0-60.53,12.17,155.2,155.2,0,0,0-82.56,82.56,156.71,156.71,0,0,0,0,121.05,155.2,155.2,0,0,0,82.56,82.56,151.39,151.39,0,0,0,60.53,12.17q39.46,0,72.36-17.11A150.17,150.17,0,0,0,694,421.73H551.92V309.89H836.77q-.67,17.76-1,29.93a155.4,155.4,0,0,1-1.65,20.07q-1.33,9.21-2.63,15.13a267.31,267.31,0,0,1-90.13,158.54,251.77,251.77,0,0,1-80.92,47.7A271.76,271.76,0,0,1,567.71,597.38Z" transform="translate(-300.62 -63.19)"/>
|
||||
<!-- Lettre A -->
|
||||
<path class="cls-1" d="M1007.81,476.33,960.44,584.88H838.74L1059.12,76.35h116.45l221,508.53H1274.25l-46.72-108.55ZM1117,223.71l-61.19,140.78h123Z" transform="translate(-300.62 -63.19)"/>
|
||||
<!-- Lettre M -->
|
||||
<path class="cls-1" d="M2012.35,76.35,2142,584.88h-115.8L1945.91,269.1,1834.07,584.88H1722.24L1610.4,271.08l-78.29,313.8H1416.33L1544,76.35h115.78l118.42,331.56L1895.92,76.35h116.43Z" transform="translate(-300.62 -63.19)"/>
|
||||
<!-- Lettre E -->
|
||||
<path class="cls-1" d="M2320.89,188.19v75.65h205.9V375.68h-205.9V473H2534V584.88h-325V76.35h325V188.19Z" transform="translate(-300.62 -63.19)"/>
|
||||
|
||||
<!-- Partie "LIB" -->
|
||||
<!-- Lettre L -->
|
||||
<path class="cls-1" d="M838.75,1070.66V663.84h26.31v380.51h203.15v26.31Z" transform="translate(-300.62 -63.19)"/>
|
||||
<!-- Lettre I -->
|
||||
<path class="cls-1" d="M1433.9,1070.66V663.84h26.32v406.82Z" transform="translate(-300.62 -63.19)"/>
|
||||
<!-- Lettre B -->
|
||||
<path class="cls-1" d="M2013.82,1070.62H1834.88V663.8h150q37.89,0,66.31,13.68a108.15,108.15,0,0,1,18.43,11.32,79.93,79.93,0,0,1,17.1,17.89,92.92,92.92,0,0,1,12.36,25.79q4.74,15,4.74,35,0,17.35-3.94,30.53a98.74,98.74,0,0,1-10.27,23.41,80.42,80.42,0,0,1-14.47,17.64,119.24,119.24,0,0,1-16.59,12.63q24.21,7.37,41.58,20,40,30.52,40,83.69,0,26.32-9.47,47.36a101.21,101.21,0,0,1-27.37,36.83,113,113,0,0,1-40,23.17A152.59,152.59,0,0,1,2013.82,1070.62ZM1861.19,843.26h135.25c.71,0,5.35-.6,14-1.84s18-4.29,28.15-9.21q38.94-18.94,39-64.73,0-25.26-9.74-40.53a69.48,69.48,0,0,0-23.94-23.42,89.75,89.75,0,0,0-30.27-10.79,180,180,0,0,0-28.68-2.63H1861.19Zm0,201h152.63a119.63,119.63,0,0,0,40.52-6.57,93.72,93.72,0,0,0,31.57-18.43,83.82,83.82,0,0,0,20.53-28.15,86,86,0,0,0,7.37-35.78q0-39.48-29.48-62.63-15.27-11.58-37.62-17.37t-50.27-5.8H1861.19Z" transform="translate(-300.62 -63.19)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2233.41 1007.47"><defs><style>.cls-1{fill:#ecf0f1;}</style></defs><path class="cls-1" d="M567.71,597.38q-55.94,0-104-21.06a267.4,267.4,0,0,1-45.06-24,236.3,236.3,0,0,1-39.81-33.22A279.6,279.6,0,0,1,346,479.62a236,236,0,0,1-24.33-45.4,267.14,267.14,0,0,1,0-207.88A236.79,236.79,0,0,1,346,181a280.73,280.73,0,0,1,32.89-39.47,237.25,237.25,0,0,1,39.81-33.22,268.85,268.85,0,0,1,45.06-24q48-21,104-21.06a275.74,275.74,0,0,1,67.09,8.23,241.64,241.64,0,0,1,62.5,25.32A261.06,261.06,0,0,1,792,184.9l-93.41,61.18A154.5,154.5,0,0,0,567.71,175a151.56,151.56,0,0,0-60.53,12.17,155.2,155.2,0,0,0-82.56,82.56,156.71,156.71,0,0,0,0,121.05,155.2,155.2,0,0,0,82.56,82.56,151.39,151.39,0,0,0,60.53,12.17q39.46,0,72.36-17.11A150.17,150.17,0,0,0,694,421.73H551.92V309.89H836.77q-.67,17.76-1,29.93a155.4,155.4,0,0,1-1.65,20.07q-1.33,9.21-2.63,15.13a267.31,267.31,0,0,1-90.13,158.54,251.77,251.77,0,0,1-80.92,47.7A271.76,271.76,0,0,1,567.71,597.38Z" transform="translate(-300.62 -63.19)"/><path class="cls-1" d="M1007.81,476.33,960.44,584.88H838.74L1059.12,76.35h116.45l221,508.53H1274.25l-46.72-108.55ZM1117,223.71l-61.19,140.78h123Z" transform="translate(-300.62 -63.19)"/><path class="cls-1" d="M2012.35,76.35,2142,584.88h-115.8L1945.91,269.1,1834.07,584.88H1722.24L1610.4,271.08l-78.29,313.8H1416.33L1544,76.35h115.78l118.42,331.56L1895.92,76.35h116.43Z" transform="translate(-300.62 -63.19)"/><path class="cls-1" d="M2320.89,188.19v75.65h205.9V375.68h-205.9V473H2534V584.88h-325V76.35h325V188.19Z" transform="translate(-300.62 -63.19)"/><path class="cls-1" d="M838.75,1070.66V663.84h26.31v380.51h203.15v26.31Z" transform="translate(-300.62 -63.19)"/><path class="cls-1" d="M1433.9,1070.66V663.84h26.32v406.82Z" transform="translate(-300.62 -63.19)"/><path class="cls-1" d="M2013.82,1070.62H1834.88V663.8h150q37.89,0,66.31,13.68a108.15,108.15,0,0,1,18.43,11.32,79.93,79.93,0,0,1,17.1,17.89,92.92,92.92,0,0,1,12.36,25.79q4.74,15,4.74,35,0,17.35-3.94,30.53a98.74,98.74,0,0,1-10.27,23.41,80.42,80.42,0,0,1-14.47,17.64,119.24,119.24,0,0,1-16.59,12.63q24.21,7.37,41.58,20,40,30.52,40,83.69,0,26.32-9.47,47.36a101.21,101.21,0,0,1-27.37,36.83,113,113,0,0,1-40,23.17A152.59,152.59,0,0,1,2013.82,1070.62ZM1861.19,843.26h135.25c.71,0,5.35-.6,14-1.84s18-4.29,28.15-9.21q38.94-18.94,39-64.73,0-25.26-9.74-40.53a69.48,69.48,0,0,0-23.94-23.42,89.75,89.75,0,0,0-30.27-10.79,180,180,0,0,0-28.68-2.63H1861.19Zm0,201h152.63a119.63,119.63,0,0,0,40.52-6.57,93.72,93.72,0,0,0,31.57-18.43,83.82,83.82,0,0,0,20.53-28.15,86,86,0,0,0,7.37-35.78q0-39.48-29.48-62.63-15.27-11.58-37.62-17.37t-50.27-5.8H1861.19Z" transform="translate(-300.62 -63.19)"/></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user