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}
39
40nav {
41 top: .75em;
42 right: .75em;
43}
44
45.warning {
46 font-size: small;
47 color: red;
48 visibility: hidden;
49}
50
51.btn {
52 display: inline-block;
53 padding: .1rem .75rem;
54 background: #e9ecef;
55 border: #343a40 1px solid;
56 font-size: .9rem;
57 font-weight: 400;
58 line-height: 1.5;
59 cursor: pointer;
60 color: #000;
61 border-radius: 0;
62 text-decoration: none;
63 transition: 0.5s all;
64}
65
66.btn:hover {
67 background-color: #fff;
68}
69
70nav li {
71 display: inline;
72 margin: 0 0 0 0;
73}
74
75.section {
76 justify-content: left;
77 margin-bottom: 1em;
78 display: flex;
79}
80
81.section input {
82 max-width: 10em;
83}
84
85.form-ctl {
86 width: 1.3em;
87 height: 1.3em;
88 background-color: white;
89 border-radius: 0;
90 vertical-align: middle;
91 border: 1px solid #ddd;
92 appearance: none;
93 -webkit-appearance: none;
94 outline: none;
95}
96
97.form-ctl:checked {
98 background-color: gray;
99}
100
101a {
102 display: flex;
103 justify-content: center;
104 align-content: center;
105 flex-direction: column;
106 padding-left: 5px;
107}
108
109main {
110 width: 60%;
111 margin: 0 auto;
112}
113
114#feedUrl {
115 text-overflow: ellipsis;
116 max-width: 100%;
117 white-space: normal;
118 word-break: break-all;
119}
120
121@media (width <= 600px) {
122 main {
123 width: 90%;
124 }
125}
126
127 </style>
128 </head>
129 <body>
130 <header>
131 <h1>Filtro para o Nerdcast</h1>
132 <nav>
133 <ul>
134 <li>
135 <a class="btn" href="https://git.gabrielgio.me/jnfilter/">Código fonte ➤</a>
136 </li>
137 </ul>
138 </nav>
139 </header>
140 <main>
141 <div class="section">
142 Selecione os quadros:
143 </div>
144 <div class="section">
145 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="nerdcast" /><a>NerdCast</a>
146 </div>
147 <div class="section">
148 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="empreendedor" /><a>Empreendedor</a>
149 </div>
150 <div class="section">
151 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="mamicas" /><a>Canecas de Mamicas</a>
152 </div>
153 <div class="section">
154 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="english" /><a>Speak English</a>
155 </div>
156 <div class="section">
157 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="nerdcash" /><a>NerdCash</a>
158 </div>
159 <div class="section">
160 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="bunker" /><a>Lá do Bunker</a>
161 </div>
162 <div class="section">
163 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="tech" /><a>NerdTech</a>
164 </div>
165 <div class="section">
166 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="genera" /><a>Generacast</a>
167 </div>
168 <div class="section">
169 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="rpg" /><a>NerdCast RPG</a>
170 </div>
171 <div class="section">
172 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="catar" /><a>Vai te Catar</a>
173 </div>
174 <div class="section">
175 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="cloud" /><a>Nerd na Cloud</a>
176 </div>
177 <div class="section">
178 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="contar" /><a>Vou te Contar</a>
179 </div>
180 <div class="section">
181 <input class="form-ctl" type="checkbox" onchange="updateList(this)" id="parceiro" /><a>Papo de Parceiro</a>
182 </div>
183 <hr/>
184 <div class="section">
185 <input class="form-ctl" type="checkbox" onchange="updateTag(this)" />
186 <a>Mudar metadata</a>
187 </div>
188 <div class="section">
189 <p> Caso você use um agregador que gerencie o feed para você
190 (como pocketcast), talvez você precise habilitar esta opção para
191 mudar o metadata do feed, fazendo assim com que ele seja
192 reconhecido como um feed único.
193 </p>
194 </div>
195 <div class="section">
196 <a id="feedUrl" href="https://jnfilter.gabrielgio.me?q=mamicas" type="textbox">https://jnfilter.gabrielgio.me</a>
197 </div>
198 </main>
199 <script>
200var feedUrl = document.getElementById("feedUrl")
201var fields = new Set()
202var tag = false
203
204function updateFeedUrl() {
205 if (fields.size == 0) {
206 url = "https://jnfilter.gabrielgio.me"
207 } else {
208 url = "https://jnfilter.gabrielgio.me?q="+[...fields].join(',')
209 }
210
211 if (tag) {
212 if (fields.size == 0) {
213 url += "?tag=true"
214 } else {
215 url += "&tag=true"
216 }
217 }
218
219 feedUrl.textContent = url
220 feedUrl.href = url
221}
222
223function updateList(elem) {
224 if (elem.checked){
225 fields.add(elem.id)
226 } else {
227 fields.delete(elem.id)
228 }
229 updateFeedUrl()
230}
231
232function updateTag(elem) {
233 tag = elem.checked
234 updateFeedUrl()
235}
236 </script>
237 </body>
238</html>