-
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
160 lines (116 loc) · 5.96 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Color gradient designer</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="favicon.png" sizes="32x32">
<link rel="stylesheet" href="src/style.css">
<script src="src/util.js"></script>
<script src="src/gradient.js"></script>
<script src="src/codegenerators.js"></script>
<script src="src/index.js"></script>
<link rel="stylesheet" href="src/picker.css">
<script src="src/picker.js"></script>
<!-- Optional syntax highlighting using highlight.js (https://github.com/highlightjs) -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/base16/ros-pine-dawn.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/arduino.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/languages/qml.min.js"></script>
</head>
<body onload="onLoad();" onhashchange="onHashChanged();">
<header>
<h1 class="title">Color gradient designer</h1>
<div class="menu">
<a title="Favourites" href="gallery" onclick="window.location='gallery'+window.location.hash; return false" class="emoji">⭐️</a>
<div title="Copy permalink" onclick="copyLink();" class="emoji clickable">🔗️</div>
<div title="Undo" onclick="window.history.back();" class="emoji clickable">↩️</div>
<div title="Redo" onclick="window.history.forward();" class="emoji clickable">↪️</div>
<div title="About" onclick="aboutShow()" class="emoji">ℹ️</div>
</div>
</header>
<main tabindex="-1">
<div class="gradient">
<div class="gradient-background left"></div>
<div class="gradient-background" id="gradient-background"></div>
<div class="gradient-background right"></div>
<div class="bar" >
<div id="sliders"></div>
<div id="gradient" class="clickable" title="Click to add anchor" onclick="actionInsert(event);"></div>
<div class="picker" id="picker"></div>
</div>
<div class="control">
<div class="settings">
<div title="Show cyclic repeating gradient">
<label class="switch reactive">
<input type="checkbox" id="setting-cyclic" onchange="onHashChanged();"/>
<span class="slider round"></span>
</label>
<label class="switchlabel">Cyclic repeat</label>
</div>
<button class="button" title="Move nodes to be equally distributed" onclick="actionDistribute();">Distribute evenly</button>
<button class="button" title="Reverse node order" onclick="actionReverse();">Reverse</button>
<button class="button" title="Append mirrored version of this gradient" onclick="actionMirror();">Mirrored</button>
<button class="button" title="Subdivide gradient by adding nodes with color interpolated using the HLC color space" onclick="actionDivide(1, 'hlc_uv');">Subdivide using HLC</button>
<button class="button" title="Normalize colors to have equal lightness in HSL color space" onclick="actionNormalize('hsl', 2);">Normalize lightness</button>
<button class="button" title="Generate a random gradient" onclick="actionRandom();">Generate random</button>
</div>
<div class="code-tabs">
<div class="tab-bar">
<!-- tab buttons -->
<div id="tab-bar-box"></div>
<a title="Add new" href="https://github.com/eltos/gradient/issues/new/choose" class="tab-bar-button codestyle" style="text-decoration: none;">+</a>
</div>
<div class="codebox codestyle selected" title="Click to copy code to clipboard" onclick="copyCode();">
<div class="tab-body" id="tab-body-box">
<!-- tab contents -->
</div>
</div>
</div>
<div class="settings">
<div title="Gradient name for use in code, file and gallery">
<label for="gradient-name">Gradient name:</label>
<input type="text" placeholder="my_gradient" id="gradient-name" onchange="onNameChanged()" onkeyup="onNameChanged()"/>
</div>
<button onclick="copyCode()">Copy code fragment</button>
<button onclick="downloadCode()">Download as file (with usage example)</button>
</div>
</div>
</div>
<div id="about" class="popup-back" onclick="aboutDismiss()">
<div class="popup">
<div class="close" onclick="aboutDismiss()">×</div>
<div>
<h1>About</h1>
<p>A color gradient designer to help you create awesome gradients for your projects</p>
<ul>
<li>Add color nodes by clicking the bar</li>
<li>Adjust node positions via drag & drop or the input field (value in percent)</li>
<li>Select colors with the picker or input field</li>
<li>Copy the generated code or download it as file</li>
</ul>
Use <span class="emoji">⭐️</span> to access a personal gallery which allows you to store your favourite gradients locally in your browser.
Gradients can also be shared by the URL.
</div>
<div>
<p style="font-weight: bold">Did you know?</p>
<ul>
<li>The color input field accepts not only hex values (e.g. <code>#F80</code>, <code>FE5310</code> or <code>0x2f67a8</code>), but also RGB color triples like <code>255,128,0</code> or <code>0.1,0.5,1</code></li>
<li>Changes can be undone and redone with browser navigation or <span class="emoji">↩️</span> and <span class="emoji">↪️</span> </li>
<li>You can name a gradient with the field below the code output (e.g. for the gallery)</li>
</ul>
</div>
<div>
<h2>Find this project on GitHub</h2>
This open source project is available on GitHub:
<a href="https://github.com/eltos/gradient">github.com/eltos/gradient</a>
<p>
<a href="https://github.com/eltos/gradient"><img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/eltos/gradient?style=social"></a>
</p>
</div>
</div>
</div>
</main>
</body>
</html>