this is the only level, slope, chrome dino, achievement unlocked 2 added, just making this so i can have analytics on cloudflare pages tho

2025-06-15 10:12:06 -05:00 · 2023-05-24 15:14:30 -04:00 · 2023-05-24 15:14:30 -04:00 · 347394145c
commit 347394145c
parent 3b1f1674fb
65 changed files with 13077 additions and 66 deletions
--- a/achieveunlocked2/achievementunlocked2.swf
+++ b/achieveunlocked2/achievementunlocked2.swf
--- a/achieveunlocked2/icon.png
+++ b/achieveunlocked2/icon.png
--- a/achieveunlocked2/index.html
+++ b/achieveunlocked2/index.html
@ -0,0 +1,24 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Achievement Unlocked 2</title>
+    <style>html{background-color:#000;}</style>
+  </head>
+  <body>
+    <div id="ruffle" width="100%" height="100%"></div>
+    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
+    <script>
+      window.RufflePlayer = window.RufflePlayer || {};
+      window.addEventListener("load", (event) => {
+        const ruffle = window.RufflePlayer.newest();
+        const player = ruffle.createPlayer();
+        const container = document.getElementById("ruffle");
+        player.id = "player";
+        player.style.width = "100%";
+        player.style.height = "100%";
+        container.appendChild(player);
+        player.load("achievementunlocked2.swf");
+      });
+    </script>
+  </body>
+</html>
--- a/changelog.html
+++ b/changelog.html
@ -17,6 +17,8 @@
 <div class="content">

    <div class="title"><img src="favicon.png" style="width:4%;"><h2 style="font-size:50px">e-gamepass</h2></div>
+    <h2>v. 2023.05.24</h2>
+    <p>Added 4 games (Slope, This is the only level, chrome dino, achievement unlocked 2)<br>Fixed web analytics (only affects me lol)</p>
 		<h2>v. 2023.05.23</h2>
    <p>Major update?!<br>Added saves<br>Complete backend remake<br>Fixed flash pages to make them full screen automatically<br>Added 2 games (Cell Machine and Death Run 3D)<br>Added more bookmarklets<br>Tetris Update!</p>
    <a href="index.html" style="font-size: 30px; color:#3b76f5">Back to home</a>
--- a/chrome-dino/1_hurdling.html
+++ b/chrome-dino/1_hurdling.html
--- a/chrome-dino/2_gymnastics.html
+++ b/chrome-dino/2_gymnastics.html
--- a/chrome-dino/3_surfing.html
+++ b/chrome-dino/3_surfing.html
--- a/chrome-dino/4_swimming.html
+++ b/chrome-dino/4_swimming.html
--- a/chrome-dino/5_equestrian.html
+++ b/chrome-dino/5_equestrian.html
--- a/chrome-dino/appmanifest.json
+++ b/chrome-dino/appmanifest.json
@ -0,0 +1,37 @@
+{
+	"name": "Chrome Dino",
+	"short_name": "Chrome Dino",
+	"description": "Dino game. A pixelated dinosaur dodges cacti and pterodactyls as it runs across a desolate landscape.",
+	"version": "2.0",
+	"start_url": "index.html",
+	"display": "fullscreen",
+	"orientation": "any",
+	"background_color": "#ffffff",
+	"icons": [
+		{
+			"src": "icons/icon-16.png",
+			"sizes": "16x16",
+			"type": "image/png"
+		},
+		{
+			"src": "icons/icon-32.png",
+			"sizes": "32x32",
+			"type": "image/png"
+		},
+		{
+			"src": "icons/icon-114.png",
+			"sizes": "114x114",
+			"type": "image/png"
+		},
+		{
+			"src": "icons/icon-128.png",
+			"sizes": "128x128",
+			"type": "image/png"
+		},
+		{
+			"src": "icons/icon-256.png",
+			"sizes": "256x256",
+			"type": "image/png"
+		}
+	]
+}
--- a/chrome-dino/favicon.ico
+++ b/chrome-dino/favicon.ico
--- a/chrome-dino/icons/icon-114.png
+++ b/chrome-dino/icons/icon-114.png
--- a/chrome-dino/icons/icon-128.png
+++ b/chrome-dino/icons/icon-128.png
--- a/chrome-dino/icons/icon-16.png
+++ b/chrome-dino/icons/icon-16.png
--- a/chrome-dino/icons/icon-256.png
+++ b/chrome-dino/icons/icon-256.png
--- a/chrome-dino/icons/icon-32.png
+++ b/chrome-dino/icons/icon-32.png
--- a/chrome-dino/images/default_100_percent/offline/100-disabled.png
+++ b/chrome-dino/images/default_100_percent/offline/100-disabled.png
--- a/chrome-dino/images/default_100_percent/offline/100-error-offline.png
+++ b/chrome-dino/images/default_100_percent/offline/100-error-offline.png
--- a/chrome-dino/images/default_100_percent/offline/100-offline-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-offline-sprite.png
--- a/chrome-dino/images/default_100_percent/offline/100-olympic-firemedal-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-olympic-firemedal-sprite.png
--- a/chrome-dino/images/default_100_percent/offline/100-olympics-equestrian-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-olympics-equestrian-sprite.png
--- a/chrome-dino/images/default_100_percent/offline/100-olympics-gymnastics-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-olympics-gymnastics-sprite.png
--- a/chrome-dino/images/default_100_percent/offline/100-olympics-hurdling-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-olympics-hurdling-sprite.png
--- a/chrome-dino/images/default_100_percent/offline/100-olympics-surfing-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-olympics-surfing-sprite.png
--- a/chrome-dino/images/default_100_percent/offline/100-olympics-swimming-sprite.png
+++ b/chrome-dino/images/default_100_percent/offline/100-olympics-swimming-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-disabled.png
+++ b/chrome-dino/images/default_200_percent/offline/200-disabled.png
--- a/chrome-dino/images/default_200_percent/offline/200-error-offline.png
+++ b/chrome-dino/images/default_200_percent/offline/200-error-offline.png
--- a/chrome-dino/images/default_200_percent/offline/200-offline-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-offline-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-olympic-firemedal-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-olympic-firemedal-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-olympics-equestrian-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-olympics-equestrian-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-olympics-gymnastics-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-olympics-gymnastics-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-olympics-hurdling-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-olympics-hurdling-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-olympics-surfing-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-olympics-surfing-sprite.png
--- a/chrome-dino/images/default_200_percent/offline/200-olympics-swimming-sprite.png
+++ b/chrome-dino/images/default_200_percent/offline/200-olympics-swimming-sprite.png
--- a/chrome-dino/index.html
+++ b/chrome-dino/index.html
--- a/chrome-dino/offline.js
+++ b/chrome-dino/offline.js
@ -0,0 +1 @@
+{"version":2.0,"fileList":["1_hurdling.html","2_gymnastics.html","3_surfing.html","4_swimming.html","5_equestrian.html","appmanifest.json","index.html","register-sw.js","sw.js","icons/icon-114.png","icons/icon-128.png","icons/icon-16.png","icons/icon-256.png","icons/icon-32.png","images/default_100_percent/offline/100-disabled.png","images/default_100_percent/offline/100-error-offline.png","images/default_100_percent/offline/100-offline-sprite.png","images/default_100_percent/offline/100-olympic-firemedal-sprite.png","images/default_100_percent/offline/100-olympics-equestrian-sprite.png","images/default_100_percent/offline/100-olympics-gymnastics-sprite.png","images/default_100_percent/offline/100-olympics-hurdling-sprite.png","images/default_100_percent/offline/100-olympics-surfing-sprite.png","images/default_100_percent/offline/100-olympics-swimming-sprite.png","images/default_200_percent/offline/200-disabled.png","images/default_200_percent/offline/200-error-offline.png","images/default_200_percent/offline/200-offline-sprite.png","images/default_200_percent/offline/200-olympic-firemedal-sprite.png","images/default_200_percent/offline/200-olympics-equestrian-sprite.png","images/default_200_percent/offline/200-olympics-gymnastics-sprite.png","images/default_200_percent/offline/200-olympics-hurdling-sprite.png","images/default_200_percent/offline/200-olympics-surfing-sprite.png","images/default_200_percent/offline/200-olympics-swimming-sprite.png","scripts/load_time_data.js","scripts/neterror.slim.js","scripts/offline.js","scripts/offline-sprite-definitions.js","scripts/strings.js","styles/interstitial_common.css","styles/interstitial_core.css","styles/neterror.css"]}
--- a/chrome-dino/register-sw.js
+++ b/chrome-dino/register-sw.js
@ -0,0 +1,3 @@
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('sw.js');
+}
--- a/chrome-dino/scripts/load_time_data.js
+++ b/chrome-dino/scripts/load_time_data.js
@ -0,0 +1,215 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview This file defines a singleton which provides access to all data
+ * that is available as soon as the page's resources are loaded (before DOM
+ * content has finished loading). This data includes both localized strings and
+ * any data that is important to have ready from a very early stage (e.g. things
+ * that must be displayed right away).
+ *
+ * Note that loadTimeData is not guaranteed to be consistent between page
+ * refreshes (https://crbug.com/740629) and should not contain values that might
+ * change if the page is re-opened later.
+ */
+
+/** @type {!LoadTimeData} */
+// eslint-disable-next-line no-var
+var loadTimeData;
+
+class LoadTimeData {
+  constructor() {
+    /** @type {Object} */
+    this.data_;
+  }
+
+  /**
+   * Sets the backing object.
+   *
+   * Note that there is no getter for |data_| to discourage abuse of the form:
+   *
+   *     var value = loadTimeData.data()['key'];
+   *
+   * @param {Object} value The de-serialized page data.
+   */
+  set data(value) {
+    expect(!this.data_, 'Re-setting data.');
+    this.data_ = value;
+  }
+
+  /**
+   * @param {string} id An ID of a value that might exist.
+   * @return {boolean} True if |id| is a key in the dictionary.
+   */
+  valueExists(id) {
+    return id in this.data_;
+  }
+
+  /**
+   * Fetches a value, expecting that it exists.
+   * @param {string} id The key that identifies the desired value.
+   * @return {*} The corresponding value.
+   */
+  getValue(id) {
+    expect(this.data_, 'No data. Did you remember to include strings.js?');
+    const value = this.data_[id];
+    expect(typeof value !== 'undefined', 'Could not find value for ' + id);
+    return value;
+  }
+
+  /**
+   * As above, but also makes sure that the value is a string.
+   * @param {string} id The key that identifies the desired string.
+   * @return {string} The corresponding string value.
+   */
+  getString(id) {
+    const value = this.getValue(id);
+    expectIsType(id, value, 'string');
+    return /** @type {string} */ (value);
+  }
+
+  /**
+   * Returns a formatted localized string where $1 to $9 are replaced by the
+   * second to the tenth argument.
+   * @param {string} id The ID of the string we want.
+   * @param {...(string|number)} var_args The extra values to include in the
+   *     formatted output.
+   * @return {string} The formatted string.
+   */
+  getStringF(id, var_args) {
+    const value = this.getString(id);
+    if (!value) {
+      return '';
+    }
+
+    const args = Array.prototype.slice.call(arguments);
+    args[0] = value;
+    return this.substituteString.apply(this, args);
+  }
+
+  /**
+   * Returns a formatted localized string where $1 to $9 are replaced by the
+   * second to the tenth argument. Any standalone $ signs must be escaped as
+   * $$.
+   * @param {string} label The label to substitute through.
+   *     This is not an resource ID.
+   * @param {...(string|number)} var_args The extra values to include in the
+   *     formatted output.
+   * @return {string} The formatted string.
+   */
+  substituteString(label, var_args) {
+    const varArgs = arguments;
+    return label.replace(/\$(.|$|\n)/g, function(m) {
+      expect(m.match(/\$[$1-9]/), 'Unescaped $ found in localized string.');
+      return m === '$$' ? '$' : varArgs[m[1]];
+    });
+  }
+
+  /**
+   * Returns a formatted string where $1 to $9 are replaced by the second to
+   * tenth argument, split apart into a list of pieces describing how the
+   * substitution was performed. Any standalone $ signs must be escaped as $$.
+   * @param {string} label A localized string to substitute through.
+   *     This is not an resource ID.
+   * @param {...(string|number)} var_args The extra values to include in the
+   *     formatted output.
+   * @return {!Array<!{value: string, arg: (null|string)}>} The formatted
+   *     string pieces.
+   */
+  getSubstitutedStringPieces(label, var_args) {
+    const varArgs = arguments;
+    // Split the string by separately matching all occurrences of $1-9 and of
+    // non $1-9 pieces.
+    const pieces = (label.match(/(\$[1-9])|(([^$]|\$([^1-9]|$))+)/g) ||
+                    []).map(function(p) {
+      // Pieces that are not $1-9 should be returned after replacing $$
+      // with $.
+      if (!p.match(/^\$[1-9]$/)) {
+        expect(
+            (p.match(/\$/g) || []).length % 2 === 0,
+            'Unescaped $ found in localized string.');
+        return {value: p.replace(/\$\$/g, '$'), arg: null};
+      }
+
+      // Otherwise, return the substitution value.
+      return {value: varArgs[p[1]], arg: p};
+    });
+
+    return pieces;
+  }
+
+  /**
+   * As above, but also makes sure that the value is a boolean.
+   * @param {string} id The key that identifies the desired boolean.
+   * @return {boolean} The corresponding boolean value.
+   */
+  getBoolean(id) {
+    const value = this.getValue(id);
+    expectIsType(id, value, 'boolean');
+    return /** @type {boolean} */ (value);
+  }
+
+  /**
+   * As above, but also makes sure that the value is an integer.
+   * @param {string} id The key that identifies the desired number.
+   * @return {number} The corresponding number value.
+   */
+  getInteger(id) {
+    const value = this.getValue(id);
+    expectIsType(id, value, 'number');
+    expect(value === Math.floor(value), 'Number isn\'t integer: ' + value);
+    return /** @type {number} */ (value);
+  }
+
+  /**
+   * Override values in loadTimeData with the values found in |replacements|.
+   * @param {Object} replacements The dictionary object of keys to replace.
+   */
+  overrideValues(replacements) {
+    expect(
+        typeof replacements === 'object',
+        'Replacements must be a dictionary object.');
+    for (const key in replacements) {
+      this.data_[key] = replacements[key];
+    }
+  }
+
+  /** Reset loadTimeData's data to empty. Should only be used in tests. */
+  resetForTesting() {
+    this.data_ = {};
+  }
+}
+
+  /**
+   * Checks condition, throws error message if expectation fails.
+   * @param {*} condition The condition to check for truthiness.
+   * @param {string} message The message to display if the check fails.
+   */
+  function expect(condition, message) {
+    if (!condition) {
+      throw new Error(
+          'Unexpected condition on ' + document.location.href + ': ' + message);
+    }
+  }
+
+  /**
+   * Checks that the given value has the given type.
+   * @param {string} id The id of the value (only used for error message).
+   * @param {*} value The value to check the type on.
+   * @param {string} type The type we expect |value| to be.
+   */
+  function expectIsType(id, value, type) {
+    expect(
+        typeof value === type, '[' + value + '] (' + id + ') is not a ' + type);
+  }
+
+  expect(!loadTimeData, 'should only include this file once');
+  loadTimeData = new LoadTimeData;
+
+  // Expose |loadTimeData| directly on |window|, since within a JS module the
+  // scope is local and not all files have been updated to import the exported
+  // |loadTimeData| explicitly.
+  window.loadTimeData = loadTimeData;
+
+  // console.warn('crbug/1173575, non-JS module files deprecated.');
--- a/chrome-dino/scripts/neterror.slim.js
+++ b/chrome-dino/scripts/neterror.slim.js
@ -0,0 +1,39 @@
+// Copyright 2013 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const HIDDEN_CLASS = 'hidden';
+
+// Subframes use a different layout but the same html file.  This is to make it
+// easier to support platforms that load the error page via different
+// mechanisms (Currently just iOS). We also use the subframe style for portals
+// as they are embedded like subframes and can't be interacted with by the user.
+let isSubFrame = false;
+if (window.top.location !== window.location || window.portalHost) {
+    document.documentElement.setAttribute('subframe', '');
+    isSubFrame = true;
+}
+
+// Adds an icon class to the list and removes classes previously set.
+function updateIconClass(newClass) {
+    const frameSelector = isSubFrame ? '#sub-frame-error' : '#main-frame-error';
+    const iconEl = document.querySelector(frameSelector + ' .icon');
+
+    if (iconEl.classList.contains(newClass)) {
+        return;
+    }
+
+    iconEl.className = 'icon ' + newClass;
+}
+
+
+function onDocumentLoad() {
+    const iconClass = loadTimeData.valueExists('iconClass') &&
+        loadTimeData.getValue('iconClass');
+    updateIconClass(iconClass);
+    if (!isSubFrame && iconClass === 'icon-offline') {
+        document.documentElement.classList.add('offline');
+        new Runner('.interstitial-wrapper');
+    }
+}
+document.addEventListener('DOMContentLoaded', onDocumentLoad);
--- a/chrome-dino/scripts/offline-sprite-definitions.js
+++ b/chrome-dino/scripts/offline-sprite-definitions.js
@ -0,0 +1,687 @@
+// Copyright (c) 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/* @const */
+const GAME_TYPE = ['type_1', 'type_2', 'type_3', 'type_4', 'type_5'];
+
+/**
+ * Obstacle definitions.
+ * minGap: minimum pixel space between obstacles.
+ * multipleSpeed: Speed at which multiples are allowed.
+ * speedOffset: speed faster / slower than the horizon.
+ * minSpeed: Minimum speed which the obstacle can make an appearance.
+ *
+ * @typedef {{
+ *   type: string,
+ *   width: number,
+ *   height: number,
+ *   yPos: number,
+ *   multipleSpeed: number,
+ *   minGap: number,
+ *   minSpeed: number,
+ *   collisionBoxes: Array<CollisionBox>,
+ * }}
+ */
+let ObstacleType;
+
+/**
+ * T-Rex runner sprite definitions.
+ */
+Runner.spriteDefinitionByType = {
+  original: {
+    LDPI: {
+      BACKGROUND_EL: {x: 86, y: 2},
+      CACTUS_LARGE: {x: 332, y: 2},
+      CACTUS_SMALL: {x: 228, y: 2},
+      OBSTACLE_2: {x: 332, y: 2},
+      OBSTACLE: {x: 228, y: 2},
+      CLOUD: {x: 86, y: 2},
+      HORIZON: {x: 2, y: 54},
+      MOON: {x: 484, y: 2},
+      PTERODACTYL: {x: 134, y: 2},
+      RESTART: {x: 2, y: 68},
+      TEXT_SPRITE: {x: 655, y: 2},
+      TREX: {x: 848, y: 2},
+      STAR: {x: 645, y: 2},
+      COLLECTABLE: {x: 2, y: 2},
+      ALT_GAME_END: {x: 121, y: 2}
+    },
+    HDPI: {
+      BACKGROUND_EL: {x: 166, y: 2},
+      CACTUS_LARGE: {x: 652, y: 2},
+      CACTUS_SMALL: {x: 446, y: 2},
+      OBSTACLE_2: {x: 652, y: 2},
+      OBSTACLE: {x: 446, y: 2},
+      CLOUD: {x: 166, y: 2},
+      HORIZON: {x: 2, y: 104},
+      MOON: {x: 954, y: 2},
+      PTERODACTYL: {x: 260, y: 2},
+      RESTART: {x: 2, y: 130},
+      TEXT_SPRITE: {x: 1294, y: 2},
+      TREX: {x: 1678, y: 2},
+      STAR: {x: 1276, y: 2},
+      COLLECTABLE: {x: 4, y: 4},
+      ALT_GAME_END: {x: 242, y: 4}
+    },
+    MAX_GAP_COEFFICIENT: 1.5,
+    MAX_OBSTACLE_LENGTH: 3,
+    HAS_CLOUDS: 1,
+    BOTTOM_PAD: 10,
+    TREX: {
+      WAITING_1: {x: 44, w: 44, h: 47, xOffset: 0},
+      WAITING_2: {x: 0, w: 44, h: 47, xOffset: 0},
+      RUNNING_1: {x: 88, w: 44, h: 47, xOffset: 0},
+      RUNNING_2: {x: 132, w: 44, h: 47, xOffset: 0},
+      JUMPING: {x: 0, w: 44, h: 47, xOffset: 0},
+      CRASHED: {x: 220, w: 44, h: 47, xOffset: 0},
+      COLLISION_BOXES: [
+        new CollisionBox(22, 0, 17, 16), new CollisionBox(1, 18, 30, 9),
+        new CollisionBox(10, 35, 14, 8), new CollisionBox(1, 24, 29, 5),
+        new CollisionBox(5, 30, 21, 4), new CollisionBox(9, 34, 15, 4)
+      ]
+    },
+    /** @type {Array<ObstacleType>} */
+    OBSTACLES: [
+      {
+        type: 'CACTUS_SMALL',
+        width: 17,
+        height: 35,
+        yPos: 105,
+        multipleSpeed: 4,
+        minGap: 120,
+        minSpeed: 0,
+        collisionBoxes: [
+          new CollisionBox(0, 7, 5, 27), new CollisionBox(4, 0, 6, 34),
+          new CollisionBox(10, 4, 7, 14)
+        ]
+      },
+      {
+        type: 'CACTUS_LARGE',
+        width: 25,
+        height: 50,
+        yPos: 90,
+        multipleSpeed: 7,
+        minGap: 120,
+        minSpeed: 0,
+        collisionBoxes: [
+          new CollisionBox(0, 12, 7, 38), new CollisionBox(8, 0, 7, 49),
+          new CollisionBox(13, 10, 10, 38)
+        ]
+      },
+      {
+        type: 'PTERODACTYL',
+        width: 46,
+        height: 40,
+        yPos: [100, 75, 50],    // Variable height.
+        yPosMobile: [100, 50],  // Variable height mobile.
+        multipleSpeed: 999,
+        minSpeed: 8.5,
+        minGap: 150,
+        collisionBoxes: [
+          new CollisionBox(15, 15, 16, 5), new CollisionBox(18, 21, 24, 6),
+          new CollisionBox(2, 14, 4, 3), new CollisionBox(6, 10, 4, 7),
+          new CollisionBox(10, 8, 6, 9)
+        ],
+        numFrames: 2,
+        frameRate: 1000 / 6,
+        speedOffset: .8
+      },
+      {
+        type: 'COLLECTABLE',
+        width: 12,
+        height: 38,
+        yPos: 90,
+        multipleSpeed: 999,
+        minGap: 999,
+        minSpeed: 0,
+        collisionBoxes: [new CollisionBox(0, 0, 12, 38)]
+      }
+    ],
+    BACKGROUND_EL: {
+      'CLOUD': {
+        HEIGHT: 14,
+        MAX_CLOUD_GAP: 400,
+        MAX_SKY_LEVEL: 30,
+        MIN_CLOUD_GAP: 100,
+        MIN_SKY_LEVEL: 71,
+        OFFSET: 4,
+        WIDTH: 46,
+        X_POS: 1,
+        Y_POS: 120
+      }
+    },
+    BACKGROUND_EL_CONFIG: {
+      MAX_BG_ELS: 1,
+      MAX_GAP: 400,
+      MIN_GAP: 100,
+      POS: 0,
+      SPEED: 0.5,
+      Y_POS: 125
+    },
+    LINES: [
+      {SOURCE_X: 2, SOURCE_Y: 52, WIDTH: 600, HEIGHT: 12, YPOS: 127},
+    ],
+    ALT_GAME_END_CONFIG: {
+      WIDTH: 15,
+      HEIGHT: 17,
+      X_OFFSET: 0,
+      Y_OFFSET: 0,
+    },
+    ALT_GAME_OVER_TEXT_CONFIG: {
+      TEXT_X: 14,
+      TEXT_Y: 2,
+      TEXT_WIDTH: 108,
+      TEXT_HEIGHT: 15,
+      FLASH_DURATION: 1500
+    }
+  },
+  type_1: {
+    LDPI: {
+      OBSTACLE_1: {x: 631, y: 2},
+      OBSTACLE_2: {x: 656, y: 2},
+      OBSTACLE_3: {x: 697, y: 2},
+      OBSTACLE_4: {x: 754, y: 2},
+      OBSTACLE_5: {x: 781, y: 2},
+      OBSTACLE_6: {x: 826, y: 2},
+      BACKGROUND_EL: {x: 0, y: 120},
+      CLOUD: {x: 890, y: 2},
+      HORIZON: {x: 2, y: 54},
+      TREX: {x: 252, y: 2}
+    },
+    HDPI: {
+      OBSTACLE_1: {x: 1262, y: 2},
+      OBSTACLE_2: {x: 1312, y: 2},
+      OBSTACLE_3: {x: 1394, y: 2},
+      OBSTACLE_4: {x: 1508, y: 2},
+      OBSTACLE_5: {x: 1562, y: 2},
+      OBSTACLE_6: {x: 1652, y: 2},
+      BACKGROUND_EL: {x: 0, y: 240},
+      CLOUD: {x: 1780, y: 3},
+      HORIZON: {x: 4, y: 108},
+      TREX: {x: 504, y: 2}
+    },
+    ALT_GAME_END_CONFIG: {WIDTH: 15, HEIGHT: 17, X_OFFSET: 19, Y_OFFSET: 17},
+    MAX_GAP_COEFFICIENT: 0.56,
+    MAX_OBSTACLE_LENGTH: 1,
+    HAS_CLOUDS: 1,
+    BOTTOM_PAD: 10,
+    TREX: {
+      MAX_JUMP_HEIGHT: 50,
+      MIN_JUMP_HEIGHT: 50,
+      INITIAL_JUMP_VELOCITY: -10,
+      RUNNING_1: {x: 137, w: 44, h: 49, xOffset: 0},
+      RUNNING_2: {x: 183, w: 44, h: 47, xOffset: 0},
+      CRASHED: {x: 335, w: 44, h: 47, xOffset: 0},
+      JUMPING: {x: 230, w: 59, h: 49, xOffset: 6},
+      COLLISION_BOXES: [
+        new CollisionBox(22, 0, 17, 16), new CollisionBox(0, 16, 32, 9),
+        new CollisionBox(3, 24, 27, 6), new CollisionBox(5, 30, 21, 4)
+      ]
+    },
+    OBSTACLES: [
+      {
+        type: 'OBSTACLE_1',
+        width: 24,
+        height: 60,
+        yPos: 106,
+        multipleSpeed: 4,
+        minGap: 70,
+        minSpeed: 0,
+        collisionBoxes: [
+          new CollisionBox(0, 0, 3, 26), new CollisionBox(3, 5, 8, 31),
+          new CollisionBox(11, 24, 11, 10)
+        ]
+      },
+      {
+        type: 'OBSTACLE_2',
+        width: 40,
+        height: 60,
+        yPos: 106,
+        multipleSpeed: 4,
+        minGap: 90,
+        minSpeed: 5,
+        collisionBoxes: [
+          new CollisionBox(0, 0, 3, 26), new CollisionBox(3, 5, 24, 31),
+          new CollisionBox(27, 24, 11, 10)
+        ]
+      },
+      {
+        type: 'OBSTACLE_3',
+        width: 57,
+        height: 60,
+        yPos: 106,
+        multipleSpeed: 4,
+        minGap: 100,
+        minSpeed: 7,
+        collisionBoxes: [
+          new CollisionBox(0, 0, 3, 26), new CollisionBox(3, 5, 40, 31),
+          new CollisionBox(27, 43, 11, 10)
+        ]
+      },
+      {
+        type: 'OBSTACLE_4',
+        width: 27,
+        height: 44,
+        yPos: 102,
+        multipleSpeed: 7,
+        minGap: 110,
+        minSpeed: 0,
+        collisionBoxes: [
+          new CollisionBox(0, 0, 3, 26), new CollisionBox(3, 3, 8, 31),
+          new CollisionBox(11, 24, 11, 10)
+        ]
+      },
+      {
+        type: 'OBSTACLE_5',
+        width: 45,
+        height: 44,
+        yPos: 102,
+        multipleSpeed: 7,
+        minGap: 120,
+        minSpeed: 7.5,
+        collisionBoxes: [
+          new CollisionBox(0, 0, 4, 26), new CollisionBox(4, 3, 26, 31),
+          new CollisionBox(30, 30, 12, 11)
+        ]
+      },
+      {
+        type: 'OBSTACLE_6',
+        width: 63,
+        height: 44,
+        yPos: 102,
+        multipleSpeed: 7,
+        minGap: 140,
+        minSpeed: 7.5,
+        collisionBoxes: [
+          new CollisionBox(0, 0, 3, 26), new CollisionBox(4, 3, 44, 39),
+          new CollisionBox(48, 24, 12, 11)
+        ]
+      }
+    ],
+    BACKGROUND_EL: {
+      'BACKGROUND_0': {HEIGHT: 93, WIDTH: 423, Y_POS: 120, X_POS: 1, OFFSET: 4}
+    },
+    BACKGROUND_EL_CONFIG: {
+      MAX_BG_ELS: 1,
+      MAX_GAP: 600,
+      MIN_GAP: 600,
+      POS: 0,
+      SPEED: 0.2,
+      Y_POS: 125
+    },
+    LINES: [
+      {SOURCE_X: 2, SOURCE_Y: 54, WIDTH: 600, HEIGHT: 12, YPOS: 125},
+      {SOURCE_X: 2, SOURCE_Y: 84, WIDTH: 600, HEIGHT: 12, YPOS: 138}
+    ]
+  },
+  type_2: {
+    LDPI: {
+      OBSTACLE_1: {x: 655, y: 2},
+      BACKGROUND_EL: {x: 0, y: 60},
+      CLOUD: {x: 963, y: 3},
+      HORIZON: {x: 2, y: 54},
+      TREX: {x: 252, y: 2}
+    },
+    HDPI: {
+      OBSTACLE_1: {x: 1310, y: 2},
+      BACKGROUND_EL: {x: 0, y: 120},
+      CLOUD: {x: 1926, y: 3},
+      HORIZON: {x: 4, y: 108},
+      TREX: {x: 504, y: 2},
+    },
+    ALT_GAME_END_CONFIG: {WIDTH: 15, HEIGHT: 17, X_OFFSET: 19, Y_OFFSET: 18},
+    MAX_GAP_COEFFICIENT: 0.56,
+    MAX_OBSTACLE_LENGTH: 1,
+    HAS_CLOUDS: 0,
+    BOTTOM_PAD: 10,
+    TREX: {
+      MAX_JUMP_HEIGHT: 30,
+      MIN_JUMP_HEIGHT: 30,
+      INITIAL_JUMP_VELOCITY: -19,
+      RUNNING_1: {x: 137, w: 44, h: 49, xOffset: 0},
+      RUNNING_2: {x: 183, w: 44, h: 49, xOffset: 0},
+      CRASHED: {x: 359, w: 44, h: 43, xOffset: 0},
+      JUMPING: {x: 228, w: 43, h: 44, xOffset: 2.5},
+      COLLISION_BOXES: [
+        new CollisionBox(22, 0, 17, 16), new CollisionBox(17, 37, 7, 7),
+        new CollisionBox(10, 17, 19, 20)
+      ]
+    },
+    OBSTACLES: [{
+      type: 'OBSTACLE_1',
+      width: 54,
+      height: 54,
+      yPos: 90,
+      multipleSpeed: 4,
+      minGap: 70,
+      minSpeed: 0,
+      collisionBoxes: [
+        new CollisionBox(0, 8, 20, 43), new CollisionBox(21, 6, 8, 42),
+        new CollisionBox(32, 2, 18, 49)
+      ]
+    }],
+    BACKGROUND_EL: {
+      'BACKGROUND_0': {HEIGHT: 120, WIDTH: 89, Y_POS: 40, X_POS: 1, OFFSET: 4},
+      'BACKGROUND_1':
+          {HEIGHT: 108, WIDTH: 130, Y_POS: 40, X_POS: 92, OFFSET: 4},
+      'BACKGROUND_2':
+          {HEIGHT: 28, WIDTH: 204, Y_POS: 40, X_POS: 223, OFFSET: 4},
+    },
+    BACKGROUND_EL_CONFIG: {
+      MAX_BG_ELS: 2,
+      MAX_GAP: 550,
+      MIN_GAP: 400,
+      POS: 0,
+      SPEED: 0.5,
+      Y_POS: 125
+    },
+    LINES: [{SOURCE_X: 2, SOURCE_Y: 54, WIDTH: 600, HEIGHT: 5, YPOS: 125}]
+  },
+  type_3: {
+    LDPI: {
+      OBSTACLE_1: {x: 611, y: 2},
+      OBSTACLE_2: {x: 634, y: 2},
+      OBSTACLE_3: {x: 671, y: 2},
+      OBSTACLE_4: {x: 722, y: 2},
+      OBSTACLE_5: {x: 762, y: 2},
+      OBSTACLE_6: {x: 806, y: 2},
+      BACKGROUND_EL: {x: 0, y: 65},
+      CLOUD: {x: 888, y: 2},
+      HORIZON: {x: 2, y: 58},
+      TREX: {x: 252, y: 2}
+    },
+    HDPI: {
+      OBSTACLE_1: {x: 1222, y: 2},
+      OBSTACLE_2: {x: 1268, y: 2},
+      OBSTACLE_3: {x: 1342, y: 2},
+      OBSTACLE_4: {x: 1444, y: 2},
+      OBSTACLE_5: {x: 1524, y: 2},
+      OBSTACLE_6: {x: 1612, y: 2},
+      BACKGROUND_EL: {x: 0, y: 130},
+      CLOUD: {x: 1776, y: 3},
+      HORIZON: {x: 4, y: 116},
+      TREX: {x: 504, y: 2}
+    },
+    ALT_GAME_END_CONFIG: {WIDTH: 15, HEIGHT: 17, X_OFFSET: 23, Y_OFFSET: 17},
+    MAX_GAP_COEFFICIENT: 0.56,
+    MAX_OBSTACLE_LENGTH: 1,
+    BOTTOM_PAD: 10,
+    HAS_CLOUDS: 1,
+    TREX: {
+      MAX_JUMP_HEIGHT: 45,
+      MIN_JUMP_HEIGHT: 30,
+      INITIAL_JUMP_VELOCITY: -10,
+      RUNNING_1: {x: 104, w: 51, h: 57, xOffset: 0},
+      RUNNING_2: {x: 156, w: 51, h: 57, xOffset: 0},
+      CRASHED: {x: 309, w: 51, h: 57, xOffset: 0},
+      JUMPING: {x: 208, w: 51, h: 57, xOffset: 0},
+      COLLISION_BOXES:
+          [new CollisionBox(28, 35, 19, 11), new CollisionBox(3, 44, 26, 4)]
+    },
+    OBSTACLES: [
+      {
+        type: 'OBSTACLE_1',
+        width: 24,
+        height: 18,
+        yPos: 117,
+        multipleSpeed: 4,
+        minGap: 50,
+        minSpeed: 0,
+        collisionBoxes: [
+          new CollisionBox(11, 2, 3, 2), new CollisionBox(7, 4, 11, 10),
+          new CollisionBox(2, 9, 5, 6)
+        ]
+      },
+      {
+        type: 'OBSTACLE_2',
+        width: 40,
+        height: 22,
+        yPos: 117,
+        multipleSpeed: 4,
+        minGap: 60,
+        minSpeed: 4.5,
+        collisionBoxes: [
+          new CollisionBox(11, 2, 3, 2), new CollisionBox(7, 5, 23, 10),
+          new CollisionBox(2, 9, 5, 6)
+        ]
+      },
+      {
+        type: 'OBSTACLE_3',
+        width: 49,
+        height: 22,
+        yPos: 117,
+        multipleSpeed: 4,
+        minGap: 80,
+        minSpeed: 7,
+        collisionBoxes: [
+          new CollisionBox(11, 2, 3, 2), new CollisionBox(8, 5, 39, 10),
+          new CollisionBox(2, 9, 5, 6)
+        ]
+      },
+      {
+        type: 'OBSTACLE_4',
+        width: 37,
+        height: 26,
+        yPos: 113,
+        multipleSpeed: 7,
+        minGap: 120,
+        minSpeed: 0,
+        collisionBoxes: [
+          new CollisionBox(4, 16, 5, 8), new CollisionBox(9, 12, 7, 12),
+          new CollisionBox(16, 5, 10, 19)
+        ]
+      },
+      {
+        type: 'OBSTACLE_5',
+        width: 45,
+        height: 30,
+        yPos: 113,
+        multipleSpeed: 7,
+        minGap: 120,
+        minSpeed: 5.5,
+        collisionBoxes: [
+          new CollisionBox(4, 16, 5, 8), new CollisionBox(9, 12, 7, 12),
+          new CollisionBox(16, 5, 10, 19), new CollisionBox(26, 14, 13, 11)
+        ]
+      },
+      {
+        type: 'OBSTACLE_6',
+        width: 79,
+        height: 30,
+        yPos: 113,
+        multipleSpeed: 7,
+        minGap: 150,
+        minSpeed: 7,
+        collisionBoxes: [
+          new CollisionBox(4, 16, 5, 8), new CollisionBox(9, 12, 7, 12),
+          new CollisionBox(16, 5, 10, 19), new CollisionBox(26, 14, 13, 11),
+          new CollisionBox(40, 18, 10, 6), new CollisionBox(50, 12, 10, 12),
+          new CollisionBox(57, 5, 10, 19)
+        ]
+      }
+    ],
+    BACKGROUND_EL: {
+      'BACKGROUND_0': {
+        HEIGHT: 78,
+        OFFSET: 6,
+        WIDTH: 105,
+        X_POS: 425,
+        FIXED_X_POS: 0,
+        FIXED_Y_POS_1: 54,
+        FIXED_Y_POS_2: 51,
+        FIXED: true
+      }
+    },
+    BACKGROUND_EL_CONFIG: {
+      MAX_BG_ELS: 1,
+      MAX_GAP: 550,
+      MIN_GAP: 400,
+      POS: 0,
+      SPEED: 0.2,
+      Y_POS: 125,
+      MS_PER_FRAME: 250
+    },
+    LINES: [
+      {SOURCE_X: 2, SOURCE_Y: 58, WIDTH: 600, HEIGHT: 8, YPOS: 125},
+    ]
+  },
+  type_4: {
+    LDPI: {
+      OBSTACLE_1: {x: 514, y: 2},
+      OBSTACLE_2: {x: 543, y: 2},
+      OBSTACLE_3: {x: 599, y: 2},
+      OBSTACLE_4: {x: 643, y: 2},
+      BACKGROUND_EL: {x: 811, y: 2},
+      CLOUD: {x: 888, y: 2},
+      WALL: {x: 2, y: 54},
+      HORIZON: {x: 2, y: 81},
+      TREX: {x: 252, y: 2}
+    },
+    HDPI: {
+      OBSTACLE_1: {x: 1028, y: 2},
+      OBSTACLE_2: {x: 1086, y: 2},
+      OBSTACLE_3: {x: 1198, y: 2},
+      OBSTACLE_4: {x: 1286, y: 2},
+      BACKGROUND_EL: {x: 1622, y: 4},
+      CLOUD: {x: 1776, y: 3},
+      WALL: {x: 2, y: 108},
+      HORIZON: {x: 4, y: 162},
+      TREX: {x: 504, y: 2}
+    },
+    ALT_GAME_END_CONFIG: {WIDTH: 15, HEIGHT: 17, X_OFFSET: 38, Y_OFFSET: 16},
+    MAX_GAP_COEFFICIENT: 0.56,
+    MAX_OBSTACLE_LENGTH: 1,
+    BOTTOM_PAD: 43,
+    HAS_CLOUDS: 0,
+    TREX: {
+      GRAVITY: 0.36,
+      MAX_JUMP_HEIGHT: 20,
+      MIN_JUMP_HEIGHT: 18,
+      INITIAL_JUMP_VELOCITY: -20,
+      INVERT_JUMP: 1,
+      RUNNING_1: {x: 0, w: 65, h: 30, xOffset: 0},
+      RUNNING_2: {x: 67, w: 65, h: 30, xOffset: 0},
+      CRASHED: {x: 196, w: 65, h: 30, xOffset: 0},
+      JUMPING: {x: 133.5, w: 65, h: 30, xOffset: 0},
+      COLLISION_BOXES: [
+        new CollisionBox(17, 4, 49, 9), new CollisionBox(20, 17, 23, 4),
+        new CollisionBox(19, 20, 10, 7), new CollisionBox(17, 13, 42, 4)
+      ]
+    },
+    OBSTACLES: [
+      {
+        type: 'OBSTACLE_1',
+        width: 27,
+        height: 11,
+        yPos: 80,
+        multipleSpeed: 4,
+        minGap: 120,
+        minSpeed: 0,
+        collisionBoxes: [new CollisionBox(0, 2, 27, 8)]
+      },
+      {
+        type: 'OBSTACLE_2',
+        width: 54,
+        height: 11,
+        yPos: 80,
+        multipleSpeed: 4,
+        minGap: 140,
+        minSpeed: 7,
+        collisionBoxes: [new CollisionBox(0, 2, 52, 8)]
+      },
+      {
+        type: 'OBSTACLE_3',
+        width: 42,
+        height: 16,
+        yPos: 76,
+        multipleSpeed: 4,
+        minGap: 170,
+        minSpeed: 3,
+        collisionBoxes: [new CollisionBox(0, 2, 40, 14)]
+      }
+    ],
+    BACKGROUND_EL_CONFIG: {
+      SPEED: 0.5,
+      POS: 0,
+      MAX_BG_ELS: 3,
+      MIN_GAP: 100,
+      MAX_GAP: 400,
+      Y_POS: 100
+    },
+    BACKGROUND_EL: {
+      'BACKGROUND_0':
+          {HEIGHT: 32, WIDTH: 30, Y_POS: 2, X_POS: 811, OFFSET: -65},
+      'BACKGROUND_1':
+          {HEIGHT: 37, WIDTH: 40, Y_POS: 2, X_POS: 842, OFFSET: -13},
+      'BACKGROUND_2': {HEIGHT: 33, WIDTH: 82, Y_POS: 2, X_POS: 727, OFFSET: -40}
+    },
+    LINES: [
+      {SOURCE_X: 2, SOURCE_Y: 81, WIDTH: 600, HEIGHT: 12, YPOS: 78},
+      {SOURCE_X: 2, SOURCE_Y: 54, WIDTH: 600, HEIGHT: 12, YPOS: 56}
+    ]
+  },
+  type_5: {
+    LDPI: {
+      OBSTACLE_1: {x: 458, y: 2},
+      OBSTACLE_2: {x: 458, y: 2},
+      BACKGROUND_EL: {x: 0, y: 0},
+      CLOUD: {x: 482, y: 2},
+      WALL: {x: 2, y: 54},
+      HORIZON: {x: 2, y: 77},
+      TREX: {x: 252, y: 2}
+    },
+    HDPI: {
+      OBSTACLE_1: {x: 916, y: 2},
+      OBSTACLE_2: {x: 916, y: 2},
+      BACKGROUND_EL: {x: 0, y: 0},
+      CLOUD: {x: 963, y: 3},
+      WALL: {x: 2, y: 108},
+      HORIZON: {x: 4, y: 154},
+      TREX: {x: 504, y: 2}
+    },
+    ALT_GAME_END_CONFIG: {WIDTH: 15, HEIGHT: 17, X_OFFSET: 24, Y_OFFSET: 23},
+    MAX_GAP_COEFFICIENT: 2.5,
+    MAX_OBSTACLE_LENGTH: 1,
+    BOTTOM_PAD: 12,
+    HAS_CLOUDS: 1,
+    TREX: {
+      MAX_JUMP_HEIGHT: 30,
+      MIN_JUMP_HEIGHT: 30,
+      INITIAL_JUMP_VELOCITY: -10,
+      RUNNING_1: {x: 0, w: 51, h: 67, xOffset: 0},
+      RUNNING_2: {x: 50, w: 51, h: 67, xOffset: 0},
+      CRASHED: {x: 156, w: 51, h: 67, xOffset: 0},
+      JUMPING: {x: 103, w: 54, h: 67, xOffset: 0},
+      COLLISION_BOXES: [
+        new CollisionBox(35, 30, 13, 9), new CollisionBox(19, 51, 22, 9),
+        new CollisionBox(9, 51, 9, 13), new CollisionBox(4, 27, 31, 28)
+      ]
+    },
+    OBSTACLES: [{
+      type: 'OBSTACLE_1',
+      width: 21,
+      height: 57,
+      yPos: 93,
+      multipleSpeed: 999,
+      minGap: 40,
+      minSpeed: 0,
+      collisionBoxes: [
+        new CollisionBox(0, 0, 3, 41), new CollisionBox(3, 5, 14, 39),
+        new CollisionBox(16, 7, 4, 43)
+      ]
+    }],
+    BACKGROUND_EL_CONFIG: {
+      MAX_BG_ELS: 4,
+      MAX_GAP: 420,
+      MIN_GAP: 320,
+      POS: 0,
+      SPEED: 0.3,
+      Y_POS: 125
+    },
+    BACKGROUND_EL: {
+      'BACKGROUND_0': {HEIGHT: 40, WIDTH: 170, Y_POS: 100, X_POS: 0, OFFSET: 10}
+    },
+    LINES: [{SOURCE_X: 2, SOURCE_Y: 71, WIDTH: 600, HEIGHT: 12, YPOS: 123}]
+  }
+};
--- a/chrome-dino/scripts/offline.js
+++ b/chrome-dino/scripts/offline.js
--- a/chrome-dino/scripts/strings.js
+++ b/chrome-dino/scripts/strings.js
@ -0,0 +1,2 @@
+var pageData = {"altGameCommonImage1x":"images/default_100_percent/offline/100-olympic-firemedal-sprites.png","altGameCommonImage2x":"images/default_200_percent/offline/200-olympic-firemedal-sprites.png","dinoGameA11yAriaLabel":"","dinoGameA11yGameOver":"Game over, your score is $1.","dinoGameA11yHighScore":"Your highest score is $1.","dinoGameA11yJump":"Jump!","dinoGameA11ySpeedToggle":"Start slower","dinoGameA11yStartGame":"Game started.","enableAltGameMode":false,"errorCode":"","fontfamily":"'Segoe UI', Tahoma, sans-serif","fontsize":"75%","heading":{"hostName":"dino","msg":"Press space to play"},"iconClass":"icon-offline","language":"en","textdirection":"ltr","title":"chrome://dino/"};
+loadTimeData.data = pageData;
--- a/chrome-dino/style.css
+++ b/chrome-dino/style.css
@ -0,0 +1,209 @@
+/* Copyright 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+html, body {
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.icon {
+  -webkit-user-select: none;
+  user-select: none;
+  display: inline-block;
+}
+
+
+.hidden {
+  display: none;
+}
+
+
+/* Offline page */
+.offline {
+  transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
+              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.offline body {
+  transition: background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+.offline.inverted {
+  background-color: #000;
+  filter: invert(1);
+}
+
+.offline.inverted body {
+  background-color: #fff;
+}
+
+.offline .interstitial-wrapper {
+  color: #2b2b2b;
+  font-size: 0.8em;
+  line-height: 1.55;
+  margin: 0 auto;
+  max-width: 600px;
+  padding-top: 150px;
+  width: 100%;
+}
+
+.offline .runner-container {
+  direction: ltr;
+  height: 150px;
+  max-width: 600px;
+  overflow: hidden;
+  position: absolute;
+  top: 35px;
+  width: 44px;
+}
+
+.offline .runner-canvas {
+  height: 150px;
+  max-width: 600px;
+  opacity: 1;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  z-index: 10;
+}
+
+.offline .controller {
+  background: rgba(247, 247, 247, .1);
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  z-index: 1;
+}
+
+#offline-resources {
+  display: none;
+}
+
+
+.arcade-mode,
+.arcade-mode .runner-container,
+.arcade-mode .runner-canvas {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode #buttons,
+.arcade-mode #main-content {
+  opacity: 0;
+  overflow: hidden;
+}
+
+.arcade-mode .interstitial-wrapper {
+  height: 100vh;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode .runner-container {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  left: 0;
+  margin: auto;
+  right: 0;
+  transform-origin: top center;
+  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
+  z-index: 2;
+}
+
+
+@media (prefers-color-scheme: dark) {
+	
+  body {
+	background-color: #000;
+  }
+
+  .offline .runner-canvas {
+    filter: invert(1);
+  }
+
+  .offline.inverted {
+    background-color: #fff;
+    filter: invert(1);
+  }
+
+  .offline.inverted body {
+    background-color: #fff;
+  }
+
+  h1{filter: invert(1);}
+}
+
+@media (max-width: 420px) {
+  .suggested-left > #control-buttons, .suggested-right > #control-buttons {
+    float: none;
+  }
+  .snackbar {
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    border-radius: 0;
+  }
+}
+
+@media (max-height: 350px) {
+  h1 {
+    margin: 0 0 15px;
+  }
+  .icon-offline {
+    margin: 0 0 10px;
+  }
+  .interstitial-wrapper {
+    margin-top: 5%;
+  }
+  .nav-wrapper {
+    margin-top: 30px;
+  }
+}
+
+@media (min-width: 600px) and (max-width: 736px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+@media (min-width: 420px) and (max-width: 736px) and (min-height: 240px) and (max-height: 420px) and (orientation:landscape) {
+  .interstitial-wrapper {
+    margin-bottom: 100px;
+  }
+}
+
+@media (min-height: 240px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-bottom: 90px;
+  }
+  .icon-offline {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-height: 320px) and (orientation: landscape) {
+  .icon-offline {
+    margin-bottom: 0;
+  }
+  .offline .runner-container {
+    top: 10px;
+  }
+}
+
+@media (max-width: 240px) {
+  .interstitial-wrapper {
+    overflow: inherit;
+    padding: 0 8px;
+  }
+}
--- a/chrome-dino/styles/interstitial_common.css
+++ b/chrome-dino/styles/interstitial_common.css
@ -0,0 +1,517 @@
+/* Copyright 2014 The Chromium Authors. All rights reserved.
+   Use of this source code is governed by a BSD-style license that can be
+   found in the LICENSE file. */
+
+button {
+  border: 0;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: var(--primary-button-text-color);
+  cursor: pointer;
+  float: right;
+  font-size: .875em;
+  margin: 0;
+  padding: 8px 16px;
+  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  user-select: none;
+}
+
+[dir='rtl'] button {
+  float: left;
+}
+
+.bad-clock button,
+.captive-portal button,
+.https-only button,
+.insecure-form button,
+.lookalike-url button,
+.main-frame-blocked button,
+.neterror button,
+.pdf button,
+.ssl button,
+.safe-browsing-billing button {
+  background: var(--primary-button-fill-color);
+}
+
+button:active {
+  background: var(--primary-button-fill-color-active);
+  outline: 0;
+}
+
+#debugging {
+  display: inline;
+  overflow: auto;
+}
+
+.debugging-content {
+  line-height: 1em;
+  margin-bottom: 0;
+  margin-top: 1em;
+}
+
+.debugging-content-fixed-width {
+  display: block;
+  font-family: monospace;
+  font-size: 1.2em;
+  margin-top: 0.5em;
+}
+
+.debugging-title {
+  font-weight: bold;
+}
+
+#details {
+  margin: 0 0 50px;
+}
+
+#details p:not(:first-of-type) {
+  margin-top: 20px;
+}
+
+.secondary-button:active {
+  border-color: white;
+  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3),
+      0 2px 6px 2px rgba(60, 64, 67, .15);
+}
+
+.secondary-button:hover {
+  background: var(--secondary-button-hover-fill-color);
+  border-color: var(--secondary-button-hover-border-color);
+  text-decoration: none;
+}
+
+.error-code {
+  color: var(--error-code-color);
+  font-size: .8em;
+  margin-top: 12px;
+  text-transform: uppercase;
+}
+
+#error-debugging-info {
+  font-size: 0.8em;
+}
+
+h1 {
+  color: var(--heading-color);
+  font-size: 1.6em;
+  font-weight: normal;
+  line-height: 1.25em;
+  margin-bottom: 16px;
+}
+
+h2 {
+  font-size: 1.2em;
+  font-weight: normal;
+}
+
+.icon {
+  height: 72px;
+  margin: 0 0 40px;
+  width: 72px;
+}
+
+input[type=checkbox] {
+  opacity: 0;
+}
+
+input[type=checkbox]:focus ~ .checkbox::after {
+  outline: -webkit-focus-ring-color auto 5px;
+}
+
+.interstitial-wrapper {
+  box-sizing: border-box;
+  font-size: 1em;
+  line-height: 1.6em;
+  margin: 14vh auto 0;
+  max-width: 600px;
+  width: 100%;
+}
+
+#main-message > p {
+  display: inline;
+}
+
+#extended-reporting-opt-in {
+  font-size: .875em;
+  margin-top: 32px;
+}
+
+#extended-reporting-opt-in label {
+  display: grid;
+  grid-template-columns: 1.8em 1fr;
+  position: relative;
+}
+
+#enhanced-protection-message {
+  border-radius: 4px;
+  font-size: 1em;
+  margin-top: 32px;
+  padding: 10px 5px;
+}
+
+#enhanced-protection-message label {
+  display: grid;
+  grid-template-columns: 2.5em 1fr;
+  position: relative;
+}
+
+#enhanced-protection-message div {
+  margin: 0.5em;
+}
+
+#enhanced-protection-message .icon {
+  height: 1.5em;
+  vertical-align: middle;
+  width: 1.5em;
+}
+
+.nav-wrapper {
+  margin-top: 51px;
+}
+
+.nav-wrapper::after {
+  clear: both;
+  content: '';
+  display: table;
+  width: 100%;
+}
+
+.small-link {
+  color: var(--small-link-color);
+  font-size: .875em;
+}
+
+.checkboxes {
+  flex: 0 0 24px;
+}
+
+.checkbox {
+  --padding: .9em;
+  background: transparent;
+  display: block;
+  height: 1em;
+  left: -1em;
+  padding-inline-start: var(--padding);
+  position: absolute;
+  right: 0;
+  top: -.5em;
+  width: 1em;
+}
+
+.checkbox::after {
+  border: 1px solid white;
+  border-radius: 2px;
+  content: '';
+  height: 1em;
+  left: var(--padding);
+  position: absolute;
+  top: var(--padding);
+  width: 1em;
+}
+
+.checkbox::before {
+  background: transparent;
+  border: 2px solid white;
+  border-inline-end-width: 0;
+  border-top-width: 0;
+  content: '';
+  height: .2em;
+  left: calc(.3em + var(--padding));
+  opacity: 0;
+  position: absolute;
+  top: calc(.3em  + var(--padding));
+  transform: rotate(-45deg);
+  width: .5em;
+}
+
+input[type=checkbox]:checked ~ .checkbox::before {
+  opacity: 1;
+}
+
+#recurrent-error-message {
+  background: #ededed;
+  border-radius: 4px;
+  margin-bottom: 16px;
+  margin-top: 12px;
+  padding: 12px 16px;
+}
+
+.showing-recurrent-error-message #extended-reporting-opt-in {
+  margin-top: 16px;
+}
+
+.showing-recurrent-error-message #enhanced-protection-message {
+  margin-top: 16px;
+}
+
+@media (max-width: 700px) {
+  .interstitial-wrapper {
+    padding: 0 10%;
+  }
+
+  #error-debugging-info {
+    overflow: auto;
+  }
+}
+
+@media (max-width: 420px) {
+  button,
+  [dir='rtl'] button,
+  .small-link {
+    float: none;
+    font-size: .825em;
+    font-weight: 500;
+    margin: 0;
+    width: 100%;
+  }
+
+  button {
+    padding: 16px 24px;
+  }
+
+  #details {
+    margin: 20px 0 20px 0;
+  }
+
+  #details p:not(:first-of-type) {
+    margin-top: 10px;
+  }
+
+  .secondary-button:not(.hidden) {
+    display: block;
+    margin-top: 20px;
+    text-align: center;
+    width: 100%;
+  }
+
+  .interstitial-wrapper {
+    padding: 0 5%;
+  }
+
+  #extended-reporting-opt-in {
+    margin-top: 24px;
+  }
+
+  #enhanced-protection-message {
+    margin-top: 24px;
+  }
+
+  .nav-wrapper {
+    margin-top: 30px;
+  }
+}
+
+/**
+ * Mobile specific styling.
+ * Navigation buttons are anchored to the bottom of the screen.
+ * Details message replaces the top content in its own scrollable area.
+ */
+
+@media (max-width: 420px) {
+  .nav-wrapper .secondary-button {
+    border: 0;
+    margin: 16px 0 0;
+    margin-inline-end: 0;
+    padding-bottom: 16px;
+    padding-top: 16px;
+  }
+}
+
+/* Fixed nav. */
+@media (min-width: 240px) and (max-width: 420px) and
+       (min-height: 401px),
+       (min-width: 421px) and (min-height: 240px) and
+       (max-height: 560px) {
+  body .nav-wrapper {
+    background: var(--background-color);
+    bottom: 0;
+    box-shadow: 0 -12px 24px var(--background-color);
+    left: 0;
+    margin: 0 auto;
+    max-width: 736px;
+    padding-inline-end: 24px;
+    padding-inline-start: 24px;
+    position: fixed;
+    right: 0;
+    width: 100%;
+    z-index: 2;
+  }
+
+  .interstitial-wrapper {
+    max-width: 736px;
+  }
+
+  #details,
+  #main-content {
+    padding-bottom: 40px;
+  }
+
+  #details {
+    padding-top: 5.5vh;
+  }
+
+  button.small-link {
+    color: var(--google-blue-600);
+  }
+}
+
+@media (max-width: 420px) and (orientation: portrait),
+       (max-height: 560px) {
+  body {
+    margin: 0 auto;
+  }
+
+  button,
+  [dir='rtl'] button,
+  button.small-link,
+  .nav-wrapper .secondary-button {
+    font-family: Roboto-Regular,Helvetica;
+    font-size: .933em;
+    margin: 6px 0;
+    transform: translatez(0);
+  }
+
+  .nav-wrapper {
+    box-sizing: border-box;
+    padding-bottom: 8px;
+    width: 100%;
+  }
+
+  #details {
+    box-sizing: border-box;
+    height: auto;
+    margin: 0;
+    opacity: 1;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  #details.hidden,
+  #main-content.hidden {
+    height: 0;
+    opacity: 0;
+    overflow: hidden;
+    padding-bottom: 0;
+    transition: none;
+  }
+
+  h1 {
+    font-size: 1.5em;
+    margin-bottom: 8px;
+  }
+
+  .icon {
+    margin-bottom: 5.69vh;
+  }
+
+  .interstitial-wrapper {
+    box-sizing: border-box;
+    margin: 7vh auto 12px;
+    padding: 0 24px;
+    position: relative;
+  }
+
+  .interstitial-wrapper p {
+    font-size: .95em;
+    line-height: 1.61em;
+    margin-top: 8px;
+  }
+
+  #main-content {
+    margin: 0;
+    transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .small-link {
+    border: 0;
+  }
+
+  .suggested-left > #control-buttons,
+  .suggested-right > #control-buttons {
+    float: none;
+    margin: 0;
+  }
+}
+
+@media (min-width: 421px) and (min-height: 500px) and (max-height: 560px) {
+  .interstitial-wrapper {
+    margin-top: 10vh;
+  }
+}
+
+@media (min-height: 400px) and (orientation:portrait) {
+  .interstitial-wrapper {
+    margin-bottom: 145px;
+  }
+}
+
+@media (min-height: 299px) {
+  .nav-wrapper {
+    padding-bottom: 16px;
+  }
+}
+
+@media (max-height: 560px) and (min-height: 240px) and (orientation:landscape) {
+  .extended-reporting-has-checkbox #details {
+    padding-bottom: 80px;
+  }
+}
+
+@media (min-height: 500px) and (max-height: 650px) and (max-width: 414px) and
+       (orientation: portrait) {
+  .interstitial-wrapper {
+    margin-top: 7vh;
+  }
+}
+
+@media (min-height: 650px) and (max-width: 414px) and (orientation: portrait) {
+  .interstitial-wrapper {
+    margin-top: 10vh;
+  }
+}
+
+/* Small mobile screens. No fixed nav. */
+@media (max-height: 400px) and (orientation: portrait),
+       (max-height: 239px) and (orientation: landscape),
+       (max-width: 419px) and (max-height: 399px) {
+  .interstitial-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0;
+  }
+
+  #details {
+    flex: 1 1 auto;
+    order: 0;
+  }
+
+  #main-content {
+    flex: 1 1 auto;
+    order: 0;
+  }
+
+  .nav-wrapper {
+    flex: 0 1 auto;
+    margin-top: 8px;
+    order: 1;
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  button,
+  .nav-wrapper .secondary-button {
+    padding: 16px 24px;
+  }
+
+  button.small-link {
+    color: var(--google-blue-600);
+  }
+}
+
+@media (max-width: 239px) and (orientation: portrait) {
+  .nav-wrapper {
+    padding-inline-end: 0;
+    padding-inline-start: 0;
+  }
+}
--- a/chrome-dino/styles/interstitial_core.css
+++ b/chrome-dino/styles/interstitial_core.css
@ -0,0 +1,100 @@
+:root {
+  --background-color: #fff;
+  --google-blue-100: rgb(210, 227, 252);
+  --google-blue-300: rgb(138, 180, 248);
+  --google-blue-600: rgb(26, 115, 232);
+  --google-blue-700: rgb(25, 103, 210);
+  --google-gray-100: rgb(241, 243, 244);
+  --google-gray-300: rgb(218, 220, 224);
+  --google-gray-500: rgb(154, 160, 166);
+  --google-gray-50: rgb(248, 249, 250);
+  --google-gray-600: rgb(128, 134, 139);
+  --google-gray-700: rgb(95, 99, 104);
+  --google-gray-800: rgb(60, 64, 67);
+  --google-gray-900: rgb(32, 33, 36);
+}
+
+
+/* Copyright 2017 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+a {
+  color: var(--link-color);
+}
+
+body {
+  --background-color: #fff;
+  --error-code-color: var(--google-gray-700);
+  --google-blue-100: rgb(210, 227, 252);
+  --google-blue-300: rgb(138, 180, 248);
+  --google-blue-600: rgb(26, 115, 232);
+  --google-blue-700: rgb(25, 103, 210);
+  --google-gray-100: rgb(241, 243, 244);
+  --google-gray-300: rgb(218, 220, 224);
+  --google-gray-500: rgb(154, 160, 166);
+  --google-gray-50: rgb(248, 249, 250);
+  --google-gray-600: rgb(128, 134, 139);
+  --google-gray-700: rgb(95, 99, 104);
+  --google-gray-800: rgb(60, 64, 67);
+  --google-gray-900: rgb(32, 33, 36);
+  --heading-color: var(--google-gray-900);
+  --link-color: rgb(88, 88, 88);
+  --popup-container-background-color: rgba(0,0,0,.65);
+  --primary-button-fill-color-active: var(--google-blue-700);
+  --primary-button-fill-color: var(--google-blue-600);
+  --primary-button-text-color: #fff;
+  --quiet-background-color: rgb(247, 247, 247);
+  --secondary-button-border-color: var(--google-gray-500);
+  --secondary-button-fill-color: #fff;
+  --secondary-button-hover-border-color: var(--google-gray-600);
+  --secondary-button-hover-fill-color: var(--google-gray-50);
+  --secondary-button-text-color: var(--google-gray-700);
+  --small-link-color: var(--google-gray-700);
+  --text-color: var(--google-gray-700);
+  background: var(--background-color);
+  color: var(--text-color);
+  word-wrap: break-word;
+}
+
+.nav-wrapper .secondary-button {
+  background: var(--secondary-button-fill-color);
+  border: 1px solid var(--secondary-button-border-color);
+  color: var(--secondary-button-text-color);
+  float: none;
+  margin: 0;
+  padding: 8px 16px;
+}
+
+.hidden {
+  display: none;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+  font-size: 125%;
+}
+
+.icon {
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    --background-color: var(--google-gray-900);
+    --error-code-color: var(--google-gray-500);
+    --heading-color: var(--google-gray-500);
+    --link-color: var(--google-blue-300);
+    --primary-button-fill-color-active: rgb(129, 162, 208);
+    --primary-button-fill-color: var(--google-blue-300);
+    --primary-button-text-color: var(--google-gray-900);
+    --quiet-background-color: var(--background-color);
+    --secondary-button-border-color: var(--google-gray-700);
+    --secondary-button-fill-color: var(--google-gray-900);
+    --secondary-button-hover-fill-color: rgb(48, 51, 57);
+    --secondary-button-text-color: var(--google-blue-300);
+    --small-link-color: var(--google-blue-300);
+    --text-color: var(--google-gray-500);
+  }
+}
--- a/chrome-dino/styles/neterror.css
+++ b/chrome-dino/styles/neterror.css
@ -0,0 +1,429 @@
+* {
+  font-family: system-ui, 'Segoe UI', Tahoma, sans-serif;
+}
+
+/* Copyright 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file. */
+
+/* Don't use the main frame div when the error is in a subframe. */
+html[subframe] #main-frame-error {
+  display: none;
+}
+
+/* Don't use the subframe error div when the error is in a main frame. */
+html:not([subframe]) #sub-frame-error {
+  display: none;
+}
+
+h1 {
+  margin-top: 0;
+  word-wrap: break-word;
+}
+
+h1 span {
+  font-weight: 500;
+}
+
+a {
+  text-decoration: none;
+}
+
+.icon {
+  -webkit-user-select: none;
+  display: inline-block;
+}
+
+.icon-offline {
+  content: -webkit-image-set(
+      url(../images/default_100_percent/offline/100-error-offline.png) 1x,
+      url(../images/default_200_percent/offline/200-error-offline.png) 2x);
+  position: relative;
+}
+
+.hidden {
+  display: none;
+}
+
+/* Offline page */
+html[dir='rtl'] .runner-container,
+html[dir='rtl'].offline .icon-offline {
+  transform: scaleX(-1);
+}
+
+.offline {
+  transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
+              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.offline body {
+  transition: background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+}
+
+.offline #main-message > p {
+  display: none;
+}
+
+.offline.inverted {
+  background-color: #dfdedb; /* --google-gray-900 inverted value */
+  filter: invert(1);
+}
+
+.offline.inverted body {
+  background-color: #dfdedb;
+}
+
+.offline .interstitial-wrapper {
+  color: var(--text-color);
+  font-size: 1em;
+  line-height: 1.55;
+  margin: 0 auto;
+  max-width: 600px;
+  padding-top: 100px;
+  position: relative;
+  width: 100%;
+}
+
+.offline .runner-container {
+  direction: ltr;
+  height: 150px;
+  max-width: 600px;
+  overflow: hidden;
+  position: absolute;
+  top: 35px;
+  width: 44px;
+}
+
+.offline .runner-container:focus {
+  outline: none;
+}
+
+.offline .runner-container:focus-visible {
+  /* outline: 3px solid var(--google-blue-300); */
+  outline: none;
+}
+
+.offline .runner-canvas {
+  height: 150px;
+  max-width: 600px;
+  opacity: 1;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  z-index: 10;
+}
+
+.offline .controller {
+  height: 100vh;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100vw;
+  z-index: 9;
+}
+
+#offline-resources {
+  display: none;
+}
+
+#offline-instruction {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 60px;
+  width: fit-content;
+}
+
+.offline-runner-live-region {
+  bottom: 0;
+  clip-path: polygon(0 0, 0 0, 0 0);
+  color: var(--background-color);
+  display: block;
+  font-size: xx-small;
+  overflow: hidden;
+  position: absolute;
+  text-align: center;
+  transition: color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+  user-select: none;
+}
+
+/* Custom toggle */
+.slow-speed-option {
+  align-items: center;
+  background: var(--google-gray-50);
+  border-radius: 24px/50%;
+  bottom: 0;
+  color: var(--error-code-color);
+  /*display: inline-flex;*/
+  display: none;
+  font-size: 1em;
+  left: 0;
+  line-height: 1.1em;
+  margin: 5px auto;
+  padding: 2px 12px 3px 20px;
+  position: absolute;
+  right: 0;
+  width: max-content;
+  z-index: 999;
+}
+
+.slow-speed-option.hidden {
+  display: none;
+}
+
+.slow-speed-option [type=checkbox] {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.slow-speed-option .slow-speed-toggle {
+  cursor: pointer;
+  margin-inline-start: 8px;
+  padding: 8px 4px;
+  position: relative;
+}
+
+.slow-speed-option [type=checkbox]:disabled ~ .slow-speed-toggle {
+  cursor: default;
+}
+
+.slow-speed-option-label [type=checkbox] {
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.slow-speed-option .slow-speed-toggle::before,
+.slow-speed-option .slow-speed-toggle::after {
+  content: '';
+  display: block;
+  margin: 0 3px;
+  transition: all 100ms cubic-bezier(0.4, 0, 1, 1);
+}
+
+.slow-speed-option .slow-speed-toggle::before {
+  background: rgb(189,193,198);
+  border-radius: 0.65em;
+  height: 0.9em;
+  width: 2em;
+}
+
+.slow-speed-option .slow-speed-toggle::after {
+  background: #fff;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 40%);
+  height: 1.2em;
+  position: absolute;
+  top: 51%;
+  transform: translate(-20%, -50%);
+  width: 1.1em;
+}
+
+.slow-speed-option [type=checkbox]:focus + .slow-speed-toggle {
+  box-shadow: 0 0 8px rgb(94, 158, 214);
+  outline: 1px solid rgb(93, 157, 213);
+}
+
+.slow-speed-option [type=checkbox]:checked + .slow-speed-toggle::before {
+  background: var(--google-blue-600);
+  opacity: 0.5;
+}
+
+.slow-speed-option [type=checkbox]:checked + .slow-speed-toggle::after {
+  background: var(--google-blue-600);
+  transform: translate(calc(2em - 90%), -50%);
+}
+
+.slow-speed-option [type=checkbox]:checked:disabled +
+  .slow-speed-toggle::before {
+  background: rgb(189,193,198);
+}
+
+.slow-speed-option [type=checkbox]:checked:disabled +
+  .slow-speed-toggle::after {
+  background: var(--google-gray-50);
+}
+
+@media (max-width: 420px) {
+  #download-button {
+    padding-bottom: 12px;
+    padding-top: 12px;
+  }
+
+  .suggested-left > #control-buttons,
+  .suggested-right > #control-buttons {
+    float: none;
+  }
+
+  .snackbar {
+    border-radius: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+  }
+}
+
+@media (max-height: 350px) {
+  h1 {
+    margin: 0 0 15px;
+  }
+
+  .icon-offline {
+    margin: 0 0 10px;
+  }
+
+  .interstitial-wrapper {
+    margin-top: 5%;
+  }
+
+  .nav-wrapper {
+    margin-top: 30px;
+  }
+}
+
+@media (min-width: 420px) and (max-width: 736px) and
+       (min-height: 240px) and (max-height: 420px) and
+       (orientation:landscape) {
+  .interstitial-wrapper {
+    margin-bottom: 100px;
+  }
+}
+
+@media (max-width: 360px) and (max-height: 480px) {
+  .offline .interstitial-wrapper {
+    padding-top: 60px;
+  }
+
+  .offline .runner-container {
+    top: 8px;
+  }
+}
+
+@media (min-height: 240px) and (orientation: landscape) {
+  .offline .interstitial-wrapper {
+    margin-bottom: 90px;
+  }
+
+  .icon-offline {
+    margin-bottom: 20px;
+  }
+}
+
+@media (max-height: 320px) and (orientation: landscape) {
+  .icon-offline {
+    margin-bottom: 0;
+  }
+
+  .offline .runner-container {
+    top: 10px;
+  }
+}
+
+@media (max-width: 240px) {
+  button {
+    padding-inline-end: 12px;
+    padding-inline-start: 12px;
+  }
+
+  .interstitial-wrapper {
+    overflow: inherit;
+    padding: 0 8px;
+  }
+}
+
+@media (max-width: 120px) {
+  button {
+    width: auto;
+  }
+}
+
+.arcade-mode,
+.arcade-mode .runner-container,
+.arcade-mode .runner-canvas {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode #buttons,
+.arcade-mode #main-content {
+  opacity: 0;
+  overflow: hidden;
+}
+
+.arcade-mode .interstitial-wrapper {
+  height: 100vh;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.arcade-mode .runner-container {
+  left: 0;
+  margin: auto;
+  right: 0;
+  transform-origin: top center;
+  transition: transform 250ms cubic-bezier(0.4, 0, 1, 1) 400ms;
+  z-index: 2;
+}
+
+@media (prefers-color-scheme: dark) {
+  .icon {
+    filter: invert(1);
+  }
+
+  .offline .runner-canvas {
+    filter: invert(1);
+    transition: filter 1.5s cubic-bezier(0.65, 0.05, 0.36, 1),
+              background-color 1.5s cubic-bezier(0.65, 0.05, 0.36, 1);
+  }
+  
+  .offline.inverted .runner-canvas {
+    filter: invert(0);
+  }
+
+  .offline.inverted {
+    background-color: var(--background-color);
+    filter: invert(0);
+  }
+
+  .offline.inverted body {
+    background-color: #fff;
+  }
+
+  .offline.inverted .offline-runner-live-region {
+    color: #fff;
+  }
+
+  #suggestions-list a {
+    color: var(--link-color);
+  }
+
+  #error-information-button {
+    filter: invert(0.6);
+  }
+
+  .slow-speed-option {
+    background: var(--google-gray-800);
+    color: var(--google-gray-100);
+  }
+
+  .slow-speed-option .slow-speed-toggle::before,
+  .slow-speed-option [type=checkbox]:checked:disabled +
+    .slow-speed-toggle::before {
+     background: rgb(189,193,198);
+  }
+
+  .slow-speed-option [type=checkbox]:checked + .slow-speed-toggle::after,
+  .slow-speed-option [type=checkbox]:checked + .slow-speed-toggle::before {
+    background: var(--google-blue-300);
+  }
+}
--- a/chrome-dino/sw.js
+++ b/chrome-dino/sw.js
@ -0,0 +1,399 @@
+"use strict";
+
+const OFFLINE_DATA_FILE = "offline.js";
+const CACHE_NAME_PREFIX = "chrome-dino";
+const BROADCASTCHANNEL_NAME = "offline";
+const CONSOLE_PREFIX = "[SW] ";
+const LAZYLOAD_KEYNAME = "";
+
+// Create a BroadcastChannel if supported.
+const broadcastChannel = (typeof BroadcastChannel === "undefined" ? null : new BroadcastChannel(BROADCASTCHANNEL_NAME));
+
+//////////////////////////////////////
+// Utility methods
+function PostBroadcastMessage(o)
+{
+	if (!broadcastChannel)
+		return;		// not supported
+	
+	// Impose artificial (and arbitrary!) delay of 3 seconds to make sure client is listening by the time the message is sent.
+	// Note we could remove the delay on some messages, but then we create a race condition where sometimes messages can arrive
+	// in the wrong order (e.g. "update ready" arrives before "started downloading update"). So to keep the consistent ordering,
+	// delay all messages by the same amount.
+	setTimeout(() => broadcastChannel.postMessage(o), 3000);
+};
+
+function Broadcast(type)
+{
+	PostBroadcastMessage({
+		"type": type
+	});
+};
+
+function BroadcastDownloadingUpdate(version)
+{
+	PostBroadcastMessage({
+		"type": "downloading-update",
+		"version": version
+	});
+}
+
+function BroadcastUpdateReady(version)
+{
+	PostBroadcastMessage({
+		"type": "update-ready",
+		"version": version
+	});
+}
+
+function IsUrlInLazyLoadList(url, lazyLoadList)
+{
+	if (!lazyLoadList)
+		return false;		// presumably lazy load list failed to load
+	
+	try {
+		for (const lazyLoadRegex of lazyLoadList)
+		{
+			if (new RegExp(lazyLoadRegex).test(url))
+				return true;
+		}
+	}
+	catch (err)
+	{
+		console.error(CONSOLE_PREFIX + "Error matching in lazy-load list: ", err);
+	}
+	
+	return false;
+};
+
+function WriteLazyLoadListToStorage(lazyLoadList)
+{
+	if (typeof localforage === "undefined")
+		return Promise.resolve();		// bypass if localforage not imported
+	else
+		return localforage.setItem(LAZYLOAD_KEYNAME, lazyLoadList)
+};
+
+function ReadLazyLoadListFromStorage()
+{
+	if (typeof localforage === "undefined")
+		return Promise.resolve([]);		// bypass if localforage not imported
+	else
+		return localforage.getItem(LAZYLOAD_KEYNAME);
+};
+
+function GetCacheBaseName()
+{
+	// Include the scope to avoid name collisions with any other SWs on the same origin.
+	// e.g. "c3offline-https://example.com/foo/" (won't collide with anything under bar/)
+	return CACHE_NAME_PREFIX + "-" + self.registration.scope;
+};
+
+function GetCacheVersionName(version)
+{
+	// Append the version number to the cache name.
+	// e.g. "c3offline-https://example.com/foo/-v2"
+	return GetCacheBaseName() + "-v" + version;
+};
+
+// Return caches.keys() filtered down to just caches we're interested in (with the right base name).
+// This filters out caches from unrelated scopes.
+async function GetAvailableCacheNames()
+{
+	const cacheNames = await caches.keys();
+	const cacheBaseName = GetCacheBaseName();
+	return cacheNames.filter(n => n.startsWith(cacheBaseName));
+};
+
+// Identify if an update is pending, which is the case when we have 2 or more available caches.
+// One must be an update that is waiting, since the next navigate that does an upgrade will
+// delete all the old caches leaving just one currently-in-use cache.
+async function IsUpdatePending()
+{
+	const availableCacheNames = await GetAvailableCacheNames();
+	return (availableCacheNames.length >= 2);
+};
+
+// Automatically deduce the main page URL (e.g. index.html or main.aspx) from the available browser windows.
+// This prevents having to hard-code an index page in the file list, implicitly caching it like AppCache did.
+async function GetMainPageUrl()
+{
+	const allClients = await clients.matchAll({
+		includeUncontrolled: true,
+		type: "window"
+	});
+	
+	for (const c of allClients)
+	{
+		// Parse off the scope from the full client URL, e.g. https://example.com/index.html -> index.html
+		let url = c.url;
+		if (url.startsWith(self.registration.scope))
+			url = url.substring(self.registration.scope.length);
+		
+		if (url && url !== "/")		// ./ is also implicitly cached so don't bother returning that
+		{
+			// If the URL is solely a search string, prefix it with / to ensure it caches correctly.
+			// e.g. https://example.com/?foo=bar needs to cache as /?foo=bar, not just ?foo=bar.
+			if (url.startsWith("?"))
+				url = "/" + url;
+			
+			return url;
+		}
+	}
+	
+	return "";		// no main page URL could be identified
+};
+
+// Fetch optionally bypassing HTTP cache using fetch cache options
+function fetchWithBypass(request, bypassCache)
+{
+	if (typeof request === "string")
+		request = new Request(request);
+	
+	if (bypassCache)
+	{
+		return fetch(request.url, {
+            method: 'GET',
+			headers: request.headers,
+			mode: request.mode == 'navigate' ? 'cors' : request.mode,
+			credentials: request.credentials,
+			redirect: request.redirect
+		});
+	}
+	else
+	{
+		// bypass disabled: perform normal fetch which is allowed to return from HTTP cache
+		return fetch(request);
+	}
+};
+
+// Effectively a cache.addAll() that only creates the cache on all requests being successful (as a weak attempt at making it atomic)
+// and can optionally cache-bypass with fetchWithBypass in every request
+async function CreateCacheFromFileList(cacheName, fileList, bypassCache)
+{
+	// Kick off all requests and wait for them all to complete
+	const responses = await Promise.all(fileList.map(url => fetchWithBypass(url, bypassCache)));
+	
+	// Check if any request failed. If so don't move on to opening the cache.
+	// This makes sure we only open a cache if all requests succeeded.
+	let allOk = true;
+	
+	for (const response of responses)
+	{
+		if (!response.ok)
+		{
+			allOk = false;
+			console.error(CONSOLE_PREFIX + "Error fetching '" + response.url + "' (" + response.status + " " + response.statusText + ")");
+		}
+	}
+	
+	if (!allOk)
+		throw new Error("not all resources were fetched successfully");
+	
+	// Can now assume all responses are OK. Open a cache and write all responses there.
+	// TODO: ideally we can do this transactionally to ensure a complete cache is written as one atomic operation.
+	// This needs either new transactional features in the spec, or at the very least a way to rename a cache
+	// (so we can write to a temporary name that won't be returned by GetAvailableCacheNames() and then rename it when ready).
+	const cache = await caches.open(cacheName);
+	
+	try {
+		return await Promise.all(responses.map(
+			(response, i) => cache.put(fileList[i], response)
+		));
+	}
+	catch (err)
+	{
+		// Not sure why cache.put() would fail (maybe if storage quota exceeded?) but in case it does,
+		// clean up the cache to try to avoid leaving behind an incomplete cache.
+		console.error(CONSOLE_PREFIX + "Error writing cache entries: ", err);
+		caches.delete(cacheName);
+		throw err;
+	}
+};
+
+async function UpdateCheck(isFirst)
+{
+	try {
+		// Always bypass cache when requesting offline.js to make sure we find out about new versions.
+		const response = await fetchWithBypass(OFFLINE_DATA_FILE, true);
+		
+		if (!response.ok)
+			throw new Error(OFFLINE_DATA_FILE + " responded with " + response.status + " " + response.statusText);
+			
+		const data = await response.json();
+		
+		const version = data.version;
+		const fileList = data.fileList;
+		const lazyLoadList = data.lazyLoad;
+		const currentCacheName = GetCacheVersionName(version);
+		
+		const cacheExists = await caches.has(currentCacheName);
+
+		// Don't recache if there is already a cache that exists for this version. Assume it is complete.
+		if (cacheExists)
+		{
+			// Log whether we are up-to-date or pending an update.
+			const isUpdatePending = await IsUpdatePending();
+			if (isUpdatePending)
+			{
+				console.log(CONSOLE_PREFIX + "Update pending");
+				Broadcast("update-pending");
+			}
+			else
+			{
+				console.log(CONSOLE_PREFIX + "Up to date");
+				Broadcast("up-to-date");
+			}
+			return;
+		}
+		
+		// Implicitly add the main page URL to the file list, e.g. "index.html", so we don't have to assume a specific name.
+		const mainPageUrl = await GetMainPageUrl();
+		
+		// Prepend the main page URL to the file list if we found one and it is not already in the list.
+		// Also make sure we request the base / which should serve the main page.
+		fileList.unshift("./");
+		
+		if (mainPageUrl && fileList.indexOf(mainPageUrl) === -1)
+			fileList.unshift(mainPageUrl);
+		
+		console.log(CONSOLE_PREFIX + "Caching " + fileList.length + " files for offline use");
+		
+		if (isFirst)
+			Broadcast("downloading");
+		else
+			BroadcastDownloadingUpdate(version);
+		
+		// Note we don't bypass the cache on the first update check. This is because SW installation and the following
+		// update check caching will race with the normal page load requests. For any normal loading fetches that have already
+		// completed or are in-flight, it is pointless and wasteful to cache-bust the request for offline caching, since that
+		// forces a second network request to be issued when a response from the browser HTTP cache would be fine.
+		if (lazyLoadList)
+			await WriteLazyLoadListToStorage(lazyLoadList);							// dump lazy load list to local storage#
+		
+		await CreateCacheFromFileList(currentCacheName, fileList, !isFirst);
+		const isUpdatePending = await IsUpdatePending();
+		
+		if (isUpdatePending)
+		{
+			console.log(CONSOLE_PREFIX + "All resources saved, update ready");
+			BroadcastUpdateReady(version);
+		}
+		else
+		{
+			console.log(CONSOLE_PREFIX + "All resources saved, offline support ready");
+			Broadcast("offline-ready");
+		}
+	}
+	catch (err)
+	{
+		// Update check fetches fail when we're offline, but in case there's any other kind of problem with it, log a warning.
+		console.warn(CONSOLE_PREFIX + "Update check failed: ", err);
+	}
+};
+
+self.addEventListener("install", event =>
+{
+	// On install kick off an update check to cache files on first use.
+	// If it fails we can still complete the install event and leave the SW running, we'll just
+	// retry on the next navigate.
+	event.waitUntil(
+		UpdateCheck(true)		// first update
+		.catch(() => null)
+	);
+});
+
+async function GetCacheNameToUse(availableCacheNames, doUpdateCheck)
+{
+	// Prefer the oldest cache available. This avoids mixed-version responses by ensuring that if a new cache
+	// is created and filled due to an update check while the page is running, we keep returning resources
+	// from the original (oldest) cache only.
+	if (availableCacheNames.length === 1 || !doUpdateCheck)
+		return availableCacheNames[0];
+	
+	// We are making a navigate request with more than one cache available. Check if we can expire any old ones.
+	const allClients = await clients.matchAll();
+	
+	// If there are other clients open, don't expire anything yet. We don't want to delete any caches they
+	// might be using, which could cause mixed-version responses.
+	if (allClients.length > 1)
+		return availableCacheNames[0];
+	
+	// Identify newest cache to use. Delete all the others.
+	const latestCacheName = availableCacheNames[availableCacheNames.length - 1];
+	console.log(CONSOLE_PREFIX + "Updating to new version");
+	
+	await Promise.all(
+		availableCacheNames.slice(0, -1)
+		.map(c => caches.delete(c))
+	);
+	
+	return latestCacheName;
+};
+
+async function HandleFetch(event, doUpdateCheck)
+{
+	const availableCacheNames = await GetAvailableCacheNames();
+	
+	// No caches available: go to network
+	if (!availableCacheNames.length)
+		return fetch(event.request);
+	
+	const useCacheName = await GetCacheNameToUse(availableCacheNames, doUpdateCheck);
+	const cache = await caches.open(useCacheName);
+	const cachedResponse = await cache.match(event.request);
+	
+	if (cachedResponse)
+		return cachedResponse;		// use cached response
+	
+	// We need to check if this request is to be lazy-cached. Send the request and load the lazy-load list
+	// from storage simultaneously.
+	const result = await Promise.all([fetch(event.request), ReadLazyLoadListFromStorage()]);
+	const fetchResponse = result[0];
+	const lazyLoadList = result[1];
+	
+	if (IsUrlInLazyLoadList(event.request.url, lazyLoadList))
+	{
+		// Handle failure writing to the cache. This can happen if the storage quota is exceeded, which is particularly
+		// likely in Safari 11.1, which appears to have very tight storage limits. Make sure even in the event of an error
+		// we continue to return the response from the fetch.
+		try {
+			// Note clone response since we also respond with it
+			await cache.put(event.request, fetchResponse.clone());
+		}
+		catch (err)
+		{
+			console.warn(CONSOLE_PREFIX + "Error caching '" + event.request.url + "': ", err);
+		}
+	}
+		
+	return fetchResponse;
+};
+
+self.addEventListener("fetch", event =>
+{
+	/** NOTE (iain)
+	 *  This check is to prevent a bug with XMLHttpRequest where if its
+	 *  proxied with "FetchEvent.prototype.respondWith" no upload progress
+	 *  events are triggered. By returning we allow the default action to
+	 *  occur instead. Currently all cross-origin requests fall back to default.
+	 */
+	if (new URL(event.request.url).origin !== location.origin)
+		return;
+		
+	// Check for an update on navigate requests
+	const doUpdateCheck = (event.request.mode === "navigate");
+	
+	const responsePromise = HandleFetch(event, doUpdateCheck);
+
+	if (doUpdateCheck)
+	{
+		// allow the main request to complete, then check for updates
+		event.waitUntil(
+			responsePromise
+			.then(() => UpdateCheck(false))		 // not first check
+		);
+	}
+
+	event.respondWith(responsePromise);
+});
--- a/index.html
+++ b/index.html
@ -2,9 +2,9 @@
 <html lang="en">
  <head>
 		<style>@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');</style>
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./style.css">
    <title>e-gamepass</title>
-    <link rel="shortcut icon" href="favicon.png">
+    <link rel="shortcut icon" href="./favicon.png">
 	<meta name="keywords" content="front-end web developer, unblocked, games, google sites, unblocked games mom, ublocked, code, coding, programmer, development, javascript, jquery, bootstrap, sass, less, git, gaming, internet, website, best, site, cool, free games" />
    <meta property="og:title" content="Welcome to e-gamepass." />
    <meta property="og:site_name" content="https://e-gamepass.pages.dev" />
@ -21,85 +21,88 @@
 <input class="hiddenUpload" type="file" accept=".save" hidden>


-    <div class="title"><img src="favicon.png" style="width:4%;"><h2 style="font-size:50px">e-gamepass</h2></div>
-		<p><a href="bookmarklets.html">Click here for bookmarklets that you can use even if we get blocked!</a> - <a href="https://forms.gle/iBAbXvEDaYTLuEcdA">Want a game to be added? Suggest here!</a> - <a href="https://github.com/skysthelimitt/e-gamepass">Want to help me develop the website? Click here!</a></p>
+    <div class="title"><img src="./favicon.png" style="width:4%;"><h2 style="font-size:50px">e-gamepass</h2></div>
+		<p><a href="./bookmarklets.html">Click here for bookmarklets that you can use even if we get blocked!</a> - <a href="https://forms.gle/iBAbXvEDaYTLuEcdA">Want a game to be added? Suggest here!</a> - <a href="https://github.com/skysthelimitt/e-gamepass">Want to help me develop the website? Click here!</a></p>
 		<p><a href="javascript:downloadMainSave()">Download Save</a> - <a href="javascript:uploadMainSave()">Upload Save</a></p><br>
 		<p>Welcome to the new and updated e-gamepass!</p>
 		<p class="uploadResult"></p>
 		<br>
-		<a href="adofai/index.html"><div class="game"><img src="adofai/icon.png" alt="ADOFAI Logo"><h1>ADOFAI</h1></div></a>
-		<a href="resent-client/index.html"><div class="game"><img src="resent-client/logo.png" alt="Resent Client Logo"><h1>Online Minecraft</h1></div></a>
-		<a href="offline-mc/index.html"><div class="game"><img src="offline-mc/logo.png" alt="Minecraft Logo"><h1>Offline Minecraft</h1></div></a>
-		<a href="fridaynightfunkin/index.html"><div class="game"><img src="fridaynightfunkin/fnf-icon.jpg" alt="Friday Night FUnkin Logo"><h1>Friday Night Funkin</h1></div></a>
-		<a href="hardestgame/index.html"><div class="game"><img src="hardestgame/icon.png" alt="Hardest Game Logo"><h1>Worlds Hardest Game</h1></div></a>
-		<a href="mario/index.html"><div class="game"><img src="mario/icon.png" alt="Mario Logo"><h1>Mario</h1></div></a>
-		<a href="cluster-rush/index.html"><div class="game"><img src="cluster-rush/icon.jpg" alt="Cluster Rush Logo"><h1>Cluster Rush</h1></div></a>
-		<a href="vex3/index.html"><div class="game"><img src="vex3/icon.png" alt="Vex 3 Logo"><h1>Vex 3</h1></div></a>
-		<a href="btd3/index.html"><div class="game"><img src="btd3/icon.png" alt="BTD3 Logo"><h1>Bloons TD 3</h1></div></a>
-		<a href="avalanche/index.html"><div class="game"><img src="avalanche/icon.png" alt="avalanche Logo"><h1>Avalanche</h1></div></a>
-		<a href="cell-machine/index.html"><div class="game"><img src="cell-machine/img/icon.png" alt="Cell Machine Logo"><h1>Cell Machine</h1></div></a>
-		<a href="run2/index.html"><div class="game"><img src="run2/icon.jpg" alt="Run 2 Logo"><h1>Run 2</h1></div></a>
-		<a href="vex5/index.html"><div class="game"><img src="vex5/icon.png" alt="Vex5 Logo"><h1>Vex 5</h1></div></a>
-		<a href="vex4/index.html"><div class="game"><img src="vex4/vex4.png" alt="Vex4 Logo"><h1>Vex 4</h1></div></a>
-		<a href="vex2/index.html"><div class="game"><img src="vex2/icon.png" alt="Vex2 Logo"><h1>Vex 2</h1></div></a>
-		<a href="wallsmash/index.html"><div class="game"><img src="wallsmash/icon.png" alt="Wall Smash Logo"><h1>Wall Smash</h1></div></a>
-		<a href="death-run-3d/index.html"><div class="game"><img src="death-run-3d/img/death.png" alt="Death Run 3d Logo"><h1>Death Run 3D</h1></div></a>
+		<a href="./adofai/index.html"><div class="game"><img src="./adofai/icon.png" alt="ADOFAI Logo"><h1>ADOFAI</h1></div></a>
+		<a href="./resent-client/index.html"><div class="game"><img src="./resent-client/logo.png" alt="Resent Client Logo"><h1>Online Minecraft</h1></div></a>
+		<a href="./offline-mc/index.html"><div class="game"><img src="./offline-mc/logo.png" alt="Minecraft Logo"><h1>Offline Minecraft</h1></div></a>
+		<a href="./fridaynightfunkin/index.html"><div class="game"><img src="./fridaynightfunkin/fnf-icon.jpg" alt="Friday Night FUnkin Logo"><h1>Friday Night Funkin</h1></div></a>
+		<a href="./hardestgame/index.html"><div class="game"><img src="./hardestgame/icon.png" alt="Hardest Game Logo"><h1>Worlds Hardest Game</h1></div></a>
+		<a href="./mario/index.html"><div class="game"><img src="./mario/icon.png" alt="Mario Logo"><h1>Mario</h1></div></a>
+		<a href="./cluster-rush/index.html"><div class="game"><img src="./cluster-rush/icon.jpg" alt="Cluster Rush Logo"><h1>Cluster Rush</h1></div></a>
+		<a href="./vex3/index.html"><div class="game"><img src="./vex3/icon.png" alt="Vex 3 Logo"><h1>Vex 3</h1></div></a>
+		<a href="./btd3/index.html"><div class="game"><img src="./btd3/icon.png" alt="BTD3 Logo"><h1>Bloons TD 3</h1></div></a>
+		<a href="./avalanche/index.html"><div class="game"><img src="./avalanche/icon.png" alt="avalanche Logo"><h1>Avalanche</h1></div></a>
+		<a href="./slope/index.html"><div class="game"><img src="./slope/slope4.jpeg" alt="Slope Logo"><h1>Slope</h1></div></a>
+		<a href="./cell-machine/index.html"><div class="game"><img src="./cell-machine/img/icon.png" alt="Cell Machine Logo"><h1>Cell Machine</h1></div></a>
+		<a href="./run2/index.html"><div class="game"><img src="./run2/icon.jpg" alt="Run 2 Logo"><h1>Run 2</h1></div></a>
+		<a href="./vex5/index.html"><div class="game"><img src="./vex5/icon.png" alt="Vex5 Logo"><h1>Vex 5</h1></div></a>
+		<a href="./vex4/index.html"><div class="game"><img src="./vex4/vex4.png" alt="Vex4 Logo"><h1>Vex 4</h1></div></a>
+		<a href="./vex2/index.html"><div class="game"><img src="./vex2/icon.png" alt="Vex2 Logo"><h1>Vex 2</h1></div></a>
+		<a href="./wallsmash/index.html"><div class="game"><img src="./wallsmash/icon.png" alt="Wall Smash Logo"><h1>Wall Smash</h1></div></a>
+		<a href="./death-run-3d/index.html"><div class="game"><img src="./death-run-3d/img/death.png" alt="Death Run 3d Logo"><h1>Death Run 3D</h1></div></a>
+		<a href="./chrome-dino/index.html"><div class="game"><img src="./chrome-dino/icons/icon-114.png" alt="Chrome Dino Logo"><h1>Chrome Dino</h1></div></a>
+		<a href="./gunmayhem2/index.html"><div class="game"><img src="./gunmayhem2/icon.png" alt="Gun Mayhem 2 Logo"><h1>Gun Mayhem 2</h1></div></a>
 		
-		<a href="gunmayhem2/index.html"><div class="game"><img src="gunmayhem2/icon.png" alt="Gun Mayhem 2 Logo"><h1>Gun Mayhem 2</h1></div></a>
+		<a href="./circloo/index.html"><div class="game"><img src="./circloo/icon.png" alt="circloO Logo"><h1>CircloO</h1></div></a>
+		<a href="./vex/index.html"><div class="game"><img src="./vex/icon.png" alt="Vex Logo"><h1>Vex</h1></div></a>
+		<a href="./stack/index.html"><div class="game"><img src="./stack/icon.png" alt="Stack Logo"><h1>Stack</h1></div></a>
+		<a href="./xx142-b2.exe/index.html"><div class="game"><img src="./xx142-b2.exe/icon.png" alt="xx142-b2.exe Logo"><h1>xx142-b2.exe</h1></div></a>
+		<a href="./paperio/index.html"><div class="game"><img src="./paperio/icon.png" alt="Paper.IO Logo"><h1>Paper.io</h1></div></a>
+		<a href="./chibiknight/index.html"><div class="game"><img src="./chibiknight/icon.png" alt="Chibi Knight Logo"><h1>Chibi Knight</h1></div></a>
+		<a href="./1v1lol/index.html"><div class="game"><img src="./1v1lol/splash.png" alt="1v1.lol Logo"><h1>1v1.lol</h1></div></a>
+		<a href="./dino/index.html"><div class="game"><img src="./dino/icon.png" alt="Dino Logo"><h1>Chrome Dino</h1></div></a>
+		<a href="./turbowarp/index.html"><div class="game"><img src="./turbowarp/icon.png" alt="Turbowarp Packager Logo"><h1>Turbowarp Packager</h1></div></a>
 		
-		<a href="circloo/index.html"><div class="game"><img src="circloo/icon.png" alt="circloO Logo"><h1>CircloO</h1></div></a>
-		<a href="vex/index.html"><div class="game"><img src="vex/icon.png" alt="Vex Logo"><h1>Vex</h1></div></a>
-		<a href="stack/index.html"><div class="game"><img src="stack/icon.png" alt="Stack Logo"><h1>Stack</h1></div></a>
-		<a href="xx142-b2.exe/index.html"><div class="game"><img src="xx142-b2.exe/icon.png" alt="xx142-b2.exe Logo"><h1>xx142-b2.exe</h1></div></a>
-		<a href="paperio/index.html"><div class="game"><img src="paperio/icon.png" alt="Paper.IO Logo"><h1>Paper.io</h1></div></a>
-		<a href="chibiknight/index.html"><div class="game"><img src="chibiknight/icon.png" alt="Chibi Knight Logo"><h1>Chibi Knight</h1></div></a>
-		<a href="1v1lol/index.html"><div class="game"><img src="1v1lol/splash.png" alt="1v1.lol Logo"><h1>1v1.lol</h1></div></a>
-		<a href="dino/index.html"><div class="game"><img src="dino/icon.png" alt="Dino Logo"><h1>Chrome Dino</h1></div></a>
-		<a href="turbowarp/index.html"><div class="game"><img src="turbowarp/icon.png" alt="Turbowarp Packager Logo"><h1>Turbowarp Packager</h1></div></a>
+		<a href="./tetris/index.html"><div class="game"><img src="./tetris/icon.png" alt="Tetris Logo"><h1>Tetris</h1></div></a>
+		<a href="./gd/index.html"><div class="game"><img src="./gd/icon.png" alt="GD Logo"><h1>Geometry Dash</h1></div></a>
+		<a href="./sand/index.html"><div class="game"><img src="./sand/icon.png" alt="Sand Game Logo"><h1>Sand Game</h1></div></a>
+		<a href="./dante/index.html"><div class="game"><img src="./dante/icon.png" alt="Dante Logo"><h1>Dante</h1></div></a>
+		<a href="./wordle/index.html"><div class="game"><img src="./wordle/icon.png" alt="Wordle Logo"><h1>Wordle</h1></div></a>
+		<a href="./offlineparadise/index.html"><div class="game"><img src="./offlineparadise/icon.png" alt="Offline Paradise Logo"><h1>Offline Paradise</h1></div></a>
 		
-		<a href="tetris/index.html"><div class="game"><img src="tetris/icon.png" alt="Tetris Logo"><h1>Tetris</h1></div></a>
-		<a href="gd/index.html"><div class="game"><img src="gd/icon.png" alt="GD Logo"><h1>Geometry Dash</h1></div></a>
-		<a href="sand/index.html"><div class="game"><img src="sand/icon.png" alt="Sand Game Logo"><h1>Sand Game</h1></div></a>
-		<a href="dante/index.html"><div class="game"><img src="dante/icon.png" alt="Dante Logo"><h1>Dante</h1></div></a>
-		<a href="wordle/index.html"><div class="game"><img src="wordle/icon.png" alt="Wordle Logo"><h1>Wordle</h1></div></a>
-		<a href="offlineparadise/index.html"><div class="game"><img src="offlineparadise/icon.png" alt="Offline Paradise Logo"><h1>Offline Paradise</h1></div></a>
+		<a href="./2048/index.html"><div class="game"><img src="./2048/icon.png" alt="2048 Logo"><h1>2048</h1></div></a>
+		<a href="./doodlejump/index.html"><div class="game"><img src="./doodlejump/icon.png" alt="Doodle Jump Logo"><h1>Doodle Jump</h1></div></a>
 		
-		<a href="2048/index.html"><div class="game"><img src="2048/icon.png" alt="2048 Logo"><h1>2048</h1></div></a>
-		<a href="doodlejump/index.html"><div class="game"><img src="doodlejump/icon.png" alt="Doodle Jump Logo"><h1>Doodle Jump</h1></div></a>
-		
-		  <a href="weavesilk/index.html"><div class="game"><img src="weavesilk/icon.png" alt="Weave Silk Logo"><h1>Weave Silk</h1></div></a>
-		<a href="supermeatboy/index.html"><div class="game"><img src="supermeatboy/icon.png" alt="Super Meat Boy Logo"><h1>Super Meat Boy</h1></div></a>
-		<a href="vex6/index.html"><div class="game"><img src="vex6/icon.png" alt="Vex 6 Logo"><h1>Vex 6</h1></div></a>
+		  <a href="./weavesilk/index.html"><div class="game"><img src="./weavesilk/icon.png" alt="Weave Silk Logo"><h1>Weave Silk</h1></div></a>
+		<a href="./supermeatboy/index.html"><div class="game"><img src="./supermeatboy/icon.png" alt="Super Meat Boy Logo"><h1>Super Meat Boy</h1></div></a>
+		<a href="./vex6/index.html"><div class="game"><img src="./vex6/icon.png" alt="Vex 6 Logo"><h1>Vex 6</h1></div></a>
 		
 		
-		<a href="fluidsim/index.html"><div class="game"><img src="fluidsim/icon.png" alt="WEBGL Fluid Sim Logo"><h1>WebGL Fluid Sim</h1></div></a>
-		<a href="basketball-stars/index.html"><div class="game"><img src="basketball-stars/icon.png" alt="Basketball Stars Logo"><h1>Basketball Stars</h1></div></a>
+		<a href="./fluidsim/index.html"><div class="game"><img src="./fluidsim/icon.png" alt="WEBGL Fluid Sim Logo"><h1>WebGL Fluid Sim</h1></div></a>
+		<a href="./basketball-stars/index.html"><div class="game"><img src="./basketball-stars/icon.png" alt="Basketball Stars Logo"><h1>Basketball Stars</h1></div></a>
 		
 		
-		<a href="osu/index.html"><div class="game"><img src="osu/icon.png" alt="osu! Logo"><h1>osu!</h1></div></a>
-		<a href="cookieclicker/index.html"><div class="game"><img src="cookieclicker/icon.png" alt="Cookie Clicker Logo"><h1>Cookie Clicker</h1></div></a>
-		<a href="superhot/index.html"><div class="game"><img src="superhot/icon.png" alt="Superhot Logo"><h1>Superhot</h1></div></a>
-		<a href="sm64/index.html"><div class="game"><img src="sm64/icon.png" alt="SM64 Logo"><h1>Super Mario 64</h1></div></a>
-		<a href="gunmayhemredux/index.html"><div class="game"><img src="gunmayhemredux/icon.png" alt="Gun Mayhem Redux Logo"><h1>Gun Mayhem Redux</h1></div></a>
-		<a href="iwbtc/index.html"><div class="game"><img src="iwbtc/icon.png" alt="IWBTC Logo"><h1>I Wanna Be Thy Copy</h1></div></a>
+		<a href="./osu/index.html"><div class="game"><img src="./osu/icon.png" alt="osu! Logo"><h1>osu!</h1></div></a>
+		<a href="./cookieclicker/index.html"><div class="game"><img src="./cookieclicker/icon.png" alt="Cookie Clicker Logo"><h1>Cookie Clicker</h1></div></a>
+		<a href="./superhot/index.html"><div class="game"><img src="./superhot/icon.png" alt="Superhot Logo"><h1>Superhot</h1></div></a>
+		<a href="./sm64/index.html"><div class="game"><img src="./sm64/icon.png" alt="SM64 Logo"><h1>Super Mario 64</h1></div></a>
+		<a href="./gunmayhemredux/index.html"><div class="game"><img src="./gunmayhemredux/icon.png" alt="Gun Mayhem Redux Logo"><h1>Gun Mayhem Redux</h1></div></a>
+		<a href="./iwbtc/index.html"><div class="game"><img src="./iwbtc/icon.png" alt="IWBTC Logo"><h1>I Wanna Be Thy Copy</h1></div></a>
 		
