data-primals-engine 1.0.10 → 1.1.0

package/client/src/TutorialsMenu.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useTutorials } from './hooks/useTutorials.jsx';
+import { useAuthContext } from './contexts/AuthContext.jsx';
+import { useTranslation } from 'react-i18next';
+import { FaCheckCircle, FaHourglassHalf, FaPlayCircle, FaBullseye } from 'react-icons/fa'; // Importer FaBullseye
+import './TutorialsMenu.scss';
+
+const TutorialsMenu = () => {
+    const { t } = useTranslation();
+    const { me } = useAuthContext();
+    // On récupère les nouvelles données du hook
+    const { tutorials, isLoadingTutorials, startTutorial, activeTutorialState, activeTutorialDetails } = useTutorials();
+
+    if (isLoadingTutorials) {
+        return <div>{t('loading')}...</div>;
+    }
+
+    if (!tutorials || tutorials.length === 0) {
+        return <p>{t('tutorial.none_available', 'Aucun tutoriel disponible pour le moment.')}</p>;
+    }
+
+    return (
+        <ul className="tutorials-list">
+            {tutorials.map((tutorial) => {
+                const isCompleted = me?.completedTutorials?.includes(tutorial.id);
+                const isInProgress = activeTutorialState?.id === tutorial.id;
+
+                let statusBadge;
+                if (isCompleted) {
+                    statusBadge = <span className="status-badge completed"><FaCheckCircle /> {t('tutorial.status.completed', 'Terminé')}</span>;
+                } else if (isInProgress) {
+                    statusBadge = <span className="status-badge in-progress"><FaHourglassHalf /> {t('tutorial.status.in_progress', 'En cours')}</span>;
+                }
+
+                return (
+                    <li key={tutorial.id} className={`tutorial-item ${isCompleted ? 'is-completed' : ''} ${isInProgress ? 'is-in-progress' : ''}`}>
+                        <div className="tutorial-header">
+                            <div className="tutorial-info">
+                                <h4>{t(`tutorial.${tutorial.id}.name`, tutorial.name)}</h4>
+                                <p>{t(`tutorial.${tutorial.id}.description`, tutorial.description)}</p>
+                            </div>
+                            <div className="tutorial-actions">
+                                {statusBadge}
+                                {!isCompleted && (
+                                    <button
+                                        className="start-button"
+                                        onClick={() => startTutorial(tutorial.id)}
+                                        disabled={isInProgress}
+                                    >
+                                        <FaPlayCircle /> {isInProgress ? t('tutorial.restart', 'Reprendre') : t('tutorial.start', 'Démarrer')}
+                                    </button>
+                                )}
+                            </div>
+                        </div>
+
+                        {/* --- NOUVELLE SECTION POUR LES DÉTAILS DE L'ÉTAPE EN COURS --- */}
+                        {isInProgress && activeTutorialDetails && (
+                            <div className="tutorial-progress-details">
+                                <h5>
+                                    <FaBullseye />
+                                    {t('tutorial.objective_title', 'Objectif de l\'étape')} ({activeTutorialState.stage}/{activeTutorialDetails.totalStages})
+                                </h5>
+                                <p className="stage-description">{t(`tutorial.${tutorial.id}.stage.${activeTutorialDetails.currentStage.stage}.description`, activeTutorialDetails.currentStage.description || activeTutorialDetails.currentStage.name)}</p>
+
+                                {/* --- AJOUT DE LA BARRE DE PROGRESSION --- */}
+                                <div className="progress-bar-container">
+                                    <div
+                                        className="progress-bar-fill"
+                                        style={{ width: `${(activeTutorialState.stage / activeTutorialDetails.totalStages) * 100}%` }}
+                                    ></div>
+                                </div>
+
+                                <p className="stage-condition">{t('tutorial.condition.base', `Filtre de réussite :`)}<pre>{JSON.stringify(activeTutorialDetails.currentStage.completionCondition, null, 2)}</pre></p>
+                            </div>
+                        )}
+                    </li>
+                );
+            })}
+        </ul>
+    );
+};
+
+export default TutorialsMenu;

package/client/src/TutorialsMenu.scss

