feat: footer feedback widget — textarea + send to webhook
This commit is contained in:
Oliver
+157
-4
@@ -1027,11 +1027,10 @@
|
||||
.footer-inner {
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1.25rem;
|
||||
gap: 2rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
.footer-copy {
|
||||
@@ -1040,6 +1039,7 @@
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 1.75rem;
|
||||
justify-self: end;
|
||||
}
|
||||
.footer-links a {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
@@ -1049,6 +1049,91 @@
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
/* ── Footer Feedback ────────────────────────────── */
|
||||
.footer-feedback {
|
||||
justify-self: center;
|
||||
width: 100%;
|
||||
max-width: 380px;
|
||||
}
|
||||
.footer-feedback__form {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-end;
|
||||
}
|
||||
.footer-feedback__area {
|
||||
flex: 1;
|
||||
resize: none;
|
||||
border: 1.5px solid rgba(255, 255, 255, 0.18);
|
||||
border-radius: 0.875rem;
|
||||
padding: 0.6rem 0.875rem;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
color: var(--white);
|
||||
background-color: rgba(255, 255, 255, 0.07);
|
||||
outline: none;
|
||||
line-height: 1.5;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
background-color 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.footer-feedback__area::placeholder {
|
||||
color: rgba(255, 255, 255, 0.35);
|
||||
}
|
||||
.footer-feedback__area:focus {
|
||||
border-color: rgba(255, 255, 255, 0.42);
|
||||
background-color: rgba(255, 255, 255, 0.11);
|
||||
}
|
||||
.footer-feedback__btn {
|
||||
flex-shrink: 0;
|
||||
background-color: var(--terra);
|
||||
color: var(--white);
|
||||
border: none;
|
||||
border-radius: 0.875rem;
|
||||
padding: 0.6rem 1rem;
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 0.2s,
|
||||
transform 0.15s;
|
||||
white-space: nowrap;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.footer-feedback__btn:hover {
|
||||
background-color: var(--terra-deep);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.footer-feedback__btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
.footer-feedback__msg {
|
||||
font-size: 0.74rem;
|
||||
color: rgba(255, 255, 255, 0.52);
|
||||
margin-top: 0.4rem;
|
||||
min-height: 1em;
|
||||
text-align: center;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.footer-inner {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.footer-links {
|
||||
justify-self: center;
|
||||
}
|
||||
.footer-feedback {
|
||||
justify-self: stretch;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Blog Modal ─────────────────────────────────────────── */
|
||||
#blog-modal {
|
||||
position: fixed;
|
||||
@@ -1790,6 +1875,30 @@
|
||||
>ODOO4projects — Hosting for the AI generation</span
|
||||
>
|
||||
</p>
|
||||
|
||||
<div class="footer-feedback">
|
||||
<form
|
||||
id="footer-feedback-form"
|
||||
class="footer-feedback__form"
|
||||
novalidate
|
||||
>
|
||||
<textarea
|
||||
id="footer-feedback-text"
|
||||
class="footer-feedback__area"
|
||||
rows="2"
|
||||
maxlength="1000"
|
||||
placeholder="Missing something, or have feedback? Drop us a note — we read every one."
|
||||
></textarea>
|
||||
<button type="submit" class="footer-feedback__btn">
|
||||
Send →
|
||||
</button>
|
||||
</form>
|
||||
<p
|
||||
id="footer-feedback-msg"
|
||||
class="footer-feedback__msg"
|
||||
></p>
|
||||
</div>
|
||||
|
||||
<nav class="footer-links" aria-label="Footer links">
|
||||
<a
|
||||
href="https://odoo4projects.com/support"
|
||||
@@ -2399,6 +2508,50 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Footer feedback
|
||||
var footerFeedbackForm = document.getElementById(
|
||||
"footer-feedback-form",
|
||||
);
|
||||
if (footerFeedbackForm) {
|
||||
footerFeedbackForm.addEventListener(
|
||||
"submit",
|
||||
async function (e) {
|
||||
e.preventDefault();
|
||||
var textarea = document.getElementById(
|
||||
"footer-feedback-text",
|
||||
);
|
||||
var msgEl = document.getElementById(
|
||||
"footer-feedback-msg",
|
||||
);
|
||||
var btn = footerFeedbackForm.querySelector(
|
||||
'button[type="submit"]',
|
||||
);
|
||||
var text = textarea.value.trim();
|
||||
if (!text) return;
|
||||
btn.disabled = true;
|
||||
msgEl.textContent = "";
|
||||
try {
|
||||
var fd = new FormData();
|
||||
fd.append("message", text);
|
||||
fd.append("page", window.location.href);
|
||||
await fetch(
|
||||
"https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/2fe3d1fe-eff9-45aa-8d0f-88738d443946",
|
||||
{ method: "POST", body: fd },
|
||||
);
|
||||
textarea.value = "";
|
||||
msgEl.textContent = "✓ Thanks — we got it!";
|
||||
setTimeout(function () {
|
||||
msgEl.textContent = "";
|
||||
}, 5000);
|
||||
} catch (err) {
|
||||
msgEl.textContent =
|
||||
"Could not send right now. Please try again.";
|
||||
}
|
||||
btn.disabled = false;
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user