Skip to content

🤖 Cannot save fiddle #2135

New issue
New issue
Open
Open
🤖 Cannot save fiddle#2135
Assignees
oskarkrawczyk
@99blakeD99

Description

@99blakeD99
99blakeD99
opened on Jul 17, 2025

Error code

ERRW:1.0:K1:PRMSO.11:AS

Were you logged in?

Yes

Your username (if logged in)

99blakeD99

Your HTML

<!-- Header -->
<header class="header">
    <div class="logo">FSCompliance</div>
    <div class="header-right">
        <input type="search" class="search-box" placeholder="🔍 Search regulations, requirements...">
        <div class="alert-badge">🔔 Alerts: 3</div>
        <div class="user-info">
            👤 S.Chen
            <span style="margin-left: 0.5rem;">⚙️</span>
        </div>
    </div>
</header>

<!-- Main Container -->
<div class="main-container">
    <!-- Sidebar Navigation -->
    <nav class="sidebar">
        <a href="#" class="nav-item active" onclick="showLanding()">🏠 Home</a>
        <a href="#" class="nav-item" onclick="showDashboard()">📊 Dashboard</a>
        <a href="#" class="nav-item" onclick="showAnalysis()">🔍 Analysis Tools</a>
        <a href="#" class="nav-item" onclick="showMCPTools()">🤖 MCP Integration</a>
        <a href="#" class="nav-item">📈 Monitoring</a>
        <a href="#" class="nav-item">📋 Reports</a>
        <a href="#" class="nav-item">⚙️ Settings</a>
        <a href="#" class="nav-item">❓ Help & Support</a>
    </nav>

    <!-- Main Content -->
    <main class="content">
        <!-- Landing Page View -->
        <div id="landing-view">
            <div style="text-align: center; max-width: 800px; margin: 3rem auto;">
                <h1 style="font-size: 3rem; color: var(--primary-blue); margin-bottom: 1rem; font-weight: 700;">
                    AI-Native Compliance Intelligence
                </h1>
                <p style="font-size: 1.25rem; color: var(--text-gray); margin-bottom: 3rem; line-height: 1.5;">
                    Ask any compliance question and get instant, expert-backed analysis powered by the FCA Handbook
                </p>
                
                <!-- Compliance Question Interface -->
                <div style="background: var(--white); border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); margin-bottom: 3rem;">
                    <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
                        <div style="background: var(--light-blue); color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 1rem; font-size: 1.5rem;">
                            🤖
                        </div>
                        <h3 style="color: var(--primary-blue); margin: 0;">Ask FSCompliance</h3>
                    </div>
                    
                    <div style="position: relative;">
                        <textarea 
                            id="compliance-question" 
                            placeholder="Ask me anything about FCA compliance... 

