-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
75 lines (65 loc) · 2.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<title>M4103C-Projet-JS - Recherche d'offres sur des jeux</title>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/x-icon" href="sale.ico">
<link rel="stylesheet" href="styles.css">
</head>
<body >
<header>
<h1>Recherche d'offres sur des jeux</h1>
<p id="explication">Cette page permet de rechercher des offres sur des jeux via l'API publique de <a href="https://apidocs.cheapshark.com/" target="_blank">cheapshark.com</a>.<br>
Saisissez le nom d'un jeu pour rechercher les promotions sur steam des jeux correspondants, et enregistrez vos recherches favorites pour les retrouver facilement. Vous pouvez ensuite cliquer sur les jeux
pour voir le détails des sites sur lesquels il est vendu, ainsi que les prix sur chaque site permettant ainsi de consulter d'autres prix que ceux de steam.<br>
Vous pouvez effectuer des recherches pré-définies en cliquant sur les boutons correspondants.</p>
</header>
<hr>
<main id="conteneur">
<!-- Section de recherche (avec résultats) -->
<section id="section-recherche">
<div id="bloc-recherche">
<!-- Champ de recherche -->
<input type="text" placeholder="Que cherchez-vous ?" />
<!-- Boutons -->
<button id="btn-lancer-recherche" type="button"
class="btn_clicable" title="Lancer la recherche">
<!-- Icone provenant de flaticon.com -->
<img src="images/loupe.svg" alt="Loupe pour recherche" width=22 >
</button>
<button id="btn-favoris" type="button" disabled
title="Ajouter la recherche aux favoris">
<!-- Icone étoile vide => Recherche pas en favoris -->
<img src="images/etoile-vide.svg" alt="Etoile vide" width=22 >
<!-- Icone étoile pleine => Recherche en favoris -->
<!-- <img src="images/etoile-pleine.svg" alt="Etoile pleine" width=22 > -->
<!-- (Icones provenant de flaticon.com) -->
</button>
</div>
<div class="aide-recherche">
<p>Recherches pré-définies :</p>
<button onclick="recherche('','onSale=1&sortBy=Release');">Jeux les plus récents</button>
<button onclick="recherche('','onSale=1&sortBy=Metacritic');">Meilleurs notes</button>
</div>
<!-- Résultats de recherche -->
<div id="bloc-gif-attente">
<img id="loading" src='images/attente-ajax.gif' alt="GIF Attente de résultats" width=50 />
</div>
<div id="bloc-resultats">
</div>
</section>
<!-- Section de séparation (avec la bordure verte) -->
<section id="section-separation"></section>
<!-- Section des recherches favorites -->
<section id="section-favoris">
<h2>Recherches favorites</h2>
<p>Cliquer sur une recherche favorite ci-dessus pour relancer celle-ci :</p>
<ul id="liste-favoris">
</ul>
<div id="noRes"></div>
</section>
</main>
<script src="jeu.js"></script>
<script src="main.js"></script>
</body>
</html>