Oliver/static
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
Oliver
2025-09-30 06:43:52 -03:00
parent f330f388ce
commit 5735765ac8
2 changed files with 61 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
public/support.html
View File

@@ -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>