WIP #4781 @11

diff --git a/public/images/splash-bg.jpg b/public/images/splash-bg.jpg
new file mode 100644 (file)
index 0000000..9898465
Binary files /dev/null and b/public/images/splash-bg.jpg differ

diff --git a/public/images/splash-illustration.png b/public/images/splash-illustration.png
new file mode 100644 (file)
index 0000000..51cfa30
Binary files /dev/null and b/public/images/splash-illustration.png differ

diff --git a/public/images/splash-text.svg b/public/images/splash-text.svg
new file mode 100644 (file)
index 0000000..92f0917
--- /dev/null
+++ b/public/images/splash-text.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="488" height="169.008" viewBox="0 0 488 169.008">
+  <g transform="translate(-634 -458)">
+    <g transform="translate(634 458)">
+      <path d="M440.921,228.832a25.741,25.741,0,0,1-4.247,14.62A28.527,28.527,0,0,1,424.6,253.46q-7.825,3.641-18.868,3.64a45.1,45.1,0,0,1-18.986-3.7A30.048,30.048,0,0,1,374.07,242.9a32.545,32.545,0,0,1-5.338-16.015h18.685q.36,7.283,4.913,11.527t13.04,4.244a23.668,23.668,0,0,0,8.313-1.334,12.818,12.818,0,0,0,5.642-3.883,9.16,9.16,0,0,0,2.063-5.943,8.094,8.094,0,0,0-3.032-6.675,19.847,19.847,0,0,0-8.617-3.518l-14.316-2.789a37.032,37.032,0,0,1-9.221-2.792,27.9,27.9,0,0,1-7.4-4.852,20.962,20.962,0,0,1-4.974-7.036,23.247,23.247,0,0,1-1.82-9.464,23.8,23.8,0,0,1,4.183-13.833,27.867,27.867,0,0,1,11.527-9.461,39.6,39.6,0,0,1,16.8-3.4A40.162,40.162,0,0,1,422,171.324a31.636,31.636,0,0,1,12.375,10.251,29.082,29.082,0,0,1,5.217,15.711H420.9a16.891,16.891,0,0,0-2.367-8.066,14.6,14.6,0,0,0-5.639-5.338,19.076,19.076,0,0,0-15.714-.365,12.085,12.085,0,0,0-4.791,4,9.772,9.772,0,0,0-1.7,5.642,7.491,7.491,0,0,0,1.638,4.913,10.628,10.628,0,0,0,4.305,3.093,30.388,30.388,0,0,0,5.824,1.7l14.924,3.035q11.524,2.3,17.534,7.823t6,15.106" transform="translate(-284.748 -167.684)"/>
+      <path d="M411.191,208.232a22.2,22.2,0,0,0,2.124,10.129,15.392,15.392,0,0,0,5.7,6.371,14.788,14.788,0,0,0,15.471,0,15.163,15.163,0,0,0,5.581-6.371,26.047,26.047,0,0,0,0-20.32,14.89,14.89,0,0,0-21.052-6.25,15.067,15.067,0,0,0-5.7,6.25,22.126,22.126,0,0,0-2.124,10.19m48.411,0a34.659,34.659,0,0,1-2.489,13.162,33.511,33.511,0,0,1-6.915,10.74,31.18,31.18,0,0,1-10.433,7.158,34.839,34.839,0,0,1-26.147,0,31.351,31.351,0,0,1-10.373-7.158,33.511,33.511,0,0,1-6.915-10.74,36.212,36.212,0,0,1,0-26.384,33.647,33.647,0,0,1,6.915-10.676,31.36,31.36,0,0,1,10.373-7.161,34.839,34.839,0,0,1,26.147,0,31.189,31.189,0,0,1,10.433,7.161,33.647,33.647,0,0,1,6.915,10.676,34.536,34.536,0,0,1,2.489,13.222" transform="translate(-229.543 -152.422)"/>
+      <path d="M458.045,239.8v-8.613a20.186,20.186,0,0,1-7.34,7.033,21.173,21.173,0,0,1-10.859,2.792,24.841,24.841,0,0,1-11.588-2.668,18.443,18.443,0,0,1-8.006-8.191q-2.854-5.517-2.853-13.894v-41.25h16.744v37.978q0,6.789,3.032,9.95a10.6,10.6,0,0,0,8.009,3.15,11,11,0,0,0,9.947-6.247,15.969,15.969,0,0,0,1.577-7.34V175.005h16.744V239.8Z" transform="translate(-177.757 -151.589)"/>
+      <path d="M456.069,208.645v31.425H439.325V175.282h15.407v12.5a26.487,26.487,0,0,1,10.437-9.89,25.047,25.047,0,0,1,14.924-2.85v16.984a41.643,41.643,0,0,0-12.56.608,14.393,14.393,0,0,0-8.431,5.034q-3.032,3.824-3.032,10.98" transform="translate(-129.554 -151.863)"/>
+      <path d="M516.443,212.966a32.709,32.709,0,0,1-5.156,15.106,30.318,30.318,0,0,1-11.1,10.129,31.859,31.859,0,0,1-15.288,3.64,30.25,30.25,0,0,1-27.359-16.379,38.7,38.7,0,0,1,0-34.518A30.71,30.71,0,0,1,468.76,179a30.337,30.337,0,0,1,16.136-4.369,31.8,31.8,0,0,1,15.349,3.64,30.028,30.028,0,0,1,10.98,10.133,34.172,34.172,0,0,1,5.217,15.1H498.726a17.607,17.607,0,0,0-2.124-7.037,13.471,13.471,0,0,0-4.67-4.974,13.776,13.776,0,0,0-14.377.422,14.805,14.805,0,0,0-5.034,6.432,27.286,27.286,0,0,0,0,19.6,15.6,15.6,0,0,0,5.034,6.611,13.122,13.122,0,0,0,14.377.425,14.5,14.5,0,0,0,4.67-5.1,17.42,17.42,0,0,0,2.124-6.915Z" transform="translate(-98.446 -152.422)"/>
+      <path d="M506.92,187a13.71,13.71,0,0,0-7.1,1.82,13.536,13.536,0,0,0-4.974,5.156,18.6,18.6,0,0,0-2.245,7.7h27.782q-.12-6.669-3.822-10.676a12.524,12.524,0,0,0-9.643-4M538.1,218.665q-2.672,10.919-10.74,16.987t-19.833,6.067a33.487,33.487,0,0,1-16.987-4.187,29.166,29.166,0,0,1-11.345-11.77,37.082,37.082,0,0,1-4.062-17.774,35.251,35.251,0,0,1,4.123-17.23,30.578,30.578,0,0,1,11.406-11.828,32.032,32.032,0,0,1,16.622-4.305,33.094,33.094,0,0,1,13.891,2.85,28.665,28.665,0,0,1,10.494,8.066,31.8,31.8,0,0,1,6.068,12.074,35.715,35.715,0,0,1,.608,14.738H492.6a20.552,20.552,0,0,0,1.941,8.677,13.593,13.593,0,0,0,5.034,5.7,13.823,13.823,0,0,0,7.462,2,15.475,15.475,0,0,0,9.282-2.671,13.835,13.835,0,0,0,5.156-7.4Z" transform="translate(-50.83 -152.422)"/>
+      <path d="M355.978,228.668q0,7.081,3.493,10.763a11.293,11.293,0,0,0,14.307,1.983,11.9,11.9,0,0,0,4.3-4.958,17.952,17.952,0,0,0,1.606-7.977q-.1-7.177-3.589-10.766a11.363,11.363,0,0,0-16.619.048q-3.493,3.637-3.493,10.907m24.833,25.21v-7.27a21.248,21.248,0,0,1-6.989,6.042,18.7,18.7,0,0,1-8.968,2.172,20.29,20.29,0,0,1-11.8-3.445,22.923,22.923,0,0,1-7.792-9.4,33.428,33.428,0,0,1,0-26.72,22.556,22.556,0,0,1,7.792-9.349,20.475,20.475,0,0,1,11.8-3.4,18.426,18.426,0,0,1,8.261,1.887,18.962,18.962,0,0,1,6.656,5.575V186.081H392.8v67.8Z" transform="translate(-342.474 -127.239)"/>
+      <path d="M377.487,246.223a8.1,8.1,0,0,0,2.792,6.429,11.062,11.062,0,0,0,7.523,2.428q6.3,0,10.008-3.339a11.4,11.4,0,0,0,3.7-8.917v-4.609a43.942,43.942,0,0,0-4.913-.665q-2.365-.187-4.791-.185-7.038,0-10.676,2.188a7.249,7.249,0,0,0-3.643,6.672m26.208,19.29V257.5a20.782,20.782,0,0,1-8.009,6.857,26.406,26.406,0,0,1-11.646,2.364q-10.075,0-16.2-5.46t-6.128-14.559q0-9.461,7.462-14.438t21.535-4.974q2.912,0,5.521.182t5.277.547v-3.883q0-5.58-2.971-8.556t-8.191-2.971a12.944,12.944,0,0,0-8.735,2.911q-3.4,2.912-3.4,8.617H363.049a25.459,25.459,0,0,1,4.187-12.682,26.625,26.625,0,0,1,9.707-8.735,28.232,28.232,0,0,1,13.526-3.214q12.742,0,19.84,6.675t7.094,18.564v40.764Z" transform="translate(-300.174 -97.717)"/>
+      <path d="M447.223,199.889l-23.78,64.791H405l-23.9-64.791h18.2l15.288,45.619,15.532-45.619Z" transform="translate(-257.56 -96.883)"/>
+      <path d="M434.469,211.888a13.718,13.718,0,0,0-7.1,1.82,13.561,13.561,0,0,0-4.974,5.156,18.6,18.6,0,0,0-2.245,7.7h27.785q-.125-6.669-3.822-10.676a12.536,12.536,0,0,0-9.646-4m31.182,31.664q-2.672,10.919-10.737,16.987t-19.837,6.067a33.494,33.494,0,0,1-16.987-4.187,29.136,29.136,0,0,1-11.342-11.77,37.043,37.043,0,0,1-4.065-17.774,35.254,35.254,0,0,1,4.123-17.23,30.583,30.583,0,0,1,11.406-11.828,32.036,32.036,0,0,1,16.622-4.308,33.085,33.085,0,0,1,13.891,2.853,28.7,28.7,0,0,1,10.5,8.066,31.89,31.89,0,0,1,6.067,12.074,35.773,35.773,0,0,1,.6,14.738H420.153a20.6,20.6,0,0,0,1.942,8.677,13.594,13.594,0,0,0,5.034,5.7,13.831,13.831,0,0,0,7.462,2,15.453,15.453,0,0,0,9.282-2.671,13.835,13.835,0,0,0,5.156-7.4Z" transform="translate(-210.109 -97.717)"/>
+      <path d="M442.528,230.205v35.307H425.784V200.722h15.407v9.221a27.656,27.656,0,0,1,8.617-7.644,22.93,22.93,0,0,1,11.406-2.789q9.706,0,15.771,6.247t6.068,17.9v41.858H466.308V229.355q0-7.278-2.792-11.1t-8.613-3.825a11.471,11.471,0,0,0-6.125,1.759,12.3,12.3,0,0,0-4.551,5.22,19.9,19.9,0,0,0-1.7,8.8" transform="translate(-159.323 -97.717)"/>
+      <path d="M466.919,282.023H450.175V217.232h16.744Zm2.789-79.833a9.175,9.175,0,0,1-3.154,7.1,13.011,13.011,0,0,1-16.261,0,9.174,9.174,0,0,1-3.154-7.1,9.456,9.456,0,0,1,3.154-7.34,13.023,13.023,0,0,1,16.261,0,9.456,9.456,0,0,1,3.154,7.34" transform="translate(-112.373 -114.227)"/>
+      <path d="M474.657,233.53v31.425H457.913V200.167h15.41V212.66a26.493,26.493,0,0,1,10.433-9.886,25.071,25.071,0,0,1,14.924-2.853v16.987a41.617,41.617,0,0,0-12.557.608,14.373,14.373,0,0,0-8.431,5.034q-3.037,3.824-3.035,10.98" transform="translate(-88.689 -97.159)"/>
+      <path d="M378.348,202.828a16.622,16.622,0,0,1-16.632,16.616v-5.987a5.874,5.874,0,0,0,0-11.713V186.2a16.625,16.625,0,0,1,16.632,16.632" transform="translate(-300.172 -126.987)"/>
+    </g>
+  </g>
+</svg>

