Simulateur bancaire

701 mironovbogdan341

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 December 2025

Simulateur de pizzeria FNAF

29 November 2025

SIMULATEUR DE BANQUE

14 September 2026

Simulateur de voiture

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Банковский Симулятор "ФинансПлюс"</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #f0f4f8, #e6f0ff);
    margin: 0;
    padding: 20px;
    min-height: 100vh;
  }

.container {
    max-width: 1200px;
    margin: 0 auto;
  }

/* Логотип и название */
  .logo {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    justify-content: center;
  }

.logo-circle {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #0057e7, #003366);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(0,87,231,0.3);
  }

.bank-name {
    margin-left: 15px;
    font-size: 32px;
    color: #003366;
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }

/* Описание */
  .description {
    max-width: 800px;
    margin: 0 auto 30px auto;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    line-height: 1.6;
    font-size: 18px;
    color: #444;
    border-left: 5px solid #0057e7;
  }

/* Кнопки */
  .btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 20px;
    color: white;
    background: linear-gradient(135deg, #003366, #0057e7);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    margin: 10px;
    box-shadow: 0 4px 10px rgba(0,51,102,0.2);
  }

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,51,102,0.3);
  }

.btn-secondary {
    background: linear-gradient(135deg, #666, #888);
  }

/* Центрирование */
  .button-container {
    text-align: center;
    margin: 30px 0;
  }

/* Формы */
  .form-container {
    max-width: 700px;
    margin: 20px auto;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    display: none;
  }

.form-container.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

.form-container h3 {
    margin-top: 0;
    color: #003366;
    border-bottom: 2px solid #0057e7;
    padding-bottom: 10px;
  }

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }

.form-row input {
    flex: 1;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    transition: border-color 0.3s;
  }

.form-row input:focus {
    outline: none;
    border-color: #0057e7;
  }

/* Раздел счетов */
  .accounts-section {
    max-width: 800px;
    margin: 40px auto;
    padding: 25px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
    display: none;
  }

.accounts-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
  }

/* Контейнер счета */
  .account {
    border: 2px solid #e0e0e0;
    padding: 20px;
    margin-top: 15px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
    transition: all 0.3s ease;
    position: relative;
  }

.account:hover {
    border-color: #0057e7;
    box-shadow: 0 4px 12px rgba(0,87,231,0.1);
  }

.account.active {
    border-left: 5px solid #28a745;
  }

.account.closed {
    border-left: 5px solid #dc3545;
    background: linear-gradient(135deg, #f8f9fa, #f0f0f0);
  }

.account-number {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #666;
    font-size: 14px;
  }

.account-balance {
    font-size: 24px;
    color: #28a745;
    font-weight: bold;
    margin: 10px 0;
  }

.account-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

.action-btn {
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    border: none;
    border-radius: 6px;
    transition: all 0.3s;
  }

.deposit-btn {
    background: #28a745;
    color: white;
  }

.withdraw-btn {
    background: #ffc107;
    color: #212529;
  }

.close-btn {
    background: #dc3545;
    color: white;
  }

.delete-btn {
    background: #6c757d;
    color: white;
  }

.transfer-btn {
    background: #007bff;
    color: white;
  }

.action-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

/* Модальное окно */
  .modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
  }

.modal-content {
    background-color: white;
    margin: 10% auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
  }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }

/* Поле выбора для перевода */
  .transfer-select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 2px solid #ddd;
    border-radius: 6px;
    margin-top: 10px;
    display: none;
  }

.transfer-select:focus {
    outline: none;
    border-color: #0057e7;
  }

/* Статистика */
  .stats {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
  }

.stat-card {
    flex: 1;
    min-width: 200px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    text-align: center;
  }

.stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #0057e7;
    margin: 10px 0;
  }

/* Уведомления */
  .notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 25px;
    background: #28a745;
    color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    animation: slideIn 0.3s ease;
    z-index: 1001;
  }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

/* Адаптивность */
  @media (max-width: 768px) {
    .form-row {
      flex-direction: column;
    }
    
    .account-actions {
      flex-direction: column;
    }
    
    .btn {
      display: block;
      width: 100%;
      margin: 10px 0;
    }
  }
</style>
</head>
<body>

<div class="container">
  
  <div class="logo">
    <div class="logo-circle">ФП</div>
    <div class="bank-name">ФинансПлюс</div>
  </div>

