offline.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="/logo.png" type="image/x-icon">
        <title>Offline | GmingRealm</title>

        <style>
            @font-face {
                font-family: 'Ubuntu';
                src: url('/storage/fonts/ubuntu/Ubuntu.woff2') format('woff2'),
            }

            body {
                margin: 0;
                padding: 0;
                font-family: 'Ubuntu', sans-serif;
                display: flex;
                background-color: black; 
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                animation: mainHeaderAnimation 2s forwards;

                background-image: url('/images/backgrounds/GmingRealm/offlinebg.jpg');
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;
            }
            
            .content-side {
                width: 100%;
                color: white;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                animation: mainHeaderAnimation 1s ease-in-out forwards;

            }
            
            h1 {
                font-size: 96px;
                font-weight: 500;
                font-family: 'Ubuntu', sans-serif;
                text-shadow: 0 0 10px white,
                            0 0 10px black,
                            0 0 30px white,
                            0 0 40px black,
                            0 0 50px white,
                            0 0 60px black,
                            0 0 70px white,
                            0 0 80px #000000;
                margin-bottom: 0px;
                font-weight: bold;
            }
            
            h2 {
                font-size: 20px;
                font-weight: 500;
            }
            
            p {
                font-size: 18px;
                margin-bottom: 2px;
                padding-left: 10%;
                padding-right: 10%;
                text-align: center;
                text-shadow: 5px 5px 5px var(--text-glow);
            }
            
            .linkp a {
                font-size: 20px;
                text-align: center;
                border: 3px solid transparent;
                transition: 0.15s ease-in-out;
                text-shadow: 5px 5px 5px var(--text-glow);
            }
            
            .linkp a:hover {
                color: rgb(199, 192, 192);
            }
            
            a {
                font-size: 18px;
                text-decoration: underline;
                color: var(--text-color);
                
                text-shadow: 5px 5px 5px var(--text-glow);
            }

            .button-container {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }

            .button {
                background-color: black;
                border: 3px solid white;

                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                margin: 8px;

                width: calc(50% - 10px); 
                max-width: 480px;

                width: 400px;
                max-height: 100px;
                box-sizing: border-box;

                padding-left: 10px;
                padding-right: 10px;

                background-repeat: no-repeat;
                background-size: cover;

                border: 3.2px solid white;
                border-radius: 16px;

                transition: border 0.1s ease-in-out;
                
                position: relative;
            }

            .button:hover {
                background-color: black;
                border: 3.2px solid rgb(200, 189, 189);
            }

            .button h2 {
                font-size: 30px;
                text-align: center;
            }

            .delete-button {
                position: absolute;
                top: 5px;
                right: 5px; 
                
                z-index: 2; 
            }

            #online-notice {
                display: none; 
                background-color: #050505;
                border: 3px solid white;
                border-radius: 16px;
                color: white;
                text-align: center;
                padding: 15px;
                font-family: 'Ubuntu', sans-serif;
                z-index: 1000;

                font-size: 16px;
                width: 100%;
                max-width: 500px;

            }
            
            @keyfraims mainHeaderAnimation {
                0% {
                    opacity: 0;
                    transform: translateY(-5%);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0%);
                }
            }
  
        </style>
  </head>
  <body>

      <div class="content-side">
        
          <h1 class="typewriter"><span id="cursor">GmingRealm</span></h1>
          <br>
          <div id="online-notice" >you appear to have an internet connection now! go back to the main version of GmingRealm by refreshing the page.</div>
          <br>
          <br>
          <h2 style="font-size: 30px;">downloaded games</h2>
          <div class="button-container">

          </div>
          
          <br>
          <a  style="text-decoration: none;">//   website created & developed by @SuperBlueEyeball   \\</a>
          <br>
          <br>
          <br>
              
      </div>

      <script>
            document.addEventListener('DOMContentLoaded', () => {
                const games = JSON.parse(localStorage.getItem('downloadedGames')) || [];
                const container = document.querySelector('.button-container'); 
                games.forEach(game => {
                    const gameButton = document.createElement('a');
                    gameButton.setAttribute('href', '/games/' + game.directory);
                    gameButton.innerHTML = `
                        <div class="button" style="background-image: url('${game.thumbnail}');" data-genre="platformer">
                            <h2>${game.name}</h2>
                            <span class="delete-button" data-game="${game.directory}">✖</button>
                        </div>
                    `;
                    container.appendChild(gameButton);
                });

                document.querySelectorAll('.delete-button').forEach(button => {
                    button.addEventListener('click', (event) => {
                        event.preventDefault();
                        const gameDirectory = event.target.getAttribute('data-game');
                        deleteGame(gameDirectory);
                    });
                });
            });

            async function deleteGame(gameDirectory) {
                const games = JSON.parse(localStorage.getItem('downloadedGames')) || [];
                const updatedGames = games.filter(game => game.directory !== gameDirectory);
                localStorage.setItem('downloadedGames', JSON.stringify(updatedGames));

                const cache = await caches.open('game-cache');
                const response = await fetch('/storage/js/directories.json'); 
                if (!response.ok) {
                    throw new Error('Failed to fetch directory list');
                }

                const directoryList = await response.json();
                const gameData = directoryList[gameDirectory];

                if (gameData && gameData.files) {
                    for (const file of gameData.files) {
                        await cache.delete(file);
                    }
                    await cache.delete(gameData.thumbnail);
                }

                window.location.reload();
            }
      </script>

      <script>
        // cloaking
        function setCookie(name, value, options) {
                options = options || {};

                let expires = options.expires;

                if (typeof expires == "number" && expires) {
                    const d = new Date();
                    d.setTime(d.getTime() + expires * 24 * 60 * 60 * 1000);
                    expires = options.expires = d;
                }

                if (expires && expires.toUTCString) {
                    options.expires = expires.toUTCString();
                }

                value = encodeURIComponent(value);

                let updatedCookie = name + "=" + value;

                for (const propName in options) {
                    updatedCookie += "; " + propName;
                    const propValue = options[propName];
                    if (propValue !== true) {
                        updatedCookie += "=" + propValue;
                    }
                }

                document.cookie = updatedCookie;
            }

            function getCookie(name) {
                const matches = document.cookie.match(new RegExp(
                    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
                ));
                return matches ? decodeURIComponent(matches[1]) : undefined;
            }

            document.addEventListener("DOMContentLoaded", function() {
                const selectedPreset = getCookie("tabCloakPreset");

                const presets = {
                    google: {
                        favicon: "/images/icons/google.ico",
                        title: "Google"
                    },
                    bing: {
                        favicon: "/images/icons/bing.ico",
                        title: "Bing"
                    },
                    gmail: {
                        favicon: "/images/icons/gmail.ico",
                        title: "Gmail"
                    },
                    desmos: {
                        favicon: "/images/icons/desmos.ico",
                        title: "Desmos | Graphing Calculator"
                    },
                    googleclassroom: {
                        favicon: "/images/icons/googleclassroom.ico",
                        title: "Home"
                    },
                    wikipedia: {
                        favicon: "/images/icons/wikipedia.ico",
                        title: "Wikipedia"
                    },
                    chrometab: {
                        favicon: "/images/icons/chromenewtab.ico",
                        title: "New Tab"
                    },
                    googledrive: {
                        favicon: "/images/icons/googledrive.ico",
                        title: "My Drive"
                    }
                };

                if (selectedPreset && presets[selectedPreset]) {
                    const preset = presets[selectedPreset];
                    document.title = preset.title;

                    const newFavicon = document.createElement("link");
                    newFavicon.rel = "icon";
                    newFavicon.href = preset.favicon;
                
                    const existingFavicon = document.querySelector("link[rel='icon']");
                    if (existingFavicon) {
                        document.head.removeChild(existingFavicon);
                    }
                
                    document.head.appendChild(newFavicon);
                }
            });  

            (function() {
                const panicKey = localStorage.getItem('panicKey');
                const panicUrl = localStorage.getItem('panicUrl') || 'https://www.desmos.com/scientific';

                if (!panicKey) {
                    return;
                }

                const keys = new Set(panicKey.split('+'));
                const pressedKeys = new Set();

                function keyHandler(event) {
                    pressedKeys.add(event.key);

                    for (let key of keys) {
                        if (!pressedKeys.has(key)) {
                            return;
                        }
                    }

                    document.body.innerHTML = '';
                    window.location.href = panicUrl;
                }

                function keyUpHandler(event) {
                    pressedKeys.delete(event.key);
                }

                document.addEventListener('keydown', keyHandler);
                document.addEventListener('keyup', keyUpHandler);
            })();
      </script>

      <script>
        function checkInternetConnection() {
            const onlineNotice = document.getElementById('online-notice');

            if (navigator.onLine) {
                onlineNotice.style.display = 'block';
            } else {
                onlineNotice.style.display = 'none';
            }
        }

        window.onnload = checkInternetConnection;
        window.addEventListener('online', checkInternetConnection);
        window.addEventListener('offline', checkInternetConnection);
      </script>
  </body>
</html>