From e485626ce18ab65c77f03495bed1e2a987c5e5c7 Mon Sep 17 00:00:00 2001
From: Late Night Defender <pongpeera054@protonmail.com>
Date: Tue, 2 Jul 2024 02:07:12 +0700
Subject: [PATCH] Add Behind TechTransThai Pre

---
 icons/ttt-org-blueprint.svg | 382 ++++++++++++++++++++++++++++++++++++
 index.html                  |  26 ++-
 2 files changed, 400 insertions(+), 8 deletions(-)
 create mode 100644 icons/ttt-org-blueprint.svg

diff --git a/icons/ttt-org-blueprint.svg b/icons/ttt-org-blueprint.svg
new file mode 100644
index 0000000..4c016f1
--- /dev/null
+++ b/icons/ttt-org-blueprint.svg
@@ -0,0 +1,382 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   height="128px"
+   viewBox="0 0 128 128"
+   width="128px"
+   version="1.1"
+   id="svg14"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   sodipodi:docname="ttt-org-blueprint.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs14" />
+  <sodipodi:namedview
+     id="namedview14"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.8284271"
+     inkscape:cx="-38.714096"
+     inkscape:cy="52.856232"
+     inkscape:window-width="1920"
+     inkscape:window-height="1011"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg14" />
+  <linearGradient
+     id="a"
+     gradientUnits="userSpaceOnUse"
+     x1="11.999989"
+     x2="115.999989"
+     y1="64"
+     y2="64">
+    <stop
+       offset="0"
+       stop-color="#3d3846"
+       id="stop1"
+       style="stop-color:#1c71d8;stop-opacity:1;" />
+    <stop
+       offset="0.05"
+       stop-color="#77767b"
+       id="stop2"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="0.1"
+       stop-color="#5e5c64"
+       id="stop3"
+       style="stop-color:#3584e4;stop-opacity:1;" />
+    <stop
+       offset="0.90328687"
+       stop-color="#504e56"
+       id="stop4"
+       style="stop-color:#3584e4;stop-opacity:1;" />
+    <stop
+       offset="0.94999999"
+       stop-color="#77767b"
+       id="stop5"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="1"
+       stop-color="#3d3846"
+       id="stop6"
+       style="stop-color:#1c71d8;stop-opacity:1;" />
+  </linearGradient>
+  <linearGradient
+     id="b"
+     gradientUnits="userSpaceOnUse"
+     x1="12"
+     x2="112.041023"
+     y1="60"
+     y2="80.988281">
+    <stop
+       offset="0"
+       stop-color="#77767b"
+       id="stop7"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="0.38444301"
+       stop-color="#9a9996"
+       id="stop8"
+       style="stop-color:#99c1f1;stop-opacity:1;" />
+    <stop
+       offset="0.72056699"
+       stop-color="#77767b"
+       id="stop9"
+       style="stop-color:#62a0ea;stop-opacity:1;" />
+    <stop
+       offset="1"
+       stop-color="#68666f"
+       id="stop10"
+       style="stop-color:#3584e4;stop-opacity:1;" />
+  </linearGradient>
+  <path
+     d="m 20 22 h 88 c 4.417969 0 8 3.582031 8 8 v 78 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -78 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0"
+     fill="url(#a)"
+     id="path10" />
+  <path
+     d="m 20 12 h 88 c 4.417969 0 8 3.582031 8 8 v 80 c 0 4.417969 -3.582031 8 -8 8 h -88 c -4.417969 0 -8 -3.582031 -8 -8 v -80 c 0 -4.417969 3.582031 -8 8 -8 z m 0 0"
+     fill="url(#b)"
+     id="path11" />
+  <path
+     d="m 20 14 h 88 c 3.3125 0 6 2.6875 6 6 v 80 c 0 3.3125 -2.6875 6 -6 6 h -88 c -3.3125 0 -6 -2.6875 -6 -6 v -80 c 0 -3.3125 2.6875 -6 6 -6 z m 0 0"
+     fill="#241f31"
+     id="path12"
+     style="fill:#1a5fb4;fill-opacity:1" />
+  <g
+     id="g14-3"
+     transform="translate(3,-3.3761482)"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none">
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-5"
+       width="36"
+       height="12"
+       x="47"
+       y="44.376148"
+       ry="2.4000001" />
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-3-6"
+       width="12"
+       height="48"
+       x="59"
+       y="44.376148"
+       ry="2.4000001" />
+  </g>
+  <g
+     id="g14"
+     transform="translate(-1,-7.3761484)"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none">
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14"
+       width="36"
+       height="12"
+       x="47"
+       y="44.376148"
+       ry="2.4000001" />
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-3"
+       width="12"
+       height="48"
+       x="59"
+       y="44.376148"
+       ry="2.4000001" />
+  </g>
+  <g
+     id="g14-2"
+     transform="translate(-5,-11.376148)"
+     style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:2.5;stroke-dasharray:none">
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-9"
+       width="36"
+       height="12"
+       x="47"
+       y="44.376148"
+       ry="2.4000001" />
+    <rect
+       style="fill:none;fill-rule:evenodd;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill markers;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       id="rect14-3-1"
+       width="12"
+       height="48"
+       x="59"
+       y="44.376148"
+       ry="2.4000001" />
+  </g>
+  <g
+     id="g4">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3"
+       width="100"
+       height="2.5"
+       x="14"
+       y="35.75" />
+  </g>
+  <g
+     id="g4-1"
+     transform="translate(0,-12)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-2"
+       width="100"
+       height="2.5"
+       x="14"
+       y="31.75" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-31"
+       width="100"
+       height="2.5"
+       x="14"
+       y="39.75" />
+  </g>
+  <g
+     id="g5">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7"
+       width="100"
+       height="2.5"
+       x="14"
+       y="43.75" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-2"
+       width="100"
+       height="2.5"
+       x="14"
+       y="51.75" />
+  </g>
+  <g
+     id="g4-2"
+     transform="translate(0,24)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-2"
+       width="100"
+       height="2.5"
+       x="14"
+       y="35.75" />
+  </g>
+  <g
+     id="g5-7"
+     transform="translate(0,24)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-59"
+       width="100"
+       height="2.5"
+       x="14"
+       y="43.75" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-2-8"
+       width="100"
+       height="2.5"
+       x="14"
+       y="51.75" />
+  </g>
+  <g
+     id="g5-1"
+     transform="translate(0,36)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-7"
+       width="100"
+       height="2.5"
+       x="14"
+       y="47.75" />
+  </g>
+  <g
+     id="g5-1-9"
+     transform="translate(0,48)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.31599;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-8-7"
+       width="100"
+       height="2.5"
+       x="14"
+       y="43.75" />
+  </g>
+  <g
+     id="g2">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6"
+       width="2.5"
+       height="92"
+       x="60.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-7"
+     transform="translate(-12)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-9"
+       width="2.5"
+       height="92"
+       x="56.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-7-6"
+     transform="translate(-24)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-0-1"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6-3-6"
+       width="2.5"
+       height="92"
+       x="60.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-7-6-3"
+     transform="translate(-36)">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-9-0-0"
+       width="2.5"
+       height="92"
+       x="56.75"
+       y="14" />
+  </g>
+  <g
+     id="g3">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1.26226;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6-2-9"
+       width="2.5"
+       height="92"
+       x="68.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-6"
+     transform="translate(24)"
+     style="stroke-width:1;stroke-dasharray:none">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-06"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-6-6"
+       width="2.5"
+       height="92"
+       x="60.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-6-9"
+     transform="translate(36)"
+     style="stroke-width:1;stroke-dasharray:none">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-5-2-7"
+       width="2.5"
+       height="92"
+       x="56.75"
+       y="14" />
+  </g>
+  <g
+     id="g2-6-9-4"
+     transform="translate(48)"
+     style="stroke-width:1;stroke-dasharray:none">
+    <rect
+       style="opacity:0.25;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1;stroke-dasharray:none;stroke-opacity:1"
+       id="rect1-3-6-7-5-3-06-4-5"
+       width="2.5"
+       height="92"
+       x="52.75"
+       y="14" />
+  </g>
+</svg>
diff --git a/index.html b/index.html
index 40cfeaa..c0f7fe8 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
       
       <h1>เทคทรานส์ไทย 🏳️‍⚧️ 🇹🇭</h1>
       
