style

2025-09-30 06:43:52 -03:00
parent f330f388ce
commit 5735765ac8
2 changed files with 61 additions and 36 deletions
--- a/public/support.html
+++ b/public/support.html
@@ -3,7 +3,7 @@
 <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Odoo-style Chat</title>
+  <title>ODOO4projects - Support Chat</title>
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
@@ -25,7 +25,27 @@
    /* Left column - user list / details */
    .sidebar{background:linear-gradient(180deg,rgba(255,255,255,0.9),var(--card));border-radius:var(--radius);padding:20px;box-shadow:0 6px 20px rgba(24,39,75,0.06);overflow:hidden}
    .brand{display:flex;gap:12px;align-items:center}
-    .logo{width:44px;height:44px;border-radius:9px;background:linear-gradient(135deg,var(--odoo-purple),#b07fa9);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;box-shadow:0 6px 18px rgba(135,90,123,0.12)}
+
+.logo {
+  width: 44px;
+  height: 44px;
+  border-radius: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 6px 18px rgba(135,90,123,0.12);
+  overflow: hidden; /* ensures image respects border radius */
+}
+
+.logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* ensures the image fills the container */
+}
+
+
+
+
    .brand h1{margin:0;font-size:18px;color:var(--odoo-dark)}
    .brand p{margin:0;font-size:12px;color:var(--muted)}

@@ -78,28 +98,47 @@
  <div class="app">
    <aside class="sidebar">
      <div class="brand">
-        <div class="logo">OD</div>
+        <div class="logo">
+  <img src="https://odoo4projects.com/favicon.ico" alt="ODOO4projects Logo" />
+</div>
+
        <div>
          <h1>Odoo Chat</h1>
-          <p>Connected: <span id="status" class="small">disconnected</span></p>
        </div>
      </div>
-      <div class="meta">Backend: <strong>Custom n8n Chat Webhook</strong></div>
-      <div class="hint">This is a lightweight Odoo-styled chat UI. Messages are posted to your webhook and responses (JSON) are displayed here.</div>
-      <div style="margin-top:18px;font-size:13px;color:var(--muted)">
-        Usage tips:
-        <ul style="padding-left:18px;margin:8px 0;color:var(--muted)">
-          <li>Type a message and press <strong>Enter</strong> or click Send.</li>
-          <li>Expect JSON response with a simple text field (see docs).</li>
+      <div class="hint">
+        This chat is dedicated to support for ODOO4projects hosting services only.<br>
+Please note: it does not cover general Odoo usage or functional questions.
+      </div>
+
+
+<div style="margin-top:18px; font-size:13px; color:var(--muted); line-height:1.5;">
+  <strong>Usage Tips:</strong>
+  <ul style="padding-left:20px; margin:8px 0; color:var(--muted);">
+    <li>
+      Click <strong>Create a Ticket</strong> or type <code>/ticket</code> to get in touch with our support team.
+    </li>
+    <li>
+      ✨ <strong>Feature Requests</strong><br>
+      Suggest a new feature for our services by leaving a comment in the chat using this format:<br>
+      <code>/feature: [Your description here]</code><br>
+      <em>Example:</em><br>
+      <code>/feature: Add an automatic backup notification email</code>
+    </li>
  </ul>
+  <div style="margin-top:10px;">
+    ⚠️ <strong>Important:</strong> If you cannot access Odoo due to a Git change, you can easily <a href="/" style="color:inherit; text-decoration:underline;">revert the last change via our homepage</a>.
  </div>
+</div>
+
+
+
    </aside>

    <main class="chat-card" role="main">
      <div class="chat-header">
        <div style="display:flex;flex-direction:column">
-          <div class="title">Chat with N8N Backend</div>
-          <div class="sub">Webhook: <span id="webhook" class="small">https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat</span></div>
+          <div class="title">Chat with ODOO4projects support</div>
        </div>
      </div>

@@ -123,7 +162,6 @@
    const WEBHOOK = 'https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/702862fd-dd17-4a34-8efb-e9056d2c50df/chat';

    const messagesEl = document.getElementById('messagesInner');
-    const statusEl = document.getElementById('status');
    const input = document.getElementById('messageInput');
    const sendBtn = document.getElementById('sendBtn');
    document.getElementById('webhook').textContent = WEBHOOK;
@@ -146,7 +184,7 @@

      const avatar = document.createElement('div');
      avatar.className = 'avatar';
-      avatar.textContent = who==='me' ? 'ME' : 'AI';
+      avatar.textContent = who==='me' ? 'ME' : '4';

      const bubble = document.createElement('div');
      bubble.className = 'bubble' + (who==='me' ? ' me' : '');
@@ -174,10 +212,6 @@
      messagesEl.parentElement.scrollTop = messagesEl.parentElement.scrollHeight;
    }

