From 5735765ac8e911b93edc8149feb2e1651b6d6ac2 Mon Sep 17 00:00:00 2001
From: Oliver <oliver@odoo4projects.com>
Date: Tue, 30 Sep 2025 06:43:52 -0300
Subject: [PATCH] style

---
 public/support.html | 88 ++++++++++++++++++++++++++++-----------------
 public/upsell.html  |  9 +++--
 2 files changed, 61 insertions(+), 36 deletions(-)
diff --git a/public/support.html b/public/support.html
index 2f10203..c5c2de8 100644
--- 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>
-        </ul>
+      <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>
diff --git a/public/upsell.html b/public/upsell.html
index 25cbe05..d21fb0f 100644
--- 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) {
