SIMULATORE DI BANCA

81 mironovbogdan341

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 February 2025

Un codice di bachir123

21 June 2025

Contenitore di effetti luce HTML con CSS

28 June 2025

Dashboard OMIC EST HTML Barra di navigazione laterale

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>

Consigliato

Un codice di bachir123

Contenitore di effetti luce HTML con CSS

Dashboard OMIC EST HTML Barra di navigazione laterale

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS