Merge pull request #2 from Random06457/master

Add the fancy style
2026-09-27 22:45:15 -04:00 · 2020-06-01 13:48:57 -04:00
parent 5cf7e76aab 34bd907843
commit eabdc4ce55
9 changed files with 352 additions and 40 deletions
@@ -0,0 +1,19 @@
+var audio = new Audio('file_select.mp3'); 
+audio.addEventListener('ended', function() {
+    this.currentTime = 0;
+    this.play();
+}, false);
+audio.pause();
+
+function toggleMute()
+{
+    if (!audio.paused)
+        audio.pause();
+    else
+    {
+        audio.currentTime = 0;
+        audio.play();
+    }
+    var html = '<span style="color:' + (audio.paused? "red" : "green") + '">' + (audio.paused? "Off" : "On") + "</span>";
+    document.getElementById("toggle_audio_mute").innerHTML = "Audio: " + html;
+}
@@ -0,0 +1,27 @@
+
+var imgSrc = "img/vrbox_cur.png";
+
+// background scroll animation
+var bgImg = new Image();
+bgImg.onload = function()
+{
+    var factor = (window.innerHeight/this.height);
+    var style = document.createElement('style');
+    style.type = 'text/css';
+    style.innerHTML = '@keyframes bg_anim {\
+        from {background-position-x:0%;} \
+        to {background-position-x:-' + (this.width*(factor)) + '%;} \
+    }';
+    document.getElementsByTagName('head')[0].appendChild(style);
+
+    var bodyStyle = document.getElementsByTagName("body")[0].style;
+    bodyStyle.animationDuration = (1000*(factor)) + "s"
+    bodyStyle.backgroundImage = "url(" + imgSrc + ")";
+    bodyStyle.backgroundRepeat = "repeat-x";
+    bodyStyle.backgroundAttachment = "fixed";
+    bodyStyle.backgroundSize = "cover";
+    bodyStyle.animationName = "bg_anim";
+    bodyStyle.animationIterationCount = "infinite";
+    bodyStyle.animationTimingFunction = "linear";
+}
+bgImg.src = imgSrc;
@@ -3,36 +3,84 @@

 <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="css.css" />
+    <link rel="stylesheet" href="main.css" />
+    <script type="text/javascript" src="bg.js"></script>
+    <script type="text/javascript" src="audio.js"></script>
    <title>Z64</title>
 </head>

-<body class="bg-dark">
-    <div class="jumbotron vertical-center bg-dark">
+<body>
+    <div>
        <div class="container text-center">
            <img src="img/logo.png" style="width: 200px; height: 200px" />
        </div>
