From 59f5675e99b5d6949157fae4957e9183ba291943 Mon Sep 17 00:00:00 2001
From: Matheusfr34 <164033400+Matheusfr34@users.noreply.github.com>
Date: Fri, 28 Jun 2024 22:09:00 -0300
Subject: [PATCH] Create sendmessage_staff.html

---
 docs/pages/sendmessage_staff.html | 168 ++++++++++++++++++++++++++++++
 1 file changed, 168 insertions(+)
 create mode 100644 docs/pages/sendmessage_staff.html
diff --git a/docs/pages/sendmessage_staff.html b/docs/pages/sendmessage_staff.html
new file mode 100644
index 0000000..f4633b9
--- /dev/null
+++ b/docs/pages/sendmessage_staff.html
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Create Message</title>
+<style>
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+    display: flex;
+    flex-direction: row;
+    min-height: 100vh;
+    overflow-x: hidden;
+}
+
+.navbar {
+    width: 200px;
+    background-color: blue;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 20px;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    color: white;
+}
+
+.navbar .logo {
+    margin-bottom: 20px;
+    width: 75%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.navbar .logo img {
+    max-width: 100%;
+    height: auto;
+}
+
+.navbar ul {
+    list-style-type: none;
+    padding: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.navbar ul li {
+    width: 100%;
+    text-align: center;
+    margin: 10px 0;
+}
+
+.navbar ul li a {
+    color: white;
+    text-decoration: none;
+    display: block;
+    padding: 10px 0;
+}
+
+.navbar ul li a:hover {
+    background-color: #0056b3;
+}
+
+.content {
+    margin-left: 220px; /* Ajuste para compensar a largura da navbar */
+    padding: 20px;
+}
+
+form {
+    width: 500px;
+    margin: 50px auto;
+}
+
+form input,
+form textarea,
+form select,
+form button {
+    display: block;
+    width: 100%;
+    margin-bottom: 25px;
+    margin-top: 10px;
+}
+
+form button {
+    background-color: blue; /* Mesma cor da navbar */
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+}
+
+#backToForum {
+    background-color: blue; /* Mesma cor da navbar */
+    color: white;
+    border: none;
+    padding: 10px;
+    cursor: pointer;
+    width: 100%; /* Largura total do formulário */
+    margin-top: 20px; /* Espaço extra acima do botão */
+    text-align: center; /* Centralizar texto */
+}
+</style>
+</head>
+<body>
+
+<div class="navbar">
+  <div class="logo">
+    <img src="img/logo_redonda.png" alt="Logo do Site">
+</div>
+    <ul>
+        <li><a href="index.html">Sair</a></li>
+    </ul>
+</div>
+
+<div class="content">
+  <h1>Digite aqui sua dúvida</h1>
+  <form id="messageForm">
+    <label for="titulo">Título da mensagem:</label>
+    <input type="text" id="titulo" name="titulo">
+
+    <label for="conteudo">Conteúdo da mensagem:</label>
+    <textarea id="conteudo" name="conteudo"></textarea>
+
+    <button type="submit">Enviar</button>
+    <button id="backToForum" onclick="location.href='forum_staff.html'" type="button">Voltar ao Fórum</button>
+  </form>
+</div>
+
+<script>
+document.getElementById('messageForm').addEventListener('submit', function(event) {
+  event.preventDefault();
+
+  const form = event.target;
+  const formData = new FormData(form);
+
+  const userName = "Neide Rocha de Silva";
+
+  const messageObject = Object.fromEntries(formData.entries());
+  messageObject.autor = userName;
+
+  fetch('http://localhost:3000/mensagens', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(messageObject),
+  })
+    .then(response => response.json())
+    .then(data => {
+      console.log('New message added:', data);
+      form.reset();
+    })
+    .catch(error => {
+      console.error('Error adding new message:', error);
+    });
+});
+</script>
+
+</body>
+</html>
