forked from yoksel/url-encoder
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
139 lines (121 loc) · 4.61 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
<html>
<head>
<title>URL-encoder for SVG</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<header class="header">
<h1>URL-encoder for SVG</h1>
<ul class="langs">
<li class="langs__item">
<a class="langs__link langs__link--current">En</a>
</li>
<li class="langs__item">
<a class="langs__link" href="../url-encoder/ru">Рус</a>
</li>
</ul>
</header>
<main>
<div class="panel">
<div class="options">
External quotes:
<label class="options__label">
<input
type="radio"
value="single"
name="quotes"
class="options__input visuallyhidden"
>
<span class="options__text">single</span>
</label>
<span class="options__middle-word">/</span>
<label class="options__label">
<input
type="radio"
value="double"
name="quotes"
class="options__input visuallyhidden"
checked
>
<span class="options__text">double</span>
</label>
</div>
<dl class="about">
<dt class="expander">About tool</dt>
<dd class="expanded hidden">
<p>We can use SVG in CSS via data URI, but without encoding it works only in Webkit based browsers. If encode SVG using <code>encodeURIComponent()</code> it will work everywhere.</p>
<p>SVG must have attribute <strong>xmlns</strong> like this: <code>xmlns='http://www.w3.org/2000/svg'</code>. If it doesn't exist, it will be added automagically.</p>
<p>Encoded SVG can be used in <code>background</code> (<a href="http://codepen.io/collection/DyJRrY/">demos</a>) and <code>border-image</code> (<a href="http://codepen.io/yoksel/full/GjgYgj/">demo</a>).</p>
</dd>
</dl>
</div>
<div class="containers">
<div class="container container--left container container--init">
<h4>Insert your SVG:</h4>
<button class="button-example">Example</button>
<textarea
name="init"
id="init"
spellcheck="false"
></textarea>
</div>
<div class="container container--right container container--result">
<h4>Take encoded:</h4>
<button id="copy-result-button" title="Copy encoded results to clipboard" class="copy-button">Copy</button>
<textarea
name="result"
id="result"
spellcheck="false"
></textarea>
</div>
</div>
<div class="containers">
<div class="container container--left container container--result-css">
<h4>Ready for CSS:</h4>
<button id="copy-css-result-button" title="Copy CSS results to clipboard" class="copy-button">Copy</button>
<textarea
name="result-css"
id="result-css"
spellcheck="false"
></textarea>
</div>
<div class="container container--right container container--demo">
<h4>Preview:</h4>
<div class="contrast-buttons">Background:
<button
type="button"
class="contrast-button contrast-button--white"
data-color="white"
title="White">
<span class="visuallyhidden">White</span>
</button>
<button
type="button"
class="contrast-button contrast-button--silver"
data-color="silver"
title="Silver">
<span class="visuallyhidden">Silver</span>
</button>
<button
type="button"
class="contrast-button contrast-button--black"
data-color="black"
title="Black">
<span class="visuallyhidden">Black</span>
</button>
</div>
<div class="demo-wrapper">
<div id="demo" class="demo"></div>
</div>
</div>
</div>
</main>
<footer class="footer">
<a href="https://github.com/yoksel/url-encoder/">Project on GitHub</a>
<a href="https://twitter.com/yoksel_en">@yoksel_en</a>
</footer>
</div>
<script src="script.js"></script>
</body>
</html>