Create appplayer.html

2023-08-27 09:51:45 -04:00
parent 74ab173c1a
commit 942ece50fa
1 changed files with 65 additions and 0 deletions
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" href="/assets/css/main.css">
+
+  <title>App | Polaris</title>
+</head>
+
+<body>
+  <div>
+    <iframe class="frame" scrolling="no" frameborder="no" sandbox="allow-scripts allow-forms allow-pointer-lock allow-same-origin"></iframe>
+    
+    <div class="gamebar">
+      <img src="https://via.placeholder.com/20x20?text=img" id="gameicon"/>
+      <p id="gametitle">Loading...</p>
+      <i class="fa-solid fa-expand" id="fullscreen"></i>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'f') {
+            const iframe = document.querySelector('.frame');
+
+            if (iframe.requestFullscreen) iframe.requestFullscreen();
+            else if (iframe.webkitRequestFullscreen) iframe.webkitRequestFullscreen();
+            else if (iframe.mozRequestFullScreen) iframe.mozRequestFullScreen();
+            else if (iframe.msRequestFullscreen) iframe.msRequestFullscreen();
+        }
+    });
+
+    fetch('/assets/JSON/apps.json')
+        .then(res => res.json())
+        .then(games => {
+            const game = games[Number(new URLSearchParams(location.search).get('id'))];
+
+            if (game) {
+                const iframe = document.querySelector('.frame');
+
+                iframe.src = game.source;
+                document.querySelector('#gameicon').src = game.image;
+                document.querySelector('#gametitle').textContent = game.name;
+            } else {
+                document.querySelector('#gametitle').textContent = 'Failed to load App';
+            }
+        });
+
+    document.querySelector('#fullscreen').addEventListener('click', () => {
+        const iframe = document.querySelector('.frame');
+
+        if (iframe.requestFullscreen) iframe.requestFullscreen();
+        else if (iframe.webkitRequestFullscreen) iframe.webkitRequestFullscreen();
+        else if (iframe.mozRequestFullScreen) iframe.mozRequestFullScreen();
+        else if (iframe.msRequestFullscreen) iframe.msRequestFullscreen();
+    });
+  </script>
+  <script src="/assets/js/main.js" type="module"></script>
+</body>
+
+
+</html>