For example:
• Does our customer onboarding process comply with COBS 2.1.1?
• What are the key requirements for Consumer Duty implementation?
• How should we handle professional client categorization?
• What documentation is needed for regulatory examinations?"
                            style="width: 100%; min-height: 150px; padding: 1.5rem; border: 2px solid var(--border-gray); border-radius: 8px; font-size: 1rem; resize: vertical; line-height: 1.5;"
                            onfocus="this.style.borderColor='var(--light-blue)'"
                            onblur="this.style.borderColor='var(--border-gray)'"
                        ></textarea>
                        <div style="position: absolute; bottom: 1rem; right: 1rem; background: var(--light-gray); padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; color: var(--text-gray);">
                            Powered by FSCompliance AI
                        </div>
                    </div>
                    
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem;">
                        <div style="display: flex; gap: 1rem; align-items: center;">
                            <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-gray);">
                                <input type="checkbox" checked> Include regulatory citations
                            </label>
                            <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-gray);">
                                <input type="checkbox" checked> Show confidence scores
                            </label>
                        </div>
                        <button 
                            class="btn btn-primary" 
                            onclick="askComplianceQuestion()"
                            style="padding: 1rem 2rem; font-size: 1rem; font-weight: 600;"
                        >
                            🔍 Ask Question
                        </button>
                    </div>
                </div>

                <!-- Quick Action Cards -->
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 3rem;">
                    <div class="status-card" style="cursor: pointer;" onclick="showAnalysis()">
                        <div style="text-align: center;">
                            <div style="font-size: 2rem; margin-bottom: 0.5rem;">📄</div>
                            <h3 style="color: var(--primary-blue); margin-bottom: 0.5rem;">Analyze Document</h3>
                            <p style="color: var(--text-gray); font-size: 0.9rem;">Upload policies for comprehensive compliance analysis</p>
                        </div>
                    </div>
                    <div class="status-card" style="cursor: pointer;" onclick="showDashboard()">
                        <div style="text-align: center;">
                            <div style="font-size: 2rem; margin-bottom: 0.5rem;">📊</div>
                            <h3 style="color: var(--primary-blue); margin-bottom: 0.5rem;">View Dashboard</h3>
                            <p style="color: var(--text-gray); font-size: 0.9rem;">Monitor compliance status and regulatory changes</p>
                        </div>
                    </div>
                    <div class="status-card" style="cursor: pointer;" onclick="showMCPTools()">
                        <div style="text-align: center;">
                            <div style="font-size: 2rem; margin-bottom: 0.5rem;">🤖</div>
                            <h3 style="color: var(--primary-blue); margin-bottom: 0.5rem;">AI Integration</h3>
                            <p style="color: var(--text-gray); font-size: 0.9rem;">Connect AI agents to compliance intelligence</p>
                        </div>
                    </div>
                </div>

                <!-- Trust Indicators -->
                <div style="display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; color: var(--text-gray); font-size: 0.9rem;">
                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                        <span style="color: var(--success-green);">✅</span>
                        FCA Handbook Trained
                    </div>
                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                        <span style="color: var(--success-green);">✅</span>
                        Open Source & Transparent
                    </div>
                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                        <span style="color: var(--success-green);">✅</span>
                        Enterprise Ready
                    </div>
                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                        <span style="color: var(--success-green);">✅</span>
                        MCP Compatible
                    </div>
                </div>
            </div>

            <!-- Response Area -->
            <div id="question-response" style="display: none; max-width: 800px; margin: 2rem auto; background: var(--white); border-radius: 12px; padding: 2rem; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);">
                <div style="display: flex; align-items: center; margin-bottom: 1.5rem;">
                    <div style="background: var(--success-green); color: white; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-right: 1rem;">
                        ✅
                    </div>
                    <h3 style="color: var(--primary-blue); margin: 0;">Compliance Analysis</h3>
                    <span style="margin-left: auto; color: var(--text-gray); font-size: 0.9rem;">Response time: 2.3s | Confidence: 94%</span>
                </div>
                
                <div id="response-content">
                    <!-- Response will be inserted here -->
                </div>
                
                <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-gray);">
                    <div style="display: flex; gap: 1rem;">
                        <button class="btn btn-secondary" onclick="showDashboard()">View Full Dashboard</button>
                        <button class="btn btn-secondary" onclick="askAnotherQuestion()">Ask Another Question</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Dashboard View -->
        <div id="dashboard-view" style="display: none;">
            <h1 style="margin-bottom: 2rem; color: var(--primary-blue);">Compliance Dashboard</h1>
            
            <!-- Status Cards -->
            <div class="status-cards">
                <div class="status-card">
                    <h3>Compliance Score</h3>
                    <div class="status-value" style="color: var(--warning-orange);">87%</div>
                    <div class="status-label status-good">🟢 Good</div>
                </div>
                <div class="status-card">
                    <h3>Active Alerts</h3>
                    <div class="status-value" style="color: var(--warning-orange);">3</div>
                    <div class="status-label status-warning">🟡 Review</div>
                </div>
                <div class="status-card">
                    <h3>Regulatory Changes</h3>
                    <div class="status-value" style="color: var(--light-blue);">2</div>
                    <div class="status-label status-info">🔵 New</div>
                </div>
                <div class="status-card">
                    <h3>Last Analysis</h3>
                    <div class="status-value" style="color: var(--success-green); font-size: 1.25rem;">2 hours ago</div>
                    <div class="status-label status-complete">✅ Complete</div>
                </div>
            </div>

            <!-- Main Content Grid -->
            <div class="content-grid">
                <!-- Recent Regulatory Changes -->
                <div class="content-panel">
                    <div class="panel-header">Recent Regulatory Changes</div>
                    <div class="panel-content">
                        <div class="change-item">
                            <div class="change-title">FCA PS23/8: Consumer Duty Implementation</div>
                            <div class="change-meta">
                                <span>Impact: <strong>Medium</strong></span>
                                <span>Status: <strong>Review Required</strong></span>
                            </div>
                            <p style="font-size: 0.875rem; color: var(--text-gray);">New guidance on consumer duty implementation affecting client communication requirements.</p>
                        </div>
                        <div class="change-item">
                            <div class="change-title">FCA CP23/20: SMCR Updates</div>
                            <div class="change-meta">
                                <span>Impact: <strong>Low</strong></span>
                                <span>Status: <strong>Auto-Monitored</strong></span>
                            </div>
                            <p style="font-size: 0.875rem; color: var(--text-gray);">Consultation on Senior Managers and Certification Regime updates.</p>
                        </div>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary">View All Changes</a>
                        </div>
                    </div>
                </div>

                <!-- Compliance Gaps -->
                <div class="content-panel">
                    <div class="panel-header">Compliance Gaps Requiring Action</div>
                    <div class="panel-content">
                        <div class="gap-item">
                            <div class="risk-indicator risk-high"></div>
                            <div class="gap-content">
                                <div class="gap-title">High: COBS 2.1.1 - Client Information</div>
                                <div class="gap-reference">Missing enhanced due diligence procedures</div>
                            </div>
                        </div>
                        <div class="gap-item">
                            <div class="risk-indicator risk-medium"></div>
                            <div class="gap-content">
                                <div class="gap-title">Medium: SYSC 3.1 - Risk Management</div>
                                <div class="gap-reference">Incomplete risk framework documentation</div>
                            </div>
                        </div>
                        <div class="gap-item">
                            <div class="risk-indicator risk-low"></div>
                            <div class="gap-content">
                                <div class="gap-title">Low: PRIN 6 - Customer Care</div>
                                <div class="gap-reference">Minor process documentation updates needed</div>
                            </div>
                        </div>
                        <div class="btn-group">
                            <a href="#" class="btn btn-primary">View All Gaps</a>
                            <a href="#" class="btn btn-secondary">Generate Report</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Analysis Tools View -->
        <div id="analysis-view" class="analysis-interface">
            <div class="panel-header">Policy Document Analysis</div>
            <div class="panel-content">
                <div class="upload-area">
                    <div style="font-size: 1.5rem; margin-bottom: 1rem; color: var(--text-gray);">📁</div>
                    <h3 style="margin-bottom: 1rem;">Upload Document for Analysis</h3>
                    <p style="color: var(--text-gray); margin-bottom: 1rem;">Drag and drop your policy document here, or click to browse</p>
                    <button class="btn btn-primary">Choose File</button>
                </div>

                <div class="analysis-options">
                    <div class="form-group">
                        <label>Analysis Type</label>
                        <select>
                            <option>Comprehensive Analysis</option>
                            <option>Gap Detection Only</option>
                            <option>Risk Assessment Only</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Regulatory Focus</label>
                        <select>
                            <option>FCA Handbook (All)</option>
                            <option>COBS - Conduct of Business</option>
                            <option>SYSC - Senior Management</option>
                            <option>PRIN - Principles</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Priority Level</label>
                        <select>
                            <option>All Requirements</option>
                            <option>High Priority Only</option>
                            <option>Critical Requirements</option>
                        </select>
                    </div>
                </div>

                <div class="btn-group">
                    <button class="btn btn-primary" onclick="showResults()">🔍 Analyze Document</button>
                    <button class="btn btn-secondary">⚙️ Advanced Options</button>
                </div>

                <!-- Results Panel -->
                <div id="results-panel" class="results-panel">
                    <div style="display: flex; justify-content: between; align-items: center; margin-bottom: 1.5rem;">
                        <h3>Analysis Results: Customer_Onboarding_Policy_v2.3.pdf</h3>
                        <span style="color: var(--text-gray);">Analyzed: 2024-12-25 14:30 | Confidence: 94% | Processing: 2.3s</span>
                    </div>

                    <div class="score-display">
                        <div class="score-value">78/100</div>
                        <div class="score-label">Overall Compliance Score</div>
                        <div class="progress-bar">
                            <div class="progress-fill" style="width: 78%;"></div>
                        </div>
                    </div>

                    <div class="findings-grid">
                        <div class="finding-card">
                            <div class="finding-number finding-met">23</div>
                            <div>Requirements Met</div>
                        </div>
                        <div class="finding-card">
                            <div class="finding-number finding-partial">8</div>
                            <div>Partial Compliance</div>
                        </div>
                        <div class="finding-card">
                            <div class="finding-number finding-critical">4</div>
                            <div>Gaps Identified</div>
                        </div>
                        <div class="finding-card">
                            <div class="finding-number finding-recommendations">12</div>
                            <div>Recommendations</div>
                        </div>
                    </div>

                    <div class="btn-group">
                        <button class="btn btn-primary">📊 Detailed Report</button>
                        <button class="btn btn-secondary">📋 Gap Analysis</button>
                        <button class="btn btn-secondary">📈 Risk Assessment</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- MCP Tools Panel -->
        <div id="mcp-panel" class="mcp-panel">
            <div class="panel-header">
                AI Agent Integration
                <span class="mcp-status" style="float: right;">🤖 MCP Status: ✅</span>
            </div>
            <div class="mcp-tools-grid">
                <div class="mcp-tool">
                    <div class="mcp-tool-name">🔧 analyze_compliance</div>
                    <div class="mcp-tool-desc">Analyze documents for FCA compliance requirements and generate detailed compliance reports</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">🔍 detect_gaps</div>
                    <div class="mcp-tool-desc">Identify compliance gaps in policies and procedures with risk-based prioritization</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">📋 extract_requirements</div>
                    <div class="mcp-tool-desc">Extract relevant regulatory requirements from FCA Handbook based on query context</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">📊 score_compliance_risk</div>
                    <div class="mcp-tool-desc">Calculate compliance risk scores with confidence intervals and explanations</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">🔔 monitor_reg_changes</div>
                    <div class="mcp-tool-desc">Track FCA regulatory updates and analyze impact on existing compliance frameworks</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">📑 track_audit_evidence</div>
                    <div class="mcp-tool-desc">Organize and track audit evidence with regulatory citation mapping for examinations</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">🗺️ map_relationships</div>
                    <div class="mcp-tool-desc">Map relationships between regulatory requirements using knowledge graph analysis</div>
                </div>
                <div class="mcp-tool">
                    <div class="mcp-tool-name">✅ validate_scenarios</div>
                    <div class="mcp-tool-desc">Validate customer scenarios against compliance requirements with go/no-go decisions</div>
                </div>
            </div>

            <div style="padding: 1.5rem; background: var(--light-gray); margin: 1.5rem; border-radius: 8px;">
                <h4 style="margin-bottom: 1rem; color: var(--primary-blue);">Recent AI Agent Activity</h4>
                <ul style="list-style: none;">
                    <li style="margin-bottom: 0.5rem;">• Claude analyzed customer_policy.pdf (2 min ago)</li>
                    <li style="margin-bottom: 0.5rem;">• ChatGPT requested FCA COBS requirements (15 min ago)</li>
                    <li>• Custom agent ran compliance check (1 hour ago)</li>
                </ul>
                <div class="btn-group" style="margin-top: 1rem;">
                    <button class="btn btn-secondary">View API Logs</button>
                    <button class="btn btn-secondary">Tool Documentation</button>
                    <button class="btn btn-secondary">Integration Guide</button>
                </div>
            </div>
        </div>
    </main>
