diff --git a/www/index.html b/www/index.html index 61a7c23..8d7b8f6 100644 --- a/www/index.html +++ b/www/index.html @@ -11,7 +11,7 @@ - - - style="display: none !important;" - --> - - - + + + + + + + + + + +

Código da Sala:

diff --git a/www/src/js/cookie/start.js b/www/src/js/cookie/start.js new file mode 100644 index 0000000..e69de29 diff --git a/www/src/js/main.js b/www/src/js/main.js index 748df25..1bdf577 100644 --- a/www/src/js/main.js +++ b/www/src/js/main.js @@ -11,8 +11,9 @@ $(() => { $("start-screen button").on("click", () => $("#click")[0].play()); $("#play").on("click", () => { - $("start-screen").remove(); - $("ui").show(); + + // $("start-screen").remove(); + // $("ui").show(); }); }); diff --git a/www/src/styles/css/ui.css b/www/src/styles/css/ui.css index 2f626a8..7db31c6 100644 --- a/www/src/styles/css/ui.css +++ b/www/src/styles/css/ui.css @@ -272,4 +272,115 @@ ui .statistic td .value { transform: scale(1); } } -*/ \ No newline at end of file +*/ + +.modal-dialog { + max-width: 100%; + height: 100vh; + padding: 0; + margin: 0; +} + +.modal-content { + height: 100%; + background-color: #f4a460; + color: #4b2e16; + font-family: "Minecraftia", cursive; +} + +.modal-header { + background-color: #d2691e; + color: white; + padding: 1rem; +} + +.modal-title { + font-size: 2rem; + font-weight: bold; +} + +.modal-body { + background-color: #ffe4b5; + padding: 2rem; + overflow: auto; + height: calc(100% - 4rem); +} + +#characterSelect { + display: flex; + flex-wrap: nowrap; + overflow-x: auto; + padding-bottom: 1rem; + gap: 15px; + scroll-snap-type: x mandatory; +} + +.character-option { + background-color: #f4a460; + border-radius: 10px; + border: 1px solid #d2691e; + padding: 0.75rem; + cursor: pointer; + transition: transform 0.3s ease; + scroll-snap-align: start; + flex-shrink: 0; + width: 120px; + text-align: center; + box-sizing: border-box; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.character-option:hover { + transform: scale(1.1); + background-color: #d2691e; +} + +.character-option img { + width: 80px; + height: 80px; + border-radius: 50%; + border: 2px solid #4b2e16; +} + +.character-option span { + margin-top: 10px; + font-weight: bold; + color: #4b2e16; + text-transform: uppercase; + font-size: 1rem; +} + +.form-label { + font-weight: bold; + color: #4b2e16; +} + +.form-control, .form-select { + background-color: #f4a460; + color: #4b2e16; + border: 1px solid #d2691e; + border-radius: 8px; + font-family: "Minecraftia", cursive; + padding: 0.75rem; + font-size: 1rem; +} + +.modal-footer { + background-color: #d2691e; + padding: 1rem; +} + +button.btn-primary { + background-color: #4b2e16; + border-color: #d2691e; + font-weight: bold; +} + +button.btn-secondary { + background-color: #f4a460; + border-color: #d2691e; + font-weight: bold; +}