-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
109 lines (109 loc) · 4.3 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
<!DOCTYPE html>
<html>
<head>
<link href="css/exo2.css" rel="stylesheet" />
<link href="css/spinner.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="assets/favicon.ico" />
<title>Jstris Customization Database</title>
</head>
<body>
<header>
<img class="logo" src="assets/jstris-logo.png" />
<h1 class="title">Jstris Customization Database</h1>
<form id="search">
<div id="search-container">
<svg class="searchIcon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M4 11C4 7.13401 7.13401 4 11 4C14.866 4 18 7.13401 18 11C18 14.866 14.866 18 11 18C7.13401 18 4 14.866 4 11ZM11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C13.125 20 15.078 19.2635 16.6177 18.0319L20.2929 21.7071C20.6834 22.0976 21.3166 22.0976 21.7071 21.7071C22.0976 21.3166 22.0976 20.6834 21.7071 20.2929L18.0319 16.6177C19.2635 15.078 20 13.125 20 11C20 6.02944 15.9706 2 11 2Z"
fill="currentColor"
/>
</svg>
<input id="search-input" type="text" placeholder="Search..." />
</div>
<div id="search-tooltip" class="hidden">
<svg class="arrow" viewBox="0 0 20 12">
<polygon points="10,2 20,12 0,12" />
</svg>
<div class="inner">
<div>
<span class="tip">by:</span><span class="user-input">author</span>
<span class="description">Search by author</span>
</div>
<div>
<span class="tip">is:</span><span class="user-input">type</span>
<span class="description">Search by skin type</span>
</div>
<div>
<span class="tip">"</span><span class="user-input">words here</span><span class="tip">"</span>
<span class="description">Exact phrase</span>
</div>
</div>
</div>
</form>
</header>
<main>
<div id="layout" class="layout">
<div class="subtitle game-list-title">Categories</div>
<div id="skin-list-title" class="subtitle skins-list-title"></div>
<div class="subtitle preview-title">Preview</div>
<menu id="game-list" class="game-list"> </menu>
<menu id="skin-list" class="skin-list"> </menu>
<div id="no-results" class="no-results hidden">
<div class="inner">
<strong>No results</strong>
<span>Check your search query and try again.</span>
</div>
</div>
<div class="preview">
<div class="stack">
<img class="background" src="assets/jstris-grid.png" alt="Jstris background grid." />
<canvas id="matrix" width="242" height="480">Example Jstris stack.</canvas>
<div id="preview-loading" class="loading-box hidden">
<div class="lds-spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<span>Loading...</span>
</div>
</div>
<!-- <canvas id="gifDebug">Debug for the GIF skin source.</canvas> -->
</div>
</div>
</main>
<footer>
<span>Selected skin:</span>
<div id="selected-skin-container" class="stack">
<img id="selected-skin" crossorigin="anonymous" />
<span id="no-skin-selected" class="message">No skin selected.</span>
</div>
<div class="flex-spacer"></div>
<button id="copy-url" disabled>
<svg xmlns="http://www.w3.org/2000/svg">
<use href="./assets/symbols.svg#link"/>
</svg>
<span>Copy link</span>
</button>
<button id="copy-data-url" disabled>
<svg xmlns="http://www.w3.org/2000/svg">
<use href="./assets/symbols.svg#link"/>
</svg>
<span>Copy as data URL</span>
</button>
</footer>
<script src="js/omggif.js"></script>
<script src="js/script.js"></script>
</body>
</html>