-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
349 lines (349 loc) · 20.5 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
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
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
<!DOCTYPE html>
<html lang='{{ .Lang }}'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./assets/scripts.js" async></script>
<link rel='stylesheet' href='./assets/reset.css'>
<link rel='stylesheet' href='./assets/styles.css'>
<title>Witch's Journey API</title>
</head>
<body>
<header class="header">
<div class="header-title-box">
<h1 class="header-title-line">
The Journey of Elaina character API
</h1>
</div>
<ul class="header-list-ul">
<!--
header-list-ul : 612.5*40
header-list-li : 216.3*40
header-list-dropdown : 80.34*40
-->
<li class="header-list-li">
<a href="/about" class="header-list-link">
About
</a>
</li>
<li class="header-list-li">
<a href="/license" class="header-list-link">
License
</a>
</li>
<li class="header-list-dropdown">
<a href="#" class="header-list-dropdown-button">Links</a>
<ul class="header-list-dropdown-ul">
<li class="header-list-dropdown-li">
<a href="https://discord.com/app/invite-with-guild-onboarding/dgwdyzQ6bu" class="header-list-dropdown-item ext-link">Discord</a>
<a href="https://twitter.com/WITCHSJOURNEY" class="header-list-dropdown-item ext-link">Twitter</a>
</li>
</ul>
</li>
<li class="header-list-dropdown">
<a href="#" class="header-list-dropdown-button">Lang</a>
<ul class="header-list-dropdown-ul">
<li class="header-list-dropdown-li">
<a href="?lang=en" class="header-list-dropdown-item">English</a>
<a href="?lang=ja" class="header-list-dropdown-item">日本語</a>
</li>
</ul>
</li>
</ul>
</header>
<main>
<div class="carousel">
<input type="radio" id="carousel-1" name="carousel[]" checked>
<input type="radio" id="carousel-2" name="carousel[]">
<input type="radio" id="carousel-3" name="carousel[]">
<input type="radio" id="carousel-4" name="carousel[]">
<input type="radio" id="carousel-5" name="carousel[]">
<ul class="carousel__items">
<li class="carousel__item"><img src="//lh5.googleusercontent.com/-cTEgPOnd3l8/U8-EmaZ4KNI/AAAAAAAABc8/6eacbALkQ6A/w1358-h905-no/carousel-1.JPG" alt=""></li>
<li class="carousel__item"><img src="//lh4.googleusercontent.com/-ntVHbbWX5eo/U8-EmV8P4cI/AAAAAAAABc4/ICYBGkcztTc/w1358-h905-no/carousel-2.jpg" alt=""></li>
<li class="carousel__item"><img src="//lh5.googleusercontent.com/-batEXUZE_e4/U8-EmLF9-hI/AAAAAAAABc0/J3tJVUa6Buk/w1358-h905-no/carousel-3.jpg" alt=""></li>
<li class="carousel__item"><img src="//lh5.googleusercontent.com/-gywqIeMvel0/U8-EolKdtkI/AAAAAAAABdM/G0-NHuvvJUU/w1358-h905-no/carousel-4.jpg" alt=""></li>
<li class="carousel__item"><img src="//lh5.googleusercontent.com/--2iANjL3ikc/U8-EoGJ18mI/AAAAAAAABdI/fBe-q3Gos6Y/w1358-h905-no/carousel-5.jpg" alt=""></li>
</ul>
<div class="carousel__prev">
<label for="carousel-1"></label>
<label for="carousel-2"></label>
<label for="carousel-3"></label>
<label for="carousel-4"></label>
<label for="carousel-5"></label>
</div>
<div class="carousel__next">
<label for="carousel-1"></label>
<label for="carousel-2"></label>
<label for="carousel-3"></label>
<label for="carousel-4"></label>
<label for="carousel-5"></label>
</div>
<div class="carousel__nav">
<label for="carousel-1">1</label>
<label for="carousel-2">2</label>
<label for="carousel-3">3</label>
<label for="carousel-4">4</label>
<label for="carousel-5">5</label>
</div>
<div class="carousel__title">
<span>
Welcome to the API
</span>
</div>
</div>
<article>
<section class="accordion">
<div class="accordion-box caution">
<input id="accordion-block_1" type="checkbox" class="accordion-toggle">
<label class="accordion-label" for="accordion-block_1">
{{- if eq .Lang "en" }}
Caution:
{{- else if eq .Lang "ja"}}
ご利用の上での注意
{{- else }}
Caution:
{{- end}}
</label>
<div class="accordion-content">
<p>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<ul>
<li>
このプロジェクトは、魔女の旅々のファンによって作られた二次的なものです。魔女の旅々の作品の公式とは何らの関係もないことをご了承ください。
</li>
<li>
このプロジェクトは、魔女の旅々の最新作までのネタバレを含む可能性があります。ご注意ください。
</li>
</ul>
{{- else }}
<!-- -->
{{- end}}
</p>
</div>
</div>
</section>
<hr />
<section class="content-section">
<div class="content-card">
<div class="content-pagetitle headline">
<h1>
{{- if eq .Lang "en" }}
Welcome to the Journey of Elaina API Portal!
{{- else if eq .Lang "ja"}}
魔女の旅々APIポータルへようこそ!
{{- else}}
Welcome to the Journey of Elaina API Portal!
{{- end}}
</h1>
</div>
</div>
</section>
<section class="content-section">
<div class="content-card">
<div class="content-text">
<p>
{{- if eq .Lang "en" }}
This is an API that provides information on characters from the anime "Witches' Journey". As stated at the beginning, this project is unofficial by the fans.
{{- else if eq .Lang "ja"}}
アニメ・ライトノベル・漫画である『魔女の旅々』に登場するキャラクターの情報APIです。冒頭にもある通り、これはファンによる非公式なプロジェクトです。
{{- else }}
This is an API that provides information on characters from "The Journey of Elaina", which is an anime, a light novel and comic. As stated at the beginning, this project is unofficial by the fans.
{{- end}}
</p>
</div>
</div>
</section>
<section class="content-section">
<div class="content-card">
<div class="content-card-title">
<h2 class="content-card-headline headline">
<span>
{{- if eq .Lang "en" }}
Usage
{{- else if eq .Lang "ja"}}
利用方法
{{- else}}
Usage
{{- end}}
</span>
</h2>
</div>
<div class="content-text">
<p>
{{- if eq .Lang "en" }}
API returns a data when options are specified in the URL. Datas are in JSON format.
{{- else if eq .Lang "ja"}}
APIは、URLで指定することによりデータを返します。データはJSON形式です。
{{- else}}
API returns a data when options are specified in the URL. Datas are in JSON format.
{{- end}}
<br />
{{- if eq .Lang "en" }}
<a href="/api">/api</a> — Without the option, all information for all characters is returned.
{{- else if eq .Lang "ja"}}
<a href="/api">/api</a> — 何も指定せずにapiページにアクセスすると、キャラクターについての全てのリストを返します。
{{- else}}
<a href="/api">/api</a> — Without the option, all information for all characters is returned.
{{- end}}
<br />
{{- if eq .Lang "en" }}
Query parameters can be used to limit the information to be retrieved:
{{- else if eq .Lang "ja"}}
いくつかのクエリパラメータを利用して、特定の情報のみを取得することができます:
{{- else}}
Query parameters can be used to limit the information to be retrieved:
{{- end}}
<ul>
<li>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<code>introducer</code> — キャラクターを紹介するキャラクター。主に紹介文の口調が変わる他、呼び名も変わります。指定されたキャラクターによる紹介情報がない場合、<code>null</code>が返ります。例:<code>イレイナ</code>, <code>サヤ</code> <small>※英語の頭文字大文字のエイリアスも存在します</small>
{{- else}}
<!-- -->
{{- end}}
</li>
<li>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<code>character</code> — 情報を取得するキャラクター。不明なキャラクターが渡された場合、空のJSONが返ります。例:<code>イレイナ</code>, <code>サヤ</code>, <code>アルテ</code> <small>※英語のエイリアスは現状設定されていません</small>
{{- else}}
<!-- -->
{{- end}}
</li>
<li>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<code>element</code> — 取得する情報。以下から選んでください:<code>name</code>, <code>witch_name</code>, <code>called_name</code>, <code>desc</code>, <code>chap</code>;それぞれ「名前」「魔女名(或いは種族名)」「呼称」「説明」「初出の巻と章」です。
{{- else}}
<!-- -->
{{- end}}
</li>
</ul>
<hr />
{{- if eq .Lang "en" }}
Tips:
{{- else if eq .Lang "ja"}}
Tips: 現状introducerはデフォルトではイレイナが設定されており、イレイナの口調でのキャラクターの紹介が行われています。ここでは原作に順守して一部イレイナが知らない情報が書かれていない可能性があります。introducerに作者である白石定規先生の名前を「白石定規」或いは「Jogi」と設定すると、作者目線からの(公開されている)情報が書かれているため、情報量は最も多いでしょう。
{{- else}}
Tips:
{{- end}}
<hr />
{{- if eq .Lang "en" }}
Examples:
{{- else if eq .Lang "ja"}}
例:
{{- else}}
Examples:
{{- end}}
<ul>
<li>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<a href="/api/?character=イレイナ">/api/?character=イレイナ</a> — イレイナについての情報が返ります。
{{- else}}
<!-- -->
{{- end}}
</li>
<li>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<a href="/api/?character=イレイナ&element=name">/api/?character=イレイナ&element=name</a> — イレイナの名前のみが返ります。
{{- else}}
<!-- -->
{{- end}}
</li>
<li>
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
<a href="/api/?element=name">/api/?element=name</a> — 全キャラクターの名前のリストが返ります。
{{- else}}
<!-- -->
{{- end}}
</li>
</ul>
</p>
</div>
</div>
</section>
</article>
</main>
<footer class="footer">
<div class="waves-div">
<svg class="waves-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
</defs>
<g class="parallax">
<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(144, 245, 154, 0.7)" />
<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(144, 245, 154, 0.5)" />
<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(144, 245, 154, 0.3)" />
<use xlink:href="#gentle-wave" x="48" y="7" fill="rgba(144, 245, 154, 1)" />
</g>
</svg>
</div>
<div class="footer-content">
© 2023 sousakak
</div>
</footer>
<overlay>
<div class="overlay-screen ext-link-overlay">
<div class="overlay-box">
<div class="overlay-title ext-link-overlay-title">
{{- if eq .Lang "en" }}
External Link
{{- else if eq .Lang "ja"}}
外部リンク
{{- else}}
External Link
{{- end}}
</div>
<div class="overlay-text ext-link-overlay-text">
{{- if eq .Lang "en" }}
<!-- -->
{{- else if eq .Lang "ja"}}
外部サイトへのリンクがクリックされました。移動してよろしいですか?
{{- else}}
<!-- -->
{{- end}}
</div>
<div class="overlay-button-box">
<div class="overlay-button-close-box overlay-button-one-box">
<button class="overlay-button-close overlay-button ext-link-overlay-button-close" type="button">
<a class="overlay-button-close-link overlay-button-link">
{{- if eq .Lang "en" }}
Close
{{- else if eq .Lang "ja"}}
閉じる
{{- else}}
Close
{{- end}}
</a>
</button>
<button class="overlay-button-action overlay-button ext-link-overlay-button-open" type="button">
<a class="overlay-button-action-link overlay-button-link">
{{- if eq .Lang "en" }}
Open
{{- else if eq .Lang "ja"}}
開く
{{- else}}
Open
{{- end}}
</a>
</button>
</div>
</div>
</div>
</div>
</overlay>
</body>
</html>