icd/mt940-mbank-ts
2
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: icd:3e524fdaf83e95f1e1779d0d50700848dac10459
Branches Tags
icd:master
..
compare: icd:7e2c35da7023eb119eae8e77fbbe8b5b33c27b3a
Branches Tags
icd:master

No commits in common. "3e524fdaf83e95f1e1779d0d50700848dac10459" and "7e2c35da7023eb119eae8e77fbbe8b5b33c27b3a" have entirely different histories.
3e524fdaf8 ... 7e2c35da70

3 changed files with 55 additions and 52 deletions
Show Stats Expand all files Collapse all files

20
public/index.html
View File

@ -4,13 +4,14 @@
<title>mBank MT940 konwerter</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.fuchsia.min.css" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<section>
<h1>mBank MT940 konwerter</h1>
<button id="theme-toggle" type="button"></button>
</section>
</header>
<main>
@ -56,20 +57,17 @@
<a target="_blank" href="https://www.internet-czas-dzialac.pl/">
Fundację „Internet. Czas działać!”
</a>
<br />
i jest utrzymywana przez
i&nbsp;jest utrzymywana przez
<a target="_blank" href="https://www.sealcode.it/">Sealcode</a>
•
.
<a target="_blank" href="https://git.internet-czas-dzialac.pl/icd/mt940-mbank-ts">Kod źródłowy</a>
</p>
<p>
<small>
Wykorzystuje czcionkę
<a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a>
na&nbsp;licencji SIL Open Font License
</small>
</p>
<small>
Wykorzystuje czcionkę
<a target="_blank" href="https://brailleinstitute.org/freefont">Atkinson Hyperlegible</a>
na&nbsp;licencji SIL Open Font License
</small>
</section>
</footer>
<script src="bundle.js"></script>

71
public/styles.css
View File

@ -1,30 +1,21 @@
:root {
--pico-font-family: "Atkinson Hyperlegible", sans-serif;
--icd-rentgen-color: #99ffdd;
--success-background-color: hsl(120, 100%, 85.1%);
--success-color: hsl(120, 100%, 7.1%);
}
/* use to enforce styles for both themes */
[data-theme="dark"],
:not([data-theme="dark"]) {
--noop: none;
}
section {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
button {
width: 100%;
font-weight: bold !important;
border: none;
box-shadow: none;
}
#submit {
background-color: black;
color: var(--icd-rentgen-color);
}
#submit:hover {
background-color: var(--icd-rentgen-color);
color: black;
}
.hidden {
@ -32,45 +23,42 @@ button {
}
.success {
background-color: var(--success-background-color);
color: var(--success-color);
background-color: hsl(120, 100%, 85.1%);
padding: 2rem;
margin: 1rem;
font-size: 1.2rem;
color: hsl(120, 100%, 7.1%);
}
header,
footer {
max-width: unset !important;
background-color: black;
}
header section h1,
footer section p {
color: white;
}
footer section p a {
color: var(--icd-rentgen-color);
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
background-color: var(--pico-modal-overlay-background-color);
}
header section {
text-align: center;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
#theme-toggle {
width: auto;
background: none;
border: none;
font-size: 2rem;
}
#theme-toggle::before {
content: "☀️";
}
#theme-toggle[dark]::before {
content: "🌙";
}
#icd-logo {
height: 48px;
height: 50px;
aspect-ratio: 1200/319;
background-color: white;
mask-image: url("logo.png");
@ -88,4 +76,5 @@ figure#icd-logo-container {
padding: 1rem;
width: fit-content;
margin: 0 auto 1em auto;
border-radius: var(--pico-border-radius);
}

16
src/browser.ts
View File

@ -45,3 +45,19 @@ async function handle() {
document.querySelector("#submit")?.addEventListener("click", handle);
console.log("added handler to", document.querySelector("#submit"));
async function toggleTheme() {
const html = document.documentElement;
const toggle = document.getElementById("theme-toggle")!;
const theme = html.getAttribute("data-theme");
if (theme === "dark") {
html.removeAttribute("data-theme");
toggle.removeAttribute("dark");
} else {
html.setAttribute("data-theme", "dark");
toggle.setAttribute("dark", "");
}
}
document.querySelector("#theme-toggle")?.addEventListener("click", toggleTheme);
console.log("added handler to", document.querySelector("#theme-toggle"));