/
index.html
85 lines (85 loc) · 3.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Random Gradient Generator</title>
<meta name="description" content="A webpage for generating random gradient backgrounds." />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<a
target="_blank"
href="https://github.com/jemimaabu/random-gradient-generator"
class="github-corner"
aria-label="View source on GitHub"
><svg
width="80"
height="80"
viewBox="0 0 250 250"
style="position: absolute; top: 0; border: 0; right: 0;"
aria-hidden="true"
>
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
fill="currentColor"
style="transform-origin: 130px 106px;"
class="octo-arm"
></path>
<path
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
fill="currentColor"
class="octo-body"
></path></svg
></a>
<header>
<h1>Random Gradient Generator</h1>
<div id="instructions">
<details>
<summary>How To Use</summary>
<ul id="instructions-list">
<li>Click the 'Random Gradient' button to generate a new random gradient.</li>
<li>Click the 'Copy Gradient' button to copy the CSS property styling for the gradient.</li>
<li>
Click the 'Save Gradient' button to save the gradient to your browser (this saves to local storage so the
gradient can only be viewed on the browser it was saved on).
</li>
<li>
Hover on your saved gradient to view the CSS property and click the saved gradient to copy the styling.
</li>
</ul>
</details>
</div>
</header>
<main>
<section id="new-gradient">
<div id="gradient-background"></div>
<div id="gradient-display">
<p class="gradient-text">
<span class="gradient-text-selector">background</span>:
<span class="gradient-text-rule">linear-gradient</span>(
<select name="gradient-direction" id="gradient-direction" onchange="changeDirection()">
<option value="to right">to right</option>
<option value="to left">to left</option>
<option value="to top">to top</option>
<option value="to bottom">to bottom</option>
</select>
<span id="color-1-display"></span><span id="color-1">#fff</span>, <span id="color-2-display"></span
><span id="color-2">#000</span> )
</p>
</div>
<button id="random-gradient" onclick="randomGradient()">Random Gradient</button>
<button id="copy-gradient" onclick="copyGradient()">Copy Gradient</button>
<button id="save-gradient" onclick="saveGradient()">Save Gradient</button>
</section>
<section id="saved-gradients">
<h2>Saved Gradients:</h2>
<div id="gradients-wrapper"></div>
</section>
</main>
</body>
<script src="main.js"></script>
</html>