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,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>
|
||||
Reference in New Issue
Block a user