BANK SIMULATOR

Open In Editor Video Publish Your Code

<!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

Recommended

FNAF Pizzeria Simulator

BitLife Life Simulator HTML5 Game Embed Code

Henry Stickman Breaking the Bank

HTML

CSS

JS

Recommended

FNAF Pizzeria Simulator

BitLife Life Simulator HTML5 Game Embed Code

Henry Stickman Breaking the Bank

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS