-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (87 loc) · 4.25 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Color Luminosity Scale" />
<meta property="og:description" content="Calculator and visualization for luminosity of sRGB colors" />
<meta property="og:url" content="http://www.ajfarkas.com/luminosity" />
<meta property="og:site_name" content="AJ Farkas Web Dev" />
<meta property="og:image" content="images/oglogo.png" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="../favicon.ico" type="image/x-icon">
<title>Color Scale - AJ Farkas</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600|Merriweather' rel='stylesheet' type='text/css' />
<link href="color.css" rel="stylesheet" type="text/css" />
<body>
<a href="#main-content" class="skip-nav">Skip to Main Content</a>
<nav>
<a href="/" title="home"><p class="title">AJ Farkas<span class="subtitle">::front-end dev</span></p></a>
<div class="logos">
<a class="logo" href="https://github.com/ajfarkas/luminosity-calc" title="github repo" aria-label="view the code on github">
<svg id="github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.6 34">
<path d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8
c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4
c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7
c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4
c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5
C32.6,7.3,25.3,0,16.3,0z"/>
</svg>
</a>
<a class="logo" href="mailto:[email protected]" title="email me" aria-label="email me">
<svg id="envelope" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140">
<circle cx="70" cy="70" r="70"/>
<path transform="translate(20 35)" d="M5,5L95,5L95,65L5,65zM5,10L50,40L95,10M5,65L35,30M95,65L65,30"/>
</svg>
</a>
</div>
</nav>
<main id="main-content" tabindex="-1">
<h1>Visual Luminosity Calculator</h1>
<section class="input">
<h2>Choose Colors:</h2>
<p>Choose several colors to see their relative visual brightness</p>
<form id="color-input">
<fieldset class="primary">
<label>
<p class="label">Enter your color:</p>
<input type="text" name="color-text" id="color-text" placeholder="#2f2f2f" aria-controls="results-display list"></input>
<input type="color" name="color-picker" id="color-picker" value="#2f2f2f" tabindex="-1" aria-hidden="true"></input>
</label>
</fieldset>
<fieldset class="background">
<label>
<p class="label">Choose a background color:</p>
<input type='text' name="bg-text" id="bg-text" placeholder="rgb(255,255,255)"></input>
<input type="color" name="bg-picker" id="bg-picker" value="#ffffff" tabindex="-1" aria-hidden="true"></input>
</label>
</fieldset>
<!-- <button type="button" class="submit-colors">Add Colors</button> -->
</form>
</section>
<section class="results">
<h2>Results:</h2>
<p>on the luminosity scale, 0-100</p>
<button type="button" id="clear-results">clear</button>
<div id="results-display" aria-live="off">
<p class="result-start">0 Luminosity</p>
<p class="result-end">100 Luminosity</p>
<div class="result-gradient"></div>
</div>
</section>
<section class="log">
<h2>Color Log:</h2>
<p>hex color and luminosity in L*a*b* color space</p>
<button type="button" id="clear-list">clear</button>
<ul class="list" aria-live="polite"></ul>
</section>
</main>
</body>
<script src="js/modernizr.js"></script>
<script src="js/color.js" type="module"></script>
<style id="style-updates">
:root {--contrast-bg:white;}
</style>
</html>