<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Simple Slot Game">
<meta name="keywords" content="HTML,CSS,JavaScript">
<meta name="author" content="Harry Kodua">
<meta name="theme-color" content="#000000">
<meta name="viewport" content="width=480,initial-scale=1, maximum-scale=1">
<title>SlotMachine</title>
<link rel="icon" href="https://n1md7.github.io/slot-game/img/BAR.png">
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
</head>
<body>
<div class="container">
<div class="preview">
<img src="//oi63.tinypic.com/2u76br5.jpg">
</div>
<h2 class="text-center text-light my-3 gold"><i class="fab fa-phoenix-framework gold"></i> Slot Game</h2>
<div class="row justify-content-center mb-3">
<div class="col col-auto">
<canvas id="slot" width="440" height="240"></canvas>
</div>
</div>
<div class="row justify-content-center mb-3">
<div class="col col-auto">
<div class="input-group mb-3 w-75 m-auto">
<div class="input-group-prepend">
<span class="input-group-text">Current WIN</span>
</div>
<input type="text" class="form-control w-auto" id="cwin" value="0">
</div>
</div>
</div>
<div class="row justify-content-center mb-3">
<div class="col col-auto">
<button class="btn btn-danger px-5" id="spin"><i class="fas fa-sync-alt"></i> SPIN</button>
<button class="btn btn-secondary px-5" id="auto"><i class="fab fa-android"></i> AUTO (OFF)</button>
</div>
</div>
<div class="row justify-content-center mb-3">
<div class="col col-auto">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Credits</span>
</div>
<input class="form-control" type="number" id="balance" min="1" max="5000">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-dollar-sign green"></i></span>
</div>
</div>
</div>
<div class="col col-auto">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">BETx</span>
</div>
<input class="form-control" type="number" id="bet" min="1" value="1" max="3">
<div class="input-group-append">
<span class="input-group-text"><i class="fas fa-coins gold"></i></span>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col col-auto">
<select id="mode" class="btn btn-default">
<option value="random">Random</option>
<option value="fixed">Fixed</option>
</select>
<select id="where" class="btn btn-default">
<option value="top">top</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
</select>
<select id="what" class="btn btn-default">
</select>
</div>
</div>
<div class="row justify-content-center my-3">
<div class="col col-auto">
<button class="btn btn-warning w-auto" type="button" id="checkout"><i class="fas fa-money-bill-alt"></i> CHECKOUT</button>
<button class="btn btn-primary w-auto" type="button" data-toggle="modal" data-target="#payTable" ><i class="fas fa-money-bill-alt"></i> Pay Table</button>
</div>
</div>
</div>
<!-- Paytable modal -->
<div class="modal fade" id="payTable" tabindex="-1" role="dialog" aria-labelledby="payTableTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="payTableTitle">Pay Table</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-dark table-hover table-responsive" style="overflow:hidden">
<thead>
<tr>
<td>Reel1</td>
<td>Reel2</td>
<td>Reel3</td>
<td>TOP</td>
<td>MIDDLE</td>
<td>BOTTOM</td>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://n1md7.github.io/slot-game/img/Cherry.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/Cherry.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/Cherry.png" width="40"></td>
<td class="v-align">2000xBET</td>
<td class="v-align">1000xBET</td>
<td class="v-align">4000xBET</td>
</tr>
<tr>
<td><img src="https://n1md7.github.io/slot-game/img/7.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/7.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/7.png" width="40"></td>
<td class="v-align">150xBET</td>
<td class="v-align">150xBET</td>
<td class="v-align">150xBET</td>
</tr>
<tr>
<td>
<img src="https://n1md7.github.io/slot-game/img/7.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/Cherry.png" width="40">
</td>
<td>
<img src="https://n1md7.github.io/slot-game/img/7.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/Cherry.png" width="40">
</td>
<td>
<img src="https://n1md7.github.io/slot-game/img/7.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/Cherry.png" width="40">
</td>
<td class="v-align">75xBET</td>
<td class="v-align">75xBET</td>
<td class="v-align">75xBET</td>
</tr>
<tr>
<td><img src="https://n1md7.github.io/slot-game/img/3xBAR.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/3xBAR.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/3xBAR.png" width="40"></td>
<td class="v-align">50xBET</td>
<td class="v-align">50xBET</td>
<td class="v-align">50xBET</td>
</tr>
<tr>
<td><img src="https://n1md7.github.io/slot-game/img/2xBAR.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/2xBAR.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/2xBAR.png" width="40"></td>
<td class="v-align">20xBET</td>
<td class="v-align">20xBET</td>
<td class="v-align">20xBET</td>
</tr>
<tr>
<td><img src="https://n1md7.github.io/slot-game/img/BAR.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/BAR.png" width="40"></td>
<td><img src="https://n1md7.github.io/slot-game/img/BAR.png" width="40"></td>
<td class="v-align">10xBET</td>
<td class="v-align">10xBET</td>
<td class="v-align">10xBET</td>
</tr>
<tr>
<td>
<img src="https://n1md7.github.io/slot-game/img/BAR.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/2xBAR.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/3xBAR.png" width="40">
</td>
<td>
<img src="https://n1md7.github.io/slot-game/img/BAR.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/2xBAR.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/3xBAR.png" width="40">
</td>
<td>
<img src="https://n1md7.github.io/slot-game/img/BAR.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/2xBAR.png" width="40">
<img src="https://n1md7.github.io/slot-game/img/3xBAR.png" width="40">
</td>
<td class="v-align">5xBET</td>
<td class="v-align">5xBET</td>
<td class="v-align">5xBET</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col text-center">
<a href="https://github.com/n1md7/slot-game" target="_blank">Github</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>