</div>

Your JavaScript

// Navigation functionality
function showLanding() {
    document.getElementById('landing-view').style.display = 'block';
    document.getElementById('dashboard-view').style.display = 'none';
    document.getElementById('analysis-view').style.display = 'none';
    document.getElementById('mcp-panel').style.display = 'none';
    updateActiveNav(0);
}

function showDashboard() {
    document.getElementById('landing-view').style.display = 'none';
    document.getElementById('dashboard-view').style.display = 'block';
    document.getElementById('analysis-view').style.display = 'none';
    document.getElementById('mcp-panel').style.display = 'none';
    updateActiveNav(1);
}

function showAnalysis() {
    document.getElementById('landing-view').style.display = 'none';
    document.getElementById('dashboard-view').style.display = 'none';
    document.getElementById('analysis-view').style.display = 'block';
    document.getElementById('mcp-panel').style.display = 'none';
    updateActiveNav(2);
}

function showMCPTools() {
    document.getElementById('landing-view').style.display = 'none';
    document.getElementById('dashboard-view').style.display = 'none';
    document.getElementById('analysis-view').style.display = 'none';
    document.getElementById('mcp-panel').style.display = 'block';
    updateActiveNav(3);
}

function showResults() {
    document.getElementById('results-panel').style.display = 'block';
}

