From ca88efd3e36a82b84f825abcd54c301bc48bca98 Mon Sep 17 00:00:00 2001
From: nadiavanleur <nadiavl@hotmail.com>
Date: Mon, 25 Mar 2024 12:55:59 +0100
Subject: [PATCH] Add 2023 folder

---
 2023/index.html | 295 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 295 insertions(+)
 create mode 100644 2023/index.html
diff --git a/2023/index.html b/2023/index.html
new file mode 100644
index 0000000..1dcad3c
--- /dev/null
+++ b/2023/index.html
@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-TKF9F8L8D4"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-TKF9F8L8D4");
+    </script>
+
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hoeveel vrouwen spelen er komende editie op Jera on Air</title>
+
+    <link
+      rel="icon"
+      type="image/x-icon"
+      href="https://hoeveelvrouwenopjera.nl/image.jpeg"
+    />
+
+    <meta
+      name="keywords"
+      content="Jera on Air, vrouwen, OpenGraph, meta tags, findability, Twitter, Facebook, SEO"
+    />
+    <meta
+      name="description"
+      content="Hoeveel vrouwen, gender non-conforming artiesten en mannen spelen er dit jaar op Jera on Air..."
+    />
+
+    <meta
+      property="og:title"
+      content="Hoeveel vrouwen spelen er komende editie op Jera on Air"
+    />
+    <meta property="og:url" content="https://hoeveelvrouwenopjera.nl/" />
+    <meta
+      property="og:image"
+      content="https://hoeveelvrouwenopjera.nl/image.jpeg"
+    />
+    <meta
+      property="og:description"
+      content="Hoeveel vrouwen, gender non-conforming artiesten en mannen spelen er dit jaar op Jera on Air..."
+    />
+    <meta property="og:type" content="website" />
+
+    <meta name="twitter:card" content="summary" />
+    <meta
+      property="twitter:title"
+      content="Hoeveel vrouwen spelen er komende editie op Jera on Air"
+    />
+    <meta
+      name="twitter:image"
+      content="https://hoeveelvrouwenopjera.nl/image.jpeg"
+    />
+    <meta
+      property="twitter:description"
+      content="Hoeveel vrouwen, gender non-conforming artiesten en mannen spelen er dit jaar op Jera on Air..."
+    />
+
+    <style>
+      @font-face {
+        font-family: "block";
+        src: url(https://hoeveelvrouwenopjera.nl/blocktregcon-webfont.woff2);
+      }
+
+      @font-face {
+        font-family: "Jera on Air";
+        src: url(https://hoeveelvrouwenopjera.nl/jera-font-air-webfont.woff2);
+      }
+
+      :root {
+        --maincolor: #e6dec8;
+        --supportcolor: #db2e47;
+        --headerfooterbgcolor: #161514;
+        --backcolor: #1d1e1c;
+        --hovercolor: #db2e47;
+        --cyboxcolor: #333;
+        --yellow: #d29d30;
+      }
+
+      *::selection {
+        background-color: var(--yellow);
+      }
+
+      html {
+        font-family: "block";
+        font-size: 1rem;
+        background-color: var(--backcolor);
+        color: var(--maincolor);
+        height: 100%;
+        line-height: 1.2;
+      }
+
+      body {
+        height: 100%;
+        position: relative;
+        margin: 0;
+      }
+
+      a {
+        color: inherit;
+        text-decoration: none;
+      }
+
+      a:hover {
+        color: var(--maincolor);
+      }
+
+      .c-layout {
+        max-width: 51rem;
+        margin: 0 auto;
+        padding: 24px;
+      }
+
+      .c-footer {
+        width: 100%;
+        text-align: right;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        color: var(--cyboxcolor);
+      }
+
+      .c-footer__content {
+        padding: 8px 12px;
+      }
+
+      .c-title {
+        font-size: 3.1rem;
+        transform: skewY(-3deg);
+        color: var(--yellow);
+      }
+
+      .c-title::selection,
+      .c-title *::selection {
+        background-color: var(--maincolor);
+      }
+
+      .c-text {
+        font-size: 2rem;
+        transform: skewY(-3deg);
+      }
+
+      .c-link {
+        font-family: "Jera on Air";
+        text-transform: uppercase;
+        font-size: 6rem;
+        text-decoration: none;
+        color: var(--maincolor);
+        transform: skewY(-3deg);
+        opacity: 0.5;
+        margin-left: 24px;
+      }
+
+      .c-link:hover {
+        opacity: 1;
+      }
+
+      .c-spotify-embed {
+        border-radius: 12px;
+      }
+
+      .u-highlight-text {
+        font-weight: bold;
+        color: var(--supportcolor);
+      }
+
+      .u-visually-hidden {
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
+      }
+
+      .u-prevent-break {
+        display: inline-block;
+      }
+
+      @media only screen and (min-width: 656px) {
+        .c-layout {
+          padding: 48px;
+        }
+
+        .c-title {
+          font-size: 5rem;
+        }
+
+        .c-link {
+          position: absolute;
+          bottom: 20%;
+          right: 20%;
+          margin: 0;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <h1 class="u-visually-hidden">
+      Hoeveel vrouwen spelen er komende editie op
+      <span class="u-prevent-break">Jera on Air</span>
+    </h1>
+    <div class="c-layout">
+      <h2 class="c-title">
+        Er spelen
+        <strong class="u-highlight-text" id="WOMEN">12</strong> vrouwen op
+        <span class="u-prevent-break">Jera on Air</span>
+        <span class="u-prevent-break">in 2023.</span>
+      </h2>
+      <p class="c-text">
+        En <strong class="u-highlight-text" id="NB">0</strong> gender
+        non-conforming artiesten.
+      </p>
+      <p class="c-text">
+        En <strong class="u-highlight-text" id="MEN">389</strong> mannen.
+      </p>
+    </div>
+    <a
+      target="_blank"
+      href="https://www.jeraonair.nl/nl/line-up/"
+      class="c-link"
+      >Line up.</a
+    >
+    <footer class="c-footer">
+      <div class="c-footer__content">
+        <span
+          title="Eagle, Vulture, Buzzard & Hawk stage. Raven stage lineup wordt niet geboekt door Jera on Air zelf."
+          >*</span
+        >
+        |
+        <a
+          target="_blank"
+          href="https://docs.google.com/spreadsheets/d/e/2PACX-1vSvdEksT2vq_QpNePUQgMb0R3_i8ML1JVswSOnLnvLhgssmHrgnRjkiEVSFxg-rfVqRNcPEJwt5KfDD/pubhtml"
+          >Laatst geupdatet: <span id="LAST_UPDATED">07-06-2023</span></a
+        >
+        |
+        <a target="_blank" href="mailto:contact@hoeveelvrouwenopjera.nl"
+          >Contact</a
+        >
+      </div>
+      <iframe
+        class="c-spotify-embed"
+        src="https://open.spotify.com/embed/playlist/5JnxxBg51pC1GNBfKVDyu9?utm_source=generator&theme=0"
+        width="100%"
+        height="80"
+        frameborder="0"
+        allowfullscreen=""
+        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+        loading="lazy"
+      ></iframe>
+    </footer>
+  </body>
+
+  <script>
+    const SPREADSHEET_ID = "190Q6oUEDXWbl0Um617Rd9nYf72JoXDFsnTa_-s-s63U";
+    const TAB_NAME = "2023_totals";
+    const API_KEY = "AIzaSyBXy2H2vFwbhaIcN3Mb8Ovl5pArn99FtKc";
+    const FIELDS = {
+      MEN: "Men",
+      WOMEN: "Women (Jera booked only)",
+      NB: "Gender non-conforming",
+      LAST_UPDATED: "Last updated",
+    };
+
+    const getTotals = async () => {
+      const sheetUrl = `https://sheets.googleapis.com/v4/spreadsheets/${SPREADSHEET_ID}/values/${TAB_NAME}?alt=json&key=${API_KEY}`;
+      const sheetData = await fetch(sheetUrl).then((result) => result.json());
+
+      console.log(sheetUrl, sheetData);
+
+      return sheetData?.values;
+    };
+
+    const setTotals = async () => {
+      const totals = await getTotals();
+
+      Object.keys(FIELDS).forEach((key) => {
+        const value = totals.find((total) => total.includes(FIELDS[key]))[1];
+        document.getElementById(key).innerHTML = value;
+      });
+    };
+
+    setTotals();
+  </script>
+</html>
