SempChat/index.html at main · HackerSM9/SempChat · 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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Samarth Magdum">
    <meta name="description" content="SempChat is a Secure Temporary Chatting App designed for Swift, Short and Vanishing/Disposable Chats. Enter a Chat Session with Unique Usernames and PIN-protected access, dark mode, and real-time message removal for ultimate privacy.">
    <meta name="keywords" content="SempChat, new chatting app, disposable chatting app, vanishing chatting app, chatting app, private messaging, secure chat app, disappearing messages, real-time chat, PIN-protected chat, dark mode chat, editor's choice, chatting app, messaging app, free app, new app, serverless chatting app, serverless app, new web-app, new web chatting app, indian, american, ai, ai-based, cybersecurity, worldwide app, global app, global chatting app, russian chatting app, hackersm9">
    <meta name="google-site-verification" content="Og2a9XJYREe0qJ9OeT2eVsoXG_cAgw88DbbgAXmDAcc" />
    <meta name="robots" content="index, follow">
        <!-- Open Graph / Facebook -->
        <meta property="og:type" content="website">
        <meta property="og:url" content="https://hackersm9.github.io/SempChat">
        <meta property="og:title" content="SempChat - Private Chatting App for Secure Conversations">
        <meta property="og:description" content="Engage in private chats with SempChat's secure, PIN-protected, and vanishing message features. Safe, secure, and simple to use.">
        <meta property="og:image" content="https://hackersm9.github.io/SempChat/images/sempchat-icon.png">

        <!-- Twitter Card Meta Tags -->
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:url" content="https://hackersm9.github.io/SempChat">
        <meta name="twitter:title" content="SempChat - Disappearing Messages Chat App">
        <meta name="twitter:description" content="Connect securely on SempChat! Use PIN-protected login for private, vanishing chat sessions with no stored messages.">
        <meta name="twitter:image" content="https://hackersm9.github.io/SempChat/images/sempchat-icon.png">
        <!-- Schema.org markup for Google+ -->
        <script type="application/ld+json">
            {
              "@context": "https://schema.org",
              "@type": "WebApplication",
              "name": "SempChat",
              "url": "https://hackersm9.github.io/SempChat",
              "image": "https://hackersm9.github.io/SempChat/images/sempchat-icon.png",
              "author": {
                "@type": "Person",
                "name": "Samarth Magdum"
              },
              "description": "SempChat is a secure and private messaging app with vanishing messages and PIN-protected chat sessions. Ideal for users seeking privacy and convenience.",
              "applicationCategory": "Social Networking",
              "operatingSystem": "Web-based",
              "offers": {
                "@type": "Offer",
                "price": "0.00",
                "priceCurrency": "INR"
              },
              "softwareVersion": "1.0",
              "datePublished": "2024-10-27"
            }
            </script>
            <script type="module">
           import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
           const el = document.createElement('pwa-update');
           document.body.appendChild(el);
            </script>
            <script>
              if ("serviceWorker" in navigator) {
                window.addEventListener("load", () => {
                  navigator.serviceWorker.register("pwabuilder-sw.js")
                    .then(reg => console.log("Service worker registered:", reg))
                    .catch(err => console.log("Service worker error:", err));
                });
              }
            </script>
    <!-- Start of Actual head tags -->
    <link rel="icon" type="image/x-icon" href="https://hackersm9.github.io/SempChat/images/sempchat.ico">
    <title>SempChat</title>
    <link rel="stylesheet" href="style/style.css">
    <link rel="stylesheet" href="https://hackersm9.github.io/free-icons/css/latest-icon.css"/>
     <link rel="manifest" href="manifest.json" />
    <script src="https://cdn.jsdelivr.net/npm/peerjs@1.3.2/dist/peerjs.min.js"></script>
</head>
<body>
  <div class="l-loading-screen">
  <div class="l-content">
    <img src="https://hackersm9.github.io/SempChat/images/sempchat.svg" alt="SempChat Icon" class="l-icon">
    <h1 class="l-title">SempChat</h1>
    <p class="l-tagline">Safe <i class="fas fa-lock lin"></i> Simple <i class="fas fa-exchange-alt lin"></i> Swift <i class="fas fa-bolt lin"></i></p>
  </div>
