Cannabis Freedom Index

Changelog ad5dc02

survey banner

2 files of code, design or docs +37 −0 lines

Code, design and documents 2 files

src/components/HomePage.astro +28 −0
@@ -5,4 +5,5 @@ import Changes from "../components/Changes.astro";
 import ProjectNumbers from "../components/ProjectNumbers.astro";
 import Tools from "./Tools.astro";
+import { survey } from "../lib/survey.js";
 import AverageChart from "../components/AverageChart.astro";
 import { SEGMENTS, DATA_SNAPSHOT, REC_LABEL, REC_ORDER, REC_HELP, MED_LABEL, MED_HELP, countries, regions, worldAvg, lastUpdated, formatDate, subunitsOf, places, trendOf, changeDate, TREND_YEARS } from "../lib/countries.js";
@@ -130,4 +131,13 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments",
     {/* The opening: the question, the answer in one number with its history, then what just changed. */}
     {!view && <section class="front">
+      {/* While the yearly survey is open, the page starts with an invitation to it. A browser that
+          has already answered is shown the way back to its answers instead (see the script). */}
+      {survey.open && (
+        <a class="front-call" id="frontCall" href={`${base}survey/take/`} data-edition={survey.edition}>
+          <span class="fc-tag">New · {survey.edition}</span>
+          <span class="fc-text"><strong>State of Cannabis is open.</strong> <span data-fc-more>Tell us how cannabis really is where you live: ten minutes, no account, answers encrypted.</span></span>
+          <span class="fc-go"><span data-fc-go>Take the survey</span> <span aria-hidden="true">→</span></span>
+        </a>
+      )}
       <p class="eyebrow">Cannabis Freedom Index <span>{DATA_SNAPSHOT} edition</span></p>
       <h1>How free is cannabis <em>in every country?</em></h1>
@@ -375,4 +385,22 @@ const columnGroups = [["Shown by default", BASE_COLUMNS], ...["Score segments",
     </section>}
 
+    {!view && survey.open && (
+      <script is:inline>
+        // Someone who has already answered the survey gets a link to their answers, not an invitation.
+        (function () {
+          var a = document.getElementById("frontCall");
+          try {
+            var items = (JSON.parse(localStorage.getItem("cfi-survey-" + a.dataset.edition + "-mine") || "null") || {}).items || [];
+            if (!items.length) return;
+            a.href = a.href.replace(/take\/$/, "me/");
+            a.querySelector("strong").textContent = "Thank you for answering State of Cannabis.";
+            a.querySelector("[data-fc-more]").textContent = "You can add places and prices, or change your answers, at any time.";
+            a.querySelector("[data-fc-go]").textContent = "Your submissions";
+            a.querySelector(".fc-tag").textContent = "Survey · " + a.dataset.edition;
+          } catch (e) {}
+        })();
+      </script>
+    )}
+
     {!view && <Tools />}
 

src/styles/global.css +9 −0
@@ -1561,2 +1561,11 @@ button.sv-row .sv-chip { font: 400 10.5px var(--mono); text-transform: uppercase
 .tools-grid a:hover .tools-go { color: var(--text); }
 @media (max-width: 900px) { .tools-grid { grid-template-columns: 1fr; } }
+/* the invitation to the survey that opens the home page */
+.front-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; margin: 0 0 clamp(22px, 4vw, 40px); padding: 12px 16px; border: 1px solid var(--text); border-left: 4px solid var(--t4); font-size: 14.5px; }
+.front-call:hover { background: var(--surface); }
+.fc-tag { padding: 3px 8px; background: var(--t4); color: #0c0c0b; font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--r); white-space: nowrap; }
+.fc-text { color: var(--text-2); text-wrap: pretty; }
+.fc-text strong { color: var(--text); font-weight: 600; }
+.fc-go { font: 400 11.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
+.front-call:hover .fc-go { text-decoration: underline; text-underline-offset: 4px; }
+@media (max-width: 700px) { .front-call { grid-template-columns: 1fr; justify-items: start; } }

    ↑↓ to move, ↵ to open.