git rekt — retro-website.git: 725dd15288ec413c60ffc5eb98544da79381ef06

@@ -5,9 +5,8 @@ <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>BiRabittoh's cool website</title>
-    <link rel="stylesheet" href="res/style.css">
+    <link rel="stylesheet" href="res/css/style.css">
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>🥭</text></svg>">
-    <script src="https://melonking.net/scripts/frame-link.js"></script>
 </head>
 
 <body style='background-image: url("res/img/background.jpg"); height: 100%;'>
@@ -67,19 +66,21 @@ </div>
     <div id="music-player" onmouseenter="showTitle()" onmouseleave="hideTitle()" style="bottom: -100%">
         <div id="music-player-base" onclick="playPause()">
             <div id="music-player-overlay"></div>
-            <audio loop id="music"><source id="music-source" src="#"></audio>
         </div>
         <div id="music-player-song" style="top: 100%;">
             <span id="song-text">Jay Tholen - Awesome Rap Beat (Hypnospace Outlaw Original Soundtrack, Vol. 2)</span>
         </div>
     </div>
+    
+    <audio loop id="music"><source id="music-source" src="#"></audio>
     <audio id="loadelement1"><source src="res/sfx/os/loadelement1.ogg"></audio>
     <audio id="loadelement2"><source src="res/sfx/os/loadelement2.ogg"></audio>
     <audio id="loadelement3"><source src="res/sfx/os/loadelement3.ogg"></audio>
     <audio id="loadelement4"><source src="res/sfx/os/loadelement4.ogg"></audio>
 
-    <script src="res/slow_load.js"></script>
-    <script src="res/script.js"></script>
+    <script src="res/js/slow_load.js"></script>
+    <script src="res/js/script.js"></script>
+    <script src="res/js/frame-link.js"></script>
 </body>
 
 </html>

M pages/about.html → pages/about.html

@@ -3,14 +3,14 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 <body data-page="about">
     <h1>About me</h1>
 
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M pages/anime.html → pages/anime.html

@@ -3,9 +3,7 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 <body data-page="anime">
@@ -16,8 +14,8 @@ Gurren Lagann
 Dragon Quest Dai's Adventure (remake 2021)
     -->
     
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M pages/dragonquest.html → pages/dragonquest.html

@@ -3,16 +3,14 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 <body data-page="dragonquest">
     <h1>Dragon Quest</h1>
-    
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M pages/earthbound.html → pages/earthbound.html

@@ -3,16 +3,14 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 <body data-page="earthbound">
     <h1>Earthbound</h1>
-    
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M pages/gf.html → pages/gf.html

@@ -3,17 +3,15 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 
 <body data-page="gf">
     <h1>My love Giulia</h1>
-    
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M pages/indies.html → pages/indies.html

@@ -3,9 +3,7 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 <body data-page="indies">
@@ -17,10 +15,22 @@ <h2>Psychonauts</h2>
     <h2>Undertale</h2>
     <h2>Hylics</h2>
     <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-    <h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2><h2>Hylics</h2>
-    
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+    <h2>Hylics</h2>
+
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M pages/zelda.html → pages/zelda.html

@@ -3,16 +3,14 @@ <html lang="en" style="height: 100%" onmousedown="parent.firstClickPlay(this);">
 
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="../res/style.css">
+    <link rel="stylesheet" href="../res/css/style.css">
 </head>
 
 <body data-page="zelda">
     <h1>The Legend of Zelda</h1>
-    
-    <script src="../res/slow_load.js"></script>
-    <script src="../res/iframe.js"></script>
+
+    <script src="../res/js/slow_load.js"></script>
+    <script src="../res/js/iframe.js"></script>
 </body>
 
 </html>

M res/iframe.js → res/js/iframe.js

A res/js/frame-link.js

