Browse Source

first commit

master
wang.m 3 years ago
parent
commit
f08ec343c4
  1. 2
      app.js
  2. BIN
      icon.jpg
  3. 68
      idex.html
  4. 194
      stylepagecss/menu.css

2
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
});

BIN
icon.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 550 B

68
idex.html

@ -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

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