Skip to content

Commit d983e86

Browse files
katokdoescodekatokdoescode
committed
add page with iban of poe
1 parent 243c125 commit d983e86

5 files changed

Lines changed: 298 additions & 0 deletions

File tree

‎src/pages/articles/reducing-learning-time.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: ""
3+
description: ""
4+
date: "2025-07-30"
5+
tags:
6+
[
7+
]
8+
lang: "en"
9+
slug: "reducing-learning-time-insights"
10+
layout: "~/ArticlePage.astro"
11+
---

‎src/pages/articles/ru/reducing-learning-time.mdx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
---
2+
title: ""
3+
description: ""
4+
date: "2025-07-30"
5+
tags:
6+
[
7+
]
8+
lang: "ru"
9+
slug: "reducing-learning-time-insights"
10+
layout: "~/ArticlePage.astro"
11+
---
12+
13+
14+
Мой главный инсайт за последнее время: невозможно сократить время которое человек потратит на то, чтобы научиться чему-то. Сейчас объясню.
15+
16+
## Как человек учится
17+
18+
При обучении новому навыку, каждый человек выбирает свой собственный подход к этому. Так же есть люди которые умеют учиться, и те кто уже давно ничему новому сознательно не учился.
19+
20+
Подразумевая оба факта, все равно выстраивается какой-то собственный путь обучения из позиции где приобретаемый навык отсутствует до того как новый навык будет обуздан.

‎src/pages/poe/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>Company Transfer Details</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<header class="site-header">
11+
<img src="logo.png" alt="Company logo" class="site-header__logo" />
12+
<p class="site-header__tagline">Quick transfer instructions for your donation</p>
13+
</header>
14+
<main class="card" aria-labelledby="transfer-heading">
15+
<h1 id="transfer-heading">Bank transfer card</h1>
16+
<p class="card__intro">
17+
Copy the account holder or IBAN to share accurate payment information.
18+
</p>
19+
<section class="card__fields" aria-live="polite">
20+
<article class="field">
21+
<div class="field__text">
22+
<p class="field__label">Account holder</p>
23+
<p class="field__value" id="account-name">Anita Kovalenko</p>
24+
</div>
25+
<button
26+
class="copy-button"
27+
type="button"
28+
data-copy-target="account-name"
29+
data-copy-label="Account holder"
30+
>
31+
Copy name
32+
</button>
33+
</article>
34+
<article class="field">
35+
<div class="field__text">
36+
<p class="field__label">IBAN</p>
37+
<p class="field__value" id="account-iban">DE89 3704 0044 0532 0130 00</p>
38+
</div>
39+
<button
40+
class="copy-button"
41+
type="button"
42+
data-copy-target="account-iban"
43+
data-copy-label="IBAN"
44+
>
45+
Copy IBAN
46+
</button>
47+
</article>
48+
<article class="field">
49+
<div class="field__text">
50+
<p class="field__label">Reference (optional)</p>
51+
<p class="field__value" id="payment-note">Community Relief Fund</p>
52+
</div>
53+
<button
54+
class="copy-button"
55+
type="button"
56+
data-copy-target="payment-note"
57+
data-copy-label="Reference"
58+
>
59+
Copy note
60+
</button>
61+
</article>
62+
</section>
63+
<p class="status-message" role="status" aria-live="polite" id="copy-status"></p>
64+
</main>
65+
<script>
66+
const buttons = document.querySelectorAll('[data-copy-target]');
67+
const statusEl = document.getElementById('copy-status');
68+
69+
function updateStatus(message) {
70+
statusEl.textContent = message;
71+
}
72+
73+
async function copyContent(targetId, label) {
74+
const source = document.getElementById(targetId);
75+
const text = source?.textContent?.trim();
76+
if (!text) {
77+
updateStatus(`Unable to copy ${label?.toLowerCase() ?? 'text'}.`);
78+
return;
79+
}
80+
try {
81+
if (navigator.clipboard?.writeText) {
82+
await navigator.clipboard.writeText(text);
83+
} else {
84+
const range = document.createRange();
85+
range.selectNodeContents(source);
86+
const selection = window.getSelection();
87+
selection.removeAllRanges();
88+
selection.addRange(range);
89+
document.execCommand('copy');
90+
selection.removeAllRanges();
91+
}
92+
updateStatus(`${label} copied to clipboard.`);
93+
} catch (error) {
94+
console.error(error);
95+
updateStatus(`Copy failed. Select and copy ${label} manually.`);
96+
}
97+
}
98+
99+
buttons.forEach((button) => {
100+
button.addEventListener('click', () => {
101+
copyContent(button.dataset.copyTarget, button.dataset.copyLabel);
102+
});
103+
});
104+
</script>
105+
</body>
106+
</html>

‎src/pages/poe/logo.png‎

