Skip to content

Commit 83184f9

Browse files
codebdbdcodebdbd
authored
Refactor index.html for better structure and styling
1 parent 92128b4 commit 83184f9

1 file changed

Lines changed: 165 additions & 1 deletion

File tree

‎index.html‎

Lines changed: 165 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,171 @@
1212
</head>
1313
<body>
1414
<div class="card">
15-
<h1>Поддержать автора</h1>
15+
<h1>Поддержать автора</h1><!DOCTYPE html>
16+
<html lang="en">
17+
<head>
18+
<meta charset="UTF-8">
19+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
20+
<title>Support My Work</title>
21+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
22+
<style>
23+
:root {
24+
--bg-color: #f9fafb;
25+
--card-bg: #ffffff;
26+
--text-main: #111827;
27+
--text-muted: #6b7280;
28+
--accent: #2563eb;
29+
--accent-hover: #1d4ed8;
30+
--border: #e5e7eb;
31+
}
32+
33+
body {
34+
font-family: 'Inter', sans-serif;
35+
background-color: var(--bg-color);
36+
color: var(--text-main);
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
min-height: 100vh;
41+
margin: 0;
42+
padding: 20px;
43+
}
44+
45+
.container {
46+
background: var(--card-bg);
47+
max-width: 450px;
48+
width: 100%;
49+
padding: 40px;
50+
border-radius: 24px;
51+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
52+
text-align: center;
53+
border: 1px solid var(--border);
54+
}
55+
56+
.icon-box {
57+
width: 80px;
58+
height: 80px;
59+
background: #eff6ff;
60+
border-radius: 20px;
61+
margin: 0 auto 24px;
62+
display: flex;
63+
align-items: center;
64+
justify-content: center;
65+
font-size: 40px;
66+
}
67+
68+
h1 { font-size: 28px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.025em; }
69+
p { color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }
70+
71+
.btn-primary {
72+
display: block;
73+
background: var(--accent);
74+
color: white;
75+
padding: 14px 24px;
76+
border-radius: 12px;
77+
text-decoration: none;
78+
font-weight: 600;
79+
transition: background 0.2s;
80+
margin-bottom: 16px;
81+
}
82+
83+
.btn-primary:hover { background: var(--accent-hover); }
84+
85+
.divider {
86+
height: 1px;
87+
background: var(--border);
88+
margin: 32px 0;
89+
position: relative;
90+
}
91+
.divider::after {
92+
content: "or crypto";
93+
position: absolute;
94+
top: -10px;
95+
left: 50%;
96+
transform: translateX(-50%);
97+
background: white;
98+
padding: 0 12px;
99+
color: var(--text-muted);
100+
font-size: 13px;
101+
text-transform: uppercase;
102+
letter-spacing: 0.05em;
103+
}
104+
105+
.crypto-item {
106+
text-align: left;
107+
margin-bottom: 20px;
108+
}
109+
110+
.label {
111+
font-size: 12px;
112+
font-weight: 600;
113+
color: var(--text-muted);
114+
text-transform: uppercase;
115+
margin-bottom: 6px;
116+
display: block;
117+
}
118+
119+
.address-bar {
120+
background: #f3f4f6;
121+
padding: 12px 16px;
122+
border-radius: 8px;
123+
font-family: monospace;
124+
font-size: 14px;
125+
display: flex;
126+
justify-content: space-between;
127+
align-items: center;
128+
cursor: pointer;
129+
border: 1px solid transparent;
130+
transition: all 0.2s;
131+
}
132+
133+
.address-bar:hover { border-color: var(--accent); background: #fff; }
134+
135+
.copy-icon { font-size: 12px; color: var(--accent); font-weight: bold; }
136+
</style>
137+
</head>
138+
<body>
139+
140+
<div class="container">
141+
<div class="icon-box">☕</div>
142+
<h1>Support My Projects</h1>
143+
<p>If you find my work useful and want to help me keep building, I would appreciate your support.</p>
144+
145+
<a href="YOUR_KOFI_OR_PAYPAL_LINK" class="btn-primary">Buy Me a Coffee</a>
146+
147+
<div class="divider"></div>
148+
149+
<div class="crypto-item">
150+
<span class="label">Bitcoin (BTC)</span>
151+
<div class="address-bar" onclick="copyToClipboard('YOUR_BTC_ADDRESS', this)">
152+
<span class="addr">YOUR_BTC_ADDRESS</span>
153+
<span class="copy-icon">COPY</span>
154+
</div>
155+
</div>
156+
157+
<div class="crypto-item">
158+
<span class="label">Ethereum / USDT (ERC-20)</span>
159+
<div class="address-bar" onclick="copyToClipboard('YOUR_ETH_ADDRESS', this)">
160+
<span class="addr">YOUR_ETH_ADDRESS</span>
161+
<span class="copy-icon">COPY</span>
162+
</div>
163+
</div>
164+
</div>
165+
166+
<script>
167+
function copyToClipboard(text, element) {
168+
navigator.clipboard.writeText(text).then(() => {
169+
const originalText = element.querySelector('.copy-icon').innerText;
170+
element.querySelector('.copy-icon').innerText = 'COPIED!';
171+
setTimeout(() => {
172+
element.querySelector('.copy-icon').innerText = originalText;
173+
}, 2000);
174+
});
175+
}
176+
</script>
177+
178+
</body>
179+
</html>
16180
<p>Если вам нравится то, что я делаю, вы можете отправить донат:</p>
17181

18182
<a href="https://www.buymeacoffee.com/ВАШ_НИК" class="btn">Купить мне кофе ☕</a>

0 commit comments

Comments
 (0)