-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
178 lines (173 loc) · 10.1 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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Compteur de mots</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<link rel="icon" href="img/ABC.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Compte le nombre de caractères, de mots de paragraphe de vos textes facilement !">
<meta name="keywords" content="comptage de caractères, comptage de caractères en ligne, comptage de mots, comptage de lettres, comptage de paragraphes, mots clés, espaces, outils, ">
<meta name="og:title" content="Comptez les caractères, le nombre de mots facilement !">
<meta name="og:description" content="Découvrez le nombre de caractères que votre texte possède. Rédigez votre texte et découvrez le nombre de caractères, de mots, de paragraphes. Vous pouvez même définir une limite de caractère, personnalisée ou parmi celles proposées de base ! Simplifiez vous la vie !">
<meta name="og:image" content="https://merlode11.github.io/caracter-counter/img/ABC.png">
<meta name="og:url" content="https://merlode11.github.io/caracter-counter/">
<meta content="#bfdbf7" data-react-helmet="true" name="theme-color" />
</head>
<body>
<h1>Compteur de mots</h1>
<div class="content">
<div class="form">
<div class="button">
<button id="share">Partager</button>
<button id="copy">Copier</button>
<button id="delete">Supprimer le texte</button>
</div>
<form name="compteur">
<label for="texte">Entrez le texte dont vous voulez avoir les statistiques ici</label>
<textarea name="texte" id="texte" placeholder="Entrez votre texte ici" tabindex=0></textarea>
<span id="caracter_limit_show">0/∞</span>
</form>
</div>
<div id="resultat">
<p><span id="nb_caracteres" class="valeur">0</span> : Nombre de caractères</p>
<p><span id="nb_caracteres_blank" class="valeur">0</span> : Nombre de caractères <i>(Espaces exclus)</i></p>
<p><span id="nb_mots" class="valeur">0</span> : Nombre de mots</p>
<p><span id="nb_phrases" class="valeur">0</span> : Nombre de phrases</p>
<p><span id="nb_para" class="valeur">0</span> : Nombre de paragraphes</p>
<p class="ask" data-modal="modalOne" tabindex=0><span id="tps_lecture" class="valeur">0 sec</span> : Temps de lecture</p>
<p class="ask" data-modal="modalTwo" tabindex=0><span id="tps_parole" class="valeur">0 sec</span> : Temps de parole
</p>
</div>
</div>
<div class="config">
<details>
<summary>Configuration</summary>
<form name="config">
<p>
<input type="checkbox" name="save_text" id="save_text"><label for="save_text">Enregistrer le texte</label>
</p>
<p>
<label for="read_time_select">Personnalisation du nombre de mots lus par minute</label><br>
<select name="read_time_select" id="read_time_select">
<option value=151.5>9/10 ans (151,5 mots/min)</option>
<option value=166.5>10/11 ans (166,5 mots/min)</option>
<option value=177>11 à 14 ans (177 mots/min)</option>
<option value=250>15 à 18 ans (250 mots/min)</option>
<option value=220 selected>Adulte (220 mots/min)</option>
<option value="custom">Personnalisé</option>
</select>
<br>
<input class="number" type="number" name="read_time" id="read_time" value="220"><label for="read_time">mots/min</label>
</p>
<p>
<label for="speech_time_select">Personnalisation du nombre de mots dits par minute</label><br>
<select name="speech_time_select" id="speech_time_select">
<option value=90>90 mots/min</option>
<option value=110>110 mots/min</option>
<option value=130 selected>130 mots/min</option>
<option value=150>150 mots/min</option>
<option value=170>170 mots/min</option>
<option value=200>200 mots/min</option>
<option value=250>250 mots/min</option>
<option value=300>300 mots/min</option>
<option value="custom">Personnalisé</option>
</select>
<br>
<input class="number" type="number" name="speech_time" id="speech_time" value=130><label for="speech_time">mots/min</label>
</p>
<p>
<label for="caracter_limit_select">Personnalisation du nombre limite de caractères</label><br>
<select name="caracter_limit_select" id="caracter_limit_select">
<option value="0">Pas de limite</option>
<optgroup label="Facebook">
<option value="63206">Post (63206 caractères)</option>
<option value="150">Description (150 caractères)</option>
</optgroup>
<optgroup label="Twitter">
<option value="280">Tweet (280 caractères)</option>
<option value="116">Commentaire d'un retweet (116 caractères)</option>
<option value="15">Pseudo (15 caractères)</option>
</optgroup>
<optgroup label="Instagram">
<option value="150">Biographie (150 caractères)</option>
<option value="2200">Titre (2200 caractères)</option>
</optgroup>
<optgroup label="Pinterest">
<option value="160">Biographie (160 caractères)</option>
<option value="100">Titre (2200 caractères)</option>
<option value="500">Description (500 caractères)</option>
</optgroup>
<optgroup label="Google+">
<option value="100000">Publication (100 000 caractères)</option>
</optgroup>
<optgroup label="Youtube">
<option value="100">Titre (100 caractères)</option>
<option value="1000">Description (1000 caractères)</option>
</optgroup>
<optgroup label="Linkedin">
<option value="120">Titre (150 caractères)</option>
<option value="2000">Résumé (2000 caractères)</option>
<option value="600">Statut (600 caractères)</option>
<option value="500">Chaque expérience (500 caractères)</option>
<option value="100">Degré (100 caractères)</option>
<option value="500">Formation (500 caractères)</option>
<option value="1000">Intérêts ou les récompenses (1000 caractères)</option>
</optgroup>
<optgroup label="Discord">
<option value="2000">Message (2000 caractères)</option>
<option value="32">Pseudo (32 caractères)</option>
<option value="4000">Message avec Nitro (100 caractères)</option>
</optgroup>
<optgroup label="Parcoursup">
<option value="1500">Projet de formation motivé (1500 caractères)</option>
<option value="3500">Eléments liés à ma scolarité (3500 caractères)</option>
</optgroup>
<option value="custom">Personnalisé</option>
</select>
<br>
<input class="number" type="number" name="caracter_limit" id="caracter_limit" value=63206><label for="caracter_limit">caractères</label>
</p>
<p>
<input type="checkbox" name="save_config" id="save_config"><label for="save_config">Enregistrer la configuration</label>
</p>
</form>
</details>
</div>
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="contact-form">
<a class="close" tabindex="0">×</a>
<h2>Temps de lecture</h2>
<p>Avez-vous déjà pensé au temps qu’il fallait au lecteur pour lire votre article ou pour publier sur un
blog ou un site Web? Pour éviter d’ennuyer l’utilisateur et augmenter son implication, il est bon de
considérer ce facteur: le temps de lecture. Avec le compteur de caractères, vous avez un instrument prêt
à le calculer facilement et surtout rapidement. Le calcul est basé sur une moyenne de <b>220 mots à la
minute</b> qu’un adulte peut lire, divisée par le nombre de mots du texte.</p>
</div>
</div>
</div>
<div id="modalTwo" class="modal">
<div class="modal-content">
<div class="contact-form">
<span class="close" tabindex="0">×</span>
<h2>Temps de parole</h2>
<p>Le temps dans la parole est un facteur très important pour éviter d’ennuyer l’utilisateur et augmenter
son implication. Avec le compteur de caractères, vous avez un instrument prêt à le calculer facilement
et surtout rapidement. Le calcul est basé sur une moyenne de <b>130 mots à la minute</b> qu’un adulte
peut lire, divisée par le nombre de mots du texte.</p>
</div>
</div>
</div>
<footer>
<p>
© <span id="year"></span> - Merlode<br>
<a href="https://github.com/Merlode11" target="_blank">Github</a> - <a href="https://twitter.com/Merlode1"
target="_blank">Twitter</a> - <a
href="https://facebook.com/merlode.dg" target="_blank">Facebook</a> - <a href="https://protect-bot.fr"
target="_blank">Protect-Bot</a>
</p>
</footer>
<script src="js/main.js"></script>
</body>
</html>