File size: 3,873 Bytes
838393f
 
 
58dca56
838393f
 
 
 
 
 
58dca56
838393f
 
 
 
 
 
 
58dca56
838393f
 
 
58dca56
838393f
 
 
 
 
 
58dca56
838393f
 
 
 
 
58dca56
838393f
58dca56
 
838393f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
58dca56
838393f
 
 
 
 
 
58dca56
838393f
58dca56
 
838393f
 
58dca56
838393f
 
 
 
 
 
58dca56
838393f
 
 
58dca56
838393f
 
 
 
 
 
 
 
 
 
58dca56
838393f
 
 
 
58dca56
838393f
 
 
 
58dca56
838393f
 
58dca56
838393f
58dca56
 
838393f
 
 
 
 
 
 
 
 
 
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
let menuVisible = false;

document.addEventListener("DOMContentLoaded", () => {
    
    fetch('/jonellmagallanes')
        .then(response => response.json())
        .then(data => {
            const apiList = document.getElementById('api-list');
            const categories = {};

            
            data.forEach(api => {
                if (!categories[api.category]) {
                    categories[api.category] = [];
                }
                categories[api.category].push(api);
            });

            
            const sortedCategories = Object.keys(categories).sort();

            sortedCategories.forEach(category => {
                
                const categoryButton = document.createElement('button');
                categoryButton.className = "block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 transition duration-300 ease-in-out transform hover:scale-105";
                categoryButton.textContent = category;
                categoryButton.onclick = () => toggleCategory(categoryButton);
                apiList.appendChild(categoryButton);

                
                const categoryDiv = document.createElement('div');
                categoryDiv.id = category;
                categoryDiv.className = 'hidden px-4 py-2';

                categories[category].forEach(api => {
                    
                    const fullUsage = `${api.usages}${api.query || ''}`;

                    
                    const apiDiv = document.createElement('div');
                    apiDiv.innerHTML = `
                        <strong>${api.name}</strong>
                        <p>${api.desc}</p>
                        <p>Method: ${api.method.toUpperCase()}</p>
                        <p>Usage: <a href="${fullUsage}">${fullUsage}</a></p>
                        <button onclick="tryApi('${fullUsage}')" class="mt-2 px-4 py-2 bg-indigo-500 text-white text-sm rounded hover:bg-indigo-700 transition duration-300 ease-in-out transform hover:scale-105">Try</button>
                    `;
                    categoryDiv.appendChild(apiDiv);
                });

                apiList.appendChild(categoryDiv);
            });
        });

    
    fetch('/requests')
        .then(response => response.json())
        .then(data => {
            document.getElementById('request-count').textContent = `Request API: ${data.request}`;
        });

    
    setInterval(updateTime, 1000);

    
    document.getElementById('user-agent').textContent = `User Agent: ${navigator.userAgent}`;

    
    fetch('https://api.ipify.org?format=json')
        .then(response => response.json())
        .then(data => {
            document.getElementById('ip').textContent = `IP Address: ${data.ip}`;
        });

    
    document.getElementById('device-info').classList.add('fade-in');
});


function toggleCategory(button) {
    const allButtons = document.querySelectorAll('#api-list > button');
    allButtons.forEach(btn => btn.classList.remove('highlighted'));

    const categoryDiv = document.getElementById(button.textContent);
    button.classList.toggle('highlighted');
    categoryDiv.classList.toggle('hidden');
    categoryDiv.classList.add('pop-up');
}


function tryApi(fullUsage) {
    window.location.href = fullUsage;
}


function toggleMenu() {
    const menu = document.getElementById('menu');

    if (menuVisible) {
        
        menu.classList.remove('slide-in');
        menu.classList.add('slide-out');
        setTimeout(() => menu.classList.add('hidden'), 400);
    } else {
        
        menu.classList.remove('hidden', 'slide-out');
        menu.classList.add('slide-in');
    }

    menuVisible = !menuVisible;
}

function updateTime() {
    const now = new Date();
    document.getElementById('current-time').textContent = `Current Time: ${now.toLocaleTimeString()}`;
}