work on embed loading

static/assets/css/main.css

@@ -523,21 +523,6 @@ input:checked+.slider:before {
     box-shadow: 0vh 0.5vh 1vh 0vh var(--shadow-color);
 }
 
-.framei {
-    border-radius: 2vh;
-    box-shadow: 0vh 0.75vh 1.5vh 0vh var(--shadow-color);
-    border-width: 3vh;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.mainiframe {
-    position: relative;
-}
-
 .center-content {
     text-align: center;
     justify-content: center;
@@ -545,20 +530,22 @@ input:checked+.slider:before {
 }
 
 .container {
-    width: calc(50vw - 155px);
+    width: calc(calc(100vw / 2) - 134px);
     background-color: var(--background-color);
     box-shadow: 0vh 0.75vh 1.5vh 0vh var(--shadow-color);
-    margin-left: 15vh;
     padding: 2vw;
     border-radius: 2vh;
     color: var(--text);
-    min-width: 40vw;
     overflow: hidden;
     margin-left: 50px;
     margin-right: 25px;
     text-align: center;
 }
 
+.container.full {
+    width: 100%;
+}
+
 .container.centered {
     width: auto;
     position: absolute;

static/assets/js/main.js

@@ -45,41 +45,59 @@ setInterval(() => {
 
 window.addEventListener('DOMContentLoaded', () => setTimeout(() => document.body.style.opacity = 1, 1000));
 
-document.querySelectorAll('a').forEach(hyperlink => hyperlink.addEventListener('click', (e) => {
+/**
+ * @param {HTMLAnchorElement} e 
+ */
+const hyperlinkHandler = (e) => {
     if (hyperlink.dataset.action === 'no_redirect') e.preventDefault();
-    else if (hyperlink.href && hyperlink.target !== '_blank' && new URL(hyperlink.href).pathname !== location.pathname) {
+    else if (hyperlink.href && hyperlink.target !== '_blank') {
         e.preventDefault();
 
         document.body.style.opacity = '0.7';
 
-        /*setTimeout(async () => {
-            document.body.style.transition = 'none';
-            document.body.style.position = 'absolute';
-            document.body.style.top = '0';
-            document.body.style.bottom = '0';
-            document.body.style.left = '0';
-            document.body.style.right = '0';
+        if (new URL(hyperlink.href).pathname === location.pathname) setTimeout(() => document.body.style.opacity = '', 1000);
+        else {
+            /*setTimeout(async () => {
+                const style = document.createElement('style');
+                style.textContent = `
+                * {
+                    transition: none;
+                }`;
 
-            document.body.querySelectorAll('*').forEach(el => {
-                el.style.transition = 'none';
-                el.style.display = 'none';
-            });
+                document.body.querySelectorAll('*').forEach(el => {
+                    el.style.transition = 'none';
+                    el.style.display = 'none';
+                });
 
-            if (new URL(hyperlink.href).host === location.host) {
-                const page = new DOMParser().parseFromString(await(await fetch(hyperlink.href)).text(), 'text/html');
-                document.head.innerHTML = page.head.innerHTML;
+                if (new URL(hyperlink.href).host === location.host) {
+                    const page = new DOMParser().parseFromString(await (await fetch(hyperlink.href)).text(), 'text/html');
+                    document.head.innerHTML = page.head.innerHTML;
+                    document.head.appendChild(style);
 
-                const scripts = page.body.querySelectorAll('script');
+                    window.history.pushState({}, '', hyperlink.href);
 
-                page.body.querySelectorAll('script').forEach(script => script.remove());
+                    const scripts = page.body.querySelectorAll('script');
 
-                document.body.innerHTML = page.body.innerHTML;
-            } else setTimeout(() => window.location.href = hyperlink.href, 500);
-        }, 500);*/
+                    page.body.querySelectorAll('script').forEach(script => script.remove());
 
-        setTimeout(() => window.location.href = hyperlink.href, 500);
+                    document.body.innerHTML = page.body.innerHTML;
+
+                    document.body.style.display = 'none';
+
+                    setTimeout(() => document.body.style.display = '', 100);
+
+                    setTimeout(() => {
+                        style.remove();
+                    }, 500);
+                } else setTimeout(() => window.location.href = hyperlink.href, 500);
+            }, 500);*/
+
+            setTimeout(() => window.location.href = hyperlink.href, 500);
+        }
     }
-}));
+}
+
+document.querySelectorAll('a').forEach(hyperlink => hyperlink.addEventListener('click', hyperlinkHandler));
 
 window.onhashchange = () => {
     if (location.hash === '#settings') document.querySelector('.sidebar').classList.add('active');
@@ -104,10 +122,6 @@ if (location.pathname !== '/view') fetch('/api/changelog')
         document.querySelector('#mode').textContent = changelog.mode;
     });
 
-window.addEventListener('blur', (e) => {
-
-});
-
 if (location.pathname === '/') {
     fetch('/api/games')
         .then(res => res.json())

static/changelog.html

@@ -16,7 +16,7 @@
     <!--el:sidebar-->
 
     <div class="row mainpage" style="width: 100%;">
-        <div class="container" style="text-align: left; margin-right: 50px; width: 100%; overflow: scroll; text-align: center;">
+        <div class="container full" style="text-align: left; margin-right: 50px; width: 100%; overflow: scroll; text-align: center;">
             <h1>Changelog</h1>
 
             <div id="changelog"></div>

static/index.html

@@ -42,7 +42,9 @@
             <hr>
 
             <h2 style="margin-bottom: 0px;">Changelog</h2>
-            <small><a href="/changelog" class="blue">Full changelog</a></small>
+            <small>
+                <a href="/changelog" class="blue">Full changelog</a>
+            </small>
 
             <br>
 

static/privacy.html

@@ -16,7 +16,7 @@
     <!--el:sidebar-->
 
     <div class="row mainpage">
-        <div class="container" style="text-align: left; margin-right: 50px;">
+        <div class="container full" style="text-align: left; margin-right: 50px;">
             <h1 style="text-align: center;">Privacy Policy</h1>
 
             <p>

static/tos.html

@@ -16,7 +16,7 @@
   <!--el:sidebar-->
 
   <div class="row mainpage">
-    <div class="container" style="text-align: left; margin-right: 50px; overflow: auto;">
+    <div class="container full" style="text-align: left; margin-right: 50px; overflow: auto;">
       <h1 style="text-align: center;">Terms of Service</h1>
 
       <style>

static/view.html

@@ -24,7 +24,7 @@
 
         <div class="right">
             <span class="item" id="return">
-                <i class="fa-solid fa-caret-left fa-lg"></i>
+                <i class="fa-solid fa-chevron-left"></i>
             </span>
 
             <span class="item" id="fullscreen">

templates/navbar.html

@@ -12,6 +12,6 @@
         <a href="/apps"><i class="fa-solid fa-rocket-launch fa-xs"></i>Apps</a>
         <a href="/search"><i class="fa-solid fa-magnifying-glass fa-xs"></i>Proxy</a>
         <a href="/cheats"><i class="fa-solid fa-computer fa-xs"></i>Cheats</a>
-        <a href="#settings" data-link="true" data-attr="sidebar_trigger"><i class="fa-solid fa-gear fa-sm"></i>Settings</a>
+        <a href="#settings" data-action="no_redirect" data-attr="sidebar_trigger"><i class="fa-solid fa-gear fa-sm"></i>Settings</a>
     </div>
 </div>