This repository has been archived by the owner on Aug 12, 2021. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
115 lines (98 loc) · 3.39 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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Search Console -->
<meta name="google-site-verification" content="ls7kuvIKSqVa_dcixqKvFwl393swvYMkHCkG-xtlCj0">
<title>@neos21/ccc : Colour Code Converter</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@neos21/neos-normalize@2.0.1/neos-normalize.min.css">
<link rel="icon" href="https://neos21.github.io/favicon.ico">
<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LP3ZQV2R3M"></script>
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-LP3ZQV2R3M');gtag('config','UA-106501-6');</script>
<!-- Google AdSense -->
<script data-ad-client="ca-pub-6475907504235292" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<style>
body {
max-width: 42rem;
margin: 0 auto;
padding: 0 1rem;
}
#demo {
display: flex;
justify-content: space-between;
}
#input,
#exec,
#output {
height: 1.8rem;
}
#input,
#output {
flex-grow: 2;
}
#exec {
flex-grow: 1;
margin: 0 1rem;
}
</style>
<script src="./main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('exec').addEventListener('click', () => {
try {
document.getElementById('output').value = ccc(document.getElementById('input').value);
}
catch(error) {
console.warn(error);
}
});
});
</script>
</head>
<body>
<h1>@neos21/ccc : Colour Code Converter</h1>
<p>
<a href="https://www.npmjs.com/package/@neos21/ccc"><img src="https://img.shields.io/npm/v/@neos21/ccc.svg" alt="NPM Version" title="NPM Version"></a>
<a href="https://github.com/Neos21/ccc/packages/327426"><img src="https://img.shields.io/github/package-json/v/neos21/ccc?label=github" alt="GPR Version" title="GPR Version"></a>
</p>
<h2>Demo</h2>
<p id="demo">
<input type="text" id="input" value="" placeholder="Input Colour Here">
<input type="button" id="exec" value="Convert">
<input type="text" id="output" value="" placeholder="Result" readonly>
</p>
<h2>CLI</h2>
<h3>Installation</h3>
<pre><code>$ npm install -g @neos21/ccc</code></pre>
<h3>How To Use</h3>
<pre><code># Colour Code
$ ccc 39c # -> 51,153,204
$ ccc ff8000 # -> 255,128,0
$ ccc '#007AFF' # -> 0,122,255
# RGB Code
$ ccc 0 128 255 # -> #0080ff
$ ccc 255,30,48 # -> #ff1e30</code></pre>
<h2>API</h2>
<h3>Installation</h3>
<pre><code>$ npm install --save @neos21/ccc</code></pre>
<h3>How To Use</h3>
<pre><code>const ccc = require('@neos21/ccc');
// Colour Code
ccc('39c'); // -> [ 51, 153, 204 ]
ccc('ff8000'); // -> [ 255, 128, 0 ]
ccc('#007AFF'); // -> [ 0, 122, 255 ]
// RGB Code
ccc('0, 128, 255'); // -> '#0080ff'
ccc([255, 30, 48]); // -> '#ff1e30'</code></pre>
<h2>Links</h2>
<ul>
<li><a href="https://neos21.net/">Neo's World</a></li>
<li><a href="https://github.com/Neos21/">GitHub - Neos21</a></li>
<li><a href="https://github.com/Neos21/ccc">GitHub - ccc</a></li>
<li><a href="https://neos21.github.io/ccc/">GitHub Pages - @neos21/ccc : Colour Code Converter</a></li>
<li><a href="https://www.npmjs.com/package/@neos21/ccc">npm - @neos21/ccc</a></li>
</ul>
</body>
</html>