void.shrooms/widgets.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
---
title: Widgets
layout: html
---

<p>
    Once you're accepted into the webring, add your links to your website. You can do this yourself or you can generate a widget to add to your site instead.
</p>
<p>
    Your links will follow this format: <code>{{'/YOUR-SLUG/next'|absolute_url}}</code> and <code>{{'/YOUR-SLUG/previous'|absolute_url}}</code>. Replace <code>YOUR-SLUG</code> with the slug you chose. Feel free to include a link to <code>{{'/'|absolute_url}}</code> as well.
</p>

<h3>Widget #1</h3>

<div class="two_grid">
    <div class="col_1">
        <p>Generate Your Widget:</p>
        <form class="adopt">
        <label for="siteSLUG">Your SLUG:</label>
        <input type="text" name="siteSLUG" id="siteSLUG" value="">
        <br><br>
        <label for="borderCOLOR">Border color: #</label>
        <input type="text" name="borderCOLOR" id="borderCOLOR" value=""><br>
        <span>(Hex codes without the #. Leave blank for default color.)</span>
        <br><br>
        <button type="button" name="generate" id="generate">Generate</button>
        </form>
        <hr>
        <p>Generated code:</p>
        <textarea id="generated" name="generated" rows="3" cols="40">&#60;iframe src="{{'/widget'|absolute_url}}" height="250px" width="200px" scrolling="no" frameborder="0"&#62;&#60;/iframe&#62;</textarea>
    </div>


    <div class="col_2">
        <p>Preview:</p>
        <p>This widget requires Javascript.</p>
        <iframe id="preview" src={{'/widget'|absolute_url}} width="200" height="250" frameborder="0" scrolling="no"></iframe>
    </div>
</div>

<h3>Widget #2</h3>

<div class="two_grid">
    <div class="col_1">
        <p>Generate Your Widget:</p>
        <form class="adopt">
        <label for="siteSLUG2">Your SLUG:</label>
        <input type="text" name="siteSLUG2" id="siteSLUG2" value="">
        <br><br>
        <label for="borderCOLOR2">Border color: #</label>
        <input type="text" name="borderCOLOR2" id="borderCOLOR2" value=""><br>
        <span>(Hex codes without the #. Leave blank for default color.)</span>
        <br><br>
        <label for="textCOLOR2">Text color: #</label>
        <input type="text" name="textCOLOR2" id="textCOLOR2" value=""><br>
        <span>(Hex codes without the #. Leave blank for default color.)</span>
        <br><br>
        <button type="button" name="generate2" id="generate2">Generate</button>
        </form>
    </div>
    <div class="col_2">
        <p>Preview:</p>
        <p>No Javascript Required.</p>

        <div id="preview2">
            <div id="voidShrooms">
                <style>
                    #voidShrooms {
                        width: 200px;
                        height: 50px;
                        background: url('https://void.shroom.ink/src/img/background.webp') #171717;
                        font-family: monospace;
                        outline: 5px double #ba4583;
                        outline-offset: -5px;
                        display: grid;
                        grid-template-columns: 1fr 1fr 1fr;
                        margin: .5em;
                    }
                    #voidShrooms a {
                        color: #efefef;
                        text-decoration: none;
                        font-size: 2.2em;
                        text-align: center;
                        align-self: center;
                    }
                    #voidShrooms #home { font-size: 1em; color: #33FF00; }
                </style>
                <a id="previous" target="_blank" href="https://void.shroom.ink/members/" aria-label="Previous" title="previous">←</a>
                <a id="home" target="_blank" href="https://void.shroom.ink/" aria-label="Home" title="home">void.shrooms</a>
                <a id="next" target="_blank" href="https://void.shroom.ink/members/" aria-label="Next" title="next">→</a>
            </div>
        </div>

        <hr>

        <p>Generated code:</p>
        <textarea id="generated2" name="generated2" rows="3" cols="40"><div id=voidShrooms><style>#voidShrooms{width:200px;height:50px;background:url(https://void.shroom.ink/src/img/background.webp) #171717;font-family:monospace;outline:5px double #ba4583;outline-offset:-5px;display:grid;grid-template-columns:1fr 1fr 1fr;margin:.5em}#voidShrooms a{color:#efefef;text-decoration:none;font-size:2.2em;text-align:center;align-self:center}#voidShrooms #home{font-size:1em;color:#3F0}</style><a aria-label=Previous href=https://void.shroom.ink/members/ id=previous target=_blank title=previous>←</a> <a aria-label=Home href=https://void.shroom.ink/ id=home target=_blank title=home>void.shrooms</a> <a aria-label=Next href=https://void.shroom.ink/members/ id=next target=_blank title=next>→</a></div></textarea>
    </div>
</div>

<script src={{'/src/js/widgets.js'|absolute_url}} charset="utf-8"></script>