File size: 14,552 Bytes
cad1c9b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265

// ZeroAuth email client polyfill
if (!window.zeroAuth) {
  window.zeroAuth = {
    emailClient: async function() {
      return {
        search: async function({ query, maxResults }) {
          // In a real implementation, this would use ZeroAuth protocol
          // For demo purposes, we'll return mock data
          console.log(`Searching emails for: ${query}`);
          
          // Mock response
          return {
            messages: [
              {
                subject: "Re: Family Court Hearing - Case #FC12345",
                date: "2023-12-15T10:30:00"
              },
              {
                subject: "Affidavit Submission Confirmation",
                date: "2023-11-28T14:15:00"
              },
              {
                subject: "Urgent: Custody Arrangement Update",
                date: "2023-11-15T09:45:00"
              }
            ]
          };
        }
      }
    }
  }
}
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Court Crusader | Fight Family Court Injustice</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        rose: {
                            500: '#f43f5e',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="bg-gray-800 rounded-xl p-8 mb-10 shadow-lg">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-6 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 text-red-500">Fight Back Against Family Court Injustice</h1>
                    <p class="text-xl mb-6 text-rose-300">Document misconduct, build your case bundle, and expose corruption in New Zealand's family court system.</p>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <a href="#document" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg text-center transition">Document Misconduct</a>
                        <a href="#bundle" class="bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-6 rounded-lg text-center transition">Build Your Bundle</a>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <img src="http://static.photos/legal/1200x630/42" alt="Justice Scale" class="rounded-lg shadow-xl">
                </div>
            </div>
        </section>

        <!-- Features Section -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-center text-red-500">Your Legal Empowerment Tools</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
                    <div class="text-red-500 mb-4">
                        <i data-feather="file-text" class="w-12 h-12"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Case Bundle Builder</h3>
                    <p class="text-gray-300">Organize your evidence, documents, and timeline into a professional court bundle automatically.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
                    <div class="text-red-500 mb-4">
                        <i data-feather="alert-triangle" class="w-12 h-12"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Misconduct Tracker</h3>
                    <p class="text-gray-300">Document and report unethical behavior by lawyers, judges, and social workers with timestamped evidence.</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl shadow-lg">
                    <div class="text-red-500 mb-4">
                        <i data-feather="users" class="w-12 h-12"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-2">Public Accountability</h3>
                    <p class="text-gray-300">Our verified database exposes patterns of misconduct across multiple cases and litigants.</p>
                </div>
            </div>
        </section>

        <!-- Document Misconduct Section -->
        <section id="document" class="mb-16 bg-gray-800 rounded-xl p-8 shadow-lg">
            <h2 class="text-3xl font-bold mb-6 text-red-500">Report Professional Misconduct</h2>
            <form class="space-y-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-gray-300 mb-2">Name of Professional</label>
                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent">
                    </div>
                    <div>
                        <label class="block text-gray-300 mb-2">Role</label>
                        <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent">
                            <option>Judge</option>
                            <option>Lawyer</option>
                            <option>Social Worker</option>
                            <option>Police Officer</option>
                            <option>Court Staff</option>
                        </select>
                    </div>
                </div>
                <div>
                    <label class="block text-gray-300 mb-2">Date of Incident</label>
                    <input type="date" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent">
                </div>
                <div>
                    <label class="block text-gray-300 mb-2">Description of Misconduct</label>
                    <textarea rows="4" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-red-500 focus:border-transparent"></textarea>
                </div>
                <div>
                    <label class="block text-gray-300 mb-2">Evidence (Upload Files)</label>
                    <div class="flex items-center justify-center w-full">
                        <label class="flex flex-col w-full h-32 border-2 border-dashed border-gray-600 hover:border-red-500 rounded-lg cursor-pointer bg-gray-700 hover:bg-gray-700/50">
                            <div class="flex flex-col items-center justify-center pt-7">
                                <i data-feather="upload" class="w-8 h-8 text-gray-400"></i>
                                <p class="pt-1 text-sm text-gray-400">Click to upload documents</p>
                            </div>
                            <input type="file" class="opacity-0" multiple>
                        </label>
                    </div>
                </div>
                <button type="submit" class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition">Submit Report</button>
            </form>
        </section>

        <!-- Case Bundle Section -->
        <section id="bundle" class="mb-16 bg-gray-800 rounded-xl p-8 shadow-lg">
            <h2 class="text-3xl font-bold mb-6 text-red-500">Build Your Court Bundle</h2>
            <div class="mb-8">
                <div class="flex items-center mb-4">
                    <div class="flex-1 border-t-2 border-gray-600"></div>
                    <span class="px-4 text-gray-400">Step 1: Case Details</span>
                    <div class="flex-1 border-t-2 border-gray-600"></div>
                </div>
                <form class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
                    <div>
                        <label class="block text-gray-300 mb-2">Case Number</label>
                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2">
                    </div>
                    <div>
                        <label class="block text-gray-300 mb-2">Court Location</label>
                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2">
                    </div>
                    <div>
                        <label class="block text-gray-300 mb-2">Your Role</label>
                        <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2">
                            <option>Applicant</option>
                            <option>Respondent</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-gray-300 mb-2">Opposing Party Name</label>
                        <input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2">
                    </div>
                </form>

                <div class="flex items-center mb-4">
                    <div class="flex-1 border-t-2 border-gray-600"></div>
                    <span class="px-4 text-gray-400">Step 2: Upload Documents</span>
                    <div class="flex-1 border-t-2 border-gray-600"></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                    <div class="border-2 border-dashed border-gray-600 rounded-lg p-4 text-center hover:border-red-500 cursor-pointer transition">
                        <i data-feather="file-text" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
                        <p class="text-gray-300">Affidavits</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-600 rounded-lg p-4 text-center hover:border-red-500 cursor-pointer transition">
                        <i data-feather="file-text" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
                        <p class="text-gray-300">Evidence</p>
                    </div>
                    <div class="border-2 border-dashed border-gray-600 rounded-lg p-4 text-center hover:border-red-500 cursor-pointer transition">
                        <i data-feather="file-text" class="w-8 h-8 mx-auto text-gray-400 mb-2"></i>
                        <p class="text-gray-300">Orders</p>
                    </div>
                </div>

                <div class="flex items-center mb-4">
                    <div class="flex-1 border-t-2 border-gray-600"></div>
                    <span class="px-4 text-gray-400">Step 3: Generate Bundle</span>
                    <div class="flex-1 border-t-2 border-gray-600"></div>
                </div>
                <div class="text-center">
                    <button class="bg-rose-600 hover:bg-rose-700 text-white font-bold py-3 px-8 rounded-lg text-lg transition">Generate Professional Bundle</button>
                </div>
            </div>
        </section>

        <!-- Shame List Preview -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-6 text-center text-red-500">Patterns of Misconduct</h2>
            <div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg">
                <div class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gray-700">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Role</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Reports</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Last Incident</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-700">
                            <tr class="hover:bg-gray-700/50 cursor-pointer">
                                <td class="px-6 py-4 whitespace-nowrap text-red-400">Judge Smith</td>
                                <td class="px-6 py-4 whitespace-nowrap">Family Court</td>
                                <td class="px-6 py-4 whitespace-nowrap">14</td>
                                <td class="px-6 py-4 whitespace-nowrap">2023-11-15</td>
                            </tr>
                            <tr class="hover:bg-gray-700/50 cursor-pointer">
                                <td class="px-6 py-4 whitespace-nowrap text-red-400">Lawyer Jones</td>
                                <td class="px-6 py-4 whitespace-nowrap">Barrister</td>
                                <td class="px-6 py-4 whitespace-nowrap">9</td>
                                <td class="px-6 py-4 whitespace-nowrap">2023-10-28</td>
                            </tr>
                            <tr class="hover:bg-gray-700/50 cursor-pointer">
                                <td class="px-6 py-4 whitespace-nowrap text-red-400">SW Taylor</td>
                                <td class="px-6 py-4 whitespace-nowrap">Oranga Tamariki</td>
                                <td class="px-6 py-4 whitespace-nowrap">22</td>
                                <td class="px-6 py-4 whitespace-nowrap">2023-12-03</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="px-6 py-4 bg-gray-700 text-center">
                    <a href="#" class="text-rose-400 hover:text-rose-300 font-medium">View Full Accountability Database β†’</a>
                </div>
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>

    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="script.js"></script>
    <script>
        feather.replace();
    </script>
</body>
</html>