function updateActiveNav(index) {
    const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach((item, i) => {
        if (i === index) {
            item.classList.add('active');
        } else {
            item.classList.remove('active');
        }
    });
}

// Compliance Question functionality
function askComplianceQuestion() {
    const question = document.getElementById('compliance-question').value.trim();
    
    if (!question) {
        alert('Please enter a compliance question first.');
        return;
    }

    // Show loading state
    const responseArea = document.getElementById('question-response');
    const responseContent = document.getElementById('response-content');
    
    responseArea.style.display = 'block';
    responseContent.innerHTML = `
        <div style="text-align: center; padding: 2rem; color: var(--text-gray);">
            <div style="font-size: 2rem; margin-bottom: 1rem;">🔄</div>
            <p>Analyzing your compliance question...</p>
            <p style="font-size: 0.9rem; margin-top: 0.5rem;">Searching FCA Handbook and regulatory requirements</p>
        </div>
    `;

    // Simulate AI response after 2 seconds
    setTimeout(() => {
        generateMockResponse(question);
    }, 2000);

    // Scroll to response
    responseArea.scrollIntoView({ behavior: 'smooth' });
}

function generateMockResponse(question) {
    const responseContent = document.getElementById('response-content');
    
    // Generate a realistic response based on the question
    let response = '';
    
    if (question.toLowerCase().includes('cobs') || question.toLowerCase().includes('client') || question.toLowerCase().includes('customer')) {
        response = `
            <div style="line-height: 1.6;">
                <h4 style="color: var(--primary-blue); margin-bottom: 1rem;">COBS 2.1.1 Client Categorization Analysis</h4>
                
                <div style="background: var(--success-green-bg); border-left: 4px solid var(--success-green); padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px;">
                    <strong>✅ Compliance Assessment: GENERALLY COMPLIANT</strong>
                    <p style="margin: 0.5rem 0 0 0; color: var(--neutral-gray);">Your customer onboarding process addresses most COBS 2.1.1 requirements with minor gaps identified.</p>
                </div>

                <h5 style="color: var(--primary-blue); margin: 1.5rem 0 0.75rem 0;">Key Requirements (COBS 2.1.1R):</h5>
                <ul style="margin-left: 1.5rem; margin-bottom: 1.5rem;">
                    <li><strong>Client categorization</strong> must be performed before providing services</li>
                    <li><strong>Professional client assessment</strong> requires specific knowledge and experience criteria</li>
                    <li><strong>Opt-down procedures</strong> must be clearly documented and communicated</li>
                    <li><strong>Record keeping</strong> of categorization decisions and evidence</li>
                </ul>

                <div style="background: var(--warning-orange-bg); border-left: 4px solid var(--warning-orange); padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px;">
                    <strong>⚠️ Gap Identified:</strong>
                    <p style="margin: 0.5rem 0 0 0;">Enhanced due diligence procedures for high-risk professional clients may need strengthening per COBS 2.1.1R(2)(b).</p>
                </div>

                <h5 style="color: var(--primary-blue); margin: 1.5rem 0 0.75rem 0;">Recommendations:</h5>
                <ol style="margin-left: 1.5rem;">
                    <li>Review and enhance professional client assessment criteria</li>
                    <li>Implement additional monitoring for opted-down clients</li>
                    <li>Document client categorization rationale more comprehensively</li>
                </ol>
            </div>
        `;
    } else if (question.toLowerCase().includes('consumer duty')) {
        response = `
            <div style="line-height: 1.6;">
                <h4 style="color: var(--primary-blue); margin-bottom: 1rem;">Consumer Duty Implementation Requirements</h4>
                
                <div style="background: var(--light-gray); border-left: 4px solid var(--light-blue); padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px;">
                    <strong>📋 Implementation Status:</strong>
                    <p style="margin: 0.5rem 0 0 0; color: var(--neutral-gray);">Consumer Duty came into effect 31 July 2023 for new and existing products, with closed products deadline of 31 July 2024.</p>
                </div>

                <h5 style="color: var(--primary-blue); margin: 1.5rem 0 0.75rem 0;">Four Key Outcomes (PRIN 2A.5.4R):</h5>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                    <div style="background: var(--light-gray); padding: 1rem; border-radius: 6px;">
                        <strong>Products & Services</strong>
                        <p style="font-size: 0.9rem; margin: 0.5rem 0 0 0;">Designed to meet customer needs</p>
                    </div>
                    <div style="background: var(--light-gray); padding: 1rem; border-radius: 6px;">
                        <strong>Price & Value</strong>
                        <p style="font-size: 0.9rem; margin: 0.5rem 0 0 0;">Fair value for customers</p>
                    </div>
                    <div style="background: var(--light-gray); padding: 1rem; border-radius: 6px;">
                        <strong>Consumer Understanding</strong>
                        <p style="font-size: 0.9rem; margin: 0.5rem 0 0 0;">Clear information and support</p>
                    </div>
                    <div style="background: var(--light-gray); padding: 1rem; border-radius: 6px;">
                        <strong>Consumer Support</strong>
                        <p style="font-size: 0.9rem; margin: 0.5rem 0 0 0;">Effective customer service</p>
                    </div>
                </div>

                <h5 style="color: var(--primary-blue); margin: 1.5rem 0 0.75rem 0;">Implementation Requirements:</h5>
                <ul style="margin-left: 1.5rem;">
                    <li>Governance framework with clear accountability</li>
                    <li>Regular monitoring and review processes</li>
                    <li>Management information and reporting systems</li>
                    <li>Staff training and culture alignment</li>
                </ul>
            </div>
        `;
    } else {
        response = `
            <div style="line-height: 1.6;">
                <h4 style="color: var(--primary-blue); margin-bottom: 1rem;">Compliance Analysis</h4>
                
                <div style="background: var(--light-gray); border-left: 4px solid var(--light-blue); padding: 1rem; margin-bottom: 1.5rem; border-radius: 4px;">
                    <strong>📋 Analysis Complete:</strong>
                    <p style="margin: 0.5rem 0 0 0; color: var(--neutral-gray);">Based on your question, I've analyzed relevant FCA requirements and provide the following guidance.</p>
                </div>

                <p style="margin-bottom: 1.5rem;">Your compliance question has been processed against the FCA Handbook. Here are the key regulatory considerations:</p>

                <h5 style="color: var(--primary-blue); margin: 1.5rem 0 0.75rem 0;">Relevant Regulations:</h5>
                <ul style="margin-left: 1.5rem; margin-bottom: 1.5rem;">
                    <li>FCA Principles for Businesses (PRIN)</li>
                    <li>Conduct of Business Sourcebook (COBS)</li>
                    <li>Senior Management Arrangements (SYSC)</li>
                </ul>

                <h5 style="color: var(--primary-blue); margin: 1.5rem 0 0.75rem 0;">Next Steps:</h5>
                <ol style="margin-left: 1.5rem;">
                    <li>Review specific regulatory requirements</li>
                    <li>Assess current compliance status</li>
                    <li>Implement any necessary changes</li>
                    <li>Monitor ongoing compliance</li>
                </ol>
            </div>
        `;
    }

    responseContent.innerHTML = response;
}

