Simulador de banco

Abrir no Editor Video Publique Seu Código

Recomendado

5 December 2024

Animação de texto CSS: Efeito de eco

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>

Simulador de banco

Recomendado

Um código por logicalcode2

Login de hacker

Animação de texto CSS: Efeito de eco

HTML

CSS

JS

Recomendado

Um código por logicalcode2

Login de hacker

Animação de texto CSS: Efeito de eco

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS