-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
197 lines (195 loc) · 16.7 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<div id="picker"></div>
<div class="input-wrap">
<input id="urlBox" type="text" name="ImageURL" value="">
<input class="button" id="submitBtn" type="submit" name="ImageURL" value="Cambiar Estampa">
</div>
<div class="slidecontainer">
<p>Ajustar estampado</p>
<input type="range" min="300" max="2000" value="626" class="slider" id="myRange">
</div>
</div>
<!-- <object class="camiseta-img" type="image/svg+xml" data="camiseta.svg"></object> -->
<svg class="camiseta-img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="1536.154px" height="1701.17px" viewBox="0 0 1536.154 1701.17" enable-background="new 0 0 1536.154 1701.17"
xml:space="preserve">
<g id="Layer_1">
</g>
<g id="camiseta">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="626" height="626">
<image id="pattern-image" class='twombly' xlink:href="https://image.freepik.com/free-vector/seamless-exotic-pattern-with-palm-on-geometric-background_1015-447.jpg" x="0" y="0"
width="626" height="626"/>
</pattern>
</defs>
<polygon id="pechera" fill="url(#img1)" points="320.26,199.599 352.259,271.964 366.694,318.707 374.569,357.285 382.814,416.858
385.728,470.329 383.724,509.473 379.069,559.476 372.246,601.144 363.41,634.452 363.705,643.63 365.473,711.799 370.523,897.757
371.995,1033.544 374.455,1147.399 380.677,1200.1 374.569,1272.889 366.719,1364.65 366.719,1433.546 366.719,1482.376
366.073,1577.821 402.061,1586.725 524.485,1601.441 640.416,1608.13 778.128,1608.13 923.036,1608.13 1045.835,1599.434
1150.743,1584.049 1217.686,1569.059 1243.337,1558.516 1238.008,1427.526 1233.462,1344.583 1224.472,1260.301 1224.472,1172.006
1224.472,1084.38 1224.472,1000.098 1224.472,898.425 1221.354,767.99 1221.179,643.633 1220.022,630.089 1211.362,586
1204.7,551.63 1196.881,509.064 1195.838,465.645 1198.483,409.319 1207.798,344.126 1224.472,289.725 1243.337,232.866
1263.321,198.755 1215.482,183.37 1168.728,169.323 1118.767,151.932 1065.476,129.456 1030.927,115.344 1018.593,136.266
996.26,171.266 970.26,205.266 934.593,243.599 901.927,273.932 857.26,307.599 802.348,345.722 789.625,351.218 754.653,331.596
701.094,291.692 637.619,235.727 588.158,176.089 554.26,118.764 519.927,134.266 473.26,153.932 415.26,173.266 361.927,190.266
334.927,196.932 "/>
<g>
<polygon id="cuello1" fill="#FFFFFF" points="556.37,124.212 598.656,103.963 668.211,199.455 748.358,273.599 791.01,294.212 883.37,211.328
937.26,158.238 976.298,99.825 1025.37,121.212 976.298,197.018 901.35,266.748 831.003,318.902 792.321,345.97 728.644,303.823
673.136,259.368 628.097,213.889 585.37,166.212 "/>
<polygon id="cuello2" fill="#FFFFFF" points="605.747,94.573 628.097,86.263 711.26,100.266 779.26,100.266 842.593,99.825 893.927,94.286
958.203,86.263 973.26,93.264 951.26,129.277 909.26,143.758 859.26,151.266 803.26,151.266 751.26,151.266 698.593,148.599
641.927,139.266 628.097,135.932 "/>
</g>
<path id="costadoizq" fill="#D3D3D3" d="M386.263,630.576c143.454,182.394,146.843,772.709-13.096,937.627
c-1.528,1.575-4.493,4.369-4.493,4.369l7.649-365.123l-4.34-584.834C371.983,622.614,383.861,627.522,386.263,630.576z"/>
<path id="costadoder" fill="#D3D3D3" d="M1202.918,602.779c-140,185.059-132.29,775.333,30.721,937.215
c1.557,1.546,4.574,4.284,4.574,4.284l-28.338-949.593C1209.876,594.685,1205.262,599.681,1202.918,602.779z"/>
<line fill="none" x1="114.368" y1="521.813" x2="334.927" y2="233.634"/>
<line fill="none" x1="1468.669" y1="527.466" x2="1248.11" y2="239.287"/>
<path fill="none" d="M1523.588,514.698l-1.313-1.823c-0.309-0.883-0.665-1.587-1.001-2.132c-0.657-1.068-1.489-1.92-2.407-2.588
c-68.316-94.768-140.658-188.48-215.052-278.553c-8.817-10.676-18.811-22.777-32.06-30.94
c-11.47-7.063-24.397-10.596-36.896-14.015l-1.396-0.381c-93.704-25.661-185.218-60.813-272-104.482l-0.004,0.008
c-1.533-0.77-3.4-0.819-5.03,0.051c-18.355,9.789-126.333,15.74-156.571,15.471c-71.663-0.721-126.118-6.001-176.567-17.119
c-2.951-0.648-5.871,1.214-6.52,4.165c-0.047,0.212-0.053,0.423-0.074,0.634c-84.856,42.173-174.139,76.246-265.518,101.271
l-1.396,0.381c-12.499,3.419-25.426,6.952-36.896,14.016c-13.249,8.161-23.243,20.262-32.06,30.938
c-74.394,90.073-146.735,183.785-215.052,278.553c-0.918,0.667-1.75,1.52-2.407,2.588c-0.336,0.545-0.691,1.249-1,2.132
l-1.313,1.823l0.746,0.385c-1.848,10.328,4.029,36.11,66.524,90.897c41.396,36.294,94.21,80.996,135.496,104.727l2.808,1.64
c6.537,3.847,12.74,7.495,21.685,7.495c0.736,0,1.491-0.025,2.265-0.077c2.183-0.144,3.968-1.558,4.718-3.468
c1.369-0.307,2.337-1.078,2.838-1.499c7.764-6.505,15.018-14.113,22.698-22.166c4.76-4.993,9.684-10.156,14.725-15.014
c5.579-5.379,14.857-15.608,22.446-25.071c0.081,2.5,0.169,5.244,0.265,8.229c0.392,16.263,0.952,39.495,1.624,67.374
c1.081,55.804,2.524,130.21,3.966,204.616c1.617,74.417,3.234,148.835,4.447,204.648c0.298,13.954,0.572,26.745,0.815,38.082
c0.375,11.336,1.193,21.211,2.048,29.342c0.046,0.41,0.093,0.762,0.138,1.164c-1.452,16.153-2.851,32.314-4.104,48.491
c-4.234,54.436-7.124,108.983-8.855,163.541c-0.513,13.639-0.754,27.281-1.144,40.921l-0.788,40.924l-0.46,40.923l-0.19,40.92
l-0.022,4.777l4.494,1.44c18.53,5.936,36.918,8.745,55.385,11.532c18.453,2.643,36.92,4.627,55.396,6.364
c36.952,3.423,73.936,5.692,110.931,7.429c36.996,1.688,74.004,2.818,111.017,3.438c37.013,0.688,74.033,0.763,111.048,0.266
c74.026-0.956,148.055-3.559,221.958-9.315c36.945-2.938,73.868-6.605,110.647-12.181c18.385-2.817,36.734-6.121,54.97-10.452
c18.167-4.685,36.471-9.338,53.719-19.899l2.799-1.714l-0.119-4.473l-1.833-68.645c-0.742-23.212-1.71-46.419-2.906-69.617
c-1.18-23.198-2.591-46.388-4.317-69.559c-0.812-11.588-1.789-23.167-2.757-34.745c-1.021-11.598-2.047-23.097-3.276-34.762
c-0.15-1.377-0.343-2.779-0.502-4.162l0.422-0.011c-5.107-196.724-8.779-531.713-6.338-625.081
c7.619,9.52,16.987,19.854,22.603,25.266c5.038,4.856,9.96,10.017,14.718,15.009c7.682,8.055,14.937,15.664,22.705,22.174
c0.5,0.418,1.469,1.189,2.839,1.496c0.75,1.909,2.534,3.323,4.718,3.467c0.775,0.051,1.528,0.077,2.265,0.077
c8.941,0,15.146-3.649,21.683-7.495l2.808-1.64c41.282-23.728,94.098-68.433,135.497-104.727
c62.494-54.787,68.371-80.569,66.522-90.897L1523.588,514.698z"/>
<g>
<path fill="#151415" d="M1221.885,1277.72c-5.757-221.731-9.574-600.493-5.371-646.821l10.895,0.988
c-4.089,45.093-0.206,429.059,5.414,645.548L1221.885,1277.72z"/>
</g>
<g>
<path fill="#151415" d="M422.938,932.648c-3.688,13.18-6.878,26.375-9.786,39.653c-2.859,13.281-5.483,26.593-7.733,39.976
c-2.356,13.359-4.295,26.786-6.265,40.2c-1.876,13.431-3.457,26.901-5.05,40.365c-1.572,13.483-2.72,26.938-4.03,40.534
l-3.825,40.685c-2.503,27.117-4.874,54.228-6.898,81.359c-4.065,54.26-6.789,108.604-8.361,163.006
c-0.473,13.597-0.674,27.205-1.024,40.807l-0.67,40.821l-0.342,40.83l-0.073,40.838l-4.471-6.216
c16.722,5.32,35.038,8.164,53.08,10.793c18.141,2.536,36.438,4.44,54.76,6.1c36.66,3.27,73.479,5.405,110.319,7.008
c36.846,1.555,73.729,2.555,110.62,3.047c18.446,0.246,36.894,0.401,55.342,0.404c18.448,0.078,36.897,0.081,55.344-0.077
c73.781-0.618,147.583-2.883,221.095-8.275c36.739-2.754,73.436-6.236,109.769-11.578c18.153-2.696,36.22-5.872,53.964-10.001
c8.837-2.147,17.605-4.494,26.128-7.321c8.446-2.901,16.772-6.262,23.851-10.705l-2.68,6.185l-0.224-2.959l-0.066-2.262
l-0.107-4.405l-0.163-8.711l-0.324-17.378l-0.821-34.727c-0.635-23.146-1.496-46.284-2.583-69.408
c-1.072-23.125-2.374-46.239-3.988-69.326c-0.757-11.548-1.678-23.082-2.59-34.616c-0.948-11.506-1.969-23.109-3.069-34.515
c-1.139-11.601-2.517-22.904-4.129-34.341c-1.552-11.433-3.432-22.83-5.22-34.247c-1.825-11.412-3.819-22.803-5.861-34.188
l-6.395-34.118c-4.458-22.714-9.081-45.41-14.046-68.039c-2.395-11.336-4.915-22.648-7.575-33.927
c-2.66-11.281-5.429-22.535-8.251-33.797c3.849,10.947,7.518,21.973,10.839,33.098c3.405,11.102,6.673,22.249,9.818,33.43
c3.131,11.186,6.048,22.427,8.932,33.68c2.917,11.246,5.536,22.563,8.199,33.873c2.626,11.318,5.158,22.662,7.505,34.046
c2.324,11.39,4.602,22.792,6.713,34.233c2.147,11.435,4.008,22.926,5.752,34.447c1.752,11.506,3.305,23.212,4.555,34.676
c1.229,11.665,2.256,23.163,3.276,34.762c0.968,11.578,1.945,23.157,2.757,34.745c1.725,23.171,3.136,46.36,4.317,69.559
c1.195,23.198,2.163,46.405,2.906,69.617l1.833,68.645l0.119,4.472l-2.799,1.714c-17.249,10.56-35.553,15.214-53.719,19.899
c-18.236,4.331-36.585,7.635-54.971,10.452c-36.778,5.576-73.701,9.242-110.647,12.181c-73.903,5.756-147.932,8.359-221.958,9.315
c-37.015,0.497-74.035,0.422-111.048-0.266c-37.013-0.62-74.021-1.75-111.017-3.438c-36.995-1.737-73.98-4.006-110.931-7.429
c-18.476-1.737-36.943-3.721-55.396-6.364c-18.467-2.787-36.854-5.595-55.385-11.532l-4.494-1.44l0.022-4.777l0.19-40.92
l0.46-40.922l0.788-40.924c0.39-13.641,0.631-27.282,1.144-40.921c1.731-54.558,4.621-109.105,8.856-163.541
c2.108-27.218,4.563-54.4,7.148-81.55l3.944-40.702c1.261-13.535,2.781-27.204,4.544-40.77
c1.704-13.588,3.879-27.115,6.276-40.599c2.362-13.492,5.274-26.888,8.387-40.227c3.18-13.324,6.789-26.556,10.98-39.598
C412.64,958.01,417.361,945.102,422.938,932.648z"/>
</g>
<g>
<path fill="#151415" d="M368.373,634.7c0,0,0.542,9.316,1.49,25.62c0.868,16.295,1.728,39.566,2.718,67.482
c0.458,13.958,0.953,29.079,1.478,45.072c0.376,15.994,0.773,32.861,1.184,50.31c0.716,34.895,1.479,72.116,2.242,109.337
c0.783,74.448,1.565,148.895,2.152,204.73c0.097,13.959,0.185,26.755,0.264,38.097c-0.061,11.344-0.611,21.24-1.249,29.392
c-0.681,8.152-1.49,14.561-2.199,18.933c-0.661,4.311-1.225,6.838-1.214,6.571c0.022,0.267-0.605-2.245-1.376-6.537
c-0.821-4.351-1.797-10.736-2.694-18.866c-0.855-8.131-1.673-18.006-2.048-29.342c-0.243-11.337-0.516-24.128-0.815-38.082
c-1.213-55.813-2.83-130.23-4.447-204.648c-1.442-74.406-2.885-148.812-3.967-204.616c-0.672-27.879-1.232-51.111-1.624-67.374
c-0.523-16.231-0.822-25.506-0.822-25.506L368.373,634.7z"/>
</g>
<g>
<path fill="#151415" d="M288.313,719.843c-8.945,0-15.147-3.649-21.685-7.495l-2.808-1.64
c-41.286-23.731-94.099-68.433-135.496-104.727c-74.482-65.295-68.55-89.404-64.957-95.237c2.158-3.505,6.062-4.979,9.49-3.594
c2.801,1.133,4.154,4.32,3.022,7.122c-0.625,1.547-1.879,2.653-3.348,3.143c-0.374,4.625,1.941,26.806,63.005,80.339
c41.017,35.96,93.285,80.218,133.736,103.47l2.903,1.694c6.539,3.846,10.86,6.37,17.68,5.933c3.015-0.206,5.622,2.082,5.82,5.097
c0.201,3.015-2.082,5.62-5.097,5.82C289.804,719.817,289.049,719.843,288.313,719.843z"/>
</g>
<g>
<path fill="#151415" d="M1296.331,719.843c-0.737,0-1.491-0.025-2.265-0.077c-3.015-0.2-5.298-2.805-5.097-5.82
c0.198-3.015,2.807-5.305,5.82-5.097c6.806,0.429,11.139-2.085,17.676-5.933l2.904-1.694
c40.447-23.248,92.717-67.508,133.738-103.47c61.062-53.533,63.377-75.714,63.003-80.339c-1.469-0.49-2.723-1.596-3.348-3.143
c-1.132-2.801,0.221-5.989,3.022-7.122c3.428-1.386,7.332,0.089,9.49,3.594c3.594,5.834,9.525,29.942-64.955,95.237
c-41.4,36.294-94.215,80.999-135.497,104.727l-2.808,1.64C1311.477,716.194,1305.272,719.843,1296.331,719.843z"/>
</g>
<g>
<path fill="#151415" d="M790.07,351.924c-0.005,0-0.011,0-0.016,0c-5.214-0.007-9.622-2.595-12.841-4.482
c-8.571-5.025-17.438-10.223-26.13-15.625C667.975,280.173,598.207,208.072,549.32,123.31l9.478-5.467
c47.989,83.208,116.477,153.984,198.059,204.682c8.573,5.326,17.377,10.487,25.893,15.479c2.378,1.396,5.072,2.976,7.319,2.979
c0.002,0,0.004,0,0.005,0c1.888,0,4.121-1.092,6.634-2.411c94.87-49.788,175.266-129.064,226.377-223.227l9.616,5.218
c-52.135,96.049-134.141,176.914-230.908,227.697C798.846,349.806,794.813,351.924,790.07,351.924z"/>
</g>
<g>
<path fill="#151415" d="M785.31,345.97c-1.143-7.911-1.095-25.2-1.058-39.094c0.018-6.338,0.034-12.325-0.108-14.223l10.909-0.819
c0.174,2.322,0.16,7.67,0.14,15.073c-0.035,12.822-0.084,30.382,0.944,37.5L785.31,345.97z"/>
</g>
<line fill="none" x1="90.076" y1="509.16" x2="310.635" y2="220.981"/>
<g>
<path fill="#151415" d="M801.617,106.266c-0.671,0-1.295-0.004-1.87-0.009c-72.449-0.73-127.595-6.088-178.81-17.375
c-2.951-0.65-4.815-3.569-4.165-6.52c0.648-2.951,3.569-4.813,6.52-4.165c50.448,11.117,104.903,16.398,176.567,17.119
c30.238,0.269,138.217-5.683,156.571-15.471c2.668-1.423,5.98-0.411,7.403,2.252c1.421,2.666,0.413,5.98-2.253,7.403
C939.549,101.247,829.533,106.266,801.617,106.266z"/>
</g>
<g>
<path fill="#151415" d="M793.742,158.238c-57.13,0-114.126-6.099-170.368-18.268l2.315-10.694
c89.122,19.282,180.164,23.113,270.593,11.377c15.074-1.957,32.45-4.609,47.884-11.34l4.374,10.029
c-16.748,7.303-35.03,10.106-50.85,12.159C863.083,155.994,828.388,158.238,793.742,158.238z"/>
</g>
<path fill="#151415" d="M294.177,716.448c-0.324,0-0.666-0.03-1.024-0.098c-0.022,0.001-0.041,0.001-0.062,0.001
c-4.883,0-8.781-5.303-13.611-12.642c-0.397-0.605-0.725-1.106-0.958-1.437c-54.509-77.363-127.76-141.219-211.834-184.664
l-5.634-2.911l3.706-5.147c68.613-95.244,141.307-189.433,216.067-279.949c8.817-10.676,18.811-22.777,32.06-30.938
c11.47-7.064,24.397-10.597,36.896-14.016l1.396-0.381c93.704-25.661,185.218-60.813,272-104.482l4.918,9.773
c-87.43,43.995-179.626,79.41-274.03,105.261l-1.398,0.383c-8.646,2.363-17.507,4.787-25.62,8.384
c104.88,189.019,48.016,423.428,40.805,435.377c-6.518,10.806-23.756,30.421-32.297,38.656
c-5.041,4.858-9.965,10.021-14.725,15.014c-7.68,8.053-14.934,15.661-22.698,22.166
C297.504,715.328,296.167,716.448,294.177,716.448z"/>
<g>
<path fill="#151415" d="M789.253,295.152c-3.07,0-5.9-0.953-8.532-2.021c-13.313-5.414-25.205-13.953-36.076-22.374
C684.955,224.5,633.638,165.374,596.241,99.769l9.506-5.417c36.69,64.363,87.039,122.373,145.602,167.757
c11.848,9.18,22.076,16.244,33.492,20.885c1.777,0.721,3.587,1.366,4.901,1.184c1.355-0.189,3.122-1.432,4.541-2.431
C864.023,232.663,923.7,167.84,966.859,94.286l9.438,5.538c-43.947,74.891-104.71,140.893-175.719,190.87
c-2.258,1.59-5.35,3.766-9.324,4.32C790.576,295.109,789.908,295.152,789.253,295.152z"/>
</g>
<path fill="#151415" d="M1290.465,716.448c-1.989,0-3.327-1.12-3.955-1.646c-7.768-6.51-15.023-14.12-22.705-22.174
c-4.758-4.992-9.681-10.152-14.718-15.009c-8.537-8.227-25.774-27.843-32.299-38.656c-7.21-11.949-64.075-246.358,40.807-435.377
c-8.113-3.597-16.976-6.021-25.622-8.384l-1.398-0.383c-94.404-25.852-186.6-61.267-274.03-105.261l4.918-9.773
c86.782,43.669,178.296,78.82,272,104.482l1.396,0.381c12.499,3.419,25.426,6.952,36.896,14.015
c13.249,8.163,23.243,20.264,32.06,30.94c74.76,90.516,147.454,184.705,216.067,279.949l0,0c1.952,2.711,1.04,6.524-1.929,8.058v0
c-84.075,43.446-157.327,107.3-211.834,184.664c-0.233,0.331-0.561,0.832-0.958,1.437c-4.83,7.337-8.728,12.64-13.611,12.642
c-0.021,0-0.043,0-0.064,0C1291.129,716.418,1290.789,716.448,1290.465,716.448z"/>
<path id="mangaizq" fill="url(#img1)" d="M77.329,510.83c83.279,44.168,155.836,108.071,210.136,185.143
c0.282,0.397,0.677,0.995,1.156,1.722c2.05,3.116,3.658,5.364,4.805,6.719c6.58-5.795,12.872-12.392,19.487-19.331
c4.84-5.075,9.845-10.322,15.051-15.341c8.224-7.927,24.662-26.716,30.523-36.43c1.647-3.389,18.355-61.956,20.381-147.44
c1.731-73.071-7.595-180.133-61.466-277.119c-11.139,7.232-20.153,18.146-28.138,27.816
C215.995,325.279,144.715,417.525,77.329,510.83z"/>
<path id="mangader" fill="url(#img1)" d="M1267.241,208.753c-53.873,96.986-63.199,204.048-61.466,277.119
c2.025,85.484,18.732,144.051,20.47,147.6c5.775,9.561,22.214,28.349,30.434,36.27c5.205,5.018,10.206,10.263,15.044,15.336
c6.669,6.993,13.009,13.641,19.489,19.342c1.147-1.357,2.757-3.604,4.808-6.724c0.479-0.727,0.874-1.325,1.156-1.722
c54.298-77.07,126.857-140.975,210.136-185.143c-67.386-93.305-138.666-185.551-211.935-274.261
C1287.393,226.901,1278.38,215.986,1267.241,208.753z"/>
</g>
</svg>
<script type="text/javascript" src="colorpicker.js"></script>
</body>
</html>