hex-rip/index.html at master · rileyskains/hex-rip · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta content="ie=edge" http-equiv="x-ua-compatible">
	<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
	<title>HexRip</title>
	<link href="css/styles.css" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link href="images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
	<link href="images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
	<link href="images/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
</head>
<body>
	<section class="hero-area" id="hero">
		<h1><span class="title-purple">Hex</span>Rip</h1>
		<h2>Hex Color Ripper</h2>
		<div id="radio-wrapper">
			<div class="fresh-input-wrapper">
				<input type="radio" id="fresh-input" name="input-type" onclick="displayFresh()" checked>
				<label for="fresh-input">Fresh Input</label>
			</div>
			<div class="previous-input-wrapper">
				<input type="radio" id="previous-input"  name="input-type"  onclick="displaySaved()">
				<label for="previous-input">Saved Colors</label>
			</div>
		</div>
		<textarea id="input" placeholder="https://example.com/your-file.css, .js, .json, etc. to see and interact with all the hex colors your input contains. Alternatively, just paste the text in here. If URL doesn't work, it isn't supported." autofocus="autofocus"></textarea>
		<div id="saved-palettes-container"></div>
		<div id="want-to-save">
			<p>Would you like to save these colors for later?</p>
				<button id="yes-save" onclick="saveColors()">Yes, please!</button>
				<button id="do-not-save" onclick="clearArea()">No, thank you.</button>
		</div>
		<div id="naming-prompt">
			<p>What would you like to name this set of colors?</p>
				<input type="text" id="name-input">
					<br>
				<button onclick="saveThem()" id="save-button">Save</button>
		</div>
		<button id="extract-button" onclick="extract()" type="button">Extract</button>
		<button id="clear-button" onclick="certaintyChecker()" type="button">Clear</button>
		<div id="are-you-sure-container">
			<div id="are-you-sure">
				<p>Are you sure you want to delete all of your saved palettes?</p>
				<br>
				<p>This action can't be undone.</p>
					<button id="im-sure" onclick="clearSaved()">Yes! Delete them all!</button>
					<button id="wait-stop" onclick="goBack()">No! Take me back!</button>
			</div>
		</div>
	</section>
	<div id="color-container"></div>
	<section class="footer-area">
		<div id="footer-content">
			<img alt="Information icon." class="information-icon" src="images/icon-information.svg">
			<p class="tip-text">Click one of the color tiles to copy the hex value to your clipboard.</p>
			<h1 id="footer-header">HexRip</h1>
			<p id="version">beta-1.1.2</p>
			<p id="please-contribute">Please feel free to contribute on GitHub and check out some of my other projects. Let's make the web better together!</p><a href="https://github.com/rileyskains/hex-rip" target="_blank"><img alt="GitHub logo." class="github-icon" src="images/github.svg"></a>
			<p id="website-link"><a href="https://rileyskains.com/">Riley Skains</a></p><a href="https://twitter.com/riley_skains" target="_blank"><img alt="Twitter logo" id="twitter-logo" src="images/twitter.svg"></a>
		</div>
	</section>
	<script src="js/purify.min.js"></script>
	<script src="js/tinycolor.js"></script>
	<script src="js/extract.js"></script>
	<script src="js/clipboard.js"></script>
	<script>
	   document.onload = document.getElementById('input').value = '';

	   let clip = new Clipboard('.color');

	   function getCORS(url, success) {
	       let xhr = new XMLHttpRequest();
	       if (!('withCredentials' in xhr)) xhr = new XDomainRequest();
	       xhr.open('GET', url);
	       xhr.onload = success;
	       xhr.send();
	       return xhr;
	   }
	</script>
</body>
</html>