Spaces:
Paused
Paused
File size: 5,083 Bytes
c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 129ba63 c2de490 | 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 143 144 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CC API EXPLORER - Jonell Magallanes</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="icon" type="image/png" href="favicon.png">
<style>
.background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: linear-gradient(135deg, #3B82F6, #1E40AF);
overflow: hidden;
z-index: -1;
}
.particles {
position: absolute;
width: 100%;
height: 100%;
}
.particles span {
position: absolute;
display: block;
width: 10px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: floatUp 12s linear infinite;
}
.particles span:nth-child(odd) {
animation-duration: 15s;
}
@keyframes floatUp {
0% { transform: translateY(100vh) scale(1); opacity: 1; }
100% { transform: translateY(-10vh) scale(0.5); opacity: 0; }
}
.hidden { display: none; }
.slide-in { animation: slide-in 0.4s forwards; }
.slide-out { animation: slide-out 0.4s forwards; }
@keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.watermark {
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
opacity: 0.4;
font-size: 12px;
color: white;
}
</style>
</head>
<body class="bg-gray-100 p-6">
<div class="background">
<div class="particles"></div>
</div>
<button id="toggle-button" onclick="toggleMenu()" class="fixed top-4 left-4 text-white bg-indigo-600 px-3 py-2 rounded-md shadow-lg z-50">☰</button>
<div id="menu" class="hidden fixed top-0 left-0 bg-white shadow-xl w-64 h-full p-6 overflow-y-auto z-50 slide-out">
<div class="flex justify-between items-center">
<h2 class="text-lg font-semibold text-indigo-600 uppercase">API Categories</h2>
<button onclick="toggleMenu()" class="text-gray-600 hover:text-red-500 text-xl">✖</button>
</div>
<div id="api-list" class="space-y-3 mt-4"></div>
</div>
<div class="flex flex-col items-center justify-center min-h-screen text-center relative z-10 fade-in">
<h1 class="text-4xl font-extrabold text-white shadow-md mb-4">Welcome to CC API Explorer</h1>
<div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md pop-up">
<div id="device-info" class="text-gray-700 text-sm mb-4">
<p id="user-agent">User Agent: <span>Loading...</span></p>
<p id="ip">IP Address: <span>Loading...</span></p>
<p id="current-time">Current Time: <span>Loading...</span></p>
<p id="request-count">Request Count: <span>Loading...</span></p>
</div>
</div>
</div>
<div class="watermark">Dev: Jonell Hutchin Magallanes</div>
<script>
function toggleMenu() {
const menu = document.getElementById("menu");
const toggleButton = document.getElementById("toggle-button");
if (menu.classList.contains("hidden")) {
menu.classList.remove("hidden", "slide-out");
menu.classList.add("slide-in");
toggleButton.style.display = "none";
} else {
menu.classList.remove("slide-in");
menu.classList.add("slide-out");
setTimeout(() => {
menu.classList.add("hidden");
toggleButton.style.display = "block";
}, 400);
}
}
document.addEventListener("DOMContentLoaded", function() {
const particleContainer = document.querySelector(".particles");
for (let i = 0; i < 15; i++) {
let particle = document.createElement("span");
let size = Math.random() * 20 + 5;
let delay = Math.random() * 10;
let positionX = Math.random() * 100;
let duration = Math.random() * 10 + 8;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.left = `${positionX}%`;
particle.style.animationDelay = `${delay}s`;
particle.style.animationDuration = `${duration}s`;
particleContainer.appendChild(particle);
}
});
</script>
<script src="script.js"></script>
</body>
</html> |