A sorter site for Idolm@ster Characters
Initial commit
+231
+69
index.html
+69
index.html
···
1
+
<html>
2
+
3
+
<head>
4
+
<link rel="shortcut icon" href="yinyang.ico" type="image/x-icon">
5
+
<link rel="icon" href="yinyang.ico" type="image/x-icon">
6
+
<meta charset="utf-8">
7
+
<meta name="og:site_name" content="Touhou Character Sorting v2">
8
+
<meta name="og:description" content="A simple website for sorting Touhou characters in a formatted list.">
9
+
<meta name="og:image" content="https://i.imgur.com/IZzJMk6.jpg"><title>Touhou Character Sorting</title>
10
+
<!-- 4chan identifier tripcode: !FreliaEfl2 -->
11
+
<link rel="stylesheet" type="text/css" href="src/reset.css">
12
+
<link rel="stylesheet" type="text/css" href="src/styles.css">
13
+
</head>
14
+
15
+
<body>
16
+
<div class="container">
17
+
<div class="progress">
18
+
Battle No. XX
19
+
<div class="progressbar">
20
+
<div class="progressfill"><span class="progresstext">79%</span></div>
21
+
</div>
22
+
</div>
23
+
<div class="sorter">
24
+
<img src="src/defaultL.jpg" class="left sort image">
25
+
26
+
<div class="starting button">Click to Start!</div>
27
+
<div class="starting button">Load Progress</div>
28
+
<div class="sorting button">Tie</div>
29
+
<div class="sorting button">Undo</div>
30
+
<div class="sorting button">Save Progress</div>
31
+
32
+
<img src="src/defaultR.jpg" class="right sort image">
33
+
34
+
<div class="left sort text"><p>Touhou Project</p></div>
35
+
<div class="right sort text"><p>Character Sorter</p></div>
36
+
</div>
37
+
<div class="sorteroptions">
38
+
<div class="large option">
39
+
<label><input type="checkbox"> Filter Option 1</label>
40
+
</div>
41
+
<div><label><input type="checkbox"> Touhou Game Option 1</label></div>
42
+
<div><label><input type="checkbox"> Touhou Game Option 2</label></div>
43
+
<div><label><input type="checkbox"> Touhou Game Option 3</label></div>
44
+
<div><label><input type="checkbox"> Touhou Game Option 4</label></div>
45
+
<div><label><input type="checkbox"> Touhou Game Option 5</label></div>
46
+
47
+
<hr>
48
+
49
+
<div class="large option">
50
+
<label><input type="checkbox"> Filter Option 2</label>
51
+
</div>
52
+
<div><label><input type="checkbox"> Stage 1</label></div>
53
+
<div><label><input type="checkbox"> Stage 2</label></div>
54
+
<div><label><input type="checkbox"> Stage 3</label></div>
55
+
<div><label><input type="checkbox"> Stage 4</label></div>
56
+
<div><label><input type="checkbox"> Stage 5</label></div>
57
+
<div><label><input type="checkbox"> Stage 6/Final Stage</label></div>
58
+
<div><label><input type="checkbox"> Extra/Phantasm Stage</label></div>
59
+
60
+
<hr>
61
+
62
+
<div><label><input type="checkbox"> Filter Option 3</label></div>
63
+
<div><label><input type="checkbox"> Filter Option 4</label></div>
64
+
<div><label><input type="checkbox"> Filter Option 5</label></div>
65
+
</div>
66
+
</div>
67
+
</body>
68
+
69
+
</html>
src/defaultL.jpg
src/defaultL.jpg
This is a binary file and will not be displayed.
src/defaultR.jpg
src/defaultR.jpg
This is a binary file and will not be displayed.
+48
src/reset.css
+48
src/reset.css
···
1
+
/* http://meyerweb.com/eric/tools/css/reset/
2
+
v2.0 | 20110126
3
+
License: none (public domain)
4
+
*/
5
+
6
+
html, body, div, span, applet, object, iframe,
7
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8
+
a, abbr, acronym, address, big, cite, code,
9
+
del, dfn, em, img, ins, kbd, q, s, samp,
10
+
small, strike, strong, sub, sup, tt, var,
11
+
b, u, i, center,
12
+
dl, dt, dd, ol, ul, li,
13
+
fieldset, form, label, legend,
14
+
table, caption, tbody, tfoot, thead, tr, th, td,
15
+
article, aside, canvas, details, embed,
16
+
figure, figcaption, footer, header, hgroup,
17
+
menu, nav, output, ruby, section, summary,
18
+
time, mark, audio, video {
19
+
margin: 0;
20
+
padding: 0;
21
+
border: 0;
22
+
font-size: 100%;
23
+
font: inherit;
24
+
vertical-align: baseline;
25
+
}
26
+
/* HTML5 display-role reset for older browsers */
27
+
article, aside, details, figcaption, figure,
28
+
footer, header, hgroup, menu, nav, section {
29
+
display: block;
30
+
}
31
+
body {
32
+
line-height: 1;
33
+
}
34
+
ol, ul {
35
+
list-style: none;
36
+
}
37
+
blockquote, q {
38
+
quotes: none;
39
+
}
40
+
blockquote:before, blockquote:after,
41
+
q:before, q:after {
42
+
content: '';
43
+
content: none;
44
+
}
45
+
table {
46
+
border-collapse: collapse;
47
+
border-spacing: 0;
48
+
}
+114
src/styles.css
+114
src/styles.css
···
1
+
body {
2
+
font-family: Arial, Helvetica, sans-serif;
3
+
font-size: 16px;
4
+
}
5
+
6
+
.container {
7
+
display: grid;
8
+
grid-row-gap: 1em;
9
+
}
10
+
11
+
.progress {
12
+
margin: 1em auto;
13
+
width: 500px;
14
+
}
15
+
16
+
.progressbar {
17
+
position: relative;
18
+
width: 492px;
19
+
border: 1px solid black;
20
+
padding: 3px;
21
+
margin: 2px 0px;
22
+
margin-bottom: 1em;
23
+
}
24
+
25
+
.progresstext {
26
+
position: absolute;
27
+
width: 492px;
28
+
margin: 3px 0px;
29
+
text-align: center;
30
+
font-size: 0.7em;
31
+
}
32
+
33
+
.progressfill {
34
+
height: 20px;
35
+
background-color: lightgreen;
36
+
width: 79%;
37
+
}
38
+
39
+
.sorter {
40
+
margin: 0px auto;
41
+
display: grid;
42
+
grid-template-columns: 120px 1fr 120px;
43
+
grid-gap: 5px;
44
+
width: 420px;
45
+
}
46
+
47
+
.button {
48
+
border: 1px solid black;
49
+
text-align: center;
50
+
padding: 10%;
51
+
grid-column: 2 / 3;
52
+
}
53
+
54
+
.starting.button {
55
+
grid-row: span 3;
56
+
}
57
+
58
+
.sorting.button {
59
+
grid-row: span 2;
60
+
display: none;
61
+
}
62
+
63
+
.sorter > .image {
64
+
width: 120px;
65
+
height: 180px;
66
+
margin: auto;
67
+
grid-row: 1 / 7;
68
+
}
69
+
70
+
.sorter > .text {
71
+
width: 120px;
72
+
height: 60px;
73
+
}
74
+
75
+
.sorter > .text > p {
76
+
margin: 5px 5px;
77
+
width: calc(100%-10px);
78
+
text-align: center;
79
+
font-size: 0.8em;
80
+
line-height: 1.5em;
81
+
}
82
+
83
+
.sorter > .left {
84
+
grid-column: 1 / 2;
85
+
border: 1px solid #000000;
86
+
}
87
+
88
+
.sorter > .right {
89
+
grid-column: 3 / 4;
90
+
border: 1px solid #000000;
91
+
}
92
+
93
+
.sorteroptions {
94
+
margin: 1em auto;
95
+
display: grid;
96
+
text-align: left;
97
+
grid-template-columns: repeat(3, 1fr);
98
+
grid-gap: 10px;
99
+
width: 450px;
100
+
}
101
+
102
+
.sorteroptions > div {
103
+
font-size: 0.5625em;
104
+
}
105
+
106
+
label {
107
+
cursor: pointer;
108
+
}
109
+
110
+
.sorteroptions > .large.option, .sorteroptions > hr {
111
+
grid-column: span 3;
112
+
text-align: center;
113
+
width: 100%;
114
+
}