Skip to content

Commit 3347174

Browse files
KARTYOM3248KARTYOM3248
committed
chore(security): replace inline onclick with addEventListener and add demo CSP meta
1 parent a5d924d commit 3347174

File tree

3 files changed

+243
-13
lines changed

3 files changed

+243
-13
lines changed

‎downloaded_homepage.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<title>Финансовый Дашборд</title>
77
<link rel="stylesheet" href="styles.css">
88
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
<!-- Recommended minimal CSP for demo pages; prefer sending this as an HTTP header in production -->
10+
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https:; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https:; object-src 'none';">
911
</head>
1012
<body>
1113
<span id="moon" data-cursor-element-id="cursor-el-3" style="font-size: 5em;">🌕</span>
@@ -15,8 +17,8 @@ <h1>💰 Финансовый Дашборд</h1>
1517
<div class="user-info">
1618
<span class="username">Пользователь</span>
1719
<div class="avatar">👤</div>
18-
<button class="btn-primary" onclick="openRegisterModal()">Регистрация</button>
19-
<button class="btn-primary" onclick="openLoginModal()">Войти</button>
20+
<button class="btn-primary" id="btn-register">Регистрация</button>
21+
<button class="btn-primary" id="btn-login">Войти</button>
2022
</div>
2123
</header>
2224

@@ -81,7 +83,7 @@ <h2>Распределение расходов</h2>
8183
<div class="transactions-section">
8284
<div class="section-header">
8385
<h2>Последние транзакции</h2>
84-
<button class="btn-primary" onclick="addTransaction()">+ Добавить</button>
86+
<button class="btn-primary" id="btn-add-transaction">+ Добавить</button>
8587
</div>
8688
<div class="transactions-list" id="transactionsList">
8789
<!-- Транзакции будут добавлены через JavaScript -->
@@ -136,7 +138,7 @@ <h2>Бюджет на месяц</h2>
136138
<!-- Модальное окно для добавления транзакции -->
137139
<div id="transactionModal" class="modal">
138140
<div class="modal-content">
139-
<span class="close" onclick="closeModal()">&times;</span>
141+
<span class="close" id="tx-close">&times;</span>
140142
<h2>Добавить транзакцию</h2>
141143
<form id="transactionForm">
142144
<div class="form-group">
@@ -173,7 +175,7 @@ <h2>Добавить транзакцию</h2>
173175
<!-- Модальное окно для входа -->
174176
<div id="loginModal" class="modal">
175177
<div class="modal-content">
176-
<span class="close" onclick="closeLoginModal()">&times;</span>
178+
<span class="close" id="login-close">&times;</span>
177179
<h2>Войти</h2>
178180
<form id="loginForm">
179181
<div class="form-group">
@@ -192,7 +194,7 @@ <h2>Войти</h2>
192194
<!-- Модальное окно для регистрации -->
193195
<div id="registerModal" class="modal">
194196
<div class="modal-content">
195-
<span class="close" onclick="closeRegisterModal()">&times;</span>
197+
<span class="close" id="register-close">&times;</span>
196198
<h2>Регистрация</h2>
197199
<form id="registerForm">
198200
<div class="form-group">

‎index.html‎

