void.shrooms/widget.html at main · RodFireProductions/void.shrooms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
---
---
<!DOCTYPE html>
<html lang=en>
    <head>
        <title>void.Shrooms Widget</title>
        <meta charset=utf-8>
        <link rel=stylesheet href={{'src/css/main.css'|relative_url}}>
    </head>
    <body>
        <main id="widget">
            <img class="scared_h" src={{'src/img/dither_shroom_white.webp'|absolute_url}} alt="White dithered mushroom">
            <div class="above">
                <div class="title">
                    {{site.name}}<br>webring
                </div>
                <div class="links">
                    <a id="previous" target="_blank" href="{{'/members'|absolute_url}}" aria-label="Previous" title="previous">←</a>
                    <a id="home" target="_blank" href="{{'/'|absolute_url}}" aria-label="Home" title="home">◉</a>
                    <a id="next" target="_blank" href="{{'/members'|absolute_url}}" aria-label="Next" title="next">→</a>
                </div>
            </div>
        </main>
    </body>
    <script src={{"/src/js/urlvalue.js"|absolute_url}} charset="utf-8"></script>
    <script>
        let values = urlValues();

        if (values.slug != "" && values.slug != null) {
            document.getElementById('previous').href = `https://void.shroom.ink/${values.slug}/previous`;
            document.getElementById('next').href = `https://void.shroom.ink/${values.slug}/next`;
            console.log(`Slug set to: ${values.slug}`);
        }

        if (values.hex != "" && values.hex != null) {
            document.getElementById('widget').setAttribute('style', `outline: 5px double #${values.hex}`);
            document.querySelector(':root').style.setProperty("--f_low", `#${values.hex}`);
            console.log(`Border color set to: #${values.hex}`);
        }
    </script>
</html>