-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
44 lines (42 loc) · 2.72 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
<!doctype html>
<head>
<title>Share Links Generator</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1>Share Links Generator</h1>
<h2>Social media selection:</h2>
<ol id="sortable">
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label><input id="Facebook" type="checkbox" class="socialmedia-checkbox"></input> Facebook</label></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label><input id="Twitter" type="checkbox" class="socialmedia-checkbox"></input> Twitter</label></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label><input id="LinkedIn" type="checkbox" class="socialmedia-checkbox"></input> LinkedIn</label></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label><input id="Pinterest" type="checkbox" class="socialmedia-checkbox"></input> Pinterest</label></li>
<li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label><input id="CopyLink" type="checkbox" class="socialmedia-checkbox"></input> Copy Link</label></li>
</ol>
<div style="display: flex; flex-direction: row;">
<div style="min-width: 25%;">
<h2>Formatting:</h2>
<p>Background color: <input type="color" id="background-color-input" value="#000000"></input></p>
<p>No background: <input type="checkbox" id="no-background-input"></input></p>
<p>Icon color: <input type="color" id="icon-color-input" value="#ffffff"></input></p>
<p>Icon scale: <input type="number" id="scale-input" value="1"></input></p>
<p>Border radius (%): <input type="number" id="border-radius-input" value="50"></input></p>
<p>Padding within (px): <input type="number" id="padding-within-input" value="10"></input></p>
<p>Space between (px): <input type="number" id="space-between-input" value="2"></input></p>
<p>Translucent on hover: <input type="checkbox" id="hover-input"></input></p>
</div>
<div style="min-width: 25%;">
<h2>Preview:</h2>
<div id="preview"></div>
<h2>Embed:</h2>
<div id="embed" onclick="copyEmbed()"></div>
<script>function copyEmbed() {document.execCommand('copy'); alert('Embed widget copied to clipboard!')}</script>
</div>
</div>
</body>
<footer>
<script src="tool.js"></script>
</footer>