-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
122 lines (119 loc) · 6.66 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>JS Color Palette Generator | Based on Color Thief by @lokesh</title>
<meta name="description" content="A small vanilla javascript app to generate a color palette from an image." />
<meta name="robots" content="index, follow" />
<!-- Favicon -->
<link rel="shortcut icon" href="./public/images/favicon.png" type="image/png" />
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
<!-- Roboto Google Font CDN -->
<link rel="preconnect" href="//fonts.gstatic.com" />
<link href="//fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet" />
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" />
<!-- CSS -->
<link rel="stylesheet" href="public/css/animate.min.css" />
<link rel="stylesheet" href="public/css/style.min.css" />
<!-- GitHub Ribbon -->
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
</head>
<body class="body vh-100 position-relative">
<!-- GitHub Ribbon -->
<a class="github-fork-ribbon" href="https://github.com/Tes3awy/color-palette-generator" target="_blank"
data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<!-- Main -->
<main class="main" role="main">
<!-- Toast -->
<div class="toast bg-success fixed-top opacity-75 align-items-center" data-bs-animation="true"
data-bs-autohide="true" data-bs-delay="5000" role="alert" aria-live="polite" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
<p class="toast-text text-white mb-0"></p>
</div>
<button type="button" class="btn-close me-2 m-auto text-white" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<div class="container pt-4">
<!-- Header -->
<header class="header text-center mb-4">
<h1 class="text-secondary mb-0" role="heading">
Vanilla JS <span class="text-primary">Color Palette</span> Generator App
</h1>
<p class="small mb-0">Based on <a class="text-primary font-weight-bold"
href="//lokeshdhakar.com/projects/color-thief/" target="_blank"
rel="noopener noreferrer nofollow" title="Color Thief">Color
Thief</a> by <a class="text-primary" href="https://github.com/lokesh" target="_blank"
rel="noopener noreferrer nofollow" title="Lokesh Dhakar">@lokesh</a></p>
</header>
</div>
<!-- Container -->
<div class="container py-4">
<!-- Refresh Button -->
<div class="row">
<div class="col-12">
<div class="d-grid mb-3 justify-content-end">
<a role="button" id="refreshBtn" class="btn btn-outline-primary rounded-pill"
title="Refresh"><i class="fas fa-sync pe-2"></i> Refresh</a>
</div>
</div>
</div>
<div class="row">
<!-- Image Col -->
<div class="col-md-4 col-12 text-center">
<div class="position-relative" id="imageContainer">
<!-- Loading Spinner -->
<div class="spinner-container justify-content-center align-items-center">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<!-- Image from Unsplash -->
<img src="//picsum.photos/300.jpg?random=1"
class="mb-2 img-thumbnail shadow-sm w-100 h-100 rounded" id="image"
alt="Lorem Picsum Image" title="Lorem Picsum Image" crossorigin="anonymous" />
<!-- Generate Colors Button -->
<button class="btn text-white text-center rounded-circle position-absolute d-none"
id="generateBtn" data-bs-toggle="tooltip" data-placement="bottom"
title="Click to generate palette">
Get A <br /> Palette
</button>
</div>
<!-- Credits -->
<p class="small text-muted">
Credits:
<a href="//picsum.photos/" class="text-primary" target="_blank"
rel="noopener noreferrer nofollow" title="picsum.photos">Lorem Picsum (The Lorem Ipsum
for photos)</a>
</p>
</div>
<!-- Palette Col -->
<div class="col-md-8 col-12 text-center">
<div class="instruction mb-3">
<h2 class="text-secondary mb-0">— Palette —</h2>
<blockquote class="d-block small font-weight-bold text-info">
<i class="fas fa-clipboard"></i>
Click any color to copy
</blockquote>
</div>
<!-- Swatches -->
<section class="d-flex justify-center flex-row flex-wrap" id="swatches">
<!-- Populated Via JS -->
</section>
</div>
</div>
</div>
</main>
<!-- JS -->
<script src="//code.jquery.com/jquery-3.6.4.slim.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="public/js/color-thief.min.js"></script>
<script src="public/js/app.min.js"></script>
</body>
</html>