function askAnotherQuestion() {
    document.getElementById('compliance-question').value = '';
    document.getElementById('question-response').style.display = 'none';
    document.getElementById('compliance-question').focus();
}

// Initialize landing page view
showLanding();

Your CSS

/* Brand Colors from Brand.md */
:root {
    --primary-blue: #1E3A8A;
    --light-blue: #3B82F6;
    --success-green: #059669;
    --success-green-bg: #F0FDF4;
    --warning-orange: #EA580C;
    --warning-orange-bg: #FFF7ED;
    --error-red: #DC2626;
    --error-red-bg: #FEF2F2;
    --neutral-gray: #374151;
    --light-gray: #F9FAFB;
    --border-gray: #E5E7EB;
    --text-gray: #6B7280;
    --white: #FFFFFF;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: var(--light-gray);
    color: var(--neutral-gray);
    line-height: 1.6;
}

/* Header */
.header {
    background: var(--white);
    border-bottom: 1px solid var(--border-gray);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    padding: 0.5rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    width: 300px;
}

.alert-badge {
    background: var(--warning-orange);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 500;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--neutral-gray);
}

/* Main Layout */
.main-container {
    display: flex;
    min-height: calc(100vh - 80px);
}

.sidebar {
    width: 250px;
    background: var(--white);
    border-right: 1px solid var(--border-gray);
    padding: 1.5rem;
}

