-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
150 lines (138 loc) · 11.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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,user-scalable=0">
<title>Toolpic</title>
<link rel="apple-touch-icon" sizes="180x180" href="ico/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="ico/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="ico/favicon-16x16.png">
<link rel="manifest" href="ico/site.webmanifest">
<link rel="mask-icon" href="ico/safari-pinned-tab.svg" color="#1D7441">
<link rel="shortcut icon" href="ico/favicon.ico">
<meta name="theme-color" content="#ffffff">
<meta name="robots" content="noindex">
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<link rel="stylesheet" href="css/master.css">
<script src="js/app.js" charset="utf-8" type="module"></script>
</head>
<body>
<div class="app">
<div class="menu-bar" v-bind:class="{ 'menu-open': menuOpen }">
<div class="bar-top">
<div class="info">
<img src="/data/resources/compass.svg" alt="Toolpic" class="emblem">
</div>
<div class="btns">
<div class="copyright-text">
<span>
<a href="https://github.com/MauriceConrad/Toolpic" target="_blank">GitHub</a>
</span>
<span>| © 2019 Maurice Conrad</span>
</div>
<div class="btn btn-export" v-on:click="exportGraphic">
<div class="icon">
<svg viewBox="0 -22 512 511" xmlns="http://www.w3.org/2000/svg">
<path d="m512 233.820312-212.777344-233.320312v139.203125h-45.238281c-140.273437 0-253.984375 113.710937-253.984375 253.984375v73.769531l20.09375-22.019531c68.316406-74.851562 164.980469-117.5 266.324219-117.5h12.804687v139.203125zm0 0"/>
</svg>
</div>
</div>
<div class="btn btn-open-menu" v-on:click="menuAction">
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56">
<path d="M8,40c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S12.411,40,8,40z"/>
<path d="M28,40c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S32.411,40,28,40z"/>
<path d="M48,40c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S52.411,40,48,40z"/>
<path d="M8,20c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S12.411,20,8,20z"/>
<path d="M28,20c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S32.411,20,28,20z"/>
<path d="M48,20c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S52.411,20,48,20z"/>
<path d="M8,0C3.589,0,0,3.589,0,8s3.589,8,8,8s8-3.589,8-8S12.411,0,8,0z"/>
<path d="M28,0c-4.411,0-8,3.589-8,8s3.589,8,8,8s8-3.589,8-8S32.411,0,28,0z"/>
<path d="M48,16c4.411,0,8-3.589,8-8s-3.589-8-8-8s-8,3.589-8,8S43.589,16,48,16z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="menu-select-template">
<ul>
<li v-for="template in templates" v-on:click="selectTemplate">
<div class="template-preview">
<img v-bind:src="template.preview" alt="template.name">
</div>
<span class="template-label">
{{ template.name }}
</span>
</li>
</ul>
</div>
</div>
<div class="main">
<div class="components">
<div class="settings">
<div class="setting">
<span class="setting-label">Format</span>
<select class="select-doc"></select>
</div>
</div>
<div class="components-list">
</div>
</div>
<div class="preview">
</div>
</div>
<div class="popup" v-bind:class="{ 'open': popupOpen }">
<div class="popup-inner">
<div class="popup-btns">
<div class="btn btn-svg" v-on:click="svgDownload">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58" >
<g style="fill: #fff;">
<path d="M51.5,39V13.978c0-0.766-0.092-1.333-0.55-1.792L39.313,0.55C38.964,0.201,38.48,0,37.985,0H8.963 C7.777,0,6.5,0.916,6.5,2.926V39H51.5z M37.5,3.391c0-0.458,0.553-0.687,0.877-0.363l10.095,10.095 C48.796,13.447,48.567,14,48.109,14H37.5V3.391z M12.5,17h6v2h6v-4h10v4h6v-2h6v6h-6v-2h-3.548c4.566,2.636,7.548,7.588,7.548,13 c0,0.552-0.447,1-1,1s-1-0.448-1-1c0-5.246-3.229-9.999-8-11.995V25h-10v-2.995c-4.771,1.997-8,6.75-8,11.995c0,0.552-0.447,1-1,1 s-1-0.448-1-1c0-5.412,2.982-10.364,7.548-13H18.5v2h-6V17z"/>
<path d="M6.5,41v15c0,1.009,1.22,2,2.463,2h40.074c1.243,0,2.463-0.991,2.463-2V41H6.5z M22.233,52.298 c-0.15,0.342-0.362,0.643-0.636,0.902s-0.61,0.467-1.012,0.622s-0.856,0.232-1.367,0.232c-0.219,0-0.444-0.012-0.677-0.034 s-0.467-0.062-0.704-0.116s-0.463-0.13-0.677-0.226s-0.398-0.212-0.554-0.349l0.287-1.176c0.128,0.073,0.289,0.144,0.485,0.212 s0.398,0.132,0.608,0.191s0.419,0.107,0.629,0.144s0.405,0.055,0.588,0.055c0.556,0,0.982-0.13,1.278-0.39 c0.296-0.26,0.444-0.645,0.444-1.155c0-0.31-0.104-0.574-0.314-0.793s-0.472-0.417-0.786-0.595s-0.654-0.355-1.019-0.533 s-0.706-0.388-1.025-0.629s-0.583-0.526-0.793-0.854s-0.314-0.738-0.314-1.23c0-0.446,0.082-0.843,0.246-1.189 s0.385-0.641,0.663-0.882s0.602-0.426,0.971-0.554s0.759-0.191,1.169-0.191c0.419,0,0.843,0.039,1.271,0.116 s0.774,0.203,1.039,0.376c-0.055,0.118-0.118,0.248-0.191,0.39s-0.142,0.273-0.205,0.396s-0.118,0.226-0.164,0.308 s-0.073,0.128-0.082,0.137c-0.055-0.027-0.116-0.063-0.185-0.109s-0.166-0.091-0.294-0.137s-0.296-0.077-0.506-0.096 s-0.479-0.014-0.807,0.014c-0.183,0.019-0.355,0.07-0.52,0.157s-0.31,0.193-0.438,0.321s-0.228,0.271-0.301,0.431 s-0.109,0.313-0.109,0.458c0,0.364,0.104,0.658,0.314,0.882s0.47,0.419,0.779,0.588s0.647,0.333,1.012,0.492 s0.704,0.354,1.019,0.581s0.576,0.513,0.786,0.854s0.314,0.781,0.314,1.319C22.459,51.603,22.384,51.956,22.233,52.298z M28.994,54.055h-2.133L23.73,43.924h1.873l2.338,8.695l2.475-8.695h1.859L28.994,54.055z M41.668,52.701 c-0.21,0.265-0.444,0.48-0.704,0.649s-0.533,0.308-0.82,0.417S39.561,53.954,39.255,54s-0.608,0.068-0.909,0.068 c-0.602,0-1.155-0.109-1.661-0.328s-0.948-0.542-1.326-0.971s-0.675-0.966-0.889-1.613s-0.321-1.395-0.321-2.242 s0.107-1.593,0.321-2.235s0.511-1.178,0.889-1.606s0.822-0.754,1.333-0.978s1.062-0.335,1.654-0.335 c0.547,0,1.058,0.091,1.531,0.273s0.897,0.456,1.271,0.82l-1.135,1.012c-0.219-0.265-0.47-0.456-0.752-0.574 s-0.574-0.178-0.875-0.178c-0.337,0-0.658,0.063-0.964,0.191s-0.579,0.344-0.82,0.649s-0.431,0.699-0.567,1.183 s-0.21,1.075-0.219,1.777c0.009,0.684,0.08,1.276,0.212,1.777s0.314,0.911,0.547,1.23s0.497,0.556,0.793,0.711 s0.608,0.232,0.937,0.232c0.101,0,0.234-0.007,0.403-0.021s0.337-0.036,0.506-0.068s0.33-0.075,0.485-0.13s0.269-0.132,0.342-0.232 v-2.488h-1.709v-1.121h3.336V52.701z"/>
</g>
</svg>
</div>
<div class="btn btn-download" v-on:click="download">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 58 58">
<g style="fill: #fff;">
<path d="M50.95,12.187L39.313,0.55C38.964,0.201,38.48,0,37.985,0H8.963C7.777,0,6.5,0.916,6.5,2.926V39h0.633l16.736-14.245 c0.397-0.337,0.986-0.314,1.355,0.055l4.743,4.743l9.795-10.727c0.181-0.198,0.434-0.315,0.703-0.325 c0.282-0.009,0.53,0.09,0.725,0.274l10,9.5l0.311,0.297V13.978C51.5,13.212,51.408,12.645,50.95,12.187z M16.5,23.638 c-3.071,0-5.569-2.498-5.569-5.569S13.429,12.5,16.5,12.5s5.569,2.498,5.569,5.569S19.571,23.638,16.5,23.638z M48.109,14H37.5 V3.391c0-0.458,0.553-0.687,0.877-0.363l10.095,10.095C48.796,13.447,48.567,14,48.109,14z"/>
<path d="M31.383,30.969l4.807,4.807c0.391,0.391,0.391,1.023,0,1.414s-1.023,0.391-1.414,0L24.462,26.876L10.218,39H51.5v-7.636 L40.551,20.928L31.383,30.969z"/>
<path d="M20.823,49.058c0.196-0.068,0.376-0.18,0.54-0.335s0.296-0.371,0.396-0.649c0.1-0.278,0.15-0.622,0.15-1.032 c0-0.164-0.023-0.354-0.068-0.567c-0.046-0.214-0.139-0.419-0.28-0.615c-0.142-0.196-0.34-0.36-0.595-0.492 c-0.255-0.132-0.593-0.198-1.012-0.198h-1.23v3.992h1.504C20.429,49.16,20.627,49.126,20.823,49.058z"/>
<path d="M16.5,14.5c-1.968,0-3.569,1.601-3.569,3.569s1.601,3.569,3.569,3.569s3.569-1.601,3.569-3.569S18.468,14.5,16.5,14.5z"/>
<path d="M7.85,41H6.5v1.08V43v13c0,1.009,1.22,2,2.463,2h40.074c1.243,0,2.463-0.991,2.463-2V41h-43H7.85z M35.302,46.679 c0.214-0.643,0.51-1.178,0.889-1.606c0.378-0.429,0.822-0.754,1.333-0.978c0.51-0.224,1.062-0.335,1.654-0.335 c0.547,0,1.057,0.091,1.531,0.273c0.474,0.183,0.897,0.456,1.271,0.82l-1.135,1.012c-0.219-0.265-0.47-0.456-0.752-0.574 c-0.283-0.118-0.574-0.178-0.875-0.178c-0.337,0-0.659,0.063-0.964,0.191c-0.306,0.128-0.579,0.344-0.82,0.649 c-0.242,0.306-0.431,0.699-0.567,1.183s-0.21,1.075-0.219,1.777c0.009,0.684,0.08,1.276,0.212,1.777 c0.132,0.501,0.314,0.911,0.547,1.23s0.497,0.556,0.793,0.711c0.296,0.155,0.608,0.232,0.937,0.232c0.1,0,0.234-0.007,0.403-0.021 c0.168-0.014,0.337-0.036,0.506-0.068c0.168-0.032,0.33-0.075,0.485-0.13c0.155-0.055,0.269-0.132,0.342-0.232v-2.488h-1.709 v-1.121H42.5v3.896c-0.21,0.265-0.444,0.48-0.704,0.649s-0.533,0.308-0.82,0.417S40.392,53.954,40.087,54 c-0.306,0.046-0.608,0.068-0.909,0.068c-0.602,0-1.155-0.109-1.661-0.328s-0.948-0.542-1.326-0.971 c-0.378-0.429-0.675-0.966-0.889-1.613c-0.214-0.647-0.321-1.395-0.321-2.242S35.087,47.321,35.302,46.679z M25.369,43.924h1.668 l3.951,6.945v-6.945h1.668V54h-1.668l-3.951-6.945V54h-1.668V43.924z M17.084,43.924h2.898c0.428,0,0.852,0.068,1.271,0.205 c0.419,0.137,0.795,0.342,1.128,0.615c0.333,0.273,0.602,0.604,0.807,0.991s0.308,0.822,0.308,1.306 c0,0.511-0.087,0.973-0.26,1.388c-0.173,0.415-0.415,0.764-0.725,1.046c-0.31,0.282-0.684,0.501-1.121,0.656 s-0.921,0.232-1.449,0.232h-1.217V54h-1.641V43.924z"/>
</g>
</svg>
</div>
<div class="btn btn-close-popup" v-on:click="popupOpen = false">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.976 51.976">
<path style="fill: #fff;" d="M44.373,7.603c-10.137-10.137-26.632-10.138-36.77,0c-10.138,10.138-10.137,26.632,0,36.77s26.632,10.138,36.77,0 C54.51,34.235,54.51,17.74,44.373,7.603z M36.241,36.241c-0.781,0.781-2.047,0.781-2.828,0l-7.425-7.425l-7.778,7.778 c-0.781,0.781-2.047,0.781-2.828,0c-0.781-0.781-0.781-2.047,0-2.828l7.778-7.778l-7.425-7.425c-0.781-0.781-0.781-2.048,0-2.828 c0.781-0.781,2.047-0.781,2.828,0l7.425,7.425l7.071-7.071c0.781-0.781,2.047-0.781,2.828,0c0.781,0.781,0.781,2.047,0,2.828 l-7.071,7.071l7.425,7.425C37.022,34.194,37.022,35.46,36.241,36.241z"/>
</svg>
</div>
</div>
<div class="image">
<img v-if="renderedImage" v-bind:src="renderedImage" alt="Rendered SharePic">
<div v-if="!renderedImage" class="spinner">
<div class="fff-spinner">
<div class="inner-circle">
<img src="data/resources/logo-new-spinner.svg" alt="#FFF">
</div>
</div>
<!--<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
</div>-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>