[taler-www] 31/42: UC: Added event section based on carousel; Added placeholder for deliverables

[gnunet]

This is an automated email from the git hooks/post-receive script.

andreas-habegger pushed a commit to branch master
in repository www.

commit e53b9bfa5f905db56e7ce99887d6626c69aa4632
Author: Andreas HABEGGER <andreas.habegger@bfh.ch>
AuthorDate: Tue Nov 21 02:07:16 2023 +0100

    UC: Added event section based on carousel; Added placeholder for 
deliverables
---
 static/styles.css           | 112 +++++++++++++++++++++-
 template/consortium.html.j2 | 224 +++++++++++++++++++++++++++++---------------
 2 files changed, 262 insertions(+), 74 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index fcff74f..12d702c 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -1,3 +1,4 @@
+
 .lang-slector {
        float: right;
        padding-top: 2mm;
@@ -275,4 +276,113 @@ ul.timeline > li:before {
   line-height: 1.5rem;
   height: 4.5rem;
   min-height: 4.5rem;
-}
\ No newline at end of file
+}
+
+
+.consortium h4 {
+       color: #555;
+       text-align: left;
+       text-transform: uppercase;
+       font-weight: bold;
+       position: relative;
+       margin: 30px 0 60px;
+  padding: 5px;
+}
+
+.consortium h4::after {
+       content: "";
+       width: 170px;
+       position: absolute;
+  text-align: left;
+  height: 13%;
+  bottom: 0;
+  left: 0.2em;
+  background: rgba(170, 57, 57, 0.3);
+  z-index: -1;
+}
+
+.announce .col-center {
+       margin: 0 auto;
+       float: none !important;
+}
+
+.announce .carousel {
+       padding: 0 70px;
+}
+
+.announce .carousel .carousel-item {
+       color: #999;
+       font-size: 14px;
+       text-align: center;
+       overflow: hidden;
+       min-height: 290px;
+}
+
+.announce .carousel .carousel-item .img-box {
+       width: 135px;
+       height: 135px;
+       margin: 0 auto;
+       padding: 5px;
+       border: 1px solid #ddd;
+       border-radius: 50%;
+}
+
+.announce .carousel .img-box img {
+       width: 100%;
+       height: 100%;
+       display: block;
+       border-radius: 50%;
+}
+
+.announce .carousel .testimonial {
+       padding: 30px 0 10px;
+}
+
+.announce .carousel .overview {
+       font-style: italic;
+}
+
+.announce .carousel .overview b {
+       text-transform: uppercase;
+       color: rgba(170, 57, 57, 0.3);
+}
+
+.announce .carousel-control-prev, .announce .carousel-control-next {
+       width: 40px;
+       height: 40px;
+       margin-top: -20px;
+       top: 50%;
+       background: none;
+}
+
+.announce .carousel-control-prev i, .announce .carousel-control-next i {
+       font-size: 68px;
+       line-height: 42px;
+       position: absolute;
+       display: inline-block;
+       color: rgba(0, 0, 0, 0.8);
+       text-shadow: 0 3px 3px #e6e6e6, 0 0 0 #000;
+}
+
+.announce .carousel-indicators {
+       bottom: -40px;
+}
+
+.announce .carousel-indicators button, .announce .carousel-indicators 
button.active {
+       width: 12px;
+       height: 12px;
+       margin: 1px 3px;
+       border-radius: 50%;
+       border: none;
+}
+
+.announce .carousel-indicators button {
+       background: #999;
+       border-color: transparent;
+       box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
+}
+
+.announce .carousel-indicators button.active {
+       background: #555;
+       box-shadow: inset 0 2px 1px rgba(0,0,0,0.2);
+}
diff --git a/template/consortium.html.j2 b/template/consortium.html.j2
index 58706d7..56e34ab 100644
--- a/template/consortium.html.j2
+++ b/template/consortium.html.j2
@@ -2,83 +2,160 @@
 {% block body_content %}
 <main id="maincontent">
 
