metascanner/index.html at main · d3vdebug/metascanner · 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Metascanner</title>
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Michroma&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Share+Tech&display=swap" rel="stylesheet">

  <!-- External Libraries -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>

  <link rel="icon" type="image/png" href="/assets/favicon.svg">

  <!-- Firebase SDKs -->
  <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>
  <script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore-compat.js"></script>
</head>
<body>
    <nav class="navbar">
        <a style="text-decoration: none;" href="https://metascanner.site" class="navbar-brand">
          <div class="logo-container">
            <img src="/assets/logo.png" alt="" class="logo-icon">
            <span class="logo-text">METASCANNER</span>
          </div>
        </a>
        <button class="hamburger-menu" id="hamburgerMenu" aria-label="Toggle navigation menu">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucude-menu"><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
        </button>

        <div class="navbar-links" id="navbarLinks">
            <button id="historyBtn">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                HISTORY
            </button>
        </div>

        <div class="profile-dropdown" id="profileDropdown">
            <div class="profile-icon" id="profileIcon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            </div>
            <div class="dropdown-content" id="profileDropdownContent">
                <span style="font-size: 0.8rem; color: #73ff6e; font-family: 'share tech', sans-serif;" id="currentUserEmail"></span>
                <button id="logoutBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="17 16 22 12 17 8"/><line x1="22" x2="10" y1="12" y2="12"/></svg>
                    LOGOUT
                </button>
            </div>
        </div>
    </nav>

  <div class="main-content-wrapper">
    <h1>METASCANNER</h1>
    <p>UPLOAD IMAGE FILE TO ANALYZE METADATA, LOCATE GPS COORDINATES</p>

    <div class="button-group">
      <label for="imgInput" class="custom-file-input" id="uploadFileLabel">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-upload"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
        UPLOAD IMAGE
      </label>
      <input type="file" id="imgInput" accept="image/*">

      <button id="resetBtn">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.79 2.91L3 12Z"/><path d="M3 3v5h5"/></svg>
        RESET SYSTEM
      </button>
    </div>

    <div id="reversedGeocodingOutput" class="hidden"></div>

    <div class="map-box">
      <div class="map-box-head">
          <div class="map-coords-header map-selector-group">
            <span id="mapHeaderCoords"></span>
          </div>
          <div class="map-selector-group">
              <label for="mapTypeSelect"></label>
              <select id="mapTypeSelect">
                <option value="streets">STREET</option>
                <option value="satellite" selected>SATELLITE</option>
                <option value="topography">TOPOGRAPH</option>
              </select>
          </div>
      </div>
      <div id="map">
        <button id="viewOnGoogleMapsBtn" class="google-maps-icon-button hidden" title="Open In Google Maps">
          <img src="/assets/google-maps.svg" alt="Google Maps">
        </button>
        <button id="analyzeImageAIBtn" class="hidden" title="Analyze Image with AI">
          <i data-lucide="scan-search"></i>
        </button>
      </div>
      <div id="aiAnalysisOutput" class="hidden"></div>
    </div>

    <div id="messageBox" class="hidden" role="alert"></div>

    <div id="toastNotification">
      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-circle"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>
      <span id="toastMessage"></span>
    </div>

    <div class="info-section hidden" id="infoSection">
      <div class="image-location-wrapper">
        <div class="image-location-wrapper-box">
          <img id="uploadedImagePreview" class="hidden" alt="Uploaded Image Preview">
          <div class="location-details">
              <div id="coordinates-text" class="coordinates-section"></div>
          </div>
        </div>
      </div>

      <div class="metadata-header">
        <div class="metadata-title">IMAGE METADATA LOG</div>
        <button id="toggleRawMetadataBtn">VIEW RAW DATA</button>
      </div>

      <div id="metadata"></div>
      <div id="rawMetadataOutput" class="hidden"></div>

      <div id="button-group-export">
        <button style="width: 100%;" id="downloadPdfBtn" class="hidden">
            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></svg>
            EXPORT PDF
        </button>
        <button style="width: 100%;" id="exportJsonBtn" class="action-button hidden">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-braces mr-2"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5a2 2 0 0 1 2-2 2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>
            EXPORT JSON
        </button>
      </div>
    </div>
  </div>

  <!-- Chatbot Container -->
  <div class="chatbot-container">
      <div class="chatbot-toggle-button" id="chatbotToggle" title="Chat with Metascan AI">
          <i style="color: white;" data-lucide="bot"></i>
      </div>
      <div class="chat-window" id="chatWindow">
          <div class="chat-header">
              Metascan AI
              <button class="close-btn" id="closeChat">×</button>
          </div>
          <div class="chat-messages" id="chatMessages"></div>
          <div class="chat-input-container">
              <textarea id="chatInput" rows="1" placeholder="Ask about the image..."></textarea>
              <button id="sendMessageBtn"><i data-lucide="forward"></i></button>
          </div>
      </div>
  </div>

  <footer class="footer-section">
    <div style="font-size: 0.75rem; font-family: 'Share Tech Mono', monospace;">METASCANNER © 2025 | MADE WITH ❤️ BY <span style="margin-left: 2px;"><a href="https://www.metascanner.site/contributors">TEAM DELTA</a></span></div>
  </footer>

  <!-- History Sidebar -->
  <div id="sidebar-overlay"></div>
  <aside id="historySidebar">
      <div class="history-sidebar-header">
          <h2>HISTORY</h2>
          <button id="closeHistoryBtn" title="Close History">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
          </button>
      </div>
      <ul id="historyList">
          <!-- History items will be populated here by JavaScript -->
      </ul>
  </aside>

  <!-- External JavaScript Libraries -->
  <script src="https://unpkg.com/exifr"></script>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
  <script src="https://unpkg.com/lucide@latest"></script>

  <!-- Custom JavaScript -->
  <script type="module" src="/src/main.js"></script>

  <script>
    // Initialize Lucide Icons
    lucide.createIcons();
  </script>
</body>
</html>