-        <div class="container my-5 py-2" style="background-color: #fffaaa">
-            <h1 class="text-center">Zelda 64 Reverse Engineering</h1>
-            <h3>Join the discussion!</h3>
-            <p>Discord: <a href="https://discord.zelda64.dev">discord.zelda64.dev</a></p>
+        
+        <br><br><br>
+        <h1 class="text-center">Zelda 64 Reverse Engineering</h1> 
+        <br><br><br>
+        
+        <div class="content-container">
+              
+            <div class="zelda-file-box">
+                <div width=100%>
+                    <div class="zelda-box zelda-button zelda-file-box-slot">File 1</div>
+                    <div class="zelda-box zelda-file-box-filename">Join the discussion!
+                        <hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
+                    </div>
+                </div>
+                <div>
+                    <div class="zelda-box zelda-file-box-hack_left"></div>
+                    <div class="zelda-box zelda-file-box-hack_right"></div>
+                </div>
+                <div class="zelda-file-box-main zelda-box">
+                    <a href="https://discord.zelda64.dev">Discord</a>
+                </div>
+            </div>
+            <br><br><br>
+            <div class="zelda-file-box">
+                <div width=100%>
+                    <div class="zelda-box zelda-button zelda-file-box-slot">File 2</div>
+                    <div class="zelda-box zelda-file-box-filename">Development
+                        <hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
+                    </div>
+                </div>
+                <div>
+                    <div class="zelda-box zelda-file-box-hack_left"></div>
+                    <div class="zelda-box zelda-file-box-hack_right"></div>
+                </div>
+                <div class="zelda-file-box-main zelda-box">
+                    <p><a href="https://github.com/zeldaret/">Github</a></p>
+                    <p><a href="progress.html">Progress Page</a></p>
+                    <p><a href="https://trello.com/b/qUqnUkWY/ocarina-of-time-decompilation">OOT Trello</a></p>
+                    <a href="https://trello.com/b/ruxw9n6m/majoras-mask-decompilation">MM Trello</a>
+                </div>
+            </div>
+            <br><br><br>
+            <div class="zelda-file-box">
+                <div width=100%>
+                    <div class="zelda-box zelda-button zelda-file-box-slot">File 3</div>
+                    <div class="zelda-box zelda-file-box-filename">Resources
+                        <hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
+                    </div>
+                </div>
+                <div>
+                    <div class="zelda-box zelda-file-box-hack_left"></div>
+                    <div class="zelda-box zelda-file-box-hack_right"></div>
+                </div>
+                <div class="zelda-file-box-main zelda-box">
+                    <p><a href="https://www.h-schmidt.net/FloatConverter/IEEE754.html">Hex to float converter</a></p>
+                    <p><a href="https://hackmd.io/m3E7g2YaSxiwUv9QKBLYyA">Gfx Decompilation Guide</a></p>
+                    <p><a href="https://docs.google.com/spreadsheets/d/1hiP0JH_rEcq-s8vOnnoNPy2ooXhxl8qas4HItn30-Oc">OoT Debug Source Code Structure</a></p>
+                    <a href="https://wiki.cloudmodding.com/">CloudModding Wiki</a>
+                </div>
+            </div>

-            <h3>Development</h3>
-            <p>Github: <a href="https://github.com/zeldaret/">github.com/zeldaret</a></p>
-            <p>Project Progress: <a href="progress.html">progress.html</a></p>
-            <p>OOT Trello: <a href="https://trello.com/b/qUqnUkWY/ocarina-of-time-decompilation">trello.com/b/qUqnUkWY/ocarina-of-time-decompilation</a></p>
-            <p>MM Trello: <a href="https://trello.com/b/ruxw9n6m/majoras-mask-decompilation">https://trello.com/b/ruxw9n6m/majoras-mask-decompilation</a></p>
-
-            <h3>Resources</h3>
-            <p><a href="https://www.h-schmidt.net/FloatConverter/IEEE754.html">Hex to float converter</a></p>
-            <p><a href="https://hackmd.io/m3E7g2YaSxiwUv9QKBLYyA">Gfx Decompilation Guide</a></p>
-            <p><a href="https://docs.google.com/spreadsheets/d/1hiP0JH_rEcq-s8vOnnoNPy2ooXhxl8qas4HItn30-Oc">OoT Debug Source Code Structure</a></p>
-            <a href="https://wiki.cloudmodding.com/">CloudModding Wiki</a>
-            <ul>
-                <li><a href="https://wiki.cloudmodding.com/oot/Actor_List_(Variables)">Actor List</a></li>
-            </ul>
+            <!--
+            <br><br><br><br>
+            <div class="zelda-box zelda-button" id="toggle_audio_mute" onclick="toggleMute()">Audio: <span style="color:red">Off</span></div>
+            -->
        </div>
    </div>
 </body>

