From fb16b912fc3350de272447a9527cbec4aa625871 Mon Sep 17 00:00:00 2001
From: ZennDev1337 <zenndev@protonmail.com>
Date: Tue, 22 Aug 2023 13:50:53 +0200
Subject: [PATCH] added nav to converter pages

---
 docs/image-converter.html  | 87 ++++++++++++++++++++++++++++++++++++++
 docs/sprite-converter.html | 85 +++++++++++++++++++++++++++++++++++++
 docs/tile-converter.html   | 83 ++++++++++++++++++++++++++++++++++++
 3 files changed, 255 insertions(+)

diff --git a/docs/image-converter.html b/docs/image-converter.html
index e04ad1b..4914aaa 100644
--- a/docs/image-converter.html
+++ b/docs/image-converter.html
@@ -16,10 +16,12 @@
                 margin: 0;
                 background-color: black;
                 color: azure;
+                overflow: hidden;
             }
             body {
                 font-family: Courier New;
                 text-align: center;
+                align-items: center;
                 font-size: xx-large;
                 font-weight: 700;
             }
@@ -82,8 +84,83 @@
             .txtHead {
                 margin-bottom: 5px;
             }
+            .topnav {
+                background-color: #000000;
+                overflow: hidden;
+                height: 47px;
+            }
+            .topnav a {
+                color: #f2f2f2;
+                text-align: center;
+                padding: 14px 16px;
+                text-decoration: none;
+                font-size: 17px;
+            }
+            .topnav a:hover {
+                background-color: #ddd;
+                color: black;
+            }
+            .topnav a.active {
+                background-color: #281c1c;
+                color: white;
+            }
+            .topnav .icon {
+                display: none;
+            }
+            @media screen and (max-width: 800px) {
+                .topnav a:not(:first-child) {
+                    display: none;
+                }
+                .topnav a.icon {
+                    float: right;
+                    display: block;
+                }
+            }
+            @media screen and (max-width: 800px) {
+                .topnav.responsive {
+                    position: relative;
+                    height: 188px;
+                }
+                .topnav.responsive a.icon {
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                }
+                .topnav.responsive a {
+                    float: none;
+                    display: block;
+                    text-align: left;
+                }
+            }
         </style>
         <div class="wrapper">
+            <div class="topnav" id="myTopnav">
+                <a href="/index.html" target="_blank">Rust for Arduboy</a>
+                <a href="/image-converter.html" class="active"
+                    >Image Converter</a
+                >
+                <a href="/tile-converter.html">Tile Converter</a>
+                <a href="/sprite-converter.html">Sprite Converter</a>
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
+                    </svg>
+                </a>
+            </div>
             <div class="title">
                 <p>Drop your image here</p>
             </div>
@@ -95,6 +172,16 @@
         </div>
 
         <footer class="footer">By ZennDev1337</footer>