<div class="description">
    <h2>Добро пожаловать в симулятор банка "ФинансПлюс"!</h2>
    <p>Это интерактивный симулятор, где вы можете создавать свои счета, управлять ими и видеть, как работают банковские операции. Попробуйте открыть новый счет, пополнить баланс, снять деньги или закрыть счет!</p>
  </div>

<div class="button-container">
    <button class="btn" id="toggleNewAccount">Создать новый счет</button>
    <button class="btn" id="showAccounts">Показать мои счета</button>
    <button class="btn" id="showStats">Статистика</button>
  </div>

<div id="statsSection" class="form-container">
    <h3>Статистика</h3>
    <div class="stats">
      <div class="stat-card">
        <div>Всего счетов</div>
        <div class="stat-value" id="totalAccounts">0</div>
      </div>
      <div class="stat-card">
        <div>Активные счета</div>
        <div class="stat-value" id="activeAccounts">0</div>
      </div>
      <div class="stat-card">
        <div>Общий баланс</div>
        <div class="stat-value" id="totalBalance">0 ₽</div>
      </div>
    </div>
  </div>

<div id="newAccountForm" class="form-container">
    <h3>Открытие нового счета</h3>
    <div class="form-row">
      <input type="text" id="accountHolder" placeholder="Имя владельца *" />
    </div>
    <div class="form-row">
      <input type="number" id="initialBalance" placeholder="Начальный баланс (₽) *" min="0" step="0.01" />
      <input type="text" id="accountType" placeholder="Тип счета (например, Дебетовый)" />
    </div>
    <button class="btn" id="saveAccountBtn">Создать счет</button>
  </div>

<div id="accountsSection" class="accounts-section">
    <h3>Ваши счета</h3>
    <div id="accountsList">
      
    </div>
  </div>
</div>

<div id="operationModal" class="modal">
  <div class="modal-content">
    <h3 id="modalTitle">Операция</h3>
    <div class="form-row">
      <input type="number" id="operationAmount" placeholder="Сумма (₽)" min="0" step="0.01" />
    </div>
    <select id="transferAccount" class="transfer-select">
      <option value="">Выберите счет для перевода</option>
    </select>
    <div class="modal-actions">
      <button class="btn" id="confirmOperation">Подтвердить</button>
      <button class="btn btn-secondary" id="cancelOperation">Отмена</button>
    </div>
  </div>
</div>

// DOM элементы
  const elements = {
    toggleNewAccount: document.getElementById('toggleNewAccount'),
    showAccounts: document.getElementById('showAccounts'),
    showStats: document.getElementById('showStats'),
    newAccountForm: document.getElementById('newAccountForm'),
    accountsSection: document.getElementById('accountsSection'),
    statsSection: document.getElementById('statsSection'),
    accountHolder: document.getElementById('accountHolder'),
    initialBalance: document.getElementById('initialBalance'),
    accountType: document.getElementById('accountType'),
    saveAccountBtn: document.getElementById('saveAccountBtn'),
    accountsList: document.getElementById('accountsList'),
    operationModal: document.getElementById('operationModal'),
    modalTitle: document.getElementById('modalTitle'),
    operationAmount: document.getElementById('operationAmount'),
    transferAccount: document.getElementById('transferAccount'),
    confirmOperation: document.getElementById('confirmOperation'),
    cancelOperation: document.getElementById('cancelOperation'),
    totalAccounts: document.getElementById('totalAccounts'),
    activeAccounts: document.getElementById('activeAccounts'),
    totalBalance: document.getElementById('totalBalance')
  };

// Инициализация приложения
  function init() {
    attachEventListeners();
    updateStats();
    
    // Проверяем целостность данных
    if (!Array.isArray(accounts)) {
      accounts = [];
      saveAccounts();
    }
  }

// Привязка обработчиков событий
  function attachEventListeners() {
    elements.toggleNewAccount.addEventListener('click', toggleNewAccountForm);
    elements.showAccounts.addEventListener('click', showAccountsSection);
    elements.showStats.addEventListener('click', showStatsSection);
    elements.saveAccountBtn.addEventListener('click', createNewAccount);
    elements.confirmOperation.addEventListener('click', processOperation);
    elements.cancelOperation.addEventListener('click', closeModal);
    
    // Закрытие модального окна при клике вне его
    window.addEventListener('click', (event) => {
      if (event.target === elements.operationModal) {
        closeModal();
      }
    });
  }

