feat: center main content layout

frontend/src/components/ClearHistoryModal.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import { clearAllTransactions } from '../api/transactions';
 
+const CONFIRM_WORD = 'УДАЛИТЬ';
+
 interface Props {
   onClose: () => void;
   onDone: () => void;
@@ -8,11 +10,15 @@ interface Props {
 
 export function ClearHistoryModal({ onClose, onDone }: Props) {
   const [check1, setCheck1] = useState(false);
+  const [confirmInput, setConfirmInput] = useState('');
   const [check2, setCheck2] = useState(false);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState('');
 
-  const canConfirm = check1 && check2;
+  const canConfirm =
+    check1 &&
+    confirmInput.trim().toUpperCase() === CONFIRM_WORD &&
+    check2;
 
   const handleConfirm = async () => {
     if (!canConfirm || loading) return;
@@ -59,6 +65,20 @@ export function ClearHistoryModal({ onClose, onDone }: Props) {
             </label>
           </div>
 
+          <div className="form-group">
+            <label>
+              Введите <strong>{CONFIRM_WORD}</strong> для подтверждения
+            </label>
+            <input
+              type="text"
+              value={confirmInput}
+              onChange={(e) => setConfirmInput(e.target.value)}
+              placeholder={CONFIRM_WORD}
+              className={confirmInput && confirmInput.trim().toUpperCase() !== CONFIRM_WORD ? 'input-error' : ''}
+              autoComplete="off"
+            />
+          </div>
+
           <div className="form-group form-group-checkbox clear-history-check">
             <label>
               <input

frontend/src/styles/index.css

@@ -249,6 +249,7 @@ body {
 
 .page {
   max-width: 1200px;
+  margin: 0 auto;
 }
 
 .page-header {