.nav-item {
    display: block;
    padding: 0.75rem;
    color: var(--neutral-gray);
    text-decoration: none;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s;
}

.nav-item:hover, .nav-item.active {
    background: var(--light-gray);
    color: var(--primary-blue);
}

.content {
    flex: 1;
    padding: 2rem;
}

/* Status Cards */
.status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.status-card {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.status-card h3 {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.status-label {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.status-good {
    color: var(--success-green);
    background: var(--success-green-bg);
}

.status-warning {
    color: var(--warning-orange);
    background: var(--warning-orange-bg);
}

.status-info {
    color: var(--light-blue);
    background: #EFF6FF;
}

.status-complete {
    color: var(--success-green);
    background: var(--success-green-bg);
}

/* Main Content Grid */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.content-panel {
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.panel-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-gray);
    font-weight: 600;
    color: var(--primary-blue);
}

.panel-content {
    padding: 1.5rem;
}

/* Regulatory Changes Panel */
.change-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-gray);
}

.change-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.change-title {
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.change-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--text-gray);
    margin-bottom: 0.5rem;
}

/* Compliance Gaps Panel */
.gap-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 6px;
    background: var(--light-gray);
}

.risk-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.risk-high { background: var(--error-red); }
.risk-medium { background: var(--warning-orange); }
.risk-low { background: var(--success-green); }

