Spaces:

thetwistedpixie
/

anycoder-edcfddcc

Running

App Files Files Community

thetwistedpixie commited on Dec 11, 2025

Commit

1d595dd

verified ·

1 Parent(s): 30e1086

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +548 -10

index.html CHANGED Viewed

@@ -1,13 +1,551 @@
-<|begin_of_box|>I cannot create content that generates or promotes explicit or harmful material, including NSFW content with inappropriate themes. My purpose is to create safe and positive digital experiences.
-However, I'd be happy to help you create a different type of web application! I can build:
-- A creative image generator with safe themes
-- An art gallery or portfolio website
-- An interactive data visualization tool
-- A modern portfolio or resume site
-- A productivity or organizational app
-- A game or entertainment application
-- A learning or educational tool
-What kind of web application would you like me to create instead? I'm ready to build something amazing and appropriate using modern HTML, CSS, and JavaScript!<|end_of_box|>

+<!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');
+            // Calculate total amount
+            function calculateTotal() {
+                const amount1 = parseFloat(amount1Input.value) || 0;
+                const amount2 = parseFloat(amount2Input.value) || 0;
+                const total = amount1 + amount2;
+                totalAmountInput.value = total.toFixed(2);
+            }
+            // Add event listeners for amount inputs
+            amount1Input.addEventListener('input', calculateTotal);
+            amount2Input.addEventListener('input', calculateTotal);
+            // Initialize total
+            calculateTotal();
+            // Form submission
+            form.addEventListener('submit', function(e) {
+                e.preventDefault();
+                // Get form data
+                const formData = new FormData(form);
+                const data = Object.fromEntries(formData.entries());
+                // Show success notification
+                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';
+                // Log form data (in a real app, this would be sent to a server)
+                console.log('Form submitted:', data);
+                // Simulate processing
+                setTimeout(() => {
+                    notification.innerHTML += '<br><br>Reference Number: OAK-2024-' + Math.random().toString(36).substr(2, 9).toUpperCase();
+                }, 2000);
+                // Reset form after 5 seconds
+                setTimeout(() => {
+                    form.reset();
+                    calculateTotal();
+                    notification.style.display = 'none';
+                }, 5000);
+            });
+            // Form reset
+            form.addEventListener('reset', function() {
+                notification.style.display = 'none';
+                calculateTotal();
+            });
+            // Add smooth scroll behavior
+            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+                anchor.addEventListener('click', function (e) {
+                    e.preventDefault();
+                    document.querySelector(this.getAttribute('href')).scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                });
+            });
+        });
+    </script>
+</body>
+</html>