Spaces:

Jonell01
/

ccprojectsapihshs

Paused

App Files Files Community

Jonell01 commited on Mar 22, 2025

Commit

129ba63

verified ·

1 Parent(s): 58ad271

Update public/docs.html

Browse files

Files changed (1) hide show

public/docs.html +102 -56

public/docs.html CHANGED Viewed

@@ -3,22 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>JONELL MAGALLANES CC API EXPLORER</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>
-        .hidden { display: none; }
-        .slide-in { animation: slide-in 0.5s forwards; }
-        .slide-out { animation: slide-out 0.5s forwards; }
-        @keyframes slide-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
-        @keyframes slide-out { from { transform: translateX(0); } to { transform: translateX(-100%); } }
-        .pop-up { animation: pop-up 0.3s forwards; }
-        @keyframes pop-up { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-        .fade-in { animation: fade-in 0.5s forwards; }
-        @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
-        .watermark { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); opacity: 0.3; font-size: 12px; color: black; }
-        .z-max { z-index: 1001; }
         .background {
             position: fixed;
@@ -26,73 +14,131 @@
             left: 0;
             width: 100%;
             height: 100vh;
-            background: linear-gradient(135deg, #4FC3F7, #1E88E5);
             overflow: hidden;
             z-index: -1;
         }
-        .circles {
             position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
             height: 100%;
-            overflow: hidden;
         }
-        .circles li {
             position: absolute;
             display: block;
-            list-style: none;
-            width: 20px;
-            height: 20px;
-            background: rgba(255, 255, 255, 0.2);
-            animation: animate 25s linear infinite;
-            bottom: -150px;
         }
-        .circles li:nth-child(1) { left: 25%; width: 80px; height: 80px; animation-delay: 0s; }
-        .circles li:nth-child(2) { left: 10%; width: 20px; height: 20px; animation-delay: 2s; animation-duration: 12s; }
-        .circles li:nth-child(3) { left: 70%; width: 20px; height: 20px; animation-delay: 4s; }
-        .circles li:nth-child(4) { left: 40%; width: 60px; height: 60px; animation-delay: 0s; animation-duration: 18s; }
-        .circles li:nth-child(5) { left: 65%; width: 20px; height: 20px; animation-delay: 0s; }
-        .circles li:nth-child(6) { left: 75%; width: 110px; height: 110px; animation-delay: 3s; }
-        .circles li:nth-child(7) { left: 35%; width: 150px; height: 150px; animation-delay: 7s; }
-        .circles li:nth-child(8) { left: 50%; width: 25px; height: 25px; animation-delay: 15s; animation-duration: 45s; }
-        .circles li:nth-child(9) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 35s; }
-        .circles li:nth-child(10) { left: 85%; width: 150px; height: 150px; animation-delay: 0s; animation-duration: 11s; }
-        @keyframes animate {
-            0% { transform: translateY(0) scale(1); opacity: 1; }
-            100% { transform: translateY(-1000px) scale(0); opacity: 0; }
         }
     </style>
 </head>
 <body class="bg-gray-100 p-6">
     <div class="background">
-        <ul class="circles">
-            <li></li><li></li><li></li><li></li><li></li>
-            <li></li><li></li><li></li><li></li><li></li>
-        </ul>
     </div>
-    <audio id="background-music" src="https://files.catbox.moe/d72apa.mp3" autoplay loop></audio>
-    <button id="toggle-button" onclick="toggleMenu()" class="fixed top-4 left-4 text-gray-700 hover:text-indigo-500 transition duration-300 ease-in-out transform hover:scale-105 z-max">☰</button>
-    <div id="menu" class="hidden fixed top-0 left-0 bg-white shadow-lg w-64 h-full p-6 overflow-y-auto z-50">
-        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold mb-4">API Categories</div>
-        <div id="api-list" class="space-y-4"></div>
     </div>
-    <div class="flex flex-col items-center justify-center min-h-screen text-center relative z-10">
-        <h1 class="text-3xl font-bold mb-4">WELCOME CC API EXPLORER</h1>
-        <div class="bg-white rounded-lg shadow p-6 w-full max-w-md fade-in">
-            <div id="device-info" class="text-sm text-gray-700 mb-6">
-                <p id="user-agent"></p>
-                <p id="ip"></p>
-                <p id="current-time"></p>
-                <p id="request-count"></p>
             </div>
         </div>
     </div>
     <div class="watermark">Dev: Jonell Hutchin Magallanes</div>
     <script src="script.js"></script>
 </body>
 </html>

 <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;
             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>