-    function setStatus(connected){
-      statusEl.textContent = connected ? 'ready' : 'disconnected';
-      statusEl.style.color = connected ? 'var(--accent)' : 'var(--muted)';
-    }

    async function sendMessage(){
      const text = input.value.trim();
@@ -186,7 +220,6 @@
      appendMessage(text, 'me');
      input.value = '';
      sendBtn.disabled = true;
-      setStatus(false);

      // show typing indicator
      const typingEl = document.createElement('div');
@@ -231,13 +264,11 @@
        else replyText = JSON.stringify(data);

        appendMessage(replyText, 'them');
-        setStatus(true);

      }catch(err){
        const t = document.getElementById('typing');
        if(t) t.remove();
        appendMessage('Error: ' + (err && err.message ? err.message : String(err)), 'them');
-        setStatus(false);
      } finally {
        sendBtn.disabled = false;
      }
@@ -247,17 +278,8 @@
    sendBtn.addEventListener('click', sendMessage);
    input.addEventListener('keydown', (e)=>{ if(e.key === 'Enter' && !e.shiftKey){ e.preventDefault(); sendMessage(); } });

-    // optimistic check to see if webhook is reachable via HEAD
-    (async function ping(){
-      try{
-        const r = await fetch(WEBHOOK, {method:'HEAD'});
-        setStatus(r.ok);
-      }catch(e){ setStatus(false); }
-    })();
-
    // friendly welcome
-    appendMessage('Hello! This chat will post your message to the configured webhook and show the response here. Try sending a message. Your session id is ' + CLIENT_UUID, 'them');
-    setStatus(false);
+    appendMessage('I am here to help with all your hosting-related questions.Type /ticket to contact our support team directly.', 'them');
  </script>
 </body>
 </html>
--- a/public/upsell.html
+++ b/public/upsell.html
@@ -75,7 +75,10 @@
 </head>
 <body>
  <h2>Upgrade Your Plan</h2>
-  <div id="uuidDisplay" style="text-align:center; font-size: 0.9em; color: #666; margin-bottom: 10px;"></div>
+  <div id="uuidDisplay" style="text-align:center; font-size: 0.9em; color: #666; margin-bottom: 10px;">Enhance your Odoo experience by upgrading your feature set here. You’ll only pay for the remaining duration of your current Odoo contract.
+When it’s time for your annual renewal, you will receive a reminder email with all the details.</div>
+
+
  <form id="upgradeForm">
    <div>
      <label><input type="checkbox" id="git" name="git"> GIT</label>
@@ -115,10 +118,10 @@
  <script>
 const params = new URLSearchParams(window.location.search);
  const uuid = params.get("uuid");
-  document.getElementById("uuidDisplay").textContent = uuid ? uuid.toLowerCase() : "-";
+  // document.getElementById("uuidDisplay").textContent = uuid ? uuid.toLowerCase() : "-";

  const webhookUrl = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/0c8536be-d175-4740-8e78-123159193b23";
-const webhookPost = webhookUrl + "/submit-data";
+const webhookPost = "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/3709b60f-935e-43e4-834a-5060a40182dd";

  async function loadData() {
    if (!uuid) {