| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Account Closure Request - OakNorth Bank</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| :root { |
| --primary-color: #1e3a8a; |
| --secondary-color: #3b82f6; |
| --accent-color: #f59e0b; |
| --success-color: #10b981; |
| --danger-color: #ef4444; |
| --text-color: #1f2937; |
| --light-bg: #f9fafb; |
| --border-color: #e5e7eb; |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| body { |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| line-height: 1.6; |
| color: var(--text-color); |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| min-height: 100vh; |
| padding: 20px; |
| } |
| |
| .container { |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 20px; |
| } |
| |
| .header { |
| text-align: center; |
| margin-bottom: 30px; |
| color: white; |
| } |
| |
| .header h1 { |
| font-size: 2.5rem; |
| margin-bottom: 10px; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); |
| } |
| |
| .header p { |
| font-size: 1.1rem; |
| opacity: 0.9; |
| } |
| |
| .built-with { |
| position: absolute; |
| top: 20px; |
| left: 20px; |
| color: white; |
| font-size: 0.9rem; |
| opacity: 0.8; |
| text-decoration: none; |
| transition: opacity 0.3s ease; |
| } |
| |
| .built-with:hover { |
| opacity: 1; |
| } |
| |
| .card { |
| background: white; |
| border-radius: 16px; |
| box-shadow: var(--shadow); |
| overflow: hidden; |
| margin-bottom: 30px; |
| animation: slideIn 0.5s ease-out; |
| } |
| |
| @keyframes slideIn { |
| from { |
| opacity: 0; |
| transform: translateY(20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| .card-header { |
| background: var(--primary-color); |
| color: white; |
| padding: 20px; |
| text-align: center; |
| } |
| |
| .card-header h2 { |
| font-size: 1.8rem; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 10px; |
| } |
| |
| .card-body { |
| padding: 30px; |
| } |
| |
| .form-group { |
| margin-bottom: 25px; |
| } |
| |
| .form-group label { |
| display: block; |
| margin-bottom: 8px; |
| font-weight: 600; |
| color: var(--text-color); |
| } |
| |
| .form-group input, |
| .form-group select, |
| .form-group textarea { |
| width: 100%; |
| padding: 12px 15px; |
| border: 2px solid var(--border-color); |
| border-radius: 8px; |
| font-size: 1rem; |
| transition: border-color 0.3s ease, box-shadow 0.3s ease; |
| } |
| |
| .form-group input:focus, |
| .form-group select:focus, |
| .form-group textarea:focus { |
| outline: none; |
| border-color: var(--secondary-color); |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); |
| } |
| |
| .form-row { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
| gap: 20px; |
| } |
| |
| .account-section { |
| background: var(--light-bg); |
| border-radius: 12px; |
| padding: 20px; |
| margin-bottom: 20px; |
| border-left: 4px solid var(--secondary-color); |
| } |
| |
| .account-section h3 { |
| color: var(--primary-color); |
| margin-bottom: 15px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .transfer-section { |
| background: #fef3c7; |
| border-radius: 12px; |
| padding: 20px; |
| margin-bottom: 20px; |
| border-left: 4px solid var(--accent-color); |
| } |
| |
| .transfer-section h3 { |
| color: #92400e; |
| margin-bottom: 15px; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| } |
| |
| .amount-inputs { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
| gap: 15px; |
| margin-top: 15px; |
| } |
| |
| .btn { |
| padding: 12px 24px; |
| border: none; |
| border-radius: 8px; |
| font-size: 1rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.3s ease; |
| display: inline-flex; |
| align-items: center; |
| gap: 8px; |
| } |
| |
| .btn-primary { |
| background: var(--primary-color); |
| color: white; |
| } |
| |
| .btn-primary:hover { |
| background: #1d357a; |
| transform: translateY(-2px); |
| box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3); |
| } |
| |
| .btn-secondary { |
| background: var(--secondary-color); |
| color: white; |
| } |
| |
| .btn-secondary:hover { |
| background: #2563eb; |
| } |
| |
| .btn-group { |
| display: flex; |
| gap: 15px; |
| justify-content: center; |
| margin-top: 30px; |
| } |
| |
| .notification { |
| padding: 15px 20px; |
| border-radius: 8px; |
| margin-bottom: 20px; |
| display: none; |
| animation: fadeIn 0.3s ease; |
| } |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
| |
| .notification.success { |
| background: #d1fae5; |
| color: #065f46; |
| border: 1px solid #a7f3d0; |
| } |
| |
| .notification.error { |
| background: #fee2e2; |
| color: #991b1b; |
| border: 1px solid #fecaca; |
| } |
| |
| .step-indicator { |
| display: flex; |
| justify-content: center; |
| margin-bottom: 30px; |
| } |
| |
| .step { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| position: relative; |
| } |
| |
| .step:not(:last-child)::after { |
| content: ''; |
| position: absolute; |
| top: 15px; |
| left: 50%; |
| width: 100%; |
| height: 2px; |
| background: var(--border-color); |
| z-index: 0; |
| } |
| |
| .step-number { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: var(--border-color); |
| color: var(--text-color); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-weight: bold; |
| margin-bottom: 10px; |
| z-index: 1; |
| transition: all 0.3s ease; |
| } |
| |
| .step.active .step-number { |
| background: var(--primary-color); |
| color: white; |
| } |
| |
| .step.completed .step-number { |
| background: var(--success-color); |
| color: white; |
| } |
| |
| .step-label { |
| font-size: 0.9rem; |
| color: var(--text-color); |
| opacity: 0.7; |
| } |
| |
| .step.active .step-label { |
| opacity: 1; |
| font-weight: 600; |
| } |
| |
| @media (max-width: 768px) { |
| .header h1 { |
| font-size: 2rem; |
| } |
| |
| .form-row { |
| grid-template-columns: 1fr; |
| } |
| |
| .btn-group { |
| flex-direction: column; |
| } |
| |
| .btn { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
| |
| .help-text { |
| font-size: 0.85rem; |
| color: #6b7280; |
| margin-top: 5px; |
| } |
| |
| .icon-circle { |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| background: rgba(59, 130, 246, 0.1); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: var(--secondary-color); |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with">Built with anycoder</a> |
| |
| <div class="header"> |
| <h1>🏦 OakNorth Bank</h1> |
| <p>Account Closure & Fund Transfer Request</p> |
| </div> |
|
|
| <div class="notification" id="notification"></div> |
|
|
| <div class="card"> |
| <div class="card-header"> |
| <h2><i class="fas fa-file-alt"></i> Account Closure Request Form</h2> |
| </div> |
| <div class="card-body"> |
| <div class="step-indicator"> |
| <div class="step active"> |
| <div class="step-number">1</div> |
| <div class="step-label">Personal Details</div> |
| </div> |
| <div class="step"> |
| <div class="step-number">2</div> |
| <div class="step-label">Account Information</div> |
| </div> |
| <div class="step"> |
| <div class="step-number">3</div> |
| <div class="step-label">Transfer Details</div> |
| </div> |
| <div class="step"> |
| <div class="step-number">4</div> |
| <div class="step-label">Confirmation</div> |
| </div> |
| </div> |
|
|
| <form id="closureForm"> |
| <div class="form-group"> |
| <label for="fullName">Full Name</label> |
| <input type="text" id="fullName" name="fullName" placeholder="Shane [Surname]" required> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="email">Email Address</label> |
| <input type="email" id="email" name="email" placeholder="shane.surname@email.com" required> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="phone">Phone Number</label> |
| <input type="tel" id="phone" name="phone" placeholder="+44 123 456 7890" required> |
| </div> |
|
|
| <div class="account-section"> |
| <h3><i class="fas fa-credit-card"></i> Account Information</h3> |
| |
| <div class="form-group"> |
| <label for="account1">Account Number 1</label> |
| <input type="text" id="account1" name="account1" placeholder="11924734" value="11924734" required> |
| <div class="help-text">Enter the first account number you wish to close</div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="account2">Account Number 2</label> |
| <input type="text" id="account2" name="account2" placeholder="11924755" value="11924755" required> |
| <div class="help-text">Enter the second account number you wish to close</div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="reason">Reason for Closure</label> |
| <select id="reason" name="reason" required> |
| <option value="">Select a reason</option> |
| <option value="not-suitable">Accounts not suitable for my needs</option> |
| <option value="better-options">Found better banking options</option> |
| <option value="consolidation">Account consolidation</option> |
| <option value="other">Other</option> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="transfer-section"> |
| <h3><i class="fas fa-exchange-alt"></i> Fund Transfer Details</h3> |
| |
| <div class="form-group"> |
| <label for="destinationAccount">Destination Account (NatWest)</label> |
| <input type="text" id="destinationAccount" name="destinationAccount" placeholder="12345678" required> |
| <div class="help-text">Enter your NatWest account number for fund transfer</div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="sortCode">Sort Code</label> |
| <input type="text" id="sortCode" name="sortCode" placeholder="XX-XX-XX" required> |
| </div> |
|
|
| <div class="amount-inputs"> |
| <div class="form-group"> |
| <label for="amount1">Amount from Account 1 (£)</label> |
| <input type="number" id="amount1" name="amount1" placeholder="100" value="100" min="0" step="0.01"> |
| </div> |
| <div class="form-group"> |
| <label for="amount2">Amount from Account 2 (£)</label> |
| <input type="number" id="amount2" name="amount2" placeholder="200" value="200" min="0" step="0.01"> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="totalAmount">Total Transfer Amount</label> |
| <input type="text" id="totalAmount" name="totalAmount" readonly> |
| </div> |
| </div> |
|
|
| <div class="form-group"> |
| <label for="message">Additional Comments</label> |
| <textarea id="message" name="message" rows="4" placeholder="Please provide any additional information or special instructions..."></textarea> |
| </div> |
|
|
| <div class="btn-group"> |
| <button type="submit" class="btn btn-primary"> |
| <i class="fas fa-paper-plane"></i> Submit Request |
| </button> |
| <button type="reset" class="btn btn-secondary"> |
| <i class="fas fa-redo"></i> Reset Form |
| </button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const form = document.getElementById('closureForm'); |
| const notification = document.getElementById('notification'); |
| const totalAmountInput = document.getElementById('totalAmount'); |
| const amount1Input = document.getElementById('amount1'); |
| const amount2Input = document.getElementById('amount2'); |
| |
| |
| function calculateTotal() { |
| const amount1 = parseFloat(amount1Input.value) || 0; |
| const amount2 = parseFloat(amount2Input.value) || 0; |
| const total = amount1 + amount2; |
| totalAmountInput.value = total.toFixed(2); |
| } |
| |
| |
| amount1Input.addEventListener('input', calculateTotal); |
| amount2Input.addEventListener('input', calculateTotal); |
| |
| |
| calculateTotal(); |
| |
| |
| form.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| |
| const formData = new FormData(form); |
| const data = Object.fromEntries(formData.entries()); |
| |
| |
| notification.className = 'notification success'; |
| notification.innerHTML = ` |
| <i class="fas fa-check-circle"></i> |
| <strong>Request Submitted Successfully!</strong><br> |
| Your account closure request has been received. We will process your request within 24 hours and transfer the funds to your nominated account. |
| `; |
| notification.style.display = 'block'; |
| |
| |
| console.log('Form submitted:', data); |
| |
| |
| setTimeout(() => { |
| notification.innerHTML += '<br><br>Reference Number: OAK-2024-' + Math.random().toString(36).substr(2, 9).toUpperCase(); |
| }, 2000); |
| |
| |
| setTimeout(() => { |
| form.reset(); |
| calculateTotal(); |
| notification.style.display = 'none'; |
| }, 5000); |
| }); |
| |
| |
| form.addEventListener('reset', function() { |
| notification.style.display = 'none'; |
| calculateTotal(); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| }); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