// Показать/скрыть форму создания счета
  function toggleNewAccountForm() {
    elements.newAccountForm.classList.toggle('active');
    elements.accountsSection.classList.remove('active');
    elements.statsSection.classList.remove('active');
  }

// Показать раздел счетов
  function showAccountsSection() {
    elements.accountsSection.classList.add('active');
    elements.newAccountForm.classList.remove('active');
    elements.statsSection.classList.remove('active');
    renderAccounts();
  }

// Показать статистику
  function showStatsSection() {
    elements.statsSection.classList.add('active');
    elements.newAccountForm.classList.remove('active');
    elements.accountsSection.classList.remove('active');
    updateStats();
  }

// Создание нового счета
  function createNewAccount() {
    const holder = elements.accountHolder.value.trim();
    const balanceStr = elements.initialBalance.value;
    const balance = balanceStr ? parseFloat(balanceStr) : 0;
    const type = elements.accountType.value.trim() || 'Дебетовый';

if (!holder) {
      showNotification('Введите имя владельца счета', 'error');
      return;
    }

if (isNaN(balance) || balance < 0) {
      showNotification('Введите корректную сумму для начального баланса', 'error');
      return;
    }

const account = {
      id: Date.now() + Math.random(), // Уникальный ID
      number: generateAccountNumber(),
      holder: holder,
      balance: balance,
      type: type,
      status: 'active',
      createdAt: new Date().toISOString(),
      transactions: []
    };

accounts.push(account);
    saveAccounts();
    renderAccounts();
    updateStats();
    
    // Очистка формы
    elements.accountHolder.value = '';
    elements.initialBalance.value = '';
    elements.accountType.value = '';
    
    showNotification(`Счет №${account.number} успешно создан! Баланс: ${balance.toFixed(2)} ₽`, 'success');
    elements.newAccountForm.classList.remove('active');
  }

// Генерация номера счета
  function generateAccountNumber() {
    return '40702' + Math.floor(1000000000 + Math.random() * 9000000000).toString();
  }

// Отображение счетов
  function renderAccounts() {
    elements.accountsList.innerHTML = '';
    
    if (accounts.length === 0) {
      elements.accountsList.innerHTML = '<p style="text-align: center; color: #666;">У вас пока нет счетов</p>';
      return;
    }

// Сортируем счета: активные сначала, потом закрытые
    const sortedAccounts = [...accounts].sort((a, b) => {
      if (a.status === 'active' && b.status !== 'active') return -1;
      if (a.status !== 'active' && b.status === 'active') return 1;
      return b.id - a.id; // Новые сверху
    });

sortedAccounts.forEach(account => {
      const accountElement = document.createElement('div');
      accountElement.className = `account ${account.status}`;
      
      accountElement.innerHTML = `
        <div class="account-number">№ ${account.number}</div>
        <strong>Владелец:</strong> ${account.holder}<br>
        <strong>Тип счета:</strong> ${account.type}<br>
        <strong>Статус:</strong> ${account.status === 'active' ? 'Активный' : 'Закрытый'}<br>
        <div class="account-balance">${account.balance.toFixed(2)} ₽</div>
        <div class="account-actions">
          ${account.status === 'active' ? `
            <button class="action-btn deposit-btn" onclick="showOperationModal(${account.id}, 'deposit')">Пополнить</button>
            <button class="action-btn withdraw-btn" onclick="showOperationModal(${account.id}, 'withdraw')">Снять</button>
            <button class="action-btn transfer-btn" onclick="showOperationModal(${account.id}, 'transfer')">Перевести</button>
            <button class="action-btn close-btn" onclick="closeAccount(${account.id})">Закрыть</button>
          ` : ''}
          <button class="action-btn delete-btn" onclick="deleteAccount(${account.id})">Удалить</button>
        </div>
        <div style="margin-top: 10px; font-size: 12px; color: #666;">
          Создан: ${new Date(account.createdAt).toLocaleDateString()}
          ${account.transactions.length > 0 ? `<br>Операций: ${account.transactions.length}` : ''}
        </div>
      `;
      
      elements.accountsList.appendChild(accountElement);
    });
  }

