-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
214 lines (214 loc) · 13.8 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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="All sorts of shenanigans possibly helpful for AniList AWC Challenges">
<meta name="google" content="nositelinkssearchbox">
<meta property="og:site_name" content="AniTools">
<meta property="og:title" content="AniTools" data-vue-meta="true">
<meta property="og:description" content="All sorts of shenanigans possibly helpful for AniList AWC Challenges">
<meta property="og:type" content="website">
<meta property="og:url" content="%VITE_CANONICAL_URL%">
<meta property="og:image" content="og-image.jpg">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<link rel="canonical" href="%VITE_CANONICAL_URL%" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#333333">
<title>AniTools</title>
<script type="application/ld+json">
{
"@context" : "https://schema.org",
"@type" : "WebSite",
"name" : "AniTools",
"url" : "%VITE_CANONICAL_URL%"
}
</script>
<link rel="stylesheet" href="node_modules/halfmoon/css/halfmoon-variables.css">
<link rel="stylesheet" href="assets/css/halfmoon.overrides.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/brands.css">
<link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/solid.css">
<link rel="stylesheet" href="node_modules/datatables.net-dt/css/dataTables.dataTables.css">
<link rel="stylesheet" href="assets/css/datatables.override.css">
<link rel="stylesheet" href="node_modules/nouislider/dist/nouislider.min.css">
<link rel="stylesheet" href="assets/css/nouislider.override.css">
<link rel="stylesheet" href="node_modules/@yaireo/tagify/dist/tagify.css">
<link rel="stylesheet" href="assets/css/tagify.override.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body data-set-preferred-mode-onload="true">
<!-- Help Modal -->
<div class="modal" id="info-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 50em;">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title">Info</h5>
<div>To get started with the BetterList tool, enter your <a href="https://anilist.co/">AniList</a> username in the respective field and press the load button</div>
<h6>Things you might not know:</h6>
<ul>
<li>You can sort columns by clicking on their titles. If you want to sort by multiple columns, hold Shift while clicking on the column titles.
<br><img class="img-fluid" src="assets/img/sort.webp" alt="Image showing how to make the table sort by a column">
</li>
<li>You can change the column order by dragging them around using the column title as handle
<br><img class="img-fluid" src="assets/img/reorder.webp" alt="Image showing how to change the order of columns in the table">
</li>
<li>You can change filters to "exclude" mode by clicking on tags (turning them red)
<br><img class="img-fluid" src="assets/img/exclude.webp" alt="Image showing how to make the filters exclude things">
</li>
<li>You can use "*" in the Airing Start and Airing Finish filters to search for media that started airing in specific years, months or days
</li>
</ul>
</div>
</div>
</div>
<!-- Changelog Modal -->
<div class="modal" id="changelog-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 50em;">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<div id="changelog-content"></div>
</div>
</div>
</div>
<!-- Activity Modal -->
<div class="modal" id="activity-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 35rem;">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title">Activities for <a id="activity-media-title"></a></h5>
<table id="activities" class="table table-striped" style="width: 100%"></table>
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal" id="settings-modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width: 100rem;">
<a href="#" class="close" role="button" aria-label="Close">
<span aria-hidden="true">×</span>
</a>
<h5 class="modal-title">Settings</h5>
<div class="card">
<h2 class="card-title">Columns</h2>
<div id="column-toggles"></div>
</div>
<div class="d-flex flex-wrap" style="gap: 1rem;">
<button type="button" class="btn" id="fat-free-toggle" title="Makes shit a tad bit smaller">Fat Free Mode</button>
<button type="button" class="btn" id="four-k-halfsize-toggle" title="In case you want to be able to read things while having this opened on half of a 4k screen">Help I can't read shit</button>
<button type="button" class="btn" id="use-tag-groups" title="Enable/Disable the grouping of tags in the dropdown">Show tag categories in dropdown</button>
<button type="button" class="btn" id="use-embeds-for-code-copy" title="By default the 'Copy Code' button uses the [Media_Title](link) format. Enabling this will turn it into just the link so AL turns it into an embed.">Use embeds for 'Copy Code' button</button>
<button type="button" class="btn" id="show-covers-on-title-hover" title="">Show covers while hovering over titles</button>
<a class="btn" target="_blank" rel="noopener" href="%VITE_GITHUB_REPO%">Report issues/feature requests on <i class="fab fa-github"></i></a>
<a class="btn" id="show-changelog" title="Show the Changelog" href="#changelog-modal">Show changelog</a>
<a id="al-login-btn" class="btn d-inline-flex align-items-center" rel="noopener" href="https://anilist.co/api/v2/oauth/authorize?client_id=%VITE_ANILIST_CLIENT_ID%&response_type=token">Login with
<img alt="AniList Icon" class="pl-5" style="height: 50%;" src="assets/al-icon.svg">
</a>
<button id="al-logout-btn" class="btn btn-primary d-none align-items-center" rel="noopener">Logout of
<img alt="AniList Icon" class="pl-5" style="height: 50%;" src="assets/al-icon.svg">
</button>
</div>
<div class="form-row" style="gap: 1rem;">
<div class="w-200">
<label for="site-theme">Theme: </label>
<select id="site-theme" class="form-control">
<option value="">Default</option>
<option value="gruvbox">gruvbox</option>
<option value="anilist">AniList</option>
</select>
</div>
<div class="w-200">
<label for="sidebar-position">Sidebar position: </label>
<select id="sidebar-position" class="form-control">
<option value="left">Left</option>
<option value="right">Right</option>
</select>
</div>
</div>
<div class="text-right">
<a href="#" class="btn mr-5" role="button">Close</a>
</div>
</div>
</div>
</div>
<!-- Page wrapper -->
<div class="page-wrapper with-navbar with-sidebar">
<!-- Navbar (immediate child of the page wrapper) -->
<nav class="navbar">
<div class="navbar-content">
<button id="toggle-sidebar-btn" class="btn btn-action" type="button">
<i class="fa fa-bars" aria-hidden="true"></i>
</button>
</div>
<!-- Navbar brand -->
<a href="#" class="navbar-brand d-flex">
<svg style="height: var(--navbar-brand-image-height);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 505.2 412.8" xmlns:v="https://vecta.io/nano">
<path d="M416.74.1c65.12 0 88.47 45.69 88.47 80.63-17.84-26.35-78.19-27.41-88.47 6.49h-14.81v107.84h-38.27V87.22h-16.4v-6.49c0-21.3-27.03-21.19-27.03 0h-22.11c-9.68 0-13.75-7.03-13.75-16.02V13.53C284.38 4.12 289.17.1 298.12.1h22.11c.08 20.23 27.11 20.6 27.11 0h69.4z" fill="#cacaca"/>
<path d="M416.74 195.06v183a1 1 0 0 1-69.48 0v-76.32c17.19-15.52 20.2-61.61 0-82.64v-24.04h69.48z" fill="#e1ae3d"/>
<path id="logo-letter" d="M131.6 0l47.2 164.4L110 412.8H0L131.6 0zm120 339.6H151.4l25.2-92.4h48L153.8 0h96.8L382 412.8H272l-20.4-73.2z" fill="#fff"/>
</svg>
AniTools</a>
<!-- Navbar nav -->
<form class="navbar-content form-inline d-none d-xl-flex">
<button class="dark-mode-toggler btn btn-action" type="button" aria-label="Toggle dark mode">
<i class="fa" aria-hidden="true"></i>
</button>
</form>
<form id="navsidebar-nav" class="navbar-content form-inline d-none d-sm-flex ml-auto">
<select id="tool-dropdown" class="form-control"></select>
<select class="media-type form-control">
<option value="ANIME">Anime</option>
<option value="MANGA">Manga</option>
<option value="CHARACTER">Character</option>
<option value="STAFF">Staff</option>
</select>
<input id="list" data-logic="AND" class="form-control d-none">
<input id="al-user" type="text" class="form-control" placeholder="AL Username" required="required">
<button id="load" class="btn btn-primary" type="button">Load</button>
<a class="btn btn-primary d-none d-xl-inline-flex align-items-center" href="#settings-modal">Settings</a>
<a class="btn btn-action d-none d-xl-inline-flex align-items-center justify-content-center" href="#info-modal">
<i class="fa fa-info-circle"></i>
</a>
</form>
</nav>
<div class="sidebar">
<div class="sidebar-menu">
<div class="sidebar-content">
<div id="navsidebar-sidebar" class="d-flex flex-wrap" style="gap: 0.5rem"></div>
<div class="mt-5 mb-5 d-flex d-xl-none" style="justify-content: space-between;">
<a class="btn btn-primary" href="#settings-modal">Settings</a>
<a class="btn btn-action" href="#info-modal">
<i class="fa fa-info-circle"></i>
</a>
<button class="dark-mode-toggler btn btn-action" type="button" aria-label="Toggle dark mode">
<i class="fa" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Content wrapper -->
<div class="content-wrapper">
<div class="container-fluid">
<div id="alert-container" class="content"></div>
<div id="page-content" class="content">
</div>
</div>
</div>
</div>
<script type="module" src="src/AniTools.ts"></script>
<template id="mangaupdates-warning">
<span class="custom-tooltip" style="align-self: center;" data-title="Experimental (Only a third of AL manga is currently covered with data for this)"><i class="fa fa-info-circle"></i></span>
</template>
</body>
</html>