From 2086923ff541c45ff4975bc4c4b73480f46e25d7 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Mon, 24 Feb 2025 03:40:04 +0700
Subject: [PATCH] move links into a menu

---
 links-misc.html                        | 65 -----------------
 links-contrib.html => links/index.html | 96 ++++++++++++++++++++++----
 2 files changed, 83 insertions(+), 78 deletions(-)
 delete mode 100644 links-misc.html
 rename links-contrib.html => links/index.html (69%)
diff --git a/links-misc.html b/links-misc.html
deleted file mode 100644
index 09ccb3b..0000000
--- a/links-misc.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <link rel="stylesheet" href="https://www.techtransthai.org/style.css">
-    <meta http-equiv="Content-Language" content="th">
-    <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
-    <meta name="description" content="Late Night Defender's profile">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Miscellaneous</title>
-    <link rel="icon" type="image/webp" href="icons/icon.webp">
-  </head>
-  
-  <body>
-    <div class="topbar simple">
-      <a href="index.html" class="button back">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path fill="currentColor" d="m 10.9375 0.996094 c -0.292969 0 -0.558594 0.128906 -0.742188 0.328125 l -6.671874 6.671875 l 6.671874 6.675781 c 0.011719 0.011719 0.023438 0.023437 0.035157 0.03125 c 0.179687 0.183594 0.429687 0.292969 0.707031 0.292969 h 1 v -1 c 0 -0.273438 -0.113281 -0.523438 -0.292969 -0.707032 c -0.011719 -0.007812 -0.019531 -0.019531 -0.035156 -0.03125 l -5.257813 -5.261718 l 5.292969 -5.292969 c 0.179688 -0.179687 0.292969 -0.429687 0.292969 -0.707031 v -1 z m 0 0"/></svg>
-      </a>
-      <div style="display: flex; align-items:start; justify-content: center; margin-top: -0.25cm;">
-        <h4>Miscellaneous</h4>
-      </div>
-    </div>
-
-    <div class="grid-container">
-        <div class="middle">
-          <div class="list" style="margin-top: 1.5cm;">
-            <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://listenbrainz.org/user/latenightdef/">
-              <div class="row" style="margin-left: 0.5cm; ">
-                  <p class="row-title-no-subtitle">ListenBrainz</p>
-                <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-              </div>
-            </a>
-          <div class="separator"></div>
-            <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.pinterest.com/latenightdef/">
-              <div class="row" style="margin-left: 0.5cm; ">
-                  <p class="row-title-no-subtitle">Pinterest</p>
-                <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-              </div>
-            </a>
-          <div class="separator"></div>
-            <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://en.pronouns.page/@latenightdef">
-              <div class="row" style="margin-left: 0.5cm; ">
-                  <p class="row-title-no-subtitle">Pronouns.page</p>
-                <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-              </div>
-            </a>
-          <div class="separator"></div>
-            <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://steamcommunity.com/id/latenightdef">
-              <div class="row" style="margin-left: 0.5cm; ">
-                  <p class="row-title-no-subtitle">Steam</p>
-                <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-              </div>
-            </a>
-          <div class="separator"></div>
-            <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/@latenightdef">
-              <div class="row" style="margin-left: 0.5cm; ">
-                  <p class="row-title-no-subtitle">YouTube</p>
-                <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
-              </div>
-            </a>
-          </div>
-        </div>
-      </div>
-
-  </body>
-</html>
diff --git a/links-contrib.html b/links/index.html
similarity index 69%
rename from links-contrib.html
rename to links/index.html
index 0e6a8b9..4bbeef3 100644
--- a/links-contrib.html
+++ b/links/index.html
@@ -2,27 +2,43 @@
 <html>
   <head>
     <link rel="stylesheet" href="https://www.techtransthai.org/style.css">
+    <link rel="stylesheet" href="/customwidgets.css">
     <meta http-equiv="Content-Language" content="th">
     <meta http-equiv="content-Type" content="text/html; charset=UTF-8">
-    <meta name="description" content="Late Night Defender's profile">
+    <meta name="description" content="Pongpeera Wongprasitthiporn's profile">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Contributor profiles</title>
-    <link rel="icon" type="image/webp" href="../icons/icon.webp">
+    <title>Pongpeera Wongprasitthiporn's profile</title>
+    <link rel="icon" type="image/webp" href="/icons/icon.webp">
   </head>
   
   <body>