</div>

    <!-- Persistent Title at the Top -->
    <center><header style="padding-top:5px;">
        <img src="https://hackersm9.github.io/SempChat/images/sempchat.svg" class="icon-svg">
        <h1 class="title">SempChat</h1>
      <center><hr></center>
      </header></center>

    <!-- Stage 1: Username and PIN Entry -->
    <div id="stage1" class="stage">
        <h1 style="color:#c299ff;">Hello World!</h1>
        <label for="username"><i class="fas fa-user"></i> Create Username:</label><i class="fas fa-info-circle info"></i>
        <input type="text" id="username" placeholder="Username" required>
      <br>
        <label for="pin"><i class="fas fa-lock"></i> Create PIN:</label><i class="fas fa-info-circle info"></i>
        <input type="tel" id="pin" placeholder="4-6 digit PIN" inputmode="numeric" pattern="\d{4,6}" minlength="4" maxlength="6" autocomplete="off" style="-webkit-text-security: disc;" required>
      <span class="butline"><button id="exit-button" onclick="exitChat();reloadChat()"><i class="fa-solid fa-rotate-left"></i></button>
        <button onclick="goToStage2()">Next <i class="fa-solid fa-angle-right"></i></button></span>
    </div>

    <!-- Stage 2: Enter Partner's Username and PIN -->
    <div id="stage2" class="stage hidden">
        <h1 style="color:#c299ff;">Almost there!</h1>
        <label for="partnerUsername"><i class="fas fa-user"></i> Partner's Username:</label><i class="fas fa-info-circle info"></i>
        <input type="text" id="partnerUsername" placeholder="Partner's Username" required>
      <br>
        <label for="partnerPin"><i class="fas fa-lock"></i> Partner's PIN:</label><i class="fas fa-info-circle info"></i>
        <input type="tel" id="partnerPin" placeholder="4-6 digit PIN" inputmode="numeric" pattern="\d{4,6}" minlength="4" maxlength="6" autocomplete="off" style="-webkit-text-security: disc;" required>
         <span class="butline"><button id="exit-button" onclick="exitChat();reloadChat()"><i class="fa-solid fa-rotate-left"></i></button>
           <button onclick="connectToChat()">Enter Chat <i class="fas fa-sign-in-alt"></i></button></span>
    </div>

    <!-- Stage 3: Chatbox Session -->
    <div id="stage3" class="stage hidden">
        <h3 id="partnerStatus">Connected with </h3>
        <div id="chatbox" class="chatbox">
            <!-- Messages will appear here -->
        </div>
        <div class="input-container">
            <button id="exit-button" onclick="exitChat();reloadChat()"><i class="fa-solid fa-rotate-left"></i></button>
            <input type="text" id="messageInput" placeholder="Enter message...">
            <button id="send-button" onclick="sendMessage()"><i class="fa-solid fa-paper-plane"></i></button>
        </div>
    </div>

    <!-- Persistent Footer at the Bottom -->
    <footer style="padding-bottom:5px;">
        <!--<hr>-->
        <p><a href="/">Developer</a> <a href="privacy-policy.html">Privacy Policy</a></p>
        <p>© 2025 <a href="https://github.com/HackerSM9" style="text-decoration: none;">Samarth Magdum.</a> All Rights Reserved.</p>
    </footer>

    <script src="script/app.js"></script>
    <!-- Place this script at the end of your HTML or within a script tag in the head section -->
    <script>
      // Wait for the page to fully load
      window.addEventListener('load', () => {
        // Set a 2-second delay
        setTimeout(() => {
          // Select the loading screen and hide it
          const loadingScreen = document.querySelector('.l-loading-screen');
          if (loadingScreen) {
            loadingScreen.style.display = 'none';
          }
        }, 1500); // 2000 milliseconds = 2 seconds
      });
    </script>
    <script type="module">
      import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js";
      import { getDatabase, ref, get, set, update } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-database.js";

      // Firebase configuration
      const firebaseConfig = {
          apiKey: "AIzaSyDbj-94HaCLahfpo7-Z3SBz2omCJsVkUhs",
          authDomain: "sempchat.firebaseapp.com",
          databaseURL: "https://sempchat-default-rtdb.asia-southeast1.firebasedatabase.app",
          projectId: "sempchat",
          storageBucket: "sempchat.appspot.com",
          messagingSenderId: "665811496687",
          appId: "1:665811496687:web:b8c3e3bb2016ffb781351a",
          measurementId: "G-49SKQEEX44"
      };

      // Initialize Firebase
      const app = initializeApp(firebaseConfig);
      const db = getDatabase(app);

      // Function to sanitize IP address
      function sanitizeIP(ip) {
          return ip.replace(/\./g, "_");
      }

      // Function to fetch the visitor's IP address
      async function getVisitorIP() {
          try {
              const response = await fetch("https://api.ipify.org?format=json");
              const data = await response.json();
              return data.ip;
          } catch (error) {
              console.error("Error fetching IP:", error);
              return null;
          }
      }

      // Function to track the visitor
      async function trackVisitor() {
          try {
              const clientIP = await getVisitorIP();
              if (!clientIP) {
                  console.error("Error: Unable to fetch IP.");
                  return;
              }

              const sanitizedIP = sanitizeIP(clientIP);
              const visitorRef = ref(db, `visitors/${sanitizedIP}`);
              const snapshot = await get(visitorRef);

              if (!snapshot.exists()) {
                  // New visitor
                  await set(visitorRef, { timestamp: Date.now() });

                  // Increment the visitor count
                  const countRef = ref(db, "visitorCount");
                  const countSnap = await get(countRef);
                  const newCount = countSnap.exists() ? countSnap.val() + 1 : 1;
                  await set(countRef, newCount);

                  console.log("New visitor tracked.");
              } else {
                  console.log("Returning visitor detected. No count increment.");
              }
          } catch (error) {
              console.error("Error tracking visitor:", error);
          }
      }

      // Execute visitor tracking
      trackVisitor();
  </script>

</body>
</html>