-</html>
+</html>
@@ -0,0 +1,175 @@
+:root {
+    --scaling-factor: 1;
+}
+
+/*
+@media only screen and (min-width: 2560px)
+{
+    :root {
+        --scaling-factor: 2;
+    }
+}
+
+@media only screen and (min-width: 3840px)
+{
+    :root {
+        --scaling-factor: 3;
+    }
+}
+*/
+
+:root {
+    --zelda-border-light: #4f77cd;
+    --zelda-border-dark: #1c2a49;
+    --zelda-bg: #2f487c;
+    --zelda-button-width: calc(145px*var(--scaling-factor));
+    --zelda-button-font-size: calc(22px*var(--scaling-factor));
+    --zelda-content-font-size: calc(18px*var(--scaling-factor));
+}
+
+
+@font-face {
+    font-family: "Chiaro";
+    src: url("FOT-ChiaroStd-B.otf");
+}
+  
+h1 {
+    color:white;
+    text-shadow: 0px 0px 0.1em;
+}
+
+/* updated in bg.js */
+body{
+    line-height: 0.5;
+}
+
+html {
+    min-height: 100%;
+}
+
+a {
+    color: yellow;
+}
+a:hover
+{
+    color: red;
+}
+
+.zelda-box {
+    padding: calc(14px*var(--scaling-factor));
+    background: var(--zelda-bg);
+    border-style: solid;
+    border-color: var(--zelda-border-light) var(--zelda-border-dark) var(--zelda-border-dark) var(--zelda-border-light);
+    border-width: calc(6px*var(--scaling-factor));
+    border-radius: calc(4px*var(--scaling-factor));
+    /*
+    text-shadow: 0px 0px 4px;
+    */
+}
+
+.zelda-button {
+    color: white;
+    cursor: pointer;
+    font-size: var(--zelda-button-font-size);
+    padding-top: calc(10px*var(--scaling-factor));
+    width: var(--zelda-button-width);
+}
+
+
+.zelda-file-box {
+    position: relative;
+    font-family: Chiaro;
+    color: white;
+}
+
+.zelda-file-box-slot {
+    color: black;
+    width: var(--zelda-button-width);
+    float: left;
+    text-align: center;
+    text-shadow: 0px 0px calc(4px*var(--scaling-factor));;
+    cursor: default;
+}
+
+.zelda-file-box-filename {
+    font-kerning: none;
+    font-size: var(--zelda-button-font-size);
+    width: auto;
+    height: calc(47px*var(--scaling-factor));
+    border-bottom-style: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    margin-left: var(--zelda-button-width);
+}
+
+.zelda-file-box-hack_left {
+    padding: 0;
+    width: var(--zelda-button-width);
+    height: 0px;
+    border-right-style: none;
+    border-bottom-style: none;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    float: left;
+}
+.zelda-file-box-hack_right {
+    padding: 0;
+    width: auto;
+    height: calc(6px*var(--scaling-factor));
+    border-top-style: none;
+    border-bottom-style: none;
+    border-radius: 0;
+    margin-left: var(--zelda-button-width);
+    position: relative;
+}
+
+.zelda-file-box-main {
+    line-height: calc(5px*var(--scaling-factor));
+    width: 100%;
+    border-top-style: none;
+    border-top-left-radius: 0;
+    font-size: var(--zelda-content-font-size);
+}
+
+.progress-value {
+    text-align: right;
+    color: #ffc107;
+}
+
+
+.content-container {
+    width: 100%;
+    margin: calc(30px*var(--scaling-factor)) auto;
+    /*
+    border: calc(1px*var(--scaling-factor)) solid red;
+    */
+}
+
+@media only screen and (min-width: 700px) {
+	.content-container {
+		width: 80%;
+        margin: 0 auto;
+        /*
+        border: calc(1px*var(--scaling-factor)) solid blue;
+        */
+	}
+}
+@media only screen and (min-width: 1000px) {
+	.content-container {
+		width: 60%;
+        margin: 0 auto;
+        /*
+        border: calc(1px*var(--scaling-factor)) solid red;
+        */
+	}
+}
+@media only screen and (min-width: 1400px) {
+	.content-container {
+		width: 40%;
+        margin: 0 auto;
+        /*
+        border: calc(1px*var(--scaling-factor)) solid blue;
+        */
+	}
+}
@@ -3,24 +3,69 @@

 <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