diff --git a/resources/css/common/global.css b/resources/css/common/global.css
index 5b8f38b9581630a70e031d53e64ccf9255f9ba46..21e8a5d6bdf221320b2a5f6703634133a664fbde 100644 (file)
--- a/resources/css/common/global.css
+++ b/resources/css/common/global.css
@@ -13,7 +13,7 @@ h1, h2, h3, h4 {
 h1 { @apply text-6xl; }
 h2 { @apply text-4xl; }
 
-[x-cloak] { visibility: hidden !important; }
+[x-cloak] { display: none !important; }
 
 .circle-arrow {
     display: inline-block;

diff --git a/resources/css/common/plyr.css b/resources/css/common/plyr.css
index 08eb7d515f549f5b0764de7f7608111e023a7278..8b7edc9ad0e7556b762b6662f61b2009643cc934 100644 (file)
--- a/resources/css/common/plyr.css
+++ b/resources/css/common/plyr.css
@@ -1,12 +1,14 @@
 :root {
-    --plyr-color-main: theme('colors.blue-dark');
-    --plyr-range-fill-background: #fff;
-    --plyr-control-radius: 50%;
+    --plyr-color-main: theme('colors.blue');
     --plyr-control-spacing: 21.45px;
-}
-
-.plyr--audio {
-    --plyr-range-fill-background: #000;
+    --plyr-control-radius: 50%;
+    --plyr-range-track-height: 4px;
+    --plyr-range-fill-background: #fff;
+    --plyr-range-thumb-height: 12px; /* Size of drag circle on sliders */
+    --plyr-video-progress-buffered-background: rgba(255, 255, 255, 0.8);
+    --plyr-video-control-background-hover: theme('colors.blue-dark');
+    --plyr-audio-control-background-hover: theme('colors.blue-dark');
+    --plyr-audio-control-color: #000;
 }
 
 .plyr-timecode {
@@ -18,3 +20,66 @@
 [data-plyr="play"] {
     background: var(--plyr-color-main);
 }
+
+[data-plyr="mute"] {
+    padding: 0;
+    border-radius: 0;
+    margin-left: 20px;
+}
+
+[data-plyr="mute"]:hover {
+    background: none !important;
+    color: currentColor !important;
+}
+
+[data-plyr="mute"] svg {
+    width: 23px;
+    height: 23px;
+}
+
+.plyr__volume input[type="range"] {
+    min-width: 100px;
+}
+
+/* Progress / volume slider bars */
+input[type="range"][data-plyr="seek"]::-webkit-slider-container {
+    /* Main seek slider centre line is the same height as the slider but the linear gradient only fills the central 50% */
+    /* This gives the effect of a central line that is half the height and the progress bar overfills it */
+    background-size: 100% var(--plyr-range-track-height, 4px);
+    background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 100%);
+    background-repeat: no-repeat;
+    background-position: center;
+}
+input[type=range][data-plyr="seek"]::-webkit-slider-runnable-track {
+    background-color: transparent !important; /* No bg here because we have the container background for the track line instead */
+}
+
+.plyr__progress__buffer::-webkit-progress-value {
+    height: calc(var(--plyr-range-track-height, 4px) / 2); /* Make progress indication the same height as the slider centre line */
+    margin-top: calc(var(--plyr-range-track-height, 4px) / 4); /* Make sure progress line is aligned with main slider centre line */
+}
+
+.plyr--full-ui input[type=range]::-webkit-slider-thumb {
+    opacity: 0; /* Only visible on hover */
+}
+.plyr--full-ui input[type=range]:hover::-webkit-slider-thumb {
+    opacity: 1;
+}
+input[type=range][data-plyr="volume"]::-webkit-slider-runnable-track {
+    height: calc(var(--plyr-range-track-height, 4px) / 2);
+    background-color: rgba(255, 255, 255, 0.25) !important; /* Non-filled volume range on videos */
+}
+
+
+/* Audio Player */
+.plyr--audio {
+    --plyr-range-fill-background: #000;
+}
+
+.plyr--audio [data-plyr="play"] {
+    color: #fff;
+}
+
+.plyr--audio input[type=range][data-plyr="volume"]::-webkit-slider-runnable-track {
+    background-color: rgba(0, 0, 0, 0.25) !important; /* Non-filled volume range on audio player */
+}

diff --git a/resources/js/media-library.js b/resources/js/media-library.js
index cf9e7e5449c15b6feb1b1e2585cb4da28cdc58ba..0397ee3132ed136c831cf95749c9c67b094b4d92 100644 (file)
--- a/resources/js/media-library.js
+++ b/resources/js/media-library.js
@@ -19,8 +19,11 @@ export default (options = {}) => ({
         debug: false,
         loadSprite: false, // Custom SVG sprite is already embedded in the page
     },
+    playerType: '', // Set when opening the player: video or audio
     playerDuration: '00’00',
     playerTime: '00’00',
+    playerTitle: '',
+    playerImage: '',
 
     /***********\
     | Filtering |
@@ -106,7 +109,10 @@ export default (options = {}) => ({
     },
 
     openPlayer(sourceData) {
-        this.player.source = sourceData;
+        this.playerType = sourceData.player.type;
+        this.playerTitle = sourceData.title;
+        this.playerImage = sourceData.image;
+        this.player.source = sourceData.player;
         this.player.play();
         this.playerOpen = true;
     },

diff --git a/resources/views/components/duration.blade.php b/resources/views/components/duration.blade.php
index a85486a87273f2af0279cad222b0f33632e1145d..d713d257c2c4ffdc530880179731808aa8b1bb4d 100644 (file)
--- a/resources/views/components/duration.blade.php
+++ b/resources/views/components/duration.blade.php
@@ -6,5 +6,5 @@
 @endphp
 
 <span {{ $attributes }}>
-    {{ str_pad($minutes, 2, STR_PAD_LEFT) }}&rsquo;{{ str_pad($seconds, 2, STR_PAD_LEFT) }}
+    {{ str_pad($minutes, 2, '0', STR_PAD_LEFT) }}&rsquo;{{ str_pad($seconds, 2, '0', STR_PAD_LEFT) }}
 </span>

diff --git a/resources/views/components/media-library/index.blade.php b/resources/views/components/media-library/index.blade.php
index 163e9c27920e764a7504eb68b74b3e9563645a7c..72e188a87c926216831f3905c31ad78ab053df14 100644 (file)
--- a/resources/views/components/media-library/index.blade.php
+++ b/resources/views/components/media-library/index.blade.php
@@ -30,12 +30,15 @@
     <div class="media-grid mt-10 -mb-16 -mx-2.5" x-init="initIsotope($el)">
         @foreach ($media as $item)
             <div @click="openPlayer({
-                     type: '{{ $item['type'] }}',
-                     //poster: '{{ $item['image'] }}',
-                     sources: [{
-                        src: '{{ $item['file'] }}',
-                        type: '{{ $item['mime_type'] }}'
-                     }]
+                     player: {
+                         type: '{{ $item['type'] }}', // video / audio
+                         sources: [{
+                            src: '{{ $item['file'] }}',
+                            type: '{{ $item['mime_type'] }}'
+                         }]
+                     },
+                     title: '{{ $item['title'] }}',
+                     image: '{{ $item['image'] }}'
                  })"
                  class="media-item group cursor-pointer
                         {{-- Width is 25% minus the gutters (2 * 0.625rem that comes from mx-2.5) --}}
@@ -74,7 +77,8 @@
                 <div class="mt-2.5 font-secondary font-medium text-xs leading-none" style="color:{{ $item['theme']['color'] }}">
                     {{ $item['theme']['title'] }}
                 </div>
-                <div class="mt-1.5 font-semibold leading-snug">
+                {{-- Set min height of 2 lines so intial float layout is less likely to have misplaced blocks --}}
+                <div class="mt-1.5 font-semibold leading-snug min-h-[2.75em]">
                     {{ $item['title'] }}
                 </div>
             </div>

diff --git a/resources/views/components/media-library/player.blade.php b/resources/views/components/media-library/player.blade.php
index 0ccc3066bbef0c911fa0b23978550528fb11991a..c085c5bbf9cc0cbf1825e55304951b6ed32dce39 100644 (file)
--- a/resources/views/components/media-library/player.blade.php
+++ b/resources/views/components/media-library/player.blade.php
@@ -49,9 +49,18 @@
     <template id="playerControls">
         <div class="plyr__controls">
 
+            {{-- Player Image / Poster --}}
+            <div x-show="playerType === 'audio'"
+                 class="rounded-md bg-cover bg-center flex-shrink-0 mr-10"
+                 :style="`width:200px; height:200px; background-image:url(${playerImage})`"></div>
+
             <div class="w-full">
 
-                <div class="plyr__progress">
+                <h2 x-show="playerType === 'audio'"
+                    x-text="playerTitle"
+                    class="font-semibold text-6xl text-left mb-3 max-w-[700px]"></h2>
+
+                <div class="plyr__progress mb-1">
                     <input data-plyr="seek" type="range" min="0" max="100" step="0.01" value="0" aria-label="Seek">
                     <progress class="plyr__progress__buffer" min="0" max="100" value="0">% buffered</progress>
                     <span role="tooltip" class="plyr__tooltip">00:00</span>
@@ -84,11 +93,11 @@
                     </div>
 
                     {{-- Right side --}}
-                    <div class="flex items-center font-secondary">
+                    <div class="flex items-center font-secondary text-current">
                         {{-- Time codes --}}
                         <span class="plyr-timecode" x-html="playerTime"></span>
-                        <span class="mx-2 opacity-60">/</span>
-                        <span class="plyr-timecode opacity-60" x-html="playerDuration"></span>
+                        <span class="mx-2 opacity-50">/</span>
+                        <span class="plyr-timecode opacity-50" x-html="playerDuration"></span>
                     </div>
 
                 </div>

diff --git a/resources/views/front/media-library.blade.php b/resources/views/front/media-library.blade.php
index 88781893fa5e0a4ec60fd353e0b9a8987c28a9a6..608692dd3c7e0a9202ec776f198c4e9b683b5b68 100644 (file)
--- a/resources/views/front/media-library.blade.php
+++ b/resources/views/front/media-library.blade.php
@@ -33,11 +33,11 @@
             ],
             [
                 'title' => "Une organisation à plusieurs niveaux",
-                'type' => 'video',
-                'duration' => '322',
-                'image' => '/storage/46/conversions/VIDEO2-poster.jpg',
-                'file' => '/storage/46/VIDEO2.mov',
-                'mime_type' => 'video/mp4',
+                'type' => 'audio',
+                'duration' => '144',
+                'image' => '/storage/126/wp280699-turtle-wallpaper.jpg',
+                'file' => '/storage/83/hs1mp3.mp3',
+                'mime_type' => 'audio/mpeg',
                 'theme' => [
                     'id' => 3,
                     'title' => 'Organisation',
@@ -60,7 +60,7 @@
             [
                 'title' => "Qu’est ce que la gouvernance ?",
                 'type' => 'video',
-                'duration' => '414',
+                'duration' => '614',
                 'image' => '/storage/46/conversions/VIDEO2-poster.jpg',
                 'file' => '/storage/46/VIDEO2.mov',
                 'mime_type' => 'video/mp4',
@@ -74,7 +74,7 @@
                 'title' => 'Les outils de communication',
                 'type' => 'audio',
                 'duration' => '45',
-                'image' => '/storage/4/conversions/Big-rock-at-the-beach-poster.jpg',
+                'image' => '/storage/125/victor-ene-cmrp-0mg8f0-unsplash.jpg',
                 'file' => '/storage/83/hs1mp3.mp3',
                 'mime_type' => 'audio/mpeg',
                 'theme' => [

diff --git a/resources/views/front/resources.blade.php b/resources/views/front/resources.blade.php
index 48479380892e0999e3017c5de1189ea324a0469e..223eb9fbdbbe39d43ec9352127b1538bbeb23593 100644 (file)
--- a/resources/views/front/resources.blade.php
+++ b/resources/views/front/resources.blade.php
@@ -114,6 +114,7 @@
     <div class="resources" x-data="{
         PDFOpen: false, // Tracks if PDF viewer overlay is open
         viewerURL: '/tools/fluidbookpreview/pdfjs/web/viewer.html?file=', // Base URL for viewer
+        shown: false,
 
         openPDF(URL) {
             this.overlayOpen = true; // Stops page scrolling in the background
@@ -125,66 +126,92 @@
             this.PDFOpen = false;
             this.overlayOpen = false;
         },
-    }">
-
-
-        <h1 class="uppercase mb-8">{{ $title }}</h1>
-        <h2 class="font-medium text-2xl mb-14 w-1/2">{{ $subtitle }}</h2>
-
-        {{-- DOCUMENTS --}}
-        <div class="grid lg:grid-cols-2 gap-6">
-            @foreach($documents as $doc)
-                <a href="#" @click.prevent="openPDF('{{ $doc['document_pdf'] }}')" class="group">
-                    <div class="bg-blue flex items-center p-10 text-white rounded-md">
-                        <img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">
-                        <div class="-mr-5 space-y-4">
-                            <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>
-                            <p>{{ $doc['document_subtitle'] }}</p>
-                            <span
-                                class="bg-blue-dark inline-block py-4 px-10 rounded-full transform transition group-hover:scale-105">Visualiser</span>
+    }" x-intersect="shown = true" x-cloak>
+
+
+        <h1 class="uppercase mb-8 overflow-hidden">
+            <span x-show="shown"
+                  x-transition:enter-start="translate-y-[110%]"
+                  style="transition-delay: 500ms;"
+                  class="block transition duration-500 transform ease-out-quint">
+                {{ $title }}
+            </span>
+        </h1>
+        <h2 class="font-medium text-2xl mb-14 w-1/2 overflow-hidden">
+            <span x-show="shown"
+                  x-transition:enter-start="translate-y-[110%]"
+                  style="transition-delay: 550ms;"
+                  class="block transition duration-500 transform ease-out-quint">
+                {{ $subtitle }}
+            </span>
+        </h2>
+
+        {{-- Animation wrapper for remaining content --}}
+        <div class="transition duration-500 ease-out-quint"
+             style="transition-delay: 750ms"
+             x-show="shown"
+             x-transition:enter-start="opacity-0 translate-y-[50px]">
+
+            {{-- DOCUMENTS --}}
+            <div class="grid lg:grid-cols-2 gap-6">
+                @foreach($documents as $doc)
+                    <a href="#" @click.prevent="openPDF('{{ $doc['document_pdf'] }}')" class="group">
+                        <div class="bg-blue flex items-center p-10 text-white rounded-md">
+                            <img class="w-1/2 pr-6" src="{{ $doc['document_image'] }}" alt="{{ $doc['document_title'] }}">
+                            <div class="-mr-5 space-y-4">
+                                <h3 class="text-4xl font-semibold">{{ $doc['document_title'] }}</h3>
+                                <p>{{ $doc['document_subtitle'] }}</p>
+                                <span class="bg-blue-dark inline-block rounded-full
+                                             py-4 px-10
+                                             transform transition
+                                             group-hover:scale-105">
+                                Visualiser
+                            </span>
+                            </div>
                         </div>
-                    </div>
-                </a>
-            @endforeach
-        </div>
-
-        {{-- MEMOS --}}
-        <p>
-        <span
-            class="inline-block font-secondary font-bold uppercase text-xs leading-none p-2.5 border border-current mt-15">
-            {{ $memo_part_title }}
-        </span>
-        </p>
-
-
-        {{-- CHAPTERS --}}
-        @foreach ($chapters as $chapter)
-            <div class="mt-15">
-                <h3 class="text-4xl">{{ $chapter['chapter_title'] }}</h3>
-
-                {{-- SUB-CHAPTERS --}}
-                @foreach ($chapter['subchapters'] as $subchapter)
-                    <h4 class="mt-8 text-2xl">{{ $subchapter['subchapter_title'] }}</h4>
-                    <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
-
-                    {{-- MEMOS --}}
-                    <div class="grid grid-cols-2 gap-5 mt-8">
-                        @foreach ($subchapter['subchapter_memos'] as $memo)
-                            <a href="#" @click.prevent="openPDF('{{ $memo['memo_pdf'] }}')" class="group">
-                                <div class="bg-grey-50 flex items-center p-8 rounded-md">
-                                    <img class="w-1/4 pr-4" src="{{ $memo['memo_image'] }}"
-                                         alt="{{ $memo['memo_title'] }}">
-                                    <div class="space-y-2.5">
-                                        <h3 class="text-base font-semibold">{{ $memo['memo_title'] }}</h3>
-                                        <span class="circle-arrow transform transition group-hover:scale-110"></span>
-                                    </div>
-                                </div>
-                            </a>
-                        @endforeach
-                    </div>
+                    </a>
                 @endforeach
             </div>
-        @endforeach
+
+            {{-- MEMOS --}}
+            <p>
+                <span class="inline-block p-2.5 mt-15
+                             font-secondary font-bold uppercase text-xs leading-none
+                             border border-current">
+                    {{ $memo_part_title }}
+                </span>
+            </p>
+
+            {{-- CHAPTERS --}}
+            @foreach ($chapters as $chapter)
+                <div class="mt-15">
+                    <h3 class="text-4xl">{{ $chapter['chapter_title'] }}</h3>
+
+                    {{-- SUB-CHAPTERS --}}
+                    @foreach ($chapter['subchapters'] as $subchapter)
+                        <h4 class="mt-8 text-2xl">{{ $subchapter['subchapter_title'] }}</h4>
+                        <p class="mt-2.5 max-w-[500px]">{{ $subchapter['subchapter_subtitle'] }}</p>
+
+                        {{-- MEMOS --}}
+                        <div class="grid grid-cols-2 gap-5 mt-8">
+                            @foreach ($subchapter['subchapter_memos'] as $memo)
+                                <a href="#" @click.prevent="openPDF('{{ $memo['memo_pdf'] }}')" class="group">
+                                    <div class="bg-grey-50 flex items-center p-8 rounded-md">
+                                        <img class="w-1/4 pr-4"
+                                             src="{{ $memo['memo_image'] }}"
+                                             alt="{{ $memo['memo_title'] }}">
+                                        <div class="space-y-2.5">
+                                            <h3 class="text-base font-semibold">{{ $memo['memo_title'] }}</h3>
+                                            <span class="circle-arrow transform transition group-hover:scale-110"></span>
+                                        </div>
+                                    </div>
+                                </a>
+                            @endforeach
+                        </div>
+                    @endforeach
+                </div>
+            @endforeach
+        </div>
 
         {{-- PDF Viewer Overlay --}}
         <div class="pdf-overlay
@@ -218,7 +245,7 @@
                  x-transition:leave-start="opacity-100"
                  x-transition:leave-end="opacity-0"
                  class="fixed top-8 right-8 flex z-30 bg-white pb-4 pl-4"
-                 x-cloak/>
+                 x-cloak />
 
 
     </div>

diff --git a/resources/views/front/splash.blade.php b/resources/views/front/splash.blade.php
new file mode 100644 (file)
index 0000000..41681d1
--- /dev/null
+++ b/resources/views/front/splash.blade.php
@@ -0,0 +1,36 @@
+@extends('layouts.base')
+
+@section('main')
+
+    {{-- Title + Illustration --}}
+    <div x-data="{ shown: false }" x-intersect="shown = true"
+         class="h-screen flex items-center"
+         x-cloak>
+
+        {{-- Background Image --}}
+        <div x-show="shown"
+             x-transition:enter="ease-out-quint"
+             x-transition:enter-start="translate-y-full"
+             x-transition:enter-end="translate-y-0"
+             class="absolute w-full h-full -z-1 bg-bottom bg-no-repeat"
+             style="background-image: url({{ asset('images/splash-bg.jpg') }});
+                    background-size: 100% auto;
+                    transition-duration: 2500ms;
+                    transition-delay: 900ms;">
+        </div>
+
+        <x-link href="/accueil" class="w-full max-h-[90vh] flex flex-col items-center justify-around">
+            <img x-show="shown"
+                 x-transition.opacity.scale.75.origin.bottom.duration.1000ms
+                 class="max-w-[488px] mb-16"
+                 src="{{ asset('images/splash-text.svg') }}"
+                 alt="Source d'avenir">
+            <img x-show="shown"
+                 x-transition.opacity.scale.95.origin.center.duration.1200ms.delay.800ms
+                 class="max-w-[520px]"
+                 src="{{ asset('images/splash-illustration.png') }}">
+        </x-link>
+
+    </div>
+
+@endsection

diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index f5dd90dc7bb7af41487251cfd52f4e9be384980e..1fedc8581827015a26a013dfa66d28388451982f 100644 (file)
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -1,14 +1,7 @@
-<!doctype html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    @stack('before_css')
-    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
-    @stack('after_css')
-    <title>{{ config('app.name') }}</title>
-</head>
-<body x-data="{
+@extends('layouts.base')
+
+@section('body_tag')
+    <body x-data="{
         overlayOpen: false, // Tracks when a modal is open so background scroll can be frozen
         menuOpen: false,
         searchOpen: false,
@@ -29,6 +22,10 @@
         'overflow-hidden': overlayOpen
       }"
       class="font-primary p-8">
+@endsection
+
+@section('main')
+
     <header class="site-header relative flex justify-between z-20 transition-colors duration-500">
         {{-- Menu Toggle --}}
         <a href="#" @click.prevent="menuOpen = !menuOpen">
@@ -55,7 +52,7 @@
         </a>
 
         {{-- VEOLIA Logo --}}
-        <x-link class="header-logo text-red" href="/">
+        <x-link class="header-logo text-red" href="/accueil">
             <svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="130" height="31.878" viewBox="0 0 130 31.878"><path d="M13.704 31.795A16.13 16.13 0 0 1 .278 19.079a19.191 19.191 0 0 1-.189-5.063A16.014 16.014 0 0 1 13.598.139a19.613 19.613 0 0 1 5.536.127 16.063 16.063 0 0 1 11.993 10.7 15.252 15.252 0 0 1 .794 4.983 16.007 16.007 0 0 1-12.536 15.626 23.994 23.994 0 0 1-5.681.22Zm1.658-7.262a19.68 19.68 0 0 1-2.509-3.99 4.469 4.469 0 0 1-.4-2.247 3.587 3.587 0 0 1 .346-2.02 3.386 3.386 0 0 1 3.156-2.1c2.061-.012 3.576 1.758 3.567 4.166q-.009 2.367-2.468 5.525l-.947 1.215.914-.083a11.289 11.289 0 0 0 7.03-3.344 9.91 9.91 0 0 0 2.146-3.057 9.655 9.655 0 0 0 1.066-4.821 9.577 9.577 0 0 0-.262-2.748 11.391 11.391 0 0 0-12.229-8.536 11.425 11.425 0 0 0-9.762 8.536 13.065 13.065 0 0 0 .01 5.46 11.419 11.419 0 0 0 8.977 8.38 11.273 11.273 0 0 0 1.33.167l.468.011Zm63.629.811a12.141 12.141 0 0 1-3.307-1.111 7.234 7.234 0 0 1-3.274-5.455 16.528 16.528 0 0 1 .2-4.7 7.168 7.168 0 0 1 2.883-4.3 11.8 11.8 0 0 1 6.823-1.261c2.5.255 4.008.871 5.278 2.153a6.778 6.778 0 0 1 1.844 3.475 16.166 16.166 0 0 1 .051 5.776 6.754 6.754 0 0 1-5.2 5.254 16.019 16.019 0 0 1-5.298.17Zm4.092-3.055a3.074 3.074 0 0 0 1.737-1.57 7.571 7.571 0 0 0 .736-3.75c0-3.9-1.372-5.6-4.516-5.6a4.05 4.05 0 0 0-3.041.95c-1.035.93-1.478 2.323-1.478 4.647 0 3.219 1 5.013 3.1 5.541a7.933 7.933 0 0 0 3.461-.221Zm-39.092 2.622c-.062-.158-1.636-3.728-3.5-7.932s-3.387-7.689-3.387-7.744a6.066 6.066 0 0 1 1.548-.1c1.387 0 1.6.029 2.079.28a2.662 2.662 0 0 1 .841.753c.171.26 1.2 2.562 2.278 5.114s2.006 4.715 2.053 4.8a40.742 40.742 0 0 0 2.044-4.732c1.078-2.693 2.076-5.068 2.218-5.278a2.56 2.56 0 0 1 .789-.661c.484-.255.684-.28 2.246-.28h1.715l-3.31 7.323c-1.821 4.027-3.445 7.5-3.609 7.715-.506.666-1.126.9-2.6.966-1.278.068-1.298.062-1.406-.223Zm17.04-.007a6.749 6.749 0 0 1-4.9-5.126 12.989 12.989 0 0 1 0-5.393 7.238 7.238 0 0 1 3.253-4.507c1.366-.728 1.823-.787 6.226-.8l3.978-.008v2.893l-3.438.06-3.438.06-.794.391a2.765 2.765 0 0 0-1.13.877 4.562 4.562 0 0 0-.661 2.012v.274l4.55.032 4.55.032v2.772l-4.55.032-4.55.032v.266a5.392 5.392 0 0 0 .2.964 3.036 3.036 0 0 0 1.826 2.043c.647.257.9.276 4.094.318l3.405.045v2.873l-4.008-.013c-2.2-.007-4.279-.065-4.611-.128Zm35.54-.1a8.52 8.52 0 0 1-1.373-.486 5.251 5.251 0 0 1-1.992-2.091c-.544-1.188-.585-1.718-.59-7.609V9.073h1.266c1.094 0 1.323.036 1.688.264.806.505.777.3.844 5.943l.06 5.123.3.536a1.956 1.956 0 0 0 .9.844c.586.3.662.309 3.526.347l2.927.04v2.874l-3.345-.007a16.7 16.7 0 0 1-4.207-.233Zm9.869-7.2c.032-7.081.045-7.46.263-7.781.382-.563.851-.73 2.212-.785l1.235-.05v7.433c0 8.2.026 7.911-.759 8.39-.32.195-.609.235-1.685.236h-1.3Zm5.7 7.3c.034-.088 1.464-3.387 3.178-7.331 3.49-8.032 3.517-8.08 4.711-8.388a7.507 7.507 0 0 1 3.108-.019c.1.119 6.534 14.861 6.847 15.676.071.186-.066.2-1.505.2-2.346 0-2.719-.236-3.635-2.308l-.552-1.248-3.217-.032-3.217-.032-.124.325c-.068.179-.361.82-.652 1.426a3.114 3.114 0 0 1-1.039 1.455c-.5.345-.552.355-2.238.393-1.4.032-1.716.008-1.666-.121Zm11.231-6.518c-.92-2.207-2.181-5.116-2.249-5.19a38.91 38.91 0 0 0-2.253 4.949l-.164.392h2.365c1.844 0 2.35-.034 2.301-.151Z"/></svg>
         </x-link>
 
@@ -75,7 +72,7 @@
     {{-- Header spacer: same height as the header in the normal flow --}}
     {{-- This is needed because the header switches to position:fixed when menu is open and therefore no longer --}}
     {{-- takes any space in the document flow. This spacer is the replacement and prevents content from shifting. --}}
-    <div class="h-8" x-show="menuOpen"></div>
+    <div class="h-8" x-show="menuOpen" x-cloak></div>
 
     <div class="min-h-content flex flex-col mx-22 pt-22">
         @yield('content')
@@ -100,7 +97,7 @@
         <ul class="w-full font-medium text-6xl">
             @php
                 $menu_links = [
-                    '/' => 'Accueil',
+                    '/accueil' => 'Accueil',
                     '/tools/fluidbookpreview/' => 'Cœur de l’offre',
                     '/ressources' => 'Ressources',
                     '/mediatheque' => 'Médiathèque',
@@ -147,9 +144,4 @@
     {{-- Search Overlay --}}
     <x-search />
 
-    @stack('before_scripts')
-    <script src="{{ asset('js/app.js') }}"></script>
-    @stack('after_scripts')
-
-</body>
-</html>
+@endsection

diff --git a/resources/views/layouts/base.blade.php b/resources/views/layouts/base.blade.php
new file mode 100644 (file)
index 0000000..427888a
--- /dev/null
+++ b/resources/views/layouts/base.blade.php
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    @stack('before_css')
+    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+    @stack('after_css')
+    <title>{{ config('app.name') }}</title>
+</head>
+@section('body_tag')
+<body>
+@show
+
+    @yield('main')
+
+    @stack('before_scripts')
+    <script src="{{ asset('js/app.js') }}"></script>
+    @stack('after_scripts')
+</body>
+</html>

diff --git a/routes/web.php b/routes/web.php
index 4987d7753b6773138af19abc9ebdb91985010df8..5f361c5f4260a4e60f3a6f391818b448459282fb 100644 (file)
--- a/routes/web.php
+++ b/routes/web.php
@@ -16,7 +16,8 @@ Route::group([
     'middleware' => ['web', config('backpack.base.middleware_key', 'admin')],
     'namespace' => '\App\Http\Controllers\Front',
 ], function () {
-    Route::view('', 'front.home');
+    Route::view('', 'front.splash');
+    Route::view('accueil', 'front.home');
     Route::view('ressources', 'front.resources');
     Route::view('mediatheque', 'front.media-library');
 });

diff --git a/tailwind.config.js b/tailwind.config.js
index c7431537bad5e7945860b415f5abd08a712a77ad..447d40068708b3612b866cfc1e5792310ac53110 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,6 +40,9 @@ module.exports = {
       },
       transitionDuration: {
         '2000': '2000ms',
+      },
+      zIndex: {
+        '-1': '-1', // -z-1
       }
     },
     fontFamily: {