-      <p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด. Happy Pride!</p>
+      <p>ชุมชนเทคโนโลยีสำหรับคนข้ามเพศและพันธมิตรในประเทศไทย เราให้ความสำคัญกับซอฟต์แวร์เสรี การกระจายศูนย์ ข้อมูลและมาตรฐานเปิด</p>
 
       <p>กด Ctrl+F หรือ Command-F เพื่อค้นหาในหน้านี้</p>
 
@@ -73,6 +73,16 @@
       <h3>บริการ โปรเจกต์ และคอนเทนต์ของเรา</h3>
 
       <div class="row">
+        <a class="itemcard" style="opacity: 0.4;">
+          <div class="listaction">
+            <img src="icons/ttt-org-blueprint.svg" alt="behind-ttt" width="80" height="80" style="margin: 0.3cm;"> 
+            <div>
+              <h3>Behind TechTransThai</h3>
+              <p>เร็ว ๆ นี้</p>
+              <!-- <p>โปรเจกต์โอเพนซอร์สที่เราใช้</p> -->
+            </div>
+          </div>
+        </a>
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://c4c.techtransthai.org/">
           <div class="listaction">
             <img src="icons/c4c.png" alt="Compute4Change" width="80" height="80" style="margin: 0.3cm;"> 
@@ -91,6 +101,8 @@
             </div>
           </div>
         </a>
+      </div>
+      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://inv.techtransthai.org/feed/trending">
           <div class="listaction">
             <img src="icons/inv.svg" alt="Invidious" width="80" height="80" style="margin: 0.3cm;"> 
@@ -100,9 +112,6 @@
             </div>
           </div>
         </a>
-      </div>
-
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://test.techtransthai.org/">
           <div class="listaction">
             <img src="icons/librespeed.png" alt="LibreSpeed" width="80" height="80" style="margin: 0.3cm;"> 
@@ -121,6 +130,8 @@
             </div>
           </div>
         </a>
+      </div>
+      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://openkmitl.gitlab.io">
           <div class="listaction">
             <img src="icons/openkmitl.png" alt="openKMITL" width="80" height="80" style="margin: 0.3cm;"> 
@@ -130,10 +141,6 @@
             </div>
           </div>
         </a>
-
-      </div>
-
-      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://quadlet-examples.techtransthai.org">
           <div class="listaction">
             <img src="icons/text-x-generic.png" alt="Quadlet Examples" width="80" height="80" style="margin: 0.3cm;"> 
@@ -152,6 +159,8 @@
             </div>
           </div>
         </a>
+      </div>
+      <div class="row">
         <a class="itemcard" target="_blank" rel="noopener noreferrer" href="https://video.techtransthai.org">
           <div class="listaction">
             <img src="icons/peertube-logo.svg" alt="Peertube" width="80" height="80" style="margin: 0.3cm;"> 
@@ -162,6 +171,7 @@
           </div>
         </a>
       </div>
+      
 
       <h3>สำหรับใช้งานภายในเท่านั้น</h3>