Add social badges/buttons, Ko-Fi Script and 404 page

tutosrive · tutosrive · commit 63d6d6112784 · 2025-06-22T21:22:07.000-05:00
diff --git a/404.html b/404.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>Page 404 Terminal</title>
+        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+        <link rel="stylesheet" href="./src/assets/css/404.css" />
+        <script src="./src/assets/js/404.mjs"></script>
+    </head>
+    <body class="" id="body">
+        <main id="main">
+            <header class="Menubar">
+                <p class="title_Terminal">Terminal</p>
+                <p class="title_404">404</p>
+                <div class="Menu_BTN">
+                    <a href="#" id="min" onclick="BTNS('min')"></a>
+                    <a href="#" id="max" onclick="BTNS('max')"></a>
+                    <a href="./" id="close"></a>
+                </div>
+            </header>
+            <div class="Terminal_body" id="Terminal">
+                <p>Oops! This page has not been forged</p>
+                <br />
+                <p>Enter <span class="red"> help </span>for help</p>
+                <br />
+                <div class="Terminal_code">
+                    <div class="Terminal_line">
+                        <div class="code" id="code"></div>
+                        <span class="arrow">→</span><span class="user-input" id="userInput"></span> <label for="Keyboard"></label><input type="text" id="Keyboard" class="keyboard" />
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <div class="min_app" id="min_app">
+            <a href="#" onclick="BTNS('re')">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="40" height="40">
+                    <path fill="#CFD8DC" d="M41,6H7C6.4,6,6,6.4,6,7v35h36V7C42,6.4,41.6,6,41,6z" />
+                    <path fill="#263238" d="M8 13H40V40H8z" />
+                    <path fill="#90A4AE" d="M13.5 8A1.5 1.5 0 1 0 13.5 11 1.5 1.5 0 1 0 13.5 8zM9.5 8A1.5 1.5 0 1 0 9.5 11 1.5 1.5 0 1 0 9.5 8z" />
+                    <g>
+                        <path fill="#18FFFF" d="M18.5 26.5l-3.5-2V22l6 3.4v2.1L15 31v-2.5L18.5 26.5zM23 29H33V31H23z" />
+                    </g>
+                </svg>
+            </a>
+        </div>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -80,6 +80,55 @@ <h1 class="text-3xl font-bold inline">
 
         <!-- Main Content -->
         <main class="flex-1 flex flex-col items-center w-full px-6 pb-12">
+            <!-- Social Buttons -->
+            <div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: center">
+                <a href="https://www.facebook.com/profile.php?id=61577411706631" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-facebook" style="display: block; fill: currentColor" data-donate="true" data-tag="fac" data-name="Facebook" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>Facebook social icon</title>
+                        <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path></svg></a
+                ><a href="https://www.tiktok.com/@dev2forge" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-tiktok" style="display: block; fill: currentColor" data-donate="true" data-tag="tic" data-name="TikTok" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>TikTok social icon</title>
+                        <path
+                            d="M 386.160156 141.550781 C 383.457031 140.15625 380.832031 138.625 378.285156 136.964844 C 370.878906 132.070312 364.085938 126.300781 358.058594 119.785156 C 342.976562 102.523438 337.339844 85.015625 335.265625 72.757812 L 335.351562 72.757812 C 333.617188 62.582031 334.332031 56 334.441406 56 L 265.742188 56 L 265.742188 321.648438 C 265.742188 325.214844 265.742188 328.742188 265.589844 332.226562 C 265.589844 332.660156 265.550781 333.058594 265.523438 333.523438 C 265.523438 333.714844 265.523438 333.917969 265.484375 334.117188 C 265.484375 334.167969 265.484375 334.214844 265.484375 334.265625 C 264.011719 353.621094 253.011719 370.976562 236.132812 380.566406 C 227.472656 385.496094 217.675781 388.078125 207.707031 388.066406 C 175.699219 388.066406 149.757812 361.964844 149.757812 329.734375 C 149.757812 297.5 175.699219 271.398438 207.707031 271.398438 C 213.765625 271.394531 219.789062 272.347656 225.550781 274.226562 L 225.632812 204.273438 C 190.277344 199.707031 154.621094 210.136719 127.300781 233.042969 C 115.457031 243.328125 105.503906 255.605469 97.882812 269.316406 C 94.984375 274.316406 84.042969 294.410156 82.714844 327.015625 C 81.882812 345.523438 87.441406 364.699219 90.089844 372.625 L 90.089844 372.792969 C 91.757812 377.457031 98.214844 393.382812 108.742188 406.808594 C 117.230469 417.578125 127.253906 427.035156 138.5 434.882812 L 138.5 434.714844 L 138.667969 434.882812 C 171.925781 457.484375 208.800781 456 208.800781 456 C 215.183594 455.742188 236.566406 456 260.851562 444.492188 C 287.785156 431.734375 303.117188 412.726562 303.117188 412.726562 C 312.914062 401.367188 320.703125 388.425781 326.148438 374.449219 C 332.367188 358.109375 334.441406 338.507812 334.441406 330.675781 L 334.441406 189.742188 C 335.273438 190.242188 346.375 197.582031 346.375 197.582031 C 346.375 197.582031 362.367188 207.832031 387.316406 214.507812 C 405.214844 219.257812 429.332031 220.257812 429.332031 220.257812 L 429.332031 152.058594 C 420.882812 152.976562 403.726562 150.308594 386.160156 141.550781 Z M 386.160156 141.550781"
+                        ></path></svg></a
+                ><a href="https://www.threads.com/@dev2forge" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-threads" style="display: block; fill: currentColor" data-donate="true" data-tag="thr" data-name="Threads" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>Threads social icon</title>
+                        <path
+                            d="M 377.433594 237.300781 C 375.226562 236.246094 372.988281 235.226562 370.71875 234.253906 C 366.765625 161.433594 326.976562 119.746094 260.164062 119.320312 C 259.863281 119.316406 259.5625 119.316406 259.257812 119.316406 C 219.296875 119.316406 186.0625 136.375 165.605469 167.414062 L 202.347656 192.621094 C 217.632812 169.433594 241.613281 164.492188 259.277344 164.492188 C 259.480469 164.492188 259.683594 164.492188 259.886719 164.496094 C 281.886719 164.636719 298.484375 171.03125 309.230469 183.503906 C 317.046875 192.585938 322.277344 205.132812 324.867188 220.96875 C 305.363281 217.65625 284.269531 216.636719 261.71875 217.929688 C 198.199219 221.585938 157.363281 258.632812 160.105469 310.113281 C 161.496094 336.222656 174.507812 358.6875 196.734375 373.363281 C 215.527344 385.769531 239.730469 391.835938 264.886719 390.460938 C 298.105469 388.640625 324.167969 375.964844 342.347656 352.789062 C 356.15625 335.1875 364.890625 312.382812 368.746094 283.644531 C 384.578125 293.199219 396.3125 305.769531 402.792969 320.886719 C 413.8125 346.578125 414.453125 388.800781 380.003906 423.222656 C 349.820312 453.375 313.535156 466.421875 258.703125 466.824219 C 197.878906 466.375 151.875 446.867188 121.96875 408.84375 C 93.960938 373.242188 79.488281 321.820312 78.945312 256 C 79.488281 190.179688 93.960938 138.757812 121.96875 103.152344 C 151.875 65.132812 197.878906 45.625 258.703125 45.175781 C 319.96875 45.628906 366.769531 65.230469 397.824219 103.433594 C 413.050781 122.167969 424.53125 145.730469 432.097656 173.199219 L 475.15625 161.710938 C 465.984375 127.898438 451.550781 98.761719 431.90625 74.597656 C 392.097656 25.617188 333.871094 0.519531 258.851562 0 L 258.550781 0 C 183.683594 0.519531 126.113281 25.710938 87.433594 74.878906 C 53.019531 118.628906 35.265625 179.507812 34.667969 255.820312 L 34.667969 256.179688 C 35.265625 332.492188 53.019531 393.371094 87.433594 437.121094 C 126.113281 486.289062 183.683594 511.484375 258.550781 512 L 258.851562 512 C 325.414062 511.539062 372.332031 494.113281 410.980469 455.496094 C 461.550781 404.976562 460.027344 341.652344 443.359375 302.777344 C 431.402344 274.898438 408.605469 252.257812 377.433594 237.300781 Z M 262.507812 345.351562 C 234.667969 346.921875 205.746094 334.425781 204.320312 307.660156 C 203.261719 287.8125 218.441406 265.667969 264.214844 263.03125 C 269.457031 262.730469 274.601562 262.582031 279.65625 262.582031 C 296.28125 262.582031 311.835938 264.195312 325.980469 267.289062 C 320.703125 333.160156 289.765625 343.855469 262.507812 345.351562 Z M 262.507812 345.351562 "
+                        ></path></svg></a
+                ><a href="https://x.com/dev2forge" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-twitterx" style="display: block; fill: currentColor" data-donate="true" data-tag="twix" data-name="TwitterX" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>Twitter X social icon</title>
+                        <path d="M 304.757 216.824 L 495.394 0 L 450.238 0 L 284.636 188.227 L 152.475 0 L 0 0 L 199.902 284.656 L 0 512 L 45.16 512 L 219.923 313.186 L 359.525 512 L 512 512 M 61.456 33.322 L 130.835 33.322 L 450.203 480.317 L 380.811 480.317 "></path></svg></a
+                ><a href="https://www.instagram.com/dev2forge/" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-instagram" style="display: block; fill: currentColor" data-donate="true" data-tag="ins" data-name="Instagram" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>Instagram social icon</title>
+                        <path
+                            d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"
+                        ></path>
+                        <path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
+                        <circle cx="351.5" cy="160.5" r="21.5"></circle></svg></a
+                ><a href="https://www.youtube.com/@dev2forge" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-youtube" style="display: block; fill: currentColor" data-donate="true" data-tag="you" data-name="YouTube" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>YouTube social icon</title>
+                        <path
+                            d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"
+                        ></path></svg></a
+                ><a href="mailto:mailto:support@dev2forge.software" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-email" style="display: block; fill: currentColor" data-donate="true" data-tag="ema" data-name="Email" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>Email icon</title>
+                        <path d="M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z"></path></svg></a
+                ><a href="https://paypal.me/Santiago828572" target="_blank" rel="noopener noreferrer" style="text-decoration: none; border: 0; width: 20px; height: 20px; padding: 2px; margin: 5px; color: #ff7000; border-radius: 35%; background-color: #110035"
+                    ><svg class="niftybutton-paypal" style="display: block; fill: currentColor" data-donate="true" data-tag="pay" data-name="PayPal" viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet">
+                        <title>Paypal social icon</title>
+                        <path
+                            d="M374.6 173.4c0 61.3-54 109.9-145.6 109.9h-26.7l-20.5 89.6h-64.3l62.8-283h106.6C343.5 89.8 374.6 125.5 374.6 173.4zM307.1 175.2c0-25.7-21.2-32.5-45.8-32.5h-28.4l-18.8 84.8h25.3C276.1 227.5 307.1 213 307.1 175.2zM393.1 161.4c12.2 95.9-78.6 145.2-173.4 143.8l-20.7 88.1h-44.6l-5 22.8h68.8l19.9-87.9C376.8 324 430.1 222.9 393.1 161.4z"
+                        ></path>
+                    </svg>
+                </a>
+            </div>
             <!-- Repos -->
             <section id="carrusel-repos" class="h-full grid grid-rows-1 auto-cols-max grid-flow-col gap-4 overflow-x-auto overflow-y-hidden snap-x snap-mandatory w-full py-4">
                 <!-- Repos will be injected here -->
