serny.s
/
MSJS_WANG_SERNY
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

first commit

master
wang.m 3 years ago
parent
0c137014a9
commit
f08ec343c4
4 changed files with 263 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app.js
  2. BIN
      icon.jpg
  3. 68
      idex.html
  4. 194
      stylepagecss/menu.css

2
app.js
View File

@ -47,7 +47,7 @@ function regle() {
document.body.appendChild(button); document.body.appendChild(button);
} }
// Init // Init
var rouleaux = document.querySelectorAll(".rouleaux h3") var rouleaux = document.querySelectorAll(".rouleaux #board")
rouleaux.forEach(rouleau => { rouleaux.forEach(rouleau => {
rouleau.innerText = 0 rouleau.innerText = 0
}); });

BIN
icon.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 550 B

68
idex.html
View File

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Machine à sous NSI</title>
<meta charset="utf-8">
<link href="stylepagecss/menu.css" rel="stylesheet">
<link rel="icon" type="image/jpg" sizes="16x16" href="icon.jpg">
<script src="app.js"></script>
</head>
<body>
<div class="title">
<div class="title1">
<p>machine à sous nsi.</p>
</div>
</div>
<div id="container rouleaux">
<div class="wrapper">
<div class="board item1">
<div class="digit">0</div>
<div class="digit">1</div>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
<div class="board item3">
<div class="digit">0</div>
<div class="digit">1</div>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
<div class="board item3">
<div class="digit">0</div>
<div class="digit">1</div>
<div class="digit">2</div>
<div class="digit">3</div>
<div class="digit">4</div>
<div class="digit">5</div>
<div class="digit">6</div>
<div class="digit">7</div>
<div class="digit">8</div>
<div class="digit">9</div>
</div>
</div>
</div>
<div class="button">
<button class="btn btn_1">Regle</button>
<button class="btn btn_2" id="valider">Lancer</button>
</div>
<div id="jeton">
<h2>Jetons dans la machine : <h2 id="machine_coins"></h2>
</h2>
<h2>Jetons du joueur : <h2 id="player_coins"></h2>
</h2>
</div>
<input id="mise">
</body>
</html>

194
stylepagecss/menu.css
View File

@ -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);
}
}
Write Preview
Loading…
Cancel
Save