diff --git a/app/assets/css/index.css b/app/assets/css/index.css index a503251..c8b99b9 100644 --- a/app/assets/css/index.css +++ b/app/assets/css/index.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); @import url("https://cdn.jsdelivr.net/gh/hung1001/font-awesome-pro@4cac1a6/css/all.css"); * { @@ -60,6 +60,7 @@ button.nav { width: 100%; height: 40px; border: none; + cursor: pointer; font-size: large; text-align: left; padding: 13px 13px 13px 13px; @@ -84,6 +85,16 @@ button.nav > span { color: #ffffff; } +img.logo { + width: 60%; +} + +img.mascot { + width: 50%; + float: right; + margin-top: calc(300px - (50% + 12px)); +} + fieldset { font-size: small; border: none; @@ -99,12 +110,132 @@ input[type=radio] { } button.classic { + color: #ffffff; width: 96%; height: 30px; + border: none; + cursor: pointer; + outline: none; margin-left: 2%; margin-top: 5px; - border: none; - color: #ffffff; + transition: .3s; border-radius: 5px; background-color: #39aa6d; +} + +button.classic:hover { + background-color: #359e66; +} + +button.close { + float: right; + color: #ffffff; + width: 30px; + height: 30px; + border: none; + cursor: pointer; + outline: none; + transition: .5s; + margin-top: 15px; + margin-right: 15px; + border-radius: 5px; + background-color: #0000001c; +} + +button.close:hover { + background-color: #4e4e4e25; +} + +button.play { + background-color: #39AA6D; + color: #FFFFFF; + border: none; + width: 300px; + height: 65px; + font-size: 28px; + font-weight: normal; + cursor: pointer; + margin: auto; + outline: none; + border-radius: 30px 15px 30px 15px; + transition: background-color 0.3s; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); +} + +button.play:hover { + background-color: #2E8B57; +} + +button.default { + width: 40px; + color: #ffffff; + height: 40px; + cursor: pointer; + border: 0px; + outline: none; + font-size: 16px; + transition: .3s all; + border-radius: 10px; + background-color: #00000036; +} + +button.default:hover { + background-color: #00000060; +} + +p.players { + width: 185px; + padding: 3px 3px 3px 3px; + font-size: larger; + font-style: italic; + background: #f0f0f033; + font-weight: bolder; + border-radius: 15px; + text-align: center; + font-family: "Raleway", sans-serif; + margin-top: calc(300px - 40px); +} + +p.players > span { + width: 100%; +} + +p.players > span > span { + font-family: "Roboto", sans-serif; + text-align: center; +} + +main > footer { + position: absolute; + display: flex; + flex-wrap: wrap; + left: 60px; + right: 60px; + bottom: 70px; + height: 300px; +} + +main > footer > section.left { + width: 20%; + height: 100%; +} + +main > footer > section.left > button.default { + margin-top: calc(300px - (40px + 12px)); +} + +main > footer > section.center { + width: 60%; + height: 100%; + text-align: center; +} + +main > footer > section.right { + width: 20%; + height: 100%; +} + +[hidden] { + display: none; + visibility: hidden; } \ No newline at end of file diff --git a/app/assets/img/alcaz_mascote.png b/app/assets/img/alcaz_mascote.png new file mode 100644 index 0000000..f8cb6c9 Binary files /dev/null and b/app/assets/img/alcaz_mascote.png differ diff --git a/app/assets/img/Catboat_Logo-04.png b/app/assets/img/icon.png similarity index 100% rename from app/assets/img/Catboat_Logo-04.png rename to app/assets/img/icon.png diff --git a/app/assets/img/logo_no_blanc.png b/app/assets/img/logo.png similarity index 100% rename from app/assets/img/logo_no_blanc.png rename to app/assets/img/logo.png diff --git a/app/assets/js/index.js b/app/assets/js/index.js new file mode 100644 index 0000000..88690af --- /dev/null +++ b/app/assets/js/index.js @@ -0,0 +1,35 @@ +const navBar = document.querySelector("nav") +const uiButton = document.querySelector("footer>section.left") +const audio = new Audio() + +function startAudio() { + audio.src = "/app/assets/audio/Golden Hill (Radio Edit).mp3" + audio.loop = true + audio.onended = () => { + if (!audio.paused) { + audio.play() + } + } +} + +function muteAudio() { + audio.muted = true +} + +function unmuteAudio() { + audio.muted = false +} + +function showNavBar() { + navBar.removeAttribute("hidden") + for (const button of uiButton.children) { + button.setAttribute("hidden", "") + } +} + +function hideNavBar() { + navBar.setAttribute("hidden", "") + for (const button of uiButton.children) { + button.removeAttribute("hidden") + } +} \ No newline at end of file diff --git a/app/assets/js/inex.js b/app/assets/js/inex.js deleted file mode 100644 index 10eb378..0000000 --- a/app/assets/js/inex.js +++ /dev/null @@ -1,19 +0,0 @@ -const audio = new Audio() - -function startAudio() { - audio.src = "/app/assets/audio/Golden Hill (Radio Edit).mp3" - audio.loop = true - audio.onended = () => { - if (!audio.paused) { - audio.play() - } - } -} - -function muteAudio() { - audio.muted = true -} - -function unmuteAudio() { - audio.muted = false -} diff --git a/app/logged.html b/app/logged.html index 97f74a0..3b57988 100644 --- a/app/logged.html +++ b/app/logged.html @@ -4,13 +4,19 @@ -