-		<a href="hexgl/index.html"><div class="game"><img src="hexgl/icon_128.png" alt="HexGL Logo"><h1>HexGL</h1></div></a>
-		<a href="championisland/index.html"><div class="game"><img src="championisland/icon.png" alt="Champion Island Logo"><h1>Champion Islands</h1></div></a>
-		<a href="ltf/index.html"><div class="game"><img src="ltf/icon.png" alt="Learn To Fly Logo"><h1>Learn to Fly</h1></div></a>
-		<a href="turbowarp-editor/index.html"><div class="game"><img src="turbowarp-editor/icon.png" alt="Turbowarp Editor Logo"><h1>Turbowarp Editor</h1></div></a>
-		<a href="wordlebot/index.html"><div class="game"><img src="wordlebot/icon.png" alt="Wordle Bot Logo"><h1>Wordle Bot</h1></div></a>
-		<a href="ctr/index.html"><div class="game"><img src="ctr/icon.png" alt="CTR Logo"><h1>Cut the Rope</h1></div></a>
+		<a href="./hexgl/index.html"><div class="game"><img src="./hexgl/icon_128.png" alt="HexGL Logo"><h1>HexGL</h1></div></a>
+		<a href="./championisland/index.html"><div class="game"><img src="./championisland/icon.png" alt="Champion Island Logo"><h1>Champion Islands</h1></div></a>
+		<a href="./ltf/index.html"><div class="game"><img src="./ltf/icon.png" alt="Learn To Fly Logo"><h1>Learn to Fly</h1></div></a>
+		<a href="./turbowarp-editor/index.html"><div class="game"><img src="./turbowarp-editor/icon.png" alt="Turbowarp Editor Logo"><h1>Turbowarp Editor</h1></div></a>
+		<a href="./wordlebot/index.html"><div class="game"><img src="./wordlebot/icon.png" alt="Wordle Bot Logo"><h1>Wordle Bot</h1></div></a>
+		<a href="./ctr/index.html"><div class="game"><img src="./ctr/icon.png" alt="CTR Logo"><h1>Cut the Rope</h1></div></a>
 		
-		<a href="chess/index.html"><div class="game"><img src="chess/icon.png" alt="Chess Logo"><h1>Chess</h1></div></a>
-		<a href="flappybird/index.html"><div class="game"><img src="flappybird/icon.png" alt="Flappy Bird Logo"><h1>Flappy Bird</h1></div></a>
+		<a href="./chess/index.html"><div class="game"><img src="./chess/icon.png" alt="Chess Logo"><h1>Chess</h1></div></a>
+		<a href="./flappybird/index.html"><div class="game"><img src="./flappybird/icon.png" alt="Flappy Bird Logo"><h1>Flappy Bird</h1></div></a>

-		<a href="lowsadventures2/index.html"><div class="game"><img src="lowsadventures2/icon.png" alt="Lows Adventurs 2 Logo"><h1>Lows Adventures 2</h1></div></a>
-		<a href="drift-boss/index.html"><div class="game"><img src="drift-boss/icon.png" alt="Drift Boss Logo"><h1>Drift Boss</h1></div></a>
-		<a href="fireboywatergirl/index.html"><div class="game"><img src="fireboywatergirl/icon.png" alt="Fireboy Watergirl Logo"><h1>Fireboy Watergirl</h1></div></a>
-		<a href="gunmayhem/index.html"><div class="game"><img src="gunmayhem/icon.png" alt="Gun Mayhem Logo"><h1>Gun Mayhem</h1></div></a>
-		<a href="ducklife4/index.html"><div class="game"><img src="ducklife4/icon.png" alt="Duck Life 4 Logo"><h1>Duck Life 4</h1></div></a>
-		<a href="achieveunlocked/index.html"><div class="game"><img src="achieveunlocked/icon.png" alt="achieveunlocked Logo"><h1>Achievement Unlocked</h1></div></a>
-		<p><a href="changelog.html">v. 2023.05.22</a></p>
+		<a href="./lowsadventures2/index.html"><div class="game"><img src="./lowsadventures2/icon.png" alt="Lows Adventurs 2 Logo"><h1>Lows Adventures 2</h1></div></a>
+		<a href="./drift-boss/index.html"><div class="game"><img src="./drift-boss/icon.png" alt="Drift Boss Logo"><h1>Drift Boss</h1></div></a>
+		<a href="./fireboywatergirl/index.html"><div class="game"><img src="./fireboywatergirl/icon.png" alt="Fireboy Watergirl Logo"><h1>Fireboy Watergirl</h1></div></a>
+		<a href="./gunmayhem/index.html"><div class="game"><img src="./gunmayhem/icon.png" alt="Gun Mayhem Logo"><h1>Gun Mayhem</h1></div></a>
+		<a href="./ducklife4/index.html"><div class="game"><img src="./ducklife4/icon.png" alt="Duck Life 4 Logo"><h1>Duck Life 4</h1></div></a>
+		<a href="./achieveunlocked/index.html"><div class="game"><img src="./achieveunlocked/icon.png" alt="achieveunlocked Logo"><h1>Achievement Unlocked</h1></div></a>
+		<a href="./achieveunlocked2/index.html"><div class="game"><img src="./achieveunlocked2/icon.png" alt="achieveunlocked2 Logo"><h1>Achievement Unlocked 2</h1></div></a>
+		<a href="./thisistheonlylevel/index.html"><div class="game"><img src="./thisistheonlylevel/logo.png" alt="this is the only level Logo"><h1>This Is The Only Level</h1></div></a>
+		<p><a href="./changelog.html">v. 2023.05.24</a></p>
  </div>
  </body>
 </html>
