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

19
assets/js/main.js
View file

@ -1,13 +1,18 @@
window.onload = function() { window.onload = function() {
play("error"); play("error");
}; }
function play(audio) { function play(audioId) {
var audio = document.getElementById(audio); let audioElement = document.getElementById(audioId);
audio.play(); audioElement.play();
}; }
async function ok_button(href) { function close_button(href) {
play("click"); play("click");
window.location.href = href; 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> <!DOCTYPE html>
<html> <html lang="">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>NXInspired</title> <title>NXInspired</title>
@ -11,7 +11,7 @@
<body> <body>
<div class="background-image"></div> <div class="background-image"></div>
<div class="dialog"> <div class="dialog">
<p class="errorcode"> <p class="error-code">
Error Code: 404 Error Code: 404
</p> </p>
<p class="description"> <p class="description">
@ -19,8 +19,11 @@
<br/> <br/>
Server cannot find the requested resource. Make sure the link is spelled correctly. Server cannot find the requested resource. Make sure the link is spelled correctly.
</p> </p>
<button onclick="ok_button('https://github.com/mctaylors/NXInspired')"> <button class="left" onclick="close_button('https://github.com/mctaylors/NXInspired')">
OK Close
</button>
<button class="right" onclick="details_button()">
Details
</button> </button>
</div> </div>
</body> </body>