<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XD_TOOLS</title>
    <meta name="theme-color" content="#ffffff">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <link rel="icon" href="https://all-assetxd.vercel.app/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">

    </script>
<style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #202040;
            transition: margin-left 0.3s ease;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none
        }

        .container {
            width: 80%;
            max-width: 600px;
            margin: 120px auto;
            padding: 10px;
            text-align: center;
            border: 3px solid #64ffda;
            border-radius: 12px;
            background-color: #2e2e50;
            box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.5)
        }

        .navbar {
            background-color: #202040;
            padding: 15px 20px;
            border-bottom: 3px solid #64ffda;
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .navbar .left {
            display: flex;
            align-items: center;
            gap: 15px
        }

        .navbar img {
            height: 40px
        }

        .navbar .right {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .navbar .right .hamburger {
            background-color: #64ffda;
            font-weight: bold;
            text-decoration: none;
            box-shadow: 3px 5px 0px #000;
            padding: 6px 9px;
            border-radius: 5px;
            font-size: 18px;
            transition: background-color 0.3s ease, transform 0.3s ease
        }

        .navbar .right .hamburger:hover {
            background-color: #fff;
            color: black;
            transform: scale(1.1)
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: -2500px;
            width: 250px;
            height: 100%;
            background-color: #202040;
            padding: 20px;
            transition: left 0.3s ease;
            box-shadow: 4px 0 6px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            border-radius: 5px
        }

        .sidebar .scrollable {
            max-height: 470px;
            overflow-y: auto;
            margin-bottom: 20px;
            background-color: #202040
        }

        .sidebar a {
            display: block;
            padding: 15px;
            font-size: 12px;
            text-decoration: none;
            font-weight: 500;
            border-radius: 8px;
            margin-bottom: 15px;
            background-color: #2e2e50;
            color: #64ffda;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3)
        }

        .sidebar a:hover {
            background-color: #f1f3f5;
            transform: translateX(2px)
        }

        .sidebar a:active {
            transform: translateX(3px)
        }

        .sidebar.active {
            left: 0
        }

        .sidebar .logo-section {
            display: flex;
            border-bottom: 3px solid #64ffda;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            margin-top: -2px;
            color: #64ffda;
            box-shadow: 0 1px 6px -4px rgba(0, 0, 0, 0.2)
        }

        .sidebar .logo-section img {
            height: 40px
        }

        .sidebar .logo-section span {
            font-weight: 800;
            font-size: 14px
        }

        .sidebar a i {
            margin-right: 8px;
            font-size: 14px;
            color: #64ffda
        }

        .sidebar a:hover {
            background-color: #F0F4F9;
            color: #64ffda
        }

        .sidebar .close-btn {
            font-size: 20px cursor:pointer;
            color: #000;
            padding: 6px 10px;
            background-color: #F0F4F9;
            border: 1px solid #586069;
            border-radius: 5px;
            transition: background-color 0.3s ease
        }

        .sidebar .close-btn:hover {
            background-color: #F0F4F9
        }

        footer {
            color: rgb(229, 229, 229);
            background-color: #2e2e50;
            text-align: center;
            padding: 1px 20px;
            position: fixed;
            width: 100%;
            bottom: 0
        }

        footer {
            font-size: 12px;
            text-align: center;
            padding: 10px 0
        }

        footer p {
            margin: 0
        }

        .developer-info {
            margin-top: auto;
            margin-bottom: 10px
        }

        #developer {
            display: flex;
            align-items: center;
            padding: 10px;
            font-size: 12px;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            margin-top: 10px;
            transition: background-color 0.3s ease
        }

        #developer i {
            margin-right: 10px;
            font-size: 13px
        }

        #developer:hover {
            background-color: #F0F4F9;
            color: #09deff
        }

        .build-info {
            margin-top: 20px;
            text-align: center;
            font-size: 10px;
            color: #09deff
        }

        .build-info p {
            margin: 5px 0
        }

        .build-info p:last-child {
            font-weight: 600;
            color: #09deff
        }

        @media (max-width:480px) {
            .container .user-info {
                padding: 10px;
                font-size: 12px
            }

            .container .user-info p {
                font-size: 12px
            }
        }

        .user-info i {
            margin-right: 8px
        }

        .user-info strong {
            margin-right: 4px
        }

        .user-info p {
            font-size: 12px
        }

        .user-info span {
            margin-left: 4px
        }

        .select-btn {
            font-weight: bold;
            background-color: #82ffe3;
            color: #202040;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            text-transform: uppercase;
            box-shadow: 3px 5px 0px #000;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 20px;
            color: #1C1C1C;
            cursor: pointer;
            margin-bottom: 20px
        }

        .select-btn:hover {
            border: 1px solid #b2b2b2;
            background-color: #ddd;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15)
        }

        #chevronIcon {
            color: #202040;
            font-size: 14px font-weight:bold;
            transition: transform 0.3s ease
        }

        #iconPlus,
        #iconCheck,
        #iconTimes,
        #iconSearch,
        #iconCog,
        #iconUser,
        #iconBell,
        #iconHeart,
        #iconHome,
        #iconArrowLeft {
            color: #202040;
            font-size: 10px font-weight:bold;
            transition: transform 0.3s ease
        }

        #iconPlus:hover,
        #iconCheck:hover,
        #iconTimes:hover,
        #iconSearch:hover,
        #iconCog:hover,
        #iconUser:hover,
        #iconBell:hover,
        #iconHeart:hover,
        #iconHome:hover,
        #iconArrowLeft:hover {
            color: #2c256c;
            transform: scale(1.2)
        }

        .dialog {
            display: none;
            position: fixed;
            top: 50px;
            left: 0;
            width: 100%;
            height: auto;
            z-index: 1000;
            color: #82ffe3;
            justify-content: center;
            align-items: center
        }

        .dialog-content {
            position: relative;
            width: 80%;
            max-width: 600px;
            background-color: #202040;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 20px;
            border: 3px solid #82ffe3
        }

        .header3 {
            text-align: center;
            font-size: 1rem;
            color: #82ffe3;
            margin-bottom: 10px;
            font-weight: 600
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 13px;
            overflow-y: auto;
            max-height: 380px;
            margin-bottom: 15px
        }

        @keyframes slideInUp {
            0% {
                transform: translateY(100%);
                opacity: 100
            }

            60% {
                transform: translateY(-10%);
                opacity: 1
            }

            80% {
                transform: translateY(5%)
            }

            100% {
                transform: translateY(0)
            }
        }

        .option-item img {
            width: 30px;
            height: 30px;
            margin-right: 2px
        }

        .option-item span {
            flex: 1
        }

        .option-item {
            padding: 12px;
            margin-Left: 3px;
            margin-Right: 3px;
            border-radius: 6px;
            background-color: #2e2e50;
            cursor: pointer;
            transition: background-color 0.7s;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            transition: box-shadow 0.3s ease-in-out, transform 0.3s ease;
            transition: background-color 0.3s, transform 0.3s ease;
            animation: slideInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
        }

        .option-item:hover {
            background-color: #F0F4F9;
            color: #00e1ff
        }

        .option-item i {
            color: #586069
        }

        .options div {
            padding: 8px 10px;
            font-size: medium;
            font-weight: 500;
            cursor: pointer
        }

        .options div:hover {
            background-color: #fafafa
        }

        .options div i {
            margin-right: 10px
        }

        .options div {
            cursor: pointer
        }

        .search input {
            width: 85%;
            max-width: 600px;
            margin-bottom: 15px;
            margin-top: 15px;
            border: 1px solid #586069;
            border-radius: 5px;
            background-color: #fff;
            font-size: 1rem;
            color: #24292f;
            line-height: 1.4
        }

        .search input:focus {
            outline: none;
            border-color: #0052CC
        }

        .search-box {
            position: relative;
            margin-bottom: 10px
        }

        .search-box i {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            color: #aaa;
            font-size: 16px
        }

        .search-box input {
            padding: 12px 12px 12px 33px;
            border: 1px solid #586069;
            border-radius: 5px;
            font-size: 12px;
            transition: border-color 0.3s ease;
            line-height: 1.4
        }

        .search-box input:focus {
            border-color: #0052CC;
            outline: none
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px font-weight:600;
            cursor: pointer;
            color: #24292f;
            border: 1px solid #586069;
            padding: 6px 10px;
            background-color: #F0F4F9;
            border-radius: 5px;
            transition: background-color 0.3s ease
        }

        .close-button:hover {
            background-color: #F0F4F9
        }

        .dialog-footer {
            text-align: right;
            margin-top: 1px
        }

        .dialog-footer button {
            padding: 8px 15px;
            border: none;
            border-radius: 5px;
            background-color: #0366d6;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease
        }

        .dialog-footer button:hover {
            background-color: #0288d1
        }

        #spinner {
            display: none;
            border: 4px solid #f3f3f3;
            border-radius: 50%;
            border-top: 4px solid #202040;
            width: 35px;
            height: 35px;
            animation: spin 1s linear infinite;
            margin: 30px auto
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        #selectedVPN {
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #24292f;
            font-weight: bold
        }

        .vpn-logo {
            width: 25px;
            height: 25px;
            margin-right: 10px
        }

        .container .user-info {
            margin-top: 20px;
            padding: 8px;
            background-color: #F0F4F9;
            border-radius: 5px;
            border: 1px solid #586069;
            font-size: 10px;
            color: #24292f;
            display: flex;
            justify-content: flex-start;
            align-items: center
        }

        .container .user-info p {
            margin: 0;
            font-weight: 500;
            display: flex;
            align-items: center;
            font-size: 10px
        }

        .container .user-info i {
            margin-right: 5px;
            color: #fff;
            font-size: 12px
        }

        .container .user-info strong {
            font-weight: bold;
            color: #fff;
            font-size: 10px
        }

        .container .user-info .expire {
            margin-left: 12px;
            font-size: 10px
        }

        .section-title i {
            color: #fff;
            margin-right: 6px;
            font-size: 15px
        }

        .section-title .blue-text {
            color: #0052CC;
            font-weight: bold;
            font-size: 12px
        }

        .section-title .black-text {
            font-weight: normal;
            font-size: 12px
        }

        @media (max-width:768px) {
            .container .user-info {
                flex-direction: column;
                text-align: center
            }

            .container .user-info i {
                margin-right: 3px;
                margin-left: 4px;
                margin-bottom: 4px
            }

            .container .user-info p {
                font-size: 12px;
                margin: 5px 0
            }

            .container .user-info .expire {
                margin-left: 0;
                margin-top: 5px
            }

            .section-title {
                font-size: 10px
            }

            .section-title .blue-text,
            .section-title .black-text {
                font-size: 12px
            }
        }

        .result {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: fixed;
            top: 35%;
            left: 50%;
            transform: translate(-50%, -35%);
            width: 82%;
            max-width: 600px;
            padding: 20px;
            border-radius: 5px;
            border: 3px solid #64ffda;
            background-color: #202040;
            border-radius: 6px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            text-align: center
        }

        .result.active {
            display: block
        }

        .result-title {
            color: #64ffda;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            text-align: center;
            letter-spacing: 0.5px
        }

        .result-text {
            font-size: 14px;
            line-height: 1.6;
            padding: 10px;
            border-radius: 6px;
            max-height: 400px;
            white-space: pre-wrap;
            text-align: left;
            word-wrap: break-word;
            overflow-y: auto;
            background-color: #2e2e50;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            color: #fff;
            margin-bottom: 15px
        }

        .result textarea {
            width: 100%;
            height: 350px;
            padding: 20px;
            font-size: 14px;
            border: 1px solid #D1D9E0;
            border-radius: 6px;
            resize: none;
            overflow-y: auto;
            background-color: #fff;
            color: #24292f
        }

        .result-buttons {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-top: 20px
        }

        .result-buttons button {
            padding: 10px 22px;
            background-color: #82ffe3;
            color: white;
            cursor: pointer;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            text-transform: uppercase;
            box-shadow: 3px 5px 0px #000;
            transition: background-color 0.3s ease, transform 0.2s ease;
            min-width: 80px
        }

        .result-buttons button:hover {
            background-color: #005cc5
        }

        .result-buttons #closeButton {
            background-color: #82ffe3;
            border-radius: 5px;
            color: #24292f
        }

        .result-buttons #closeButton:hover {
            background-color: #D1D9E0
        }

        .result-buttons #copyButton {
            background-color: #82ffe3;
            border-radius: 5px;
            color: #24292f
        }

        .result-buttons #copyButton:hover {
            background-color: #D1D9E0
        }

        .result-buttons #saveButton {
            background-color: #82ffe3;
            border-radius: 5px;
            color: #24292f
        }

        .result-buttons #saveButton:hover {
            background-color: #D1D9E0
        }

        .info-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 75%;
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #586069;
            border-radius: 6px;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)
        }

        .info-container p {
            color: #24292f;
            font-size: 12px;
            line-height: 1.6;
            margin-bottom: 15px;
            text-align: center
        }

        .info-container a {
            color: #0366d6;
            text-decoration: none;
            font-weight: 600
        }

        .info-container a:hover {
            text-decoration: underline
        }

        .typing-text-container {
            width: 100%;
            overflow: hidden;
            background-color: #2e2e50;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            padding: 10px 0;
            border-radius: 5px;
            position: relative;
            box-sizing: border-box;
            text-align: center
        }

        .typing-text-container span.gradient-text {
            display: inline-block;
            font-family: 'Press Start 2P', 'Courier New', monospace;
            font-size: 12px;
            font-weight: bold;
            white-space: nowrap;
            background: linear-gradient(45deg, #C0C0C0, #D3D3D3, #B0B0B0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            border-right: 3px solid #ffffff;
            padding-right: 5px;
            animation: typing 8s steps(30) 1s infinite, blink-caret 0.75s step-end infinite
        }

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes blink-caret {
            50% {
                border-color: transparent
            }
        }

        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

        @keyframes typing {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes blink {
            50% {
                border-color: transparent
            }
        }

        #typingText {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: 2px solid #0366d6;
            width: 0;
            animation: typing 6s steps(20) infinite, blink 0.75s step-end infinite
        }

        .toast {
            visibility: hiddecn;
            min-width: 180px;
            margin-left: -90px;
            background-color: #202040;
            color: white;
            text-align: center;
            border-radius: 2px;
            padding: 8px 15px;
            position: fixed;
            z-index: 9999;
            left: 50%;
            bottom: 30px;
            font-size: 12px;
            box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: opacity 0.5s ease-in-out
        }

        .toast.show {
            visibility: visible;
            opacity: 1
        }

        .notes {
            background-color: #fff;
            border-radius: 5px;
            border: 1px solid #586069;
            padding: 15px 20px;
            max-width: 500px;
            margin: 0 auto
        }

        .notes p {
            font-size: 14px;
            color: #24292f;
            line-height: 1.6;
            margin: 0
        }

        .notes a {
            color: #0366d6;
            font-weight: bold;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: color 0.3s ease
        }

        .notes a:hover {
            color: #ffffff
        }

        .notes i {
            margin-right: 8px
        }

        .notes .fas.fa-arrow-up {
            color: #28a745;
            font-size: 14px margin-right:10px
        }

        .notes span {
            font-size: 10px;
            color: #586069
        }

        .loader {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(to right, #00ff00, #32cd32, #00ff00);
            animation: load 1.5s infinite;
            z-index: 2000
        }

        @keyframes load {
            0% {
                left: -100%;
                width: 30%
            }

            50% {
                left: 30%;
                width: 40%
            }

            100% {
                left: 100%;
                width: 30%
            }
        }

        .decrypt-button {
            font-weight: bold;
            width: 100%;
            padding: 15px;
            background-color: #82ffe3;
            color: #202040;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
            text-transform: uppercase;
            box-shadow: 3px 5px 0px #000;
            transition: background-color 0.3s ease, transform 0.2s ease
        }

        .decrypt-button:hover {
            background-color: #f1f3f5;
            color: #202040
        }
</style>
</head>

<body>
    <div class="loader" id="loader"></div>
    <div class="sidebar" id="sidebar">
        <div class="logo-section"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Xd_Pro.png?20241124190512" alt="Logo"><span>XD-TOOLS</span><span class="close-btn" onclick="closeSidebar()"><i class="fas fa-times"></i></span></div>
        <div class="scrollable"><a href="/pro" id="user-pro"><i class="fas fa-user-tie"></i>XD-TOOLS 🔐</a><a href="https://xd1111.vercel.app/" id="user-pro"><i class="fas fa-user-tie"></i>NullptrO 🔐</a><a href="https://xd-thailand-vpn.vercel.app/" id="user-pro"><i class="fas fa-user-tie"></i>XD-TH101 🔐</a><a href="https://codex-magnum2.vercel.app/" id="admin"><i class="fas fa-terminal"></i>Code-X</a><a href="https://t.me/xdtools_bot" id="decrypt-txt"><i class="fas fa-robot"></i>Decrypt Bot</a><a href="https://t.me/xdpro101_bot" id="decrypt-txt"><i class="fas fa-book"></i>Decrypt Txt</a><a href="https://img2url.xdtools.id/" id="telegram"><i class="fas fa-folder"></i>Image to url</a><a href="/privacy" id="privacy-policy"><i class="fas fa-user-shield"></i>Privacy Policy</a><a href="https://t.me/sniffer101" id="telegram"><i class="fab fa-telegram-plane"></i>Telegram</a><a href="/tron" id="buy-pro"><i class="fas fa-credit-card"></i>Upgrade 👑</a><a href="/about" id="admin"><i class="fas fa-laptop-code"></i>About</a></div>
        <div class="build-info">
            <p>Version: VX.1.12</p>
            <p>Build Date: 2024-11-19</p>
        </div>
    </div>
    <div class="main-content">
        <div class="navbar">
            <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Xd_Pro.png?20241124190512" alt="GitHub Logo"><span style="font-weight: 800; font-size: 24px; color: #64ffda;">XD-TOOLS</span></div>
            <div class="right"><span class="hamburger" onclick="toggleSidebar()"><i class="fas fa-bars"></i></span></div>
        </div>
        <div class="container">
            <div class="section-title">
                <h2 style="color: #fff; text-align: left;"><i class="fas fa-server" style="margin-right: 8px; font-size: 20px color: #000;"></i>Version Code: VX.1.12</h2>
                <div class="select-btn" onclick="openDialog()"><img id="selectedIcon" src="" alt="" style="display:none; width: 25px; height: 25px;"><span id="selectedVPN"><img src="https://upload.wikimedia.org/wikipedia/commons/b/b5/Xd_Pro.png?20241124190512" alt="img" class="vpn-logo"><span id="typingText">CHOOSE VPN NAME</span></span><i class="fas fa-notes-medical" id="iconCog" style="font-size: 20px;"></i></div>
                <form method="POST" onsubmit="return checkSelection()"><input type="hidden" name="vpnName" id="vpnNameInput"><button type="submit" class="decrypt-button">DECRYPT</button></form>
                <div class="notes" style="text-align: center; margin-top: 20px; background-color: #202040; padding: 15px; border-radius: 8px;">
                    <p style="font-size: 12px; color: #fff; line-height: 1.6;"><i class="fas fa-arrow-up" style="color: #28a745; font-size: 14px"></i><strong style="font-size: 10px; font-weight: 600;">Unlock Exclusive Features with a Pro Upgrade!</strong><br>Gain access to additional VPN decryption capabilities and more!<br><span style="color: #fff;">Want to learn more about Pro features?</span><br><a href="javascript:void(0)" id="contactAdmin" style="color: #fff; font-weight: bold; text-decoration: none; transition: color 0.3s ease;"><i class="fas fa-headset" style="margin-right: 8px;"></i>Contact Admin for Assistance</a></p>
                    <div id="spinner"></div>
                </div>
            </div>
            <div class="result {{ 'active' if result }}" id="result">
                <div class="result-content">
                    <h3 class="result-title ">Result: {{ vpnname }}</h3>
                    <div class="result-text" id="resultText">{{ result }}</div>
                    <div class="typing-text-container"><span class="gradient-text">© 2024 All rights reserved | notYoursupportSystem™</span></div>
                    <div class="result-buttons"><button id="closeButton" onclick="closeDialog(event)">DELETE</button><button id="copyButton" onclick="copyToClipboard(event)">COPY</button><button id="saveButton" onclick="saveToFile(event)">SAVE</button></div>
                </div>
            </div>
        </div>
        <div id="toast" class="toast"><span id="toastMessage">Toast message XD-Tools</span></div><!-- Footer -->
        <footer>
            <p>© 2024 All rights reserved | notYoursupportSystem™</p>
        </footer>
        <div id="vpnDialog" class="dialog">
            <div class="dialog-content"><button class="close-button" onclick="closeDialog()"><i class="fas fa-times"></i></button>
                <div class="header3"><span class="gradient-text">XD-TOOLS VX.1.12</span></div>
                <div class="search">
                    <div class="search-box"><i class="fas fa-search"></i><input type="text" id="searchInput" placeholder="Search VPN" onkeyup="filterOptions()"></div>
                </div>
                <div class="options" id="optionsList"></div>
            </div>
        </div>
    </div>

</body>

</html>