Added donations to the Help Page

CAsocialu · Nov 13, 2024 · aaf0a76 · aaf0a76
1 parent 3e2d389
commit aaf0a76
Show file tree

Hide file tree

Showing 25 changed files with 634 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -11,9 +11,9 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",
+    "glob": "^11.0.0",
     "puppeteer": "^23.7.1",
-    "sharp": "^0.33.5",
-    "glob": "^11.0.0"
+    "sharp": "^0.33.5"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/pre-render.js b/pre-render.js
@@ -28,7 +28,8 @@ const routes = [
     {
         path: '/pomoc',
         title: 'Chci pomoci · ČSA',
-        canonical: 'https://www.ceskastranaasocialu.cz/pomoc'
+        canonical: 'https://www.ceskastranaasocialu.cz/pomoc',
+        image: '/assets/bannerDEJTENÁMVAŠEVŠECHNYPRACHY.png'
     },
     {
         path: '/source',
@@ -55,7 +56,7 @@ async function prerender() {
         await page.waitForSelector('#root');
 
         // Inject meta tags
-        await page.evaluate(({ title, description, canonical }) => {
+        await page.evaluate(({ title, description, canonical, image }) => {
             // Set title
             document.title = title;
 
@@ -72,7 +73,7 @@ async function prerender() {
             const ogTags = {
                 'og:title': title,
                 'og:description': description,
-                'og:image': '/assets/banner.png',
+                'og:image': image || '/assets/banner.png',
                 'og:url': canonical,
                 'og:type': 'website'
             };
@@ -91,7 +92,7 @@ async function prerender() {
             const TwitterTags = {
                 'twitter:title': title,
                 'twitter:description': description,
-                'twitter:image': 'https://ceskastranaasocialu.cz/assets/banner.png',
+                'twitter:image': image || '/assets/banner.png',
                 'twitter:site': '@CASocialu',
                 'twitter:card': 'summary_large_image'
             };

diff --git a/public/assets/bannerDEJTENÁMVAŠEVŠECHNYPRACHY.png b/public/assets/bannerDEJTENÁMVAŠEVŠECHNYPRACHY.png
diff --git a/public/index.html b/public/index.html
@@ -41,7 +41,8 @@
             https://fonts.gstatic.com 
             https://deadcode.is-a.dev;
         img-src 'self' data: blob:;
-        connect-src 'self' blob:;
+        connect-src 'self' blob:
+            https://api.allorigins.win/;
         base-uri 'self';
         form-action 'self';
         object-src 'none';

diff --git a/src/components/Carousel/Carousel.js b/src/components/Carousel/Carousel.js
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import "./Carousel.css"
 
 export default function Carousel(props) {
-    const { children, show } = props;
+    const { children, show = 1 } = props;
     const [currentIndex, setCurrentIndex] = useState(0);
     const [length, setLength] = useState(children.filter(child => child !== false).length);
     const [touchPosition, setTouchPosition] = useState(null);
@@ -39,6 +39,7 @@ export default function Carousel(props) {
     }
 
     const next = () => {
+        console.log('boop!')
         if (currentIndex < (length - show)) {
             setCurrentIndex(prevState => prevState + 1);
         } else {
@@ -47,6 +48,7 @@ export default function Carousel(props) {
     }
 
     const prev = () => {
+        console.log('bap!')
         setAutoScrollEnabled(false);
         if (currentIndex > 0) {
             setCurrentIndex(prevState => prevState - 1);

diff --git a/src/components/StartovacPanel/StartovacPanel.css b/src/components/StartovacPanel/StartovacPanel.css
@@ -0,0 +1,120 @@
+.startovac-panel {
+    background: #fff;
+    border-radius: 8px;
+    padding: 24px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    margin: 0;
+    color: color-mix(in srgb, darkslateblue, black);
+    & h2 {
+        margin-top: 0;
+    }
+}
+
+.project-stats {
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.progress-header {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    margin-bottom: 8px;
+}
+
+.progress-header strong {
+    font-size: 1.5em;
+    color: color-mix(in srgb, darkslateblue, black);
+}
+
+.progress-bar {
+    width: 100%;
+    height: 20px;
+    background: #eee;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 20px;
+    position: relative;
+}
+
+.progress {
+    height: 100%;
+    background: var(--asocial-green);
+    transition: width 0.3s ease;
+    font-size: 12px;
+    text-align: center;
+    color: white;
+    line-height: 20px;
+    position: absolute;
+}
+
+.progress.overflow {
+    background: var(--asocial-purple, #9b59b6);
+    transition: width 0.3s ease;
+    transform: none;
+}
+
+.stats-grid {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 20px;
+    & > .stat-item {
+        flex: 1;
+    }
+    & > .stat-item:nth-child(1) {
+        text-align: left;
+    }
+    & > .stat-item:nth-child(2) {
+        text-align: center;
+    }
+    & > .stat-item:nth-child(3) {
+        text-align: right;
+    }
+}
+
+@media screen and (max-width: 570px) {
+    .stats-grid {
+        grid-template-columns: repeat(1, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+    }
+
+    .progress-header {
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        & strong {
+            font-size: 1.125em;
+        }
+    }
+}
+
+.stat-item strong {
+    display: block;
+    font-size: 1.25em;
+    color: color-mix(in srgb, darkslateblue, black);
+}
+
+.stat-item span {
+    font-size: 0.9em;
+    color: #7f8c8d;
+}
+
+.contribute-button {
+    display: block;
+    width: calc(100% - 24px);
+    padding: 12px;
+    background: var(--asocial-green);
+    color: white !important;
+    text-align: center;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: bold;
+    transition: background-color 0.2s;
+}
+
+.contribute-button:hover {
+    background: var(--asocial-green-dark);
+}