---
import { Image } from 'astro:assets';
import Layout from '../layouts/Layout.astro';
import createdWith from '../assets/img/createdwith.jpeg';
import navigatorGif from '../assets/img/navigator.gif';

const title = "htmx webring";
---

<Layout title={title}>
    <style>
        h1 {
            display: none;
        }

        footer {
            display: none;
        }

        #webring-div {
            font-family: Times New Roman;
        }

        @media only screen and (max-width: 720px) {
            .built-with-tds {
                display: none;
            }
        }
    </style>

    <div id="webring-div">

        <table id="nav-table" style="border: black 4px double; text-align: center">
            <tr>
                <td class="built-with-tds" style="border: 1px black solid">
                    <Image width={200} src={createdWith} alt="Site created with htmx, The Right Way." />
                </td>
                <td width="70%" style="text-align: center; font-size: 20px; border: 1px black solid">
                    This Great <a href="https://htmx.org">htmx</a> Webring site is owned by <a
                        href="https://bigsky.software">Your Name Here</a>.
                </td>
                <td class="built-with-tds" style="border: 1px black solid">
                    <Image width={200} src={createdWith} alt="Site created with htmx, The Right Way." />
                </td>
            </tr>
            <tr>
                <td colspan="3" style="text-align: center; ; border: 1px black solid; position: relative">
                    {`[`}<a
                        class="nav-link"
                        href="#"
                        _={`on click
             set links to <a/> in the #ring-table
             decrement :index
             if :index is -1
                get the length of the links
                set :index to the result - 1
             end
             log :index
             get links[:index]
             set the #webring's src to the result's @href
             `}>Prev</a>{`][`}<a href="#" class="nav-link" _={`on click
             set links to <a/> in the #ring-table
             get the :index
             repeat until the result is not :index
                get Math.floor(Math.random() * length of the links)
             end
             set the :index to the result
             get links[:index]
             set the #webring's src to the result's @href
             `}>Random</a>{`][`}<a href="#" class="nav-link" _={`on click
             set links to <a/> in the #ring-table
             increment :index
             if :index is length of the links
                set :index to 0
             end
             get links[:index]
             set the #webring's src to the result's @href
             `}>Next</a>{`]`}<br/>
                    {`[`}<a href="#" id="show-sites"
                        _={`on click
             transition the #webring's opacity to 0
             hide the #webring
             transition #site-table's height to 100% over 300ms then
             hide me then
             show #return-to-webring`}>List Sites</a><a href="#" id="return-to-webring"
                                                       style="display: none"
                                                       _={`on click
             transition #site-table's height to 0px over 800ms then
             show the #webring
             transition the #webring's opacity to 100%
             hide me then
             show #show-sites`}>Return To Webring</a>{`]`}
                    <Image src={navigatorGif} alt=""
                         _={`on click from .nav-link
              log 'here'
              transition my opacity to 100%
            on load from #webring
              transition my opacity to 0%`}
                         style="opacity: 0; float: right; width: 38px; position:absolute; right:2px; bottom: 2px" />
                </td>
            </tr>
        </table>

        <div id="site-table" style="height: 0px; overflow: hidden">
            <table>
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody id="ring-table">
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://www.commspace.co.za/">Commspace</a></td>
                    <td>The ultimate solution for managing, tracking, splitting and analysing Financial Adviser
                        revenue.
                    </td>
                </tr>
                <tr>
                    <td><a rel="noopener" target="_blank" href="https://zorro.management">Zorro Management</a></td>
                    <td>Manage your projects, time, and progress!</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://www.contexte.com/">Contexte</a></td>
                    <td>L'écosystème politique, au-delà des politiques publiques sectorielles : les métiers, les gens,
                        les textes, les institutions
                    </td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://ocaml.org/">ocaml.org</a></td>
                    <td>An industrial-strength functional programming language with an emphasis on expressiveness and
                        safety
                    </td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://www.nikevision.com/">Nike Vision</a></td>
                    <td>Eye-wear</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://vanillaweather.com/">Vanilla Weather</a></td>
                    <td>No ads. No tracking. Just the weather.</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://turboscribe.ai/">TurboScribe</a></td>
                    <td>TurboScribe's mission is to deliver world-class AI transcription at an unbeatable price.</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://xrss.infogulch.com">XRSS</a></td>
                    <td>A simple RSS reader inspired by Google Reader</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://openunited.com/">OpenUnited</a></td>
                    <td>A Digital Talent match-making platform</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://gophemeral.com">Gophemeral</a></td>
                    <td>Share secrets securely!</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://www.thomasricci.dev">thomasricci.dev</a></td>
                    <td>Super fast portfolio website</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://signup.casa">Signup Casa</a></td>
                    <td>Simple, convenient sign-up forms.</td>
                </tr>
                <tr>
                    <td><a rel="nofollow" target="_blank" href="https://recipes.musicavis.ca">Recipya</a></td>
                    <td>A clean, simple and powerful recipe manager your whole family can enjoy.</td>
                </tr>
                <tr>
                    <td><a rel="noopener" target="_blank" href="https://statusnook.com">Statusnook</a></td>
                    <td>Effortlessly deploy a status page and start monitoring endpoints in minutes.</td>
                </tr>
                <tr>
                    <td><a rel="noopener" target="_blank" href="https://photoquest.wedding/ ">PhotoQuest</a></td>
                    <td>The interactive wedding photo game for unique moments that connect.</td>
                </tr>
                <tr>
                    <td><a rel="noopener" target="_blank" href="https://todo.dankstuff.net/">DankTodo</a></td>
                    <td>The First Ever HTMX C (Ulfius) Todo App in History!</td>
                </tr>
                <tr>
                    <td><a rel="noopener" target="_blank" href="https://dankmuzikk.com/">DankMuzikk</a></td>
                    <td>Create, share and play music playlists with the fully hypermedia music player.</td>
                </tr>
                <tr>
                    <td><a rel="noopener" target="_blank" href="https://danklyrics.com/">DankLyrics</a></td>
                    <td>A lyrics finder API, Website and Go package.</td>
                </tr>
                </tbody>
            </table>
        </div>

    </div>

    <iframe id="webring" src="https://www.commspace.co.za"
            style="position:fixed;right:0;left:0;bottom:0;top:250px;width:100%;height:100%" name="webring"></iframe>

</Layout>
