🐣 IS GEOCITIES BACK??

jackmcdade · May 18, 2020 · b614ae4 · b614ae4
commit b614ae4
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 0 deletions.
diff --git a/Px437_TandyOld_TV.ttf b/Px437_TandyOld_TV.ttf
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# Weird Wide Webring
+The web needs a little more weird. These sites are helping.
diff --git a/functions.js b/functions.js
@@ -0,0 +1,33 @@
+let urlParams = new URLSearchParams(window.location.search)
+
+function getSites() {
+    return sites
+}
+
+function getReferringSite() {
+    if (urlParams.has('referrer')) {
+        return 'https://' + urlParams.get('referrer');
+    } else if (document.referrer !== '') {
+        return document.referrer.replace(/\/$/, "")
+    }
+
+    return getRandomSite()
+}
+
+function getNextSite() {
+    var index = sites.findIndex(element => element.url === getReferringSite())
+    var site = sites[index + 1] ?? sites[0]
+
+    return site.url
+}
+
+function getPreviousSite() {
+    var index = sites.findIndex(element => element.url === getReferringSite())
+    var site = (index - 1) < 0 ? sites[sites.length - 1] : sites[index - 1]
+
+    return site.url
+}
+
+function getRandomSite() {
+    return sites[Math.floor(Math.random() * sites.length)].url
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,23 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weird Wide Webring</title>
+    <meta name="description" content="The web needs a little more weird. These sites are helping.">
+    <link rel="stylesheet" href="/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+    <script src="/sites.js"></script>
+    <script src="/functions.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
+</head>
+<body x-data="sites = getSites()">
+    <h1>Weird Wide Webring</h1>
+    <p>The web needs a little more weird. These sites are helping.</p>
+    <div class="list">
+        <template x-for="(site, index) in sites" :key="index">
+            <a class="box" :href="site.url + '?ref=weirdwideweb'" x-text="site.name"></a>
+        </template>
+    </div>
+    <p><a href="/join.html">Want to join?</a></p>
+</body>
+</html>
diff --git a/join.html b/join.html
@@ -0,0 +1,17 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Join the Weird Wide Webring</title>
+    <meta name="description" content="Instructions on how to join the Wieerd Wide Webring. Because the web needs a little more weird.">
+    <link rel="stylesheet" href="/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
+</head>
+<body>
+    <h1>Join the Weird Wide Webring</h1>
+    <div class="content">
+        <p>If you wish the web were simpler, more fun, and all around more weird, this might be for you. Head over to <a href="https://github.com/jackmcdade/weirdwidewebring">github</a> for instructions on how to submit your site.</p>
+        <p>&larr; Go back to the <a href="/">sites</a>.</p>
+    </div>
+</body>
+</html>
diff --git a/next.html b/next.html
@@ -0,0 +1,6 @@
+<title>Next Site in the Weird Wide Webring</title>
+<script src="/sites.js"></script>
+<script src="/functions.js"></script>
+<script>
+    window.location = getNextSite() + '?ref=weirdwidewebring';
+</script>
diff --git a/prev.html b/prev.html
@@ -0,0 +1,6 @@
+<title>Next Previous in the Weird Wide Webring</title>
+<script src="/sites.js"></script>
+<script src="/functions.js"></script>
+<script>
+    window.location = getPreviousSite() + '?ref=weirdwidewebring';
+</script>
diff --git a/random.html b/random.html
@@ -0,0 +1,6 @@
+<title>Random Site in the Weird Wide Webring</title>
+<script src="/sites.js"></script>
+<script src="/functions.js"></script>
+<script>
+    window.location = getRandomSite() + '?ref=weirdwidewebring';
+</script>
diff --git a/sites.js b/sites.js
@@ -0,0 +1,4 @@
+let sites = [
+    { name: "Jack McDade", url: 'https://jackmcdade.com'},
+    { name: "Paul Jarvis", url: 'https://pjrvs.com'},
+]
diff --git a/style.css b/style.css
@@ -0,0 +1,78 @@
+@font-face {
+    font-family: 'Tandy';
+    src:  url('/Px437_TandyOld_TV.ttf') format('truetype');
+  }
+
+* {
+    box-sizing: border-box;
+    -webkit-font-smoothing: none;
+    font-family: 'Tandy', Arial, Helvetica, sans-serif;
+}
+
+body {
+    background: #c0c0c0;
+    padding: 32px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 48px;
+}
+
+p {
+    margin-bottom: 2em;
+}
+
+.list {
+    display: flex;
+    align-items: center;
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 64px 0;
+}
+
+.content {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 64px 0;
+    line-height: 1.25;
+}
+
+.box {
+    background: silver;
+    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
+    color: #222;
+    display: block;
+    font-size: 14px;
+    padding: 12px;
+    min-height: 23px;
+    text-align: center;
+    text-decoration: none;
+    width: 50%;
+}
+
+.box:active {
+    box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey;
+    padding: 18px 11px 0 6px 13px;
+}
+
+.box:focus {
+    outline: 1px dotted #000;
+    outline-offset: -6px;
+}
+
+::-webkit-scrollbar {
+    width: 16px;
+}
+
+::-webkit-scrollbar-corner {
+    background: #dfdfdf;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #dfdfdf;
+    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
+}
+
+::-webkit-scrollbar-track {
+    background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg width='2' height='2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1 0H0v1h1v1h1V1H1V0z' fill='silver'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2 0H1v1H0v1h1V1h1V0z' fill='%23fff'/%3E%3C/svg%3E);
+}