Spaces:

dickiethinking
/

false-accuser-alerts-registry

Running

App Files Files Community

dickiethinking commited on Nov 2, 2025

Commit

b5ba45c

verified ·

1 Parent(s): 48257de

This needs to be a lot better looking https://cdn.dribbble.com/userupload/45525533/file/176e1ed8f6a9c15b6324e6e6d3a8a00d.png?resize=1024x768&vertical=center

Browse files

Files changed (3) hide show

components/search.js +40 -28
index.html +50 -54
style.css +121 -1

components/search.js CHANGED Viewed

@@ -4,30 +4,37 @@ class CustomSearch extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         .search-container {
-          background: #1f2937;
-          border-radius: 0.5rem;
-          padding: 1.5rem;
-          margin-bottom: 2rem;
-          box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
         }
         .search-title {
-          font-size: 1.25rem;
-          font-weight: 600;
-          margin-bottom: 1rem;
-          color: #f43f5e;
         }
         .search-form {
           display: flex;
           flex-direction: column;
-          gap: 1rem;
         }
         .search-input {
-          background: #111827;
-          border: 1px solid #374151;
-          border-radius: 0.375rem;
-          padding: 0.75rem 1rem;
           color: white;
           width: 100%;
         }
         .search-input:focus {
           outline: none;
@@ -35,39 +42,44 @@ class CustomSearch extends HTMLElement {
           box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.3);
         }
         .search-button {
-          background: #f43f5e;
           color: white;
           border: none;
-          border-radius: 0.375rem;
-          padding: 0.75rem 1rem;
           font-weight: 600;
           cursor: pointer;
-          transition: background-color 0.2s;
         }
         .search-button:hover {
-          background: #e11d48;
         }
         .search-options {
           display: flex;
           flex-wrap: wrap;
-          gap: 0.5rem;
-          margin-top: 0.5rem;
         }
         .search-option {
-          background: #111827;
-          border: 1px solid #374151;
           border-radius: 9999px;
-          padding: 0.25rem 0.75rem;
           font-size: 0.875rem;
           cursor: pointer;
-          transition: all 0.2s;
         }
         .search-option:hover, .search-option.active {
-          background: #f43f5e;
-          border-color: #f43f5e;
           color: white;
         }
