my-links/dictionary.html at main · adan-ea/my-links · 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
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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Le Petit Adan</title>

		<!-- CSS -->
		<link rel="stylesheet" href="css/normalize.css" />
		<link rel="stylesheet" href="css/skeleton-auto.css" />
		<link rel="stylesheet" href="css/brands.css" />

		<!-- Favicon -->
		<link rel="icon" type="image/png" href="images/icone-discord.png" />
		<style>
			.entry {
				margin-bottom: 20px;
				padding: 10px;
				border: 1px solid #3a3e41;
				border-radius: 5px;
				text-align: justify;
			}
			.entry h3 {
				margin: 0;
				font-size: 1.5em;
			}
			.entry p {
				margin: 5px 0;
				font-size: 1em;
			}
			.search-container {
				margin: 20px 0;
			}
			.desc {
				font-size: smaller;
			}
		</style>
		<script defer data-domain="links.adan-ea.net" src="https://argos.adan-ea.net/js/script.js"></script>
	</head>
	<body>
		<div class="row">
			<div class="container">
				<!-- Title -->
				<h2>Dictionnaire Le Petit Adan</h2>

				<div id="add-entry">
					Explore les termes inventés par la communauté, et
					soigneusement définis par moi-même ! Pour ajouter un mot à
					cette liste, rejoins un de mes lives et réclame la
					récompense "Le Petit Adan" avec ta création originale !
				</div>
				<!-- Search Bar -->
				<div class="search-container">
					<input
						type="text"
						id="search-input"
						placeholder="Rechercher un terme..."
					/>
				</div>

				<!-- Dictionary Entries -->
				<div id="dictionary-entries"></div>
			</div>
		</div>

		<script>
			const dictionary = [
				{
					term: 'Abracourcir',
					type: 'verbe',
					definitions: [
						'Lorsqu\'une personne ou une partie de celle-ci est traînée sur une surface rugueuse suffisamment dure pour provoquer une excoriation de la peau et/ou de la chair. vient du Latin abras-, participe passé du verbe abradere signifiant "râcler, enlever"',
					],
					example: "Il s'est abracourci le genou en tombant de sa moto",
					creator: 'jaipasdideestylee'
				},
				{
					term: 'Papouzayer',
					type: 'verbe',
					definitions: [
						"Admirer la note de dégoût et de dépit qu'une situation nous procure",
						"Transcrire le mépris envers une œuvre au travers d'une pseudo-reproduction grotesque et dénigrante"
					],
					example: 'Je papouzaye cette œuvre',
					creator: 'Zennf_'
				}
			];

			function createEntry(entry) {
				const entryDiv = document.createElement('div');
				entryDiv.className = 'entry';

				// Titre du terme
				const termTitle = document.createElement('h3');
				termTitle.textContent = `${entry.term}`;

				// Type du terme
				const typeTitle = document.createElement('p');
				typeTitle.textContent = entry.type;

				// Liste des définitions
				const definitionsList = document.createElement('ol');
				entry.definitions.forEach((definition, index) => {
					const listItem = document.createElement('li');
					listItem.textContent = definition;
					definitionsList.appendChild(listItem);
				});

				// Exemple
				const exampleParagraph = document.createElement('p');
				exampleParagraph.textContent = `Exemple : ${entry.example}`;

				// Créateur
				const creatorParagraph = document.createElement('p');
				creatorParagraph.textContent = `Créateur : ${entry.creator}`;

				// Ajout des éléments à l'entrée
				entryDiv.appendChild(termTitle);
				entryDiv.appendChild(typeTitle);
				entryDiv.appendChild(definitionsList);
				entryDiv.appendChild(exampleParagraph);
				entryDiv.appendChild(creatorParagraph);

				return entryDiv;
			}

			const container = document.getElementById('dictionary-entries');
			dictionary.forEach((entry) => {
				container.appendChild(createEntry(entry));
			});

			function generateDictionaryEntries(filter = '') {
				const container = document.getElementById('dictionary-entries');
				container.innerHTML = '';

				const filteredEntries = dictionary.filter((entry) =>
					entry.term.toLowerCase().includes(filter.toLowerCase())
				);

				filteredEntries.forEach((entry) =>
					container.appendChild(createEntry(entry))
				);
			}

			document
				.getElementById('search-input')
				.addEventListener('input', function (e) {
					generateDictionaryEntries(e.target.value);
				});

			generateDictionaryEntries();
		</script>
	</body>
</html>