mctaylors/NXInspired
mctaylors/NXInspired
1
1
Fork 0
Code Issues 1 Pull requests Activity

Refactor, implement two buttons pt.1

Browse source 
Signed-off-by: mctaylors <cantsendmails@mctaylors.ru>
This commit is contained in:
Macintxsh 2024-05-02 17:12:39 +05:00
parent e3625a31cf
commit 9bc7f2e633
Signed by: mctaylors
GPG key ID: 7181BEBE676903C1
3 changed files with 36 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
assets/css/style.css
View file

@ -24,7 +24,7 @@
p, button {
color: white;
font-family: Nintendo;
font-family: Nintendo, sans-serif;
font-weight: bold;
font-size: 24px;
line-height: 40px;
@ -37,7 +37,6 @@ p, button {
height: 355px;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: var(--background);
backdrop-filter: blur(4px);
@ -45,7 +44,7 @@ p, button {
border-radius: 4px;
}
.dialog > .errorcode {
.dialog > .error-code {
margin-top: 40px;
margin-left: 60px;
color: lightgray;
@ -65,17 +64,30 @@ p, button {
position: absolute;
bottom: 0;
background-color: transparent;
border: 0px;
border: 0;
border-top: 2px solid var(--border);
width: 100%;
height: 74px;
}
.dialog button.left, .dialog button.right {
width: 50%;
}
.dialog button.left {
border-right: 1px solid var(--border);
}
.dialog button.right {
border-left: 1px solid var(--border);
left: 50%;
}
.dialog button:hover {
background-color: var(--background-active);
border-radius: 4px;
outline: 5px solid;
box-shadow: 0px 0px 12px var(--light-blue);
box-shadow: 0 0 12px var(--light-blue);
animation: 500ms infinite alternate ease-out hover-outline;
}

19
assets/js/main.js
View file

@ -1,13 +1,18 @@
window.onload = function() {
play("error");
};
}
function play(audio) {
var audio = document.getElementById(audio);
audio.play();
};
function play(audioId) {
let audioElement = document.getElementById(audioId);
audioElement.play();
}
async function ok_button(href) {
function close_button(href) {
play("click");
window.location.href = href;
};
}
function details_button() {
play("click");
// TODO: this button does nothing for now :)
}

11
index.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="">
<head>
<meta charset="utf-8" />
<title>NXInspired</title>
@ -11,7 +11,7 @@
<body>
<div class="background-image"></div>
<div class="dialog">
<p class="errorcode">
<p class="error-code">
Error Code: 404
</p>
<p class="description">
@ -19,8 +19,11 @@
<br/>
Server cannot find the requested resource. Make sure the link is spelled correctly.
</p>
<button onclick="ok_button('https://github.com/mctaylors/NXInspired')">
OK
<button class="left" onclick="close_button('https://github.com/mctaylors/NXInspired')">
Close
</button>
<button class="right" onclick="details_button()">
Details
</button>
</div>
</body>