-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
66 lines (59 loc) · 2.68 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BGR555 Color Tool</title>
<script src="script/vue.min.js"></script>
<script id="devload" src="script/devload.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<noscript>
Looks like you have JS disabled. This tool needs javascript to function!
</noscript>
<div class='heading'>
<h1>BGR555 Color Tool</h1>
<p>Convert between Hex RGB and BGR555 format, suitable for SNES, GBC, and GBA!</p>
</div>
<div id="app" >
<div class='settings-row'>
<span class='settings-label'>Byte Order: </span>
<input type="radio" v-model="endian" value="little" id="little-endian"/>
<label for="little-endian">Little Endian</label>
<input type="radio" v-model="endian" value="big" id="big-endian" />
<label for="big-endian">Big Endian</label>
</div>
<div class='input-row'>
<input type='color' ref="picker" :value="'#' + hexColor" @input="updateColorFromPicker"/>
<input class='color-input' type="text" maxlength='6' v-model="hexColor" pattern="[0-9A-Fa-f]{6}" @input="colorChanged('hex')"/>
<div :class="[direction]"></div>
<input class='color-input' type="text" maxlength='4' v-model="bgrColor"pattern="[0-9A-Fa-f]{4}" @input="colorChanged('bgr')"/>
<input type='text' id='note-input' class='note-input' v-model="note" placeholder="Note" />
<span>
<button @click="saveColor">Save (s)</button>
<button @click="openPicker">Pick (p)</button>
<button @click="setRandomHex">Random (r)</button>
</span>
</div>
<div class='saved-colors'>
<div class='input-row' v-for="(color, i) in savedColors" :key="color.id">
<button class='remove-button' @click="removeColor(i)">X</button>
<div class='color-display' :style="{ backgroundColor: '#' + color.hexColor }"></div>
<input class='color-input' type="text" :value="color.hexColor" disabled='true' />
<div :class="[color.direction]"></div>
<input class='color-input' type="text" :value="endian === 'little' ? color.bgrColorLE : color.bgrColorBE" disabled='true' />
{{ color.note }}
</div>
<button v-if="savedColors.length > 0" @click="removeAllColors">Remove All</button>
</div>
</div>
<footer>
<a href="https://github.com/orangeglo/bgr555">view this project on github</a>
-
by orangeglo (orangeglo#6197 on Discord)
-
<a href="https://orangeglo.github.io/">more tools @ orangeglo.github.io</a>
</footer>
<script src="script/app.js"></script>
</body>
</html>