Lines changed: 221 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,221 @@
1+
<!DOCTYPE html>
2+
<html lang="ru">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Финансовый Дашборд</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
</head>
10+
<body>
11+
<span id="moon" data-cursor-element-id="cursor-el-3" style="font-size: 5em;">🌕</span>
12+
<div class="container">
13+
<header class="header">
14+
<h1>💰 Финансовый Дашборд</h1>
15+
<div class="user-info">
16+
<span class="username">Пользователь</span>
17+
<div class="avatar">👤</div>
18+
<button class="btn-primary" id="btn-register">Регистрация</button>
19+
<button class="btn-primary" id="btn-login">Войти</button>
20+
</div>
21+
</header>
22+
23+
<div class="main-photo">
24+
<img src="main-photo.jpg" alt="Главное фото" style="width:100%;border-radius:10px;box-shadow:0 6px 18px rgba(18,38,63,0.06);margin-bottom:20px;">
25+
</div>
26+
27+
<div class="dashboard">
28+
<!-- Карточки с балансами -->
29+
<div class="cards-grid">
30+
<div class="card balance-card">
31+
<div class="card-icon">💳</div>
32+
<div class="card-content">
33+
<h3>Общий баланс</h3>
34+
<p class="amount" id="totalBalance">₽ 125,450</p>
35+
<span class="change positive">+12.5% за месяц</span>
36+
</div>
37+
</div>
38+
39+
<div class="card income-card">
40+
<div class="card-icon">📈</div>
41+
<div class="card-content">
42+
<h3>Доходы</h3>
43+
<p class="amount" id="totalIncome">₽ 85,000</p>
44+
<span class="change positive">+8.2% за месяц</span>
45+
</div>
46+
</div>
47+
48+
<div class="card expense-card">
49+
<div class="card-icon">📉</div>
50+
<div class="card-content">
51+
<h3>Расходы</h3>
52+
<p class="amount" id="totalExpense">₽ 42,300</p>
53+
<span class="change negative">-5.1% за месяц</span>
54+
</div>
55+
</div>
56+
57+
<div class="card savings-card">
58+
<div class="card-icon">🏦</div>
59+
<div class="card-content">
60+
<h3>Накопления</h3>
61+
<p class="amount" id="totalSavings">₽ 82,750</p>
62+
<span class="change positive">+15.3% за месяц</span>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<!-- Графики и аналитика -->
68+
<div class="charts-section">
69+
<div class="chart-card">
70+
<h2>Динамика финансов</h2>
71+
<canvas id="financeChart"></canvas>
72+
</div>
73+
74+
<div class="chart-card">
75+
<h2>Распределение расходов</h2>
76+
<canvas id="expenseChart"></canvas>
77+
</div>
78+
</div>
79+
80+
<!-- Последние транзакции -->
81+
<div class="transactions-section">
82+
<div class="section-header">
83+
<h2>Последние транзакции</h2>
84+
<button class="btn-primary" id="btn-add-transaction">+ Добавить</button>
85+
</div>
86+
<div class="transactions-list" id="transactionsList">
87+
<!-- Транзакции будут добавлены через JavaScript -->
88+
</div>
89+
</div>
90+
91+
<!-- Бюджет -->
92+
<div class="budget-section">
93+
<h2>Бюджет на месяц</h2>
94+
<div class="budget-grid">
95+
<div class="budget-item">
96+
<div class="budget-header">
97+
<span>Продукты</span>
98+
<span class="budget-amount">₽ 15,000 / ₽ 20,000</span>
99+
</div>
100+
<div class="progress-bar">
101+
<div class="progress-fill" style="width: 75%"></div>
102+
</div>
103+
</div>
104+
<div class="budget-item">
105+
<div class="budget-header">
106+
<span>Транспорт</span>
107+
<span class="budget-amount">₽ 3,500 / ₽ 5,000</span>
108+
</div>
109+
<div class="progress-bar">
110+
<div class="progress-fill" style="width: 70%"></div>
111+
</div>
112+
</div>
113+
<div class="budget-item">
114+
<div class="budget-header">
115+
<span>Развлечения</span>
116+
<span class="budget-amount">₽ 8,200 / ₽ 10,000</span>
117+
</div>
118+
<div class="progress-bar">
119+
<div class="progress-fill" style="width: 82%"></div>
120+
</div>
121+
</div>
122+
<div class="budget-item">
123+
<div class="budget-header">
124+
<span>Здоровье</span>
125+
<span class="budget-amount">₽ 5,600 / ₽ 8,000</span>
126+
</div>
127+
<div class="progress-bar">
128+
<div class="progress-fill" style="width: 70%"></div>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
</div>
135+
136+
<!-- Модальное окно для добавления транзакции -->
137+
<div id="transactionModal" class="modal">
138+
<div class="modal-content">
139+
<span class="close" id="tx-close">&times;</span>
140+
<h2>Добавить транзакцию</h2>
141+
<form id="transactionForm">
142+
<div class="form-group">
143+
<label>Тип</label>
144+
<select id="transactionType" required>
145+
<option value="income">Доход</option>
146+
<option value="expense">Расход</option>
147+
</select>
148+
</div>
149+
<div class="form-group">
150+
<label>Категория</label>
151+
<select id="transactionCategory" required>
152+
<option value="salary">Зарплата</option>
153+
<option value="food">Продукты</option>
154+
<option value="transport">Транспорт</option>
155+
<option value="entertainment">Развлечения</option>
156+
<option value="health">Здоровье</option>
157+
<option value="other">Другое</option>
158+
</select>
159+
</div>
160+
<div class="form-group">
161+
<label>Сумма</label>
162+
<input type="number" id="transactionAmount" placeholder="0" required>
163+
</div>
164+
<div class="form-group">
165+
<label>Описание</label>
166+
<input type="text" id="transactionDescription" placeholder="Описание транзакции">
167+
</div>
168+
<button type="submit" class="btn-primary">Добавить</button>
169+
</form>
170+
</div>
171+
</div>
172+
173+
<!-- Модальное окно для входа -->
174+
<div id="loginModal" class="modal">
175+
<div class="modal-content">
176+
<span class="close" id="login-close">&times;</span>
177+
<h2>Войти</h2>
178+
<form id="loginForm">
179+
<div class="form-group">
180+
<label>Логин</label>
181+
<input type="text" id="loginUsername" placeholder="Введите логин" required>
182+
</div>
183+
<div class="form-group">
184+
<label>Пароль</label>
185+
<input type="password" id="loginPassword" placeholder="Введите пароль" required>
186+
</div>
187+
<button type="submit" class="btn-primary">Войти</button>
188+
</form>
189+
</div>
190+
</div>
191+
192+
<!-- Модальное окно для регистрации -->
193+
<div id="registerModal" class="modal">
194+
<div class="modal-content">
195+
<span class="close" id="register-close">&times;</span>
196+
<h2>Регистрация</h2>
197+
<form id="registerForm">
198+
<div class="form-group">
199+
<label>Имя пользователя</label>
200+
<input type="text" id="registerUsername" placeholder="Введите имя пользователя" required>
201+
</div>
202+
<div class="form-group">
203+
<label>Пароль</label>
204+
<input type="password" id="registerPassword" placeholder="Введите пароль" required>
205+
</div>
206+
<div class="form-group">
207+
<label>Подтвердите пароль</label>
208+
<input type="password" id="confirmPassword" placeholder="Подтвердите пароль" required>
209+
</div>
210+
<button type="submit" class="btn-primary">Зарегистрироваться</button>
211+
</form>
212+
</div>
213+
</div>
214+
215+
<footer>
216+
<p>Посетите наш сайт: <a href="https://solid-space-meme-5gr6g7jgwr7x3v4g4-8000.app.github.dev" target="_blank">Наш сайт</a></p>
217+
</footer>
218+
219+
<script src="script.js"></script>
220+
</body>
221+
</html>

