Real-Time-Missing-Persons-Detection/feedback.html at main · Soumilgit/Real-Time-Missing-Persons-Detection · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Feedback | Missing Person Finder</title>
  <meta name="description" content="Share your feedback to help us improve and reunite more families.">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    // Redirect if not logged in
    if (localStorage.getItem('loggedIn') !== 'true') {
      window.location.href = 'login.html';
    }
  </script>
</head>
<body class="bg-gradient-to-b from-yellow-900 to-yellow-400 min-h-screen flex flex-col">

  <!-- Navigation -->
  <nav class="bg-white shadow p-4 flex justify-between items-center font-semibold text-yellow-800">
    <a href="index.html" class="text-xl">Missing Person Finder</a>

    <!-- Hamburger Icon for mobile -->
    <div class="block lg:hidden">
      <button id="hamburger" class="text-yellow-800 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>

    <!-- Navbar Links -->
    <div id="navbar" class="hidden lg:flex gap-10">
      <a href="index.html" class="hover:text-yellow-600">Home</a>
      <a href="upload.html" class="hover:text-yellow-600">Upload</a>
      <a href="success.html" class="hover:text-yellow-600">Dataset Entries</a>
      <a href="feedback.html" class="hover:text-yellow-600">Feedback</a>
      <!-- Logout/Login will be appended dynamically -->
    </div>
  </nav>

  <!-- Mobile Menu -->
  <div id="mobileMenu" class="lg:hidden fixed inset-0 bg-white bg-opacity-90 flex justify-center items-center z-50 hidden">
    <div class="flex flex-col items-center gap-4">
      <a href="index.html" class="text-xl text-yellow-800">Home</a>
      <a href="upload.html" class="text-xl text-yellow-800">Upload</a>
      <a href="success.html" class="text-xl text-yellow-800">Dataset Entries</a>
      <a href="feedback.html" class="text-xl text-yellow-800">Feedback</a>
      <button id="mobileLogoutBtn" class="text-xl text-yellow-800 hidden">Logout</button>
      <button id="closeMenu" class="text-xl text-yellow-800">Close</button>
    </div>
  </div>

  <!-- Feedback Form Section -->
  <section class="flex-1 flex flex-col items-center justify-center p-8">
    <div class="bg-white p-8 rounded-xl shadow-lg w-full max-w-lg">
      <h1 class="text-2xl font-bold text-gray-800 mb-6 text-center">We Value Your Feedback</h1>
      <form id="feedbackForm" class="space-y-4">
        <input type="text" id="name" name="name" placeholder="Your Name" required class="border p-3 rounded w-full">
        <input type="email" id="email" name="email" placeholder="Your Email" required class="border p-3 rounded w-full">
        <textarea id="message" name="message" placeholder="Your Message" required class="border p-3 rounded w-full h-32"></textarea>
        <button id="submitButton" type="submit" class="bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-3 px-6 rounded w-full">
          Submit Feedback
        </button>
      </form>
    </div>
  </section>

  <script>
    // Mobile menu toggling
    document.getElementById('hamburger').addEventListener('click', function () {
      document.getElementById('mobileMenu').classList.toggle('hidden');
    });

    document.getElementById('closeMenu').addEventListener('click', function () {
      document.getElementById('mobileMenu').classList.add('hidden');
    });

    // Dynamic logout/login
    function isLoggedIn() {
      return localStorage.getItem('loggedIn') === 'true';
    }

    function logout() {
      localStorage.removeItem('loggedIn');
      window.location.href = 'login.html';
    }

    document.addEventListener('DOMContentLoaded', () => {
      const navbar = document.getElementById('navbar');
      const mobileLogoutBtn = document.getElementById('mobileLogoutBtn');

      if (isLoggedIn()) {
        // Desktop logout
        const logoutBtn = document.createElement('button');
        logoutBtn.textContent = 'Logout';
        logoutBtn.className = 'hover:text-yellow-600';
        logoutBtn.onclick = logout;
        navbar.appendChild(logoutBtn);

        // Mobile logout
        mobileLogoutBtn.classList.remove('hidden');
        mobileLogoutBtn.onclick = logout;
      } else {
        // Fallback (not expected here)
        window.location.href = 'login.html';
      }
    });

    // Feedback form handler
    const form = document.getElementById('feedbackForm');
    const submitButton = document.getElementById('submitButton');

    form.addEventListener('submit', async function (event) {
      event.preventDefault();

      const formData = new FormData(form);

      try {
        const response = await fetch('https://formspree.io/f/mqaqperv', {
          method: 'POST',
          headers: { 'Accept': 'application/json' },
          body: formData
        });

        if (response.ok) {
          submitButton.classList.remove('bg-yellow-600', 'hover:bg-yellow-700');
          submitButton.classList.add('bg-green-600', 'hover:bg-green-700');
          submitButton.textContent = 'Submitted';

          setTimeout(() => {
            submitButton.classList.remove('bg-green-600', 'hover:bg-green-700');
            submitButton.classList.add('bg-yellow-600', 'hover:bg-yellow-700');
            submitButton.textContent = 'Submit Feedback';
          }, 3000);

          form.reset();
        } else {
          alert('Something went wrong. Please try again.');
        }
      } catch (error) {
        console.error('Error!', error.message);
        alert('An error occurred. Please try again.');
      }
    });
  </script>
</body>
</html>