-
Notifications
You must be signed in to change notification settings - Fork 1
/
TrumpHair.html
264 lines (249 loc) · 21 KB
/
TrumpHair.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
<!DOCTYPE html>
<html>
<head>
<title>The Donald: Magnetic Hair Interactive</title>
<meta name="description" content='Inspired by the retro magnetic hair toy Wooly Willy, this interactive lets you style "The Donald's" hair, or lack thereof.'>
<meta property="og:title" content="The Donald: Magnetic Hair Interactive">
<meta property="og:site_name" content="Jan Diehm Designs">
<meta property="og:description" content="Inspired by the retro magnetic hair toy Wooly Willy, this interactive lets you style The Donald's hair, or lack thereof.">
<meta property="og:image" content="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8e44ce4b083fd0d23ace9/1438180427998/TrumpHairPreview.png">
<meta property="og:url" content="http://jadiehm.github.io/TrumpHair.html"/>
<link rel="stylesheet" type="text/css" href="TrumpHair.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/draggabilly/1.2.0/draggabilly.pkgd.js"></script>
<script src="TrumpHair.js"></script>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Fontdiner+Swanky' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="bg">
<header>
<h3>The <span class="bold">ORIGINAL</span></h3>
<h1>The Donald</h1>
</header>
<div class="frame">
<svg class="trump" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="500px"
height="800px" viewBox="0 0 332 402" enable-background="new 0 0 332 402" xml:space="preserve">
<g id="Trump">
<g>
<path fill="mistyrose" d="M295.979,152.772c0.001-22.444,0.462-42.339,1.529-52.798c2.764-27.099-28.204-93.294-130.512-93.294
C64.691,6.681,33.72,72.875,36.484,99.975c1.066,10.458,1.884,30.353,1.884,52.798c-9.54-13.165-35.011-12.088-30.313,17.004
c7.303,45.24,5.242,65.077,26.899,64.795c-1.267,15.871-2.936,32.325-5.106,49.007c-9.093,69.868,44.76,83.005,72.688,83.841
h0.022c12.853,16.026,36.889,26.823,64.441,26.823c27.551,0,51.586-10.797,64.439-26.823h0.016
c27.926-0.836,81.785-13.969,72.691-83.841c-2.171-16.682-3.84-33.136-5.107-49.007c21.593,0.282,19.602-19.555,26.903-64.795
C330.639,140.685,305.965,139.107,295.979,152.772z"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M231.456,367.679
c27.925-0.837,81.785-13.97,72.69-83.842c-10.508-80.74-9.4-156.504-6.636-183.602c2.764-27.099-28.204-93.293-130.512-93.293
c-102.307,0-133.278,66.195-130.514,93.293c2.766,27.098,3.872,102.862-6.636,183.602c-9.093,69.869,44.76,83.005,72.688,83.843"
/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M241.38,340.945
c0,29.578-33.302,53.557-74.38,53.557c-41.081,0-74.382-23.979-74.382-53.557"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M200.31,355.731
c0,13.246-14.914,23.984-33.311,23.984c-18.397,0-33.312-10.738-33.312-23.984"/>
<g>
<path fill="gold" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M156.8,130.362c0,0,0.311,0.365,0.828,1.075
c0.254,0.367,0.546,0.917,0.902,1.554c0.286,0.629,0.643,1.367,0.902,2.242c0.549,1.738,0.952,4.012,0.75,6.668
c-0.178,2.652-0.969,5.688-2.726,8.67c-1.729,2.975-4.521,5.904-8.373,7.83c-3.82,1.921-8.682,2.624-13.163,1.752
c-4.538-0.781-8.584-2.877-12.04-5.386c-1.802-1.37-3.054-2.446-4.428-3.626c-1.354-1.109-2.563-2.104-3.921-3.138
c-2.626-2.134-5.381-3.95-8.078-5.743c-2.756-1.643-5.474-3.262-8.235-4.422c-1.354-0.705-2.754-1.077-4.1-1.646
c-1.362-0.428-2.712-0.861-4.045-1.195c-2.67-0.631-5.271-1.014-7.727-1.162c-1.221,0.005-2.422-0.111-3.562-0.082
c-1.131,0.096-2.229,0.145-3.27,0.208c-2.064,0.2-3.895,0.522-5.427,0.758c-2.982,0.726-4.818,1.088-4.818,1.088l-0.78-1.464
c0,0,1.426-1.174,4.146-3.138c0.707-0.435,1.521-0.866,2.404-1.368c0.9-0.459,1.83-1.119,2.943-1.51
c1.097-0.436,2.275-0.918,3.546-1.383c1.28-0.402,2.667-0.733,4.125-1.084c1.458-0.367,3.019-0.471,4.641-0.684
c1.623-0.193,3.302-0.106,5.054-0.139c1.73,0.09,3.508,0.295,5.326,0.517c0.892,0.183,1.793,0.366,2.701,0.552
c0.922,0.174,1.832,0.391,2.725,0.674c0.906,0.257,1.815,0.535,2.729,0.824c0.901,0.31,1.779,0.675,2.68,1.018
c1.832,0.646,3.525,1.539,5.289,2.379c3.426,1.786,6.78,3.825,9.879,6.078c3.1,2.225,6.318,4.938,8.438,6.689
c2.251,1.664,4.491,2.98,6.594,3.581c2.11,0.675,4.054,0.708,5.961,0.294c1.895-0.448,3.707-1.453,5.222-2.79
c0.757-0.667,1.405-1.423,2.023-2.183c0.553-0.791,1.103-1.584,1.497-2.398c0.83-1.619,1.331-3.229,1.575-4.621
c0.174-0.703,0.177-1.338,0.268-1.916c0.024-0.541,0.081-1.01,0.062-1.441c-0.071-0.875-0.073-1.354-0.073-1.354L156.8,130.362z"
/>
<path fill="gold" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M178.753,130.939
c0,0-0.001,0.479-0.072,1.354c-0.02,0.432,0.037,0.9,0.062,1.441c0.09,0.578,0.094,1.213,0.267,1.916
c0.245,1.393,0.745,3.002,1.575,4.621c0.396,0.814,0.944,1.607,1.497,2.398c0.619,0.76,1.267,1.516,2.023,2.183
c1.515,1.337,3.328,2.342,5.222,2.79c1.907,0.414,3.852,0.381,5.961-0.294c2.103-0.601,4.344-1.917,6.594-3.581
c2.121-1.752,5.339-4.465,8.438-6.689c3.099-2.253,6.453-4.292,9.88-6.078c1.763-0.84,3.457-1.732,5.288-2.379
c0.9-0.343,1.778-0.708,2.68-1.018c0.914-0.289,1.822-0.567,2.729-0.824c0.893-0.283,1.803-0.5,2.725-0.674
c0.909-0.186,1.811-0.369,2.701-0.552c1.819-0.222,3.597-0.427,5.327-0.517c1.751,0.032,3.43-0.055,5.054,0.139
c1.621,0.213,3.182,0.316,4.64,0.684c1.458,0.351,2.845,0.682,4.125,1.084c1.271,0.465,2.45,0.947,3.547,1.383
c1.113,0.391,2.043,1.051,2.942,1.51c0.885,0.502,1.697,0.934,2.404,1.368c2.722,1.964,4.147,3.138,4.147,3.138l-0.781,1.464
c0,0-1.835-0.362-4.818-1.088c-1.532-0.235-3.361-0.558-5.426-0.758c-1.042-0.063-2.139-0.112-3.27-0.208
c-1.141-0.029-2.343,0.087-3.562,0.082c-2.456,0.148-5.057,0.531-7.727,1.162c-1.334,0.334-2.684,0.768-4.046,1.195
c-1.345,0.569-2.744,0.941-4.099,1.646c-2.763,1.16-5.479,2.779-8.235,4.422c-2.698,1.793-5.452,3.609-8.079,5.743
c-1.357,1.033-2.567,2.028-3.92,3.138c-1.374,1.18-2.627,2.256-4.429,3.626c-3.455,2.509-7.501,4.604-12.039,5.386
c-4.481,0.872-9.344,0.169-13.164-1.752c-3.852-1.926-6.643-4.855-8.373-7.83c-1.757-2.982-2.547-6.018-2.726-8.67
c-0.202-2.656,0.201-4.93,0.75-6.668c0.26-0.875,0.616-1.613,0.903-2.242c0.356-0.637,0.647-1.187,0.902-1.554
c0.517-0.71,0.827-1.075,0.827-1.075L178.753,130.939z"/>
</g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M152.056,245.612
c-5.575,0-11.616-9.661-11.616-16.385c0-8.292,3.305-15.424,10.424-18.585c-7.258-11.613-3.837-37.133,0.312-47.502"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M181.941,245.612
c6.163,0,11.617-9.661,11.617-16.385c0-8.292-3.306-15.424-10.425-18.585c7.259-11.613,3.837-37.133-0.311-47.502"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M185.636,236.816
c0,7.186-9.12,16.328-18.322,16.328c-9.205,0-18.323-9.143-18.323-16.328"/>
<g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M140.907,223.126
c-12.597-0.052-25.04,22.896-18.61,36.516"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M193.092,223.126
c12.597-0.052,25.04,22.896,18.611,36.516"/>
</g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M96.173,178.694
c12.392,12.028,29.448,12.65,40.439,1.659"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M100.873,174.819
c9.512,9.232,22.604,9.71,31.039,1.273"/>
<path fill="#FFFFFF" d="M98.908,168.161c3.278,2.859,20.738,11.036,33.004-0.458c-3.883-1.06-11.269-2.077-11.269-2.077h-6.636
l-7.32,0.86L98.908,168.161z"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M237.825,178.694
c-12.394,12.028-29.448,12.65-40.44,1.659"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M233.123,174.819
c-9.511,9.232-22.602,9.71-31.039,1.273"/>
<path fill="#FFFFFF" d="M235.088,168.161c-3.277,2.859-20.736,11.036-33.004-0.458c3.883-1.06,11.27-2.077,11.27-2.077h6.637
l7.319,0.86L235.088,168.161z"/>
<g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M148.759,305.467
c-12.307-1.106-22.676,3.87-27.653,13.41"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M185.237,305.467
c12.307-1.106,22.676,3.87,27.653,13.41"/>
</g>
<g>
<g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M38.017,152.772
c-6.772-12.236-34.931-13.773-29.962,17.004c7.465,46.246,5.839,65.403,26.551,65.073"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M36.267,210.608
c-15.185,0-15.216-24.49-18.226-35.789c-3.871-14.525,4.702-17.606,10.433-13.873"/>
</g>
<g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M295.979,152.772
c6.772-12.236,34.931-13.773,29.962,17.004c-7.466,46.246-5.839,65.403-26.552,65.073"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M297.729,210.608
c15.185,0,15.215-24.49,18.226-35.789c3.87-14.525-4.702-17.606-10.433-13.873"/>
</g>
</g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M94.514,169.776
c5.6-2.902,28.619-7.673,42.099,0"/>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M239.483,169.776
c-5.599-2.902-28.618-7.673-42.099,0"/>
<rect x="150.261" y="281.556" width="33.182" height="21.568"/>
<polygon fill="#FFFFFF" points="149.208,300.877 184.79,300.877 178.971,329.595 163.998,337.757 151.259,326.875 "/>
<polygon fill="#FFFFFF" points="148.125,288.399 188.832,288.399 187.75,271.817 187.094,262.039 169.962,270.564
153.786,266.002 148.125,260.902 147.555,269.735 "/>
<path fill="lightpink" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M195.55,266.372l-0.203-1.614
c-0.131-0.652-0.317-1.364-0.542-2.058c-0.187-0.467-0.402-0.928-0.639-1.375c-0.123-0.228-0.233-0.435-0.381-0.666
c-0.196-0.275-0.408-0.546-0.634-0.807c-0.479-0.523-0.883-1.01-1.536-1.421c-0.615-0.412-1.312-0.783-1.972-1.034
c-0.586-0.185-1.2-0.327-1.811-0.418c-0.336-0.057-0.579-0.068-0.781-0.066l-0.668,0.002c-0.999,0.015-1.493,0.144-2.151,0.271
c-0.617,0.14-0.995,0.287-1.5,0.439l-1.192,0.45c-1.44,0.622-2.593,1.222-3.725,1.829l-3.236,1.784l-3.233,1.779
c-0.551,0.291-1.111,0.58-1.685,0.913c-0.577,0.277-1.162,0.594-1.769,0.95l-0.247,0.146c-0.243,0.145-0.46,0.33-0.648,0.548
c-0.188-0.218-0.405-0.403-0.648-0.548l-0.247-0.146c-0.606-0.356-1.191-0.673-1.768-0.95c-0.574-0.333-1.135-0.622-1.686-0.913
l-3.233-1.779l-3.236-1.784c-1.132-0.607-2.284-1.207-3.725-1.829l-1.192-0.45c-0.505-0.152-0.883-0.3-1.5-0.439
c-0.658-0.128-1.152-0.257-2.151-0.271l-0.668-0.002c-0.202-0.002-0.445,0.01-0.78,0.066c-0.611,0.091-1.226,0.233-1.812,0.418
c-0.66,0.251-1.356,0.622-1.972,1.034c-0.653,0.411-1.057,0.897-1.536,1.421c-0.226,0.261-0.438,0.531-0.634,0.807
c-0.147,0.231-0.258,0.438-0.381,0.666c-0.236,0.447-0.452,0.908-0.638,1.375c-0.226,0.693-0.412,1.405-0.543,2.058l-0.203,1.614
c-0.129,1.905-0.06,3.521,0.076,5.001c0.117,1.52,0.292,2.92,0.503,4.329c0.836,5.56,2.019,10.823,3.398,16.06
c0.678,2.615,1.449,5.207,2.264,7.785c0.794,2.584,2.137,7.675,1.854,8.58c-0.278,0.885-0.529,1.774-0.762,2.674
c-0.463,1.798-0.842,3.632-1.112,5.52c-0.268,1.886-0.441,3.822-0.423,5.834c0.016,1.008,0.05,2.027,0.168,3.07
c0.105,1.039,0.263,2.099,0.521,3.174c0.231,1.071,0.576,2.163,0.989,3.249c0.42,1.092,0.971,2.169,1.592,3.233
c0.675,1.045,1.414,2.067,2.299,3.006c0.876,0.918,1.837,1.817,2.89,2.53c1.034,0.784,2.144,1.353,3.262,1.929
c1.116,0.482,2.266,0.973,3.388,1.27c1.096,0.368,2.365,0.595,3.616,0.809c0.723,0.128,0.982,0.143,1.453,0.211l1.277,0.167
c0,0,1.189,0.037,1.301,0.04c0.112-0.003,0.961,0.005,1.281-0.037l1.297-0.17c0.471-0.068,0.73-0.083,1.453-0.211
c1.251-0.214,2.521-0.44,3.616-0.809c1.123-0.297,2.271-0.787,3.388-1.27c1.118-0.576,2.228-1.145,3.262-1.929
c1.053-0.713,2.014-1.612,2.89-2.53c0.885-0.938,1.624-1.961,2.3-3.006c0.62-1.064,1.171-2.142,1.591-3.233
c0.413-1.086,0.758-2.178,0.989-3.249c0.258-1.075,0.415-2.135,0.521-3.174c0.118-1.043,0.152-2.062,0.169-3.07
c0.018-2.012-0.156-3.948-0.423-5.834c-0.271-1.888-0.65-3.722-1.113-5.52c-0.231-0.899-0.483-1.789-0.762-2.674
c-0.283-0.905,1.06-5.996,1.854-8.58c0.814-2.578,1.586-5.17,2.264-7.785c1.38-5.236,2.562-10.5,3.398-16.06
c0.211-1.409,0.386-2.81,0.503-4.329C195.609,269.893,195.679,268.277,195.55,266.372z M182.152,274.021
c-0.603,5.063-1.329,10.35-1.885,15.654c-0.299,2.654-0.515,5.329-0.708,8.014c-0.205,2.681-0.328,5.385-0.342,8.107l0.098,1.822
c0.108,0.644,0.243,1.49,0.332,2.254c0.098,0.782,0.172,1.571,0.23,2.357c0.109,1.573,0.144,3.138,0.084,4.666
c-0.108,3.044-0.639,5.981-1.649,8.24c-0.24,0.572-0.533,1.072-0.826,1.541c-0.297,0.465-0.634,0.847-0.953,1.213
c-0.353,0.322-0.689,0.629-1.06,0.862c-0.379,0.23-0.726,0.457-1.156,0.598c-2.395,0.711-4.689,0.061-7.32,0.061
c-2.605,0-5.301,0.933-7.32-0.061c-0.431-0.141-0.777-0.367-1.156-0.598c-0.369-0.233-0.707-0.54-1.06-0.862
c-0.319-0.366-0.656-0.748-0.953-1.213c-0.293-0.469-0.586-0.969-0.826-1.541c-1.011-2.259-1.541-5.196-1.649-8.24
c-0.06-1.528-0.025-3.093,0.085-4.666c0.058-0.786,0.133-1.575,0.229-2.357c0.089-0.764,0.224-1.61,0.332-2.254l0.098-1.822
c-0.014-2.723-0.137-5.427-0.342-8.107c-0.193-2.685-0.408-5.359-0.708-8.014c-0.556-5.305-1.282-10.591-1.885-15.654
c-0.068-0.688,0.089-1.612,0.245-2.309c3.546,1.495,8.909,2.448,14.91,2.448s11.364-0.953,14.91-2.448
C182.063,272.408,182.221,273.332,182.152,274.021z"/>
<g>
<path fill="blue" d="M115.978,173.388c-5.017,0-8.513-2.01-8.513-3.814c0-1.805,3.496-3.816,8.513-3.816
s8.513,2.011,8.513,3.816C124.49,171.377,120.994,173.388,115.978,173.388z"/>
<path d="M115.978,166.507c4.739,0,7.763,1.816,7.763,3.066c0,1.25-3.024,3.064-7.763,3.064s-7.763-1.815-7.763-3.064
C108.215,168.323,111.239,166.507,115.978,166.507 M115.978,165.007c-5.116,0-9.263,2.044-9.263,4.566
c0,2.521,4.146,4.564,9.263,4.564s9.263-2.044,9.263-4.564C125.24,167.051,121.094,165.007,115.978,165.007L115.978,165.007z"/>
</g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M98.908,168.161
c3.278,2.859,20.738,11.036,33.004-0.458c-3.883-1.06-11.269-2.077-11.269-2.077h-6.636l-7.32,0.86L98.908,168.161z"/>
<g>
<path fill="blue" d="M218.435,173.388c-5.017,0-8.513-2.01-8.513-3.814c0-1.805,3.496-3.816,8.513-3.816
s8.513,2.011,8.513,3.816C226.947,171.377,223.451,173.388,218.435,173.388z"/>
<path d="M218.435,166.507c4.738,0,7.763,1.816,7.763,3.066c0,1.25-3.024,3.064-7.763,3.064s-7.763-1.815-7.763-3.064
C210.672,168.323,213.696,166.507,218.435,166.507 M218.435,165.007c-5.116,0-9.263,2.044-9.263,4.566
c0,2.521,4.146,4.564,9.263,4.564s9.263-2.044,9.263-4.564C227.697,167.051,223.551,165.007,218.435,165.007L218.435,165.007z"/>
</g>
<path fill="none" stroke="#000000" stroke-width="1.5" stroke-miterlimit="10" d="M235.088,168.161
c-3.277,2.859-20.736,11.036-33.004-0.458c3.883-1.06,11.27-2.077,11.27-2.077h6.637l7.319,0.86L235.088,168.161z"/>
</g>
</g>
</svg>
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db40e4b083fd0d23806f/1438178112950/HairPiece1.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db7ae4b0ab9bfe485dfb/1438178170920/HairPiece2.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db8fe4b0b464e2c44a5b/1438178191110/HairPiece3.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db97e4b0b464e2c44a86/1438178199774/HairPiece4.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dba0e4b0b464e2c44aaf/1438178208108/HairPiece5.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbabe4b0b464e2c44ad9/1438178219777/HairPiece6.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbb3e4b0b464e2c44af2/1438178227577/HairPiece7.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbc3e4b0b464e2c44b32/1438178243586/HairPiece8.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbcbe4b0b464e2c44b4b/1438178251911/HairPiece9.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbd5e4b0b464e2c44b75/1438178261120/HairPiece10.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db40e4b083fd0d23806f/1438178112950/HairPiece1.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db7ae4b0ab9bfe485dfb/1438178170920/HairPiece2.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db8fe4b0b464e2c44a5b/1438178191110/HairPiece3.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8db97e4b0b464e2c44a86/1438178199774/HairPiece4.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dba0e4b0b464e2c44aaf/1438178208108/HairPiece5.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbabe4b0b464e2c44ad9/1438178219777/HairPiece6.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbb3e4b0b464e2c44af2/1438178227577/HairPiece7.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbc3e4b0b464e2c44b32/1438178243586/HairPiece8.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbcbe4b0b464e2c44b4b/1438178251911/HairPiece9.png" class="draggable">
<img src="http://static1.squarespace.com/static/51217827e4b0dce195c53752/t/55b8dbd5e4b0b464e2c44b75/1438178261120/HairPiece10.png" class="draggable">
</div>
<div class="notes">
<p class="large">"MAGNETIC PERSONALITY"</p>
<p class="small">DRAW WHISKERS, EYEBROWS AND EVEN<br>A TOUPEE WITH YOUR MOUSE OR FINGER!</p>
</div>
<div class="social">
<a id="button_facebook" href="#">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29.3 29.3" enable-background="new 0 0 29.3 29.3" xml:space="preserve">
<path d="M27.7,0H1.6C0.7,0,0,0.7,0,1.6v26.1c0,0.9,0.7,1.6,1.6,1.6h14.1V18h-3.8v-4.4h3.8v-3.3
c0-3.8,2.3-5.8,5.7-5.8c1.6,0,3,0.1,3.4,0.2v4l-2.3,0c-1.8,0-2.2,0.9-2.2,2.2v2.8h4.4L24,18h-3.8v11.3h7.5c0.9,0,1.6-0.7,1.6-1.6
V1.6C29.3,0.7,28.6,0,27.7,0z"/>
</svg>
</a>
<a id="button_twitter" href="https://twitter.com/share">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 29.3 29.3" enable-background="new 0 0 29.3 29.3" xml:space="preserve">
<path d="M27.7,0H1.6C0.7,0,0,0.7,0,1.6v26.1c0,0.9,0.7,1.6,1.6,1.6h26.1c0.9,0,1.6-0.7,1.6-1.6V1.6
C29.3,0.7,28.6,0,27.7,0z M22.4,10.7c0,0.2,0,0.3,0,0.5c0,5.3-4,11.4-11.4,11.4c-2.3,0-4.4-0.7-6.1-1.8c0.3,0,0.6,0.1,1,0.1
c1.9,0,3.6-0.6,5-1.7c-1.8,0-3.2-1.2-3.7-2.8c0.2,0,0.5,0.1,0.8,0.1c0.4,0,0.7,0,1.1-0.1c-1.8-0.4-3.2-2-3.2-3.9c0,0,0,0,0-0.1
c0.5,0.3,1.2,0.5,1.8,0.5c-1.1-0.7-1.8-1.9-1.8-3.3c0-0.7,0.2-1.4,0.5-2c2,2.4,4.9,4,8.3,4.2c-0.1-0.3-0.1-0.6-0.1-0.9
c0-2.2,1.8-4,4-4c1.2,0,2.2,0.5,2.9,1.3c0.9-0.2,1.8-0.5,2.5-1c-0.3,0.9-0.9,1.7-1.8,2.2c0.8-0.1,1.6-0.3,2.3-0.6
C23.9,9.4,23.2,10.1,22.4,10.7z"/>
</svg>
</a>
<p class="credit">© <a href="http://jandiehmdesigns.com/"><span class="bold">Jan Diehm 2015</span></a></p>
</div>
</div>
<script type="text/javascript">
//Facebook button
document.querySelector('#button_facebook').onclick = function(event) {
var text = " ";
var url = window.location.href;
var wnd = window.open('http://www.facebook.com/sharer.php?u=' + encodeURIComponent(url) + '&p[summary]=' + encodeURIComponent(text), 'facebook-share-dialog', 'height=436,width=626');
if(window.focus) { wnd.focus(); }
return false;
};
//Twitter button
document.querySelector('#button_twitter').onclick = function(event) {
var text = 'Check out this vintage-inspired @realDonaldTrump magnetic hair interactive by @jadiehm http://bit.ly/1MxCnss';
var url = window.location.href;
var wnd = window.open('http://twitter.com/intent/tweet?url=' + encodeURIComponent(url) + '&text=' + encodeURIComponent(text), '', 'height=480,width=640');
if(window.focus) { wnd.focus(); }
return false;
};
</script>
</body>
</html>