added unfinished demo page

Xordas · Feb 21, 2024 · d87f84d · d87f84d
1 parent 5663c53
commit d87f84d
Show file tree

Hide file tree

Showing 2 changed files with 195 additions and 0 deletions.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Xordas games repo</title>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-X42W1N0Z9Q"></script>
+    <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-X42W1N0Z9Q');
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+        body {
+            font-family: 'Roboto', sans-serif;
+            background-color: #131b24;
+            margin: 0;
+            padding: 0;
+            color: #ecf0f1;
+            line-height: 1.6;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+        }
+
+        .container {
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            background-color: #1f2c38;
+            transition: background-color 0.3s ease;
+            border-radius: 10px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #ecf0f1;
+            font-weight: 700;
+            margin-bottom: 20px;
+        }
+
+        h2 {
+            font-weight: 400;
+            margin-bottom: 20px;
+            color: #ecf0f1;
+        }
+
+        #bmc-widget {
+            position: fixed;
+            bottom: 18px;
+            right: 18px;
+        }
+
+        .demo-bar {
+            background-color: #2c3e50;
+            color: #ecf0f1;
+            padding: 10px;
+            text-align: center;
+        }
+
+        .demo-bar input[type="file"] {
+            display: none;
+        }
+
+        .demo-bar label {
+            display: inline-block;
+            padding: 8px 16px;
+            background-color: #34495e;
+            border: 1px solid #7f8c8d;
+            color: #ecf0f1;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: background-color 0.3s ease, transform 0.3s ease;
+        }
+
+        .demo-bar label:hover {
+            background-color: #2c3e50;
+            transform: scale(1.02);
+        }
+
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            padding: 10px;
+            background-color: #2c3e50;
+            color: #ecf0f1;
+        }
+
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #f9f9f9;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+            padding: 12px 16px;
+            z-index: 1;
+        }
+
+        .dropdown:hover .dropdown-content {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="navbar">
+        <input type="file" id="swf-file" accept=".swf">
+        <label for="swf-file">Load SWF File</label>
+        <div class="dropdown">
+            <label id="preset-demo">Use Preset Demo</label>
+            <div class="dropdown-content">
+                <a href="#" data-url="/flash-files/dl.swf">Duck life</a>
+                <a href="#" data-url="/flash-files/ltf.swf">Learn to fly</a>
+                <a href="#" data-url="/flash-files/papapizza.swf">Papas pizzeria</a>
+            </div>
+        </div>
+    </div>
+
+    <div id="bmc-widget">
+        <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="Xordas" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
+    </div>
+
+    <script src="/ruffle/ruffle.js"></script>
+
+    <!--preset flash-->
+    <script>
+        var presets = document.querySelectorAll('.dropdown-content a');
+
+        presets.forEach(function(preset) {
+            preset.addEventListener('click', function(event) {
+                event.preventDefault();
+
+                var oldswf = document.getElementById('swf');
+
+                if (oldswf) {
+                    oldswf.remove();
+                }
+
+                var object = document.createElement('object');
+                object.id = 'swf';
+                object.data = this.dataset.url; 
+                object.type = 'application/x-shockwave-flash';
+                document.body.appendChild(object);
+
+                window.RufflePlayer.configure({ polyfills: true });
+                window.RufflePlayer.install();
+            });
+        });
+    </script>
+
+    <!--user specified flash-->
+    <script>
+        document.getElementById('swf-file').addEventListener('change', function() {
+            var oldswf = document.getElementById('swf');
+
+            if (oldswf) {
+                oldswf.remove();
+            }
+
+            var file = this.files[0];
+            var object = document.createElement('object');
+            object.id = 'swf';
+            object.data = URL.createObjectURL(file);
+            object.type = 'application/x-shockwave-flash';
+            document.body.appendChild(object);
+
+            window.RufflePlayer.configure({ polyfills: true });
+            window.RufflePlayer.install();
+        });
+    </script>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -84,6 +84,7 @@
             bottom: 18px;
             right: 18px;
         }
+
     </style>
 </head>
 <body>
@@ -92,11 +93,19 @@ <h1>Welcome to my games repo!</h1>
         <h2>Click on the button below to go to the repo, where you can find the complete list of games.</h2>
         <ul class="repo-link">
             <li><a href="https://github.com/Xordas/games-repo"><center>Github repo</center></a></li>
+            <li><a href=/demo><center>Try a demo</center></a></li>
         </ul>
     </div>
 
     <div id="bmc-widget">
         <script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="Xordas" data-description="Support me on Buy me a coffee!" data-message="" data-color="#5F7FFF" data-position="Right" data-x_margin="18" data-y_margin="18"></script>
     </div>
+
+    <div class="demo-bar">
+        <input type="file" id="swf-file" accept=".swf">
+        <label for="swf-file">Load SWF File</label>
+        <label id="preset-demo">Use Preset Demo</label>
+    </div>
+
 </body>
 </html>