migration to vueCLi and css to tailwind css 3 done

ui/src/components/PageContent.vue

@@ -0,0 +1,103 @@
+<template>
+   <div id="consent-modal" v-if="showConsentModal"
+    class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
+    <div
+        class="bg-dark-card text-dark-text p-8 rounded-xl shadow-2xl max-w-xl w-full">
+        <h2 class="text-2xl font-bold mb-6 text-center">AI Red Team Ethical
+            Use Agreement</h2>
+        <div class="space-y-6">
+            <p class="text-sm leading-relaxed">
+                This AI red team tool is designed for security research,
+                vulnerability assessment,
+                and responsible testing purposes. By accessing this tool, you
+                explicitly agree to
+                the following ethical guidelines:
+            </p>
+            <ul class="list-disc list-inside text-sm space-y-3">
+                <li>
+                    <strong>Consent and Authorization:</strong> You will only
+                    use
+                    this tool on systems
+                    for which you have explicit, documented permission from the
+                    system owners.
+                </li>
+                <li>
+                    <strong>Responsible Disclosure:</strong> Any vulnerabilities
+                    discovered must be
+                    reported responsibly to the appropriate parties,
+                    prioritizing
+                    system and user safety.
+                </li>
+                <li>
+                    <strong>No Malicious Intent:</strong> You will not use this
+                    tool
+                    to cause harm,
+                    disrupt services, or compromise the integrity of any system
+                    or
+                    data.
+                </li>
+                <li>
+                    <strong>Legal Compliance:</strong> All testing and research
+                    must
+                    comply with
+                    applicable local, national, and international laws and
+                    regulations.
+                </li>
+
+            </ul>
+
+            <p class="text-xs text-gray-400 italic">
+                Violation of these terms may result in immediate termination of
+                access and
+                potential legal consequences.
+            </p>
+        </div>
+        <div class="flex justify-center space-x-4 mt-8">
+            <button
+                @click="declineConsent"
+                class="bg-dark-accent-red text-white rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                Decline
+            </button>
+            <button
+                @click="acceptConsent"
+                class="bg-dark-accent-green text-dark-bg rounded-lg px-6 py-3 font-medium hover:bg-opacity-80 transition-colors">
+                I Agree and Understand
+            </button>
+        </div>
+    </div>
+    
+</div>
+
+
+</template>
+
+<script>
+export default {
+  name: 'PageContent',
+
+  data() {
+    return {
+      showConsentModal: true // Default to true
+    };
+  },
+
+  emits: ['accept', 'decline'], // Define the custom events
+
+  methods: {
+     acceptConsent() {
+            this.showConsentModal = false; // Close the modal
+            localStorage.setItem('consentGiven', 'true'); // Save consent to local storage
+        },
+    declineConsent() {
+            this.showConsentModal = false; // Close the modal
+            localStorage.setItem('consentGiven', 'false'); // Save decline to local storage
+            window.location.href = 'https://www.google.com'; // Redirect to Google
+        },
+  }
+};
+</script>
+
+
+<style >
+/* Styles for the consent modal */
+</style>