916 KB
Loading

‎src/pages/poe/styles.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
:root {
2+
color-scheme: light dark;
3+
--font-stack: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
4+
--radius: 18px;
5+
--space: 1.25rem;
6+
--bg: #f7f7f8;
7+
--card: #ffffffcc;
8+
--text: #1d1d1f;
9+
--muted: #515154;
10+
--accent: #0057ff;
11+
--accent-text: #ffffff;
12+
--shadow: 0 20px 45px rgba(18, 38, 63, 0.16);
13+
}
14+
15+
@media (prefers-color-scheme: dark) {
16+
:root {
17+
--bg: #0f1115;
18+
--card: #1a1d24;
19+
--text: #f5f5f7;
20+
--muted: #b8bbc6;
21+
--shadow: 0 25px 50px rgba(0, 0, 0, 0.55);
22+
}
23+
}
24+
25+
* {
26+
box-sizing: border-box;
27+
}
28+
29+
body {
30+
margin: 0;
31+
min-height: 100vh;
32+
font-family: var(--font-stack);
33+
color: var(--text);
34+
background: radial-gradient(circle at top, rgba(0, 132, 255, 0.12), transparent 50%),
35+
var(--bg);
36+
display: flex;
37+
flex-direction: column;
38+
align-items: center;
39+
padding: 2rem 1.25rem 3rem;
40+
}
41+
42+
.site-header {
43+
text-align: center;
44+
margin-bottom: 1.5rem;
45+
}
46+
47+
.site-header__logo {
48+
width: min(140px, 40vw);
49+
aspect-ratio: 1 / 1;
50+
object-fit: contain;
51+
display: block;
52+
margin: 0 auto 0.75rem;
53+
}
54+
55+
.site-header__tagline {
56+
margin: 0;
57+
color: var(--muted);
58+
font-size: 0.95rem;
59+
}
60+
61+
.card {
62+
width: min(560px, 100%);
63+
background: var(--card);
64+
backdrop-filter: blur(14px);
65+
border-radius: var(--radius);
66+
box-shadow: var(--shadow);
67+
padding: 1.75rem;
68+
}
69+
70+
.card__intro {
71+
margin-top: 0.25rem;
72+
color: var(--muted);
73+
}
74+
75+
.card__fields {
76+
display: flex;
77+
flex-direction: column;
78+
gap: 1rem;
79+
margin: 1.5rem 0;
80+
}
81+
82+
.field {
83+
display: grid;
84+
grid-template-columns: minmax(0, 1fr) auto;
85+
align-items: center;
86+
gap: 0.5rem 1rem;
87+
padding: 1rem;
88+
border: 1px solid rgba(0, 0, 0, 0.08);
89+
border-radius: calc(var(--radius) / 1.5);
90+
background: var(--card);
91+
background: color-mix(in srgb, var(--card) 80%, transparent);
92+
}
93+
94+
.field__text {
95+
min-width: 0;
96+
}
97+
98+
@media (prefers-color-scheme: dark) {
99+
.field {
100+
border-color: rgba(255, 255, 255, 0.12);
101+
}
102+
}
103+
104+
.field__label {
105+
margin: 0;
106+
font-size: 0.85rem;
107+
text-transform: uppercase;
108+
letter-spacing: 0.08em;
109+
color: var(--muted);
110+
}
111+
112+
.field__value {
113+
font-size: 1.2rem;
114+
margin: 0;
115+
font-weight: 600;
116+
word-break: break-word;
117+
}
118+
119+
.copy-button {
120+
border: none;
121+
border-radius: 999px;
122+
padding: 0.65rem 1.25rem;
123+
font-weight: 600;
124+
background: var(--accent);
125+
color: var(--accent-text);
126+
cursor: pointer;
127+
transition: transform 150ms ease, box-shadow 150ms ease;
128+
box-shadow: 0 10px 25px rgba(0, 87, 255, 0.25);
129+
}
130+
131+
.copy-button:hover,
132+
.copy-button:focus-visible {
133+
transform: translateY(-1px);
134+
box-shadow: 0 15px 30px rgba(0, 87, 255, 0.35);
135+
}
136+
137+
.copy-button:focus-visible {
138+
outline: 3px solid color-mix(in srgb, var(--accent), #ffffff 25%);
139+
outline-offset: 3px;
140+
}
141+
142+
.status-message {
143+
min-height: 1.5rem;
144+
margin: 0;
145+
font-size: 0.95rem;
146+
color: var(--muted);
147+
}
148+
149+
@media (max-width: 480px) {
150+
body {
151+
padding: 1.5rem 1rem;
152+
}
153+
154+
.card {
155+
padding: 1.25rem;
156+
}
157+
158+
.field__value {
159+
font-size: 1.05rem;
160+
}
161+
}

0 commit comments

Comments
 (0)