wip

gip-inclusion · Sep 21, 2023 · eed4f1c · eed4f1c
1 parent 106a056
commit eed4f1c
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 2 deletions.
diff --git 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
@@ -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">