From eed4f1c09fe1dcc31fba7b396bc0aedf31bc5d15 Mon Sep 17 00:00:00 2001
From: vincent porte <vincent@neuralia.co>
Date: Wed, 20 Sep 2023 14:20:48 +0200
Subject: [PATCH] wip

---
 .../static/stylesheets/itou_communaute.scss   | 60 ++++++++++++++++++-
 .../templates/pages/statistiques.html         | 48 +++++++++++++++
 2 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/lacommunaute/static/stylesheets/itou_communaute.scss b/lacommunaute/static/stylesheets/itou_communaute.scss
index 434e094fe..6df59e1e5 100644
--- a/lacommunaute/static/stylesheets/itou_communaute.scss
+++ b/lacommunaute/static/stylesheets/itou_communaute.scss
@@ -40,7 +40,7 @@
     border-radius: 50%;
     overflow: hidden;
 
-    > img {
+    >img {
       width: 100%;
       height: auto;
       object-fit: cover;
@@ -154,7 +154,7 @@ span.highlighted {
 .input-group-rounded-pill {
   border-radius: 50rem !important;
 
-  > input {
+  >input {
     border-top-left-radius: 50rem !important;
     border-bottom-left-radius: 50rem !important;
   }
@@ -165,3 +165,59 @@ span.highlighted {
     border-bottom-right-radius: 50rem !important;
   }
 }
+
+.funnel {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  color: #fff;
+  background-color: #fff;
+
+  li {
+    /*padding: 10px 5px;*/
+    margin: 0;
+    background-color: #409ca9;
+    margin-bottom: 5px;
+    position: relative;
+    overflow: hidden;
+    height: 90px;
+  }
+
+
+  li:before,
+  li:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    height: 0;
+    border-bottom: 90px solid #fff;
+  }
+
+  li:before {
+    left: 0;
+    border-right: 27px solid transparent;
+    border-left: 0;
+  }
+
+  li:after {
+    right: 0;
+    border-left: 27px solid transparent;
+    border-right: 0;
+  }
+
+  li:nth-child(1):before,
+  li:nth-child(1):after {
+    width: 25px;
+  }
+
+  li:nth-child(2):before,
+  li:nth-child(2):after {
+    width: 55px;
+  }
+
+  li:nth-child(3):before,
+  li:nth-child(3):after {
+    width: 84px;
+  }
+}
diff --git a/lacommunaute/templates/pages/statistiques.html b/lacommunaute/templates/pages/statistiques.html
index 3158a82c6..cbdfa8710 100644
--- a/lacommunaute/templates/pages/statistiques.html
+++ b/lacommunaute/templates/pages/statistiques.html
@@ -17,6 +17,54 @@ <h1 class="s-title-01__title h1"><strong>Statistiques</strong></h1>
         </div>
     </section>
 
+    <section class="s-section">
+        <div class="s-section__container container">
+            <div class="s-section__row row">
+                <div class="s-section__col col-12">
+                    <div class="card c-card mb-3 mb-md-5">
+                        <div class="card-header">
+                            <h2>crash</h2>
+
+                        </div>
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-12 col-lg-6">
+
+
+                                    <ul class="funnel">
+                                        <li>
+                                            <div>Utilisateurs</div>
+                                            <div>12,345</div>
+                                        </li>
+                                        <li>
+                                            <div>Utilisateurs actifs</div>
+                                            <div>2,345</div>
+                                        </li>
+                                        <li>
+                                            <div>Utilisateurs engagés</div>
+                                            <div>45</div>
+                                        </li>
+                                    </ul>
+
+
+
+                                </div>
+                                <div class="col-12 col-lg-6">
+                                    text
+                                </div>
+                            </div>
+                        </div>
+                        <div class="card-footer">
+                            <small class="text-muted">
+                                Période : xxxxx 2023
+                            </small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
     <section class="s-section">
         <div class="s-section__container container">
             <div class="s-section__row row">