@@ -0,0 +1,72 @@
+// Melo-tech Frame Link Management System 3.2
+// This script updates the URL on each page, allowing you to share and bookmark frameset and iFrame links!
+// Feel free to steal this code!
+// Get help here - https://forum.melonking.net/index.php?topic=115
+
+// oO How to use this code Oo
+// 1. Add '<script src="https://melonking.net/scripts/frame-link.js"></script>' to your <head>.
+// 2. Add 'id="mainframe"' to your main iFrame or Frame window.
+// Optional: Create a second <script></script> section AFTER you link the frame-link.js
+// Optional: add 'updateTitle = false;' if you want to disable title updating. (Default is true)
+// Optional: add 'titlePrefix = "My Site ";' if you want to add a prefix to your titles. (Default is none)
+// Optional: add 'pageParam = "z";' if you want to change the url path of your pages. (Default is z)
+// Optional: if you use a hitCounter like GoatCounter add 'hitCounterFunction = function () { XXX MY HIT COUNTER CODE }', this function will automaticly be called each time someone click a page, so you can log per page hits within your frame.
+// See https://melonking.net/melon.html for a working example! GOOD LUCK!
+
+var mainFrame;
+var firstLoad = true;
+var updateTitle = true;
+var pageParam = "z";
+var titlePrefix = "";
+var hitCounterFunction = undefined;
+
+//Event to handle first page load - Also sets up the mainFrame
+window.addEventListener("DOMContentLoaded", (e) => {
+    mainFrame = document.getElementById("mainframe");
+    mainFrame.addEventListener("load", updateHistory, false);
+    setMainFrame();
+});
+
+//Event to handle back button presses
+window.addEventListener("popstate", function (e) {
+    if (e.state !== null) {
+        setMainFrame();
+    }
+});
+
+//Checks to see if a page parameter exists and sets the mainframe src to that page.
+function setMainFrame() {
+    let params = new URLSearchParams(window.location.search);
+    let page = params.get(pageParam);
+    if (page != null) {
+        mainFrame.src = page;
+    }
+}
+
+//Updates the browser history with the current page, causing the URL bar to update.
+function updateHistory() {
+    let title = titlePrefix + mainFrame.contentDocument.title;
+
+    // Stops the page getting into an infinate loop reloading itself.
+    if (firstLoad) {
+        firstLoad = false;
+        if (updateTitle) {
+            document.title = title;
+        }
+        if (hitCounterFunction != undefined) {
+            hitCounterFunction();
+        }
+        return;
+    }
+
+    history.replaceState(null, "", "?" + pageParam + "=" + mainFrame.contentWindow.location.pathname);
+
+    if (updateTitle) {
+        document.title = title;
+    }
+
+    //Save a hit - Optionally run this if a hit counter has been defined.
+    if (hitCounterFunction != undefined) {
+        hitCounterFunction();
+    }
+}

M res/script.js → res/js/script.js

M res/slow_load.js → res/js/slow_load.js

M res/style.css → res/css/style.css

@@ -1,6 +1,6 @@
 @font-face {
     font-family: '04b_03';
-    src: url('ttf/04b03.ttf')  format('truetype');
+    src: url('../ttf/04b03.ttf')  format('truetype');
 }
 
 #overlay {
@@ -18,18 +18,18 @@
 html {
     font-family: "04b_03";
     color: white;
-    cursor: url("cur/cursor2x.cur"), auto;
+    cursor: url("../cur/cursor2x.cur"), auto;
 }
 
 #mainframe {
     height: inherit;
     width: 100%;
     border: 0px;
-    cursor: url("cur/cursor2x.cur"), auto;
+    cursor: url("../cur/cursor2x.cur"), auto;
 }
 
 a {
-    cursor: url("cur/pointer2x.cur"), auto;
+    cursor: url("../cur/pointer2x.cur"), auto;
 }
 
 img {
@@ -61,7 +61,7 @@ }
 
 #menu-div {
     text-align: center;
-    background-image: url("img/orange-banner.jpg");
+    background-image: url("../img/orange-banner.jpg");
     background-size: cover;
     color: white;
     padding:15px;
@@ -102,7 +102,7 @@ float: left;
     width: 114px;
     height: 66px;
     background-color: #141414;
-    background-image: url("img/player_pause.png");
+    background-image: url("../img/player_pause.png");
     background-size: contain;
 }
 
@@ -113,7 +113,7 @@ height: 66px;
     min-width: 700px;
     margin-left: 5px;
     background-color: #141414;
-    background-image: url("img/player_song.png");
+    background-image: url("../img/player_song.png");
     background-size: 100% 100%;
     transition: top .4s ease-in-out;
 }
@@ -127,13 +127,13 @@ top: 30%;
 }
 
 .player-play {
-    background-image: url("img/player_play.png")!important;
+    background-image: url("../img/player_play.png")!important;
 }
 
 #music-player-overlay {
     width: 100%;
     height: 100%;
-    background-image: url(img/player_overlay.png);
+    background-image: url("../img/player_overlay.png");
     cursor: url("cur/pointer2x.cur"), auto;
     background-size: contain;
 }