forked from dionyziz/gender-unicorn
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·213 lines (180 loc) · 10.5 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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>La Licorne du Genre</title>
<link rel='stylesheet' href='bootstrap/css/bootstrap.min.css' />
<link href='css/fonts.css' rel='stylesheet' type='text/css' />
<link rel='stylesheet/less' type='text/css' href='css/sliders.less' />
<link rel='stylesheet/less' type='text/css' href='css/style.less' />
<link rel='stylesheet' href='css/tooltip.css' />
<script src='less/less.min.js'></script>
<link rel="icon" type="image/png" href="images/favicon.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@monsieurtino_" />
<meta name="twitter:title" content="Fais ta Licorne du Genre !" />
<meta name="twitter:description" content="Fais ta Licorne du Genre sur le web et partage-la avec tes ami·e·s !" />
<meta name="twitter:image" content="http://unicorn.mrtino.eu/images/unicorn-plain.jpg" />
<meta property="og:url" content="https://unicorn.mrtino.eu">
<meta property="og:title" content="Fais ta Licorne du Genre !">
<meta property="og:description" content="Fais ta Licorne du Genre sur le web et partage-la avec tes ami·e·s !">
<meta property="og:image" content="https://unicorn.mrtino.eu/images/unicorn-plain.jpg" />
</head>
<body>
<h1>Fais ta Licorne du Genre !</h1>
<div class='content'>
<div class='unicorn'>
<img class='plain' src='images/unicorn-plain.jpg' alt='Unicorn' width='300' />
<img class='emotional' src='images/unicorn-heart-emotional.png' alt='Red heart' />
<img class='physical' src='images/unicorn-heart-physical.png' alt='Orange heart' />
<img class='expression' src='images/unicorn-expression.jpg' alt='Fabulous' />
<img class='thought' src='images/unicorn-thought-bubble.jpg' alt='Thoughts' />
<img class='assigned' src='images/unicorn-assigned.jpg' alt='DNA' />
</div>
<section class='identity'>
<div class="help-tip">
<p>
Le sentiment intérieur d'être un homme, une femme, aucun des deux, les deux, ou un/d'autres genre(s). Tout le monde a une identité de genre, même toi. Pour les personnes transgenres, leur sexe assigné à la naissance et leur identité de genre ne sont pas les mêmes.
</p>
</div>
<h2><img width='30' src='images/identity.jpg' alt='Rainbow' /> Identité de genre</h2>
<div>
<input id='identity-female' type='range' min='0' max='100' value='0' />
<label for='identity-female'>Femme / Fille</label>
</div>
<div>
<input id='identity-male' type='range' min='0' max='100' value='0' />
<label for='identity-male'>Homme / Garçon</label>
</div>
<div>
<input id='identity-other' type='range' min='0' max='100' value='0' />
<label for='identity-other'>Autres genres</label>
</div>
</section>
<section class='expression'>
<div class="help-tip">
<p>
La manifestation physique de l'identité de genre d'une personne à travers ses vêtements, sa coupe de cheveux, sa voix, sa musculature etc. La plupart des personnes transgenres cherchent à faire en sorte que leur expression de genre (comment elles se présentent physiquement) corresponde à leur identité de genre (qui elles sont), plutôt que celle de leur sexe assigné à la naissance.
</p>
</div>
<h2><img width='30' src='images/expression.jpg' alt='Green circle' /> Expression de genre</h2>
<div>
<input id='expression-feminine' type='range' min='0' max='100' value='0' />
<label for='expression-feminine'>Féminine</label>
</div>
<div>
<input id='expression-masculine' type='range' min='0' max='100' value='0' />
<label for='expression-masculine'>Masculine</label>
</div>
<div>
<input id='expression-other' type='range' min='0' max='100' value='0' />
<label for='expression-other'>Autre</label>
</div>
</section>
<section class='assigned'>
<div class="help-tip">
<p>
L'assignement et la classification des personnes comme mâle, femelle, intersexe, ou un autre sexe est actuellement basé sur la combination de l'anatomie, des hormones et des chromosomes.
</p>
</div>
<h2><img width='30' src='images/assigned.jpg' alt='DNA' /> Sexe assigné à la naissance</h2>
<div class='female'>
<input name='assigned' id='assigned-female' type='radio' />
<label for='assigned-female'>
<span>Femelle</span>
<div class='circle'></div>
</label>
</div>
<div class='male'>
<input name='assigned' id='assigned-male' type='radio' />
<label for='assigned-male'>
<span>Mâle</span>
<div class='circle'></div>
</label>
</div>
<div class='other'>
<input name='assigned' id='assigned-other' type='radio' />
<label for='assigned-other'>
<span>Autre/Intersexe</span>
<div class='circle'></div>
</label>
</div>
</section>
<section class='physical'>
<div class="help-tip">
<p>
Le(s) genre(s) auquel(s) tu es sexuellement attiré. Ces attractions sont généralement incluses dans les termes d'hétérosexualité, d'homosexualité et de bisexualité, tandis que l'asexualité (l'absence (totale ou presque) d'attirance sexuelle envers les autres) est parfois identifiée comme une quatrième catégorie.
</p>
</div>
<h2><img width='30' src='images/physical.jpg' alt='Orange heart' /> Physiquement attiré·e par</h2>
<div>
<input id='physical-women' type='range' min='0' max='100' value='0' />
<label for='physical-women'>Femmes</label>
</div>
<div>
<input id='physical-men' type='range' min='0' max='100' value='0' />
<label for='physical-men'>Hommes</label>
</div>
<div>
<input id='physical-other' type='range' min='0' max='100' value='0' />
<label for='physical-other'>Autre Genre(s)</label>
</div>
</section>
<section class='emotional'>
<div class="help-tip">
<p>
L'orientation romantique, indique le sexe ou le genre avec lequel une personne pourra avoir une relation amoureuse ou tomber amoureux·se.
</p>
</div>
<h2><img width='30' src='images/emotional.jpg' alt='Red heart' /> Émotionellement attiré·e par</h2>
<div>
<input id='emotional-women' type='range' min='0' max='100' value='0' />
<label for='emotional-women'>Femmes</label>
</div>
<div>
<input id='emotional-men' type='range' min='0' max='100' value='0' />
<label for='emotional-men'>Hommes</label>
</div>
<div>
<input id='emotional-other' type='range' min='0' max='100' value='0' />
<label for='emotional-other'>Autre Genre(s)</label>
</div>
</section>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" id="btn-url" data-target="#share-modal">
<span>Partage ta licorne !</span>
</button>
<button type="button" class="btn btn-primary btn-lg btn-download" id="btn-download">
<span>Télécharge ta licorne !</span>
</button>
</div>
<footer>
<p>
Le site de la Licorne du Genre a été réalisé avec <span class='heart'>♥</span> par <a href='https://twitter.com/dionyziz'>dionyziz</a>. <a href="https://github.com/mrtino/gender-unicorn">Modifié</a>, amélioré et traduit par <a href="https://mastodon.xyz/@mrtino">Leia</a>. Merci à Trinity qui a rendu possible le téléchargement de l'image.<br/>
Licence du site : <a href="LICENSE">MIT</a> <br />Licence de la Licorne : domaine public.<br/>
La Gender Unicorn a été créée par <a href='http://www.transstudent.org/'>Trans Student Educational Resources</a>.<br />
<a href='http://www.transstudent.org/gender'>Vous pouvez en apprendre plus sur l'identité de genre sur leur site</a>.<br />
Illustrations par Anna Moore. Design par Landyn Pan.
</p>
</footer>
<div class="modal" tabindex="-1" role="dialog" id='share-modal'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Partage ta licorne</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<p>Partage ta licorne ! Copie cette URL:</p>
<input type='text' />
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<canvas id="dl-canvas" width="2048" height="1582" style="display: none"></canvas>
<script src='jquery/jquery.min.js'></script>
<script src='js/behavior.js'></script>
<script src='bootstrap/js/bootstrap.min.js'></script>
<img src="images/unicorn.jpg" alt="preloader" style="display: none" id="unicorn-jpg" />
<img src="images/util.png" alt="preloader" style="display: none" id="util-png" />
</body>
</html>