-    <div class="topbar simple">
-      <a href="index.html" class="button back">
-        <svg xmlns="http://www.w3.org/2000/svg" height="16px" viewBox="0 0 16 16" width="16px"><path fill="currentColor" d="m 10.9375 0.996094 c -0.292969 0 -0.558594 0.128906 -0.742188 0.328125 l -6.671874 6.671875 l 6.671874 6.675781 c 0.011719 0.011719 0.023438 0.023437 0.035157 0.03125 c 0.179687 0.183594 0.429687 0.292969 0.707031 0.292969 h 1 v -1 c 0 -0.273438 -0.113281 -0.523438 -0.292969 -0.707032 c -0.011719 -0.007812 -0.019531 -0.019531 -0.035156 -0.03125 l -5.257813 -5.261718 l 5.292969 -5.292969 c 0.179688 -0.179687 0.292969 -0.429687 0.292969 -0.707031 v -1 z m 0 0"/></svg>
-      </a>
-      <div style="display: flex; align-items:start; justify-content: center; margin-top: -0.25cm;">
-        <h4>Contributor profiles</h4>
+
+    <div class="topbar stealth">
+      <div style="display: flex; align-items: center;">
+        <a href="/" class="button header">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><path d="m 8 1 c -1.65625 0 -3 1.34375 -3 3 s 1.34375 3 3 3 s 3 -1.34375 3 -3 s -1.34375 -3 -3 -3 z m -1.5 7 c -2.492188 0 -4.5 2.007812 -4.5 4.5 v 1.5 c 0 1 1 1 1 1 h 10 s 1 0 1 -1 v -1.5 c 0 -2.492188 -2.007812 -4.5 -4.5 -4.5 z m 0 0" fill="currentColor"/></svg>
+          <p style="margin-left: 5px;">About</p>
+        </a>
+        <a href="/works" class="button header">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 1.5 2 h 2 c 0.277344 0 0.5 0.222656 0.5 0.5 v 12 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -2 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -12 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 5.5 4 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 10 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -10 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 8.5 3 h 1 c 0.277344 0 0.5 0.222656 0.5 0.5 v 11 c 0 0.277344 -0.222656 0.5 -0.5 0.5 h -1 c -0.277344 0 -0.5 -0.222656 -0.5 -0.5 v -11 c 0 -0.277344 0.222656 -0.5 0.5 -0.5 z m 0 0"/><path d="m 10.707031 1.460938 l 0.964844 -0.261719 c 0.265625 -0.070313 0.539063 0.089843 0.613281 0.355469 l 3.363282 12.558593 c 0.070312 0.265625 -0.085938 0.539063 -0.351563 0.609375 l -0.96875 0.261719 c -0.265625 0.070313 -0.539063 -0.089844 -0.613281 -0.355469 l -3.363282 -12.554687 c -0.070312 -0.269531 0.085938 -0.542969 0.355469 -0.613281 z m 0 0"/></g></svg>
+          <p style="margin-left: 5px;">Works</p>
+        </a>
+        <a  class="button header selected">
+          <svg height="20px" viewBox="0 0 16 16" width="20px"><g fill="currentColor"><path d="m 4 11.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -2.199219 1.800781 -4 4 -4 h 3 c 2.199219 0 4 1.800781 4 4 c 0 1.640624 -0.992188 3.070312 -2.421875 3.679687 l -0.785156 -1.839844 c 0.710937 -0.304687 1.207031 -1 1.207031 -1.839843 c 0 -1.125 -0.875 -2 -2 -2 h -3 c -1.125 0 -2 0.875 -2 2 s 0.875 2 2 2 z m 0 0"/><path d="m 9 13.992188 c -2.199219 0 -4 -1.800782 -4 -4 c 0 -1.621094 0.96875 -3.03125 2.367188 -3.65625 l 0.816406 1.828124 c -0.699219 0.3125 -1.183594 1 -1.183594 1.828126 c 0 1.125 0.875 2 2 2 h 3 c 1.125 0 2 -0.875 2 -2 s -0.875 -2 -2 -2 v -2 c 2.199219 0 4 1.800781 4 4 c 0 2.199218 -1.800781 4 -4 4 z m 0 0"/></g></svg>
+          <p style="margin-left: 5px;">Links</p>
+        </a>
       </div>
     </div>
 
+    <div style="margin-top: 2cm;">
+    </div>
     <div class="grid-container">
-        <div class="middle">
-          <div class="list" style="margin-top: 1.5cm;">
+  
+      <div class="middle">
+
+        <h3>Contributor profiles</h3>
+
+        <div class="list">
             <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://forge.techtransthai.org/latenightdef">
               <div class="row" style="margin-left: 0.5cm; ">
                   <p class="row-title-no-subtitle">⭐ TechTransThai Forge</p>
@@ -183,9 +199,63 @@
                 <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
               </div>
             </a>
-          </div>
         </div>
-      </div>
 
+        <h3>Miscellaneous</h3>
+
+        <div class="list">
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://f-social.techtransthai.org/@latenightdef">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">Fediverse</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        <div class="separator"></div>
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://listenbrainz.org/user/latenightdef/">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">ListenBrainz</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        <div class="separator"></div>
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.pinterest.com/latenightdef/">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">Pinterest</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        <div class="separator"></div>
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://pixels.techtransthai.org/i/web/profile/711147700789940225">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">Pixelfed</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        <div class="separator"></div>
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://en.pronouns.page/@latenightdef">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">Pronouns.page</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        <div class="separator"></div>
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://steamcommunity.com/id/latenightdef">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">Steam</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        <div class="separator"></div>
+          <a style="text-decoration: none;" target="_blank" rel="noopener noreferrer" href="https://www.youtube.com/@latenightdef">
+            <div class="row" style="margin-left: 0.5cm; ">
+                <p class="row-title-no-subtitle">YouTube</p>
+              <svg class="feather feather-external-link" viewBox="0 0 24 24" fill="none" height="20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" x2="21" y1="14" y2="3"></line></svg>
+            </div>
+          </a>
+        </div>
+
+      </div>
+    </div>
+  
   </body>
 </html>
