blackjack/index.html at main · ryanlerler/blackjack · 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Page setup configurations -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Favicon configuration -->
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2"
    />
    <link rel="manifest" href="/site.webmanifest?v=2" />
    <link
      rel="mask-icon"
      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2"
      color="#e73c3e"
    />
    <link
      rel="shortcut icon"
      href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2"
    />
    <meta name="apple-mobile-web-app-title" content="Rocket Academy" />
    <meta name="application-name" content="Rocket Academy" />
    <meta name="msapplication-TileColor" content="#2b5797" />
    <meta name="theme-color" content="#ffffff" />

    <!-- sharing configuration -->
    <!-- Primary Meta Tags -->
    <title>Blackjack - Fundamentals - Rocket Academy</title>
    <meta name="title" content="YOURNAME's BlackJack Game!" />
    <meta name="description" content="A fun card game I made myself! 😄💪🌈" />

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta
      property="og:url"
      content="https://ryanlerler.github.io/blackjack/index.html"
    />
    <meta property="og:title" content="Ryan Ler's BlackJack Game!" />
    <meta
      property="og:description"
      content="A fun card game I made myself! 😄💪🌈"
    />
    <meta property="og:image" content="https://i.imgur.com/tqqGBaI.png" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:url"
      content="https://ryanlerler.github.io/blackjack/index.html"
    />
    <meta name="twitter:title" content="Ryan Ler's BlackJack Game!" />
    <meta
      name="twitter:description"
      content="A fun card game I made myself! 😄💪🌈"
    />
    <meta name="twitter:image" content="https://i.imgur.com/tqqGBaI.png" />
    <meta name="twitter:site" content="@ryanler" />
    <meta name="twitter:creator" content="@ryanler" />

    <!-- fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap"
      rel="stylesheet"
    />

    <!-- CSS -->
    <link rel="stylesheet" href="styles.css" />
  </head>

  <!-- Google tag (gtag.js) -->
  <script
    async
    src="https://www.googletagmanager.com/gtag/js?id=G-PX3FTX8BMY"
  ></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "G-PX3FTX8BMY");
  </script>

  <body>
    <!-- Background video -->
    <video autoplay muted loop id="background-video">
      <source src="assets/Neon.mp4" type="video/mp4" />
    </video>

    <!-- Main Elements -->
    <h1 class="header">🚀 Rocket Academy 🚀</h1>
    <h1 class="header">♣️ Blackjack ♠️</h1>
    <div id="container">
      <div class="slider-container">
        <input
          type="range"
          min="1"
          max="100"
          value="50"
          class="slider"
          id="slider-range"
        />
        <p>Your bet: <span id="bet"></span></p>
      </div>
      <br />
      <div class="buttons">
        <button id="play-button">Play</button>
        <button id="hit-button">Hit</button>
        <button id="stand-button">Stand</button>
      </div>
      <div id="output-div">
        The player who is closer to, but not above 21 wins the hand. <br />
        <br />
        Please drag the slider to bet (1 to 100) and press Play to start. <br />
        <p>
          <a
            href="https://www.youtube.com/watch?v=eyoh-Ku9TCI&ab_channel=wikiHow"
            title="https://www.youtube.com/watch?v=eyoh-Ku9TCI&ab_channel=wikiHow"
          >
            Youtube Tutorial
          </a>
        </p>
        <div id="video-container"></div>
      </div>
    </div>
    <br />
    <br />

    <!-- Background music -->
    <audio controls autoplay>
      <source src="assets/BeautifulWorld.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio>

    <!-- Import program logic -->
    <script src="script.js"></script>
  </body>
</html>