-    <link rel="stylesheet" href="progress.css" />
+    <link rel="stylesheet" href="main.css" />
    <script type="text/javascript" src="progress.js"></script>
+    <script type="text/javascript" src="bg.js"></script>
+    <script type="text/javascript" src="audio.js"></script>
    <title>Z64</title>
 </head>

-<body class="bg-dark">
-    <div class="jumbotron vertical-center bg-dark">
+<body>
+    <div>
        <div class="container text-center">
            <img src="img/logo.png" style="width: 200px; height: 200px" />
        </div>
-        <div class="container my-5 py-2" style="background-color: #fffaaa">
-            <h1 class="text-center">Current Progress</h1>
-            <p>Last Change: <span class="last_change"></span></p>
-            <br>
-            <p>Total: <span class = total_percent></span></p>
-            <p>Boot: <span class="boot_percent"></span></p>
-            <p>Code: <span class="code_percent"></span></p>
-            <p>Overlays: <span class="overlay_percent"></span></p>
+        
+        <br><br><br>
+        <h1 class="text-center">Ocarina of Time Decompilation Status</h1> 
+        <br><br><br>
+        
+        <div class="content-container">
+              
+            <div class="zelda-file-box">
+                <div width=100%>
+                    <div class="zelda-box zelda-button zelda-file-box-slot">File 1</div>
+                    <div class="zelda-box zelda-file-box-filename">Oot Mq Debug
+                        <hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
+                    </div>
+                </div>
+                <div>
+                    <div class="zelda-box zelda-file-box-hack_left"></div>
+                    <div class="zelda-box zelda-file-box-hack_right"></div>
+                </div>
+                <div class="zelda-file-box-main zelda-box">
+                    <div>
+                        <p style="float: left">Last Change:</p>
+                        <p id="last_change" class="progress-value" style="color: cyan;" >Error</p>
+                    </div>
+                    <hr>
+                    <div>
+                        <p style="float: left">Total:</p>
+                        <p id="total_percent" class="progress-value">Error<p>
+                    </div>
+                    
+                    <div>
+                        <p style="float: left">Boot:</p>
+                        <p id="boot_percent" class="progress-value">Error</p>
+                    </div>
+
+                    <div>
+                        <p style="float: left">Code:</p>
+                        <p id="code_percent" class="progress-value">Error</p>
+                    </div>
+
+                    <div>
+                        <p style="float: left">Overlays:</p>
+                        <p id="overlay_percent" class="progress-value">Error</p>
+                    </div>
+                </div>
+            </div>
+
+            <br><br><br><br>
+            <!--
+            <div class="zelda-box zelda-button" id="toggle_audio_mute" onclick="toggleMute()">Audio: <span style="color:red">Off</span></div>
+            -->
+            <div class="zelda-box zelda-button"><a href="index.html">Main Page</a></div>
        </div>
    </div>
 </body>
@@ -14,21 +14,19 @@ function getJSON(file, callback) {

 function setText(classname, value)
 {
-    var elem = document.getElementsByClassName(classname);
-    if (elem.length == 1)
-    {
-        console.log(value);
-        elem[0].innerText = value;
-    }
+    var elem = document.getElementById(classname);
+    console.log(value);
+    elem.innerText = value;
 }

 window.onload = function() {

+    //var text = '{"reports": {"1590587451.6147666": {"total_percent": 19.058612988321162, "boot_percent": 100.0, "code_percent": 50.909445807705794, "overlay_percent": 6.997155049786628}}}';
    getJSON(url, function(text) {
        var progress = JSON.parse(text);
        var timestamp = Object.keys(progress.reports)[0];
        var date = new Date(timestamp.split(".")[0] *1000);
-        setText("last_change", date);
+        setText("last_change", date.toLocaleDateString() + " " + date.toLocaleTimeString());

        var keys = Object.keys(progress.reports[timestamp]);
        keys.forEach(e => {