-  <div class="container">
+  <div class="container consortium">
 
     <!--Section: Content-->
     <section class="section-consortium dark-grey-text">
 
-      {# <div class="justify-content-md-left"> #}
 
-        <!-- Section heading -->
-        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Consortium")}}</h4>
-        <!-- Section description -->
+      <div class="container-xl">
 
-        <!-- Section heading -->
-        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4>
-        <div class="row">
-          <div class="col col-md-auto"></div>
+        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Events")}}</h4>
+        <div class="announce">
+          <div class="row">
+            <div class="col col-md-2 col-md-auto"></div>
+            <div class="col-md-8">
 
-          <div class="col-md-11">
-            <p class="text-muted w-responsive mx-auto mb-3">
-              {% trans %}
-              The TALER project is an initiative of Horizon Europe (Pilots for 
the Next Generation Internet) with the
-              aim of bringing the GNU Taler to market across Europe.
-              <br>
-              To make the GNU Taler accessible to European citizens, we need a 
commercially viable use of the GNU Taler
-              technology. We will achieve this through the four key project 
objectives.
-              {% endtrans %}
-            </p>
+              <div id="AnnouncCarousel" class="carousel slide" 
data-bs-ride="carousel">
+
+                <!-- Carousel indicators -->
+                <div class="carousel-indicators">
+                  <button data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="0" class="active" aria-current="true"
+                    aria-label="Slide 1"></button>
+                  <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="1"
+                    aria-label="Slide 2"></button>
+                  <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="2"
+                    aria-label="Slide 3"></button>
+                  <button type="button" data-bs-target="#AnnouncCarousel" 
data-bs-slide-to="3"
+                    aria-label="Slide 4"></button>
+                </div>
+
+
+                <!-- Wrapper for carousel items -->
+                <div class="carousel-inner">
+                  <div class="carousel-item active" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ 
url('images/7-efficient.svg') }}" alt=""></div>
+                    <p class="testimonial">Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Nam eu sem tempor,
+                      varius quam at, luctus dui. Mauris magna metus, dapibus 
nec turpis vel, semper malesuada ante.
+                      Idac bibendum scelerisque non non purus. Suspendisse 
varius nibh non aliquet.</p>
+                    <p class="overview"><b>Paula Taler</b>, Professor</p>
+                  </div>
+                  <div class="carousel-item" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ 
url('images/taler-arch-full.svg') }}" alt=""></div>
+                    <p class="testimonial">Vestibulum quis quam ut magna 
consequat faucibus. Pellentesque eget nisi a mi
+                      suscipit tincidunt. Utmtc tempus dictum risus. 
Pellentesque viverra sagittis quam at mattis.
+                      Suspendisse potenti. Aliquam sit amet gravida nibh, 
facilisis gravida odio.</p>
+                    <p class="overview"><b>Antonio Twint</b>, Web Developer</p>
+                  </div>
+                  <div class="carousel-item" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ 
url('images/6-usable.svg') }}" alt=""></div>
+                    <p class="testimonial">Phasellus vitae suscipit justo. 
Mauris pharetra feugiat ante id lacinia.
+                      Etiam faucibus mauris id tempor egestas. Duis luctus 
turpis at accumsan tincidunt. Phasellus risus
+                      risus, volutpat vel tellus ac, tincidunt fringilla 
massa. Etiam hendrerit dolor eget rutrum.</p>
+                    <p class="overview"><b>Michael Coin</b>, CEO</p>
+                  </div>
 
