forked from HedyKatherine/feed-the-animals
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
123 lines (123 loc) · 5.95 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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html dir="ltr" lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://kit.fontawesome.com/e206f53c0e.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bubblegum+Sans&family=Creepster&family=Fontdiner+Swanky&family=Jua&family=Luckiest+Guy&family=Nanum+Gothic&family=Rum+Raisin&family=Sniglet:wght@400;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/countdown.css">
<title>feed the animals</title>
</head>
<body>
<section class="container">
<div class="row">
<div class="col-md-12 d-flex justify-content-center">
<h1 class="mb-4 mx-auto">Kitty the cat</h1>
</div>
</div>
</section>
<!-- la section qui contient le compteur, image et les barres de progression -->
<section class="container-fluid">
<div class="row d-flex justify-content-between">
<div id="wrapper" class="col-md-2">
<div id="showCount"></div>
<button type="button" id="btn" class="btn-lg p-3 rounded-circle btn-danger font-weight-bold btnDisable" onclick="hideText()">PLAY</button>
<button type="button" id="btn_reset" class="btnDisable" hidden>RESET</button>
</div>
<!-- ici on peux garder de l'espace pour afficher nos petits messages rigolos et le score -->
<div class="col-md-2 bubble-speech d-flex justify-content-center">
<p class="mt-3 text-center" id="moodText">Listen to me!</p>
</div>
<div class="col-md-3 d-flex justify-content-center">
<div id="image" class="mt-5">
<div class="col-md-12 col-lg-6 col-xl-4">
<img id="image1" src="assets/img/image1.png" alt="un chaton" width="300">
<p id="score" hidden>0</p>
</div>
</div>
<!-- cette div est cachée (display none) pour eviter le scroll-->
<div id="place_for_messages">
<p id="progressbar-score"></p>
<p id="weightbar-score"></p>
<p id="statusbar-score"></p>
</div>
</div>
<div class="col-md-3">
<!-- ici il y a notre bar de progression -->
<!-- la bar qui montre l'humeur -->
<p class="mt-1">Humeur: </p>
<div id="myProgress">
<div class="text-center text-uppercase font-weight-bold" id="myBar"></div>
</div>
<!-- la bar qui montre le poids -->
<p class="mt-4">Poids: </p>
<div class="" id="weightProgressBar">
<div class="text-center text-uppercase font-weight-bold" id="weightBar"></div>
</div>
<!-- la bar qui montre le status -->
<p class="mt-4">Status: </p>
<div id="statusProgressBar">
<div class="text-center text-uppercase font-weight-bold" id="statusBar"></div>
</div>
</div>
<div class="col-md-2">
<!-- ici on met la score global intéractive -->
<div id="star_score" class="col-md-12">
<p id="yourGlobalScore"></p>
<p id="yourScore" class="mx-auto text-center">Your Global Score</p>
<div id="yourSumScore"></div>
<p id="progressSumScore"></p>
<p id="weightSumScore" hidden></p>
</div>
</div>
</div>
</div>
</section>
<!-- ici on affiche les icons permettant de jouer et gagner les points: les deux sections: Nourriture et Activités -->
<section id="choose_food" class="container-fluid">
<div class="row d-flex justify-content-center">
<div id="feedThem" class="some food col-md-12 d-flex justify-content-between">
<i class="fas fa-5x fa-ice-cream" onclick="moodReaction('happy')"></i>
<i class="fas fa-5x fa-pepper-hot" onclick="moodReaction('furious')"></i>
<i class="fas fa-5x fa-fish" onclick="moodReaction('excited')"></i>
<i class="fas fa-5x fa-carrot" onclick="moodReaction('moody')"></i>
<i class="fas fa-5x fa-pizza-slice" onclick="moodReaction('overexcited')"></i>
</div>
</div>
</section>
<section id="game_rules" class="container-fluid">
<div class="row">
<div class="col-md-12 d-flex flex-column justify-content-center m-5">
<p class="align-items-center mt-1">Vous avez 30 secondes pour équilibrer : l'humeur, le poids et la satiété du chat</p>
<ol>
<li>Appuyez sur start</li>
<li>Choisissez parmi cinq aliments et cinq activités</li>
<li>Un modal affichera votre résultat final</li>
<li>Rafraîchissez la page pour recommencer</li>
</ol>
</div>
</div>
</section>
<section id="choose_activity" class="container-fluid">
<div class="row d-flex justify-content-center">
<div id="playWithThem" class="some play col-md-12 d-flex justify-content-between">
<i class="fas fa-5x fa-baseball-ball" onclick="changeCatWeight('light')"></i>
<i class="fas fa-5x fa-bed" onclick="changeCatWeight('heavy')"></i>
<i class="fas fa-5x fa-music" onclick="changeCatWeight('medium')"></i>
<i class="fas fa-5x fa-bath" onclick="changeCatWeight('neutral')"></i>
<i class="fas fa-5x fa-tv" onclick="changeCatWeight('chonk')"></i>
</div>
</div>
</section>
<audio id="brokenPlate" src="assets/sounds/broken-plate.wav"></audio>
<audio id="growl" src="assets/sounds/growl.wav"></audio>
<audio id="meow" src="assets/sounds/meow.wav"></audio>
<audio id="purr" src="assets/sounds/purr.wav"></audio>
<audio id="roar" src="assets/sounds/roar.wav"></audio>
<script src="assets/js/main.js"></script>
</body>
</html>