-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
258 lines (247 loc) · 11.6 KB
/
index.html
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<!DOCTYPE html>
<html lang="ca" data-bs-theme="light">
<head>
<meta charset="utf-8">
<!-- SEO -->
<title>BENEIT.cat - Conservant la cultura dels insults</title>
<meta name="author" content="Joan Rios">
<meta name="description" content="Conservant la cultura dels insults en valencià/català/balear. Afegiu paraules a través del nostre GitHub o Formulari.">
<!-- Things -->
<meta name="viewport" content="width=1280, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css?nocache=20">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7XKX9MPEN3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-7XKX9MPEN3');
</script>
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
<link rel="manifest" href="./favicons/site.webmanifest">
<link rel="mask-icon" href="./favicons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="./favicons/browserconfig.xml">
<meta name="theme-color" content="#d6ffe2">
<!-- jQuerry -->
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
<!-- Highlight Plugin -->
<script type="text/javascript" src="./js/raw.githubusercontent.com_bartaz_sandbox.js_master_jquery.highlight.js"></script>
<!-- Allow web app to be run in full-screen mode - iOS. -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#ecd96f">
</head>
<body>
<!-- Header bar with a logo, a name and a search bar -->
<div class="header">
<div class="widthLimited d-flex flex-row align-items-center p-2 mb-3">
<img class="logo" src="./img/logo.png" alt="logo" id="logo" onclick="window.location='/'">
<div class="name mx-2">
<h1>BENEIT</h1>
</div>
<button class="ms-auto hidden" id="search-x">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-x" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
</button>
<input type="text" id="searchBar" placeholder="Cerca per nom, font o tag...">
</div>
</div>
<div class="widthLimited centralList">
<!-- Introducció a la pàgina -->
<div class="list-group mx-4 mb-2">
<div class="list-group-item">
Aquesta és una web amb tots els insults en valencià/català/balear creada amb l'objectiu de conservar la nostra meravellosa cultura dels insults.
</div>
<div class="list-group-item" id="recompte">
Actualment, a la base de dades hi tenim
<b>
<div class="spinner-border spinner-border-sm" role="status"></div>
</b>
insults, si en voleu afegir més, visiteu el nostre <a href="https://github.com/JoanRiosiPla/BENEIT">GitHub</a> o afegiu paraules a través del <a href="https://docs.google.com/forms/d/e/1FAIpQLSfaUMh9FfrHljv75PoBfhMX-3EK5Fn8CoukRFBO5fl0eYxjlQ/viewform?usp=sf_link">Formulari</a>.
</div>
<div class="list-group-item">
<span class="nou"></span>
Obtén un insult aleatori: <button class="button" onclick="location.href='/aleatori'">Insult aleatori</button>
</div>
</div>
<!-- La llista de paraules -->
<div class="word-list list-group mx-4 mb-4">
<!-- Loader inicial, després desapareix -->
<div class="d-flex justify-content-center list-group-item">
<div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
</div>
<!-- Fí del loader inicial -->
</div>
</div>
<!-- Footer -->
<div class="footer">
<!-- Attribution to self nd to open source code used -->
<p> Lloc creat per <a href="https://github.com/JoanRiosiPla">Joan Rios i Pla</a>, a l'estiu de 2023.</p>
<p> Utilitzant el seguent codi obert: <br> "jQuery Highlight plugin" de <a href="https://bartaz.github.io/sandbox.js/jquery.highlight.html">Bartosz Wojciechowski</a> </p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script>
// Get the domain
const domain = location.protocol + '//' + location.host + location.pathname;
// Get the search query
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
query = urlParams.get('search');
// Get elements
const searchBar = document.getElementById("searchBar");
const searchX = document.getElementById("search-x");
// Show X if there is a query
if (query) {
searchX.classList.remove("hidden");
}
var data;
// Get insults.json
fetch('./insults.json?nocache=' + (new Date()).getTime())
.then(response => response.json())
.then(jsonData => {
console.log('Fetched insults.json');
data = jsonData;
update(data, query);
// Add the number of words
document.getElementById("recompte").innerHTML = `Actualment, a la base de dades hi tenim <b>${data["insults"].length}</b> insults, si en voleu afegir més, visiteu el nostre <a href="https://github.com/JoanRiosiPla/BENEIT">GitHub</a> o afegiu paraules a través del <a href="https://docs.google.com/forms/d/e/1FAIpQLSfaUMh9FfrHljv75PoBfhMX-3EK5Fn8CoukRFBO5fl0eYxjlQ/viewform?usp=sf_link">Formulari</a>.`
});
searchBar.value = query;
searchBar.addEventListener("input", () => {
update(data, event.target.value);
if (event.target.value != '') {
searchX.classList.remove("hidden");
} else {
searchX.classList.add("hidden");
}
});
searchX.addEventListener("click", () => {
searchBar.value = '';
update(data);
searchX.classList.add("hidden");
});
function update(data, search) {
// Get the word list
let wordList = document.querySelector('.word-list');
// Clear the word list
wordList.innerHTML = '';
// Sort the words by alphabetical order
data.insults.sort((a, b) => {
if (a.paraula < b.paraula) {
return -1;
}
if (a.paraula > b.paraula) {
return 1;
}
return 0;
});
// For each word in the json file
for (let i = 0; i < data.insults.length; i++) {
word = data.insults[i];
if (
search &&
!(
word.paraula.toLowerCase().includes(search.toLowerCase())
|| word.definicio.toLowerCase().includes(search.toLowerCase())
|| word.tags.includes(search.toLowerCase())
|| word.font.nom.toLowerCase() == (search.toLowerCase())
)) {
continue;
}
// Create a new list item
wordList.appendChild(createListItem(
word.paraula,
word.definicio,
word.tags,
word.font.nom,
word.font.url,
""
));
};
if (wordList.innerHTML == '') {
wordList.appendChild(createListItem(
"Cap Resultat",
"No s'ha trobat cap resultat per a la cerca '" + search + "', si voleu afegir la paraula a la base de dades, visiteu el nostre <a href=\"https://github.com/JoanRiosiPla/BENEIT\">GitHub</a> o afegiu-la a través del <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSfaUMh9FfrHljv75PoBfhMX-3EK5Fn8CoukRFBO5fl0eYxjlQ/viewform?usp=sf_link\">Formulari</a>.",
"",
"",
"",
"warning"
));
}
else {
wordList.appendChild(createListItem(
"Trobeu a faltar alguna paraula?",
"Per a afegir la paraula a la base de dades, visiteu el nostre <a href=\"https://github.com/JoanRiosiPla/BENEIT\">GitHub</a> o afegiu-la a través del <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSfaUMh9FfrHljv75PoBfhMX-3EK5Fn8CoukRFBO5fl0eYxjlQ/viewform?usp=sf_link\">Formulari</a>.",
"",
"",
"",
"warning"
));
}
if (search) {
// Highlight the search query
$('.word-list').highlight(search);
}
}
function createListItem(paraula, definicio, tags, nom, url, type) {
let listItem = document.createElement('div');
listItem.classList.add('list-group-item', 'list-group-item-action', 'list-group-item-' + type);
listItem.setAttribute('aria-current', 'true');
// Create a new div for the word and the tags
let div = document.createElement('div');
div.classList.add('d-flex', 'w-100', 'justify-content-between');
// Create a new h5 for the word
let h5 = document.createElement('h5');
h5.classList.add('mb-1');
h5.innerText = paraula;
// Create a new small for the tags
let small = document.createElement('small');
small.classList.add('tags');
small.innerText = tags;
// Create a new p for the definition
let p = document.createElement('p');
p.classList.add('mb-1');
p.innerHTML = definicio;
// Create a new small for the font
let smallFont = document.createElement('small');
let smallFontA = document.createElement('a');
smallFont.classList.add('font');
smallFontA.innerText = nom;
smallFontA.setAttribute('href', url);
smallFont.appendChild(smallFontA);
// Append the h5 and the small to the div
div.appendChild(h5);
div.appendChild(small);
// Append the div, the p and the smallFont to the list item
listItem.appendChild(div);
listItem.appendChild(p);
listItem.appendChild(smallFont);
// If the word is clicked, search for it
if (type != "warning")
{
listItem.addEventListener("click", () => {
window.location.href = domain + '?search=' + paraula;
});
}
// Append the list item to the word list
return listItem;
}
</script>
<script>
// Adapt site scale to screen size
setTimeout(function() {
if (screen.width < 1280) {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+screen.width+'');
}
if (screen.width > 1280) {
document.querySelector('meta[name="viewport"]').setAttribute('content', 'width=1280');
}
}, 50);
</script>
</html>