summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html378
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