-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (114 loc) · 8.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="repalette-style.css">
</head>
<body>
<header>
<h1 class="center">repalette</h1>
<h2 class="center">apply a new palette to pixel art</h2>
</header>
<main>
<section class="left-display flex vertical center">
<h2>Original</h2>
<div class="display">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NgAAIAAAUAAR4f7BQAAAAASUVORK5CYII=" class="initial" draggable="false" alt="blank">
</div>
</section>
<section class="center-display flex vertical center">
<div class="h2-spacer"></div>
<button type="button" class="repalette" title="repalette">
<!-- From https://www.svgrepo.com/svg/525418/magic-stick-3 -->
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path d="M3.84453 3.84453C2.71849 4.97056 2.71849 6.79623 3.84453 7.92226L5.43227 9.51C5.44419 9.49622 5.45669 9.48276 5.46978 9.46967L9.46978 5.46967C9.48284 5.45662 9.49625 5.44415 9.50999 5.43226L7.92226 3.84453C6.79623 2.71849 4.97056 2.71849 3.84453 3.84453Z"></path>
<path d="M10.5679 6.49012C10.556 6.50386 10.5435 6.51728 10.5304 6.53033L6.53044 10.5303C6.51735 10.5434 6.5039 10.5559 6.49011 10.5678L16.0777 20.1555C17.2038 21.2815 19.0294 21.2815 20.1555 20.1555C21.2815 19.0294 21.2815 17.2038 20.1555 16.0777L10.5679 6.49012Z"></path>
<path d="M16.1 2.30719C16.261 1.8976 16.8385 1.8976 16.9994 2.30719L17.4298 3.40247C17.479 3.52752 17.5776 3.62651 17.7022 3.67583L18.7934 4.1078C19.2015 4.26934 19.2015 4.849 18.7934 5.01054L17.7022 5.44252C17.5776 5.49184 17.479 5.59082 17.4298 5.71587L16.9995 6.81115C16.8385 7.22074 16.261 7.22074 16.1 6.81116L15.6697 5.71587C15.6205 5.59082 15.5219 5.49184 15.3973 5.44252L14.3061 5.01054C13.898 4.849 13.898 4.26934 14.3061 4.1078L15.3973 3.67583C15.5219 3.62651 15.6205 3.52752 15.6697 3.40247L16.1 2.30719Z"></path>
<path d="M19.9672 9.12945C20.1281 8.71987 20.7057 8.71987 20.8666 9.12945L21.0235 9.5288C21.0727 9.65385 21.1713 9.75284 21.2959 9.80215L21.6937 9.95965C22.1018 10.1212 22.1018 10.7009 21.6937 10.8624L21.2959 11.0199C21.1713 11.0692 21.0727 11.1682 21.0235 11.2932L20.8666 11.6926C20.7057 12.1022 20.1281 12.1022 19.9672 11.6926L19.8103 11.2932C19.7611 11.1682 19.6625 11.0692 19.5379 11.0199L19.14 10.8624C18.732 10.7009 18.732 10.1212 19.14 9.95965L19.5379 9.80215C19.6625 9.75284 19.7611 9.65385 19.8103 9.5288L19.9672 9.12945Z"></path>
<path d="M5.1332 15.3072C5.29414 14.8976 5.87167 14.8976 6.03261 15.3072L6.18953 15.7065C6.23867 15.8316 6.33729 15.9306 6.46188 15.9799L6.85975 16.1374C7.26783 16.2989 7.26783 16.8786 6.85975 17.0401L6.46188 17.1976C6.33729 17.2469 6.23867 17.3459 6.18953 17.471L6.03261 17.8703C5.87167 18.2799 5.29414 18.2799 5.1332 17.8703L4.97628 17.471C4.92714 17.3459 4.82852 17.2469 4.70393 17.1976L4.30606 17.0401C3.89798 16.8786 3.89798 16.2989 4.30606 16.1374L4.70393 15.9799C4.82852 15.9306 4.92714 15.8316 4.97628 15.7065L5.1332 15.3072Z"></path>
</g>
</svg>
</button>
<button type="button" class="export" title="export">
<svg fill="none" viewBox="0 0 24.00 24.00" xmlns="http://www.w3.org/2000/svg" stroke="none" stroke-width="1.2"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M7.293,13.707a1,1,0,1,1,1.414-1.414L11,14.586V3a1,1,0,0,1,2,0V14.586l2.293-2.293a1,1,0,0,1,1.414,1.414l-4,4a1,1,0,0,1-.325.216.986.986,0,0,1-.764,0,1,1,0,0,1-.325-.216ZM22,12a1,1,0,0,0-1,1v7H3V13a1,1,0,0,0-2,0v8a1,1,0,0,0,1,1H22a1,1,0,0,0,1-1V13A1,1,0,0,0,22,12Z"></path></g></svg>
</button>
<a id="download-single"></a>
<div class="flex vertical radios">
<div>
<input checked required type="radio" id="single" name="export-options">
<label for="single">Current image and palette</label><br>
</div>
<div>
<input type="radio" id="pAll" name="export-options">
<label for="pAll">Current image all palettes</label><br>
</div>
<div>
<input type="radio" id="imgAll-pAll" name="export-options">
<label for="imgAll-pAll">All images all palettes</label>
</div>
</div>
</section>
<section class="right-display flex vertical center">
<h2>Output</h2>
<div class="display">
<canvas id="output-canvas" class="initial"></canvas>
</div>
</section>
<section class="images list flex vertical center">
<h3><a href="https://opengameart.org/" target="_blank" rel="noopener">Images</a></h3>
<div class="divider"></div>
<div class="upload center">
<input type="file" name="" id="img-upload" accept="image/*" aria-label="Upload Image" multiple>
</div>
<div class="selectable image template">
<button type="button" class="close custom-btn">🞪</button>
<div class="flex tab img-name">
<sp class="name">My File</sp>
<div class="flex container">
<button class="expand custom-btn" title="expand"></button>
<button class="rename custom-btn" title="rename"></button>
</div>
</div>
<ol class="flex color-list"></ul>
</div>
</section>
<section class="palettes list flex vertical center">
<h3><a href="https://lospec.com/palette-list" target="_blank" rel="noopener">Palettes</a></h3>
<div class="divider"></div>
<div class="upload center">
<input type="file" id="palette-upload" name="palette-upload" accept="image/*" aria-label="Upload palette image" multiple>
</div>
<div class="selectable palette template">
<button type="button" class="close custom-btn">🞪</button>
<div class="flex tab palette-name">
<sp class="name"></sp>
<div class="flex container">
<button class="expand custom-btn" title="expand"></button>
<button class="rename custom-btn" title="rename"></button>
</div>
</div>
<ol class="flex color-list"></ul>
</div>
</section>
</main>
<div class= "info" hidden>
<h3>Instructions:</h3>
<p>To preserve a specific order for a source image's palette, embed it in the top left corner of the image before uploading.</p>
</div>
<footer class="center">Source Code and Instructions:
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 24 24">
<path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6 c0,0,1.4,0,2.8,1.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4 c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3 C22,6.1,16.9,1.4,10.9,2.1z"></path>
</svg>
<a href="https://github.com/cyphersept/repalette" target="_blank" rel="noopener">cyphersept</a>
</footer>
<script src="libs/Sortable.min.js"></script>
<script src="libs/FileSaver.min.js"></script>
<script src="libs/jszip.min.js"></script>
<script src="repalette.js"></script>
</body>
</html>