~cyborg/color-generator

ref: 595e3e8945bddab8d597fae60e590b1f9513a868 color-generator/index.html -rw-r--r-- 11.7 KiB
595e3e89cyborg update git links 4 months ago
                                                                                
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Color Generator is a simple tool to generate random color palettes easily in your browser. Lock colors, save palettes, download the palette as an image, or share with friends!" />
    <link rel="apple-touch-icon" sizes="57x57" href="./assets/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./assets/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./assets/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./assets/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./assets/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./assets/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="./assets/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./assets/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon/favicon-16x16.png">
    <link rel="manifest" href="./assets/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="./assets/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/app.css">
    <title>Color Generator</title>
</head>

<body onload="init()" class="custom-bg">

    <nav class="navbar navbar-expand-lg navbar-dark custom-bg fixed-top">
        <a class="navbar-brand" href="#">Color Generator</a>

        <ul class="navbar-nav flex-row mr-0 ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="https://github.com/christian-cleberg/color-generator" title="View Source Code"><i class="fas fa-code mx-2"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="saveImage()" title="Save as Image"><i class="far fa-image mx-2"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="modal" data-target="#editColorModal" title="Edit Color"><i class="fas fa-edit mx-2"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" data-toggle="modal" data-target="#savedPalettesModal" title="Save Palette"><i class="far fa-heart mx-2 text-danger"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="regenerate()" title="Regenerate Colours"><i class="fas fa-redo text-success mx-2"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#" onclick="switchTheme()" title="Switch Theme">
                    <i class="far fa-moon mx-2"></i>
                    <i class="fas fa-sun mx-2 d-none"></i>
                </a>
            </li>
        </ul>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <div class="color-column-labels text-white col-4 col-lg-2">
                <div class="color-rgb-label">RGB: </div>
                <div class="color-hex-label">HEX: </div>
                <div class="color-cmyk-label">CMYK: </div>
            </div>
            <div class="color-column col-4 col-lg-2" data-locked="false">
                <div class="color-column-toolbar text-center w-100">
                    <a href="#" class="color-column-lock fas fa-lock-open" title="Lock Color"></a>
                    <a href="#" class="color-column-regenerate fas fa-redo" title="Regenerate Color"></a>
                </div>
                <div class="color-value color-rgb" data-format="rgb" title="Copy RGB"></div>
                <div class="color-value color-hex" data-format="hex" title="Copy HEX"></div>
                <div class="color-value color-cmyk" data-format="cmyk" title="Copy CMYK"></div>
            </div>
            <div class="color-column col-4 col-lg-2" data-locked="false">
                <div class="color-column-toolbar text-center w-100">
                    <a href="#" class="color-column-lock fas fa-lock-open" title="Lock Color"></a>
                    <a href="#" class="color-column-regenerate fas fa-redo" title="Regenerate Color"></a>
                </div>
                <div class="color-value color-rgb" data-format="rgb" title="Copy RGB"></div>
                <div class="color-value color-hex" data-format="hex" title="Copy HEX"></div>
                <div class="color-value color-cmyk" data-format="cmyk" title="Copy CMYK"></div>
            </div>
            <div class="color-column col-4 col-lg-2" data-locked="false">
                <div class="color-column-toolbar text-center w-100">
                    <a href="#" class="color-column-lock fas fa-lock-open" title="Lock Color"></a>
                    <a href="#" class="color-column-regenerate fas fa-redo" title="Regenerate Color"></a>
                </div>
                <div class="color-value color-rgb" data-format="rgb" title="Copy RGB"></div>
                <div class="color-value color-hex" data-format="hex" title="Copy HEX"></div>
                <div class="color-value color-cmyk" data-format="cmyk" title="Copy CMYK"></div>
            </div>
            <div class="color-column col-4 col-lg-2" data-locked="false">
                <div class="color-column-toolbar text-center w-100">
                    <a href="#" class="color-column-lock fas fa-lock-open" title="Lock Color"></a>
                    <a href="#" class="color-column-regenerate fas fa-redo" title="Regenerate Color"></a>
                </div>
                <div class="color-value color-rgb" data-format="rgb" title="Copy RGB"></div>
                <div class="color-value color-hex" data-format="hex" title="Copy HEX"></div>
                <div class="color-value color-cmyk" data-format="cmyk" title="Copy CMYK"></div>
            </div>
            <div class="color-column col-4 col-lg-2" data-locked="false">
                <div class="color-column-toolbar text-center w-100">
                    <a href="#" class="color-column-lock fas fa-lock-open" title="Lock Color"></a>
                    <a href="#" class="color-column-regenerate fas fa-redo" title="Regenerate Color"></a>
                </div>
                <div class="color-value color-rgb" data-format="rgb" title="Copy RGB"></div>
                <div class="color-value color-hex" data-format="hex" title="Copy HEX"></div>
                <div class="color-value color-cmyk" data-format="cmyk" title="Copy CMYK"></div>
            </div>
        </div>
    </div>

    <!-- Color Editing Modal -->
    <div class="modal fade" id="editColorModal" tabindex="-1" role="dialog" aria-labelledby="editColorModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editColorModalTitle">Add RGB Color</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="inputColor">New Color</label>
                        <input type="text" class="form-control" id="inputColor" aria-describedby="inputHelp" placeholder="rgb(15,200,60)" />
                        <small id="inputHelp" class="form-text">You must input a valid RGB color value.</small>
                    </div>
                    <div class="form-group">
                        <label for="inputColumn">Column to Change</label>
                        <select class="form-control" id="inputColumn">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" id="submitNewColor">Save changes</button>
                </div>
            </div>
        </div>
    </div><!-- ./modal -->

    <!-- Save Palettes Modal -->
    <div class="modal fade" id="savedPalettesModal" tabindex="-1" role="dialog" aria-labelledby="savedPalettesModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="savedPalettesModalTitle">Save Your Palettes</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="col-md-9">
                            <input type="text" class="form-control" id="inputPaletteName" placeholder="A Unique Palette Name" />
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-success w-100" onclick="savePalette()">Save</button>
                        </div>
                    </div><!-- ./form-row -->
                    <hr>
                    <div class="my-4" id="savedPalettesBody">
                        <p class="lead text-center">Saved Palettes</p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" onclick="deleteAllPalettes()">Delete Palettes</button>
                </div>
            </div>
        </div>
    </div><!-- ./modal -->

    <!-- Save Image Modal -->
    <div class="modal fade" id="saveImageModal" tabindex="-1" role="dialog" aria-labelledby="saveImageModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveImageModalTitle">Palette Image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success" role="alert">
                        <h6 class="modal-subtitle m-0"><strong>Pro-tip:</strong> Right click to save your image.</h6>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- ./modal -->

    <!-- JavaScript -->
    <script src="./assets/js/jquery-3.5.1.min.js"></script>
    <script src="./assets/js/bootstrap.bundle.min.js"></script>
    <script src="./assets/js/html2canvas.min.js"></script>
    <script src="./assets/js/app.js"></script>
</body>

</html>