File size: 5,188 Bytes
295b28a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
document.addEventListener('DOMContentLoaded', function() {
    // Initialize mock data
    let mockNumbers = [
        {
            platform: 'Twilio',
            number: '+1 555-123-4567',
            country: 'USA',
            status: 'Available'
        },
        {
            platform: 'Virtusim',
            number: '+44 7911 123456',
            country: 'UK',
            status: 'Available'
        },
        {
            platform: 'IVASMS',
            number: '+62 812-3456-7890',
            country: 'Indonesia',
            status: 'Busy'
        }
    ];

    // Load saved configuration
    loadConfiguration();

    // Populate numbers table
    populateNumbersTable();

    // Setup form submission
    document.getElementById('botConfigForm').addEventListener('submit', function(e) {
        e.preventDefault();
        saveConfiguration();
        showNotification('Configuration saved successfully!');
    });

    // Setup refresh button
    document.getElementById('refreshNumbers').addEventListener('click', function() {
        populateNumbersTable();
        showNotification('Numbers refreshed!');
    });

    // Simulate incoming OTP messages
    setInterval(simulateIncomingOTP, 10000);

    function loadConfiguration() {
        const botToken = localStorage.getItem('botToken') || '';
        const ownerId = localStorage.getItem('ownerId') || '';
        const groupId = localStorage.getItem('groupId') || '';

        document.getElementById('botToken').value = botToken;
        document.getElementById('ownerId').value = ownerId;
        document.getElementById('groupId').value = groupId;
    }

    function saveConfiguration() {
        const botToken = document.getElementById('botToken').value;
        const ownerId = document.getElementById('ownerId').value;
        const groupId = document.getElementById('groupId').value;

        localStorage.setItem('botToken', botToken);
        localStorage.setItem('ownerId', ownerId);
        localStorage.setItem('groupId', groupId);
    }

    function populateNumbersTable() {
        const tableBody = document.getElementById('numbersTableBody');
        tableBody.innerHTML = '';

        mockNumbers.forEach(number => {
            const row = document.createElement('tr');
            row.className = 'border-t border-gray-600 hover:bg-gray-600 transition duration-150 fade-in';
            
            row.innerHTML = `
                <td class="py-3 px-4">${number.platform}</td>
                <td class="py-3 px-4">${number.number}</td>
                <td class="py-3 px-4">${number.country}</td>
                <td class="py-3 px-4">
                    <span class="${number.status === 'Available' ? 'text-green-400' : 'text-red-400'}">
                        ${number.status}
                    </span>
                </td>
                <td class="py-3 px-4">
                    <button class="bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded text-sm">
                        Get OTP
                    </button>
                </td>
            `;
            
            tableBody.appendChild(row);
        });
    }

    function simulateIncomingOTP() {
        const platforms = ['Twilio', 'Virtusim', 'IVASMS'];
        const services = ['Google', 'Facebook', 'WhatsApp', 'Telegram', 'Twitter'];
        const platform = platforms[Math.floor(Math.random() * platforms.length)];
        const service = services[Math.floor(Math.random() * services.length)];
        const code = Math.floor(1000 + Math.random() * 9000);

        const otpMessages = document.getElementById('otpMessages');
        if (otpMessages.firstChild?.className === 'text-center text-gray-500') {
            otpMessages.innerHTML = '';
        }

        const messageDiv = document.createElement('div');
        messageDiv.className = 'mb-3 fade-in';
        messageDiv.innerHTML = `
            <div class="bg-gray-600 rounded-lg p-3">
                <div class="flex justify-between items-center mb-1">
                    <span class="text-purple-300 font-medium">${platform}</span>
                    <span class="text-xs text-gray-400">${new Date().toLocaleTimeString()}</span>
                </div>
                <div class="text-sm">
                    <span class="text-gray-400">Service: </span>${service}<br>
                    <span class="text-gray-400">OTP Code: </span>
                    <span class="font-bold text-green-400">${code}</span>
                </div>
            </div>
        `;
        
        otpMessages.insertBefore(messageDiv, otpMessages.firstChild);
    }

    function showNotification(message) {
        const notification = document.createElement('div');
        notification.className = 'notification';
        notification.textContent = message;
        document.body.appendChild(notification);
        
        setTimeout(() => {
            notification.classList.add('show');
        }, 100);
        
        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => {
                document.body.removeChild(notification);
            }, 300);
        }, 3000);
    }
});