From f85469ae25ef443276b26118b5c4d2fc0b4827c2 Mon Sep 17 00:00:00 2001 From: Daniel Serdoura Date: Fri, 14 Jun 2024 16:16:59 +0200 Subject: [PATCH] Oh oui sacha mets la plus profond --- css/global.css | 7 ++- css/ships.css | 43 +++++++---------- html/templates/contracts/contracts.html | 2 +- html/templates/home.html | 2 +- html/templates/ships/ships.html | 29 +++++------- index.html | 1 + js/controllers/contracts.js | 1 + js/controllers/home.js | 1 + js/controllers/login.js | 3 +- js/controllers/register.js | 1 + js/controllers/ships.js | 61 ++++++++++++------------- 11 files changed, 72 insertions(+), 79 deletions(-) diff --git a/css/global.css b/css/global.css index a16c472..967c74f 100644 --- a/css/global.css +++ b/css/global.css @@ -85,12 +85,17 @@ select { 100% {right: 25px; top: 0px;} } -.title{ +.Title{ position: absolute; font-size: 50px; margin-left: 50px; } +.title{ + font-size: 50px; + margin-left: 50px; +} + ::placeholder { color: var(--text-color); } diff --git a/css/ships.css b/css/ships.css index a2fa651..9c8a861 100644 --- a/css/ships.css +++ b/css/ships.css @@ -1,20 +1,13 @@ -* { - box-sizing: border-box; -} -@font-face { - font-family: M42; - src: url("/assets/fonts/Pixellari.ttf"); -} .block-ships{ + position: relative; + width: 50%; display:flex; flex-direction: column; color: white; font-size:large; text-align: center; - padding-top: 100px; - max-width: 1000px; - position: relative; margin: auto; + margin-top: 100px; } button{ color: white; @@ -34,12 +27,12 @@ button:hover{ } -.my-modal{ +.ships-modal{ + font-size:small; -} -body{ - background-image: url("/assets/spaceships/hangar.png"); - background-size: cover; + background-image: url("/assets/spaceships/blueprint.png"); + background-repeat: no-repeat; + background-size: contain; } .ships-list { @@ -56,12 +49,19 @@ body{ padding: 16px; color: white; font-weight: bold; - font-size: 18px; + font-size: 60px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; } +.imgShip { + left: 0; + width: 50%; +} +.ships-list h5 { + font-size:xx-large; +} /* Position the "next button" to the right */ .next { right: 0; @@ -71,15 +71,4 @@ body{ /* On hover, add a black background color with a little bit see-through */ .prev:hover, .next:hover { background-color: rgba(0,0,0,0.8); -} - -/* Fading animation */ -.fade { - animation-name: fade; - animation-duration: 1.5s; -} - -@keyframes fade { - from {opacity: .4} - to {opacity: 1} } \ No newline at end of file diff --git a/html/templates/contracts/contracts.html b/html/templates/contracts/contracts.html index ae8207f..e48ed4d 100644 --- a/html/templates/contracts/contracts.html +++ b/html/templates/contracts/contracts.html @@ -1,4 +1,4 @@ -

Contracts

+

Contracts

diff --git a/html/templates/home.html b/html/templates/home.html index 89abad0..f48a8fd 100644 --- a/html/templates/home.html +++ b/html/templates/home.html @@ -1,3 +1,3 @@
-

Home

+

Home

\ No newline at end of file diff --git a/html/templates/ships/ships.html b/html/templates/ships/ships.html index ab2b51b..2eaa88b 100644 --- a/html/templates/ships/ships.html +++ b/html/templates/ships/ships.html @@ -1,17 +1,12 @@ - - - - - - - - - Ship - - -
- - -
- - \ No newline at end of file +
+ + +
+ + + + + + +
+
\ No newline at end of file diff --git a/index.html b/index.html index c271785..05afb31 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ + diff --git a/js/controllers/contracts.js b/js/controllers/contracts.js index ce7aa8d..4272471 100644 --- a/js/controllers/contracts.js +++ b/js/controllers/contracts.js @@ -10,6 +10,7 @@ export default function contracts(temp_engine) { let modal = new Modal("contract-modal", temp_engine); temp_engine.after_render((temp_engine) => { + $("body").css("background-image", "url('/assets/img/background.png')") modal.load("templates/contracts/contracts_modal.html"); Contract.list(10, 1, (contracts) => { diff --git a/js/controllers/home.js b/js/controllers/home.js index a43eeac..4ad0463 100644 --- a/js/controllers/home.js +++ b/js/controllers/home.js @@ -2,6 +2,7 @@ import menu_mod from "./menu_mod.js"; export default function home(temp_engine) { temp_engine.after_render(() => { + $("body").css("background-image", "url('/assets/img/background.png')") menu_mod(temp_engine); }); temp_engine.render("templates/home.html"); diff --git a/js/controllers/login.js b/js/controllers/login.js index 050eb7a..9afbbc2 100644 --- a/js/controllers/login.js +++ b/js/controllers/login.js @@ -8,6 +8,7 @@ export default function login(temp_engine) { const auth = new Auth(); temp_engine.after_render((temp_engine) => { + $("body").css("background-image", "url('/assets/img/background.png')") menu_mod(temp_engine); temp_engine.add_event("#btn-login", "click", () => { @@ -36,7 +37,7 @@ export default function login(temp_engine) { $(".errors").html(""); errors.forEach((error) => { $(".errors").append(`

${error}

`); - }); + }); }); temp_engine.render("templates/auth/login.html"); diff --git a/js/controllers/register.js b/js/controllers/register.js index f48228d..ffbf2f3 100644 --- a/js/controllers/register.js +++ b/js/controllers/register.js @@ -9,6 +9,7 @@ export default function register(temp_engine) { let auth = new Auth(); temp_engine.after_render((temp_engine) => { + $("body").css("background-image", "url('/assets/img/background.png')") menu_mod(temp_engine); Faction.list_all((factions) => { diff --git a/js/controllers/ships.js b/js/controllers/ships.js index e815770..98a31a6 100644 --- a/js/controllers/ships.js +++ b/js/controllers/ships.js @@ -9,26 +9,19 @@ export default (temp_engine) => { temp_engine.after_render((temp_engine) => { menu_mod(temp_engine); + $("body").css("background-image", "url('/assets/spaceships/hangar.png')") modal.load("templates/ships/ships_modal.html"); Ship.list((ships) => { ships.forEach(ship => { $(".block-ships").append( ` -
+
${ship.symbol}
-
- - - - - - -
` ) @@ -149,31 +142,37 @@ export default (temp_engine) => { }); }); - temp_engine.add_event(".btn-close", "click", () => { - modal.close(); - }); - function plusSlides(n) { - showSlides(slideIndex += n); + function showSlides(n) { + let i; + slideIndex += n; + let slides = $(".ships-list"); + if (slideIndex > slides.length) slideIndex = 1; + if (slideIndex < 1) {slideIndex = slides.length} + for (i = 0; i < slides.length; i++) { + slides[i].style.display = "none"; } + slides[slideIndex-1].style.display = "block"; + let img = slideIndex[slideIndex - 1].children(".imgShip"); + if (n > 0) + { + img.animate({left: '250px'}) + } + else + { - temp_engine.add_event(".prev", "click", () => { - plusSlides(-1); - }); - temp_engine.add_event(".next", "click", () => { - plusSlides(1); - }); - - function showSlides(n) { - let i; - let slides = document.getElementsByClassName("ships-list"); - if (n > slides.length) {slideIndex = 1} - if (n < 1) {slideIndex = slides.length} - for (i = 0; i < slides.length; i++) { - slides[i].style.display = "none"; - } - slides[slideIndex-1].style.display = "block"; } + + } + temp_engine.add_event(".btn-close", "click", () => { + modal.close(); + }); + temp_engine.add_event(".prev", "click", () => { + showSlides(-1); + }); + temp_engine.add_event(".next", "click", () => { + showSlides(1); + }); }); temp_engine.render("templates/ships/ships.html");