@@ -108,5 +157,16 @@ <h2 class="block font-bold mb-5">Followers</h2>
         <footer class="w-full mt-0 text-center flex-shrink-0 fixed bottom-0 left-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 py-2 z-10">
             <p class="text-sm">© 2025 Dev2Forge. All rights reserved.</p>
         </footer>
+
+        <!-- Ko-Fi Script - Floating Button -->
+        <script src="https://storage.ko-fi.com/cdn/scripts/overlay-widget.js"></script>
+        <script>
+            kofiWidgetOverlay.draw('dev2forge', {
+                type: 'floating-chat',
+                'floating-chat.donateButton.text': 'Support me',
+                'floating-chat.donateButton.background-color': '#323842',
+                'floating-chat.donateButton.text-color': '#fff',
+            });
+        </script>
     </body>
 </html>
diff --git a/src/assets/css/404.css b/src/assets/css/404.css
@@ -0,0 +1,207 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  font-size: 18px;
+  font-family: 'Poppins', sans-serif;
+  background: #171f37;
+  color: rgba(255, 255, 255, 0.8);
+  overflow: hidden !important;
+}
+
+a {
+  text-decoration: none;
+}
+
+svg {
+  vertical-align: middle;
+}
+
+main {
+  width: 80%;
+  height: 65%;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -ms-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+}
+
+.Menubar {
+  width: 100%;
+  background-color: #313335;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 1.2rem 1.2rem 0 0;
+  padding: 0.3rem 0.5rem;
+  user-select: none;
+}
+
+.title_404 {
+  font-size: 1.5em;
+}
+
+.Menu_BTN {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Menu_BTN a {
+  content: '';
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  margin: 0 0.2rem;
+}
+
+.Menu_BTN a:nth-child(3) {
+  background-color: #fa615c;
+}
+
+.Menu_BTN a:nth-child(2) {
+  background-color: #ffbd48;
+}
+
+.Menu_BTN a:nth-child(1) {
+  background-color: #3fc950;
+}
+
+.Terminal_body {
+  background-color: #2b2b2b;
+  width: 100%;
+  height: 100%;
+  border-radius: 0 0 1.2rem 1.2rem;
+  padding: 1.2rem;
+  font-family: 'Anonymous Pro', monospace;
+  overflow-y: auto;
+}
+
+.Terminal_body::-webkit-scrollbar {
+  background-color: #2b2b2b;
+}
+
+.Terminal_body::-webkit-scrollbar-thumb {
+  background-color: #5c5c5c;
+}
+
+.arrow {
+  color: #ffc720;
+  margin: 0 0 0 0.8rem;
+  font-weight: bold;
+  font-size: 1.4rem;
+}
+
+.keyboard {
+  opacity: 0;
+  filter: alpha(opacity=0);
+}
+
+.out_code {
+  margin: 0.5rem 0;
+}
+
+.red {
+  color: #fa615c;
+}
+
+.green {
+  color: #3fc950;
+}
+
+#userInput::after {
+  content: '';
+  width: 5px;
+  height: 15px;
+  margin: 0 2px;
+  position: relative;
+  display: inline-block;
+  background: white;
+  -webkit-animation: cursor 1s linear infinite;
+  -o-animation: cursor 1s linear infinite;
+  animation: cursor 1s linear infinite;
+}
+
+@keyframes cursor {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+
+/*max style*/
+.max main {
+  width: 100%;
+  height: 100%;
+}
+
+.max .Menubar,
+.max .Terminal_body {
+  border-radius: 0;
+}
+
+/*min style*/
+.min_app {
+  visibility: hidden;
+  position: absolute;
+  width: 50px;
+  height: 50px;
+  left: 0;
+  bottom: 0;
+  background: #3c3f41;
+  border-radius: 50%;
+  margin: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.min main {
+  transform: translate(-640px, 260px) scale(0);
+}
+
+.min .min_app {
+  visibility: visible;
+}
+
+@media (max-width: 991px) {
+  main {
+    width: 95%;
+    height: 70%;
+  }
+
+  .title_404 {
+    font-size: 1em;
+  }
+
+  .out_code {
+    margin: 0.2rem 0;
+  }
+
+  .keyboard {
+    position: relative;
+    width: 100%;
+    left: 0;
+    top: -35px;
+    height: 50px;
+  }
+
+  .min main {
+    transform: translate(-200px, 660px) scale(0);
+  }
+}
diff --git a/src/assets/js/404.mjs b/src/assets/js/404.mjs