-      </style>
       <div class="search-container">
         <h3 class="search-title">Search Registry</h3>
         <form class="search-form" id="searchForm">

     this.shadowRoot.innerHTML = `
       <style>
         .search-container {
+          background: rgba(31, 41, 55, 0.7);
+          backdrop-filter: blur(10px);
+          border-radius: 16px;
+          padding: 2rem;
+          margin-bottom: 3rem;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
         .search-title {
+          font-size: 1.5rem;
+          font-weight: 700;
+          margin-bottom: 1.5rem;
+          background: linear-gradient(90deg, #ef4444, #f43f5e);
+          -webkit-background-clip: text;
+          background-clip: text;
+          color: transparent;
         }
         .search-form {
           display: flex;
           flex-direction: column;
+          gap: 1.5rem;
         }
         .search-input {
+          background: rgba(17, 24, 39, 0.5);
+          border: 1px solid rgba(55, 65, 81, 0.5);
+          border-radius: 12px;
+          padding: 1rem 1.25rem;
           color: white;
           width: 100%;
+          font-size: 1rem;
+          transition: all 0.3s ease;
         }
         .search-input:focus {
           outline: none;
           box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.3);
         }
         .search-button {
+          background: linear-gradient(90deg, #ef4444, #f43f5e);
           color: white;
           border: none;
+          border-radius: 12px;
+          padding: 1rem 1.5rem;
           font-weight: 600;
           cursor: pointer;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
         .search-button:hover {
+          transform: translateY(-2px);
+          box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);
         }
         .search-options {
           display: flex;
           flex-wrap: wrap;
+          gap: 0.75rem;
+          margin-top: 0.75rem;
         }
         .search-option {
+          background: rgba(17, 24, 39, 0.5);
+          border: 1px solid rgba(55, 65, 81, 0.5);
           border-radius: 9999px;
+          padding: 0.5rem 1rem;
           font-size: 0.875rem;
           cursor: pointer;
+          transition: all 0.3s ease;
         }
         .search-option:hover, .search-option.active {
+          background: linear-gradient(90deg, #ef4444, #f43f5e);
+          border-color: transparent;
           color: white;
+          transform: translateY(-2px);
         }
+</style>
       <div class="search-container">
         <h3 class="search-title">Search Registry</h3>
         <form class="search-form" id="searchForm">

index.html CHANGED Viewed

@@ -26,103 +26,99 @@
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
     <main class="flex-1 container mx-auto px-4 py-8">
         <custom-search></custom-search>
-<div class="max-w-4xl mx-auto">
-            <section class="mb-12">
-                <h1 class="text-4xl font-bold mb-6 text-primary">False Accuser Alerts Registry</h1>
-                <p class="text-lg text-gray-300 mb-8">
-                    A public registry to document and expose individuals who have made false accusations of domestic violence or abuse,
-                    helping to protect potential victims from malicious claims.
                 </p>
-                <div class="bg-gray-800 rounded-lg p-6 border-l-4 border-primary shadow-lg">
-                    <h2 class="text-2xl font-semibold mb-4 text-secondary">Why This Registry Exists</h2>
-                    <p class="mb-4">
-                        False accusations can destroy lives, reputations, and families. This registry serves as a warning system
-                        to protect innocent individuals from becoming victims of deceitful allegations.
-                    </p>
-                    <a href="/report" class="inline-flex items-center px-4 py-2 bg-primary hover:bg-red-600 rounded-md transition-colors text-white font-medium">
                         <i data-feather="alert-triangle" class="mr-2"></i>
                         Report a False Accuser
                     </a>
                 </div>
-            </section>
-            <section class="mb-12">
-                <h2 class="text-2xl font-semibold mb-6 text-secondary">Recent Cases</h2>
                 <div class="grid md:grid-cols-2 gap-6">
-                    <div class="bg-gray-800 rounded-lg p-6 shadow hover:shadow-lg transition-shadow">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white mr-4">
                                 <i data-feather="user"></i>
                             </div>
                             <div>
-                                <h3 class="font-semibold">Case #FA-2023-142</h3>
                                 <p class="text-sm text-gray-400">Reported: 2 weeks ago</p>
                             </div>
                         </div>
-                        <p class="text-gray-300 mb-4">False allegations of domestic abuse made during divorce proceedings. Case was dismissed due to lack of evidence.</p>
                         <div class="flex flex-wrap gap-2">
-                            <span class="px-2 py-1 bg-gray-700 rounded-full text-xs">California</span>
-                            <span class="px-2 py-1 bg-gray-700 rounded-full text-xs">2023</span>
-                            <span class="px-2 py-1 bg-gray-700 rounded-full text-xs">Family Court</span>
                         </div>
                     </div>
-                    <div class="bg-gray-800 rounded-lg p-6 shadow hover:shadow-lg transition-shadow">
-                        <div class="flex items-center mb-4">
-                            <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white mr-4">
                                 <i data-feather="user"></i>
                             </div>
                             <div>
-                                <h3 class="font-semibold">Case #FA-2023-141</h3>
                                 <p class="text-sm text-gray-400">Reported: 3 weeks ago</p>
                             </div>
                         </div>
-                        <p class="text-gray-300 mb-4">Retracted abuse allegations after being confronted with video evidence contradicting claims.</p>
                         <div class="flex flex-wrap gap-2">
-                            <span class="px-2 py-1 bg-gray-700 rounded-full text-xs">Texas</span>
-                            <span class="px-2 py-1 bg-gray-700 rounded-full text-xs">2023</span>
-                            <span class="px-2 py-1 bg-gray-700 rounded-full text-xs">Criminal Case</span>
                         </div>
                     </div>
                 </div>
-                <div class="mt-6 text-center">
-                    <a href="/cases" class="inline-flex items-center px-4 py-2 bg-secondary hover:bg-rose-600 rounded-md transition-colors text-white font-medium">
-                        <i data-feather="list" class="mr-2"></i>
-                        View All Cases
-                    </a>
-                </div>
             </section>
-            <section>
-                <h2 class="text-2xl font-semibold mb-6 text-secondary">Resources</h2>
                 <div class="grid md:grid-cols-3 gap-6">
-                    <div class="bg-gray-800 rounded-lg p-6 shadow hover:shadow-lg transition-shadow">
-                        <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white mb-4">
                             <i data-feather="book"></i>
                         </div>
-                        <h3 class="font-semibold mb-2">Legal Protection</h3>
-                        <p class="text-gray-300 text-sm">Know your rights when facing false accusations and how to protect yourself legally.</p>
                     </div>
-                    <div class="bg-gray-800 rounded-lg p-6 shadow hover:shadow-lg transition-shadow">
-                        <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white mb-4">
                             <i data-feather="shield"></i>
                         </div>
-                        <h3 class="font-semibold mb-2">Documentation Guide</h3>
-                        <p class="text-gray-300 text-sm">Learn how to properly document interactions to protect yourself from false claims.</p>
                     </div>
-                    <div class="bg-gray-800 rounded-lg p-6 shadow hover:shadow-lg transition-shadow">
-                        <div class="w-12 h-12 rounded-full bg-red-500 flex items-center justify-center text-white mb-4">
                             <i data-feather="users"></i>
                         </div>
-                        <h3 class="font-semibold mb-2">Support Groups</h3>
-                        <p class="text-gray-300 text-sm">Connect with others who have been victims of false accusations.</p>
                     </div>
                 </div>
             </section>
-        </div>
     </main>
     <custom-footer></custom-footer>

 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen flex flex-col">
     <custom-navbar></custom-navbar>
     <main class="flex-1 container mx-auto px-4 py-8">
         <custom-search></custom-search>
+        <section class="hero">
+            <div class="max-w-2xl">
+                <h1 class="hero-title">False Accuser Alerts Registry</h1>
+                <p class="text-xl text-gray-300 mb-8">
+                    A verified public registry documenting false accusations to protect the innocent from malicious claims.
                 </p>
+                <div class="flex space-x-4">
+                    <a href="/report" class="btn btn-primary">
                         <i data-feather="alert-triangle" class="mr-2"></i>
                         Report a False Accuser
                     </a>
+                    <a href="/cases" class="btn" style="background: rgba(255,255,255,0.1); color: white;">
+                        <i data-feather="list" class="mr-2"></i>
+                        View All Cases
+                    </a>
                 </div>
+            </div>
+        </section>
+        <div class="max-w-6xl mx-auto">
+            <section class="mb-16">
+                <h2 class="section-title">Recent Cases</h2>
                 <div class="grid md:grid-cols-2 gap-6">
+                    <div class="card">
+                        <div class="case-meta">
+                            <div class="user-avatar">
                                 <i data-feather="user"></i>
                             </div>
                             <div>
+                                <h3 class="font-semibold text-lg">Case #FA-2023-142</h3>
                                 <p class="text-sm text-gray-400">Reported: 2 weeks ago</p>
                             </div>
                         </div>
+                        <p class="text-gray-300 mb-6">False allegations of domestic abuse made during divorce proceedings. Case was dismissed due to lack of evidence after investigation revealed inconsistencies in the accuser's testimony.</p>
                         <div class="flex flex-wrap gap-2">
+                            <span class="tag">California</span>
+                            <span class="tag">2023</span>
+                            <span class="tag">Family Court</span>
+                            <span class="tag">Dismissed</span>
                         </div>
                     </div>
+                    <div class="card">
+                        <div class="case-meta">
+                            <div class="user-avatar">
                                 <i data-feather="user"></i>
                             </div>
                             <div>
+                                <h3 class="font-semibold text-lg">Case #FA-2023-141</h3>
                                 <p class="text-sm text-gray-400">Reported: 3 weeks ago</p>
                             </div>
                         </div>
+                        <p class="text-gray-300 mb-6">Retracted abuse allegations after being confronted with video evidence contradicting claims. The accuser later admitted to fabricating the story.</p>
                         <div class="flex flex-wrap gap-2">
+                            <span class="tag">Texas</span>
+                            <span class="tag">2023</span>
+                            <span class="tag">Criminal Case</span>
+                            <span class="tag">Retracted</span>
                         </div>
                     </div>
                 </div>
             </section>
+            <section class="mb-16">
+                <h2 class="section-title">Resources</h2>
                 <div class="grid md:grid-cols-3 gap-6">
+                    <div class="card">
+                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-500 to-pink-500 flex items-center justify-center text-white mb-6">
                             <i data-feather="book"></i>
                         </div>
+                        <h3 class="font-semibold text-lg mb-3">Legal Protection</h3>
+                        <p class="text-gray-300">Comprehensive guides on your rights when facing false accusations and how to protect yourself legally.</p>
                     </div>
+                    <div class="card">
+                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-500 to-pink-500 flex items-center justify-center text-white mb-6">
                             <i data-feather="shield"></i>
                         </div>
+                        <h3 class="font-semibold text-lg mb-3">Documentation Guide</h3>
+                        <p class="text-gray-300">Step-by-step instructions for properly documenting interactions to protect yourself from false claims.</p>
                     </div>
+                    <div class="card">
+                        <div class="w-12 h-12 rounded-full bg-gradient-to-r from-red-500 to-pink-500 flex items-center justify-center text-white mb-6">
                             <i data-feather="users"></i>
                         </div>
+                        <h3 class="font-semibold text-lg mb-3">Support Network</h3>
+                        <p class="text-gray-300">Connect with verified support groups and legal professionals who specialize in false accusation cases.</p>
                     </div>
                 </div>
             </section>
+</div>
     </main>
     <custom-footer></custom-footer>

style.css CHANGED Viewed

@@ -1,9 +1,129 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;

 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
     font-family: 'Inter', sans-serif;
+    background: #0c0c0f;
+    color: #f8f9fa;
+}
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+.hero {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+    border-radius: 20px;
+    padding: 60px;
+    margin: 40px 0;
+    position: relative;
+    overflow: hidden;
+}
+.hero::after {
+    content: '';
+    position: absolute;
+    top: -50px;
+    right: -50px;
+    width: 200px;
+    height: 200px;
+    background: rgba(239, 68, 68, 0.1);
+    border-radius: 50%;
+    filter: blur(50px);
+}
+.hero-title {
+    font-size: 3rem;
+    font-weight: 800;
+    line-height: 1.2;
+    margin-bottom: 20px;
+    background: linear-gradient(90deg, #ef4444, #f43f5e);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+.card {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(10px);
+    border-radius: 16px;
+    padding: 30px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+}
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.1), 0 10px 10px -5px rgba(239, 68, 68, 0.04);
+}
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+.btn-primary {
+    background: linear-gradient(90deg, #ef4444, #f43f5e);
+    color: white;
+}
+.btn-primary:hover {
+    background: linear-gradient(90deg, #dc2626, #e11d48);
+    transform: translateY(-2px);
+    box-shadow: 0 10px 15px -3px rgba(239, 68, 68, 0.3);
+}
+.tag {
+    display: inline-block;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    background: rgba(239, 68, 68, 0.1);
+    color: #ef4444;
 }
+.user-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: rgba(255, 255, 255, 0.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    margin-right: 15px;
+}
+.case-meta {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+.section-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 30px;
+    position: relative;
+    display: inline-block;
+}
+.section-title::after {
+    content: '';
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    width: 50px;
+    height: 3px;
+    background: linear-gradient(90deg, #ef4444, #f43f5e);
+    border-radius: 3px;
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;