From f08ec343c4d325898a836cc1191f2ebba4c5830c Mon Sep 17 00:00:00 2001 From: "wang.m" Date: Sun, 27 Mar 2022 16:55:30 +0200 Subject: [PATCH] first commit --- app.js | 2 +- icon.jpg | Bin 0 -> 550 bytes idex.html | 68 +++++++++++++++ stylepagecss/menu.css | 194 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 263 insertions(+), 1 deletion(-) create mode 100644 icon.jpg create mode 100644 idex.html create mode 100644 stylepagecss/menu.css 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 0000000000000000000000000000000000000000..4b96f57b81e6671f0d8d52c827fd5d8a7f14d5d8 GIT binary patch literal 550 zcmex=_1P|rX?qqI0P zFI~aY%U!`Mz|~!$%*;qrN1?DZF(6Oj-S5fuR$!pIEN!@|nR z%E~Fi%grl7GWdUhL6Cz%fI)znQHg;`kdaxC@&6G9F|a=wkN_Ji2T)u|fPs;P3Fv4> zm=q%u(CKV~>_Qxh42F(@Ks6%35JCm4Kv6|O1_l;ZRwM~VCP768W){OhAz`J&ga2G`=(vnzpd*# zY`mZ9xt!0IS%1PO^6Zt + + + Machine à sous NSI + + + + + + +
+
+

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