Donate page redesign (#1633)

ooni · Dec 4, 2024 · 364d060 · 364d060
1 parent afb12ee
commit 364d060
Show file tree

Hide file tree

Showing 16 changed files with 460 additions and 53 deletions.
diff --git a/content/donate/_index.md b/content/donate/_index.md
@@ -8,6 +8,43 @@ submenu:
     name: "Shop"
   - url: "/donate/other"
     name: "Other ways to give"
+shopitems:
+  - name: OONI Classic Black T-Shirt
+    image: https://shop.ooni.org/cdn/shop/files/unisex-organic-cotton-t-shirt-black-front-656c4bf6d8927.jpg?v=1701596158&width=533
+    link: https://shop.ooni.org/products/unisex-organic-cotton-t-shirt
+  - name: Internet Freedom Brew Mug
+    image: https://shop.ooni.org/cdn/shop/files/white-ceramic-mug-with-color-inside-black-11-oz-left-656b6dcf6b5e3.jpg?v=1701539291&width=533
+    link: https://shop.ooni.org/products/internet-freedom-brew-mug
+  - name: OONI Color Sticker
+    image: https://shop.ooni.org/cdn/shop/files/kiss-cut-stickers-white-3x3-lifestyle-2-656d9ccfe4aa7.jpg?v=1701682392&width=533
+    link: https://shop.ooni.org/products/ooni-color-logo-sticker
+  - name: Holographic OONI-Spectrum Sticker
+    image: https://shop.ooni.org/cdn/shop/files/kiss-cut-holographic-stickers-grey-3x3-front-656c5095699a2.jpg?v=1701597340&width=533
+    link: https://shop.ooni.org/products/holographic-ooni-spectrum-sticker
+  - name: Unfiltered Internet Water Bottle
+    image: https://shop.ooni.org/cdn/shop/files/sports-water-bottle-charcoal-front-656b4200d54e3.jpg?v=1701528076&width=533
+    link: https://shop.ooni.org/products/unfiltered-internet-water-bottle
+  - name: OONI Explorer Eco-Chic Tote Bag
+    image: https://shop.ooni.org/cdn/shop/files/eco-tote-bag-oyster-front-656b320f233cf.jpg?v=1701523995&width=533
+    link: https://shop.ooni.org/products/ooni-explorer-eco-chic-tote-bag
+mediafeatures:
+  - image: /images/cbc.svg
+    title: When governments censor websites and block messaging apps like Telegram, here's where to turn for proof
+    text: All of the data collected by OONI's measurement software — called probes — is stored in a publicly accessible database, where anyone can go to understand what's being blocked, filtered, or throttled in a particular country, and how. That data can be used to track the evolution of information controls over time or link censorship with political events like elections and protests.
+    link: https://www.cbc.ca/news/science/ooni-tor-information-controls-measurement-censorship-iran-1.4653523
+  - image: /images/the-washington-post.svg
+    title: 'Search result not found: China bans Wikipedia in all languages'
+    text: The community-edited online encyclopedia was barred in April, according to a new report from the censorship research group, the Open Observatory of Network Interference. This means Beijing’s ban of the Chinese-language edition has been extended to swallow Wikipedia’s entire platform.
+    link: https://www.washingtonpost.com/business/2019/05/15/china-bans-wikipedia-all-languages
+  - image: /images/deutsche-welle.svg
+    title: Myanmar military clamps down on speech, press
+    text: 'The report published Tuesday by the Open Observatory of Network Interference (OONI) organization shows how extensive the measures are. “The scale of internet censorship in Myanmar has become quite unprecedented,” it said.
+    In addition to the military’s blocking of social media, Wikipedia and 174 news sites, the NGO also found the targeted blocking of websites that offer ways to circumvent internet blockades.'
+    link: https://www.dw.com/en/myanmar-military-coup-press-freedom/a-56829376
+  - image: /images/voa.svg
+    title: Ethiopia Social Media Access Back After 5-Month Ban
+    text: A service run by the Open Observatory of Network Interference (OONI), an association that tracks online censorship, showed that access to social networks in Africa's second-most populous country was freely available after being shut down in early February.
+    link: https://www.voaafrica.com/a/ethiopia-social-media-access-back-after-5-month-ban/7187013.html
 ---
 
 As a non-profit, we rely on donations from people like you to defend a free and open internet for all.

diff --git a/layouts/partials/footer-tailwind.html b/layouts/partials/footer-tailwind.html
@@ -118,7 +118,7 @@ <h3 class="text-sm font-semibold leading-6 text-white">Updates</h3>
             </div>
         </div>
         <div class="mt-16 border-t border-white/10 pt-8 sm:mt-20 lg:mt-24">
-            <p class="text-xs leading-5 text-gray4">&copy; 2023 Open Observatory of Network Interference (OONI).
+            <p class="text-xs leading-5 text-gray4">&copy; {{ now.Year }} Open Observatory of Network Interference (OONI).
                 <a href="https://github.com/ooni/license">Content available under a Creative Commons license.</a>
             </p>
             </div>

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -7,7 +7,7 @@
                 </div>
                 <div class="pb-4">Global community measuring internet censorship around the world.</div>
                 <div class="">
-                    <div>© 2022 Open Observatory of Network Interference (OONI)</div>
+                    <div>© {{ now.Year }} Open Observatory of Network Interference (OONI)</div>
                     <div class="">
                         <a href="https://github.com/ooni/license">Content available under a Creative Commons
                             license.</a>

diff --git a/layouts/partials/media-features.html b/layouts/partials/media-features.html
@@ -0,0 +1,76 @@
+<section class="my-16">
+  <div id="mediaCarousel">
+    <div class="flex justify-between items-center mb-4">
+      <h3 class="text-white font-bold text-3xl">What they say about us</h2>
+        <div class="flex gap-3">
+          <button class="prev bg-white rounded-full p-4"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 6.167H3.525L7.592 2.1a.84.84 0 0 0 0-1.183.83.83 0 0 0-1.175 0L.925 6.408a.83.83 0 0 0 0 1.175l5.483 5.5a.83.83 0 1 0 1.175-1.175L3.525 7.833h9.308A.836.836 0 0 0 13.667 7a.836.836 0 0 0-.834-.833Z" fill="#0588CB"/></svg></button>
+          <button class="next bg-white rounded-full p-4"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.167 7.833h9.308L6.408 11.9a.84.84 0 0 0 0 1.183.83.83 0 0 0 1.175 0l5.492-5.491a.83.83 0 0 0 0-1.175L7.592.917a.83.83 0 1 0-1.175 1.175l4.058 4.075H1.167A.836.836 0 0 0 .333 7c0 .458.375.833.834.833Z" fill="#0588CB"/></svg></button>
+        </div>
+    </div>
+
+    <div id="mediaGallery">
+      <ul class="flex gap-4 transition-[margin-left] duration-200 w-[99999px]">
+        {{ with .Params.mediafeatures }}
+          {{ range . }}
+            <li class="bg-white rounded-2xl flex flex-col justify-between p-6">
+              <div class="mb-4">
+                <img class="h-[28px] mb-6" src="{{ .image }}" />
+                <div class="text-[1.6rem] font-bold">{{ .title }}</div>
+                <div class="leading-6 text-gray7">{{ .text }}</div>
+              </div>
+              <!-- <a href="{{ .link }}" target="_blank" class="underline text-sm text-blue6 flex flex-row items-center">
+                <span class="mr-2">Find out more</span>
+                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M10.0833 10.0833H1.91667V1.91667H6V0.75H1.91667C1.26917 0.75 0.75 1.275 0.75 1.91667V10.0833C0.75 10.725 1.26917 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V6H10.0833V10.0833ZM7.16667 0.75V1.91667H9.26083L3.52667 7.65083L4.34917 8.47333L10.0833 2.73917V4.83333H11.25V0.75H7.16667Z" fill="currentColor"/>
+                </svg>
+              </a> -->
+            </li>
+          {{ end }}
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+</section>
+
+<script>
+  let mediaGalleryWidth; 
+  let mediaList = mediaCarousel.querySelector('ul');
+  let mediaListElements = mediaCarousel.querySelectorAll('li');
+  let mediaPosition = 0;
+  let mediaLiWidth;
+  let mediaTotalWidth;
+
+  function resize() {
+    mediaGalleryWidth = mediaCarousel.querySelector('#mediaGallery').offsetWidth
+    mediaList.style.marginLeft = '0px';
+    if (mediaGalleryWidth < 670) {
+      mediaLiWidth = mediaGalleryWidth
+      mediaTotalWidth = (3 * (mediaLiWidth + 16))
+    } else {
+      mediaLiWidth = mediaGalleryWidth / 2 - 8
+      mediaTotalWidth = (2 * (mediaLiWidth + 16))
+    }
+
+    mediaListElements.forEach((li) => {
+      li.style.width = `${mediaLiWidth}px`
+    });
+  }
+
+  resize();
+
+  window.addEventListener("resize", (event) => {
+    resize();
+  });
+
+  mediaCarousel.querySelector('.prev').onclick = function() {
+    mediaPosition += mediaLiWidth + 16;
+    mediaPosition = Math.min(mediaPosition, 0)
+    mediaList.style.marginLeft = mediaPosition + 'px';
+  };
+
+  mediaCarousel.querySelector('.next').onclick = function() {
+    mediaPosition -= mediaLiWidth + 16;
+    mediaPosition = Math.max(mediaPosition, -mediaTotalWidth);
+    mediaList.style.marginLeft = mediaPosition + 'px';
+  };
+</script>
diff --git a/layouts/partials/ooni-shop.html b/layouts/partials/ooni-shop.html
@@ -0,0 +1,63 @@
+<section class="my-16">
+  <div id="shopCarousel">
+    <div class="flex justify-between items-center mb-4">
+      <h2 class="text-white font-bold text-3xl">Shop</h2>
+      <div class="flex gap-3">
+        <button class="prev bg-white rounded-full p-4"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.833 6.167H3.525L7.592 2.1a.84.84 0 0 0 0-1.183.83.83 0 0 0-1.175 0L.925 6.408a.83.83 0 0 0 0 1.175l5.483 5.5a.83.83 0 1 0 1.175-1.175L3.525 7.833h9.308A.836.836 0 0 0 13.667 7a.836.836 0 0 0-.834-.833Z" fill="#0588CB"/></svg></button>
+        <button class="next bg-white rounded-full p-4"><svg width="14" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.167 7.833h9.308L6.408 11.9a.84.84 0 0 0 0 1.183.83.83 0 0 0 1.175 0l5.492-5.491a.83.83 0 0 0 0-1.175L7.592.917a.83.83 0 1 0-1.175 1.175l4.058 4.075H1.167A.836.836 0 0 0 .333 7c0 .458.375.833.834.833Z" fill="#0588CB"/></svg></button>
+      </div>
+    </div>
+
+    <div class="gallery">
+      <ul class="flex gap-4 transition-[margin-left] duration-200 w-[99999px]">
+        {{ with .Params.shopitems }}
+          <li>
+            <div class="bg-blue9 w-[296px] h-[254px] p-6 rounded-2xl text-white flex flex-col justify-between">
+              <div>
+                <div class="font-bold text-3xl mb-4">OONIque Boutique</div>
+                <p class="text-base">Get some OONIque items to support OONI</p>
+              </div>
+              <div>
+                <a class="text-sm flex flex-row items-center" href="https://shop.ooni.org/" target="_blank">
+                  <span class="mr-2 underline">Visit our shop</span>
+                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10.0833 10.0833H1.91667V1.91667H6V0.75H1.91667C1.26917 0.75 0.75 1.275 0.75 1.91667V10.0833C0.75 10.725 1.26917 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V6H10.0833V10.0833ZM7.16667 0.75V1.91667H9.26083L3.52667 7.65083L4.34917 8.47333L10.0833 2.73917V4.83333H11.25V0.75H7.16667Z" fill="currentColor"/>
+                  </svg>
+                </a>
+              </div>
+            </div>
+          </li>
+          {{ range . }}
+            <li class="w-[216px]">
+              <a href="{{ .link }}" target="_blank">
+                <div class="flex flex-col">
+                  <div class=" bg-cover h-[172px] rounded-t-2xl" style="background-image:url('{{ .image }}');"></div>
+                  <div class="bg-white text-gray7 p-4 h-[82px] rounded-b-2xl">{{ .name }}</div>
+                </div>
+              </a>
+            </li>
+          {{ end }}
+        {{ end }}
+      </ul>
+    </div>
+  </div>
+</section>
+
+<script>
+    let width = 232; // image width
+    let shopGalleryWidth = shopCarousel.querySelector('.gallery').offsetWidth
+    let list = shopCarousel.querySelector('ul');
+    let position = 0;
+
+    shopCarousel.querySelector('.prev').onclick = function() {
+      position += width;
+      position = Math.min(position, 0)
+      list.style.marginLeft = position + 'px';
+    };
+
+    shopCarousel.querySelector('.next').onclick = function() {
+      position -= width;
+      position = Math.max(position, -(1692 - shopCarousel.querySelector('.gallery').offsetWidth));
+      list.style.marginLeft = position + 'px';
+    };
+</script>
diff --git a/layouts/partials/ooni-work.html b/layouts/partials/ooni-work.html
@@ -1,46 +1,45 @@
-<p class="mt-6 text-lg leading-8 text-gray8">
-    By donating to OONI, you support:
+<p class="mb-6 font-bold">
+  By donating to OONI, you support:
 </p>
-<ul role="list" class="mt-10 grid grid-cols-1 gap-x-8 gap-y-3 text-base leading-7 text-black sm:grid-cols-2">
-    <li class="flex gap-x-3">
-        <svg class="h-7 w-5 flex-none" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 -960 960 960">
-            <path
-                d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z" />
-        </svg>
-        <a href="https://ooni.org/install/" class="hover:text-ooniblue">Free and open source software for
-            detecting internet
-            censorship</a>
-    </li>
-    <li class="flex gap-x-3">
-        <svg class="h-7 w-5 flex-none" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 -960 960 960">
-            <path
-                d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z" />
-        </svg>
-        <a href="https://github.com/ooni/backend/" class="hover:text-ooniblue">Real-time analysis of
-            internet
-            censorship around
-            the world</a>
-    </li>
-    <li class="flex gap-x-3">
-        <svg class="h-7 w-5 flex-none" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 -960 960 960">
-            <path
-                d="M480-120q-151 0-255.5-46.5T120-280v-400q0-66 105.5-113T480-840q149 0 254.5 47T840-680v400q0 67-104.5 113.5T480-120Zm0-479q89 0 179-25.5T760-679q-11-29-100.5-55T480-760q-91 0-178.5 25.5T200-679q14 30 101.5 55T480-599Zm0 199q42 0 81-4t74.5-11.5q35.5-7.5 67-18.5t57.5-25v-120q-26 14-57.5 25t-67 18.5Q600-528 561-524t-81 4q-42 0-82-4t-75.5-11.5Q287-543 256-554t-56-25v120q25 14 56 25t66.5 18.5Q358-408 398-404t82 4Zm0 200q46 0 93.5-7t87.5-18.5q40-11.5 67-26t32-29.5v-98q-26 14-57.5 25t-67 18.5Q600-328 561-324t-81 4q-42 0-82-4t-75.5-11.5Q287-343 256-354t-56-25v99q5 15 31.5 29t66.5 25.5q40 11.5 88 18.5t94 7Z" />
-        </svg>
-        <a href="https://ooni.org/data/" class="hover:text-ooniblue">Open data on internet censorship --
-            supporting global
-            research and advocacy
-            efforts</a>
-    </li>
-    <li class="flex gap-x-3">
-        <svg class="h-7 w-5 flex-none" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 -960 960 960">
-            <path
-                d="M320-600q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm0 160q17 0 28.5-11.5T360-480q0-17-11.5-28.5T320-520q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440Zm0 160q17 0 28.5-11.5T360-320q0-17-11.5-28.5T320-360q-17 0-28.5 11.5T280-320q0 17 11.5 28.5T320-280ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h440l200 200v440q0 33-23.5 56.5T760-120H200Zm0-80h560v-400H600v-160H200v560Zm0-560v160-160 560-560Z" />
-        </svg>
-        <a href="https://ooni.org/reports/" class="hover:text-ooniblue">Research on censorship events
-            worldwide</a>
-    </li>
+<ul role="list" class="text-base leading-7 text-gray7">
+  <li class="flex gap-x-3">
+    <svg class="h-7 w-5 flex-none text-blue5" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960">
+      <path
+        d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H160v400Zm140-40-56-56 103-104-104-104 57-56 160 160-160 160Zm180 0v-80h240v80H480Z" />
+    </svg>
+    <!-- <a href="https://ooni.org/install/" class="hover:text-ooniblue"> -->
+      Free and open source software for detecting internet censorship
+    <!-- </a> -->
+  </li>
+  <li class="flex gap-x-3">
+    <svg class="h-7 w-5 flex-none text-blue5" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960">
+      <path
+        d="M200-120q-51 0-72.5-45.5T138-250l222-270v-240h-40q-17 0-28.5-11.5T280-800q0-17 11.5-28.5T320-840h320q17 0 28.5 11.5T680-800q0 17-11.5 28.5T640-760h-40v240l222 270q32 39 10.5 84.5T760-120H200Zm0-80h560L520-492v-268h-80v268L200-200Zm280-280Z" />
+    </svg>
+    <!-- <a href="https://github.com/ooni/backend/" class="hover:text-ooniblue"> -->
+      Real-time analysis of internet censorship around the world
+    <!-- </a> -->
+  </li>
+  <li class="flex gap-x-3">
+    <svg class="h-7 w-5 flex-none text-blue5" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960">
+      <path
+        d="M480-120q-151 0-255.5-46.5T120-280v-400q0-66 105.5-113T480-840q149 0 254.5 47T840-680v400q0 67-104.5 113.5T480-120Zm0-479q89 0 179-25.5T760-679q-11-29-100.5-55T480-760q-91 0-178.5 25.5T200-679q14 30 101.5 55T480-599Zm0 199q42 0 81-4t74.5-11.5q35.5-7.5 67-18.5t57.5-25v-120q-26 14-57.5 25t-67 18.5Q600-528 561-524t-81 4q-42 0-82-4t-75.5-11.5Q287-543 256-554t-56-25v120q25 14 56 25t66.5 18.5Q358-408 398-404t82 4Zm0 200q46 0 93.5-7t87.5-18.5q40-11.5 67-26t32-29.5v-98q-26 14-57.5 25t-67 18.5Q600-328 561-324t-81 4q-42 0-82-4t-75.5-11.5Q287-343 256-354t-56-25v99q5 15 31.5 29t66.5 25.5q40 11.5 88 18.5t94 7Z" />
+    </svg>
+    <!-- <a href="https://ooni.org/data/" class="hover:text-ooniblue"> -->
+      Open data on internet censorship -- supporting global research and advocacy efforts
+    <!-- </a> -->
+  </li>
+  <li class="flex gap-x-3">
+    <svg class="h-7 w-5 flex-none text-blue5" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 -960 960 960">
+      <path
+        d="M320-600q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm0 160q17 0 28.5-11.5T360-480q0-17-11.5-28.5T320-520q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440Zm0 160q17 0 28.5-11.5T360-320q0-17-11.5-28.5T320-360q-17 0-28.5 11.5T280-320q0 17 11.5 28.5T320-280ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h440l200 200v440q0 33-23.5 56.5T760-120H200Zm0-80h560v-400H600v-160H200v560Zm0-560v160-160 560-560Z" />
+    </svg>
+    <!-- <a href="https://ooni.org/reports/" class="hover:text-ooniblue"> -->
+      Research on censorship events worldwide
+    <!-- </a> -->
+  </li>
 </ul>