@@ -0,0 +1,217 @@
+// --- Variables de Design ---
+// Palette de couleurs moderne et accessible pour une personnalisation facile.
+$color-bg-light: #f8f9fa; // Fond général très clair
+$color-item-bg: #ffffff; // Fond des cartes de tutoriel
+$color-border: #e9ecef; // Bordures subtiles
+$color-shadow: rgba(0, 0, 0, 0.05); // Ombre portée douce
+
+$color-text-primary: #212529; // Titres et textes importants
+$color-text-secondary: #6c757d; // Descriptions et textes secondaires
+$color-text-tertiary: #8a949e; // Conditions et textes moins importants
+
+// Couleurs d'accentuation pour les états
+$color-accent-primary: #007bff; // Bleu pour les boutons d'action
+$color-accent-primary-hover: #0056b3;
+
+$color-inprogress-bg: #fff3cd; // Jaune doux pour "en cours"
+$color-inprogress-border: #ffeeba;
+$color-inprogress-text: #856404;
+$color-inprogress-accent: #ffc107; // Jaune plus vif pour les accents
+
+$color-completed-bg: #e2f0d9; // Vert doux pour "terminé"
+$color-completed-border: #d4edda;
+$color-completed-text: #155724;
+$color-completed-accent: #28a745; // Vert plus vif
+
+// --- Styles Généraux ---
+.tutorials-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem; // Espacement plus généreux entre les items
+
+  .tutorial-item {
+    background-color: $color-item-bg;
+    border: 1px solid $color-border;
+    z-index: -1;
+    border-radius: 12px; // Coins plus arrondis pour un look moderne
+    box-shadow: 0 4px 12px $color-shadow;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column; // Les sections (header, détails) sont empilées
+    gap: 1rem;
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+
+    &:hover {
+      transform: translateY(-3px); // Effet de lévitation au survol
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+    }
+
+    // --- Header du Tutoriel ---
+    .tutorial-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start; // Aligner au début pour les descriptions longues
+      gap: 1rem;
+
+      .tutorial-info {
+        flex-grow: 1;
+        h4 {
+          margin: 0 0 0.5rem 0;
+          font-size: 1.2rem;
+          font-weight: 600;
+          color: $color-text-primary;
+        }
+        p {
+          margin: 0;
+          font-size: 0.95rem;
+          color: $color-text-secondary;
+          line-height: 1.5;
+        }
+      }
+
+      .tutorial-actions {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 0.75rem;
+        min-width: 140px;
+        text-align: right;
+
+        .status-badge {
+          font-size: 0.8rem;
+          font-weight: 600;
+          padding: 0.3rem 0.8rem;
+          border-radius: 16px;
+          display: inline-flex;
+          align-items: center;
+          gap: 0.4rem;
+          text-transform: uppercase;
+          letter-spacing: 0.5px;
+        }
+
+        .start-button {
+          background-color: $color-accent-primary;
+          color: white;
+          border: none;
+          padding: 0.6rem 1.2rem;
+          border-radius: 8px;
+          cursor: pointer;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          transition: background-color 0.2s, transform 0.1s;
+
+          &:hover:not(:disabled) {
+            background-color: $color-accent-primary-hover;
+            transform: scale(1.03);
+          }
+
+          &:disabled {
+            background-color: #a0aec0;
+            cursor: not-allowed;
+            opacity: 0.7;
+          }
+        }
+      }
+    }
+
+    // --- Section de Progression (pour l'étape en cours) ---
+    .tutorial-progress-details {
+      border-top: 1px solid $color-border;
+      padding-top: 1.25rem;
+      margin-top: 0.5rem;
+      animation: fadeIn 0.5s ease-in-out; // Animation d'apparition
+
+      h5 {
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: $color-inprogress-text;
+        margin: 0 0 1rem 0;
+
+        svg {
+          color: $color-inprogress-accent;
+        }
+      }
+
+      .stage-description {
+        font-size: 1rem;
+        color: $color-text-secondary;
+        margin-bottom: 0.75rem;
+        font-style: italic;
+      }
+
+      .stage-condition {
+        font-size: 0.9rem;
+        color: $color-text-tertiary;
+        background-color: #f8f9fa;
+        padding: 0.75rem 1rem;
+        border-radius: 8px;
+        border-left: 4px solid $color-inprogress-accent;
+      }
+
+      // Barre de progression pour les étapes
+      .progress-bar-container {
+        background-color: #e9ecef;
+        border-radius: 10px;
+        height: 10px;
+        width: 100%;
+        overflow: hidden;
+        margin-top: 1rem;
+
+        .progress-bar-fill {
+          height: 100%;
+          background: linear-gradient(90deg, $color-inprogress-accent, lighten($color-inprogress-accent, 15%));
+          border-radius: 10px;
+          transition: width 0.5s ease-out;
+        }
+      }
+    }
+
+    // --- Modificateurs de Statut ---
+    &.is-in-progress {
+      border-color: $color-inprogress-accent;
+      background-color: lighten($color-inprogress-bg, 5%);
+
+      .tutorial-actions .status-badge {
+        background-color: $color-inprogress-bg;
+        color: $color-inprogress-text;
+        border: 1px solid $color-inprogress-border;
+      }
+    }
+
+    &.is-completed {
+      background-color: $color-bg-light;
+      opacity: 0.8;
+
+      .tutorial-info h4 {
+        text-decoration: line-through;
+        color: $color-text-secondary;
+      }
+
+      .tutorial-actions .status-badge {
+        background-color: $color-completed-bg;
+        color: $color-completed-text;
+        border: 1px solid $color-completed-border;
+      }
+    }
+  }
+}
+
+// Animation d'apparition pour la section des détails
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/client/src/TutorialsRewardModal.jsx

