-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
196 lines (179 loc) · 10.5 KB
/
index.html
File metadata and controls
196 lines (179 loc) · 10.5 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-CN30ZXQHMQ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-CN30ZXQHMQ');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palettary - Color Primitives & Figma Thumbnail Generator</title>
<link rel="stylesheet" href="src/css/palettes.css">
<link rel="apple-touch-icon" sizes="180x180" href="src/assets/icons/apple-touch-icon.png">
<link rel="shortcut icon" type="image/png" href="src/assets/icons/favicon.png">
<!-- PrismJS for syntax highlighting -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
</head>
<body>
<a id="top"></a>
<header>
<div class="container">
<a href="https://datatimp.github.io/palettary"><img
src="src/assets/images/palettary-wordmark-logo-reversed.svg"></a>
<nav class="header-nav">
<div class="nav-menu">
<span class="nav-trigger">
<span class="menu-text">Menu</span>
<span class="hamburger-icon">
<span></span>
<span></span>
<span></span>
</span>
</span>
<div class="nav-overlay"></div>
<div class="nav-dropdown">
<div class="nav-logo-wrapper">
<img src="src/assets/images/palettary-logo-square.svg" alt="Palettary Logo"
class="nav-logo">
</div>
<a href="index.html">Color Primitives</a>
<a href="figthumb.html">Thumbnail Generator</a>
<a href="https://www.figma.com/community/file/1599213625577905854/handoff-toolset"
target="_blank">Handoff
Toolset<svg class="external-link-icon" aria-hidden="true" focusable="false"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path
d="M0 14.75V4.75C0 4.02065 0.289939 3.32139 0.805664 2.80566C1.32139 2.28994 2.02065 2 2.75 2H8.75C9.16421 2 9.5 2.33579 9.5 2.75C9.5 3.16421 9.16421 3.5 8.75 3.5H2.75C2.41848 3.5 2.10063 3.63179 1.86621 3.86621C1.63179 4.10063 1.5 4.41848 1.5 4.75V14.75C1.5 15.0815 1.63179 15.3994 1.86621 15.6338C2.10063 15.8682 2.41848 16 2.75 16H12.75C13.0815 16 13.3994 15.8682 13.6338 15.6338C13.8682 15.3994 14 15.0815 14 14.75V8.75C14 8.33579 14.3358 8 14.75 8C15.1642 8 15.5 8.33579 15.5 8.75V14.75C15.5 15.4793 15.2101 16.1786 14.6943 16.6943C14.1786 17.2101 13.4793 17.5 12.75 17.5H2.75C2.02065 17.5 1.32139 17.2101 0.805664 16.6943C0.289939 16.1786 0 15.4793 0 14.75ZM17.5 5.75C17.5 6.16421 17.1642 6.5 16.75 6.5C16.3358 6.5 16 6.16421 16 5.75V2.56055L8.28027 10.2803C7.98738 10.5732 7.51262 10.5732 7.21973 10.2803C6.92683 9.98738 6.92683 9.51262 7.21973 9.21973L14.9395 1.5H11.75C11.3358 1.5 11 1.16421 11 0.75C11 0.335786 11.3358 0 11.75 0H16.75C17.1642 0 17.5 0.335786 17.5 0.75V5.75Z" />
</svg></a>
<a href="about.html">About</a>
</div>
</div>
</nav>
</div>
</header>
<main class="container">
<section class="hero-wrapper">
<div class="hero-content">
<h1 class="hero-title">Master Your<br>Color Workflow</h1>
<p class="hero-subtitle">Curated color primitives and<br> Figma thumbnail generation tools.</p>
<div class="hero-actions">
<a href="#color-palettes" class="btn btn-primary">Explore Colors</a>
<a href="figthumb.html" class="btn btn-secondary">Create Thumbnails</a>
</div>
</div>
<div class="hero-image-wrapper">
<div class="hero-image"></div>
<!-- <img src="src/assets/images/hero-graphic.png" alt="Palettary Color Workflow" class="hero-image"> -->
</div>
</section>
<div id="color-palettes" class="page-title">Color Primitive Palettes</div>
<p class="subtitle">Ready-made color primitives to jump start your semantic token color selections in Figma</p>
<!-- Palette Selector -->
<section class="selector-section">
<div class="selector-wrapper">
<label for="palette-select">Choose a collection:</label>
<select id="palette-select" class="palette-dropdown" required>
<option value="">Select a palette...</option>
</select>
</div>
</section>
<!-- Selected Palette Display -->
<section id="palette-display" class="palette-display" style="display: none;">
<div class="palette-header">
<div class="palette-title-group">
<div class="palette-name-wrapper">
<h2 id="palette-name"></h2>
<button id="share-btn" class="share-btn" aria-label="Share Palette">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
<polyline points="16 6 12 2 8 6"></polyline>
<line x1="12" y1="2" x2="12" y2="15"></line>
</svg>
<span id="share-tooltip" class="share-tooltip">Copy Link</span>
</button>
</div>
<p id="palette-contributor" class="palette-contributor"></p>
</div>
<div class="export-buttons">
<button class="export-btn" data-format="json">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 11L4 7H6V3H10V7H12L8 11Z" fill="currentColor" />
<path d="M3 13H13V14H3V13Z" fill="currentColor" />
</svg>
Figma JSON
</button>
<button class="export-btn" data-format="css">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 11L4 7H6V3H10V7H12L8 11Z" fill="currentColor" />
<path d="M3 13H13V14H3V13Z" fill="currentColor" />
</svg>
CSS
</button>
<button class="export-btn" data-format="txt">
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 11L4 7H6V3H10V7H12L8 11Z" fill="currentColor" />
<path d="M3 13H13V14H3V13Z" fill="currentColor" />
</svg>
TXT
</button>
</div>
</div>
<p id="palette-description" class="palette-description"></p>
<div class="palette-tabs">
<button class="palette-tab active" data-tab="visual">Swatches</button>
<button class="palette-tab" data-tab="css">CSS Code</button>
</div>
<div id="color-swatches" class="color-swatches">
<!-- Color swatches will be dynamically inserted here -->
</div>
<div id="css-code-view" class="css-code-view" style="display: none;">
<pre><code id="css-code-content" class="language-css"></code></pre>
<div class="code-actions">
<button id="copy-css-btn" class="copy-code-btn">Copy CSS</button>
</div>
</div>
</section>
<!-- Palette Gallery -->
<section class="palette-gallery">
<h2 class="highlight-gold">Newest Palettes</h2>
<div id="palette-cards" class="palette-cards">
<!-- Palette cards will be dynamically inserted here -->
</div>
</section>
<footer>
<a href="#top" class="scroll-to-top"><img src="src/assets/images/palettary-logo-square.svg"></a>
<div class="divider"></div>
<div class="footer-cols">
<div class="footer-col">
<div class="footer-col-head">
CONNECT WITH ME
</div>
<a class="footer-col-item" href="https://datatimp.github.io">Portfolio</a>
<a class="footer-col-item" href="https://www.linkedin.com/in/timothypevey/">LinkedIn</a>
<a class="footer-col-item" href="https://www.github.com/datatimp">Github</a>
<br />
<a href="https://www.producthunt.com/products/palettary?utm_source=badge-follow&utm_medium=badge&utm_source=badge-palettary"
target="_blank"><img
src="https://api.producthunt.com/widgets/embed-image/v1/follow.svg?product_id=1149439&theme=neutral"
alt="Palettary - Ready-made color primitives & Figma thumbnail generator | Product Hunt"
style="width: 250px; height: 54px;" width="250" height="54" /></a>
</div>
</div>
<div class="divider"></div>
<div class="authorship-data">
<p>Made with ☕ for designers by <a href="https://datatimp.github.io">datatimp</a></p>
<small style="opacity: 40%;">© 2026</small>
</div>
</footer>
</main>
<script src="src/js/common.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
<script src="src/js/palettes.js"></script>
</body>
</html>