-
Notifications
You must be signed in to change notification settings - Fork 22
/
Copy pathpersonalities.html
404 lines (373 loc) · 24.8 KB
/
personalities.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
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A website for MBTI test">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="MBTI, mbti">
<title>十六种人格简介</title>
<link rel="shortcut icon" href="./static/img/favicon.ico">
<link rel="stylesheet" href="./static/css/bootstrap.min.css">
<link rel="stylesheet" href="./static/css/personality-index.css">
<link rel="stylesheet" href="./static/css/app.css">
<script src="./static/js/snap.svg-min.js"></script>
<script src="./static/js/jquery-3.7.1.min.js"></script>
<script src="./static/js/bootstrap.min.js"></script>
<script src="./static/js/printProjectInfo.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="./index.html" class="navbar-brand">MBTI</a>
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li>
<a href="./personalities.html">十六种人格简介</a>
</li>
</ul>
</div>
</div>
</div>
<!--NAV BAR END-->
<div class="container">
<div class="pi">
<section id="grid" class="grid">
<a href="./personalities/ENFJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/2.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="M0,0C0,0,0,171.14385,0,171.14385C24.580441,186.61523,55.897012,195.90157,90,195.90157C124.10299,195.90157,155.41956,186.61523,180,171.14385C180,171.14385,180,0,180,0C180,0,0,0,0,0C0,0,0,0,0,0">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ENFJ</h2>
<p>热忱、易感应及负责任的--具能鼓励他人的领导风格。对别人所想或希求会表达真正关切且切实用心去处理。能怡然且技巧性地带领团体讨论或演示文稿提案。爱交际、受欢迎及富同情心。对称许及批评很在意。喜欢带引别人且能使别人或团体发挥潜能。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ENFP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/3.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="M0,0C0,0,0,171.14385,0,171.14385C24.580441,186.61523,55.897012,195.90157,90,195.90157C124.10299,195.90157,155.41956,186.61523,180,171.14385C180,171.14385,180,0,180,0C180,0,0,0,0,0C0,0,0,0,0,0">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ENFP</h2>
<p>充满热忱、活力充沛、聪明的、富想象力的，视生命充满机会但期能得自他人肯定与支持。几乎能达成所有有兴趣的事。对难题很快就有对策并能对有困难的人施予援手。依赖能改善的能力而无须预作规划准备。为达目的常能找出强制自己为之的理由。即兴执行者。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ENTJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/4.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="M0,0C0,0,0,171.14385,0,171.14385C24.580441,186.61523,55.897012,195.90157,90,195.90157C124.10299,195.90157,155.41956,186.61523,180,171.14385C180,171.14385,180,0,180,0C180,0,0,0,0,0C0,0,0,0,0,0">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ENTJ</h2>
<p>坦诚、具决策力的活动领导者。长于发展与实施广泛的系统以解决组织的问题。专精于具内涵与智能的谈话如对公众演讲。乐于经常吸收新知且能广开信息管道。易生过度自信，会强于表达自已创见。喜于长程策划及目标设定。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ENTP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/5.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ENTP</h2>
<p>反应快、聪明、长于多样事务。具激励伙伴、敏捷及直言讳专长。会为了有趣对问题的两面加予争辩。对解决新及挑战性的问题富有策略，但会轻忽或厌烦经常的任务与细节。兴趣多元，易倾向于转移至新生的兴趣。对所想要的会有技巧地找出逻辑的理由。长于看清础他人，有智能去解决新或有挑战的问题。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ESFJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/6.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ESFJ</h2>
<p>诚挚、爱说话、合作性高、受欢迎、光明正大的—天生的合作者及活跃的组织成员。重和谐且长于创造和谐。常作对他人有益事务。给予鼓励及称许会有更佳工作成效。最有兴趣于会直接及有形影响人们生活的事务。喜欢与他人共事去精确且准时地完成工作。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ESFP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/7.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ESFP</h2>
<p>外向、和善、接受性、乐于分享喜乐予他人。喜欢与他人一起行动且促成事件发生，在学习时亦然。知晓事件未来的发展并会热列参与。最擅长于人际相处能力及具备完备常识，很有弹性能立即适应他人与环境。对生命、人、物质享受的热爱者。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ESTJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/8.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ESTJ</h2>
<p>务实、真实、事实倾向，具企业或技术天份。不喜欢抽象理论；最喜欢学习可立即运用事理。喜好组织与管理活动且专注以最有效率方式行事以达致成效。具决断力、关注细节且很快作出决策—优秀行政者。会忽略他人感受。喜作领导者或企业主管。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ESTP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/1.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ESTP</h2>
<p>擅长现场实时解决问题—解决问题者。喜欢办事并乐于其中及过程。倾向于喜好技术事务及运动，交结同好友人。具适应性、容忍度、务实性；投注心力于会很快具成效工作。不喜欢冗长概念的解释及理论。最专精于可操作、处理、分解或组合的真实事务。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/INFJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/2.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>INFJ</h2>
<p>因为坚忍、创意及必须达成的意图而能成功。会在工作中投注最大的努力。默默强力的、诚挚的及用心的关切他人。因坚守原则而受敬重。提出造福大众利益的明确远景而为人所尊敬与追随。追求创见、关系及物质财物的意义及关联。想了解什么能激励别人及对他人具洞察力。光明正大且坚信其价值观。有组织且果断地履行其愿景。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/INFP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/3.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>INFP</h2>
<p>安静观察者，具理想性与对其价值观及重要之人具忠诚心。希外在生活形态与内在价值观相吻合。具好奇心且很快能看出机会所在。常担负开发创意的触媒者。除非价值观受侵犯，行事会具弹性、适应力高且承受力强。具想了解及发展他人潜能的企图。想作太多且作事全神贯注。对所处境遇及拥有不太在意。具适应力、有弹性除非价值观受到威胁。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/INTJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/4.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>INTJ</h2>
<p>具强大动力与本意来达成目的与创意—固执顽固者。有宏大的愿景且能快速在众多外界事件中找出有意义的模范。对所承负职务，具良好能力于策划工作并完成。具怀疑心、挑剔性、独立性、果决，对专业水准及绩效要求高。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/INTP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/5.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>INTP</h2>
<p>安静、自持、弹性及具适应力。特别喜爱追求理论与科学事理。习于以逻辑及分析来解决问题—问题解决者。最有兴趣于创意事务及特定工作，对聚会与闲聊无大兴趣。追求可发挥个人强烈兴趣的生涯。追求发展对有兴趣事务之逻辑解释。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ISFJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/6.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ISFJ</h2>
<p>安静、和善、负责任且有良心。行事尽责投入。安定性高，常居项目工作或团体之安定力量。愿投入、吃苦及力求精确。兴趣通常不在于科技方面。对细节事务有耐心。忠诚、考虑周到、知性且会关切他人感受。致力于创构有序及和谐的工作与家庭环境。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ISFP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/7.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ISFP</h2>
<p>羞怯的、安宁和善地、敏感的、亲切的、且行事谦虚。喜于避开争论，不对他人强加已见或价值观。无意于领导却常是忠诚的追随者。办事不急躁，安于现状无意于以过度的急切或努力破坏现况，且非成果导向。喜欢有自有的空间及照自订的时程办事。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ISTJ.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/8.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ISTJ</h2>
<p>严肃、安静、藉由集中心志与全力投入、及可被信赖获致成功。行事务实、有序、实际、逻辑、真实及可信赖十分留意且乐于任何事（工作、居家、生活均有良好组织及有序。负责任。照设定成效来作出决策且不畏阻挠与闲言会坚定为之。重视传统与忠诚。传统性的思考者或经理。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
<a href="./personalities/ISTP.html"
data-path-hover="m 0,0 0,35.7775 c 24.580441,3.12569 55.897012,-8.199417 90,-8.199417 34.10299,0 65.41956,11.325107 90,8.199417 L 180,0 z">
<figure>
<img src="./static/img/1.png">
<svg viewBox="0 0 180 210" preserveAspectRatio="none">
<path
d="m 0,0 0,171.14385 c 24.580441,15.47138 55.897012,24.75772 90,24.75772 34.10299,0 65.41956,-9.28634 90,-24.75772 L 180,0 0,0 z">
</path>
<desc>Created with Snap</desc>
<defs></defs>
</svg>
<figcaption>
<h2>ISTP</h2>
<p>冷静旁观者—安静、预留余地、弹性及会以无偏见的好奇心与未预期原始的幽默观察与分析。有兴趣于探索原因及效果，技术事件是为何及如何运作且使用逻辑的原理组构事实、重视效能。擅长于掌握问题核心及找出解决方式。分析成事的缘由且能实时由大量资料中找出实际问题的核心。
</p>
<button>点击查看详细介绍</button>
</figcaption>
</figure>
</a>
</section>
</div>
</div>
<script>
(function () {
function init() {
var speed = 330,
easing = mina.backout;
[].slice.call(document.querySelectorAll('#grid > a')).forEach(function (el) {
var s = Snap(el.querySelector('svg')), path = s.select('path'),
pathConfig = {
from: path.attr('d'),
to: el.getAttribute('data-path-hover')
};
el.addEventListener('mouseenter', function () {
path.animate({ 'path': pathConfig.to }, speed, easing);
});
el.addEventListener('mouseleave', function () {
path.animate({ 'path': pathConfig.from }, speed, easing);
});
});
}
init();
})();
</script>
</body>
</html>