@@ -0,0 +1,65 @@
+// Fichier : client/src/TutorialRewardModal.jsx
+
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { FaAward, FaStar } from 'react-icons/fa';
+import Button from './Button.jsx';
+import { useUI } from './contexts/UIContext.jsx';
+
+// Petite fonction utilitaire pour choisir la bonne icône en fonction du type de récompense
+const getRewardIcon = (reward) => {
+    switch (reward.type) {
+        case 'achievement':
+            // L'icône 'achievement' est définie dans le CSS, mais on utilise FaAward comme base.
+            return <FaAward className="reward-icon achievement" />;
+        case 'xp':
+            // L'icône 'xp' est définie dans le CSS, mais on utilise FaStar comme base.
+            return <FaStar className="reward-icon xp" />;
+        default:
+            return null;
+    }
+};
+
+const TutorialRewardModal = ({ rewards = [] }) => {
+    const { t } = useTranslation();
+    const { setIsModalOpen } = useUI();
+
+    return (
+        <div className="tutorial-reward-modal">
+            <h2>{t('tutorial.completed.title', 'Tutoriel Terminé !')}</h2>
+            <p>{t('tutorial.completed.congrats', 'Félicitations ! Vous avez obtenu les récompenses suivantes :')}</p>
+
+            <ul className="reward-list">
+                {rewards.map((reward, index) => (
+                    <li key={index} className="reward-item">
+                        {getRewardIcon(reward)}
+                        <div className="reward-details">
+                            {reward.type === 'achievement' && (
+                                <>
+                                    <span className="reward-type">{t('reward.type.achievement', 'Succès débloqué')}</span>
+                                    <span className="reward-name">{reward.name}</span>
+                                </>
+                            )}
+                            {reward.type === 'xp' && (
+                                <>
+                                    <span className="reward-type">{t('reward.type.xp', 'Expérience gagnée')}</span>
+                                    <span className="reward-name">
+                                        {t('reward.xp.details', '{{amount}} XP en {{skill}}', { amount: reward.amount, skill: reward.skill })}
+                                    </span>
+                                </>
+                            )}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+
+            <div className="actions center">
+                <Button onClick={() => setIsModalOpen(false)} className="btn-primary">
+                    {t('btns.great', 'Génial !')}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default TutorialRewardModal;

package/client/src/Utils.jsx

@@ -0,0 +1,78 @@
+import {Children, cloneElement, isValidElement, useCallback, useRef} from "react";
+
+const useRefs = () => {
+    const refs = useRef({});
+
+    const register = useCallback((refname) => ref => {
+        refs.current[refname] = ref;
+    }, []);
+
+    return [refs, register];
+}
+
+export {useRefs};
+
+const formatHtml = (text) => {
+    var map = {
+        '&': '&',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    return text.replace(/[&<>"']/g, function (m) {
+        return map[m];
+    });
+}
+
+export {formatHtml};
+
+const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+export {clamp};
+
+
+export const data_paginate = (datas, page, elementsPerPage) => {
+    if (elementsPerPage && page)
+        return datas.slice((page - 1) * elementsPerPage, page * elementsPerPage);
+    return datas;
+}
+export const data_filter = (datas, filter, query) => {
+    // Filter data
+    let filteredDatas = datas;
+    if (filter) {
+        filteredDatas = filteredDatas.filter(filter);
+    }
+    if (typeof (query) === 'string') {
+        filteredDatas = filteredDatas.filter(f => {
+            let inc = false;
+            let keys = Object.keys(f);
+            for (let i = 0; i < keys.length; ++i) {
+                if (typeof (f[keys[i]]) === 'object')
+                    continue;
+                if ((f[keys[i]] + '').includes(query)) {
+                    inc = true;
+                    break;
+                }
+            }
+            return inc;
+        })
+    }
+    return filteredDatas;
+}
+
+const recursiveMap = (children, fn) => {
+    return Children.map(children, (child, index) => {
+        if (!isValidElement(child)) {
+            return child;
+        }
+
+        if (child.props.children) {
+            child = cloneElement(child, {
+                children: recursiveMap(child.props.children, fn)
+            });
+        }
+
+        return fn(child, index);
+    });
+}
+export {recursiveMap};

package/client/src/ViewSwitcher.jsx

@@ -0,0 +1,54 @@
+// client/src/ViewSwitcher.jsx
+
+import React from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+import { FaTable, FaRegCalendarAlt, FaColumns, FaCog } from 'react-icons/fa';
+import Button from './Button.jsx';
+import { Tooltip } from 'react-tooltip';
+
+import "./ViewSwitcher.scss"
+const viewOptions = [
+    { id: 'table', icon: <FaTable />, labelKey: 'views.table' },
+    { id: 'kanban', icon: <FaColumns />, labelKey: 'views.kanban' },
+    //{ id: 'calendar', icon: <FaRegCalendarAlt />, labelKey: 'views.calendar' },
+];
+
+const ViewSwitcher = ({ currentView, onViewChange, configuredViews, onConfigureView }) => {
+    const { t } = useTranslation();
+
+    return (
+        <div className="view-switcher flex items-center gap-1 p-1 bg-gray-200 rounded-md">
+            {viewOptions.map(view => {
+                const isConfigured = view.id === 'table' || configuredViews[view.id];
+                const isActive = currentView === view.id;
+
+                return (
+                    <div key={view.id} className="relative flex items-center">
+                        <Button
+                            onClick={() => onViewChange(view.id)}
+                            className={`btn-view ${isActive ? 'active' : ''}`}
+                            title={t(view.labelKey, view.id)}
+                        >
+                            {view.icon}
+                            <span className="hidden md:inline-block ml-2">{t(view.labelKey, view.id)}</span>
+                        </Button>
+                        {/* AJOUT : Bouton de configuration pour la vue active */}
+                        {isActive && view.id !== 'table' && (
+                            <Button
+                                onClick={onConfigureView}
+                                className="btn-view-settings"
+                                data-tooltip-id="view-settings-tooltip"
+                                data-tooltip-content={t('views.configure', { view: t(view.labelKey) })}
+                            >
+                                <FaCog />
+                            </Button>
+                        )}
+                    </div>
+                );
+            })}
+            <Tooltip id="view-settings-tooltip" />
+        </div>
+    );
+};
+
+export default ViewSwitcher;

package/client/src/ViewSwitcher.scss

@@ -0,0 +1,74 @@
+/* client/src/ViewSwitcher.scss */
+
+// Variables pour une maintenance facile (à adapter au thème de votre application)
+$vs-primary-color: #0d6efd;
+$vs-background: #e9ecef;
+$vs-border-color: #dee2e6;
+$vs-text-color: #495057;
+$vs-white: #ffffff;
+$vs-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
+
+.view-switcher {
+  display: inline-flex;
+  align-items: center;
+  background-color: $vs-background;
+  border-radius: 8px;
+  padding: 4px;
+  border: 1px solid $vs-border-color;
+
+  // Chaque option (bouton + potentiellement le bouton de configuration) est dans un wrapper
+  .view-option-wrapper {
+    display: flex;
+    align-items: center;
+    border-radius: 6px;
+    // La magie de la transition pour un effet fluide
+    transition: background-color 0.25s ease, box-shadow 0.25s ease;
+
+    // Le style du wrapper quand il est actif
+    &.is-active {
+      background-color: $vs-white;
+      box-shadow: $vs-shadow;
+    }
+  }
+
+  .btn-view {
+    background-color: transparent;
+    border: none;
+    padding: 6px 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    color: $vs-text-color;
+    font-weight: 500;
+    transition: color 0.2s ease-in-out;
+    white-space: nowrap; // Emphe le texte de passer à la ligne
+
+    .md\:inline-block {
+      font-size: 0.9rem;
+    }
+  }
+
+  // Quand le wrapper est actif, le bouton principal change de couleur
+  .is-active .btn-view {
+    color: $vs-primary-color;
+    font-weight: 600;
+  }
+
+  // Le bouton de configuration (roue crantée)
+  .btn-view-settings {
+    background-color: transparent;
+    border: none;
+    // On le sépare visuellement
+    border-left: 1px solid $vs-border-color;
+    padding: 6px 10px;
+    margin-left: -4px; // Léger ajustement pour l'harmonie
+    color: #6c757d; // Couleur discrète
+    cursor: pointer;
+    transition: color 0.2s ease-in-out;
+
+    &:hover {
+      color: $vs-primary-color;
+    }
+  }
+}

package/client/src/Webpage.jsx

@@ -0,0 +1,69 @@
+import React, {useState, useEffect, useMemo, useContext} from 'react';
+
+import "./App.scss";
+import {useQuery} from "react-query";
+import {useLocation} from "react-router-dom";
+import {Helmet} from "react-helmet";
+import {useTranslation} from "react-i18next";
+import {getObjectHash} from "data-primals-engine/core";
+import {useData} from "./hooks/data.js";
+import {useAuthContext} from "./contexts/AuthContext.jsx";
+import {getUserHash, getUserId} from "data-primals-engine/data";
+
+
+function Webpage({children}) {
+
+    const { me } = useAuthContext();
+    const loc = useLocation();
+    const webpageModel = 'webpage';
+    const contentModel = 'content';
+
+    const id = getUserId(me);
+    const loco = loc.pathname.replace('/user/'+id+'/', '/');
+    const {data: webpages, isFetched} = useData(webpageModel, {'path':'^'+loco+'$', 'published': true},{ staleTime: 50000 });
+    const webpage = webpages?.[0];
+
+    const {data: contents } = useData(contentModel, {'$and': [{'webpage': webpage?._id, 'published': true}]},{ staleTime: 30000, enabled: !!webpage });
+
+    const { i18n, t } = useTranslation();
+    const lang = (i18n.resolvedLanguage || i18n.language).split(/[-_]/)?.[0];
+
+    return <>
+        {webpage && <>
+            <Helmet htmlAttributes={{ lang }} />
+            <Helmet>
+                <title>{t(webpage.title)}</title>
+                <meta name="description" content={webpage.description}/>
+                <meta property="og:description" content={webpage.description}/>
+                <meta property="twitter:description" content={webpage.description}/>
+                <meta property="og:title" content={t(webpage.title)}/>
+                <meta property="twitter:title" content={t(webpage.title)}/>
+                <meta property="og:image" content={webpage.image}/>
+                <meta property="twitter:image" content={webpage.image}/>
+            </Helmet>
+            <h1>{webpage.title}</h1>
+            <div className="content" dangerouslySetInnerHTML={{__html: webpage.text}}></div>
+            {(contents || []).map(content => {
+                return <div className="content">
+                        {content.title && (<Helmet><title>{t(content.title)}</title>
+                            <meta property="og:title" content={t(webpage.title)}/>
+                    <meta property="twitter:title" content={t(webpage.title)}/></Helmet>)}
+                        {content.description && (<Helmet><meta name="description" content={content.description}/>
+                        <meta property="og:description" content={content.description}/>
+                        <meta property="twitter:description" content={content.description}/></Helmet>)}
+                        {content.image && (<Helmet><meta property="og:image" content={content.image}/>
+                        <meta property="twitter:image" content={content.image}/></Helmet>)}
+                    <article>
+                        <h2>{t(content.title)}</h2>
+                        <p className="subtitle"></p>
+                        <p dangerouslySetInnerHTML={{ __html: content.text }}></p>
+                    </article>
+                </div>
+            })}
+        </>
+        }
+        {!webpage && isFetched && (<Helmet><title>Page non trouvée</title></Helmet>)}
+    </>
+}
+
+export default Webpage;

package/client/src/_variables.scss

@@ -0,0 +1,21 @@
+// Variables de couleurs
+$primary-color: #3498db;
+$secondary-color: #2ecc71;
+$primary-color-darker: darken($primary-color, 10%); // Un peu plus foncé pour hover/active
+$light-color: #ecf0f1;
+$dark-color: #333;
+$input-background-color: #f8f8f8; // Gris très clair
+$input-border-color: #ddd; // Gris clair
+$input-focus-border-color: #4CAF50; // Vert clair (couleur d'accentuation)
+
+$light-gray: #f8f8f8;
+$medium-gray: #ddd;
+$dark-gray: #555;
+
+$danger-color: #ff1e00;
+
+$shadow-color: rgba(0, 0, 0, 0.15);
+$shadow-color-hover: rgba(0, 0, 0, 0.25);
+
+
+// Appliquer cette palette aux différents éléments

package/client/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>