‎script.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -127,13 +127,20 @@ document.addEventListener('DOMContentLoaded',()=>{
127127
// close modal when clicking outside content
128128
$('transactionModal').addEventListener('click',(e)=>{ if(e.target.id==='transactionModal') closeModal(); });
129129

130-
// Добавляем обработчики для кнопок "Регистрация" и "Войти"
131-
const registerButton = document.querySelector('.btn-primary:nth-of-type(1)');
132-
const loginButton = document.querySelector('.btn-primary:nth-of-type(2)');
133-
134-
registerButton.addEventListener('click', openRegisterModal);
135-
136-
loginButton.addEventListener('click', openLoginModal);
130+
// Attach event listeners to buttons (avoid inline handlers)
131+
const registerButton = document.getElementById('btn-register');
132+
const loginButton = document.getElementById('btn-login');
133+
const addTxButton = document.getElementById('btn-add-transaction');
134+
const txClose = document.getElementById('tx-close');
135+
const loginClose = document.getElementById('login-close');
136+
const registerClose = document.getElementById('register-close');
137+
138+
if (registerButton) registerButton.addEventListener('click', openRegisterModal);
139+
if (loginButton) loginButton.addEventListener('click', openLoginModal);
140+
if (addTxButton) addTxButton.addEventListener('click', addTransaction);
141+
if (txClose) txClose.addEventListener('click', closeModal);
142+
if (loginClose) loginClose.addEventListener('click', closeLoginModal);
143+
if (registerClose) registerClose.addEventListener('click', closeRegisterModal);
137144

138145
const loginForm = document.getElementById('loginForm');
139146
loginForm.addEventListener('submit', (e) => {

0 commit comments

Comments
 (0)