(tentative) addition to transfem webring, this includes a write to the original javascript script to php (currently using local information for performance reasons). Have to update ID when properly accepted into the webring!

css/global/styling/global-styling.css

@@ -58,22 +58,28 @@ img { image-rendering: pixelated;}
     font-weight:            normal;
     font-style:             normal;}
 
-
 @font-face {
     font-family:            'basiic';
     src:                    url('../fonts/basiic.ttf') format('truetype');
     font-weight:            normal;
+    font-style:             normal;
+}
+
+@font-face {
+    font-family:            'molecule31';
+    src:                    url('../fonts/molecule31_font.ttf') format('truetype');
+    font-weight:            normal;
     font-style:             normal;}
 
 @font-face {
-    font-family:            'beefont';
+    font-family:            'ms pgothic';
-    src:                    url('../fonts/beefont.ttf') format('truetype');
+    src:                    url('../fonts/ms_pgothic.ttf') format('truetype');
     font-weight:            normal;
     font-style:             normal;}
 
 * { text-align: center; }
 
-body { font-family: 'special elite', honyaji, basiic, monospace, serif, sans-serif; }
+body { font-family: 'special elite', monospace, serif, sans-serif; }
 
 /* ----------------- Color -------------------- */
 

includes/transfemring.js

@@ -0,0 +1,73 @@
+// based again off https://transring.neocities.org/ring.js :)
+// which is based off https://juneish.neocities.org/resources/webstring/
+
+{
+  const VALID_WIDGET_TYPES = ["transgender", "nonbinary"]
+
+  let transfemring = {
+      // sitelist (oldest to newest)
+      // strip the protocol off
+      sites: [{"id":1,"description":"You're here!","site_link":"fem.nz","author":"me","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:10:09.659Z","updated_at":"2025-10-07T08:10:09.659Z"},{"id":2,"description":"transfem webdev :p","site_link":"skyler.lol","author":"Skyler!","in_the_ring":false,"notes":"","created_at":"2025-10-07T08:10:35.275Z","updated_at":"2025-10-07T08:10:35.275Z"},{"id":3,"description":"just a personal site for music, musings, and blog posts! ran by a transfem enby :)","site_link":"transferns.neocities.org","author":"Andie/Fern","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:10:57.429Z","updated_at":"2025-12-11T02:14:39.833Z"},{"id":4,"description":"the most evil and repulsive website on planet earth","site_link":"cresentri.com","author":"cresentri","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:11:30.742Z","updated_at":"2025-10-07T08:11:30.883Z"},{"id":5,"description":"i'm messing around with trying to learn how to use html for somewhat interesting things i guess","site_link":"iseel.neocities.org","author":"IseeL","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:12:18.126Z","updated_at":"2025-10-07T08:29:03.148Z"},{"id":6,"description":"Just a place for me to share info about my projects and talk about things i enjoy \u003c3","site_link":"vivslakes.moe","author":"Viv","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:13:05.476Z","updated_at":"2025-10-07T08:13:05.567Z"},{"id":7,"description":"all kinds of things!","site_link":"fionaruthbo.neocities.org","author":"Fiona Ruthbo","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:14:16.412Z","updated_at":"2025-10-07T08:14:16.428Z"},{"id":8,"description":"Poetry, halftones, and Twitchy.","site_link":"klara.nz","author":"me!","in_the_ring":true,"notes":"","created_at":"2025-10-07T08:39:07.132Z","updated_at":"2025-10-07T08:57:26.399Z"},{"id":9,"description":"a little birdie on the internet :)","site_link":"kestrel.pet","author":"Kestrel","in_the_ring":true,"notes":"","created_at":"2025-11-15T06:57:16.625Z","updated_at":"2025-11-15T06:57:26.268Z"},{"id":10,"description":"autistic artist musician webdev dragon(girl?)thing; very gay; rawr","site_link":"ytd.wtf","author":"Yuri the Dragon","in_the_ring":true,"notes":"","created_at":"2025-12-30T09:57:00.232Z","updated_at":"2025-12-30T11:19:58.022Z"},{"id":11,"description":"This website runs on my living room heater","site_link":"izzy.kiwi","author":"Just Izzy","in_the_ring":false,"notes":"","created_at":"2025-12-30T11:19:12.953Z","updated_at":"2026-01-01T02:54:57.059Z"},{"id":12,"description":"a dump for all of my projects and adhd thoughts","site_link":"ikelene.dev","author":"Ikelene","in_the_ring":true,"notes":"","created_at":"2026-01-23T01:52:44.443Z","updated_at":"2026-01-23T01:52:44.463Z"},{"id":13,"description":"contains my mind space, which includes gaming, references, easter eggs, art, programming, etc!","site_link":"theabsoluterealm.com","author":"ezra","in_the_ring":true,"notes":"","created_at":"2026-01-23T01:54:27.672Z","updated_at":"2026-01-23T01:56:27.520Z"},{"id":14,"description":"Just a trans girl that likes radios, computers, creative freedom, art, etc not much more to it!","site_link":"cafepots.neocities.org","author":"Cafe_Pots","in_the_ring":true,"notes":"","created_at":"2026-01-30T08:36:39.133Z","updated_at":"2026-01-30T08:36:51.946Z"},{"id":15,"description":"Extension of my cute, sparkley, sprinkle filled transfem brain! ദ്ദി◝ ⩊ ◜)","site_link":"winzpir.neocities.org","author":"Winzpir/Angel","in_the_ring":true,"notes":"","created_at":"2026-02-20T01:31:47.843Z","updated_at":"2026-02-20T01:31:47.843Z"}],
+      root: "https://fem.nz"
+  }
+  console.log(transfemring)
+  transfemring.index = location.href.startsWith("file://") ? 0 : transfemring.sites.findIndex((entry) => location.href.includes("://" + entry.site_link));
+  let widget = document.currentScript.dataset.widget ?? "transgender";
+
+  function urlWithWidget(path) {
+    return `${transfemring.root}/ring/${widget}/${path}`
+  }
+
+  if (!VALID_WIDGET_TYPES.includes(widget)) {
+    console.log("To web admin: transfem webring widget should have data-widget set to one of the following if configured (attribute will default to 'transgender'):", VALID_WIDGET_TYPES)
+    console.log(`data-widget currently set to: ${widget}`)
+    widget = "transgender"
+  }
+
+  if (transfemring.index === -1) {
+    document.currentScript.outerHTML = `
+    <div>
+      <div class="transfem-ring" style="display: flex; justify-content: center; align-items: center; gap: 3.278%; max-width: 244px; image-rendering: pixelated">
+        <a href="${transfemring.root}" target="_top"><img width="168" height="61" src="${urlWithWidget("banner.png")}"></a>
+      </div>
+      (not yet, but maybe soon!)
+    </div>
+    `;
+  } else {
+    function nextActive() {
+      let currentIndex = transfemring.index + 1
+      while (!location.href.includes(transfemring.sites[currentIndex % transfemring.sites.length].site_link)) {
+        if (transfemring.sites[currentIndex % transfemring.sites.length].in_the_ring) {
+          return transfemring.sites[currentIndex % transfemring.sites.length]
+        }
+        currentIndex++
+      }
+      return transfemring.sites[currentIndex % transfemring.sites.length]
+    }
+    function previousActive() {
+      let currentIndex = transfemring.index - 1
+      while (!location.href.includes(transfemring.sites.at(currentIndex).site_link)) {
+        if (transfemring.sites.at(currentIndex).in_the_ring) {
+          return transfemring.sites.at(currentIndex)
+        }
+        currentIndex--
+      }
+      return transfemring.sites[currentIndex % transfemring.sites.length]
+    }
+    let next = "https://" + nextActive().site_link
+    let prev = "https://" + previousActive().site_link;
+      document.currentScript.outerHTML = `
+      <div class="transfem-ring" style="display: flex; justify-content: center; align-items: center; gap: 3.278%; max-width: 244px; image-rendering: pixelated">
+        <a href="${prev}" target="_top" style="width: 12.295%">
+          <img width="30" height="32" src="${urlWithWidget("arrow.png")}" alt="previous site">
+        </a>
+        <a href="${transfemring.root}" target="_top" style="width: 68.852%">
+          <img width="168" height="61" src="${urlWithWidget("banner.png")}" alt="transfem webring">
+        </a>
+        <a href="${next}" target="_top" style="width: 12.295%">
+          <img width="30" height="32" src="${urlWithWidget("arrow.png")}" alt="next site" style="transform: scaleX(-1);">
+        </a>
+      </div>
+    `;
+  }
+}

