SIMULATEUR DE BANQUE

646 mironovbogdan341

Ouvrir dans l'éditeur Publiez votre code

Recommandé

12 January 2025

Un code de Mikeykun

26 December 2024

Matrix est un répertoire de page d'accueil

27 September 2025

Animation de chargement CSS : flux de mémoire et réflexion

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>

CSS