From af44dc6be931dfc6112b2c88716821026a398fba Mon Sep 17 00:00:00 2001 From: Dark Steveneq Date: Sun, 21 Sep 2025 21:53:34 +0200 Subject: [PATCH] =?UTF-8?q?Akordeon=20prawie=20dzia=C5=82a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/baza.css | 153 +++++++++++++++++++++++++++++++++++++ assets/css/main.css | 173 +++--------------------------------------- assets/js/akordeon.js | 68 ++++++++++++++--- galeria.html | 35 ++------- hobby.html | 33 +------- js-podstawy.html | 51 ++----------- 6 files changed, 236 insertions(+), 277 deletions(-) create mode 100644 assets/css/baza.css diff --git a/assets/css/baza.css b/assets/css/baza.css new file mode 100644 index 0000000..26901aa --- /dev/null +++ b/assets/css/baza.css @@ -0,0 +1,153 @@ +@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); + +/* Paleta kolorów: https://catppuccin.com/palette/ */ +* { + --colorRosewater: #f5e0dc; + --colorFlamingo: #f2cdcd; + --colorPink: #f5c2e7; + --colorMauve: #cba6f7; + --colorRed: #f38ba8; + --colorMaroon: #eba0ac; + --colorPeach: #fab387; + --colorYellow: #f9e2af; + --colorGreen: #a6e3a1; + --colorTeal: #94e2d5; + --colorSky: #89dceb; + --colorSaphire: #74c7ec; + --colorBlue: #89b4fa; + --colorLavender: #b4befe; + --colorText: #cdd6f4; + --colorSubtext1: #bac2de; + --colorSubtext0: #a6adc8; + --colorOverlay2: #9399b2; + --colorOverlay1: #7f849c; + --colorOverlay0: #6c7086; + --colorSurface2: #585b70; + --colorSurface1: #45475a; + --colorSurface0: #313244; + --colorBase: #1e1e2e; + --colorMantle: #181825; + --colorCrust: #11111b; +} + +/* Ważne */ +html { + font-family: "Ubuntu", sans-serif; + font-weight: 400; + font-style: normal; + font-size: 14pt; + color: var(--colorSubtext1); +} + +body { + padding: 0%; + margin: 0%; + user-select: none; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0%; +} + +/* Linki */ +a, a:visited { + font-size: large; + text-decoration: none; + color: var(--colorBlue); +} + +a:hover, a:focus { + outline: none; + text-underline-offset: 4px; + text-decoration: underline 2px var(--colorLavender); + color: var(--colorLavender); +} + +/* Przyciski i input */ +input, button { + border-radius: .4rem; + border: .2rem solid var(--colorSurface2); + background-color: var(--colorSurface1); + background: linear-gradient(180deg, + var(--colorSurface2) 0%, + var(--colorSurface2) 65%, + var(--colorSurface1) 100% + ); + color: var(--colorSubtext1); + + font-weight: bold; + font-size: 13pt; + + margin: .25rem; +} + +input:focus, +button:focus { + outline: none; + border-color: var(--colorOverlay0); +} + +button { + padding-top: .35rem; + padding-bottom: .35rem; + padding-left: .5rem; + padding-right: .5rem; +} + +button:hover { + cursor: pointer; + color: var(--colorText); + background-color: var(--colorOverlay0); + background: linear-gradient(180deg, + var(--colorOverlay0) 0%, + var(--colorOverlay0) 65%, + var(--colorSurface2) 100% + ); +} + +button:active { + background-color: var(--colorSurface1); + background: linear-gradient(180deg, + var(--colorSurface1) 0%, + var(--colorSurface1) 65%, + var(--colorSurface0) 100% + ); + color: var(--colorSubtext1); + border-color: var(--colorSurface2); + text-shadow: none; +} + +/* kod */ +pre.kod { + border-radius: .4rem; + border: .2rem solid var(--colorSurface2); + background-color: var(--colorBase); + padding: .5rem; + margin: .5rem; + overflow: scroll; +} + +/* Range */ +input[type="range"] { + -webkit-appearance: none; + appearance: none; + background-color: var(--colorSurface0); + height: 1rem; + width: 100%; +} + +input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 1rem; + height: 1rem; + background: var(--colorMauve); + cursor: pointer; +} + +input[type="range"]::-moz-range-thumb { + width: 1rem; + height: 1rem; + background: var(--colorMauve); + cursor: pointer; +} \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css index 58b2b1f..c297239 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,58 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); - - -body { - padding: 0%; - margin: 0%; - user-select: none; -} - -a, a:visited { - font-size: large; - text-decoration: none; - color: var(--colorBlue); -} - -a:hover, a:focus { - outline: none; - text-underline-offset: 4px; - text-decoration: underline 2px var(--colorLavender); - color: var(--colorLavender); -} - -h1, h2, h3, h4, h5, h6 { - margin: 0%; -} - -/* Paleta kolorów: https://catppuccin.com/palette/ */ -* { - --colorRosewater: #f5e0dc; - --colorFlamingo: #f2cdcd; - --colorPink: #f5c2e7; - --colorMauve: #cba6f7; - --colorRed: #f38ba8; - --colorMaroon: #eba0ac; - --colorPeach: #fab387; - --colorYellow: #f9e2af; - --colorGreen: #a6e3a1; - --colorTeal: #94e2d5; - --colorSky: #89dceb; - --colorSaphire: #74c7ec; - --colorBlue: #89b4fa; - --colorLavender: #b4befe; - --colorText: #cdd6f4; - --colorSubtext1: #bac2de; - --colorSubtext0: #a6adc8; - --colorOverlay2: #9399b2; - --colorOverlay1: #7f849c; - --colorOverlay0: #6c7086; - --colorSurface2: #585b70; - --colorSurface1: #45475a; - --colorSurface0: #313244; - --colorBase: #1e1e2e; - --colorMantle: #181825; - --colorCrust: #11111b; -} +@import url('baza.css'); /* Tło */ @keyframes GradientScroll { @@ -60,7 +7,7 @@ h1, h2, h3, h4, h5, h6 { background-position: 0% 50%; } 50% { - background-position: 100% 50%; + background-position: 400% 200%; } 100% { background-position: 0% 50%; @@ -68,12 +15,6 @@ h1, h2, h3, h4, h5, h6 { } html { - font-family: "Ubuntu", sans-serif; - font-weight: 400; - font-style: normal; - font-size: 14pt; - - color: var(--colorSubtext1); background-color: var(--colorMantle); background: linear-gradient(-45deg, var(--colorMauve) 0%, @@ -82,8 +23,8 @@ html { var(--colorBlue) 75%, var(--colorBlue) 100% ); - background-size: 400vw 200vh; - animation: GradientScroll 5s ease infinite; + background-size: 1000vw 1000vh; + animation: GradientScroll 40s ease infinite; } /* Header */ @@ -180,111 +121,15 @@ footer div div ul { list-style: none; } -/* Akordeon */ -.akordeon { - width: 100%; +/* Dodatkowe */ +.flex-row { + flex-grow: 1; display: inline-flex; - flex-direction: column; -} - -.akordeon.closed { - border-radius: 1rem; - background-color: var(--colorSurface0); - border: .22rem solid var(--colorSurface2); -} - -.akordeon-header { - padding: .35rem; -} - -input, button, .akordeon-header { - border-radius: .4rem; - border: .2rem solid var(--colorSurface2); - background-color: var(--colorSurface1); - background: linear-gradient(180deg, - var(--colorSurface2) 0%, - var(--colorSurface2) 65%, - var(--colorSurface1) 100% - ); - color: var(--colorSubtext1); - - font-weight: bold; - font-size: 13pt; - - margin: .25rem; -} - -input:focus, -button:focus, -.akordeon-header:focus { - outline: none; - border-color: var(--colorOverlay0); -} - -button { - padding-top: .35rem; - padding-bottom: .35rem; - padding-left: .5rem; - padding-right: .5rem; -} - -button:hover, .akordeon-header:hover { - cursor: pointer; - color: var(--colorText); - background-color: var(--colorOverlay0); - background: linear-gradient(180deg, - var(--colorOverlay0) 0%, - var(--colorOverlay0) 65%, - var(--colorSurface2) 100% - ); -} - -button:active { - background-color: var(--colorSurface1); - background: linear-gradient(180deg, - var(--colorSurface1) 0%, - var(--colorSurface1) 65%, - var(--colorSurface0) 100% - ); - color: var(--colorSubtext1); - border-color: var(--colorSurface2); - text-shadow: none; -} - -pre { - border-radius: .4rem; - border: .2rem solid var(--colorSurface2); - background-color: var(--colorBase); - padding: .5rem; - margin: .5rem; - overflow: scroll; + flex-direction: row; + gap: 1rem; } .fixed25rem { min-height: 25rem; max-height: 25rem; -} - -input[type="range"] { - -webkit-appearance: none; - appearance: none; - background-color: var(--colorSurface0); - height: 1rem; - width: 100%; -} - -input[type="range"]::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 1rem; - height: 1rem; - background: var(--colorMauve); - cursor: pointer; -} - -input[type="range"]::-moz-range-thumb { - width: 1rem; - height: 1rem; - background: var(--colorMauve); - cursor: pointer; } \ No newline at end of file diff --git a/assets/js/akordeon.js b/assets/js/akordeon.js index 95f32c5..8e18d52 100644 --- a/assets/js/akordeon.js +++ b/assets/js/akordeon.js @@ -2,23 +2,73 @@ class Akordeon extends HTMLElement { constructor() { super(); this._internals = this.attachInternals(); + this.otwarte = this.getAttribute("otwarte") == "true"; + + this.shadow = this.attachShadow({ mode: "open" }); + this.shadow.onslotchange = ev => { + console.log(ev); + }; } - get collapsed() { - return this._internals.states.has("hidden"); + get otwarte() { + return this._internals.states.has("otwarte"); } - set collapsed(flag) { + set otwarte(flag) { if (flag) { - // Existence of identifier corresponds to "true" - this._internals.states.add("hidden"); + this._internals.states.add("otwarte"); } else { - // Absence of identifier corresponds to "false" - this._internals.states.delete("hidden"); + this._internals.states.delete("otwarte"); } } - connecterCallback() { + connectedCallback() { + const styl = document.createElement("style"); + styl.textContent = ` + @import url('/assets/css/baza.css'); + + :host { + border-radius: 1rem; + + display: inline-flex; + flex-direction: column; + width: 100%; + } + + :host(:state(otwarte)) { + background-color: var(--colorSurface0); + border: .2rem solid var(--colorOverlay1); + border-top-color: transparent; + } + + button { + border: .2rem solid var(--colorOverlay2); + position: relative; + margin: 0%; + text-align: left; + } + + ::part(button)(:state(otwarte)) { + border-bottom-color: var(--colorSurface2); + scale: 1.005; + } + + slot { + display: inline; + padding: .5rem; + } + `; + this.shadow.appendChild(styl); + + const przycisk = document.createElement("button"); + przycisk.innerText = this.getAttribute("title") ?? "Nowy akordeon"; + przycisk.onclick = () => { + this.otwarte = !this.otwarte; + }; + this.shadow.appendChild(przycisk); + + this.contents = document.createElement("slot"); + this.shadow.appendChild(this.contents); } attributeChangedCallback(atrybut, poprzednio, obecnie) { @@ -26,4 +76,4 @@ class Akordeon extends HTMLElement { } } -customElements.define("akordeon", Akordeon); \ No newline at end of file +customElements.define("akordeon-comp", Akordeon); \ No newline at end of file diff --git a/galeria.html b/galeria.html index f2bc579..90cfead 100644 --- a/galeria.html +++ b/galeria.html @@ -7,20 +7,11 @@ - + + -
- -

MaszToZadanieDomowe.com

- -
+

Galeria

@@ -43,24 +34,8 @@ Youpiter: UMIERAM

-
Powered by Youvideo
+
Powered by Youvideo
- + diff --git a/hobby.html b/hobby.html index 04b2e9a..14f638e 100644 --- a/hobby.html +++ b/hobby.html @@ -6,20 +6,11 @@ Moje Hobby - MaszToZadanieDomowe.com - + + -
- -

MaszToZadanieDomowe.com

- -
+

Moje hobby

@@ -90,22 +81,6 @@
- + \ No newline at end of file diff --git a/js-podstawy.html b/js-podstawy.html index e1cb304..9eee016 100644 --- a/js-podstawy.html +++ b/js-podstawy.html @@ -6,8 +6,8 @@ JS Podstawowe Zad. - MaszToZadanieDomowe.com - + + @@ -42,7 +42,7 @@

  • Zmiana rozmiaru tekstu

    - 
    Przykładowy tekst
    + 
    Przykładowy tekst
    Rozmiar tekstu:
    @@ -86,49 +86,10 @@

  • Akordeon

    - - - -
    - Tytuł akordeonu - 
    -.wrong {
-  --offset: 5rem;
-  --timing: 3s;
-  --interp: ease;
-
-  position: relative;
-  animation: Wrong var(--timing) var(--interp); /* nwm czy dobre to być */
-}
-@keyframes Wrong { 
-        0% {
-		left: 0%;
-	}
-	14% {
-		left: -var(--offset);
-	}
-        28% {
-		left: var(--offset);
-	}
-	42% {
-		left: -var(--offset);
-	}
-        56% {
-		left: var(--offset);
-	}
-	70% {
-		left: -var(--offset);
-	}
-        84% {
-		left: var(--offset);
-	}
-	98% {
-		left: 0%;
-	}
-}
-
    -
    + +

    After polling after pooling nightshaft

    +