includes/transfemwebring.inc.php

@@ -0,0 +1,8 @@
+<?php
+
+declare(strict_types=1);
+
+require_once('transfemwebring_contr.inc.php');
+require_once('transfemwebring_view.inc.php');
+
+render();

includes/transfemwebring_contr.inc.php

@@ -0,0 +1,155 @@
+<?php
+
+declare(strict_types=1);
+
+
+$JS_SCRIPT_URL = [
+  "selected_source" => 1,
+  "sources" =>
+  [["url" => "https://fem.nz/ring/transfemring.js",
+    "source" => "internet"],
+  ["url" => "includes/transfemring.js",
+    "source" => "local"]]
+    ];
+
+$VALID_WIDGET_TYPES = ["transgender", "nonbinary"];
+
+$widget_type = $VALID_WIDGET_TYPES[1];
+$id = 8;
+
+
+/* Implement fallback if scraping doesn't work */
+
+function scrapeSitesFromSource(array $source) {
+
+  function getSiteArray(array $source) {
+    function getFile(array $source){
+
+      $selected_source = $source["sources"][$source["selected_source"]];
+
+      if ($selected_source["source"] === "local") {
+        $file = file_get_contents($selected_source["url"]);
+      } else {
+        $curl = curl_init($selected_source["url"]);
+        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
+
+        $file = curl_exec($curl);
+        if ($file === false) {
+          echo "Error: " . curl_error($curl);
+          exit;
+        }
+
+        curl_close($curl);
+      }
+      return $file;
+    }
+
+    function extractSites(string $script) {
+      $start_pos = strpos($script,"sites: [") + 8; // needle has 9 characters
+      $end_pos = strpos($script, "]", $start_pos);
+
+      $sites = substr($script, $start_pos, $end_pos - $start_pos);
+
+      return $sites;
+    }
+
+    return extractSites(getFile($source));
+  }
+
+  function primarySplit(string $array) {
+    $i = 0;
+    while (strlen($array) !== 0) {
+      // Strip coma if found
+      if (str_starts_with($array,',')) {
+        $array = substr($array,1);
+      }
+
+      // Get substring position and length
+      $start_pos = 1;
+      $end_pos = strpos($array,"}",1);
+      $item_len = $end_pos - $start_pos;
+
+      // Save website into array, and strip array
+      $return_array[$i] = substr($array,$start_pos,$item_len);
+      $array = substr($array,$item_len+2); // +2 from { and }
+
+      $i++;
+    }
+    return $return_array;
+  }
+
+  function secondarySplit(string $sub_array) {
+    while (strlen($sub_array) !== 0){
+      if (str_starts_with($sub_array,',')) {
+        $sub_array = substr($sub_array,1);
+      }
+
+      $key_start_pos = 1;
+      $key_end_pos = strpos($sub_array,"\"",1);
+      $key_len = $key_end_pos - $key_start_pos;
+      $key = substr($sub_array,$key_start_pos,$key_len);
+
+      $value_start_pos = $key_len + 3; // +3 from " , " and :
+      // Check if key is quoted
+      if (strpos($sub_array,"\"",$value_start_pos) != $value_start_pos) {
+        $keyhasQuotes = FALSE;
+        $value_end_pos = strpos($sub_array,",");
+      } else {
+        $value_start_pos++; // +1 from "
+        $value_end_pos = strpos($sub_array,"\"",$value_start_pos);
+        $keyhasQuotes = TRUE;
+      } 
+      $value_len = $value_end_pos - $value_start_pos;
+      $value = substr($sub_array,$value_start_pos,$value_len);
+
+      $return_sub_array[$key] = $value;
+
+      $sub_sub_array_len = $key_len + $value_len + 3; // +3 from " , " and :
+      if ($keyhasQuotes) {
+        $sub_sub_array_len = $sub_sub_array_len + 2; // +2 from " and "
+      }
+
+      $sub_array = substr($sub_array,$sub_sub_array_len);
+    }
+    return $return_sub_array;
+  }
+
+  $websites = primarySplit(getSiteArray($source));
+
+  for ($i = 0; $i < sizeof($websites); $i++) {
+    $return_websites[$i] = secondarySplit($websites[$i]);
+  }
+
+  return $return_websites;
+  
+}
+                        
+$transfermring_sites = scrapeSitesFromSource($JS_SCRIPT_URL);
+
+
+$root = "https://fem.nz";
+
+// Add checks if id is at the start
+
+for ($i = 0; $i < count($transfermring_sites); $i++){
+    if ($transfermring_sites[$i]["id"] == $id){
+        $prev = $transfermring_sites[($i-1)]["site_link"];
+        $current = $transfermring_sites[($i)]["site_link"];
+        $next = $transfermring_sites[($i+1)]["site_link"];
+    }
+}
+
+$prev = 'https://' . $prev;
+$current = 'https://' . $current;
+$next = 'https://' . $next;
+
+$file = [
+  "nonbinary" => [
+    "arrow_path" => "../../../img/webrings/transfem_enby_arrow.png",
+    "banner_path" => "../../../img/webrings/transfem_enby_banner.png"
+  ],
+  "transgender" => [
+    "arrow_path" => "../../../img/webrings/transfem_trans_arrow.png",
+    "banner_path" => "../../../img/webrings/transfem_trans_banner.png"
+  ]
+];