-            <div class="accordion" id="accordionObjectives">
-              {% for objective in conf['objectives'] %}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="heading_{{ loop.index }}">
-                  <button class="accordion-button collapsed" type="button" 
data-bs-toggle="collapse"
-                    data-bs-target="#collapse_{{ loop.index }}" 
aria-expanded="false"
-                    aria-controls="collapse_{{ loop.index }}">
-                    Objective {{ loop.index }}: {{ objective.title }}
-                  </button>
-                </h2>
-                <div id="collapse_{{ loop.index }}" class="accordion-collapse 
collapse"
-                  aria-labelledby="heading_{{ loop.index }}" 
data-bs-parent="#accordionObjectives">
-                  <div class="accordion-body text-muted w-responsive">
-                    {{ objective.text }}
+                  <div class="carousel-item" data-bs-interval="2000">
+                    <div class="img-box"><img src="{{ 
url('images/8-fault-tolerant.svg') }}" alt=""></div>
+                    <p class="testimonial">Phasellus vitae suscipit justo. 
Mauris pharetra feugiat ante id lacinia.
+                      Etiam
+                      faucibus mauris id tempor egestas. Duis luctus turpis at 
accumsan tincidunt. Phasellus risus
+                      risus,
+                      volutpat vel tellus ac, tincidunt fringilla massa. Etiam 
hendrerit dolor eget rutrum.</p>
+                    <p class="overview"><b>Michael Pay</b>, Seo Analyst</p>
                   </div>
                 </div>
