1<!DOCTYPE html>
2<html>
3 <head lang="pt">
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
7 <style type="text/css" media="screen">
8/* Resettings some html properties */
9html, body, div, h1, header,section{
10 margin: 0;
11 padding: 0;
12 border: 0;
13 font-family: monospace;
14}
15
16h1 {
17 font-size: 1.25rem;
18 color: #fff;
19 text-transform: uppercase;
20}
21
22ul {
23 margin: 0;
24}
25
26body {
27 font-family: sans-serif;
28 background-color: #f4f4f4;
29}
30
31header {
32 display: flex;
33 justify-content: space-between;
34 margin: auto;
35 margin-bottom: 1em;
36 background: #0062cc;
37 padding: .75em;
38 max-width: 960px;
39}
40
41nav {
42 top: .75em;
43 right: .75em;
44}
45
46.warning {
47 font-size: small;
48 color: red;
49 visibility: hidden;
50}
51
52.btn {
53 display: inline-block;
54 padding: .1rem .75rem;
55 background: #e9ecef;
56 border: #343a40 1px solid;
57 font-size: .9rem;
58 font-weight: 400;
59 line-height: 1.5;
60 cursor: pointer;
61 color: #000;
62 border-radius: 0;
63 text-decoration: none;
64 transition: 0.5s all;
65}
66
67.btn:hover {
68 background-color: #fff;
69}
70
71nav li {
72 display: inline;
73 margin: 0 0 0 0;
74}
75
76.section {
77 justify-content: left;
78 margin-bottom: 1em;
79 display: flex;
80}
81
82.section input {
83 max-width: 10em;
84}
85
86.form-ctl {
87 width: 1.3em;
88 height: 1.3em;
89 background-color: white;
90 border-radius: 0;
91 vertical-align: middle;
92 border: 1px solid #ddd;
93 appearance: none;
94 -webkit-appearance: none;
95 outline: none;
96}
97
98.form-ctl:checked {
99 background-color: gray;
100}
101
102a {
103 display: flex;
104 justify-content: center;
105 align-content: center;
106 flex-direction: column;
107 padding-left: 5px;
108}
109
110main {
111 width: 40%;
112 margin: 0 auto;
113}
114
115#feedUrl {
116 text-overflow: ellipsis;
117 max-width: 100%;
118 white-space: normal;
119 word-break: break-all;
120}
121
122@media (width <= 600px) {
123 main {
124 width: 90%;
125 }
126}
127
128 </style>
129 </head>
130 <body>
131 <header>
132 <h1>Filtro para o Nerdcast</h1>
133 <nav>
134 <ul>
135 <li>
136 <a class="btn" href="https://git.gabrielgio.me/jnfilter/">Código fonte ➤</a>
137 </li>
138 </ul>
139 </nav>
140 </header>
141 <main>
142 <div class="section">
143 Selecione os quadros:
144 </div>
145 <div class="section">
146 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="nerdcast" /><a>NerdCast</a>
147 </div>
148 <div class="section">
149 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="empreendedor" /><a>Empreendedor</a>
150 </div>
151 <div class="section">
152 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="mamicas" /><a>Canecas de Mamicas</a>
153 </div>
154 <div class="section">
155 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="english" /><a>Speak English</a>
156 </div>
157 <div class="section">
158 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="nerdcash" /><a>NerdCash</a>
159 </div>
160 <div class="section">
161 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="bunker" /><a>Lá do Bunker</a>
162 </div>
163 <div class="section">
164 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="tech" /><a>NerdTech</a>
165 </div>
166 <div class="section">
167 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="genera" /><a>Generacast</a>
168 </div>
169 <div class="section">
170 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="rpg" /><a>NerdCast RPG</a>
171 </div>
172 <div class="section">
173 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="catar" /><a>Vai te Catar</a>
174 </div>
175 <div class="section">
176 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="cloud" /><a>Nerd na Cloud</a>
177 </div>
178 <div class="section">
179 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="contar" /><a>Vou te Contar</a>
180 </div>
181 <div class="section">
182 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="parceiro" /><a>Papo de Parceiro</a>
183 </div>
184 <div class="section">
185 <a id="feedUrl" href="https://jnfilter.gabrielgio.me?q=mamicas" type="textbox">https://jnfilter.gabrielgio.me</a>
186 </div>
187 </main>
188 <script>
189var feedUrl = document.getElementById("feedUrl")
190var fields = new Set()
191
192function updateFeedUrl() {
193 if (fields.size == 0) {
194 url = "https://jnfilter.gabrielgio.me"
195 } else {
196 url = "https://jnfilter.gabrielgio.me?q="+[...fields].join(',')
197 }
198 feedUrl.textContent = url
199 feedUrl.href = url
200}
201
202function updateList(elem) {
203 if (elem.checked){
204 fields.add(elem.id)
205 } else {
206 fields.delete(elem.id)
207 }
208 updateFeedUrl()
209}
210 </script>
211 </body>
212</html>