Public Access
A filtered-out directory card stayed visible. The card is targeted by an
id-based ready-state selector (`.js #directory[data-dir-state="ready"]
#dirGrid > .dev-card`, two ids), which outranked the old per-element patch
`.dev-card[hidden] { display:none }` — so `card.hidden = true` set the
attribute and every card stayed on screen while the count line correctly
read "Showing 1 of 4".
Fix: one rule, `[hidden] { display:none !important }`, early in /style.css.
A class- or id-based `display` can no longer beat the attribute, so this
cannot recur with the next class that sets `display`. The per-element
`[hidden]` patches are removed so a single mechanism governs:
- odoo-community-developers: cards + filter row + pager + modal
(load-bearing — each sets `display`); focus-sliders/noscript (redundant)
- index/de/es `.hero-notice[hidden]`, odoo-black-friday `.ads-consent[hidden]`
(redundant — those elements set no `display`)
Re-fingerprint local assets (style.css changed): /style.css?v 3332fbba93 ->
061517baef across 51 pages.
Measured in a real browser (local harness, stubbed webhook; no record created,
no probe write) — computed display + geometry, never the `hidden` property:
- filtered to one card: the other three report display:none and height 0;
the visible set (1) equals the count line ("Showing 1 of 4") — 1 == 1
- HEAD (pre-fix) reproduces the defect: 3 cards hidden=true yet display:flex,
height 599.38 each; 4 visible vs the count's 1
- pager: display:none height 0 with one page; display:flex height 66.83 with
12 cards (Page 1 of 2); page 2 hides page-1 cards (display:none)
- modals closed: display:none height 0; load state: cards 0, pager/empty
display:none, filter row visibility:hidden by design
- 375 px: same result, no horizontal overflow; avatar ask-row top identical
across a row (2053.97 / links 2086.91)
753 lines
34 KiB
HTML
753 lines
34 KiB
HTML
<!doctype html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Freelancer signup feedback — ODOO4projects</title>
|
|
<meta name="description" content="Claim a seat in the ODOO4projects freelancer signup and tell us how it went. The link goes to a named group of freelancers, not to search." />
|
|
|
|
<!-- Private utility page. It is reached ONLY by the link we send, never by search.
|
|
noindex+nofollow here, absent from sitemap.xml and llms.txt, and linked from nowhere
|
|
on the site. See [[draft-page-convention]] for the same five rule. -->
|
|
<meta name="robots" content="noindex, nofollow" />
|
|
<!-- Nothing in this page's address is a credential, but the page is private and the
|
|
feedback is a person's words: keep the URL out of any third party's logs. -->
|
|
<meta name="referrer" content="no-referrer" />
|
|
<link rel="canonical" href="https://odoo4projects.com/feedback/" />
|
|
<meta property="og:url" content="https://odoo4projects.com/feedback/" />
|
|
<meta property="og:title" content="Freelancer signup feedback — ODOO4projects" />
|
|
<meta property="og:description" content="Claim a seat in the ODOO4projects freelancer signup and tell us how it went." />
|
|
<meta property="og:type" content="website" />
|
|
<link rel="icon" href="/images/favicon.ico" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Marcellus&display=swap"
|
|
media="print"
|
|
onload="this.media='all'"
|
|
/>
|
|
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Marcellus&display=swap" /></noscript>
|
|
<link rel="stylesheet" href="/style.css?v=061517baef" />
|
|
|
|
<style>
|
|
/* Utility page, same shell as /freelancer-edit/ and the top bar of
|
|
/odoo-community-developers/: brand line, one card, the site tokens (:root in style.css)
|
|
and the CI palette only. No hero, no footer, no site chrome beyond the brand line. */
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
background: var(--cream);
|
|
color: var(--ink);
|
|
font-family: Inter, "Segoe UI", sans-serif;
|
|
line-height: 1.6;
|
|
}
|
|
.wrap { width: 86%; max-width: 1200px; margin: 0 auto; }
|
|
.topbar { background: var(--midnight); border-bottom: 1px solid var(--line-brass); padding: 0.85rem 0; }
|
|
.brand {
|
|
font-family: Marcellus, Georgia, serif;
|
|
font-size: 1.15rem;
|
|
letter-spacing: 0.04em;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
.brand span { color: var(--brass); }
|
|
main { padding: 2.5rem 0 4rem; }
|
|
.card-wrap { max-width: 760px; margin: 0 auto; }
|
|
h1 {
|
|
font-family: Marcellus, Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: clamp(1.5rem, 4vw, 2.2rem);
|
|
letter-spacing: 0.02em;
|
|
margin: 0 0 0.4rem;
|
|
}
|
|
.lede { color: var(--ink-soft); margin: 0 0 1.5rem; }
|
|
.panel {
|
|
background: var(--ivory);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
padding: 1.5rem;
|
|
box-shadow: var(--shadow-rest);
|
|
}
|
|
.panel + .panel { margin-top: 1.25rem; }
|
|
h2 {
|
|
font-family: Marcellus, Georgia, serif;
|
|
font-weight: 400;
|
|
font-size: 1.15rem;
|
|
letter-spacing: 0.02em;
|
|
margin: 0 0 0.6rem;
|
|
}
|
|
.state { margin: 0; font-weight: 500; }
|
|
.state-warn, .state-err { color: var(--brass-deep); }
|
|
.state-ok { color: var(--success); }
|
|
.detail { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }
|
|
.seat {
|
|
font-family: Marcellus, Georgia, serif;
|
|
font-size: clamp(1.6rem, 5vw, 2.4rem);
|
|
letter-spacing: 0.02em;
|
|
margin: 0 0 0.35rem;
|
|
}
|
|
.seat strong { color: var(--brass-deep); font-weight: 400; }
|
|
|
|
/* ---- Forms ---- */
|
|
.field { margin: 0 0 1.1rem; }
|
|
.field > label { display: block; font-weight: 600; font-size: 0.9rem; margin: 0 0 0.35rem; }
|
|
input[type="text"], input[type="email"], textarea, select {
|
|
width: 100%;
|
|
font: inherit;
|
|
padding: 0.6rem 0.7rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
color: var(--ink);
|
|
}
|
|
textarea { resize: vertical; }
|
|
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible,
|
|
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
|
|
outline: 2px solid var(--brass);
|
|
outline-offset: 1px;
|
|
}
|
|
.hint { font-size: 0.82rem; color: var(--ink-soft); margin: 0.35rem 0 0; }
|
|
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem 0.4rem; margin: 0 0 1.1rem; }
|
|
legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.35rem; }
|
|
.choice { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 0 0.5rem; font-size: 0.9rem; }
|
|
.choice input { margin-top: 0.28rem; flex: 0 0 auto; }
|
|
.field[data-bad="1"] input, .field[data-bad="1"] textarea, .field[data-bad="1"] select,
|
|
fieldset[data-bad="1"] { border-color: var(--brass-deep); }
|
|
.err { font-size: 0.82rem; color: var(--brass-deep); font-weight: 600; margin: 0.35rem 0 0; }
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
font-family: Marcellus, Georgia, serif;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.04em;
|
|
border: 0;
|
|
border-radius: var(--radius-pill);
|
|
background: var(--brass);
|
|
color: var(--midnight);
|
|
padding: 0.7rem 1.5rem;
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { background: var(--brass-bright); }
|
|
.btn:focus-visible { outline: 2px solid var(--midnight); outline-offset: 2px; }
|
|
.btn[disabled] { opacity: 0.6; cursor: default; }
|
|
.status { margin: 0.9rem 0 0; font-weight: 500; min-height: 1.2em; }
|
|
.status.state-warn, .status.state-err { color: var(--brass-deep); }
|
|
.status.state-ok { color: var(--success); }
|
|
|
|
/* ---- Claimed ---- */
|
|
.deadline {
|
|
font-family: Marcellus, Georgia, serif;
|
|
font-size: 1.35rem;
|
|
margin: 0 0 0.3rem;
|
|
}
|
|
.deadline strong { color: var(--brass-deep); font-weight: 400; }
|
|
.steps { margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.92rem; }
|
|
.steps li { margin: 0 0 0.3rem; }
|
|
|
|
/* ---- Progress bar (three steps) ---- */
|
|
.progress { margin: 0 0 1.15rem; }
|
|
.steps-bar {
|
|
list-style: none;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0.3rem 0.6rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: 0.85rem;
|
|
}
|
|
.steps-bar .step { display: flex; align-items: center; gap: 0.4rem; color: var(--ink-soft); }
|
|
.steps-bar .step + .step::before { content: "·"; margin-right: 0.6rem; color: var(--line-brass); }
|
|
.step-mark {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.55rem;
|
|
height: 1.55rem;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
font-size: 0.8rem;
|
|
line-height: 1;
|
|
}
|
|
/* The current step is the brass pill; a done step carries the ✓ mark (see the script) —
|
|
the tick is the non-colour cue, so a done step is never colour alone. */
|
|
.steps-bar .step-current { color: var(--ink); font-weight: 600; }
|
|
.steps-bar .step-current .step-mark { background: var(--brass); border-color: var(--brass); color: var(--midnight); }
|
|
.steps-bar .step-done .step-mark { background: var(--success); border-color: var(--success); color: #fff; }
|
|
.link-signup { color: var(--brass-deep); font-weight: 600; }
|
|
/* Visually hidden, still read aloud. */
|
|
.vh {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
margin: -1px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
clip: rect(0 0 0 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* ---- Cohort full (no feedback is ever rendered) ---- */
|
|
.who {
|
|
font-size: 0.8rem;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--brass-deep);
|
|
margin: 0 0 1rem;
|
|
}
|
|
</style>
|
|
|
|
<!-- Every wire name and shape lives here, in ONE place. Two constants, one per verb:
|
|
GET reads the free-seat count and the collected feedback; POST claims a seat, and posts
|
|
the feedback form. SHAPES (this is the contract to match in the n8n workflow):
|
|
|
|
GET statusUrl (no query string)
|
|
-> 200 { "seats_left": 7, "seats_total": 10 } <- the intended shape
|
|
or { "free": 9 } <- what the live route answers today
|
|
or { "free": 0, "feedback": [ ... ] }
|
|
A count arrives under the documented names first, then the live route's
|
|
"Free"/"free"; a count must be a whole number >= 0 or it is not on the wire
|
|
(so "free": "" is skipped and the next key is read). A "feedback" array in the
|
|
reply is NOT consumed by this page and nothing from it is ever rendered — the
|
|
page reads the count only. With no seats, the cohort-full state shows the
|
|
closed-cohort line alone: no quotes, no excerpts, no paraphrases.
|
|
|
|
POST submitUrl { "form": "claim", "upwork": "<their Upwork name>" }
|
|
-> 200 { "seats_left": 6, "seats_total": 10, "held_until": "2026-11-03T18:40:00Z" }
|
|
|
|
POST submitUrl { "form": "feedback", "upwork": "<their claimed Upwork name>",
|
|
"finalized": "yes", ... }
|
|
"upwork" is present ONLY when a seat was claimed this visit — the claimed Upwork
|
|
name, held in memory, sent to this route and nowhere else. With no claim the
|
|
submission carries no name and is anonymous.
|
|
-> any 2xx = receipt shown; a non-2xx is reported as a failure, never as success.
|
|
|
|
An unexpected shape is named, never guessed: a count that did not come off the wire is
|
|
not printed. -->
|
|
<script>
|
|
window.O4F = {
|
|
// The one route that answers the count + feedback (read-only).
|
|
statusUrl: "https://n8n.odoo4projects.com/webhook/feedback",
|
|
// The one route that receives a claim and the feedback form.
|
|
submitUrl: "https://n8n.odoo4projects.com/webhook/feedback",
|
|
// GET reply keys, in the order they are read. A key not listed here is never read.
|
|
// "Free"/"free" are the live route's names today; they come last so the documented
|
|
// shape still wins if it ever arrives. "free": "" is skipped by pick() below.
|
|
leftKeys: ["seats_left", "seatsLeft", "Free", "free"],
|
|
totalKeys: ["seats_total", "seatsTotal"],
|
|
// The POST reply key that carries the seat deadline (ISO 8601).
|
|
heldUntilKeys: ["held_until", "heldUntil", "deadline"]
|
|
};
|
|
</script>
|
|
|
|
<!-- Privacy-friendly analytics by Plausible (verbatim; the page carries no query). -->
|
|
<script async src="https://plausible.office.odoo4projects.com/js/pa-NhA7Rf-79VopXFQXhSS4e.js"></script>
|
|
<script>
|
|
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
|
|
plausible.init()
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="wrap">
|
|
<a class="brand" href="https://odoo4projects.com/">ODOO<span>4</span>projects</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="wrap">
|
|
<div class="card-wrap">
|
|
<h1>Freelancer signup feedback</h1>
|
|
<p class="lede">
|
|
We opened a free freelancer portal on ODOO4projects.com. Claim a seat here, then finish
|
|
the signup and tell us how it went — every answer helps us improve the process.
|
|
</p>
|
|
|
|
<!-- Filled by the script at the foot of the page. Empty on purpose: with JavaScript off
|
|
there is no way to read the seat count or to claim, so an empty container plus the
|
|
noscript note below is the honest picture. -->
|
|
<div id="app"></div>
|
|
|
|
<noscript>
|
|
<div class="panel">
|
|
<p class="state state-warn">This page needs JavaScript to read the seat count and to claim a seat.</p>
|
|
<p class="detail">
|
|
Turn JavaScript on in your browser and open this page again — or reply to the message
|
|
that brought you here.
|
|
</p>
|
|
</div>
|
|
</noscript>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
(function () {
|
|
var C = window.O4F;
|
|
var app = document.getElementById("app");
|
|
var claimedUpwork = ""; // the seat claim: an identifier, kept in memory, never in the URL
|
|
// The application form on the directory page — the anchor the page's own "Get listed"
|
|
// triggers use. There is no separate login or account page, so this is the one target.
|
|
var SIGNUP_URL = "https://odoo4projects.com/odoo-community-developers/#apply";
|
|
|
|
function el(tag, cls, text) {
|
|
var n = document.createElement(tag);
|
|
if (cls) n.className = cls;
|
|
if (text != null) n.textContent = text; // textContent only: a reply is never markup
|
|
return n;
|
|
}
|
|
function show(nodes) {
|
|
while (app.firstChild) app.removeChild(app.firstChild);
|
|
for (var i = 0; i < nodes.length; i++) app.appendChild(nodes[i]);
|
|
return nodes;
|
|
}
|
|
function panel(children) {
|
|
var box = el("div", "panel");
|
|
for (var i = 0; i < children.length; i++) {
|
|
if (children[i]) box.appendChild(children[i]);
|
|
}
|
|
return box;
|
|
}
|
|
function status(text, kind) {
|
|
var p = el("p", "status" + (kind ? " state-" + kind : ""), text);
|
|
p.setAttribute("role", "status");
|
|
p.setAttribute("aria-live", "polite");
|
|
return p;
|
|
}
|
|
// Read one value by its list of accepted keys. A key not listed is never read.
|
|
function pick(obj, keys) {
|
|
if (!obj || typeof obj !== "object") return undefined;
|
|
for (var i = 0; i < keys.length; i++) {
|
|
var v = obj[keys[i]];
|
|
if (v !== undefined && v !== null && v !== "") return v;
|
|
}
|
|
return undefined;
|
|
}
|
|
// A count must come off the wire as a whole number >= 0. Anything else is "not on the wire".
|
|
function count(obj, keys) {
|
|
var v = pick(obj, keys);
|
|
if (typeof v === "number" && isFinite(v) && v >= 0) return Math.floor(v);
|
|
if (typeof v === "string" && /^\s*\d+\s*$/.test(v)) return parseInt(v, 10);
|
|
return null;
|
|
}
|
|
function fetchJson(url, opts) {
|
|
return fetch(url, opts).then(function (r) {
|
|
return r.text().then(function (t) {
|
|
var body = null;
|
|
try { body = JSON.parse(t); } catch (e) { body = null; }
|
|
return { ok: r.ok, status: r.status, body: body };
|
|
});
|
|
});
|
|
}
|
|
function msgOf(body) {
|
|
if (!body || typeof body !== "object") return "";
|
|
var m = body.message || body.error || body.detail;
|
|
return typeof m === "string" ? m : "";
|
|
}
|
|
function retryButton(label, fn) {
|
|
var b = el("button", "btn", label);
|
|
b.type = "button";
|
|
b.addEventListener("click", fn);
|
|
return b;
|
|
}
|
|
|
|
// ---- Progress bar (three steps) ---------------------------------------------------------
|
|
// Which step is current follows the page state — it is not decoration. It renders only
|
|
// where there is something to do: seats available (step 1 current) and seat claimed
|
|
// (step 1 done, step 2 current, step 3 visible as what comes next). The cohort-full and
|
|
// count-unavailable states render no bar at all. The bar states no count and no deadline:
|
|
// both come from the wire and are printed elsewhere, from the wire alone.
|
|
var STEP_LABELS = ["Claim seat", "Sign up", "Fill out feedback"];
|
|
function progressBar(current) {
|
|
var nav = el("nav", "progress");
|
|
nav.setAttribute("aria-label", "Signup progress");
|
|
var ol = el("ol", "steps-bar");
|
|
STEP_LABELS.forEach(function (label, i) {
|
|
var n = i + 1;
|
|
var li = el("li", "step");
|
|
var mark = el("span", "step-mark");
|
|
mark.setAttribute("aria-hidden", "true");
|
|
// A done step shows the ✓ mark; the current and upcoming steps show their number.
|
|
mark.textContent = n < current ? "\u2713" : String(n);
|
|
li.appendChild(mark);
|
|
li.appendChild(el("span", "step-label", label));
|
|
if (n === current) {
|
|
li.className = "step step-current";
|
|
li.setAttribute("aria-current", "step");
|
|
} else if (n < current) {
|
|
// Done is the ✓ mark AND a word for screen readers — never colour alone.
|
|
li.className = "step step-done";
|
|
li.appendChild(el("span", "vh", " (completed)"));
|
|
} else {
|
|
li.className = "step step-next";
|
|
}
|
|
ol.appendChild(li);
|
|
});
|
|
nav.appendChild(ol);
|
|
return nav;
|
|
}
|
|
|
|
// ---- The four states -----------------------------------------------------------------
|
|
// 1. Seats available. The number is read from the wire; a cap is not a remaining count.
|
|
function stateAvailable(seats, total) {
|
|
var h = el("p", "seat");
|
|
h.appendChild(el("strong", "", String(seats)));
|
|
h.appendChild(document.createTextNode(
|
|
total != null ? " of " + total + " seats left" : (seats === 1 ? " seat left" : " seats left")
|
|
));
|
|
|
|
var form = el("form");
|
|
form.setAttribute("novalidate", "novalidate");
|
|
var field = el("div", "field");
|
|
var label = el("label", "", "Your Upwork name");
|
|
label.setAttribute("for", "fbUpwork");
|
|
var input = el("input");
|
|
input.type = "text";
|
|
input.id = "fbUpwork";
|
|
input.name = "upwork";
|
|
input.autocomplete = "off";
|
|
input.required = true;
|
|
var hint = el("p", "hint", "Exactly as it appears on your Upwork profile — this is how we match your seat to your signup.");
|
|
field.appendChild(label);
|
|
field.appendChild(input);
|
|
field.appendChild(hint);
|
|
var err = el("p", "err", "");
|
|
err.hidden = true;
|
|
field.appendChild(err);
|
|
form.appendChild(field);
|
|
|
|
var line = status("", "");
|
|
var btn = el("button", "btn", "Claim a seat");
|
|
btn.type = "submit";
|
|
form.appendChild(btn);
|
|
form.appendChild(line);
|
|
|
|
form.addEventListener("submit", function (ev) {
|
|
ev.preventDefault();
|
|
var name = input.value.trim();
|
|
if (!name) {
|
|
field.setAttribute("data-bad", "1");
|
|
err.textContent = "Enter your Upwork name to claim a seat.";
|
|
err.hidden = false;
|
|
input.focus();
|
|
return;
|
|
}
|
|
field.setAttribute("data-bad", "0");
|
|
err.hidden = true;
|
|
btn.disabled = true;
|
|
line.className = "status";
|
|
line.textContent = "Claiming your seat…";
|
|
// The claim. The Upwork name is an identifier: it goes to our workflow and nowhere
|
|
// else — never into the address and never into an analytics payload.
|
|
fetchJson(C.submitUrl, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ form: "claim", upwork: name })
|
|
}).then(function (res) {
|
|
if (!res.ok) {
|
|
btn.disabled = false;
|
|
line.className = "status state-warn";
|
|
line.textContent = "We could not claim your seat — the service answered " + res.status +
|
|
(msgOf(res.body) ? " — " + msgOf(res.body) : "") + ". Try again.";
|
|
return;
|
|
}
|
|
claimedUpwork = name;
|
|
stateClaimed(count(res.body, C.leftKeys), pick(res.body, C.heldUntilKeys));
|
|
}).catch(function () {
|
|
btn.disabled = false;
|
|
line.className = "status state-warn";
|
|
line.textContent = "We could not reach the service to claim your seat. Check your connection and try again.";
|
|
});
|
|
});
|
|
|
|
show([
|
|
progressBar(1),
|
|
panel([h, el("p", "detail", "One seat per freelancer, and there is a fixed number for this cohort.")]),
|
|
panel([el("h2", "", "Claim your seat"), form])
|
|
]);
|
|
}
|
|
|
|
// 2. Seat claimed — held for one hour. The deadline is shown as a clock time when the
|
|
// workflow tells us when it started; the hour is the workflow's, not this page's.
|
|
function stateClaimed(seats, heldUntil) {
|
|
var dl = el("p", "deadline");
|
|
var t = clockTime(heldUntil);
|
|
if (t) {
|
|
dl.appendChild(document.createTextNode("Your seat is held until "));
|
|
dl.appendChild(el("strong", "", t));
|
|
dl.appendChild(document.createTextNode("."));
|
|
} else {
|
|
dl.textContent = "Your seat is held.";
|
|
}
|
|
var steps = el("ul", "steps");
|
|
steps.appendChild(el("li", "", "Create your account on the ODOO4projects freelancer portal."));
|
|
steps.appendChild(el("li", "", "Add the links to your profiles (Upwork, LinkedIn, Fiverr)."));
|
|
steps.appendChild(el("li", "", "Fill in your focus, about you and the 15-point skill profile."));
|
|
steps.appendChild(el("li", "", "Submit the application. We match your signup to the Upwork name you just gave."));
|
|
|
|
var claimed = el("div", "panel");
|
|
claimed.appendChild(el("h2", "", "Seat claimed"));
|
|
claimed.appendChild(dl);
|
|
claimed.appendChild(el("p", "detail",
|
|
"The one hour to finish your signup comes from our signup workflow, not from this page."));
|
|
if (seats != null) {
|
|
claimed.appendChild(el("p", "who", (seats === 1 ? "1 seat left" : seats + " seats left") + " after your claim"));
|
|
}
|
|
claimed.appendChild(steps);
|
|
|
|
// The one thing to do while a seat is held: go and finish the signup. A link, never a
|
|
// second button — the page keeps one primary action at a time, and the target is the
|
|
// application form the page's own "Get listed" triggers use.
|
|
var signup = el("p", "detail");
|
|
var up = el("a", "link-signup");
|
|
up.href = SIGNUP_URL;
|
|
up.target = "_blank";
|
|
up.rel = "noopener noreferrer";
|
|
up.appendChild(document.createTextNode("Sign up here"));
|
|
// Say it opens a new window, so a screen-reader user is not surprised by a new tab.
|
|
up.appendChild(el("span", "", " (opens in a new window)"));
|
|
signup.appendChild(up);
|
|
claimed.appendChild(signup);
|
|
|
|
show([progressBar(2), claimed, feedbackPanel()]);
|
|
}
|
|
|
|
function clockTime(iso) {
|
|
if (!iso) return "";
|
|
var d = new Date(iso);
|
|
if (isNaN(d.getTime())) return "";
|
|
try {
|
|
return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
|
|
} catch (e) {
|
|
return "";
|
|
}
|
|
}
|
|
|
|
// 3. Cohort full — the closed-cohort line only. No feedback is rendered: the consent
|
|
// question (the old "publish" field) is gone, so there is no record of anyone agreeing
|
|
// to have their words shown in public, and anonymous words are still the author's
|
|
// words. This state names no quotes, no excerpts and no paraphrases.
|
|
function stateFull() {
|
|
var box = panel([el("h2", "", "This cohort is full")]);
|
|
box.appendChild(el("p", "detail", "All seats for this cohort have been claimed, so it is closed. We are not accepting new freelancers into this group."));
|
|
show([box]);
|
|
}
|
|
|
|
// 4. Count unavailable — today's real state. No number, no claim button that cannot work.
|
|
function stateUnavailable(httpStatus, msg) {
|
|
var nodes = [
|
|
status("We cannot read the seat count right now.", "warn"),
|
|
el("p", "detail", "The seat count could not be read from our service, so we are not showing a number and we are not offering a claim that cannot work. Please try again shortly.")
|
|
];
|
|
if (httpStatus) {
|
|
nodes.push(el("p", "detail", "The service answered " + httpStatus + (msg ? " — " + msg : "") + "."));
|
|
}
|
|
nodes.push(retryButton("Try again", load));
|
|
show([panel(nodes)]);
|
|
}
|
|
function stateLoadFailed(httpStatus, msg) {
|
|
var nodes = [
|
|
status("We could not reach the service.", "warn"),
|
|
el("p", "detail", "The seat count could not be read, so no number is shown and no seat is offered right now.")
|
|
];
|
|
if (httpStatus) nodes.push(el("p", "detail", "The service answered " + httpStatus + (msg ? " — " + msg : "") + "."));
|
|
nodes.push(retryButton("Try again", load));
|
|
show([panel(nodes)]);
|
|
}
|
|
|
|
// ---- The feedback form ----------------------------------------------------------------
|
|
// The n8n form's questions, with the copy corrected, plus the fields the owner asked for.
|
|
var FIELDS = [
|
|
{ id: "finalized", label: "Did you finalize the signup?", type: "select", options: [["yes", "Yes"], ["no", "No"]], required: true },
|
|
{ id: "difficulty", label: "How hard was the signup?", type: "select", options: [["easy", "Easy"], ["ok", "OK"], ["hard", "Hard"]], required: true },
|
|
{ id: "signup_feedback", label: "What is your feedback on the signup?", type: "textarea", required: true },
|
|
{ id: "understood_scale", label: "Did you understand how we ask you to rate your skills? (the 15-point scale)", type: "select", options: [["yes", "Yes"], ["no", "No"]], required: true },
|
|
{ id: "scale_feedback", label: "What is your feedback on the 15-point skill scale?", type: "textarea", required: true },
|
|
{ id: "almost_stopped", label: "What almost stopped you from signing up?", type: "textarea", required: true, hint: "If nothing did, say so." },
|
|
{ id: "broke_or_confused", label: "Did anything break or confuse you?", type: "textarea", required: true },
|
|
{ id: "design_shows_work", label: "Do you think our profile design shows what you do well?", type: "select", options: [["yes", "Yes"], ["so-so", "So-so"], ["no", "No"]], required: true },
|
|
{ id: "design_feedback", label: "What can we improve about the profile design?", type: "textarea", required: true },
|
|
{ id: "will_stay", label: "Will you stay on the platform?", type: "select", options: [["yes", "Yes"], ["no", "No"]], required: true },
|
|
{ id: "improve_offer", label: "How can we improve what we offer you?", type: "textarea", required: true },
|
|
{ id: "recommend", label: "Would you recommend this platform to a freelance colleague?", type: "select", options: [["yes", "Yes, good idea"], ["maybe", "Maybe"], ["no", "Preferably not"]], required: true },
|
|
{ id: "expect_next", label: "What do you expect to happen next — and how soon?", type: "textarea", required: true }
|
|
];
|
|
|
|
function fieldBlock(spec) {
|
|
var f = el("div", "field");
|
|
f.setAttribute("data-field", spec.id);
|
|
if (spec.type === "radio") {
|
|
var fs = el("fieldset");
|
|
fs.setAttribute("data-field", spec.id);
|
|
var lg = el("legend", "", spec.label);
|
|
fs.appendChild(lg);
|
|
spec.options.forEach(function (pair) {
|
|
var lab = el("label", "choice");
|
|
var r = el("input");
|
|
r.type = "radio";
|
|
r.name = spec.id;
|
|
r.value = pair[0];
|
|
r.id = spec.id + "-" + pair[0];
|
|
lab.appendChild(r);
|
|
lab.appendChild(el("span", "", pair[1]));
|
|
fs.appendChild(lab);
|
|
});
|
|
var er = el("p", "err", "");
|
|
er.hidden = true;
|
|
fs.appendChild(er);
|
|
return fs;
|
|
}
|
|
var lb = el("label", "", spec.label);
|
|
lb.setAttribute("for", "fb-" + spec.id);
|
|
var ctl;
|
|
if (spec.type === "select") {
|
|
ctl = el("select");
|
|
ctl.appendChild(new Option("— choose —", ""));
|
|
spec.options.forEach(function (pair) { ctl.appendChild(new Option(pair[1], pair[0])); });
|
|
} else if (spec.type === "textarea") {
|
|
ctl = el("textarea");
|
|
ctl.rows = 4;
|
|
} else {
|
|
ctl = el("input");
|
|
ctl.type = "text";
|
|
}
|
|
ctl.id = "fb-" + spec.id;
|
|
ctl.name = spec.id;
|
|
f.appendChild(lb);
|
|
f.appendChild(ctl);
|
|
if (spec.hint) f.appendChild(el("p", "hint", spec.hint));
|
|
var e = el("p", "err", "");
|
|
e.hidden = true;
|
|
f.appendChild(e);
|
|
return f;
|
|
}
|
|
|
|
function feedbackPanel() {
|
|
var box = el("div", "panel");
|
|
box.appendChild(el("h2", "", "How did it go?"));
|
|
box.appendChild(el("p", "detail", "Answer in your own words. Your answers come to us — nothing here is published."));
|
|
var form = el("form");
|
|
form.setAttribute("novalidate", "novalidate");
|
|
|
|
FIELDS.forEach(function (spec) { form.appendChild(fieldBlock(spec)); });
|
|
|
|
var line = status("", "");
|
|
var btn = el("button", "btn", "Send feedback");
|
|
btn.type = "submit";
|
|
form.appendChild(btn);
|
|
form.appendChild(line);
|
|
|
|
form.addEventListener("submit", function (ev) {
|
|
ev.preventDefault();
|
|
var bad = false;
|
|
FIELDS.forEach(function (spec) {
|
|
var holder = form.querySelector('[data-field="' + spec.id + '"]');
|
|
var err = holder.querySelector(".err");
|
|
var v = "";
|
|
if (spec.type === "radio") {
|
|
var checked = form.querySelector('input[name="' + spec.id + '"]:checked');
|
|
v = checked ? checked.value : "";
|
|
} else {
|
|
var ctl = form.querySelector("#fb-" + spec.id);
|
|
v = ctl ? ctl.value.trim() : "";
|
|
}
|
|
if (spec.required && !v) {
|
|
holder.setAttribute("data-bad", "1");
|
|
err.textContent = "Please answer this before sending.";
|
|
err.hidden = false;
|
|
bad = true;
|
|
} else {
|
|
holder.removeAttribute("data-bad");
|
|
err.hidden = true;
|
|
}
|
|
});
|
|
if (bad) {
|
|
line.className = "status state-warn";
|
|
line.textContent = "Some answers are missing — see the notes above.";
|
|
var firstBad = form.querySelector('[data-bad="1"] input, [data-bad="1"] textarea, [data-bad="1"] select');
|
|
if (firstBad) firstBad.focus();
|
|
return;
|
|
}
|
|
|
|
// Build the body. The claimed Upwork name rides along ONLY when a seat was claimed
|
|
// this visit — state the page already holds. With no claim the submission carries no
|
|
// name and is anonymous (nothing is invented).
|
|
var body = { form: "feedback" };
|
|
if (claimedUpwork) body.upwork = claimedUpwork;
|
|
FIELDS.forEach(function (spec) {
|
|
if (spec.type === "radio") {
|
|
var checked = form.querySelector('input[name="' + spec.id + '"]:checked');
|
|
body[spec.id] = checked ? checked.value : "";
|
|
} else {
|
|
var ctl = form.querySelector("#fb-" + spec.id);
|
|
body[spec.id] = ctl ? ctl.value.trim() : "";
|
|
}
|
|
});
|
|
|
|
btn.disabled = true;
|
|
line.className = "status";
|
|
line.textContent = "Sending…";
|
|
fetchJson(C.submitUrl, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(body)
|
|
}).then(function (res) {
|
|
if (!res.ok) {
|
|
btn.disabled = false;
|
|
line.className = "status state-warn";
|
|
line.textContent = "We could not send your feedback — the service answered " + res.status +
|
|
(msgOf(res.body) ? " — " + msgOf(res.body) : "") + ". Your answers are still here; try again.";
|
|
return;
|
|
}
|
|
line.className = "status state-ok";
|
|
line.textContent = "Thank you — your feedback reached us.";
|
|
btn.disabled = true;
|
|
form.querySelectorAll("input, textarea, select, button").forEach(function (n) {
|
|
if (n !== btn) n.disabled = true;
|
|
});
|
|
}).catch(function () {
|
|
btn.disabled = false;
|
|
line.className = "status state-warn";
|
|
line.textContent = "We could not reach the service. Your answers are still here; try again.";
|
|
});
|
|
});
|
|
|
|
box.appendChild(form);
|
|
return box;
|
|
}
|
|
|
|
// ---- Load -----------------------------------------------------------------------------
|
|
function load() {
|
|
show([panel([status("Reading the seat count…", "")])]);
|
|
fetchJson(C.statusUrl, { method: "GET", cache: "no-store" }).then(function (res) {
|
|
if (!res.ok) {
|
|
// A workflow that throws is our problem, and it must not look like a closed cohort.
|
|
stateUnavailable(res.status, msgOf(res.body));
|
|
return;
|
|
}
|
|
var seats = count(res.body, C.leftKeys);
|
|
var total = count(res.body, C.totalKeys);
|
|
if (seats === null) {
|
|
// No count came off the wire: print no number.
|
|
stateUnavailable(null, "the reply carried no seat count");
|
|
return;
|
|
}
|
|
if (seats === 0) {
|
|
stateFull();
|
|
return;
|
|
}
|
|
stateAvailable(seats, total);
|
|
}).catch(function () {
|
|
stateLoadFailed(null, "");
|
|
});
|
|
}
|
|
|
|
load();
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|