-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
139 lines (126 loc) · 4.22 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="i/favicon.svg" type="image/svg+xml" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;700&display=swap"
rel="stylesheet"
/>
<title>Strata Branding Tool</title>
</head>
<body>
<div class="content">
<h1>Interactive Strata Branding Tool</h1>
<div class="border">
<div>
<span>I want to use the</span>
<select id="brand">
<option value="strata">Strata</option>
<option value="strata-source">Strata Source</option>
<option value="powered-by-strata-source">Powered By Strata Source</option>
</select>
<select id="color">
<option value="color">colored</option>
<option value="mono">monochrome</option>
</select>
<select id="type">
<option value="logo">Logo</option>
<option value="icon">Icon</option>
</select>
<select id="background">
<option value="ondark">on a dark background</option>
<option value="onlight">on a light background</option>
<option value="onimage">on an image background</option>
</select>
</div>
<div>
<div class="preview">
<img
alt="Image"
id="preview"
class="previewImage"
/>
</div>
<div class="buttonsFlex">
<a id="dl-link" class="buttoncenter">
<img src="toolicons/link-variant.svg" alt="Copy Link Icon" class="buttonIcon" />Copy
link
</a>
<a id="dl-svg" class="buttoncenter">
<img src="toolicons/svg.svg" alt="SVG Icon" class="buttonIcon" />Download SVG
</a>
<a id="dl-ai" class="buttoncenter">
<img
src="toolicons/file-download.svg"
alt="Illustrator File Download"
class="buttonIcon"
/>Download AI
</a>
</div>
</div>
</div>
<div class="containerButton">
<a href="./strata-branding/tool.html/i/favicon.svg" class="buttoncenter">
<div style="display: block">
<img
src="toolicons/svg.svg"
alt="SVG Icon"
style="height: 13px; color: #ffffff; margin-right: 4px"
/>Download Responsive FavIcon
</div>
</a>
</div>
</div>
<script>
let dl_copy = document.querySelector('#dl-link');
let dl_svg = document.querySelector('#dl-svg');
let dl_ai = document.querySelector('#dl-ai');
let baseURL = location.href.replace('tool', '').replace('index.html', '');
async function copyURL(url) {
await navigator.clipboard.writeText(url);
dl_copy.innerText = 'Copied!';
setTimeout(() => (dl_copy.innerText = 'Copy link'), 500);
}
function updateURL() {
let brand = document.querySelector('#brand').value;
let color = document.querySelector('#color').value;
let type = document.querySelector('#type').value;
let background = document.querySelector('#background').value;
let path = `i/${brand}/${type}/${background.replace('onimage', 'ondark')}/${color}`;
let preview = document.querySelector('.preview');
let previewImage = preview.querySelector('img');
previewImage.src = './' + path + '.svg';
preview.classList.remove("light");
preview.classList.remove("dark");
preview.classList.remove("image");
switch(background) {
case "onlight":
preview.classList.add("light");
break;
case "ondark":
preview.classList.add("dark");
break;
case "onimage":
preview.classList.add("image");
break;
}
dl_copy.href = `javascript:copyURL("${baseURL + path}.svg")`;
dl_svg.href = `${baseURL + path}.svg`;
dl_ai.href = `${baseURL + path}.ai`;
dl_svg.download = `${brand}-${type}-${color}-${background}.svg`;
dl_ai.download = `${brand}-${type}-${color}-${background}.ai`;
}
document.querySelectorAll('select').forEach((select) => {
select.addEventListener('change', updateURL);
});
updateURL();
</script>
</body>
</html>