+        <script language="JavaScript">
+            function myFunction() {
+                var x = document.getElementById("myTopnav");
+                if (x.className === "topnav") {
+                    x.className += " responsive";
+                } else {
+                    x.className = "topnav";
+                }
+            }
+        </script>
         <script language="JavaScript">
             function swapImage(t, e) {
                 var r = t.getAttribute("data-srcnm");
diff --git a/docs/sprite-converter.html b/docs/sprite-converter.html
index 971ff9d..09674af 100644
--- a/docs/sprite-converter.html
+++ b/docs/sprite-converter.html
@@ -82,8 +82,83 @@
             .txtHead {
                 margin-bottom: 5px;
             }
+            .topnav {
+                background-color: #000000;
+                overflow: hidden;
+                height: 47px;
+            }
+            .topnav a {
+                color: #f2f2f2;
+                text-align: center;
+                padding: 14px 16px;
+                text-decoration: none;
+                font-size: 17px;
+            }
+            .topnav a:hover {
+                background-color: #ddd;
+                color: black;
+            }
+            .topnav a.active {
+                background-color: #281c1c;
+                color: white;
+            }
+            .topnav .icon {
+                display: none;
+            }
+            @media screen and (max-width: 800px) {
+                .topnav a:not(:first-child) {
+                    display: none;
+                }
+                .topnav a.icon {
+                    float: right;
+                    display: block;
+                }
+            }
+            @media screen and (max-width: 800px) {
+                .topnav.responsive {
+                    position: relative;
+                    height: 188px;
+                }
+                .topnav.responsive a.icon {
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                }
+                .topnav.responsive a {
+                    float: none;
+                    display: block;
+                    text-align: left;
+                }
+            }
         </style>
         <div class="wrapper">
+            <div class="topnav" id="myTopnav">
+                <a href="/index.html" target="_blank">Rust for Arduboy</a>
+                <a href="/image-converter.html">Image Converter</a>
+                <a href="/tile-converter.html">Tile Converter</a>
+                <a href="/sprite-converter.html" class="active"
+                    >Sprite Converter</a
+                >
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
+                    </svg>
+                </a>
+            </div>
             <div class="title">
                 <p>Drop your sprite here</p>
             </div>
@@ -97,6 +172,16 @@
         <footer class="footer sticky">
             <p>By ZennDev1337</p>
         </footer>
+        <script language="JavaScript">
+            function myFunction() {
+                var x = document.getElementById("myTopnav");
+                if (x.className === "topnav") {
+                    x.className += " responsive";
+                } else {
+                    x.className = "topnav";
+                }
+            }
+        </script>
         <script language="JavaScript">
             /*
              * NeuQuant Neural-Net Quantization Algorithm
diff --git a/docs/tile-converter.html b/docs/tile-converter.html
index 08227f1..c988516 100644
--- a/docs/tile-converter.html
+++ b/docs/tile-converter.html
@@ -82,8 +82,81 @@
             .txtHead {
                 margin-bottom: 5px;
             }
+            .topnav {
+                background-color: #000000;
+                overflow: hidden;
+                height: 47px;
+            }
+            .topnav a {
+                color: #f2f2f2;
+                text-align: center;
+                padding: 14px 16px;
+                text-decoration: none;
+                font-size: 17px;
+            }
+            .topnav a:hover {
+                background-color: #ddd;
+                color: black;
+            }
+            .topnav a.active {
+                background-color: #281c1c;
+                color: white;
+            }
+            .topnav .icon {
+                display: none;
+            }
+            @media screen and (max-width: 800px) {
+                .topnav a:not(:first-child) {
+                    display: none;
+                }
+                .topnav a.icon {
+                    float: right;
+                    display: block;
+                }
+            }
+            @media screen and (max-width: 800px) {
+                .topnav.responsive {
+                    position: relative;
+                    height: 188px;
+                }
+                .topnav.responsive a.icon {
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                }
+                .topnav.responsive a {
+                    float: none;
+                    display: block;
+                    text-align: left;
+                }
+            }
         </style>
         <div class="wrapper">
+            <div class="topnav" id="myTopnav">
+                <a href="/index.html" target="_blank">Rust for Arduboy</a>
+                <a href="/image-converter.html">Image Converter</a>
+                <a href="/tile-converter.html" class="active">Tile Converter</a>
+                <a href="/sprite-converter.html">Sprite Converter</a>
+                <a
+                    href="javascript:void(0);"
+                    class="icon"
+                    onclick="myFunction()"
+                >
+                    <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="16"
+                        height="16"
+                        fill="currentColor"
+                        class="bi bi-list"
+                        viewBox="0 0 16 16"
+                    >
+                        <path
+                            fill-rule="evenodd"
+                            d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"
+                        />
+                    </svg>
+                </a>
+            </div>
             <div class="title">
                 <p>Drop your tile sheet here</p>
             </div>
@@ -95,6 +168,16 @@
         </div>
 
         <footer class="footer">By ZennDev1337</footer>
+        <script language="JavaScript">
+            function myFunction() {
+                var x = document.getElementById("myTopnav");
+                if (x.className === "topnav") {
+                    x.className += " responsive";
+                } else {
+                    x.className = "topnav";
+                }
+            }
+        </script>
         <script language="JavaScript">
             function swapImage(t, e) {
                 var r = t.getAttribute("data-srcnm");