--- a/slope/Build/UnityLoader.js
+++ b/slope/Build/UnityLoader.js
--- a/slope/Build/slope_27Sept.data.unityweb
+++ b/slope/Build/slope_27Sept.data.unityweb
--- a/slope/Build/slope_27Sept.json
+++ b/slope/Build/slope_27Sept.json
@ -0,0 +1,15 @@
+{
+    "companyName": "Slope",
+    "productName": "Slope",
+    "dataUrl": "slope_27Sept.data.unityweb",
+    "wasmCodeUrl": "slope_27Sept.wasm.code.unityweb",
+    "wasmFrameworkUrl": "slope_27Sept.wasm.framework.unityweb",
+    "asmCodeUrl": "slope_27Sept.asm.code.unityweb",
+    "asmMemoryUrl": "slope_27Sept.asm.memory.unityweb",
+    "asmFrameworkUrl": "slope_27Sept.asm.framework.unityweb",
+    "TOTAL_MEMORY": 268435456,
+    "graphicsAPI": ["WebGL 2.0", "WebGL 1.0"],
+    "webglContextAttributes": {"preserveDrawingBuffer": false},
+    "splashScreenStyle": "Dark",
+    "backgroundColor": "#231F20"
+    }
--- a/slope/Build/slope_27Sept.wasm.code.unityweb
+++ b/slope/Build/slope_27Sept.wasm.code.unityweb
--- a/slope/Build/slope_27Sept.wasm.framework.unityweb
+++ b/slope/Build/slope_27Sept.wasm.framework.unityweb
--- a/slope/TemplateData/y8-logo.png
+++ b/slope/TemplateData/y8-logo.png
--- a/slope/TemplateData56/UnityProgress.js
+++ b/slope/TemplateData56/UnityProgress.js
@ -0,0 +1,126 @@
+const rootPath = "TemplateData56";
+function UnityProgress(gameInstance, progress) {
+    if (!gameInstance.Module) {
+        return;
+    }
+    if (!gameInstance.logo) {
+        gameInstance.logo = document.createElement("div");
+        gameInstance.logo.className = "logo " + gameInstance.Module.splashScreenStyle;
+        gameInstance.container.appendChild(gameInstance.logo);
+    }
+    if (!gameInstance.progress) {
+        gameInstance.progress = document.createElement("div");
+        gameInstance.progress.className = "progress " + gameInstance.Module.splashScreenStyle;
+        gameInstance.progress.empty = document.createElement("div");
+        gameInstance.progress.empty.className = "empty";
+        gameInstance.progress.appendChild(gameInstance.progress.empty);
+        gameInstance.progress.full = document.createElement("div");
+        gameInstance.progress.full.className = "full";
+        gameInstance.progress.appendChild(gameInstance.progress.full);
+        gameInstance.container.appendChild(gameInstance.progress);
+        gameInstance.textProgress = document.createElement("div");
+        gameInstance.textProgress.className = "text";
+        gameInstance.container.appendChild(gameInstance.textProgress);
+    }
+    gameInstance.progress.full.style.width = 100 * progress + "%";
+    gameInstance.progress.empty.style.width = 100 * (1 - progress) + "%";
+    gameInstance.textProgress.innerHTML = "Loading: " + Math.floor(progress * 100) + "%";
+    if (progress == 1) {
+        gameInstance.textProgress.innerHTML = 'Running... <img src="' + rootPath + '/gears.gif" class="spinner" />';
+    }
+    if (progress == "complete") {
+        gameInstance.logo.style.display = "none";
+        gameInstance.progress.style.display = "none";
+        gameInstance.textProgress.style.display = "none";
+        const event = new Event("removeSoundOverlay");
+        document.dispatchEvent(event);
+    }
+}
+window.Game = (function () {
+    var Game = function () {
+        this.registerEvents();
+    };
+    Game.prototype.registerEvents = function () {
+        var _this = this;
+        window.addEventListener(
+            "keydown",
+            function (e) {
+                if ([8, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
+                    e.preventDefault();
+                }
+            },
+            false
+        );
+        document.onmousedown = function () {
+            window.focus();
+        };
+        document.addEventListener(
+            "DOMContentLoaded",
+            function () {
+                _this.resize();
+            },
+            false
+        );
+        window.addEventListener(
+            "resize",
+            function () {
+                setTimeout(function () {
+                    _this.resize();
+                }, 1000);
+            },
+            false
+        );
+    };
+    Game.prototype.getQueryVariable = function (variable) {
+        var query = window.location.search.substring(1);
+        var vars = query.split("&");
+        for (var i = 0; i < vars.length; i++) {
+            var pair = vars[i].split("=");
+            if (pair[0] == variable) {
+                return pair[1];
+            }
+        }
+        return false;
+    };
+    Game.prototype.resize = function () {
+        var ratioTolerant = this.getQueryVariable("ratio_tolerant");
+        if (ratioTolerant == false || this.fullscreen()) {
+            return;
+        }
+        document.getElementsByTagName("body")[0].style.overflow = "hidden";
+        var gameContainer = document.getElementById("gameContainer") || document.getElementById("unityContainer");
+        var canvas = document.getElementById("#canvas");
+        var gameSizeRatio = gameContainer.offsetWidth / gameContainer.offsetHeight;
+        var maxHeight = this.maxHeight();
+        var maxWidth = window.innerWidth;
+        var windowSizeRatio = maxWidth / maxHeight;
+        var newStyle = { width: gameContainer.offsetWidth, height: gameContainer.offsetHeight };
+        if (ratioTolerant == "true") {
+            newStyle = { width: maxWidth, height: maxHeight };
+        } else if (ratioTolerant == "false") {
+            if (gameSizeRatio > windowSizeRatio) {
+                newStyle = { width: maxWidth, height: maxWidth / gameSizeRatio };
+            } else {
+                newStyle = { width: maxHeight * gameSizeRatio, height: maxHeight };
+            }
+        }
+        this.updateStyle(gameContainer, newStyle);
+        if (canvas) {
+            this.updateStyle(canvas, newStyle);
+        }
+    };
+    Game.prototype.maxHeight = function () {
+        return window.innerHeight - 43;
+    };
+    Game.prototype.updateStyle = function (element, size) {
+        element.setAttribute("width", size.width);
+        element.setAttribute("height", size.height);
+        element.style.width = size.width + "px";
+        element.style.height = size.height + "px";
+    };
+    Game.prototype.fullscreen = function () {
+        return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
+    };
+    return Game;
+})();
+new Game();
--- a/slope/TemplateData56/gears.gif
+++ b/slope/TemplateData56/gears.gif
--- a/slope/TemplateData56/style.css
+++ b/slope/TemplateData56/style.css
@ -0,0 +1 @@
+.webgl-content *{border:0;margin:0;padding:0}.webgl-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.webgl-content .logo,.progress,.text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.webgl-content .logo{background:url('logo.png') no-repeat center/contain;width:154px;height:130px}.webgl-content .progress{height:18px;width:141px;margin-top:80px}.webgl-content .progress .empty{background:url('progressEmpty.Light.png') no-repeat right/cover;float:right;width:100%;height:100%;display:inline-block}.webgl-content .progress .full{background:url('progressFull.Light.png') no-repeat left/cover;float:left;width:0%;height:100%;display:inline-block}.webgl-content .text{margin-top:110px;color:#fff;font-weight:700}.webgl-content .spinner{vertical-align:middle}.webgl-content .logo.Dark{background-image:url(../TemplateData/y8-logo.png);width:206px;height:130px;margin:0 auto;background-size:206px 130px}.webgl-content .progress.Dark .empty{background:#000}.webgl-content .progress.Dark .full{background:red}.webgl-content .footer{margin-top:5px;height:38px;line-height:38px;font-family:Helvetica,Verdana,Arial,sans-serif;font-size:18px;background:#fff}.webgl-content .footer .webgl-logo,.title,.fullscreen{height:100%;display:inline-block;background:transparent center no-repeat}.webgl-content .footer .webgl-logo{background-image:url(webgl-logo.png);width:204px;float:left}.webgl-content .footer .title{margin-right:10px;float:right}.webgl-content .footer .fullscreen{background-image:url(fullscreen.png);width:38px;float:right}.webgl-content #gameContainer{background:#4d4d4d!important}.webgl-content .footer{background:#222;font-family:Helvetica,Verdana,Arial,sans-serif;height:40px;line-height:40px;margin:0}.webgl-content .footer .webgl-logo,.title,.fullscreen{background:transparent center no-repeat;display:inline-block;height:100%}.webgl-content .footer .unity,.webgl-content .footer .webgl{box-sizing:border-box;background-position:10px center;background-repeat:no-repeat;background-size:46px 18px;height:40px;float:left;padding:0 10px;width:66px}.webgl-content .footer .unity.enable{background-image:url(unity-enable.png)}.webgl-content .footer .unity.disable{background-image:url(unity-disable.png)}.webgl-content .footer .webgl.enable{background-image:url(webgl-enable.png)}.webgl-content .footer .webgl.disable{background-image:url(webgl-disable.png)}.webgl-content .footer .fullscreen{background-image:url(maximize-icon.png);background-position:10px center;background-repeat:no-repeat;background-size:16px;box-sizing:border-box;color:#fff;float:right;font-size:12px;padding:0 10px 0 36px;width:auto}.webgl-content .footer .unity.disable:hover,.webgl-content .footer .webgl.disable:hover,.webgl-content .footer .fullscreen:hover{background-color:#3e3e3e;cursor:pointer}
--- a/slope/index.html
+++ b/slope/index.html
@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<script>
+  if (window.parent !== window.self) window.parent.postMessage("bonk", "*");
+  window.addEventListener("DOMContentLoaded", function () {
+    document.body.style.margin = "0";
+    document.body.style.height = "100vh";
+    document.body.style.overflow = "hidden";
+  });
+</script>
+<html lang="en-us">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <title>Slope | 3kh0</title>
+    <link href="shared/style.css" rel="stylesheet" />
+    <link rel="stylesheet" href="TemplateData56/style.css" />
+    <script src="TemplateData56/UnityProgress.js"></script>
+    <link rel="shortcut icon" href="TemplateData/favicon.ico" />
+    <link rel="icon" href="slope4.jpeg" />
+    <script src="Build/UnityLoader.js"></script>
+    <script>
+      window.rWS = WebSocket;
+      WebSocket = function (url, options) {
+        var split = url.split("://");
+        var prefix = "";
+        if (!url.includes("arc.io")) {
+          switch (split[0].toLowerCase()) {
+            case "ws":
+              prefix = "wss://onebigorange-tmm.tbt.mx/websocket/http://";
+              break;
+            case "wss":
+              prefix = "wss://onebigorange-tmm.tbt.mx/websocket/https://";
+              break;
+            default:
+              prefix = split[0];
+          }
+          return new (Function.prototype.bind.call(window.rWS, null, (split[1].match(/\//g) || []).length === 0 ? (split[1].includes("?") ? prefix + split[1].replace("?", "/?") : prefix + split[1] + "/") : prefix + split[1], options))();
+        } else {
+          return new window.rWS(url, options);
+        }
+      };
+      var origOpen = XMLHttpRequest.prototype.open;
+      XMLHttpRequest.prototype.open = function (...args) {
+        if (!args[1].includes("arc.io")) args[1] = /^http/.test(args[1]) ? "https://onebigstatic-tmm.tbt.mx/static/" + args[1] : args[1];
+        origOpen.apply(this, args);
+      };
+      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/slope_27Sept.json", {
+        onProgress: UnityProgress,
+        Module: {
+          onRuntimeInitialized: function () {
+            UnityProgress(gameInstance, "complete");
+          },
+        },
+      });
+    </script>
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-98DP5VKS42"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-98DP5VKS42");
+    </script>
+    <script src="shared/lib.js" type="text/javascript"></script>
+    <script src="shared/gamebreak/gamebreak.js" type="text/javascript"></script>
+  </head>
+  <body>
+    <div class="webgl-content">
+      <div id="gameContainer" style="width: 100vw; height: 100vh;"></div>
+    </div>
+    <script type="application/javascript" src="/js/main.js"></script>
+  </body>
+</html>
--- a/slope/shared/gamebreak/gamebreak.js
+++ b/slope/shared/gamebreak/gamebreak.js
@ -0,0 +1 @@
+function InitExternEval(){}
--- a/slope/shared/lib.js
+++ b/slope/shared/lib.js
@ -0,0 +1,89 @@
+window.BrowserDetector = (function () {
+    function detect() {
+        var ua = navigator.userAgent;
+        var tem;
+        var M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+\.\d+)/i) || [];
+        if (/trident/i.test(M[1])) {
+            tem = /\brv[ :]+(\d+\.\d+)/g.exec(ua) || [];
+            return { name: "Internet Explorer", version: tem[1] || "" };
+        }
+        if (/(coc_coc_browser|edge(?=\/))\/?\s*(\d+\.\d+)/i.test(ua)) {
+            tem = ua.match(/(coc_coc_browser|edge(?=\/))\/?\s*(\d+)\.\d+/i);
+            if (tem != null) {
+                return { name: tem[1] == "Edge" ? tem[1] : "CocCoc", version: tem[2] };
+            }
+        }
+        if (M[1] === "Chrome") {
+            tem = ua.match(/\bOPR\/(\d+\.\d+)/);
+            if (tem != null) {
+                return { name: "Opera", version: tem[1] };
+            }
+        }
+        M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, "-?"];
+        if ((tem = ua.match(/version\/(\d+\.\d+)/i)) != null) {
+            M.splice(1, 1, tem[1]);
+        }
+        if (M[0] == "MSIE") {
+            M[0] = "Internet Explorer";
+        }
+        return { name: M[0], version: M[1] };
+    }
+    var detect = detect();
+    return {
+        name: detect.name,
+        version: detect.version,
+        msie: detect.name == "Internet Explorer",
+        msedge: detect.name == "Edge",
+        coccoc: detect.name == "CocCoc",
+        firefox: detect.name == "Firefox",
+        safari: detect.name == "Safari",
+        chrome: detect.name == "Chrome",
+        opera: detect.name == "Opera",
+    };
+})();
+function enableSound() {
+    return;
+}
+!(function () {
+    if (window.UnityLoader) {
+        if (window.UnityLoader.compatibilityCheck) {
+            window.UnityLoader.compatibilityCheck = function (element, callback, errCallback) {
+                callback();
+            };
+        }
+    }
+    if (!(BrowserDetector.chrome && BrowserDetector.version >= 66)) {
+        return;
+    }
+    function buildSoundOverlay() {
+        const overlay = document.createElement("div");
+        overlay.classList.add("sound-overlay");
+        overlay.setAttribute("id", "sound-overlay");
+        return overlay;
+    }
+    function buildSoundText() {
+        const textNode = document.createTextNode("Click here to enable sound!");
+        const textSpan = document.createElement("span");
+        textSpan.classList.add("sound-text");
+        textSpan.appendChild(textNode);
+        return textSpan;
+    }
+    const soundOverlay = buildSoundOverlay();
+    soundOverlay.appendChild(buildSoundText());
+    document.addEventListener("DOMContentLoaded", function () {
+        var root = document.getElementsByClassName("webgl-content")[0];
+        if (!root) {
+            root = document.getElementsByClassName("template-wrap")[0];
+        }
+        root.appendChild(soundOverlay);
+    });
+    "click removeSoundOverlay".split(" ").forEach((e) =>
+        document.addEventListener(
+            e,
+            function () {
+                soundOverlay.style.display = "none";
+            },
+            false
+        )
+    );
+})();
--- a/slope/shared/style.css
+++ b/slope/shared/style.css
@ -0,0 +1 @@
+.sound-overlay{z-index:99999;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;opacity:.9;background:#000}.sound-text{position:relative;top:50%;transform:translateY(-50%);color:#fff;font-size:20px;text-shadow:1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000}.redirect-overlay{z-index:99999;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;background:#000}.redirect-text{position:relative;top:50%;transform:translateY(-50%);color:#fff;font-size:20px;text-shadow:1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000}.redirect-text a{color:red}.link-to-y8-url{height:40px;float:left;padding:0 10px;color:#fff;font-size:18px}.link-to-y8-url a{color:red}.game-name{padding:0 10px;margin:0;color:#fff;font-size:18px;display:inline-block;font-weight:400}
--- a/slope/slope4.jpeg
+++ b/slope/slope4.jpeg
--- a/thisistheonlylevel/index.html
+++ b/thisistheonlylevel/index.html
@ -0,0 +1,24 @@
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>This Is The Only Level</title>
+    <style>html{background-color:#000;}</style>
+  </head>
+  <body>
+    <div id="ruffle" width="100%" height="100%"></div>
+    <script src="https://unpkg.com/@ruffle-rs/ruffle"></script>
+    <script>
+      window.RufflePlayer = window.RufflePlayer || {};
+      window.addEventListener("load", (event) => {
+        const ruffle = window.RufflePlayer.newest();
+        const player = ruffle.createPlayer();
+        const container = document.getElementById("ruffle");
+        player.id = "player";
+        player.style.width = "100%";
+        player.style.height = "100%";
+        container.appendChild(player);
+        player.load("thisistheonlylevel.swf");
+      });
+    </script>
+  </body>
+</html>
--- a/thisistheonlylevel/logo.png
+++ b/thisistheonlylevel/logo.png
--- a/thisistheonlylevel/thisistheonlylevel.swf
+++ b/thisistheonlylevel/thisistheonlylevel.swf
				`@ -0,0 +1 @@`
				{"version":2.0,"fileList":["1_hurdling.html","2_gymnastics.html","3_surfing.html","4_swimming.html","5_equestrian.html","appmanifest.json","index.html","register-sw.js","sw.js","icons/icon-114.png","icons/icon-128.png","icons/icon-16.png","icons/icon-256.png","icons/icon-32.png","images/default_100_percent/offline/100-disabled.png","images/default_100_percent/offline/100-error-offline.png","images/default_100_percent/offline/100-offline-sprite.png","images/default_100_percent/offline/100-olympic-firemedal-sprite.png","images/default_100_percent/offline/100-olympics-equestrian-sprite.png","images/default_100_percent/offline/100-olympics-gymnastics-sprite.png","images/default_100_percent/offline/100-olympics-hurdling-sprite.png","images/default_100_percent/offline/100-olympics-surfing-sprite.png","images/default_100_percent/offline/100-olympics-swimming-sprite.png","images/default_200_percent/offline/200-disabled.png","images/default_200_percent/offline/200-error-offline.png","images/default_200_percent/offline/200-offline-sprite.png","images/default_200_percent/offline/200-olympic-firemedal-sprite.png","images/default_200_percent/offline/200-olympics-equestrian-sprite.png","images/default_200_percent/offline/200-olympics-gymnastics-sprite.png","images/default_200_percent/offline/200-olympics-hurdling-sprite.png","images/default_200_percent/offline/200-olympics-surfing-sprite.png","images/default_200_percent/offline/200-olympics-swimming-sprite.png","scripts/load_time_data.js","scripts/neterror.slim.js","scripts/offline.js","scripts/offline-sprite-definitions.js","scripts/strings.js","styles/interstitial_common.css","styles/interstitial_core.css","styles/neterror.css"]}
				`@ -0,0 +1 @@`
				.webgl-content *{border:0;margin:0;padding:0}.webgl-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.webgl-content .logo,.progress,.text{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.webgl-content .logo{background:url('logo.png') no-repeat center/contain;width:154px;height:130px}.webgl-content .progress{height:18px;width:141px;margin-top:80px}.webgl-content .progress .empty{background:url('progressEmpty.Light.png') no-repeat right/cover;float:right;width:100%;height:100%;display:inline-block}.webgl-content .progress .full{background:url('progressFull.Light.png') no-repeat left/cover;float:left;width:0%;height:100%;display:inline-block}.webgl-content .text{margin-top:110px;color:#fff;font-weight:700}.webgl-content .spinner{vertical-align:middle}.webgl-content .logo.Dark{background-image:url(../TemplateData/y8-logo.png);width:206px;height:130px;margin:0 auto;background-size:206px 130px}.webgl-content .progress.Dark .empty{background:#000}.webgl-content .progress.Dark .full{background:red}.webgl-content .footer{margin-top:5px;height:38px;line-height:38px;font-family:Helvetica,Verdana,Arial,sans-serif;font-size:18px;background:#fff}.webgl-content .footer .webgl-logo,.title,.fullscreen{height:100%;display:inline-block;background:transparent center no-repeat}.webgl-content .footer .webgl-logo{background-image:url(webgl-logo.png);width:204px;float:left}.webgl-content .footer .title{margin-right:10px;float:right}.webgl-content .footer .fullscreen{background-image:url(fullscreen.png);width:38px;float:right}.webgl-content #gameContainer{background:#4d4d4d!important}.webgl-content .footer{background:#222;font-family:Helvetica,Verdana,Arial,sans-serif;height:40px;line-height:40px;margin:0}.webgl-content .footer .webgl-logo,.title,.fullscreen{background:transparent center no-repeat;display:inline-block;height:100%}.webgl-content .footer .unity,.webgl-content .footer .webgl{box-sizing:border-box;background-position:10px center;background-repeat:no-repeat;background-size:46px 18px;height:40px;float:left;padding:0 10px;width:66px}.webgl-content .footer .unity.enable{background-image:url(unity-enable.png)}.webgl-content .footer .unity.disable{background-image:url(unity-disable.png)}.webgl-content .footer .webgl.enable{background-image:url(webgl-enable.png)}.webgl-content .footer .webgl.disable{background-image:url(webgl-disable.png)}.webgl-content .footer .fullscreen{background-image:url(maximize-icon.png);background-position:10px center;background-repeat:no-repeat;background-size:16px;box-sizing:border-box;color:#fff;float:right;font-size:12px;padding:0 10px 0 36px;width:auto}.webgl-content .footer .unity.disable:hover,.webgl-content .footer .webgl.disable:hover,.webgl-content .footer .fullscreen:hover{background-color:#3e3e3e;cursor:pointer}
				`@ -0,0 +1 @@`
				.sound-overlay{z-index:99999;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;opacity:.9;background:#000}.sound-text{position:relative;top:50%;transform:translateY(-50%);color:#fff;font-size:20px;text-shadow:1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000}.redirect-overlay{z-index:99999;position:absolute;top:0;left:0;width:100%;height:100%;text-align:center;background:#000}.redirect-text{position:relative;top:50%;transform:translateY(-50%);color:#fff;font-size:20px;text-shadow:1px 0 0 #000,0 -1px 0 #000,0 1px 0 #000,-1px 0 0 #000}.redirect-text a{color:red}.link-to-y8-url{height:40px;float:left;padding:0 10px;color:#fff;font-size:18px}.link-to-y8-url a{color:red}.game-name{padding:0 10px;margin:0;color:#fff;font-size:18px;display:inline-block;font-weight:400}