BANK-SIMULATOR

Im Editor öffnen Veröffentlichen Sie Ihren Code

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-color: #f0f4f8;
    margin: 0;
    padding: 20px;
  }

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

.logo-circle {
    width: 80px;
    height: 80px;
    background-color: #0057e7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

.bank-name {
    margin-left: 15px;
    font-size: 28px;
    color: #333;
    font-weight: bold;
  }

/* Описание */
  .description {
    max-width: 700px;
    margin: 0 auto 20px auto;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    line-height: 1.6;
    font-size: 18px;
    color: #444;
  }

/* Кнопки */
  .btn {
    display: inline-block;
    padding: 14px 28px;
    font-size: 20px;
    color: #ffffff;
    background-color: #003366;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s;
    margin: 10px;
  }

.btn:hover {
    background-color: #0055bb;
  }

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

/* Форма для открытия счета */
  #newAccountForm {
    max-width: 700px;
    margin: 20px auto;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: none; /* по умолчанию скрыта */
  }

#newAccountForm input {
    width: calc(50% - 10px);
    padding: 10px;
    margin: 10px 0;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }

/* Раздел счетов */
  #accounts {
    max-width: 700px;
    margin: 40px auto 0 auto;
    padding: 15px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    display: none; /* по умолчанию скрыт */
  }

h3 {
    margin-top: 0;
    color: #333;
  }

/* Контейнер счета */
  .account {
    border: 1px solid #ddd;
    padding: 15px;
    margin-top: 10px;
    border-radius: 8px;
    background-color: #f9f9f9;
  }

/* Стиль для кнопок внутри счета */
  .account-btn {
    margin-top: 10px;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    transition: background-color 0.3s;
    margin-right: 10px;
  }

.account-btn:hover {
    background-color: #ddd;
  }

/* Выделить счета, которые закрыты или удалены */
  .closed {
    opacity: 0.5;
    text-decoration: line-through;
  }
</style>
</head>
<body>

<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>
</div>

<div id="newAccountForm">
  <h3>Открытие нового счета</h3>
  <input type="text" id="accountHolder" placeholder="Имя владельца" />
  <input type="text" id="initialBalance" placeholder="Начальный баланс (₽)" />
  <button class="btn" id="saveAccountBtn">Создать счет</button>
</div>

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

<script>
  const btnCreate = document.getElementById('toggleNewAccount');
  const btnShow = document.getElementById('showAccounts');
  const form = document.getElementById('newAccountForm');
  const accountsDiv = document.getElementById('accounts');
  const accountsList = document.getElementById('accountsList');

let accounts = [];

// Показывать/скрывать форму для создания счета
  btnCreate.addEventListener('click', () => {
    form.style.display = (form.style.display === 'none' || form.style.display === '') ? 'block' : 'none';
  });

// Показывать счета
  btnShow.addEventListener('click', () => {
    accountsDiv.style.display = 'block';
    form.style.display = 'none';
  });

// Создание нового счета
document.getElementById('saveAccountBtn').addEventListener('click', () => {
  const holder = document.getElementById('accountHolder').value.trim();
  const balanceStr = document.getElementById('initialBalance').value.trim();
  const balance = parseFloat(balanceStr.replace(',', '.'));

if (!holder) {
    alert('Пожалуйста, введите имя владельца.');
    return;
  }
  if (isNaN(balance) || balance < 0) {
    alert('Пожалуйста, введите корректный начальный баланс.');
    return;
  }

const newAccount = {
    id: Date.now(),
    holder: holder,
    balance: balance,
    status: 'active'
  };
  accounts.push(newAccount);
  renderAccounts();

// Очистить поля и скрыть форму
  document.getElementById('accountHolder').value = '';
  document.getElementById('initialBalance').value = '';
  form.style.display = 'none';
});

// Функция для отображения счетов
function renderAccounts() {
  accountsList.innerHTML = '';
  for (const acc of accounts) {
    const div = document.createElement('div');
    div.className = 'account' + (acc.status === 'closed' ? ' closed' : '');
    div.innerHTML = `
      <strong>Владелец:</strong> ${acc.holder}<br>
      <strong>Баланс:</strong> ${acc.balance.toFixed(2)} ₽<br>
      <button class="account-btn" onclick="closeAccount(${acc.id})">Закрыть счет</button>
    `;
    accountsList.appendChild(div);
  }
}

// Функция закрытия счета
function closeAccount(id) {
  const acc = accounts.find(a => a.id === id);
  if (acc && acc.status === 'active') {
    acc.status = 'closed';
    renderAccounts();
  }
}
</script>

</body>
</html>

BANK-SIMULATOR

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS