-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
191 lines (189 loc) · 10.6 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
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
<!--
Tier Away is a website that helps users create unique tier lists. No accounts, no hassle.
Copyright (C) 2024 Cassian Godsted
-->
<!DOCTYPE html>
<html lang="en">
<head>
<link class="dark-mode" id="theme-style" rel="stylesheet" href="./css/dark.css">
<link rel="stylesheet" href="./css/web.css">
<link href="css/mobile.css" rel="stylesheet" media="(max-device-width: 670px)">
<link href="css/desktop.css" rel="stylesheet" media="(min-device-width:671px)">
<link rel="shortcut icon" href="./favicon.webp" type="image/x-icon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="./lib/font-awesome/css/font-awesome.min.css">
<title>Tier Away</title>
</head>
<body class="main-text">
<header>
<h1>Tier Away</h1>
<div id="header-buttons">
<button title="Reset the Tier List" draggable="false" onclick="resetTierList()" class="header-button button" id="settings-button">
<i class="fa fa-warning" aria-hidden="true"></i>
Reset
</button>
<button title="Download, export, and share your tier list image and template." class="header-button button" id="export-button" onclick="openMenu('export')">
<i class="fa fa-download" aria-hidden="true"></i>
Download
</button>
<button title="View app settings and reference information." draggable="false" onclick="openMenu(`settings`)" class="header-button button" id="settings-button">
<i class="fa fa-cog" aria-hidden="true"></i>
Settings
</button>
<button title="See who made Tier Away!" draggable="false" onclick="openMenu(`about`)" class="header-button button" id="about-button">
<i class="fa fa-question" aria-hidden="true"></i>
About
</button>
</div>
</header>
<div id="desc">
<p>Tier Away is a simple, open source tier list creation tool. No accounts, no public data, no prep work, no hassle.</p>
<p>Have a tier list idea that's too niche, something you're creating just for yourself or a few friends? Tier Away is perfect.</p>
<p>Creating a tier list is simple! Just hit the Plus button, and upload away.</p>
</div>
<table ondragover="dropOverHandler(event)" ondrop="dropHandler(event)" id="tierlist"><thead><tr id="tablehead">
<th onfocusin="setFocus(1)" onfocusout="setFocus(0)" oninput="screenTitle()" id="list-header" class="header" title="This is the title of your Tier List." contenteditable="true" colspan="2">
Tier List
</th><th data-html2canvas-ignore id="plus-button" title="Click here (or press +) to add to the tier list." class="header" onclick="openMenu(`plus`)"><i class="fa fa-plus fa-2x"></i>
</th>
</tr></thead><tbody></tbody></table>
<div style="transition: opacity .3s; opacity: 0;" id="plus" class="hidden">
</div>
<div style="transition: opacity .3s; opacity: 0;" id="export" class="hidden">
</div>
<div style="transition: opacity .3s; opacity: 0;" id="element" class="hidden">
<h2 class="title-header">
<i class="fa fa-cog" aria-hidden="true"></i>
Element Settings
</h2>
<div style="display: flex">
<div id="preview">
</div>
<div style="display: flex; width: 100%;">
<input value="" oninput="changeText()" onfocusin="setFocus(1)" onfocusout="setFocus(0)" type="text" id="add-text-to-image" class="main-text button-border text-input">
<input oninput="changeTextColour()" type="color" class="button button-border" id="text-colour-picker">
</div>
</div>
</div>
<div style="transition: opacity .3s; opacity: 0;" id="settings" class="hidden">
<h2 class="title-header">
<i class="fa fa-cog" aria-hidden="true"></i>
Settings and Info
</h2>
<h3 class="left-header">Theme Settings</h3>
<div id="theme-buttons">
<button title="The best theme." onclick="changeSetting('theme-dark')" class="button menu-button theme-button">
<i id="dark-icon" class="fa fa-check" aria-hidden="true"></i>
Dark
</button>
<button title="Suprisingly, some people prefer it." onclick="changeSetting('theme-light')" class="button menu-button theme-button">
<i id="light-icon" class="fa fa-times" aria-hidden="true"></i>
Light
</button>
<button title="Oddly reminiscent of something, as if it was designed by someone else." onclick="changeSetting('theme-arrow')" class="button menu-button theme-button">
<i id="arrow-icon" class="fa fa-times" aria-hidden="true"></i>
Arrow
</button>
<button title="luke trenaman, but tier away" onclick="changeSetting('theme-luke')" class="button menu-button theme-button">
<i id="luke-icon" class="fa fa-times" aria-hidden="true"></i>
LT
</button>
<button title="hacker voice: i'm in" onclick="changeSetting('theme-terminal')" class="button menu-button theme-button">
<i id="terminal-icon" class="fa fa-times" aria-hidden="true"></i>
Terminal
</button>
<button title="An inelegant site, from a more simple age." onclick="changeSetting('theme-classic')" class="button menu-button theme-button">
<i id="classic-icon" class="fa fa-times" aria-hidden="true"></i>
Classic
</button>
</div>
<h3 class="left-header">Keyboard Navigation Reference</h3>
<div class="settings-grid">
<p>Esc</p>
<p>Close Popup Menu</p>
</div>
<div class="settings-grid">
<p>G</p>
<p>Open Settings Menu</p>
</div>
<div class="settings-grid">
<p>+</p>
<p>Open Plus Menu</p>
</div>
<div class="settings-grid">
<p>E</p>
<p>Open Export Menu</p>
</div>
<div class="settings-grid">
<p>I</p>
<p>Open Import Menu</p>
</div>
<div class="settings-grid">
<p>U</p>
<p>Open Upload Menu</p>
</div>
<div class="settings-grid">
<p>T</p>
<p>Open Text Menu</p>
</div>
<div class="settings-grid">
<p>H</p>
<p>Focus Header</p>
</div>
<h3 class="left-header">Beta Features</h3>
<div>
<button onclick="changeSetting('url')" id="url-images-toggle" class="button menu-button">
<i class="fa fa-check" aria-hidden="true"></i>
Enable URL Images
</button>
<p>Enable URL image upload. Warning! These images will not yet appear in exports. Use for fun/testing.</p>
</div>
<div>
<button onclick="changeSetting('animations')" id="animations-toggle" class="button menu-button">
<i class="fa fa-times" aria-hidden="true"></i>
Disable Animations
</button>
<p>Enable/disable animations. This applies to the fade in/out on popup openings.</p>
</div>
<div>
<button onclick="changeSetting('keybinds')" id="keybinds-toggle" class="button menu-button">
<i class="fa fa-times" aria-hidden="true"></i>
Disable Keybinds
</button>
<p>Enable/disable keybinds.</p>
</div>
<div>
<button onclick="changeSetting('elementsettings')" id="elementsettings-toggle" class="button menu-button">
<i class="fa fa-times" aria-hidden="true"></i>
Enable Element Settings
</button>
<p>Enable/disable the element settings menu, a WIP menu to add text and change out element images.</p>
</div>
</div>
<div style="transition: opacity .3s; opacity: 0;" id="about" class="hidden">
<h2 class="title-header">
<i class="fa fa-question" aria-hidden="true"></i>
About Tier Away
</h2>
<p id="copy-mobile">Tier Away was designed by <a class="main-text" href="https://cassian.cc">Cassian Godsted</a> © 2024, with help from <a class="main-text" href="https://luketrenaman.com">Luke Trenaman</a>.</p>
<p>Tier Away is licensed under the <a class="main-text" href="https://github.com/cassiancc/TierAway/blob/main/LICENSE.md">GNU General Public License v3.0.</a></p>
<a target="_blank" href="https://github.com/cassiancc/TierAway" id="github-mobile" class="fa fa-github fa-3x main-text github"></a>
</div>
<div id="padding"></div>
<div id="image-options">
<p id="upload-images-info">Uploaded images will appear here. Click the <i class="fa fa-plus " aria-hidden="true"></i>Plus to get started!</p>
</div>
<script src="script.js">
</script>
<script src="./lib/FileSaver.js"></script>
<script src="./lib/jszip.js"></script>
<script type="text/javascript" src="lib/html2canvas.js"></script>
<footer>
<p id="copy">Tier Away was designed by <a class="main-text" href="https://cassian.cc">Cassian Godsted</a> © 2024, with help from <a class="main-text" href="https://luketrenaman.com">Luke Trenaman</a>.<br> Tier Away is licensed under the <a class="main-text" href="https://github.com/cassiancc/TierAway/blob/main/LICENSE.md">GNU General Public License v3.0.</a></p>
<div>
<button id="change-theme-button" alt="Click to toggle between dark and light theme" class="fa fa-sun-o fa-2x main-text" onclick="changeSetting(`theme`)"></button>
<a target="_blank" href="https://github.com/cassiancc/TierAway" id="github" class="fa fa-github fa-3x main-text github" aria-hidden="true"></a>
</div>
</footer>
</body>
</html>