// Показать модальное окно операции
  function showOperationModal(accountId, operation) {
    currentAccountId = accountId;
    currentOperation = operation;
    
    const account = accounts.find(a => a.id === accountId);
    if (!account) {
      showNotification('Счет не найден', 'error');
      return;
    }

// Устанавливаем заголовок
    const titles = {
      'deposit': `Пополнение счета №${account.number}`,
      'withdraw': `Снятие средств со счета №${account.number}`,
      'transfer': `Перевод средств со счета №${account.number}`
    };
    elements.modalTitle.textContent = titles[operation] || 'Операция';
    
    // Очищаем поля
    elements.operationAmount.value = '';
    
    // Настройка для перевода
    if (operation === 'transfer') {
      elements.transferAccount.style.display = 'block';
      populateTransferAccounts(accountId);
    } else {
      elements.transferAccount.style.display = 'none';
    }
    
    // Показываем модальное окно
    elements.operationModal.style.display = 'block';
    
    // Фокусируемся на поле ввода суммы
    setTimeout(() => {
      elements.operationAmount.focus();
    }, 100);
  }

// Заполнить список счетов для перевода
  function populateTransferAccounts(excludeAccountId) {
    const select = elements.transferAccount;
    
    // Очищаем все опции кроме первой
    while (select.options.length > 1) {
      select.remove(1);
    }
    
    // Получаем активные счета (кроме текущего)
    const availableAccounts = accounts.filter(acc => 
      acc.id !== excludeAccountId && acc.status === 'active'
    );
    
    if (availableAccounts.length === 0) {
      const option = document.createElement('option');
      option.value = '';
      option.textContent = 'Нет доступных счетов для перевода';
      option.disabled = true;
      select.appendChild(option);
      select.disabled = true;
      return;
    }
    
    select.disabled = false;
    
    // Добавляем доступные счета
    availableAccounts.forEach(acc => {
      const option = document.createElement('option');
      option.value = acc.id;
      option.textContent = `${acc.holder} - ${acc.number.slice(-4)} (${acc.balance.toFixed(2)} ₽)`;
      select.appendChild(option);
    });
  }

// Обработка операции
  function processOperation() {
    const amount = parseFloat(elements.operationAmount.value);
    const account = accounts.find(a => a.id === currentAccountId);
    
    if (!account) {
      showNotification('Счет не найден', 'error');
      closeModal();
      return;
    }

if (isNaN(amount) || amount <= 0) {
      showNotification('Введите корректную сумму', 'error');
      return;
    }

switch(currentOperation) {
      case 'deposit':
        deposit(account, amount);
        break;
      case 'withdraw':
        withdraw(account, amount);
        break;
      case 'transfer':
        const targetAccountId = parseInt(elements.transferAccount.value);
        
        if (!targetAccountId) {
          showNotification('Выберите счет для перевода', 'error');
          return;
        }
        
        const targetAccount = accounts.find(a => a.id === targetAccountId);
        if (targetAccount) {
          // Проверяем, что это не перевод на тот же счет
          if (targetAccountId === currentAccountId) {
            showNotification('Нельзя переводить на тот же счет', 'error');
            return;
          }
          transfer(account, targetAccount, amount);
        } else {
          showNotification('Выбранный счет не найден', 'error');
          return;
        }
        break;
      default:
        showNotification('Неизвестная операция', 'error');
        return;
    }

closeModal();
  }

// Закрыть модальное окно
  function closeModal() {
    elements.operationModal.style.display = 'none';
    elements.operationAmount.value = '';
    elements.transferAccount.value = '';
    elements.transferAccount.style.display = 'none';
    currentOperation = null;
    currentAccountId = null;
  }

// Пополнение счета
  function deposit(account, amount) {
    account.balance += amount;
    addTransaction(account, 'deposit', amount);
    saveAccounts();
    renderAccounts();
    updateStats();
    showNotification(`Счет пополнен на ${amount.toFixed(2)} ₽. Новый баланс: ${account.balance.toFixed(2)} ₽`, 'success');
  }

// Снятие средств
  function withdraw(account, amount) {
    if (account.balance < amount) {
      showNotification('Недостаточно средств на счете', 'error');
      return;
    }
    
    account.balance -= amount;
    addTransaction(account, 'withdraw', amount);
    saveAccounts();
    renderAccounts();
    updateStats();
    showNotification(`Снято ${amount.toFixed(2)} ₽. Новый баланс: ${account.balance.toFixed(2)} ₽`, 'success');
  }

