Reupload v1.0

LucasVbr · Oct 10, 2022 · 9272b78 · 9272b78
commit 9272b78
Show file tree

Hide file tree

Showing 148 changed files with 3,183 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,41 @@
+# GameLIB
+
+[![forthebadge](./img/readmeData/website.svg)](https://lucasvbr.github.io/game-lib/)
+[![forthebadge](./img/readmeData/tutored.svg)](https://forthebadge.com)
+
+[![forthebadge](https://forthebadge.com/images/badges/uses-html.svg)](https://forthebadge.com)
+[![forthebadge](https://forthebadge.com/images/badges/uses-css.svg)](https://forthebadge.com)
+[![forthebadge](https://forthebadge.com/images/badges/uses-js.svg)](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/)
+
+![Preview Image](/img/readmeData/preview.png)
+
+
+## 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
diff --git a/css/aPropos.css b/css/aPropos.css
@@ -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 */
+}
diff --git a/css/abonnement.css b/css/abonnement.css
@@ -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) */
+}
diff --git a/css/card.css b/css/card.css
@@ -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 */
+}
diff --git a/css/clicker.css b/css/clicker.css
@@ -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 */
+}