forked from piulin/piured
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
111 lines (102 loc) · 6.39 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
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<!-- CSS only -->
<style>
.img-fluid {
max-width: 5%;
height: auto;
}
.logo-bg {
background-color: #fff8e0ff;
}
</style>
<!-- <script src="Demo/lib/jquery/jquery.min.js"></script>-->
<!-- <script src="Demo/lib/bootstrap/bootstrap.min.js" crossorigin="anonymous"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- <link href="css/bootstrap.min.css" rel="stylesheet">-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navbar">
<div class="container-fluid">
<span class="navbar-brand mb-0 h1">
<img src="imgs/logo-flat-mono-white.png" class="img-fluid mx-auto d-block" alt="PIURED" style="height: 50px;">
</span>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="online-multiplayer.html">Battle</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="local.html">Local</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="about.html">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="logo-bg">
<img src="imgs/logo-color-256.png" class="img-fluid mx-auto d-block" alt="PIURED">
</div>
<div class="container pt-4 mx-auto">
<div class="row justify-content-center">
<div class="col-12 text-center">
<h1 class="text-center fs-2">Welcome to PIURED!</h1>
<p class="text-center">PIURED is an open-source pump it up engine made entirely in Javascript. What you are seeing right now is web-demo that allows anyone to use the engine to play pump it up songs. To begin, please
decide wether you want to play on your own (local) or play with some one else (online battle).</p>
</div>
</div>
<div class="row align-items-end">
<div class="col-sm-6 text-center">
<a id="btnSingle" class="btn btn-md center-block" Style="width: 200px;" href="local.html" onmouseover="hover('s');" onmouseout="unhover('s');" >
<img id="imgSingle" src="imgs/upright-mono-black.png" class="img-fluid mx-auto d-block" alt="PIURED">
Play Local
</a>
</div>
<div class="col-sm-6 text-center">
<a id="btnClear" class="btn btn-md center-block" Style="width: 300px;" href="online-multiplayer.html" onmouseover="hover('d');" onmouseout="unhover('d');">
<img id="imgDouble" src="imgs/uprightdownleft-mono-black.png" class="img-fluid mx-auto d-block" alt="PIURED">
Play Online Battle
</a>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center text-lg-start bg-light text-muted">
<div class="text-center p-4" style="background-color: white;">
PIURED v1.1.4 <hr>
<a href="https://github.com/piulin/piured" class="text-reset text-decoration-none"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
</svg></a>
<a href="https://discord.gg/5pJbcEvvMj" class="text-reset text-decoration-none p-3"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-discord" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/>
</svg></a>
</div>
</footer>
<script>
function hover(attr) {
if (attr === 's') {
$('#imgSingle').attr('src', 'imgs/upright-mono-white.png')
} else {
$('#imgDouble').attr('src', 'imgs/uprightdownleft-mono-white.png')
}
}
function unhover(attr) {
if (attr === 's') {
$('#imgSingle').attr('src', 'imgs/upright-mono-black.png')
} else {
$('#imgDouble').attr('src', 'imgs/uprightdownleft-mono-black.png')
}
}
</script>
</body>
</html>