From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 10 Oct 2023 18:15:38 +0000 (+0200)
Subject: wait #6388 @0.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=39409d1c41d6053f9bf4a5a044f4d5ac0bfee189;p=fluidbook-toolbox-quiz.git

wait #6388 @0.75
---

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index 5012bc9..b2cfdad 100644
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -29,6 +29,7 @@ QuizScreenIntro.prototype = {
             .to("#start", {
                 y: 0,
             }, .2)
+            .fromTo('#credits',{y:50}, {y: 0, duration: .5}, .3)
             .from(title.words, {
                 opacity: 0, y: 20, duration: .2, stagger: 0.05
             }, .5)
@@ -36,7 +37,7 @@ QuizScreenIntro.prototype = {
                 opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
                     amount: 0.2
                 }
-            }, .7)
+            }, .7);
     },
 
     resize: function (ww, hh) {
diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index d4ccbd2..ac1a802 100644
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -7,7 +7,7 @@ header
 
 .title-header
     height: 80px
-    +flex-config(space-between,false,row,center)
+    +flex-config(space-between, false, row, center)
     margin-top: -24px
     transform: translateY(-100%)
 
@@ -16,13 +16,17 @@ header
 
 .header-question
     text-align: center
+
     *
         opacity: 0
+
     .abovetitle
         +font-size(16)
+
     .progress-container
         margin: 6px 0 16px
-        +flex-config(center,false,false,center)
+        +flex-config(center, false, false, center)
+
     .progress-item
         width: 16px
         height: 4px
@@ -30,14 +34,19 @@ header
         +opacity(.16)
         display: inline-flex
         transition: background-color .3s
+
         &:not(:last-of-type)
             margin-right: 7px
+
         &.active
             background-color: $texts-color
-        &.ok,&.neutral
+
+        &.ok, &.neutral
             background-color: $ok-color
+
         &.nok
             background-color: $nok-color
+
     h1
         height: auto
         +font-size(24)
@@ -49,7 +58,8 @@ header
     width: 100%
     z-index: 2
     +padding-container()
-    +flex-config(space-between,false,row,center)
+    +flex-config(space-between, false, row, center)
+
     .btn.primary
         width: 100%
         max-width: 450px
@@ -57,6 +67,7 @@ header
         left: 50%
         bottom: 24px
         transform: translateX(-50%)
+
         &#start
             transform: translate(-50%, calc(100% + 24px))
 
@@ -67,17 +78,34 @@ header
     .header-question
         .abovetitle
             +font-size(14)
+
         .progress-container
             margin: 4px 0 16px
+
         h1
             +font-size(20)
             height: 84px
 
     .footer
-        +flex-config(center,false,row,center)
+        +flex-config(center, false, row, center)
 
     .btn.primary
         position: relative
         left: 0
         bottom: 0
         transform: none
+
+
+#credits
+    font-size: 12px
+    position: absolute
+    bottom: 20px
+    right: 20px
+    color: $texts-color
+    opacity: 0.7
+    z-index: 100
+
+    a
+        text-decoration: none
+        color: inherit
+
diff --git a/views/index.blade.php b/views/index.blade.php
index cb5f5ac..c16b7ee 100644
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -25,8 +25,10 @@
         @endforeach
         @include('screens.outro', ['data'=> $data])
         <div id="instantReviewAnimation"></div>
+        <div id="credits">{!! $data->credits !!}</div>
     </div>
 </div>
+
 <script src="js/manifest.js"></script>
 <script src="js/quiz.js"></script>
 <script src="js/vendor.js"></script>