<!-- The opening tag of the head element, all are children of the element or node. -->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Blackjack Card Game, Audio & Video player." />
<meta name="keywords" content="HTML5, CSS3, JavaScript ECAScript, WebGL, GLSL." />
<meta name="author" content="James M. Lynch." />
<meta name="college" content="Los Angeles Trade Technical College (LATTC)." />
<meta name="professor" content="Albert Saryan" />
<!-- Link external Cascading Style Sheets to page. -->
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!-- Load external JavaScript / ECMAScript source code files. -->
<script type="text/ecmascript" src="js/jquery.min.js"></script>
<script type="text/ecmascript" src="js/math.js"></script>
<script type="text/ecmascript" src="js/utils.js"></script>
<title>JML-3D-Studios, Blackjack, circa 2021, HTML5</title>
<!-- The closing tag of the head element -->
</head>
<!-- The opening tag of the body element, all are children of the element. -->
<body onload="setupWebGL();">
<div id="menu_bar" class="menus">
<button type="button" id="cmd_edit_name" onclick="JML_Blackjack.player.cmdEditName();" title="Edit your name?"></button>
<button type="button" id="bank" onclick="JML_Blackjack.player.cmdResetBank();" title="Click to set bank $0.00"></button>
<button type="button" id="cmd_slider_bet" title="Slider bets $5.00 to $1,000.00">
<input type="range" id="cmd_change_bet" onchange="JML_Blackjack.player.cmdChangeBet();" class="slider" min="5" max="1000" value="1000" />
</button>
<button type="button" id="cmd_slider_delay" title="Slider adjusts deal speed?">
<input type="range" id="cmd_slider_deal_speed" onchange="JML_Blackjack.cmdSliderDealSpeed();" class="slider" min="10" max="2000" value="10" />
</button>
<select id="cmd_select_decks" onchange="JML_Blackjack.deck.cmdSelectDecks();" title="Select from 1 to 6 decks?">
<option value="1">1 deck </option><option value="2">2 decks</option><option value="3">3 decks</option>
<option value="4">4 decks</option><option value="5">5 decks</option><option value="6">6 decks</option>
</select>
<button id="cmd_show_deck" onclick="JML_Blackjack.deck.cmdShowDeck();" title="Display a deck of cards?" type="button">Demo?</button>
<button id="cmd_slide_left" onclick="plusDivs(-1)" title="Slide show left?" type="button">❮</button>
<button type="button" id="cmd_slide_right" onclick="plusDivs(1)" title="Slide show right?">❯</button>
<button id="cmd_full_screen" onclick="cmdFullScreen();" style="float: right;" title="Full Screen Mode?" type="button">Mode?</button>
</div>
<div id="log_div" style="visibility: hidden"></div>
<div id="audio-player">
<div id="clock" title="Local time"></div>
<div id="audio-image">
<img class="cover" alt="Album covers and or Media Art">
<p id="audio_title">Scroll down for Audio Player controls!</p>
</div>
<div id="audio-info">
<p>Artist/Band:</p><span class="artist"></span>
</div>
<div class="clearboth"></div>
<br>
<p style="margin-left: 3vh; font-weight: bold;">Volume:
<!-- Volume Control, your cursor keys control volume. -->
<input class="slider" id="audio_volume" max="20" min="0" title="Slide right to increase volume, left decreases!"
type="range" value="3"/>
</p>
<br>
<div id="audio_bar" class="menus">
<span>
<button id="prev" type="button" title="Previous song?">❮</button>
<button id="play" type="button" title="Play song?">Play</button>
<button id="pause" type="button" title="Pause song?">Pause</button>
<button id="stop" type="button" title="Stop song?">Stop</button>
<button id="next" type="button" title="Next song?">❯</button>
</span>
</div>
<div id="tracker">
<span id="duration"></span>
</div>
<ul id="playlist" class="hidden" title="Click left mouse to select song?">
<li song="music1.mp3" cover="media.art1.jpg" artist="Artist 1">Song-1</li>
<li song="music2.mp3" cover="media.art2.jpg" artist="Artist 2">Song-2</li>
<li song="music3.mp3" cover="media.art3.jpg" artist="Artist 3">Song-3</li>
<li song="music4.mp3" cover="media.art4.jpg" artist="Artist 4">Song-4</li>
</ul>
</div>
<canvas id="JML_canvas" title="Scroll wheel me to zoom!"></canvas>
<div id="video_container" class="resizable" style="visibility:hidden;">
<video id="video_element" style="visibility:hidden;" mute controls loop>
<source src="res/movie.mp4" type="video/mp4" /> Your browser does not support HTML5 video.
</video>
</div>
<div id="title_bar"></div>
<div class="card_table" id="card_table_player"></div>
<div class="card_table" id="card_table_player_split_hand"></div>
<div class="card_table" id="card_table_dealer"></div>
<div class="card_table" id="card_table_fullscreen"></div>
<div id="displayProgress"></div>
<div id="myProgress" style="visibility: hidden">
<div id="myBar"></div>
</div>
<div id="task_bar" class="menus">
<button type="button" id="cmd_deal" onclick="JML_Blackjack.cmdDeal();" title="Deal the cards?"> Deal?</button>
<button type="button" id="cmd_stay" onclick="JML_Blackjack.cmdStay();" title="Stay?" disabled>Stay?</button>
<button type="button" id="cmd_hit" onclick="JML_Blackjack.cmdHit();" title="Hit?" disabled>Hit?</button>
<button type="button" id="cmd_double_down" onclick="JML_Blackjack.cmdDoubleDown();" title="Double down?" disabled>Double?</button>
<button type="button" id="cmd_split_hand" onclick="JML_Blackjack.cmdSplitHand();" title="Split hand?" disabled>Split?</button>
<button type="button" id="cmd_cardtype" onclick="cmdCardType();" title="Switch card type?"> Unicode?</button>
<button type="button" id="cmd_opacity_btn" title="Slider changes opacity of video?">
<input type="range" id="cmd_opacity" onchange="cmdOpacity()" class="slider" min="1" max="20" value="10"/>
</button>
<button type="button" id="cmd_toggle_vid" onclick="cmdToggleVid();" title="Play Pause Video">Video?</button>
<button type="button" id="cmd_toggle_log" onclick="cmdToggleLog();" title="Show log history?">View?</button>
</div>
<div id="mySlideShow" class="w3-content w3-display-container">
<img class="mySlides" src="img/Slides/slide1.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide2.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide3.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide4.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide5.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide6.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide7.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide8.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide9.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide10.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide11.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide12.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide13.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide14.jpg" alt="an image load error">
<img class="mySlides" src="img/Slides/slide15.jpg" alt="an image load error">
</div>
<script type="text/ecmascript" src="js/audio-player.js"></script>
<script type="text/ecmascript" src="js/Icosa.js"></script>
<script type="text/ecmascript" src="js/Blackjack.js"></script>
</body>