Akordeon prawie działa
This commit is contained in:
Dark Steveneq
153
assets/css/baza.css
Normal file
153
assets/css/baza.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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);
|
||||
customElements.define("akordeon-comp", Akordeon);
|
||||
35
galeria.html
35
galeria.html
@@ -7,20 +7,11 @@
|
||||
<link href="/favicon.ico" rel="favicon">
|
||||
<link href="/assets/css/main.css" rel="stylesheet">
|
||||
<link href="/assets/css/galeria.css" rel="stylesheet">
|
||||
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count"
|
||||
async src="/assets/js/count.js"></script>
|
||||
<script src="/assets/js/nawigacja.js"></script>
|
||||
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="/favicon.ico" width="64" height="64">
|
||||
<h1>MaszToZadanieDomowe.com</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/index.html">Strona główna</a></li>
|
||||
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header-comp></header-comp>
|
||||
<main>
|
||||
<h2>Galeria</h2>
|
||||
<hr>
|
||||
@@ -43,24 +34,8 @@
|
||||
<sub>Youpiter: UMIERAM</sub>
|
||||
<br><br>
|
||||
<audio src="https://youvideo.nonamesoft.xyz/youvideo/api/videofile/with_extension/2ef25519-dce3-45da-afe1-02fbd6ed8051.wav" controls></audio>
|
||||
<h6>Powered by <a href="https://youvideo.nonamesoft.xyz/">Youvideo</a></h6>
|
||||
<h6>Powered by <a href="https://youvideo.nonamesoft.xyz/">Youvideo</a></h6>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="/index.html">Strona główna</a></li>
|
||||
<li><a href="/hobby.html">Moje hobby</a></li>
|
||||
<li><a href="/galeria.html">Galeria</a></li>
|
||||
<li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<strong>Strona © Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
|
||||
</div>
|
||||
<img src="/assets/images/blahaj.png" height="128">
|
||||
</footer>
|
||||
<footer-comp></footer-comp>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
33
hobby.html
33
hobby.html
@@ -6,20 +6,11 @@
|
||||
<title>Moje Hobby - MaszToZadanieDomowe.com</title>
|
||||
<link href="/favicon.ico" rel="favicon">
|
||||
<link href="/assets/css/main.css" rel="stylesheet">
|
||||
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count"
|
||||
async src="/assets/js/count.js"></script>
|
||||
<script src="/assets/js/nawigacja.js"></script>
|
||||
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img src="/favicon.ico" width="64" height="64">
|
||||
<h1>MaszToZadanieDomowe.com</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="/index.html">Strona główna</a></li>
|
||||
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<header-comp></header-comp>
|
||||
<main>
|
||||
<h2>Moje hobby</h2>
|
||||
<hr>
|
||||
@@ -90,22 +81,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
</main>
|
||||
<footer>
|
||||
<div>
|
||||
<div>
|
||||
<ul>
|
||||
<li><a href="/index.html">Strona główna</a></li>
|
||||
<li><a href="/hobby.html">Moje hobby</a></li>
|
||||
<li><a href="/galeria.html">Galeria</a></li>
|
||||
<li><a href="https://nonamesoft.xyz/about">Kontakt</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><a href="/js-podstawy.html">JS Podstawowe Zad.</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<strong>Strona © Dark Steveneq, 2025; Nazwę wymyślił Youpiter</strong> <sub>#GradientySąSuper</sub>
|
||||
</div>
|
||||
<img src="/assets/images/blahaj.png" height="128">
|
||||
</footer>
|
||||
<footer-comp></footer-comp>
|
||||
</body>
|
||||
</html>
|
||||
@@ -6,8 +6,8 @@
|
||||
<title>JS Podstawowe Zad. - MaszToZadanieDomowe.com</title>
|
||||
<link href="/favicon.ico" rel="favicon">
|
||||
<link href="/assets/css/main.css" rel="stylesheet">
|
||||
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count"
|
||||
async src="/assets/js/count.js"></script>
|
||||
<script data-goatcounter="https://zeszyt.nonamesoft.xyz/count" async src="/assets/js/count.js"></script>
|
||||
<script src="/assets/js/nawigacja.js"></script>
|
||||
<script src="/assets/js/akordeon.js"></script>
|
||||
<script src="/assets/js/js-podstawy.js"></script>
|
||||
</head>
|
||||
@@ -42,7 +42,7 @@
|
||||
<li>
|
||||
<h4>Zmiana rozmiaru tekstu</h4>
|
||||
<hr>
|
||||
<pre class="fixed25rem" id="zad3-tekst">Przykładowy tekst</pre>
|
||||
<pre class="kod fixed25rem" id="zad3-tekst">Przykładowy tekst</pre>
|
||||
<hr>
|
||||
<strong>Rozmiar tekstu:</strong> <span id="zad3-output"></span><br>
|
||||
<input type="range" min="8" max="36" step="1" name="rozmiar" id="zad3-rozmiar" value="14" oninput="zad3ZmienRozmiar()">
|
||||
@@ -86,49 +86,10 @@
|
||||
<br>
|
||||
<li>
|
||||
<h4>Akordeon</h4>
|
||||
<akordeon state="closed">
|
||||
|
||||
</akordeon>
|
||||
<div class="akordeon">
|
||||
<span>Tytuł akordeonu</span>
|
||||
<pre>
|
||||
.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%;
|
||||
}
|
||||
}
|
||||
</pre>
|
||||
</div>
|
||||
<hr>
|
||||
<akordeon-comp>
|
||||
<h2>After polling after pooling nightshaft</h2>
|
||||
</akordeon-comp>
|
||||
</li>
|
||||
<br>
|
||||
<li>
|
||||
|
||||
Reference in New Issue
Block a user