-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
57 lines (54 loc) · 7.08 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>pig-game</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=c802f0d0d977b64251528f72a0c92944">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,700">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css?h=18313f04cea0e078412a028c5361bd4e">
<link rel="stylesheet" href="assets/fonts/line-awesome.min.css?h=18313f04cea0e078412a028c5361bd4e">
<link rel="stylesheet" href="assets/fonts/simple-line-icons.min.css?h=18313f04cea0e078412a028c5361bd4e">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.css">
<link rel="stylesheet" href="assets/css/styles.css?h=268ec14be71ffd01eb282dc60ee49c53">
</head>
<body class="d-flex justify-content-center align-items-center" style="background-image: url("assets/img/back.jpg?h=2e0438726e3024c7c5fda6f679ee4861");background-position: center;background-size: cover;background-repeat: no-repeat;width: 100vw;height: 100vh;overflow: hidden;font-family: Lato, sans-serif;">
<div class="shadow-lg d-flex align-items-center wrapper" data-aos="fade" data-aos-duration="1200" data-aos-once="true" style="transform: scale(.95);">
<div class="d-flex flex-column flex-grow-1 justify-content-center align-items-center player-0-panel active">
<h1 class="text-nowrap text-uppercase text-center player-name" data-aos="fade-down" data-aos-duration="1200" data-aos-delay="100" data-aos-once="true" id="name-0">Player 1</h1>
<h1 class="text-center player-score" data-aos="fade-down" data-aos-duration="1200" data-aos-delay="50" data-aos-once="true" id="score-0">43</h1>
<div class="text-uppercase text-center player-current-box" data-aos="fade-right" data-aos-duration="1200" data-aos-delay="100" data-aos-once="true">
<p class="player-current-label" style="margin-bottom: 0px;color: rgb(50,50,50);">Current</p>
<p id="current-0" class="player-current-score" style="font-size: 30px;margin-bottom: -4px;">11</p>
</div><img id="winner-0" src="assets/img/crown.webp?h=27635eef2bbc082b459ff12233df8876"></div>
<div class="d-flex flex-column flex-grow-1 justify-content-center align-items-center player-1-panel">
<h1 class="text-nowrap text-uppercase text-center player-name" data-aos="fade-down" data-aos-duration="1200" data-aos-delay="100" data-aos-once="true" id="name-1">Player 2</h1>
<h1 class="text-center player-score" data-aos="fade-down" data-aos-duration="1200" data-aos-delay="50" data-aos-once="true" id="score-1">72</h1>
<div class="text-uppercase text-center player-current-box" data-aos="fade-left" data-aos-duration="1200" data-aos-delay="100" data-aos-once="true">
<p class="player-current-label" style="margin-bottom: 0px;color: rgb(50,50,50);">Current</p>
<p id="current-1" class="player-current-score" style="font-size: 30px;margin-bottom: -4px;">0</p>
</div><img id="winner-1" src="assets/img/crown.webp?h=27635eef2bbc082b459ff12233df8876"></div><button class="btn btn-block text-center d-flex justify-content-center align-items-center btn-new button" type="button"><i class="icon-plus icon"></i>NEW GAME</button><button class="btn btn-block text-center d-flex justify-content-center align-items-center btn-roll button"
type="button" style="background-color: #e6e6e6;"><i class="icon-refresh icon"></i>ROLL DICE</button><button class="btn btn-block text-center d-flex justify-content-center align-items-center btn-hold button" type="button" style="background-color: #e6e6e6;"><i class="icon-cloud-download icon"></i>HOLD</button>
<img
class="shadow-lg dice" src="assets/img/dice-5.png?h=62bfb15ebeeb928209d2be5ce14aeb92" alt="dice"></div>
<footer class="footer">
<p class="text-center">Made with <i class="icon-heart"></i> by <a href="https://sahil-poonia.github.io/CV/" target="_blank">Sahil Poonia</a>.</p>
</footer><button class="btn d-flex justify-content-center align-items-center btn-instruct" data-bs-hover-animate="rubberBand" type="button" title="Rules of Game"><i class="icon ion-navicon-round" style="margin: 0;margin-top: -6px;font-size: 30px;color: rgb(255,255,255);"></i></button>
<button
class="btn d-flex justify-content-center align-items-center btn-code" data-bs-hover-animate="rubberBand" type="button" title="Rules of Game"><i class="la la-code" style="margin: 0;font-size: 30px;color: rgb(255,255,255);" title="JavaScrip code"></i></button>
<div class="text-center hide" id="instructions">
<h1 class="text-uppercase" data-aos="fade-up" data-aos-duration="1200" data-aos-once="true" style="font-size: 60px;font-weight: 100;">game rules</h1>
<hr data-aos="fade-up" data-aos-duration="1200" data-aos-delay="100" data-aos-once="true" style="border-top: 5px dotted rgba(255,255,255,1);width: 180px;">
<p class="text-break text-left" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="200" data-aos-once="true" style="margin-top: 70px;width: 80%;margin-right: auto;margin-left: auto;font-size: 18px;"><strong>1.</strong> The game has 2 players, playing in rounds.<br><br><strong>2.</strong> In each turn, a player rolls a dice as many times as he whishes. Each result get added to his ROUND score.<br><br><strong>3.</strong> BUT, if the player rolls a 1, all his ROUND score gets lost. After that, it's the next player's turn.<br><br><strong>4.</strong> The player can choose to 'Hold', which means that his ROUND score gets added to his GLOBAL score. After that, it's the next player's turn.<br><br><strong>5.</strong> The first player to reach 100 points on GLOBAL score wins the game.<br></p>
<button
class="btn btn-close" type="button"><i class="la la-close" style="color: rgb(254,254,254);font-size: 36px;"></i></button>
</div>
<script src="assets/js/jquery.min.js?h=83e266cb1712b47c265f77a8f9e18451"></script>
<script src="assets/bootstrap/js/bootstrap.min.js?h=e46528792882c54882f660b60936a0fc"></script>
<script src="assets/js/bs-init.js?h=a24a748d1ebf2b30dec97d2c79b26872"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.1.1/aos.js"></script>
<script src="assets/js/script.js?h=7023889dfc1068735f468c8170591428"></script>
</body>
</html>