-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
63 lines (52 loc) · 3.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ShadeShift - Effortlessly lighten or darken your HEX colors with our intuitive color manipulation tool. Perfect for web developers and designers.">
<meta name="author" content="Jacksen Nillson">
<meta property="og:title" content="ShadeShift: The Color Manipulation Tool" />
<meta property="og:description" content="Easily lighten or darken HEX colors with ShadeShift. Ideal for developers and designers seeking the perfect color shades." />
<meta property="og:image" content="https://shadeshifttool.netlify.app/assets/images/ShadeShift-Social.png" />
<meta property="og:url" content="https://shadeshifttool.netlify.app/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="ShadeShift" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="ShadeShift: The Color Manipulation Tool">
<meta name="twitter:description" content="Discover the easiest way to adjust HEX color shades with ShadeShift, perfect for web development and design projects.">
<meta name="twitter:image" content="https://shadeshifttool.netlify.app/assets/images/ShadeShift-Social.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<title>ShadeShift - HEX Color Depth Adjuster</title>
</head>
<body class="flex">
<main class="main flex">
<h1 class="main-heading">ShadeShift - Color Depth Adjuster</h1>
<div class="flex color-tool-wrapper">
<label for="hex-input" class="label-hex-input">Color (Hex)</label>
<input type="text" id="hex-input" name="hex-input" maxLength="7" value='#ff01ff' />
<div class="toggle">
<p id="lightenText" class="toggle-text">Lighten</p>
<div id="toggleBtn" class="toggle-btn">
<div class="inner-circle">
</div>
</div>
<p id="darkenText" class="toggle-text unselected-toggle-text">Darken</p>
</div>
<label for="input--range-slider" id="slider-label">0 %</label>
<input type="range" id="input--range-slider" class="input--range-slider" name="input--range-slider" min="0" max="100" value="0" />
<h3 class="color-box-label">Input Color</h3>
<div class="color-box color-box--original" id="color-box--original"></div>
<h3 id="color-box--altered-label" class="color-box-label altered-color-label">Altered Color</h3>
<div class="flex color-box color-box--altered" id="color-box--altered"><p id="hex-copied-notification" class="hex-copied-notification">📋 HEX Code Copied 📋</p></div>
</div>
<h2 class="tool-description">Effortlessly adjust the brightness of any hue with ShadeShift. Just input your color's hex code, flip the toggle to lighten or darken, and slide to the precise percentage. Watch as your color transforms to the perfect shade.<br><br>Click or Tap the Altered Color preview window to copy the updated HEX code to your clipboard.</h2>
</main>
<footer>
<p>This tool was developed by <a class="portfolio-link" href="https://devbyjacksen.com/">devbyjacksen</a></p>
</footer>
<script src="./js/script.js"></script>
</body>
</html>