includes/transfemwebring_view.inc.php

@@ -0,0 +1,20 @@
+<?php
+
+declare(strict_types=1);
+
+function render(){
+  global $prev, $root, $next, $file, $widget_type;
+  ?>
+  <div class="transfem-ring" style="display: flex; justify-content: center; align-items: center; gap: 3.278%; max-width: 244px; image-rendering: pixelated">
+    <a href="<?php echo $prev ?>" target="_top" style="width: 12.295%">
+      <img width="30" height="32" src="<?php echo $file[$widget_type]["arrow_path"]; ?>" alt="previous site">
+    </a>
+    <a href="<?php echo $root ?>" target="_top" style="width: 68.852%">
+      <img width="168" height="61" src="<?php echo $file[$widget_type]["banner_path"]; ?>" alt="transfem webring">
+    </a>
+    <a href="<?php echo $next ?>" target="_top" style="width: 12.295%">
+      <img width="30" height="32" src="<?php echo $file[$widget_type]["arrow_path"]; ?>" alt="next site" style="transform: scaleX(-1);">
+    </a>
+  </div>
+  <?php
+}

main.php

@@ -140,14 +140,15 @@
                 <div class="clip-box">
                     <div class="auto-scroll">
                         <!-- Have to replace this logic, maybe by having another way to modify behaviour of marquee -->
-                        <?php for ($i = 0; $i <= 1; $i++) {
+                            <?php for ($k = 0; $k <= 1; $k++) {
-                            if ($i === 0) {
+                                if ($k === 0) {
                                     ?><div class="scroll_one"><?php
-                            } else if ($i === 1) {
+                                } else if ($k === 1) {
                                     ?><div class="scroll_two"><?php
                                 }
                                 ?>
-                                <?php for ($j = 0; $j <= 2; $j++) {?>
+                                <?php for ($l = 0; $l <= 2; $l++) {?>
+                                    <?php include "includes/transfemwebring.inc.php";?>
                                     <div class="noaiwebring">
                                         <a href="https://baccyflap.com/noai" target="_blank" alt="no ai webring" title="no ai webring"><div class="home"></div></a>
                                         <a href="https://baccyflap.com/noai/?prv&amp;s=msv" target="_top" alt="previous" title="previous"><div class="prv"></div></a>