| <!DOCTYPE html> |
| <html lang="en-us"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> |
| <title>Huggy</title> |
| <link rel="shortcut icon" href="TemplateData/favicon.ico"> |
| <link rel="stylesheet" href="TemplateData/style.css"> |
| <style> |
| div#discordButton button{ |
| position: absolute; |
| left: 0px; |
| } |
| </style> |
| |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
| </head> |
| <body class="dark"> |
| |
| <div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> |
| <div class="modal-dialog" role="document"> |
| <div class="modal-content"> |
| <div class="modal-header"> |
| <img class="modal-title" id="exampleModalLabel" src="./TemplateData/logo.png" alt="logo" style="max-height:200px" class="img-fluid"/> |
| <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
| <span aria-hidden="true">×</span> |
| </button> |
| </div> |
| <div class="modal-body"> |
| <h3> What is Huggy 🐶? </h3> |
| <p> Huggy is a dog that <b>learned how to catch the stick with deep reinforcement learning</b> - throw the stick to see how he has learned!</p> |
| <p> If you like the game, don't forget to click on the like 💖 button.</p> |
| <p> Do you want to learn more about Deep RL? 🤖 |
| We launched a <b>free class from beginner to expert!</b> |
| 👉 <a href="https://forms.gle/iCCam61Q1Hbj4ogV7" target="_blank">Start here</a> </p> |
| </div> |
| <div class="modal-footer"> |
| <button type="button" class="btn btn-success" data-dismiss="modal">Let me play!</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| <div id="unity-container" class="unity-desktop"> |
| <canvas id="unity-canvas"></canvas> |
| </div> |
| <div id="loading-cover" style="display:none;"> |
| <div id="unity-loading-bar"> |
| <div id="unity-logo"><img src="logo.png"></div> |
| <div id="unity-progress-bar-empty" style="display: none;"> |
| <div id="unity-progress-bar-full"></div> |
| </div> |
| <div class="spinner"></div> |
| </div> |
| </div> |
| <div id="unity-fullscreen-button" style="display: none;"></div> |
| <script> |
| const hideFullScreenButton = ""; |
| const buildUrl = "Build"; |
| const loaderUrl = buildUrl + "/Huggy.loader.js"; |
| const config = { |
| dataUrl: buildUrl + "/Huggy.data.unityweb", |
| frameworkUrl: buildUrl + "/Huggy.framework.js.unityweb", |
| codeUrl: buildUrl + "/Huggy.wasm.unityweb", |
| streamingAssetsUrl: "StreamingAssets", |
| companyName: "Hugging Face", |
| productName: "Huggy", |
| productVersion: "0.1", |
| }; |
| |
| const container = document.querySelector("#unity-container"); |
| const canvas = document.querySelector("#unity-canvas"); |
| const loadingCover = document.querySelector("#loading-cover"); |
| const progressBarEmpty = document.querySelector("#unity-progress-bar-empty"); |
| const progressBarFull = document.querySelector("#unity-progress-bar-full"); |
| const fullscreenButton = document.querySelector("#unity-fullscreen-button"); |
| const spinner = document.querySelector('.spinner'); |
| |
| const canFullscreen = (function() { |
| for (const key of [ |
| 'exitFullscreen', |
| 'webkitExitFullscreen', |
| 'webkitCancelFullScreen', |
| 'mozCancelFullScreen', |
| 'msExitFullscreen', |
| ]) { |
| if (key in document) { |
| return true; |
| } |
| } |
| return false; |
| }()); |
| |
| if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) { |
| container.className = "unity-mobile"; |
| config.devicePixelRatio = 1; |
| } |
| loadingCover.style.display = ""; |
| |
| const script = document.createElement("script"); |
| script.src = loaderUrl; |
| script.onload = () => { |
| createUnityInstance(canvas, config, (progress) => { |
| spinner.style.display = "none"; |
| progressBarEmpty.style.display = ""; |
| progressBarFull.style.width = `${100 * progress}%`; |
| }).then((unityInstance) => { |
| loadingCover.style.display = "none"; |
| if (canFullscreen) { |
| if (!hideFullScreenButton) { |
| fullscreenButton.style.display = ""; |
| } |
| fullscreenButton.onclick = () => { |
| unityInstance.SetFullscreen(1); |
| }; |
| } |
| }).catch((message) => { |
| alert(message); |
| }); |
| }; |
| document.body.appendChild(script); |
| </script> |
| <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script> |
| <script> |
| $(document).ready(function(){ |
| $("#infoModal").modal('show'); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
