diff --git a/app.js b/app.js
index dc0a357..ac375fa 100644
--- a/app.js
+++ b/app.js
@@ -47,7 +47,7 @@ function regle() {
document.body.appendChild(button);
}
// Init
-var rouleaux = document.querySelectorAll(".rouleaux h3")
+var rouleaux = document.querySelectorAll(".rouleaux #board")
rouleaux.forEach(rouleau => {
rouleau.innerText = 0
});
diff --git a/icon.jpg b/icon.jpg
new file mode 100644
index 0000000..4b96f57
Binary files /dev/null and b/icon.jpg differ
diff --git a/idex.html b/idex.html
new file mode 100644
index 0000000..41190ca
--- /dev/null
+++ b/idex.html
@@ -0,0 +1,68 @@
+
+
+
+ Machine à sous NSI
+
+
+
+
+
+
+
+
+
+
+
0
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
+
0
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
+
0
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
+
+
+
+
+
+
+
Jetons dans la machine :
+
+ Jetons du joueur :
+
+
+
+
+
\ No newline at end of file
diff --git a/stylepagecss/menu.css b/stylepagecss/menu.css
new file mode 100644
index 0000000..99729bb
--- /dev/null
+++ b/stylepagecss/menu.css
@@ -0,0 +1,194 @@
+body {
+ margin: 0;
+ padding: 0;
+ background-color: black;
+ font: 5rem;
+ width: 1;
+ height: 1.4;
+ padding: 2.5rem;
+ font-size: 100%
+}
+
+.title {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.title1 p{
+ position: relative;
+ font-family: Georgia, serif;
+ font-size: 45px;
+ white-space: nowrap;
+ font-weight: lighter;
+ overflow: hidden;
+ list-style-type: none;
+ color: white;
+ animation: ecriture 3s steps(19);
+}
+
+@keyframes ecriture {
+ from {width: 0%}
+ to {width: 100%;}
+}
+
+.button {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+button.btn {
+ display: inline-block;
+ background: transparent;
+ color: white;
+ border: 2px solid white;
+ border-radius: 5%;
+ font-size: 18px;
+ letter-spacing: 2px;
+ padding: 25px 80px;
+ text-transform: none;
+ cursor: pointer;
+ margin: 15px 30px;
+ transition: all 0.7s;
+}
+
+button.btn_1:hover {
+ background-color: white;
+ color: black;
+ transition: all 0.7s;
+}
+
+button.btn_2:hover {
+ color: black;
+ background-color: white;
+}
+
+#machine_coins {
+ color: white;
+}
+
+#player_coins {
+ color: white;
+}
+
+#jeton {
+ margin-top: 100px;
+ color: white;
+ padding: 10px;
+}
+
+.container {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ margin-top: -6rem;
+ margin-left: -10rem;
+ padding: 2.5rem;
+ border-radius: 10px;
+ background: linear-gradient(to bottom, #666, #444);
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
+}
+
+.container:before {
+ content: "";
+ position: absolute;
+ top: 17%;
+ left: 10%;
+ height: 66%;
+ width: 80%;
+ border-radius: 10px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1), 0 -1px 0 1px rgba(255, 255, 255, 0.1);
+ background: linear-gradient(to bottom, #444, #666);
+}
+
+.wrapper {
+ position: relative;
+ display: flex;
+ width: 15rem;
+ height: 7rem;
+ overflow: hidden;
+ background: #333;
+ box-shadow: inset 0 0px 8px #000, 0 1px 0px 1px rgba(255, 255, 255, 0.4);
+ border-radius: 10px;
+ text-align: center;
+ color: #fff;
+ text-shadow: -2px -2px 0 #aaa;
+ font: 5rem/1.4 monaco, monospace;
+}
+
+.board {
+ flex-grow: 1;
+}
+
+.checkbox {
+ display: none;
+}
+
+.checkbox ~ .wrapper > .board {
+ animation-play-state: paused !important;
+}
+
+.checkbox ~ .wrapper > .board.item1 {
+ animation: shuffle 1.3s steps(10);
+}
+
+.checkbox ~ .wrapper > .board.item2 {
+ animation: shuffle 1.1s steps(10);
+}
+
+.checkbox ~ .wrapper > .board.item3 {
+ animation: shuffle 0.9s steps(10);
+}
+
+.checkbox:checked ~ .handle:before {
+ transform: rotateX(180deg);
+}
+
+.checkbox:checked ~ .handle:after {
+ transform: translateY(140px);
+}
+
+.checkbox:checked ~ .wrapper > .board {
+ animation-play-state: running !important;
+}
+
+.handle {
+ position: absolute;
+ right: 0;
+ top: 50%;
+}
+
+.handle:before {
+ content: "";
+ position: absolute;
+ bottom: 0;
+ width: 20px;
+ height: 60px;
+ background: linear-gradient(to right, #bbb 0%, #eee 30%, #bbb 100%);
+ border-radius: 0 0 10px 0;
+ transform-origin: bottom center;
+ transition: transform 0.2s ease;
+}
+
+.handle:after {
+ content: "";
+ position: absolute;
+ bottom: 55px;
+ left: -5px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background: radial-gradient(circle farthest-corner at 25% 25% LightSalmon 0%, tomato 100%);
+ transform-origin: bottom center;
+ transition: transform 0.2s ease;
+}
+
+@keyframes shuffle {
+ 0% {
+ transform: translate3d(0, 0, 0);
+ }
+ 100% {
+ transform: translate3d(0, -70rem, 0);
+ }
+}
\ No newline at end of file