diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 378 |
1 files changed, 378 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..6d8e7e3 --- /dev/null +++ b/index.html @@ -0,0 +1,378 @@ +<!doctype html> +<html> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=0.9"> + <link rel="icon" type="image/png" href="favicon.png"> + <title>Awesometaunts</title> + <style> + @font-face { + font-family: "ZektonT"; + src: url(zekton_rg.otf); + } + body { + background-color: #050d0f; + color: #ebeadb; + font-size: 14px; + font-family: "ZektonT", sans-serif; + margin: 0; + padding: 0; + } + a:link, a:visited { + color: #a4a194; + text-decoration: none; + } + a:active, a:hover { + color: #a4a194; + text-decoration: underline; + } + kbd { + display: inline-block; + padding: 2px 3px; + font-weight: 600; + color: #333330; + border-radius: 3px; + border: 1px solid #7a776e; + background-color: #ebeadb; + box-shadow: 0px 3px 0px 1px #4a4945; + margin: 0 0 3px 0; + } + .smaller { + color: #7a776e; + } + @keyframes message { + 0% {opacity: 1; height: 95px; margin: 20px auto;} + 96% {opacity: 1; height: 95px; margin: 20px auto;} + 100% {opacity: 0; height: 0px; margin: 0px auto;} + } + @keyframes text { + 0% {letter-spacing: 24px; -webkit-filter:blur(8px); -ms-filter:blur(8px); filter:blur(8px); opacity: 0;} + 100% {letter-spacing: 0px; -webkit-filter:none; -ms-filter:none; filter:none; opacity: 1;} + } + @keyframes bar { + 0% {width: 325.5px; height: 47.5px; left: 162.75px; opacity: 0;} + 100% {width: 651px; height: 95px; left: 1px; opacity: 1;} + } + @keyframes icon { + 0% {opacity: 0; width: 0px; height: 0px; top: 67px; left: 326.5px;} + 50% {opacity: 0; width: 0px; height: 0px; top: 67px; left: 326.5px;} + 100% {opacity: 1; width: 38px; height: 38px; top: 48px; left: 307.5px;} + } + .message { + position: relative; + box-sizing: border-box; + margin: 0px auto; + width: 651px; + height: 0px; + animation-name: message; + animation-duration: 6s; + opacity: 0; + } + .message > .bar { + position: absolute; + top: 0px; + left: 0px; + width: 651px; + height: 95px; + animation-name: bar; + background-image: url(bar.png); + background-position: 50% 0%; + background-size:100%; + background-repeat: no-repeat; + animation-duration: 340ms; + z-index: -2; + } + .message > .text { + position: absolute; + color: #fffae6; + left: -154.5px; + top: 9px; + width: 960px; + font-size: 28px; + text-align: center; + animation-name: text; + animation-duration: 380ms; + letter-spacing: 0px; + text-shadow: 0px 1px 0px #000; + } + .message > .icon { + position: absolute; + top: 48px; + left: 307.5px; + width: 38px; + height: 38px; + border-radius: 38px; + background-color: #fd2109; + animation-name: icon; + animation-duration: 500ms; + } + .message > .icon:before { + content: ''; + position: absolute; + top: -20%; + left: -20%; + width: 140%; + height: 140%; + border-radius: 200px; + background-color: #fd2109; + -webkit-filter:blur(10px); + -ms-filter:blur(10px); + filter:blur(10px); + z-index: -1; + } + .message > .icon.blue { + background-color: #44b4f1; + } + .message > .icon.blue:before { + background-color: #33a7cf; + } + .message > .icon > img { + width: 100%; + height: 100%; + } + .information { + font-family: Verdana, sans-serif; + text-align: center; + box-sizing: border-box; + max-width: 800px; + width: 100%; + padding: 12px; + margin: 0px auto; + } + span[onclick] { + cursor: pointer; + } + input[type="checkbox"] { + height: 14px; + margin: 0 2px; + vertical-align: middle; + } + input[type="range"] { + height: 8px; + margin: 0 0 6px 0; + } + </style> + </head> + <body> + <div class="information"> + <img src="logo.png" alt="Awesometaunts"><br> + <span onclick='taunt({key: "1"});'>Press <kbd>1</kbd> to taunt (or click here).</span> + <select onchange="change();" id="naut" selected="any"> + <option value="any">Random</option> + <option value="froggy">Froggy G</option> + <option value="lonestar">Lonestar</option> + <option value="lonestar4">Lonestar (Terminator)</option> + <option value="leon">Leon</option> + <option value="leon3">Leon (Pirate)</option> + <option value="leon4">Leon (Ghost)</option> + <option value="scoop">Scoop</option> + <option value="scoop2">Scoop (Wraithlord)</option> + <option value="scoop4">Scoop (Fantasy)</option> + <option value="gnaw">Gnaw</option> + <option value="gnaw3">Gnaw (Robot)</option> + <option value="gnaw4">Gnaw (Gnariachi)</option> + <option value="raelynn">Raelynn</option> + <option value="ayla">Ayla</option> + <option value="clunk">Clunk</option> + <option value="voltar">Voltar</option> + <option value="coco">Coco</option> + <option value="coco4">Coco (Cyber)</option> + <option value="coco5">Coco (Witch)</option> + <option value="skolldir">Skolldir</option> + <option value="yuri">Yuri</option> + <option value="derpl">Derpl</option> + <option value="derpl3">Derpl (Ahrpl)</option> + <option value="vinnie">Vinnie</option> + <option value="genji">Genji</option> + <option value="genji4">Genji (Grim)</option> + <option value="swiggins">Swiggins</option> + <option value="swiggins2">Swiggins (Abyssal)</option> + <option value="rocco">Rocco</option> + <option value="rocco3">Rocco (ESC)</option> + <option value="ksenia">Ksenia</option> + <option value="ksenia2">Ksenia (Huntress)</option> + <option value="ix">Ix</option> + <option value="ix2">Ix (Seraph)</option> + <option value="ted">Ted</option> + <option value="ted2">Ted (Titanium)</option> + <option value="ted3">Ted (Party)</option> + <option value="ted4">Ted (Pirate)</option> + <option value="penny">Penny</option> + <option value="sentry">Sentry</option> + <option value="sentry2">Sentry (Japanese)</option> + <option value="sentry3">Sentry (Alien)</option> + <option value="skree">Skree</option> + <option value="skree2">Skree (Skeleton)</option> + <option value="nibbs">Nibbs</option> + <option value="nibbs2">Nibbs (with Zurian)</option> + <option value="yoolip">Yoolip</option> + <option value="yoolip3">Yoolip (8-bit)</option> + <option value="chucho">Chucho</option> + <option value="chucho2">Chucho (Skeleton)</option> + <option value="lux">Lux-5000</option> + <option value="max">Max Focus</option> + <option value="max2">Max Focus (Nightmare)</option> + </select><br> + <span class="smaller"> + We use cookies for these settings: <input id="autoplay" type="checkbox" checked> autoplay, <input id="volume" type="range" min=0 max=1 step=0.01 value=0.6> volume.<br> + <a href="https://awesomenauts.com/">Awesomenauts</a> and its voicelines are properties of <a href="http://www.ronimo-games.com/">Ronimo Games</a>.<br> + This page was made by <a href="https://steamcommunity.com/profiles/76561198082681701/">Aki</a> with a little help of <a href="https://steamcommunity.com/profiles/76561198057627918/">Erdion</a> and alcohol. + </span> + </div> + <script> + var ENABLED = true; + var NAUTS = [ + {short: "fg", number: 6, name: "froggy"}, + {short: "sl", number: 7, name: "lonestar"}, + {short: "sl4", number: 8, name: "lonestar4"}, + {short: "lc", number: 7, name: "leon"}, + {short: "lc3", number: 6, name: "leon3"}, + {short: "lc4", number: 8, name: "leon4"}, + {short: "sc", number: 6, name: "scoop"}, + {short: "sc2", number: 5, name: "scoop2"}, + {short: "sc4", number: 6, name: "scoop4"}, + {short: "gn", number: 5, name: "gnaw"}, + {short: "gn3", number: 5, name: "gnaw3"}, + {short: "gn4", number: 6, name: "gnaw4"}, + {short: "rl", number: 9, name: "raelynn"}, + {short: "ay", number: 9, name: "ayla"}, + {short: "cl", number: 7, name: "clunk"}, + {short: "vo", number: 7, name: "voltar"}, + {short: "cn", number: 7, name: "coco"}, + {short: "cn4", number: 5, name: "coco4"}, + {short: "cn5", number: 5, name: "coco5"}, + {short: "sd", number: 5, name: "skolldir"}, + {short: "yr", number: 7, name: "yuri"}, + {short: "dz", number: 6, name: "derpl"}, + {short: "dz3", number: 3, name: "derpl3"}, + {short: "vs", number: 7, name: "vinnie"}, + {short: "bf", number:10, name: "genji"}, + {short: "bf4", number: 8, name: "genji4"}, + {short: "sw", number:16, name: "swiggins"}, + {short: "sw2", number: 3, name: "swiggins2"}, + {short: "rc", number: 7, name: "rocco"}, + {short: "rc3", number: 5, name: "rocco3"}, + {short: "ks", number: 5, name: "ksenia"}, + {short: "ks2", number: 5, name: "ksenia2"}, + {short: "ix", number: 7, name: "ix"}, + {short: "ix2", number: 7, name: "ix2"}, + {short: "tp", number: 4, name: "ted"}, + {short: "tp2", number: 8, name: "ted2"}, + {short: "tp3", number: 5, name: "ted3"}, + {short: "tp4", number: 6, name: "ted4"}, + {short: "pf", number: 7, name: "penny"}, + {short: "sx", number: 9, name: "sentry"}, + {short: "sx2", number: 9, name: "sentry2"}, + {short: "sx3", number: 2, name: "sentry3"}, + {short: "sk", number: 7, name: "skree"}, + {short: "sk2", number: 8, name: "skree2"}, + {short: "nb", number: 6, name: "nibbs"}, + {short: "nb2", number: 5, name: "nibbs2"}, + {short: "py", number: 5, name: "yoolip"}, + {short: "py3", number: 5, name: "yoolip3"}, + {short: "ck", number: 6, name: "chucho"}, + {short: "ck2", number: 5, name: "chucho2"}, + {short: "lx", number: 5, name: "lux"}, + {short: "mf", number: 5, name: "max"}, + {short: "mf2", number: 5, name: "max2"} + ]; + function getNumber(name) { + for (var i = NAUTS.length - 1; i >= 0; i--) { + if (NAUTS[i].name == name) { + return i; + } + } + return Math.floor((Math.random() * NAUTS.length)); + } + function newMessage(number, volume) { + // Audio + var naut = NAUTS[number]; + var number = Math.floor((Math.random() * naut.number) + 1); + var audio = new Audio("audio/v-" + naut.short + "-taunt" + number + ".ogg"); + audio.volume = volume; + audio.play(); + // Text element + var text = document.createElement("div"); + var textnode = document.createTextNode("An enemy taunts you!"); + text.className = "text"; + text.appendChild(textnode); + // Bar element + var bar = document.createElement("div"); + bar.className = "bar"; + // Icon element + var icon = document.createElement("div"); + var img = document.createElement("img"); + icon.className = "icon"; + if (Math.random() < 0.25) { icon.className += " blue"} + img.src = "icons/" + naut.name + ".png"; + img.alt = ""; + icon.appendChild(img); + // Root element + var message = document.createElement("div"); + message.className = "message"; + message.appendChild(bar); + message.appendChild(text); + message.appendChild(icon); + return message; + } + function get(name){ + if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search)) + return decodeURIComponent(name[1]); + } + function taunt(event) { + if (ENABLED) { + if (event.key == "1" || event.keyCode == 49) { + ENABLED = false; + var remove = function (message) { + document.body.removeChild(message); + }; + var volume = document.getElementById("volume").value; + var number = getNumber(get("n")); + var message = newMessage(number, volume); + document.body.appendChild(message); + setTimeout(remove, 6500, message); + setTimeout(function() { ENABLED = true; }, 120); + } + } + } + function change(){ + var select = document.getElementById("naut").value; + history.replaceState({foo: "bar"}, "Awesometaunts", "?n=" + select); + } + function save() { + var volume = document.getElementById("volume").value; + var autoplay = document.getElementById("autoplay").checked; + var date = new Date(); + date.setTime(date.getTime() + (5356800000)); + var expires = "expires=" + date.toGMTString(); + document.cookie = "volume=" + String(volume) + ";" + expires + ";"; + document.cookie = "autoplay=" + String(autoplay) + ";" + expires + ";"; + } + function load() { + var volume_regex = /volume=(\d{1}.\d+)/; + var autoplay_regex = /autoplay=(false|true)/; + var volume_value = volume_regex.exec(document.cookie); + if (volume_value) {volume_value = Number(volume_value[1]);} + var autoplay_value = autoplay_regex.exec(document.cookie); + if (autoplay_value) { autoplay_value = autoplay_value[1];} + if (autoplay_value == "true") { autoplay_value = true; } + else if (autoplay_value == "false") { autoplay_value = false; } + else { autoplay_value = "nope";} + var volume = document.getElementById("volume"); + var autoplay = document.getElementById("autoplay"); + if (typeof volume_value == "number") { + volume.value = volume_value; } + if (typeof autoplay_value == "boolean") { autoplay.checked = autoplay_value;} + var select = document.getElementById("naut"); + var got = get("n"); + if (typeof got == 'string') { select.value = got; } + if (autoplay.checked) { + setTimeout(taunt, 1000, {key: "1"}) + } + } + document.body.onkeypress = taunt; + document.body.onload = load; + document.body.onunload = save; + </script> + </body> +</html>
\ No newline at end of file |