From dc5d9e06bc9dae7c287caf6d3ce11a7fca7dad88 Mon Sep 17 00:00:00 2001
From: bain <bain@bain.cz>
Date: Sat, 14 Dec 2024 21:50:17 +0100
Subject: [PATCH] add progress bar to fundraising page

---
 assets/main.css                               | 17 ++++++++++
 assets/style.css                              | 32 +++++++++++++++++++
 .../partials/section-fundraising-intro.html   |  7 +++-
 3 files changed, 55 insertions(+), 1 deletion(-)

diff --git a/assets/main.css b/assets/main.css
index f074d57..ff00143 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -311,3 +311,20 @@ html.dark .button-fundraiser-shadow {
   box-shadow: var(--color-gray-300) 10px 10px 0px 0px;
   border: 2px solid var(--color-gray-300);
 }
+
+.fundraiser-progress-bar {
+  width: min(20rem, 80vw);
+  height: 1rem;
+  border-radius: 0.25rem;
+
+  --filled: 3%;
+  --empty-color: theme(colors.gray.300);
+
+  background:
+    linear-gradient(90deg, transparent, transparent var(--filled), var(--empty-color) var(--filled)),
+    repeating-linear-gradient(-45deg, theme(colors.red.700), theme(colors.red.700) 20px, theme(colors.red.800) 20px, theme(colors.red.800) 40px);
+}
+
+html.dark .fundraiser-progress-bar {
+  --empty-color: theme(colors.gray.700);
+}
diff --git a/assets/style.css b/assets/style.css
index df781fb..c934ef8 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -695,6 +695,10 @@ video {
   margin-bottom: 2rem;
 }
 
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -783,6 +787,11 @@ video {
   width: 100%;
 }
 
+.w-min {
+  width: -moz-min-content;
+  width: min-content;
+}
+
 .min-w-0 {
   min-width: 0px;
 }
@@ -1030,6 +1039,10 @@ video {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-main {
   font-family: Spline Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
@@ -1470,6 +1483,21 @@ html.dark .button-fundraiser-shadow {
   border: 2px solid var(--color-gray-300);
 }
 
+.fundraiser-progress-bar {
+  width: min(20rem, 80vw);
+  height: 1rem;
+  border-radius: 0.25rem;
+  --filled: 3%;
+  --empty-color: #d4d4d8;
+  background:
+    linear-gradient(90deg, transparent, transparent var(--filled), var(--empty-color) var(--filled)),
+    repeating-linear-gradient(-45deg, #b91c1c, #b91c1c 20px, #991b1b 20px, #991b1b 40px);
+}
+
+html.dark .fundraiser-progress-bar {
+  --empty-color: #3f3f46;
+}
+
 .dark\:hidden:is(.dark *) {
   display: none;
 }
@@ -1520,6 +1548,10 @@ html.dark .button-fundraiser-shadow {
     margin-bottom: 1rem;
   }
 
+  .max-md\:ml-0 {
+    margin-left: 0px;
+  }
+
   .max-md\:flex-wrap {
     flex-wrap: wrap;
   }
diff --git a/layouts/partials/section-fundraising-intro.html b/layouts/partials/section-fundraising-intro.html
index 2e36b42..85b82ab 100644
--- a/layouts/partials/section-fundraising-intro.html
+++ b/layouts/partials/section-fundraising-intro.html
@@ -4,12 +4,17 @@
   <section class="container mx-auto px-6 py-6 min-h-[min(90vh,30rem)] grid place-items-center">
     <div class="flex justify-center items-center mx-auto max-md:flex-wrap-reverse">
       <img src="/images/fundraising-star.webp" class="aspect-auto h-[20rem] invert-colors max-xl:h-[15rem] max-sm:mb-3"/>
-      <div class="max-md:text-center max-md:mb-4 max-w-[50ch]">
+      <div class="max-md:text-center max-md:mb-4 ml-2 max-md:ml-0 max-w-[50ch]">
         <p style="font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.1">Provozujeme nástroje pro komunikaci a sdílení</p>
         <br />
         <p style="font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1"><strong>Bez reklam, bez dohledu, pro všechny</strong></p>
         <br />
         <p style="font-size: clamp(1.25rem, 4vw, 1.5rem); line-height: 1.1">Teď potřebujeme vaší podporu</p>
+        <br />
+        <div class="text-right w-min mx-auto">
+          <div class="fundraiser-progress-bar w-full"></div>
+          <p>vybráno 4 500 Kč z 180 000 Kč</p>
+        </div>
       </div>
     </div>
     <div class="flex justify-center max-md:flex-wrap gap-3">