Spaces:

dickiethinking
/

justicemail-crusader

Running

App Files Files Community

dickiethinking commited on Nov 2, 2025

Commit

cad1c9b

verified ·

1 Parent(s): 6a1a11d

The site needs the ability to use zero auth in order to search the user's email for all relevant case information

Browse files

Files changed (5) hide show

README.md +8 -5
components/email-search.js +107 -0
index.html +239 -19
script.js +265 -0
style.css +57 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Justicemail Crusader
-emoji: 📉
-colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: JusticeMail Crusader 🚀
+colorFrom: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/email-search.js ADDED Viewed

	@@ -0,0 +1,107 @@

+class EmailSearch extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .email-search-container {
+          background: rgba(31, 41, 55, 0.8);
+          border-radius: 0.5rem;
+          padding: 1.5rem;
+          margin: 1rem 0;
+          border: 1px solid #4b5563;
+        }
+        .search-header {
+          display: flex;
+          align-items: center;
+          margin-bottom: 1rem;
+        }
+        .search-icon {
+          margin-right: 0.5rem;
+          color: #f43f5e;
+        }
+        .search-btn {
+          background: #f43f5e;
+          color: white;
+          border: none;
+          padding: 0.5rem 1rem;
+          border-radius: 0.375rem;
+          cursor: pointer;
+          font-weight: 500;
+          transition: background 0.2s;
+        }
+        .search-btn:hover {
+          background: #e11d48;
+        }
+        .search-results {
+          margin-top: 1rem;
+          max-height: 300px;
+          overflow-y: auto;
+        }
+        .result-item {
+          padding: 0.75rem;
+          border-bottom: 1px solid #4b5563;
+          display: flex;
+          justify-content: space-between;
+        }
+        .result-item:last-child {
+          border-bottom: none;
+        }
+      </style>
+      <div class="email-search-container">
+        <div class="search-header">
+          <i data-feather="mail" class="search-icon"></i>
+          <h3>Search Your Email for Case Documents</h3>
+        </div>
+        <p>Find all court-related communications without sharing your credentials</p>
+        <button class="search-btn" id="connectEmail">Connect Email</button>
+        <div class="search-results" id="searchResults"></div>
+      </div>
+    `;
+    this.shadowRoot.querySelector('#connectEmail').addEventListener('click', () => this.handleEmailConnect());
+    feather.replace();
+  }
+  async handleEmailConnect() {
+    try {
+      // Using ZeroAuth protocol for email search
+      const emailClient = await window.zeroAuth.emailClient();
+      const results = await emailClient.search({
+        query: 'family court OR custody OR hearing OR affidavit',
+        maxResults: 50
+      });
+      this.displayResults(results.messages);
+    } catch (error) {
+      console.error('Email search failed:', error);
+      this.displayError();
+    }
+  }
+  displayResults(messages) {
+    const resultsContainer = this.shadowRoot.getElementById('searchResults');
+    resultsContainer.innerHTML = '';
+    if (messages.length === 0) {
+      resultsContainer.innerHTML = '<p>No court-related emails found</p>';
+      return;
+    }
+    messages.forEach(msg => {
+      const item = document.createElement('div');
+      item.className = 'result-item';
+      item.innerHTML = `
+        <span>${msg.subject}</span>
+        <span>${new Date(msg.date).toLocaleDateString()}</span>
+      `;
+      resultsContainer.appendChild(item);
+    });
+  }
+  displayError() {
+    const resultsContainer = this.shadowRoot.getElementById('searchResults');
+    resultsContainer.innerHTML = '<p>Error searching emails. Please try again.</p>';
+  }
+}
+customElements.define('email-search', EmailSearch);

index.html CHANGED Viewed

@@ -1,19 +1,239 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>
+        <!-- Email Search Section -->
+        <section class="mb-16 bg-gray-800 rounded-xl p-8 shadow-lg">
+          <h2 class="text-3xl font-bold mb-6 text-red-500">Find Your Case Emails</h2>
+          <email-search></email-search>
+        </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="components/email-search.js"></script>
+    <script src="script.js"></script>
+<script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,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>

style.css CHANGED Viewed

@@ -1,28 +1,67 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
 body {
+    font-family: 'Roboto', sans-serif;
+}
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+::-webkit-scrollbar-track {
+    background: #1f2937;
+}
+::-webkit-scrollbar-thumb {
+    background: #f43f5e;
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #e11d48;
 }
+/* Animation for buttons */
+button, a[role="button"] {
+    transition: all 0.3s ease;
+    transform: translateY(0);
 }
+button:hover, a[role="button"]:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
+/* Pulse animation for important elements */
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(244, 63, 94, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0);
+    }
 }
+.pulse {
+    animation: pulse 2s infinite;
 }
+/* Custom file upload styling */
+input[type="file"] {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+/* Table row hover effect */
+tr {
+    transition: background-color 0.2s ease;
+}