claude-ia

claude-ia

<style>
  body {
    margin: 0px;
    font-family: sans-serif;
    background-color: #f8f9fa;
  }

  #chatbox {
    margin: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  #chat-box {
    background-color: #f1f1f1;
    overflow-y: auto;
    padding: 10px;
  }

  #chat-box div {
    margin-top: 12px;
  }

  #user-input {
    width: 90%;
    border: 1px solid #ccc;
    border-radius: 25px;
    height: 40px;
    margin: 30px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 12px;
  }

  .large-Input {
    position: fixed;
    bottom: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .reard {
    text-align: center;
    margin-top: 40px;
  }

  #send-btn {
    min-width: 66px;
    border: none;
    background: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 50px;
    margin-right: 20px;
    min-height: 64px;
    font-size: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>

<div class="reard">
  <h1 class="logos">CLAUDE IA</h1>
</div>

<div id="chatbox">
  <div id="chat-box">🤖 BEM VINDO AO CLAUDE</div>
</div>

<div class="large-Input">
  <input type="text" id="user-input" placeholder="Digite sua mensagem..." />
  <button id="send-btn">⇧</button>
</div>

<script>
  document.getElementById("send-btn").addEventListener("click", async () => {
    const userInput = document.getElementById("user-input");
    const chatBox = document.getElementById("chat-box");
    const message = userInput.value.trim();
    if (!message) return;
    // Adiciona a mensagem do usuário ao chat
    chatBox.innerHTML += `<div><strong>🗨 Você:</strong> ${message}</div>`;
    userInput.value = "";
    // Envia a mensagem para a API Claude IA
    const apiKey = "SUA_API_KEY_AQUI"; // Substitua pela sua chave da API
    const response = await fetch("https://api.claude.ai/v1/chat ", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${apiKey}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        prompt: message
      })
    });
    const data = await response.json();
    const botReply = data.reply;
    // Adiciona a resposta do chatbot ao chat
    chatBox.innerHTML += `<div><strong>Claude:</strong> ${botReply}</div>`;
    chatBox.scrollTop = chatBox.scrollHeight;
  });
</script>

<!--

https://claude.ai/login
https://www.anthropic.com/api

-->