New webring, change yesterweb

CSS/yesterweb.css

@@ -0,0 +1,78 @@
+:root {
+  --mybg:url('https://sadgrl.online/images/bgs/tile/gridnew.gif');
+  --myborder:3px double limegreen;
+  --mycolor:#fff;
+  --mylinkcolor:limegreen;
+  --mytitle:#fff;
+  --fontfamily:'Monster';
+  --bgcolor:#000;
+  --mywidth:150px;
+  --borderradius:0px;
+  --titlesize:15px;
+  --textsize:12px;
+  --textfamily:'Arial';
+  --padding:1rem;
+  --h1margin:5px;
+  --textmargin:10px;
+  --lineheight:1em;
+  --link-weight:bold;
+  --linksize:11px;
+  --link-decoration:none;
+  --link-family:sans-serif;
+}
+
+@font-face {
+  font-family: Monster;
+  src: url(https://yesterwebring.neocities.org/fonts/MonsterFriendFore.woff);
+}
+@font-face {
+  font-family: Minecraftia;
+  src: url(https://yesterwebring.neocities.org/fonts/Minecraftia-Regular.woff);
+}
+@font-face {
+  font-family: Bitmap;
+  src: url(https://sadgrl.online/fonts/ADD.TTF);
+}
+@font-face {
+  font-family: fivepx;
+  src: url(https://sadgrl.online/fonts/5x5.ttf);
+}
+.test {
+  font-family:'Monster' !important;
+  color:blue !important;
+}
+.webring {
+  background-image:var(--mybg);
+  background-color:var(--bgcolor);
+  border:var(--myborder);
+  padding:var(--padding); 
+  color:var(--mycolor);
+  text-align: center;
+  width:var(--mywidth);
+  height:var(--myheight);
+  border-radius:var(--borderradius);
+  line-height:var(--lineheight);
+}
+#copy h1 {
+  font-family:var(--fontfamily);
+  font-size:var(--titlesize);
+  line-height:20px;
+  letter-spacing:2px;
+  color:var(--mytitle);
+  margin:var(--h1margin);
+}
+#copy {
+font-family:var(--textfamily);
+font-size:var(--textsize);
+line-height:1em;
+}
+#copy a {
+color:var(--mylinkcolor);
+text-decoration:none;
+}
+#copy p {
+margin:var(--textmargin);
+}
+.icon {
+  font-size: 100px;
+}

footer.php

@@ -17,8 +17,11 @@
 
     <div class="column-4">
       <?php include('webrings/hotline.php'); ?>
-      <?php include('webrings/yesterweb.php'); ?>
+      <br>
       <?php include('webrings/geekring.php'); ?>
+      <br>
+      <?php include('webrings/retronauts.php'); ?>
+      <?php include('webrings/yesterweb.php'); ?>
     </div>
 
     <div class="column-4">

webrings/retronauts.php

@@ -0,0 +1,5 @@
+<a href="https://webring.dinhe.net/prev/https://ancient-greek.net" style="font-size: 11px;">Previous</a>
+<span style="font-size: 11px;"> // << </span>
+<a href="https://webring.dinhe.net" style="font-size: 11px;">Retronauts Webring</a>
+<span style="font-size: 11px;"> >> //</span>
+<a href="https://webring.dinhe.net/next/https://ancient-greek.net" style="font-size: 11px;">Next</a>

webrings/yesterweb.js

@@ -0,0 +1,102 @@
+const DATA_FOR_WEBRING = `https://miau.sadgrl.online/yesterweb-ring/webring.json`;
+
+const yesterwebTemplate = document.createElement("template");
+yesterwebTemplate.innerHTML = `
+<style>
+.webring {
+  font-weight:var(--link-weight);
+  color:var(--mylinkcolor);
+  font-size:var(--linksize);
+  text-decoration:(--link-decoration);
+  font-family:var(--link-family);
+  color:var(--text-color);
+  padding-top: 0.3em;
+}
+#copy a {
+font-weight:var(--link-weight);
+color:var(--mylinkcolor);
+font-size:var(--linksize);
+text-decoration:var(--link-decoration);
+font-family:var(--link-family);
+}
+#copy {
+color:var(--text-color);
+}
+</style>
+<div class="webring">
+  <div class="icon"></div>
+  <div id="copy">
+
+  </div>
+  <div class="icon"></div>
+</div>`;
+
+class WebRing extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(yesterwebTemplate.content.cloneNode(true));
+
+    // e.g. https://css-tricks.com
+    const thisSite = this.getAttribute("site"); 
+    
+    fetch(DATA_FOR_WEBRING)
+      .then((response) => response.json())
+      .then((sites) => {
+        // Find the current site in the data
+        const matchedSiteIndex = sites.findIndex(
+          (site) => site.url === thisSite
+        );
+        
+        const matchedSite = sites[matchedSiteIndex];
+
+        let prevSiteIndex = matchedSiteIndex - 1;
+        if (prevSiteIndex === -1) prevSiteIndex = sites.length - 1;
+
+        let nextSiteIndex = matchedSiteIndex + 1;
+        if (nextSiteIndex > sites.length - 1) nextSiteIndex = 0;
+        
+        //console.log("sites[0].url is " + sites[0].url);
+        //console.log("matchedSite.url is " + matchedSite.url);
+        //console.log("matchedSite.name is " + matchedSite.name);
+        //console.log(sites[0].url);
+
+        const randomSiteIndex = this.getRandomInt(0, sites.length - 1);
+
+        const cp = `
+            <a href="${sites[randomSiteIndex].url}">???</a> //
+            <a href="${sites[prevSiteIndex].url}">&lt;&lt;</a>
+            <a href="https://yesterweb.neocities.org/webring/">Yesterweb</a>
+            <a href="${sites[nextSiteIndex].url}">&gt;&gt;</a> //
+            <a href="https://yesterwebring.neocities.org/members.html">...</a>
+        `;
+
+        this.shadowRoot
+          .querySelector("#copy")
+          .insertAdjacentHTML("afterbegin", cp);
+      });
+  }
+
+  getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+}
+
+window.customElements.define("webring-css", WebRing);
+
+        // Get HTML head element 
+        var head = document.getElementsByTagName('HEAD')[0];  
+  
+        // Create new link Element 
+        var link = document.createElement('link'); 
+  
+        // set the attributes for link element  
+        link.rel = 'stylesheet';  
+      
+        link.type = 'text/css'; 
+      
+        link.href = '/CSS/yesterweb.css';  
+  
+        // Append link element to HTML head 
+        head.appendChild(link);  

webrings/yesterweb.php

@@ -1,4 +1,4 @@
-<script src="https://yesterwebring.neocities.org/script-text.js"></script>
+<script src="/webrings/yesterweb.js"></script>
 <webring-css site="https://ancient-greek.net/"></webring-css>
 <style>:root {
   --link-weight:strong;