yoyle.city
added cheesecake's reference sheet (thanks puz)
public/reftek/fonts/mono.ttf
public/reftek/fonts/mono.ttf
This is a binary file and will not be displayed.
public/reftek/fonts/mono_b.ttf
public/reftek/fonts/mono_b.ttf
This is a binary file and will not be displayed.
public/reftek/fonts/sans.ttf
public/reftek/fonts/sans.ttf
This is a binary file and will not be displayed.
public/reftek/fonts/serif.ttf
public/reftek/fonts/serif.ttf
This is a binary file and will not be displayed.
public/reftek/images/cheesycake-back.png
public/reftek/images/cheesycake-back.png
This is a binary file and will not be displayed.
public/reftek/images/cheesycake-clothes.png
public/reftek/images/cheesycake-clothes.png
This is a binary file and will not be displayed.
public/reftek/images/cheesycake-gaypanties.png
public/reftek/images/cheesycake-gaypanties.png
This is a binary file and will not be displayed.
public/reftek/images/cheesycake.png
public/reftek/images/cheesycake.png
This is a binary file and will not be displayed.
+355
public/reftek/reftek-base.css
+355
public/reftek/reftek-base.css
···
1
+
:root {
2
+
/* Overall */
3
+
--margins: 10px;
4
+
--bg: white;
5
+
--primary: black;
6
+
--border: 1px;
7
+
--radius: 0px;
8
+
--font: "sans"; /* pick from sans, serif, or mono */
9
+
10
+
/* Sections */
11
+
--bg-trans: rgba(0,0,0,0.0);
12
+
--shadow-x: 0px;
13
+
--shadow-y: 0px;
14
+
--shadow-blur: 0px;
15
+
--shadow-color: rgba(0,0,0,0.2);
16
+
17
+
/* Section headers */
18
+
--header-bg: black;
19
+
--header-text: white;
20
+
21
+
/* Info */
22
+
--button-bg: black;
23
+
--button-text: white;
24
+
--button-hover-bg: white;
25
+
--button-hover-text: black;
26
+
}
27
+
28
+
@font-face {
29
+
font-family: "sans";
30
+
src: url("fonts/sans.ttf");
31
+
}
32
+
33
+
@font-face {
34
+
font-family: "serif";
35
+
src: url("fonts/serif.ttf");
36
+
}
37
+
38
+
@font-face {
39
+
font-family: "mono";
40
+
src: url("fonts/mono.ttf");
41
+
}
42
+
43
+
@font-face {
44
+
font-family: "mono";
45
+
font-weight: bold;
46
+
src: url("fonts/mono_b.ttf");
47
+
}
48
+
49
+
@media (orientation: portrait) {
50
+
div.main {
51
+
width: 100%;
52
+
justify-content: space-between;
53
+
box-sizing: border-box;
54
+
}
55
+
56
+
body {
57
+
background-color: var(--bg);
58
+
color: var(--primary);
59
+
box-sizing: border-box;
60
+
margin: 0;
61
+
padding: var(--margins);
62
+
height: 100%;
63
+
font-family: var(--font);
64
+
background-position: center;
65
+
background-repeat: no-repeat;
66
+
background-attachment: fixed;
67
+
border-radius: var(--radius);
68
+
}
69
+
section {
70
+
background-color: var(--bg-trans);
71
+
overflow: hidden;
72
+
margin-bottom: calc(var(--margins) * 2);
73
+
border: var(--border) solid var(--primary);
74
+
border-radius: var(--radius);
75
+
box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
76
+
}
77
+
.sans {
78
+
display: flex;
79
+
flex-direction: column;
80
+
}
81
+
82
+
button {
83
+
font-size: 16px;
84
+
}
85
+
.preview {
86
+
height: 25rem;
87
+
}
88
+
}
89
+
90
+
@media (orientation: landscape) {
91
+
div.main {
92
+
display: grid;
93
+
grid-template-columns: repeat(2, 5fr) 3.7fr;
94
+
grid-template-rows: 1fr;
95
+
grid-column-gap: var(--margins);
96
+
grid-row-gap: var(--margins);
97
+
width: 100%;
98
+
justify-content: space-between;
99
+
box-sizing: border-box;
100
+
}
101
+
102
+
body {
103
+
background-color: var(--bg);
104
+
color: var(--primary);
105
+
box-sizing: border-box;
106
+
margin: 0;
107
+
padding: var(--margins);
108
+
font-family: "mono";
109
+
background-image: url("images/logo.svg");
110
+
background-position: center;
111
+
background-repeat: no-repeat;
112
+
}
113
+
114
+
section {
115
+
background-color: var(--bg-trans);
116
+
display: flex;
117
+
flex-direction: column;
118
+
overflow: hidden;
119
+
border: var(--border) solid var(--primary);
120
+
border-radius: var(--radius);
121
+
height: calc(100vh - (var(--margins) * 3));
122
+
box-shadow: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-color);
123
+
}
124
+
125
+
section .data {
126
+
overflow: scroll;
127
+
}
128
+
129
+
}
130
+
131
+
.angles {
132
+
grid-area: 1 / 1 / 2 / 2;
133
+
}
134
+
135
+
.outfits {
136
+
grid-area: 1 / 2 / 2 / 3;
137
+
}
138
+
139
+
.sans {
140
+
grid-area: 1 / 3 / 2 / 4;
141
+
}
142
+
143
+
h1 {
144
+
background-color: var(--header-bg);
145
+
color: var(--header-text);
146
+
margin: 0;
147
+
padding: 10px;
148
+
font-size: 16px;
149
+
border-bottom: var(--border) solid;
150
+
font-family: var(--font);
151
+
text-align: center;
152
+
}
153
+
154
+
h2 {
155
+
text-align: center;
156
+
margin: 10px 0px;
157
+
158
+
}
159
+
160
+
h3 {
161
+
margin: 0;
162
+
text-align: center;
163
+
font-family: var(--font);
164
+
padding: 5px;
165
+
font-size: 20px;
166
+
letter-spacing: 2px;;
167
+
border-bottom: 1px solid;
168
+
text-transform: uppercase;
169
+
}
170
+
171
+
h5 {
172
+
font-family: var(--font);
173
+
margin: 0;
174
+
}
175
+
176
+
.tableSeparator {
177
+
margin: 0;
178
+
text-align: center;
179
+
font-family: "mono";
180
+
padding: 5px;
181
+
font-size: 12px;
182
+
border-bottom: 1px solid;
183
+
text-transform: uppercase;
184
+
letter-spacing: 3px;
185
+
}
186
+
187
+
#title {
188
+
display: flex;
189
+
justify-content: center;
190
+
191
+
}
192
+
193
+
ul {
194
+
margin: 0;
195
+
padding-left: 15px;
196
+
}
197
+
198
+
#title h2 {
199
+
width: 100%;
200
+
font-family: var(--font);
201
+
}
202
+
203
+
#title img {
204
+
padding: 10px;;
205
+
}
206
+
.selector {
207
+
display: flex;
208
+
width: 100%;
209
+
font-size: 18px;
210
+
padding: 20px;
211
+
color: inherit;
212
+
text-decoration: none;
213
+
justify-content: space-between;
214
+
box-sizing: border-box;
215
+
}
216
+
217
+
.preview {
218
+
flex: 1;
219
+
overflow: auto;
220
+
background-size: contain;
221
+
background-repeat: no-repeat;
222
+
background-position: center;
223
+
}
224
+
225
+
img.bg::before {
226
+
content: "";
227
+
position: absolute;
228
+
top: 0;
229
+
left: 0;
230
+
z-index: 10;
231
+
width: 100%;
232
+
height: 100%;
233
+
background-color: var(--primary);
234
+
}
235
+
236
+
.selector b {
237
+
font-family: var(--font);
238
+
}
239
+
240
+
.selector button {
241
+
display: block;
242
+
}
243
+
244
+
.selector button:hover {
245
+
transform: scale(1.1);
246
+
}
247
+
248
+
.selector button:active {
249
+
transform: scale(0.9);
250
+
}
251
+
252
+
table {
253
+
font-size: 14px;
254
+
width: 100%;
255
+
}
256
+
257
+
td {
258
+
border-bottom: 1px dotted;
259
+
font-family: var(--font);
260
+
}
261
+
262
+
th {
263
+
font-family: var(--font);
264
+
border-right: 1px solid;
265
+
border-bottom: 1px dotted;
266
+
text-align: right;
267
+
padding-right: 3px;
268
+
}
269
+
270
+
.rowfit {
271
+
width: 1%;
272
+
white-space: nowrap;
273
+
}
274
+
275
+
.hasTooltip {
276
+
border-bottom: 1px dashed white;
277
+
}
278
+
279
+
section.sans {
280
+
display: flex;
281
+
justify-content: initial !important;
282
+
}
283
+
284
+
.hex {
285
+
font-family: "mono";
286
+
letter-spacing: 1px;
287
+
}
288
+
289
+
.mono {
290
+
font-family: "mono";
291
+
font-size: 10px;
292
+
}
293
+
294
+
295
+
table tr td {
296
+
border-right: 1px dotted;
297
+
298
+
}
299
+
300
+
td button {
301
+
background-color: var(--button-bg);
302
+
color: var(--button-text);
303
+
border: 0;
304
+
font-family: "mono";
305
+
border-radius: var(--radius);
306
+
}
307
+
308
+
button:hover {
309
+
background-color: var(--button-hover-bg);
310
+
color: var(--button-hover-text);
311
+
}
312
+
313
+
button:active {
314
+
background-color: black;
315
+
color: white;
316
+
}
317
+
318
+
.selector button {
319
+
background-color: var(--primary);
320
+
color: var(--bg);
321
+
border: 0;
322
+
border-radius: var(--radius);
323
+
}
324
+
325
+
h6 {
326
+
margin: 2px;
327
+
}
328
+
h6 a {
329
+
padding-left: 5px;
330
+
font-family: var(--font);
331
+
font-weight: normal;
332
+
font-style: italic;
333
+
color: var(--primary);
334
+
}
335
+
336
+
h6 a:hover {
337
+
color: blue;
338
+
}
339
+
340
+
.toggle {
341
+
display: inline;
342
+
position: absolute;
343
+
top: 60px;
344
+
left: 20px;
345
+
}
346
+
347
+
.toggle form {
348
+
font-family: var(--font);
349
+
font-size: 10px;
350
+
}
351
+
352
+
.toggle form input {
353
+
width: 10px;
354
+
height: 10px;
355
+
}
+250
public/reftek/script.js
+250
public/reftek/script.js
···
1
+
let angleIndex = 0;
2
+
let angleToggleIndex = 0;
3
+
let outfitIndex = 0;
4
+
const titleArea = document.getElementById("title")
5
+
const dataSection = document.getElementById("dataSection")
6
+
const infoTable = document.getElementById("infoTable")
7
+
const colorTable = document.getElementById("colorTable")
8
+
const anglePic = document.getElementById("angleguy")
9
+
const angleForm = document.getElementById("angleToggles")
10
+
const outfitPic = document.getElementById("outfitguy")
11
+
const angleTxt = document.getElementById("anglesText")
12
+
const outfitTxt = document.getElementById("outfitsText")
13
+
const angleSel = document.getElementById("angleSelector")
14
+
const outfitSel = document.getElementById("outfitSelector")
15
+
const hideMyAss = document.getElementById("hidetext")
16
+
const titles = [
17
+
document.getElementById("anglesTitle"),
18
+
document.getElementById("outfitsTitle"),
19
+
document.getElementById("dataTitle"),
20
+
]
21
+
22
+
function preloadEverything() {
23
+
var images = [];
24
+
function preload() {
25
+
for (var i = 0; i < arguments.length; i++) {
26
+
images[i] = new Image();
27
+
images[i].src = preload.arguments[i];
28
+
}
29
+
}
30
+
for (let i = 0; i < angles.length; i++) {
31
+
preload(angles[i][1]);
32
+
for (let j = 1; j < angleToggles.length; j++) {
33
+
preload(`${(angles[i][1]).slice(0, -4)}_${angleToggles[j]}.png`);
34
+
}
35
+
}
36
+
for (let i = 0; i < outfits.length; i++) {
37
+
preload(outfits[i][1]);
38
+
}
39
+
}
40
+
41
+
function changeAngleToggle(val) {
42
+
angleToggleIndex = val;
43
+
updateImages();
44
+
}
45
+
function spawnInThings() {
46
+
updateImages();
47
+
for (let i = 0; i < 3; i++) {
48
+
console.log(titles[i]);
49
+
console.log(headers[i]);
50
+
if (headers[i] == "") {
51
+
titles[i].style.display = "none";
52
+
} else {
53
+
titles[i].innerText = headers[i];
54
+
}
55
+
}
56
+
if (angles.length == 1) {
57
+
document.getElementById("butt1").style.display = "none";
58
+
document.getElementById("butt2").style.display = "none";
59
+
angleSel.classList.add("single-item")
60
+
}
61
+
if (outfits.length == 1) {
62
+
document.getElementById("butt3").style.display = "none";
63
+
document.getElementById("butt4").style.display = "none";
64
+
outfitSel.classList.add("single-item")
65
+
}
66
+
for (let i = 0; i < (info.length); i++) {
67
+
if (info[i][1] == "h") {
68
+
const newRow = document.createElement("tr");
69
+
const newHeading = document.createElement("td");
70
+
newHeading.colSpan = 2;
71
+
newHeading.classList.add("tableSeparator")
72
+
const newHeadingContent = document.createTextNode(info[i][0]);
73
+
newHeading.appendChild(newHeadingContent);
74
+
newRow.appendChild(newHeading);
75
+
infoTable.appendChild(newRow);
76
+
} else if (info[i][1] == "l") {
77
+
const tr = document.createElement("tr");
78
+
const th = document.createElement("th");
79
+
th.innerText = info[i][0];
80
+
tr.appendChild(th);
81
+
const td = document.createElement("td");
82
+
const list = document.createElement("ul");
83
+
for (let j = 0; j < info[i][2].length; j++) {
84
+
const listItem = document.createElement("li");
85
+
listItem.innerText = info[i][2][j];
86
+
list.appendChild(listItem);
87
+
}
88
+
td.appendChild(list);
89
+
tr.appendChild(td);
90
+
infoTable.appendChild(tr);
91
+
} else if (info[i][1] == "n") {
92
+
const tr = document.createElement("tr");
93
+
const td = document.createElement("td");
94
+
td.innerText = info[i][0];
95
+
td.colSpan = 2;
96
+
tr.appendChild(td);
97
+
infoTable.appendChild(tr);
98
+
}
99
+
else {
100
+
const newInfoRow = document.createElement("tr");
101
+
const newInfoType = document.createElement("th");
102
+
const newInfoTypeContent = document.createTextNode(info[i][0]);
103
+
newInfoType.classList.add("rowfit");
104
+
newInfoType.appendChild(newInfoTypeContent);
105
+
const newInfoDesc = document.createElement("td");
106
+
const newInfoDescContent = document.createTextNode(info[i][1]);
107
+
newInfoDesc.appendChild(newInfoDescContent);
108
+
newInfoRow.appendChild(newInfoType);
109
+
newInfoRow.appendChild(newInfoDesc);
110
+
infoTable.appendChild(newInfoRow);
111
+
}
112
+
}
113
+
const createdUsingMessage = document.createElement("h6");
114
+
createdUsingMessage.innerHTML = "<a href='https://puzzylpiece.xyz/reftek/'>Created using Reftek (alpha II)</a>"
115
+
dataSection.appendChild(createdUsingMessage)
116
+
117
+
if (angleToggles.length != 1) {
118
+
for (let i = 0; i < (angleToggles.length); i++) {
119
+
const newToggle = document.createElement("input");
120
+
const newToggleLabel = document.createElement("label");
121
+
newToggle.setAttribute('type', 'radio');
122
+
newToggle.setAttribute('name', 'angle_toggles');
123
+
if (angleToggles[i] == "") {
124
+
newToggle.id = "normal";
125
+
} else {
126
+
newToggle.id = angleToggles[i];
127
+
}
128
+
newToggle.addEventListener('click', function () {
129
+
changeAngleToggle(i);
130
+
});
131
+
angleForm.appendChild(newToggle);
132
+
newToggleLabel.setAttribute('for', angleToggles[i])
133
+
if (angleToggles[i] == "") {
134
+
newToggleLabel.innerText = "none";
135
+
} else {
136
+
newToggleLabel.innerText = angleToggles[i];
137
+
}
138
+
angleForm.appendChild(newToggleLabel);
139
+
angleForm.appendChild(document.createElement("br"))
140
+
}
141
+
if (headers[3] == "") {
142
+
hideMyAss.style.display = "none";
143
+
} else {
144
+
hideMyAss.innerText = headers[3];
145
+
}
146
+
} else {
147
+
hideMyAss.style.display = "none";
148
+
}
149
+
for (let i = 0; i < (colors.length); i++) {
150
+
if (colors[i][1] == "h") {
151
+
const newRow = document.createElement("tr");
152
+
const newHeading = document.createElement("td");
153
+
newHeading.colSpan = 4;
154
+
newHeading.classList.add("tableSeparator")
155
+
const newHeadingContent = document.createTextNode(colors[i][0]);
156
+
newHeading.appendChild(newHeadingContent);
157
+
newRow.appendChild(newHeading);
158
+
colorTable.appendChild(newRow)
159
+
} else {
160
+
const newColorRow = document.createElement("tr");
161
+
const newColorPreview = document.createElement("td");
162
+
newColorPreview.style.backgroundColor = `#${colors[i][0]}`;
163
+
const newColorDesc = document.createElement("td");
164
+
const newColorDescContent = document.createTextNode(colors[i][1]);
165
+
newColorDesc.appendChild(newColorDescContent);
166
+
const newColorHex = document.createElement("td");
167
+
const newColorHexContent = document.createTextNode(colors[i][0]);
168
+
newColorHex.classList.add("hex");
169
+
newColorHex.appendChild(newColorHexContent);
170
+
const newColorCopy = document.createElement("td");
171
+
const newColorCopyButton = document.createElement("button");
172
+
newColorCopyButton.innerText = "COPY"
173
+
newColorCopyButton.addEventListener('click', function () {
174
+
copyColorToClipboard(i);
175
+
});
176
+
newColorCopy.appendChild(newColorCopyButton);
177
+
newColorRow.appendChild(newColorPreview);
178
+
newColorRow.appendChild(newColorDesc);
179
+
newColorRow.appendChild(newColorHex);
180
+
newColorRow.appendChild(newColorCopy);
181
+
colorTable.appendChild(newColorRow);
182
+
}
183
+
}
184
+
}
185
+
186
+
187
+
if (title[0] == "t") {
188
+
titleArea.innerHTML = `<h2>${title[1]}</h2>`;
189
+
} else if (title[0] == "i") {
190
+
titleArea.innerHTML = `<img src="${title[1]}" width="200">`;
191
+
}
192
+
preloadEverything();
193
+
spawnInThings();
194
+
195
+
function updateImages() {
196
+
preloadEverything();
197
+
if (angleToggleIndex == 0) {
198
+
anglePic.style.backgroundImage = `url(${angles[angleIndex][1]})`;
199
+
} else {
200
+
anglePic.style.backgroundImage = `url(${(angles[angleIndex][1]).slice(0, -4)}_${angleToggles[angleToggleIndex]}.png)`;
201
+
}
202
+
angleTxt.innerText = angles[angleIndex][0];
203
+
outfitPic.style.backgroundImage = `url(${outfits[outfitIndex][1]})`;
204
+
outfitTxt.innerText = outfits[outfitIndex][0];
205
+
}
206
+
207
+
208
+
function prevAngle() {
209
+
if (angleIndex == 0) {
210
+
angleIndex = (angles.length - 1);
211
+
} else {
212
+
angleIndex--;
213
+
}
214
+
anglePic.animate(keyframesLeft, options);
215
+
updateImages();
216
+
}
217
+
218
+
function nextAngle() {
219
+
if (!(angleIndex >= (angles.length - 1))) {
220
+
angleIndex++;
221
+
} else {
222
+
angleIndex = 0;
223
+
}
224
+
anglePic.animate(keyframesRight, options);
225
+
updateImages();
226
+
}
227
+
228
+
function prevOutfit() {
229
+
if (outfitIndex == 0) {
230
+
outfitIndex = (outfits.length - 1);
231
+
} else {
232
+
outfitIndex--;
233
+
}
234
+
outfitPic.animate(keyframesLeft, options);
235
+
updateImages();
236
+
}
237
+
238
+
function nextOutfit() {
239
+
if (!(outfitIndex >= (outfits.length - 1))) {
240
+
outfitIndex++;
241
+
} else {
242
+
outfitIndex = 0;
243
+
}
244
+
outfitPic.animate(keyframesRight, options);
245
+
updateImages();
246
+
}
247
+
248
+
function copyColorToClipboard(colorIndex) {
249
+
navigator.clipboard.writeText(colors[colorIndex][0]);
250
+
}
+83
public/reftek/settings.js
+83
public/reftek/settings.js
···
1
+
// HELLO! This is the file you are supposed to edit to play with the refsheet.
2
+
3
+
// TITLES
4
+
// If you don't want the headers to appear, just leave each one as "". The fourth header controls the toggle switch's title
5
+
const headers = [
6
+
"Angles",
7
+
"Outfits",
8
+
"Data",
9
+
"Hide"
10
+
]
11
+
12
+
// ADD ANGLES HERE.
13
+
// Display name first, file path second.
14
+
const angles = [
15
+
["Front", "images/cheesycake.png"],
16
+
["Back", "images/cheesycake-back.png"]
17
+
]
18
+
19
+
// ANGLE TOGGLES
20
+
// If there is only one element here it won't appear. To add the corresponding variants, upload images with "_[name of the toggle]" appended to their filename.
21
+
const angleToggles = [
22
+
""
23
+
]
24
+
25
+
// ADD OUTFITS HERE.
26
+
// Display name first, file path second.
27
+
const outfits = [
28
+
["Clothed", "images/cheesycake-clothes.png"],
29
+
["Naked", "images/cheesycake.png"],
30
+
["Underwear", "images/cheesycake-gaypanties.png"]
31
+
]
32
+
33
+
// ADD INFO HERE.
34
+
35
+
// TITLE
36
+
// To use a text title, put "t" as the first value and your desired title as the second.
37
+
// To use an image title, put "i" as the first value and the path to the image as the second.
38
+
// If you don't want to use a title, put the first value as "n".
39
+
// const title = ["i", "images/logo.svg"]
40
+
const title = ["t", "Cheesecake"]
41
+
42
+
// INFORMATION
43
+
// Type of info first, description second.
44
+
// For headings, Put the heading text as the first value and then put "h" as the second.
45
+
// For unordered lists, Put the heading text as the first value and then put "l" as the second. Then for a third value, make an array that contains each list item as a separate string.
46
+
// For notes without labels, put your note as the first value and then put "n" as the second.
47
+
const info = [
48
+
["Christopher Cobalt", "h"],
49
+
["Gender", "Non-Binary"],
50
+
["Interests", "l", [
51
+
"Y2K stuff", "Rock music"
52
+
]],
53
+
["He's in relationship with Menthol", "n"]
54
+
]
55
+
56
+
// ADD COLORS HERE
57
+
// HEX code first, use case second, and optionally, the outfit third.
58
+
// For headings, Put the heading text as the first value and then put "h" as the second.
59
+
const colors = [
60
+
["3bdcae", "Body"]
61
+
]
62
+
63
+
// ANIMATIONS
64
+
// This will be replaced with preset animations later but for now you can just modify this code.
65
+
66
+
const keyframesLeft = [
67
+
{ transform: 'translateX(10px)' },
68
+
{ transform: 'translateX(0px)' }
69
+
];
70
+
71
+
const keyframesRight = [
72
+
{ transform: 'translateX(-10px)' },
73
+
{ transform: 'translateX(0px)' }
74
+
];
75
+
76
+
const options = {
77
+
duration: 400,
78
+
easing: 'cubic-bezier(0.22, 1, 0.36, 1)',
79
+
fill: 'forwards'
80
+
};
81
+
82
+
83
+
+61
src/pages/reftek/cheesecake.astro
+61
src/pages/reftek/cheesecake.astro
···
1
+
---
2
+
import HeadTags from "../../components/HeadTags.astro";
3
+
---
4
+
5
+
<!DOCTYPE html>
6
+
<html lang="en">
7
+
<head>
8
+
<title>Cheesecake's reference sheet</title>
9
+
<HeadTags />
10
+
<link rel="stylesheet" type="text/css" href="../reftek/reftek-base.css" />
11
+
<link rel="preload" />
12
+
<style>
13
+
/* Temporary solution until the beta to keep updates simpler */
14
+
.single-item {
15
+
justify-content: center !important;
16
+
}
17
+
</style>
18
+
</head>
19
+
<body>
20
+
<div class="main">
21
+
<section class="angles">
22
+
<h1 id="anglesTitle"></h1>
23
+
<div class="preview" id="angleguy"></div>
24
+
<div id="angleSelector" class="selector">
25
+
<button id="butt1" onclick="prevAngle()">←</button>
26
+
<b id="anglesText"></b>
27
+
<button id="butt2" onclick="nextAngle()">→</button>
28
+
</div>
29
+
<div class="toggle">
30
+
<h5 id="hidetext">Hide</h5>
31
+
<form id="angleToggles"></form>
32
+
</div>
33
+
</section>
34
+
<section class="outfits">
35
+
<h1 id="outfitsTitle"></h1>
36
+
<div class="preview" id="outfitguy"></div>
37
+
<div id="outfitSelector" class="selector">
38
+
<button id="butt3" onclick="prevOutfit()">←</button>
39
+
<b id="outfitsText"></b>
40
+
<button id="butt4" onclick="nextOutfit()">→</button>
41
+
</div>
42
+
</section>
43
+
<section class="data" id="dataSection">
44
+
<h1 id="dataTitle"></h1>
45
+
<div id="title"></div>
46
+
<table id="infoTable"></table>
47
+
<h3>Colors</h3>
48
+
<table id="colorTable">
49
+
<thead>
50
+
<th class="rowfit">Color</th>
51
+
<th style="text-align: left;">Used on</th>
52
+
<th class="rowfit">Hex #</th>
53
+
<th class="rowfit"></th>
54
+
</thead>
55
+
</table>
56
+
</section>
57
+
</div>
58
+
</body>
59
+
<script src="../reftek/settings.js" is:inline></script>
60
+
<script src="../reftek/script.js" is:inline></script>
61
+
</html>