-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
80 lines (80 loc) · 3.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
<!DOCTYPE html>
<html>
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-121641017-7"></script><script src="js/googleAnalytics.js"></script>
<title>Ships</title>
<meta name="description" content="Display the differents community made ships between characters from an anime"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.css">
</head>
<body>
<h1>Ship</h1>
<p id="userIntro">
Select a mode, choose an anime/game, see what crazy ship the community are making
</p>
<span id="hidden-container">
<div id="intro-wrapper">
<div id="left">
<button onclick="loadData('custom')">Custom Files</button>
<p>
All data are handpicked from a lot of different sources<br/>
There are less characters but the end result is more clean with more licences
</p>
</div>
<div id="right">
<!--<button onclick="loadData('gelbooru')">Gelbooru</button>
<p>
All data are taken from Gelbooru using a script<br/>
This means way more characters but the end result is a bit more messy
<div>Not Recommanded!</div>
</p>-->
<p>
Gelbooru is temporarly disabled.<br/>
Please use custom files instead.
</p>
</div>
</div>
</span>
<div id="nodes" hidden>
<div id="network"></div>
<div id="loadingBar">
<div id="outerBorder">
<div id="border">
<div id="bar"></div>
</div>
</div>
</div>
</div>
<br/>
<div id="input" hidden>
<h3>Quick search</h3>
<p>
Just write the name of the anime, no space, no special characters, just letters
</p>
Anime name: <input id="autoCompleteAnime" type="text" tabindex="1"/>
<button id="inputButton">OK</button>
<hr/>
<h3>Create link</h3>
<p>
Choose 2 animes and 2 characters and see what is the fastest way to get from one to the other<br/>
You must first fill the anime field to have autosuggestion for the character!
</p>
Anime 1: <input id="autoCompleteAnime1" type="text" tabindex="1"/> Character 2: <input id="autoCompleteCharacter1" type="text" tabindex="1"/><br/>
Anime 2: <input id="autoCompleteAnime2" type="text" tabindex="1"/> Character 2: <input id="autoCompleteCharacter2" type="text" tabindex="1"/>
<br/><button id="inputButtonLink">OK</button>
</div>
<div id="infos"></div>
<hr/>
<p id="userInfo">
Click on a node for more information. (WARNING: There is NSFW content)<br/>
You can also use your mouse wheel to zoom<br/>
Images may take some time to load depending of your connection
</p>
</body>
<footer>
This website is a work in progress... GitHub: <a href="https://github.com/Xwilarg/Ship">https://github.com/Xwilarg/Ship</a>
<script type="text/javascript" src="js/nodes.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/JavaScript-autoComplete/1.0.4/auto-complete.min.js"></script>
</footer>
</html>