Real-Time-Missing-Persons-Detection/upload.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
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Upload Image | Missing Person Finder</title>
  <meta name="description" content="Upload a missing person's photo and search through our AI-driven database.">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    if (localStorage.getItem('loggedIn') !== 'true') {
      window.location.href = 'login.html';
    }
  </script>

  <style>
    .animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
  </style>
</head>
<body class="bg-gradient-to-b from-purple-900 to-purple-400 min-h-screen flex flex-col">

  <!-- Navigation (unchanged) -->
  <nav class="bg-white shadow p-4 flex justify-between items-center font-semibold text-purple-800">
    <a href="index.html" class="text-xl">Missing Person Finder</a>
    <div class="block lg:hidden">
      <button id="hamburger" class="text-purple-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>
    <div id="navbar" class="hidden lg:flex gap-10">
      <a href="index.html" class="hover:text-purple-600">Home</a>
      <a href="upload.html" class="hover:text-purple-600">Upload</a>
      <a href="success.html" class="hover:text-purple-600">Dataset Entries</a>
      <a href="feedback.html" class="hover:text-purple-600">Feedback</a>
      <!-- Logout will be added dynamically -->
    </div>
  </nav>

  <!-- Mobile Menu (unchanged) -->
  <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-purple-800">Home</a>
      <a href="upload.html" class="text-xl text-purple-800">Upload</a>
      <a href="success.html" class="text-xl text-purple-800">Dataset Entries</a>
      <a href="feedback.html" class="text-xl text-purple-800">Feedback</a>
      <button id="mobileLogout" class="text-xl text-purple-800 hidden">Logout</button>


      <button id="closeMenu" class="text-xl text-purple-800">Close</button>
    </div>
  </div>

  <!-- Main Content -->
  <div class="flex flex-col items-center justify-center flex-1 p-8">
    <div class="bg-white p-8 rounded-xl shadow-lg max-w-lg w-full">
      <h1 class="text-2xl font-bold text-gray-800 mb-4 text-center">Upload Photo for Analysis</h1>

      <form id="uploadForm" class="space-y-4">
        <!-- Image Upload (now separate from form submission) -->
        <div>
          <label for="imageInput" class="block text-sm font-medium text-gray-700 mb-1">Upload Image *</label>
          <input type="file" id="imageInput" accept="image/*" onchange="previewImage()"
                 class="border p-2 rounded w-full">
          <div id="imageError" class="text-red-500 text-sm mt-1 hidden">Please upload a valid image file</div>
          <img id="preview" class="hidden rounded-lg mt-2 w-full max-h-64 object-contain" />
        </div>

        <!-- Reporter Information -->
        <div>
          <label for="reporterName" class="block text-sm font-medium text-gray-700 mb-1">Your Name *</label>
          <input type="text" id="reporterName" name="reporterName"
                 class="border p-2 rounded w-full" required minlength="2">
          <div id="nameError" class="text-red-500 text-sm mt-1 hidden">Please enter your full name</div>
        </div>

        <div>
          <label for="reporterEmail" class="block text-sm font-medium text-gray-700 mb-1">Your Email</label>
          <input type="email" id="reporterEmail" name="reporterEmail"
                 class="border p-2 rounded w-full">
          <div id="emailError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid email address</div>
        </div>

        <div>
          <label for="reporterPhone" class="block text-sm font-medium text-gray-700 mb-1">Your Phone Number *</label>
          <input type="tel" id="reporterPhone" name="reporterPhone"
                 class="border p-2 rounded w-full"
                 pattern="9[0-9]{9}" required>
          <div id="phoneError" class="text-red-500 text-sm mt-1 hidden">Please enter a valid 10-digit phone number starting with 9</div>
        </div>

        <!-- Location Information -->
        <div>
          <label for="location" class="block text-sm font-medium text-gray-700 mb-1">Where was this person seen? (Location) *</label>
          <div class="flex gap-0">
            <input type="text" id="location" name="location"
                   class="border p-2 rounded flex-1" required minlength="5">
            <button type="button" id="getLocationBtn"
                    class="bg-blue-500 hover:bg-blue-600 text-white px-3 rounded">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
          <div id="locationError" class="text-red-500 text-sm mt-1 hidden">Please provide a valid location</div>
        </div>

        <div>
          <label for="dateSeen" class="block text-sm font-medium text-gray-700 mb-1">When was this person seen? *</label>
          <input type="datetime-local" id="dateSeen" name="dateSeen"
                 class="border p-2 rounded w-full" required>
          <div id="dateError" class="text-red-500 text-sm mt-1 hidden">Please select a valid date and time</div>
        </div>

        <!-- Additional Details -->
        <div>
          <label for="additionalDetails" class="block text-sm font-medium text-gray-700 mb-1">Additional Details *</label>
          <textarea id="additionalDetails" name="additionalDetails" rows="3"
                    class="border p-2 rounded w-full" required maxlength="500"></textarea>
          <div id="additionalDetailsError" class="text-red-500 text-sm mt-1 hidden">Please provide additional details</div>
          <div class="text-xs text-gray-500 mt-1">Max 500 characters</div>
        </div>

        <!-- Submit Button -->
        <div class="flex justify-between items-center">
          <button type="button" onclick="analyzeImage()"
                  class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-6 rounded">
            Analyze Image
          </button>

          <button type="submit" id="submitBtn"
                  class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-6 rounded">
            Submit Report
          </button>
        </div>
      </form>

      <div id="result" class="mt-4 text-gray-700"></div>
    </div>
  </div>

  <script src="./script.js">

  </script>
</body>
</html>