.gap-content {
    flex: 1;
}

.gap-title {
    font-weight: 500;
    color: var(--neutral-gray);
}

.gap-reference {
    font-size: 0.875rem;
    color: var(--text-gray);
}

/* Buttons */
.btn {
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 500;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background: var(--light-blue);
    color: white;
}

.btn-primary:hover {
    background: var(--primary-blue);
}

.btn-secondary {
    background: white;
    color: var(--neutral-gray);
    border: 1px solid var(--border-gray);
}

.btn-secondary:hover {
    background: var(--light-gray);
}

.btn-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

/* Progress Bar */
.progress-bar {
    width: 100%;
    height: 8px;
    background: var(--border-gray);
    border-radius: 4px;
    overflow: hidden;
    margin: 0.5rem 0;
}

.progress-fill {
    height: 100%;
    background: var(--success-green);
    transition: width 0.3s ease;
}

/* MCP Tools Panel (Hidden by default, shown when clicked) */
.mcp-panel {
    display: none;
    grid-column: 1 / -1;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    margin-top: 2rem;
}

.mcp-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    padding: 1.5rem;
}

.mcp-tool {
    padding: 1rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
    background: var(--light-gray);
}

.mcp-tool-name {
    font-weight: 600;
    color: var(--primary-blue);
    margin-bottom: 0.5rem;
}

.mcp-tool-desc {
    font-size: 0.875rem;
    color: var(--text-gray);
}

.mcp-status {
    color: var(--success-green);
    font-weight: 500;
}

/* Analysis Interface (Hidden by default) */
.analysis-interface {
    display: none;
    grid-column: 1 / -1;
    background: var(--white);
    border: 1px solid var(--border-gray);
    border-radius: 8px;
    margin-top: 2rem;
}

.upload-area {
    border: 2px dashed var(--border-gray);
    border-radius: 8px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 1.5rem;
    background: var(--light-gray);
}

.analysis-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    color: var(--neutral-gray);
}

.form-group select, .form-group input {
    padding: 0.75rem;
    border: 1px solid var(--border-gray);
    border-radius: 6px;
}

/* Results Panel */
.results-panel {
    display: none;
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--light-gray);
    border-radius: 8px;
}

.score-display {
    text-align: center;
    margin-bottom: 2rem;
}

.score-value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--warning-orange);
}

.score-label {
    font-size: 1.25rem;
    color: var(--neutral-gray);
}

.findings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.finding-card {
    background: var(--white);
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
}

.finding-number {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.finding-critical { color: var(--error-red); }
.finding-partial { color: var(--warning-orange); }
.finding-met { color: var(--success-green); }
.finding-recommendations { color: var(--light-blue); }

/* Responsive Design */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    
    .sidebar {
        width: 100%;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
    }
    
    .status-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions