-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmaids.html
277 lines (234 loc) · 10.1 KB
/
maids.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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<head>
<title id="pageTitle">Maid Spin</title>
<link rel="icon" type="image/png" href="/files/favicon.png"/>
<meta http-equiv="content-type" content="charset=utf-8"/>
<meta name="keywords" content="anime, manga, blog, maid, meido, mecha">
<meta name="author" content="iklone">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="/css/post.css">
<link rel="stylesheet" type="text/css" href="/css/maid.css">
<link rel="stylesheet" type="text/css" href="/css/modal.css">
<link rel="stylesheet" type="text/css" href="/css/heaven.css">
<script>
var nsfw = false;
//get GET variables
function getGET(name) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if (pair[0] == name) {
return pair[1];
}
}
return "id";
}
//add maid to table
function addRow(ID, name, series, style, MAL, seriesMAL, seriesType, desc, nsfwKA) {
if (!(!nsfw && nsfwKA == 1)) { //filter out nsfw entries if no nsfw is on
//create ID cell
newIDcell = document.createElement("td");
newIDcell.innerHTML = "#" + ID;
//create name cell
newNameCell = document.createElement("td");
newNameCell.innerHTML = name;
//create series cell
newSeriesCell = document.createElement("td");
newSeriesCell.innerHTML = series;
//create style cell
newStyleCell = document.createElement("td");
newStyleCell.innerHTML = style;
//create row
newRow = document.createElement("tr");
newRowFunction = 'openModal("' + name + '", "' + series + '", "' + desc + '", "' + style + '", "' + seriesType + '", "' + MAL + '", "' + seriesMAL + '")';
newRow.setAttribute("onclick", newRowFunction);
newRow.appendChild(newIDcell);
newRow.appendChild(newNameCell);
newRow.appendChild(newSeriesCell);
newRow.appendChild(newStyleCell);
//append row to table
document.getElementById("maidDB").appendChild(newRow);
}
}
function loadTable() {
//live code with DB
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
eval(this.responseText);
}
};
xhttp.open("GET", "/php/getMaids.php?sort=" + getGET("sort"), true);
xhttp.send();
}
//toggle nsfw showing
function togNSFW() {
if (nsfw) {
nsfw = false;
} else {
nsfw = true;
}
setNSFWButton();
document.getElementById("maidDB").innerHTML = "";
loadTable();
}
//fix nsfw button text
function setNSFWButton() {
if (nsfw) {
document.getElementById("NSFWButton").innerHTML = "SHOWING";
} else {
document.getElementById("NSFWButton").innerHTML = "HIDDEN";
}
}
</script>
<script src="/js/pageLoader.js"></script>
</head>
<body>
<div id="headerLoad"></div>
<div id="body">
<div class="box" id="left"></div>
<div class="box" id="centre">
<div class="block">
<h1 id="blogTitle">The Maid List</h1>
<div>
An ever-expanding database of every maid in anime, manga and games. This is an eternal work in progress. The criteria for admission can be read <a href="#" onclick="openRules()">here</a>, you can also toggle NSFW entries. Click on a maid for her details, or click column titles to sort.<br>
Long live maids.
</div>
</div>
<div class="block" id="blogBody">
<table id="maidDB">
<tr id="topRow">
<th><a href="./maids">ID</a></th>
<th style="min-width: 40%;"><a href="./maids?sort=forename">Name</a></th>
<th><a href="./maids?sort=series">Series</a></th>
<th><a href="./maids?sort=style">Style</a></th>
</tr>
</table>
</div>
</div>
<div class="box" id="right"></div>
</div>
<div id="footerLoad"></div>
<div id="maidModal" class="modal">
<div class="modalContent">
<div class="leftHide" id="maidImageDIV">
<img id="maidImage" src="">
</div>
<div class="modalRight">
<div class="modalHeader">
<span id="modalClose" class="close">×</span>
<h2 id="modalName"></h2>
</div>
<div class="modalBody">
<div id="maidIntro"></div>
<hr>
<div id="maidDesc"></div>
</div>
</div>
</div>
</div>
<script>
loadParts();
loadTable();
</script>
<script>
var modal = document.getElementById("maidModal");
var span = document.getElementById("modalClose");
function openRules() {
//clearModal of previous maid
clearModal();
//load rules
document.getElementById("modalName").innerHTML = "Rules of the Maid List";
document.getElementById("maidIntro").innerHTML = "Maids will be admitted to the list if and only if they fulfill all categories:";
document.getElementById("maidDesc").innerHTML = "\
<ol>\
<li>The character is from Japanese media.</li>\
<li>The character's primary form is 2D.</li>\
<li>The character is female.</li>\
<li>The character wears a maid uniform or are recognised as a maid by other characters.</li>\
<li>The character plays the part of a maid as their primary role, not just as a one-off time.</li>\
</ol>\
<hr>\
<br>" + '\
NSFW entries:\
<a class="buttonLink" id="NSFWButton" href="javascript:{}" onclick="togNSFW();" style="border: 1px solid gray;">HIDDEN</a>\
<br>\
<br>';
setNSFWButton();
//show modal
modal.style.display = "block";
}
//reset modal
function clearModal() {
//image
document.getElementById("maidImageDIV").setAttribute("class", "leftHide");
document.getElementById("maidImage").setAttribute("src", "");
//text
document.getElementById("modalName").innerHTML = "";
document.getElementById("maidIntro").innerHTML = "";
document.getElementById("maidDesc").innerHTML = "";
}
async function openModal(name, series, desc, type, seriesType, malID, seriesMalID) {
//clearModal of previous maid
clearModal();
//if char MAL ID available, set title as link
if (malID) {
titleText = '<a href="https://myanimelist.net/character/' + malID + '">' + name + '</a>';
} else {
titleText = name;
}
document.getElementById("modalName").innerHTML = titleText;
//Build intro text
//If series MAL ID available, set series as link
if (seriesMalID) {
introText = name + ' is a maid from the series <a href="https://myanimelist.net/' + seriesType + '/' + seriesMalID + '">' + series + "</a>.";
} else {
introText = name + " is a maid from the series " + series + ".";
}
//Make sure a/an is grammatical
if (type.match('^[aieouAIEOU].*')) {
introText = introText + "<br>She is an ";
} else {
introText = introText + "<br>She is a ";
}
introText = introText + type.toLowerCase() + "-type maid.";
document.getElementById("maidIntro").innerHTML = introText;
//show modal (before async functions)
modal.style.display = "block";
//set description/image. If no custom desc, grab from MAL if MAL ID available
if (malID != "") {
await getDesc(malID);
}
//override with custom desc
if (desc != "") {
document.getElementById("maidDesc").innerHTML = desc;
}
}
//hide on off click
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
//get MAL data (both desc and image)
async function getDesc(id) {
response = await fetch("https://api.jikan.moe/v3/character/" + id);
data = await response.json();
//description
desc = data["about"].replace(/(?:\\r\\n|\\r|\\n)/g, '<br>');
desc = desc + "<br><i>[Description taken from MyAnimeList.com.]</i>";
document.getElementById("maidDesc").innerHTML = desc;
//image (show and set)
imgURL = data["image_url"];
document.getElementById("maidImageDIV").setAttribute("class", "leftShow");
document.getElementById("maidImage").setAttribute("src", imgURL);
}
</script>
</body>