// Перевод средств
  function transfer(fromAccount, toAccount, amount) {
    if (fromAccount.balance < amount) {
      showNotification('Недостаточно средств для перевода', 'error');
      return;
    }

fromAccount.balance -= amount;
    toAccount.balance += amount;
    
    addTransaction(fromAccount, 'transfer_out', amount, toAccount.number);
    addTransaction(toAccount, 'transfer_in', amount, fromAccount.number);
    
    saveAccounts();
    renderAccounts();
    updateStats();
    showNotification(`Переведено ${amount.toFixed(2)} ₽ на счет ${toAccount.holder}. Ваш новый баланс: ${fromAccount.balance.toFixed(2)} ₽`, 'success');
  }

// Добавление транзакции
  function addTransaction(account, type, amount, targetAccount = null) {
    const transaction = {
      id: Date.now(),
      type: type,
      amount: amount,
      date: new Date().toISOString(),
      targetAccount: targetAccount,
      balanceAfter: account.balance,
      description: getTransactionDescription(type, amount, targetAccount)
    };
    
    account.transactions.unshift(transaction);
  }

// Получить описание транзакции
  function getTransactionDescription(type, amount, targetAccount) {
    const descriptions = {
      'deposit': `Пополнение на ${amount.toFixed(2)} ₽`,
      'withdraw': `Снятие ${amount.toFixed(2)} ₽`,
      'transfer_out': `Перевод ${amount.toFixed(2)} ₽ на счет ${targetAccount}`,
      'transfer_in': `Поступление ${amount.toFixed(2)} ₽ со счета ${targetAccount}`
    };
    return descriptions[type] || 'Операция';
  }

// Закрытие счета
  function closeAccount(accountId) {
    const account = accounts.find(a => a.id === accountId);
    if (!account) return;
    
    if (account.balance > 0) {
      if (!confirm(`На счете осталось ${account.balance.toFixed(2)} ₽. Вы уверены, что хотите закрыть счет?`)) {
        return;
      }
    } else if (!confirm('Вы уверены, что хотите закрыть этот счет?')) {
      return;
    }
    
    if (account && account.status === 'active') {
      account.status = 'closed';
      saveAccounts();
      renderAccounts();
      updateStats();
      showNotification('Счет успешно закрыт', 'success');
    }
  }

// Удаление счета
  function deleteAccount(accountId) {
    if (!confirm('Вы уверены, что хотите удалить этот счет? Это действие нельзя отменить.')) return;
    
    const index = accounts.findIndex(a => a.id === accountId);
    if (index !== -1) {
      accounts.splice(index, 1);
      saveAccounts();
      renderAccounts();
      updateStats();
      showNotification('Счет удален', 'success');
    }
  }

// Обновление статистики
  function updateStats() {
    const total = accounts.length;
    const active = accounts.filter(a => a.status === 'active').length;
    const totalBalance = accounts.reduce((sum, acc) => sum + acc.balance, 0);
    
    elements.totalAccounts.textContent = total;
    elements.activeAccounts.textContent = active;
    elements.totalBalance.textContent = totalBalance.toFixed(2) + ' ₽';
  }

// Сохранение счетов в localStorage
  function saveAccounts() {
    localStorage.setItem('bankAccounts', JSON.stringify(accounts));
  }

// Показать уведомление
  function showNotification(message, type = 'info') {
    // Удаляем предыдущие уведомления
    const oldNotifications = document.querySelectorAll('.notification');
    oldNotifications.forEach(notif => notif.remove());
    
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    
    // Цвета для разных типов уведомлений
    const colors = {
      'success': '#28a745',
      'error': '#dc3545',
      'info': '#007bff',
      'warning': '#ffc107'
    };
    
    notification.style.background = colors[type] || colors.info;
    
    document.body.appendChild(notification);
    
    // Автоматическое скрытие
    setTimeout(() => {
      notification.style.opacity = '0';
      notification.style.transform = 'translateX(100%)';
      setTimeout(() => {
        if (notification.parentNode) {
          notification.remove();
        }
      }, 300);
    }, 3000);
  }

// Инициализация при загрузке
  document.addEventListener('DOMContentLoaded', init);
</script>

</body>
</html>

CSS