SilverSpin/index.html at main · MathieuMH/SilverSpin · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>Silverfin - Referral wheel</title>
        <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
        <link rel="stylesheet" href="css/style.css" type="text/css" />
        <script type="text/javascript" src="js/Winwheel.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    </head>
    <body>
        <div class="w3-container w3-center">
            <h1 class="w3-text-white">SilverSpin</h1>
            <p class="w3-text-white">Turn the wheel to claim your team reward.</p>
            <p class="w3-text-white">Choose a power setting then press the Spin button. You will be alerted to the prize won when the spinning stops.</p>
        </div>

        <div class="w3-cell-row">
            <div class="w3-container w3-cell">
                <button id="pw1" class="w3-button w3-block w3-black"  onClick="powerSelected(1);">LOW</button>
                <button id="pw2" class="w3-button w3-block w3-teal"  onClick="powerSelected(2);">MEDIUM</button>
                <button id="pw3" class="w3-button w3-block w3-red"  onClick="powerSelected(3);">HIGH</button>

                <button id="wheel-start" class="w3-button w3-block w3-blue w3-margin-top" onClick="startSpin();">SPIN THE WHEEL</button>

                <button  id="wheel-reset" class="w3-button w3-block w3-blue w3-margin-top" onClick="resetWheel(); return false;">RESET</button>
            </div>

            <div class="w3-container w3-cell sf-wheel">
                <canvas id="canvas" width="300" height="452">
                    <p style="{color: white}" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                </canvas>
            </div>
        </div>

        <script type="text/javascript" src="js/script.js"></script>
    </body>
</html>