Collaborama

Source: site.view [edit]
Function name:	home
Arguments:
Description:	first page for noahgames
Page type:	html
Render function:
Module:	noahGames
Page source:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Custom GPT</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background-color: #1e1e2f;
      color: #ffffff;
      margin: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
    }

    header {
      padding: 1rem;
      text-align: center;
      background-color: #2e2e3e;
      font-size: 1.5rem;
      font-weight: bold;
      border-bottom: 1px solid #444;
    }

    #chat {
      flex: 1;
      padding: 1rem;
      overflow-y: auto;
      scroll-behavior: smooth;
      display: flex;
      flex-direction: column;
    }

    .message {
      margin-bottom: 1rem;
      max-width: 80%;
      padding: 0.75rem 1rem;
      border-radius: 1rem;
      line-height: 1.4;
      display: inline-block;
    }

    .user {
      background-color: #007bff;
      color: white;
      align-self: flex-end;
      margin-left: auto;
    }

    .bot {
      background-color: #333;
      color: #eee;
      align-self: flex-start;
      margin-right: auto;
    }

    #suggestions {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      gap: 0.5rem;
      padding: 0.5rem 0.75rem;
      background-color: #2e2e3e;
      border-top: 1px solid #444;
      border-bottom: 1px solid #444;
    }

    .suggestion {
      padding: 0.5rem 1rem;
      background-color: #555;
      border-radius: 999px;
      color: white;
      font-size: 0.9rem;
      white-space: nowrap;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.2s ease;
    }

    .suggestion:hover {
      background-color: #777;
    }

    #input-form {
      display: flex;
      background-color: #2e2e3e;
      padding: 0.75rem;
    }

    #prompt {
      flex: 1;
      padding: 0.75rem;
      border: none;
      border-radius: 0.5rem;
      font-size: 1rem;
    }

    #submit {
      margin-left: 0.5rem;
      padding: 0.75rem 1rem;
      background-color: #4caf50;
      color: white;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
    }

    #submit:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body onload="document.getElementById('prompt').focus();">
  <header>Event Planning Timeline Generator</header>
  <div id="chat"></div>

  <!-- Prompt suggestions -->
  <div id="suggestions">
    <div class="suggestion">Create a wedding timeline</div>
    <div class="suggestion">Plan a corporate event</div>
    <div class="suggestion">Help me organize a birthday party</div>
    <div class="suggestion">Suggest a 3-month plan for a fundraiser</div>
    <div class="suggestion">What should I do 1 week before the event?</div>
  </div>

  <!-- Prompt input -->
  <form id="input-form">
    <input type="text" id="prompt" placeholder="Type your prompt..." autocomplete="off" required />
    <button type="submit" id="submit">Send</button>
  </form>

  <script>
    const chat = document.getElementById("chat");
    const form = document.getElementById("input-form");
    const input = document.getElementById("prompt");
    const suggestions = document.querySelectorAll(".suggestion");

    const systemMsg = `You are an expert AI assistant specialized in creating detailed event planning timelines for event professionals. Your goal is to help event planners create comprehensive project plans with critical deadlines and milestones based on their specific event parameters.`;

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      const userText = input.value.trim();
      if (!userText) return;

      appendMessage("user", userText);
      input.value = "";


      fetchWebService("http://collaborama.com:4110/webl/WubHub_DoIt?cmdline=llmBase%3A" + btoa(userText)+","+btoa(systemMsg)).then(data => {
              appendMessage("bot", JSON.stringify(data.response));
           });
      
    });

    suggestions.forEach(button => {
      button.addEventListener("click", () => {
        input.value = button.textContent;
        input.focus();
      });
    });

    function appendMessage(role, text) {
      const msg = document.createElement("div");
      msg.className = `message ${role}`;
      msg.textContent = text;
      chat.appendChild(msg);
      chat.scrollTop = chat.scrollHeight;
    }


    // Function to call the web service
    // Data returned as a json object
    async function fetchWebService(url) {
       try {
         // Make the network request
             const response = await fetch(url);

         // Check if the request was successful
         if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
         }

         // Get the response
         const data = await response.text();

         // Return the data
         return JSON.parse(data);
       } catch (error) {
          console.error('Error fetching data: ', error);
       }
    }




  </script>
</body>
</html>