
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="google-site-verification" content="cTmJx2WsktZHFDSDDfGuUcS8neBrlX9s0r5ItZKXN8o" />
  <meta name="description" content="Access Simsimi Free API by Jerome Jamis to get intelligent chatbot responses. Perfect for developers exploring AI chat integrations.">
  <meta name="keywords" content="Simsimi, Simsimi API, Simsimi Free API, Jerome Jamis, AI Chatbot, Chatbot API, Free Chatbot Service">
  <meta name="author" content="Jerome Jamis">
  <meta name="msapplication-config" content="none" />
  <link rel="shortcut icon" href="https://i.ibb.co/YRqG3F7/technical-support.png">
  <title>Simsimi API by Jerome Jamis</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
  <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "Simsimi API by Jerome Jamis",
    "description": "Access Simsimi Free API to create intelligent chatbots or interact with AI chat systems.",
    "applicationCategory": "Chatbot API",
    "operatingSystem": "All",
    "author": {
      "@type": "Person",
      "name": "Jerome Jamis"
    },
    "url": "https://simsimi.ooguy.com/",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "PHP"
    }
  }
  </script>
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background-color: #1a1a1a;
      color: #eaeaea;
    }

    #particles-js {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: transparent;
    }

    .container {
      background: rgba(0, 0, 0, 0.7);
      padding: 2rem;
      border-radius: 10px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
      backdrop-filter: blur(10px);
    }

    .logo {
      display: block;
      margin: 0 auto 20px;
      width: 100px;
      height: 100px;
    }

    .title {
      color: #61dafb;
      font-weight: 700;
      text-transform: uppercase;
    }

    .btn-blue {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border-radius: 5px;
      transition: background-color 0.3s ease, transform 0.3s ease;
      box-shadow: 0 4px 10px rgba(0, 123, 255, 0.5);
    }

    .btn-blue:hover {
      background-color: #0056b3;
      transform: scale(1.05);
    }

    .input-field {
      background-color: rgba(255, 255, 255, 0.1);
      color: #eaeaea;
      border: 1px solid #555;
      border-radius: 5px;
      padding: 8px;
      font-size: 16px;
      transition: border-color 0.3s ease;
    }

    .input-field:focus {
      border-color: #007bff;
      outline: none;
    }

    .footer {
      margin-top: 30px;
      font-size: 14px;
      color: #777;
    }
  </style>
</head>
<body>
  <div id="particles-js"></div>
  <div class="container max-w-md mx-auto text-center">
    <img src="https://i.ibb.co/YRqG3F7/technical-support.png" alt="Logo" class="logo">
    <h1 class="title text-3xl mb-6">Sim API by Jerome Jamis</h1>
    <p class="text-lg mb-8">Explore the features of the Sim API and enjoy our service.</p>

    <div class="mb-6">
      <a href="/commands" class="btn-blue mr-2">Commands</a>
      <a href="/endpoints" class="btn-blue">Endpoints</a>
    </div>

    <!-- Sim Feature -->
    <input type="text" id="simQuery" class="input-field w-full mb-4 p-2" placeholder="Enter your query">
    <button class="btn-blue w-full mb-4" onclick="fetchSim()">Fetch Sim Response</button>
    <div id="response" class="text-gray-400 mt-2"></div>

    <!-- Teach Feature -->
    <input type="text" id="ask" class="input-field w-full mb-4 p-2" placeholder="Question to teach">
    <input type="text" id="ans" class="input-field w-full mb-4 p-2" placeholder="Answer to teach">
    <button class="btn-blue w-full" onclick="teachApi()">Teach API</button>
    <div id="teachResponse" class="text-gray-400 mt-2"></div>

    <!-- Footer Section -->
    <footer class="footer">© 2024 Jerome Jamis. All rights reserved.</footer>
    <div class="footer">
      <p>Time: <span id="time" style="font-weight: bold;"></span></p>
      <p>Ping: <span id="ping" style="font-weight: bold;"></span></p>
    </div>
  </div>

  <script>
        particlesJS("particles-js", {
      particles: {
        number: { value: 60, density: { enable: true, value_area: 800 } },
        color: { value: "#61dafb" },
        shape: { type: "circle", stroke: { width: 0, color: "#61dafb" } },
        opacity: { value: 0.5 },
        size: { value: 3 },
        line_linked: { enable: true, distance: 150, color: "#61dafb", opacity: 0.4, width: 1 },
        move: { enable: true, speed: 6 }
      },
      interactivity: {
        detect_on: "canvas",
        events: { onhover: { enable: true, mode: "repulse" }, onclick: { enable: true, mode: "push" }, resize: true },
        modes: { repulse: { distance: 200, duration: 0.4 } }
      },
      retina_detect: true
    });

    async function fetchSim() {
      const query = document.getElementById('simQuery').value.trim();
      if (!query) {
        Swal.fire({ icon: 'warning', title: 'Empty Field', text: 'Please enter a query.' });
        return;
      }
      try {
        const response = await fetch(`/sim?query=${query}`);
        const data = await response.json();
        Swal.fire({ icon: 'success', title: 'API Response', text: data.respond });
        document.getElementById('simQuery').value = '';
      } catch (error) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error fetching data' });
      }
    }

    async function teachApi() {
      const ask = document.getElementById('ask').value.trim();
      const ans = document.getElementById('ans').value.trim();
      if (!ask || !ans) {
        Swal.fire({ icon: 'warning', title: 'Empty Fields', text: 'Please enter both a question and an answer.' });
        return;
      }
      try {
        const response = await fetch(`/teach?ask=${ask}&ans=${ans}`);
        const data = await response.json();
        Swal.fire({ icon: 'success', title: 'Success', text: 'Successfully taught the API' });
      } catch (error) {
        Swal.fire({ icon: 'error', title: 'Error', text: 'Error teaching the API' });
      }
    }

    function measurePing() {
      const xhr = new XMLHttpRequest();
      let startTime = Date.now();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          const pingTime = Date.now() - startTime;
          document.getElementById("ping").textContent = pingTime + " ms";
        }
      };
      xhr.open("GET", location.href + "?t=" + startTime);
      xhr.send();
    }

    function updateTime() {
      const now = new Date();
      document.getElementById('time').textContent = now.toLocaleTimeString('en-US', { hour12: true });
    }

    setInterval(updateTime, 1000);
    setInterval(measurePing, 1000);
  </script>
</body>
</html>