+
+                {# <!-- Carousel controls -->
+                <a class="carousel-control-prev" href="#AnnouncCarousel" 
data-slide="prev">
+                  <i class="fab fa-angle-left"></i>
+                </a>
+                <a class="carousel-control-next" href="#AnnouncCarousel" 
data-slide="next">
+                  <i class="fab fa-angle-right"></i>
+                </a> #}
               </div>
-              {% endfor %}
             </div>
-            <div class="col col-md-auto"></div>
-            <p class="text-muted w-responsive mx-auto"><br></p>
-
+            <div class="col col-md-2 col-md-auto"></div>
           </div>
+        </div>
+      </div>
 
 
-          <!-- Section heading -->
-          <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4>
-
-          <div class="row mb-4">
-            <div class="col col-md-auto"></div>
-
-            <div class="col-md-11">
-              <p class="text-muted w-responsive mx-auto mb-3">
-                {% trans %}
-                TALER consortium consists of 11 partners from 8 European 
countries (the Netherlands, Belgium, France,
-                Germany, Greece, Hungary, Luxembourg and Switzerland).
-                {% endtrans %}
-              </p>
-              <p class="text-muted w-responsive mx-auto mb-3">
-                {% trans %}
-                The consortium is diverse in terms of types of institutions, 
including research (TUE) and applied
-                science
-                universities (BFH), small for-profit (CBG, TSYS, VV) and 
non-profit (PS) companies, cooperative banks
-                (GLS, MAG), a foundation (NLnet) and grassroots movements 
(ESEN, HODI).
-                {% endtrans %}
-              </p>
 
+      <h4 class="font-weight-bold pb-2 mb-4">{{ _("Deliverables")}}</h4>
+
+
+      <!-- Section heading -->
+      <h4 class="font-weight-bold pb-2 mb-4">{{ _("Project")}}</h4>
+      <div class="row">
+        <div class="col col-md-auto"></div>
+
+        <div class="col-md-11">
+          <p class="text-muted w-responsive mx-auto mb-3">
+            {% trans %}
+            The TALER project is an initiative of Horizon Europe (Pilots for 
the Next Generation Internet)
+            with the
+            aim of bringing the GNU Taler to market across Europe.
+            <br>
+            To make the GNU Taler accessible to European citizens, we need a 
commercially viable use of
+            the GNU Taler
+            technology. We will achieve this through the four key project 
objectives.
+            {% endtrans %}
+          </p>
+
+          <div class="accordion" id="accordionObjectives">
+            {% for objective in conf['objectives'] %}
+            <div class="accordion-item">
+              <h2 class="accordion-header" id="heading_{{ loop.index }}">
+                <button class="accordion-button collapsed" type="button" 
data-bs-toggle="collapse"
+                  data-bs-target="#collapse_{{ loop.index }}" 
aria-expanded="false"
+                  aria-controls="collapse_{{ loop.index }}">
+                  Objective {{ loop.index }}: {{ objective.title }}
+                </button>
+              </h2>
+              <div id="collapse_{{ loop.index }}" class="accordion-collapse 
collapse"
+                aria-labelledby="heading_{{ loop.index }}" 
data-bs-parent="#accordionObjectives">
+                <div class="accordion-body text-muted w-responsive">
+                  {{ objective.text }}
+                </div>
+              </div>
             </div>
-            <div class="col col-md-auto"></div>
+            {% endfor %}
           </div>
+          <div class="col col-md-auto"></div>
+          <p class="text-muted w-responsive mx-auto"><br></p>
+
+        </div>
+
+
+        <!-- Section heading -->
+        <h4 class="font-weight-bold pb-2 mb-4">{{ _("Partners")}}</h4>
+
+        <div class="row mb-4">
+          <div class="col col-md-auto"></div>
+
+          <div class="col-md-11">
+            <p class="text-muted w-responsive mx-auto mb-3">
+              {% trans %}
+              TALER consortium consists of 11 partners from 8 European 
countries (the Netherlands,
+              Belgium, France,
+              Germany, Greece, Hungary, Luxembourg and Switzerland).
+              {% endtrans %}
+            </p>
+            <p class="text-muted w-responsive mx-auto mb-3">
+              {% trans %}
+              The consortium is diverse in terms of types of institutions, 
including research (TUE) and
+              applied
+              science
+              universities (BFH), small for-profit (CBG, TSYS, VV) and 
non-profit (PS) companies,
+              cooperative banks
+              (GLS, MAG), a foundation (NLnet) and grassroots movements (ESEN, 
HODI).
+              {% endtrans %}
+            </p>
+
+          </div>
+          <div class="col col-md-auto"></div>
+        </div>
 
     </section>
 
@@ -95,25 +172,26 @@
           <div class="col">
             <div class="card border-0 h-100">
               <a href="{{ partner.url }}" target="_blank" rel="noopener 
noreferrer">
-                <img src="{{ url(partner.logo ) }}" height="180" 
class="card-header rounded-circle z-depth-3"
-                alt="{{ partner.id + ' avatar'}}">
+                <img src="{{ url(partner.logo) }}" height="180" 
class="card-header rounded-circle z-depth-3"
+                  alt="{{ partner.id + ' avatar'}}">
               </a>
-            <div class="card-note grey-text text-muted mt-3">The team of {{ 
partner.name }} is represented by </div>
-            <div class="card-body h-100">
-              <h5 class="card-title font-weight-bold grey-text">{{ 
partner.contact }} </h5>
-              <p class="card-text grey-text text-muted word-wrap"> {{ 
partner.role }} </p>
-            </div>
-            <div class="card-footer">
-              <small class="text-body-secondary dark-grey-text text-muted 
word-wrap"><i> {{ partner.statement }} </i></small>
+              <div class="card-note grey-text text-muted mt-3">The team of {{ 
partner.name }} is represented by </div>
+              <div class="card-body h-100">
+                <h5 class="card-title font-weight-bold grey-text">{{ 
partner.contact }} </h5>
+                <p class="card-text grey-text text-muted word-wrap"> {{ 
partner.role }} </p>
+              </div>
+              <div class="card-footer">
+                <small class="text-body-secondary dark-grey-text text-muted 
word-wrap"><i> {{ partner.statement }}
+                  </i></small>
+              </div>
             </div>
           </div>
-        </div>
 
-        {% endfor %}
+          {% endfor %}
+        </div>
       </div>
-  </div>
-  </section>
-  <!--Section: Content-->
+    </section>
+    <!--Section: Content-->
 
   </div>
 </main>

-- 
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.