feat: footer feedback widget — textarea + send to webhook
This commit is contained in:
Oliver
+157
-4
@@ -1027,11 +1027,10 @@
|
|||||||
.footer-inner {
|
.footer-inner {
|
||||||
max-width: 72rem;
|
max-width: 72rem;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-wrap: wrap;
|
grid-template-columns: 1fr auto 1fr;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
gap: 2rem;
|
||||||
gap: 1.25rem;
|
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
.footer-copy {
|
.footer-copy {
|
||||||
@@ -1040,6 +1039,7 @@
|
|||||||
.footer-links {
|
.footer-links {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 1.75rem;
|
gap: 1.75rem;
|
||||||
|
justify-self: end;
|
||||||
}
|
}
|
||||||
.footer-links a {
|
.footer-links a {
|
||||||
color: rgba(255, 255, 255, 0.6);
|
color: rgba(255, 255, 255, 0.6);
|
||||||
@@ -1049,6 +1049,91 @@
|
|||||||
color: var(--white);
|
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 ─────────────────────────────────────────── */
|
||||||
#blog-modal {
|
#blog-modal {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
@@ -1790,6 +1875,30 @@
|
|||||||
>ODOO4projects — Hosting for the AI generation</span
|
>ODOO4projects — Hosting for the AI generation</span
|
||||||
>
|
>
|
||||||
</p>
|
</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">
|
<nav class="footer-links" aria-label="Footer links">
|
||||||
<a
|
<a
|
||||||
href="https://odoo4projects.com/support"
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user