Footerを追加・コピーボタンの追加・軽微な修正

404.html

@@ -11,6 +11,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

index.html

@@ -11,6 +11,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

main/blackjack/index.html

@@ -13,6 +13,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

main/exchange/index.html

@@ -13,6 +13,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

main/fake/index.html

@@ -13,6 +13,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

main/ping/index.html

@@ -28,6 +28,7 @@ <h4>サイトステータス</h4>
     </div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
     <script src="/main/ping/script.js"></script>
   </body>

main/replace/index.html

@@ -13,6 +13,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

main/tategaki/index.html

@@ -13,6 +13,7 @@
     <div id="description"></div>
     <h2>サイトマップ</h2>
     <ul id="sitemap"></ul>
+    <footer></footer>
     <script src="/script.js"></script>
   </body>
 </html>

script.js

@@ -21,7 +21,7 @@ document.addEventListener('DOMContentLoaded', () => {
           const now = `/${window.location.href.split('/').slice(3).join('/')}`;
           console.log(now);
           if (
-            now === path ||
+            now.includes(path) ||
             (
               now === '/' &&
               path === '/index.html'
@@ -44,3 +44,57 @@ document.addEventListener('DOMContentLoaded', () => {
       console.error('Error loading pages.txt:', error);
     });
 });
+
+const footer = document.querySelector('footer');
+
+if (footer) {
+  const links = [
+    {
+      url: 'https://dsc.gg/otolab',
+      textContent: 'Discord'
+    },
+    {
+      url: 'https://otoneko.jp/',
+      textContent: 'Dev Homepage'
+    }
+  ];
+  for (const link of links) {
+    const element = document.createElement('a');
+    element.href = link.url;
+    element.textContent = link.textContent;
+    element.target = '_blank';
+    footer.appendChild(element);
+  }
+
+  const copyButton = document.createElement('button');
+  const linkIcon = '🔗';
+  const checkIcon = '✅';
+
+  copyButton.textContent = linkIcon;
+  copyButton.title = 'Copy';
+  copyButton.style.position = 'absolute';
+  copyButton.style.right = '10px';
+  copyButton.style.bottom = '10px';
+  copyButton.style.border = 'none';
+  copyButton.style.background = 'transparent';
+  copyButton.style.cursor = 'pointer';
+  copyButton.style.marginLeft = '10px';
+  copyButton.style.fontSize = '24px';
+
+  copyButton.addEventListener('click', () => {
+    const url = window.location.href;
+    navigator.clipboard.writeText(url).then(() => {
+      copyButton.textContent = checkIcon;
+      copyButton.title = 'Success!'
+
+      setTimeout(() => {
+        copyButton.textContent = linkIcon;
+        copyButton.title = 'Copy'
+      }, 3000);
+    }).catch(err => {
+      console.error(err);
+    });
+  });
+
+  footer.appendChild(copyButton);
+}

style.css

@@ -8,6 +8,7 @@ body {
   font-family: 'Kiwi Maru', sans-serif;
   font-weight: bold;
   padding: 40px;
+  padding-bottom: 50px;
   box-sizing: border-box;
   margin: 0;
 }
@@ -69,9 +70,29 @@ li:hover {
 
 a {
   text-decoration: none;
-  color: #333;
+  color: #004777;
 }
 
 a:hover {
   color: #007acc;
 }
+
+footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 50px;
+  background-color: gainsboro;
+  text-align: left;
+  line-height: 50px;
+}
+
+footer a {
+  margin: 20px;
+}
+
+footer a::after {
+  content: ' >';
+  font-size: 12px;
+}