AuditMind/index.html at main · RAMZI0TO99/AuditMind · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compliance Guard Dashboard</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="/static/styles.css">
</head>
<body class="bg-gray-50 text-gray-900 font-sans p-8">

    <div id="auth-section" class="max-w-md mx-auto bg-white p-8 rounded-lg shadow-md mt-10">
        <h2 class="text-2xl font-bold mb-6 text-center text-gray-800">Compliance Guard</h2>
        <input type="email" id="email-input" placeholder="Email address" class="w-full p-3 border rounded mb-4 focus:ring focus:ring-blue-200 outline-none">
        <input type="password" id="password-input" placeholder="Password" class="w-full p-3 border rounded mb-6 focus:ring focus:ring-blue-200 outline-none">
        <div class="flex gap-4">
            <button id="login-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition">Login</button>
            <button id="signup-btn" class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded transition">Sign Up</button>
        </div>
        <p id="auth-status" class="text-sm mt-4 text-center font-semibold"></p>
    </div>

    <div id="dashboard-section" class="max-w-6xl mx-auto hidden">
        <div class="flex justify-between items-center mb-8 border-b pb-4">
            <h1 class="text-3xl font-bold text-gray-800">Compliance Dashboard</h1>

            <div class="flex items-center gap-4">
                <div class="flex flex-col items-end">
                    <span id="user-greeting" class="text-sm font-semibold text-gray-600"></span>
                    <span id="tier-badge" class="px-2 py-0.5 text-[10px] font-bold rounded bg-gray-200 text-gray-600 uppercase tracking-widest mt-1">Loading...</span>
                </div>

                <button id="upgrade-header-btn" class="hidden bg-gradient-to-r from-purple-500 to-indigo-600 hover:from-purple-600 hover:to-indigo-700 text-white text-sm font-bold py-2 px-4 rounded shadow transition">Upgrade to Pro</button>
                <button id="manage-billing-btn" class="hidden bg-gray-200 hover:bg-gray-300 text-gray-800 text-sm font-bold py-2 px-4 rounded transition">Manage Billing</button>

                <button id="logout-btn" class="bg-red-50 hover:bg-red-100 text-red-600 text-sm font-bold py-2 px-4 rounded transition">Logout</button>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            <div class="md:col-span-2 space-y-8">
                <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
                    <h2 class="text-xl font-semibold mb-2">Audit a Contract</h2>
                    <p class="text-sm text-gray-500 mb-4">Upload a PDF to scan against your active rulebook.</p>
                    <form id="upload-form" class="flex gap-4 items-center">
                        <input type="file" id="file-input" accept=".pdf" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100 cursor-pointer">
                        <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded transition">Audit</button>
                    </form>
                </div>

                <div id="status-container" class="hidden bg-gray-900 rounded-lg p-6 font-mono shadow-inner border border-gray-700">
                    <div class="flex items-center gap-2 mb-4">
                        <div class="w-3 h-3 rounded-full bg-red-500"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        <span class="text-gray-400 text-xs ml-2 uppercase tracking-widest">Agent Orchestrator</span>
                    </div>
                    <p id="status-text" class="text-green-400 text-sm animate-pulse">> Waiting for system ready...</p>
                </div>

                <div id="report-container" class="hidden">
                    <h2 class="text-2xl font-bold mb-4">Audit Findings</h2>
                    <div id="findings-list" class="space-y-4"></div>
                </div>
            </div>

            <div class="md:col-span-1">
                <div class="relative bg-gradient-to-b from-gray-50 to-gray-100 p-6 rounded-lg shadow-sm border border-gray-200">

                    <div id="kb-lock-overlay" class="absolute inset-0 z-10 bg-gray-50/90 backdrop-blur-[2px] flex flex-col items-center justify-center rounded-lg border border-gray-200 hidden">
                        <svg class="w-10 h-10 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
                        <p class="text-sm font-bold text-gray-800 mb-1">PRO Feature</p>
                        <p class="text-xs text-gray-500 mb-4 text-center px-4">Upload custom policy rulebooks to guide the AI.</p>
                        <button id="upgrade-kb-btn" class="bg-purple-600 hover:bg-purple-700 text-white text-xs font-bold py-2 px-6 rounded-full shadow transition">Unlock for $29/mo</button>
                    </div>

                    <div class="flex items-center gap-2 mb-2">
                        <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
                        <h2 class="text-lg font-bold text-gray-800">Knowledge Base</h2>
                    </div>
                    <p class="text-xs text-gray-500 mb-6">Upload your company's strict Markdown policy file. The AI will use this as its source of truth.</p>

                    <form id="rule-upload-form" class="space-y-4">
                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:bg-gray-50 transition">
                            <input type="file" id="rule-file-input" accept=".txt,.md" class="hidden">
                            <label for="rule-file-input" class="cursor-pointer">
                                <span class="text-sm font-semibold text-purple-600 hover:text-purple-800">Select Rulebook (.md)</span>
                                <p id="rule-filename-display" class="text-xs text-gray-400 mt-1">No file selected</p>
                            </label>
                        </div>
                        <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white text-sm font-bold py-2 px-4 rounded transition">
                            Sync to Server
                        </button>
                    </form>
                    <p id="rule-upload-status" class="text-xs text-center mt-3 font-semibold"></p>
                </div>
            </div>

        </div>
    </div>

    <script src="/static/app.js"></script>
</body>
</html>