Merge pull request #758 from GSA/OGPWEB-16803

Ogpweb 16803

_pages/fibf-business-standards/fibf.html

@@ -14,8 +14,11 @@
                 <div class="grid-container">
                     <div class="usa-width-whole hero-content text-center">
 
-                        <h1 style="color:white">Efficient Management through Data and Business Standards</h1>
-                        <p style="color:white">Data and Business Standards, aligned to policy and agreed to by agencies, enable the government to coordinate on the common capabilities needed by agencies to deliver on their management responsibilities. They are a first step towards agency agreement on the outcomes, data and management coordination needed to drive economies of scale and leverage the government’s buying power.</p>
+                        <h1 style="color:white">Management Efficiency through Data and Business Standards</h1>
+                        <p style="color:white">Data and Business Standards, aligned to policy and continuously updated, enable the 
+                            federal government to better coordinate on common agency management and operations capabilities.
+                            These standards, agreed to by agencies, are a first step toward achieving the outcomes, data, and common technologies
+                            needed to drive economies of scale and leverage the government’s buying power.</p>
                         <!--a class="usa-button usa-button-secondary " href="#" style="background-color:#e31c3d">FIBF Artifacts</a>-->
 
                     </div>
@@ -59,7 +62,7 @@ <h1 style="color:white">Efficient Management through Data and Business Standards
                         <h2 style="color: #f0f0f0;">Federal Integrated Business Framework</h2>
                         <p>The Federal Integrated Business Framework (FIBF) includes five components:</p>
                         <ol>
-                            <li class="margin-y-1"><b>Federal Business Lifecycles, functional areas, functions, and activities</b> are the basis for understanding the services agencies need and the management solutions that should be offered.</li>
+                            <li class="margin-y-1"><b>Federal Business Lifecycles</b> are comprised of functions and activities that are the basis for understanding the services agencies need and the management solutions that should be offered.</li>
                             <li class="margin-y-1"><b>Business Capabilities</b> are the outcome-based business needs mapped to Federal government authoritative references, forms, inputs, outputs, and data standards.</li>
                             <li class="margin-y-1"><b>Business Use Cases</b> are agency “stories” that document key activities, inputs, outputs, and cross-functional intersections to describe how the Federal government operates.</li>
                             <li class="margin-y-1"><b>Standard Data Elements</b> identify the minimum business fields required to support the data inputs and outputs of the agency management operations lifecycle.</li>
@@ -338,8 +341,8 @@ <h2 class="text-primary">How are the Business Standards Used?</h2>
                             </li>
                             <li>
                                 <p>
-                                    <strong>Assess Readiness for Shared Services</strong><br>
-                                    They support strategic planning to improve mission support services by giving decision makers the data needed to identify future opportunity areas for shared services. This includes identifying opportunities for modernization based on common themes, and policy reform based on agency feedback.
+                                    <strong>Assess Readiness for Modernization</strong><br>
+                                    They support strategic planning to improve mission support services by giving decision makers the data needed to identify future opportunity areas for these services. This includes identifying opportunities for modernization based on common themes, and policy reform based on agency feedback.
                                 </p>
                             </li>
                             <li>

_pages/m3/m3.md

@@ -93,18 +93,53 @@ description: The Playbook provides tools, templates, and best practices for fede
     </div>
 </section>
 
-<section class="m3-playbook m3-playbook-overview">
+<section id="m3videos" class="m3-playbook m3-playbook-overview">
     <div class="grid-container">
         <div class="grid-row grid-gap all-std">
             <div class="grid-col-12 desktop:grid-col m3-playbook-left">
                 <h2>What is the M3 Playbook?</h2>
                 <p>The Playbook consists of guidance and tools to help agencies plan for and navigate modernization projects. It was developed based on feedback from over 100 Government and industry experts, reflects best practices and lessons learned from prior agency and industry modernizations. It is updated annually.</p>
                 <a href="{{site.baseurl}}/assets/files/M3-Playbook.pdf" class="m3-download-pdf">Download PDF</a>
-                <div style="padding:56.25% 0 0 0;position:relative; margin-top:30px;"><iframe src="https://player.vimeo.com/video/704934121?h=437ef4784d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="M3-Playbook Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
-                <p><i>Move Your Agency Forward with M3</i></p>
+                <div id="main-video-container" style="padding:56.25% 0 0 0; position:relative; margin-top:30px;">
+                    <iframe id="main-video" 
+                            src="https://player.vimeo.com/video/704934121?h=437ef4784d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            frameborder="0" 
+                            allow="autoplay; fullscreen; picture-in-picture" 
+                            allowfullscreen 
+                            style="position:absolute; top:0; left:0; width:100%; height:100%;" 
+                            title="M3-Playbook Video">
+                    </iframe>
+                    <br>
+                    <p id="videoTitle" style="color:blue; text-align:center;"><i>Move your Agency Forward with M3</i></p>
+                </div>
             </div>
             <div class="grid-col-12 desktop:grid-col m3-playbook-right text-base-lightest">
-                <img src="{{site.baseurl}}/assets/images/shutterstock_747951901-1024x683.webp" width="600" class="shutterstock-image" alt="shutterstock image">
+                <div class="video-thumbnails" style="margin-top:30px;">
+                    <figure class="thumbnail" style="display:inline-block; text-align:center; margin:10px;">
+                        <img class="video-thumbnail" 
+                            data-video-src="https://player.vimeo.com/video/704934121?h=437ef4784d&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            src="{{ site.baseurl }}/assets/images/m3/M3-thumbnail1.jpeg" 
+                            alt="M3-Playbook Video Thumbnail" 
+                            style="cursor:pointer; width:100%; max-width:400px; margin-bottom: 10px;">
+                        <figcaption style="color:blue;"><i>M3 Playbook for Agency Modernization</i></figcaption>
+                    </figure>
+                    <figure class="thumbnail" style="display:inline-block; text-align:center; margin:10px;">
+                        <img class="video-thumbnail" 
+                            data-video-src="https://player.vimeo.com/video/677308076?h=f71d457043&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            src="{{ site.baseurl }}/assets/images/m3/M3-thumbnail2.jpeg"
+                            alt="M3 Framework Video Thumbnail" 
+                            style="cursor:pointer; width:100%; max-width:400px; margin-bottom: 10px;">
+                        <figcaption style="color:blue;"><i>Agency Modernization Workstreams</i></figcaption>
+                    </figure>
+                    <figure class="thumbnail" style="display:inline-block; text-align:center; margin:10px;">
+                        <img class="video-thumbnail" 
+                            data-video-src="https://player.vimeo.com/video/720261803?h=ddd231c12c&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" 
+                            src="{{ site.baseurl }}/assets/images/m3/M3-thumbnail3.jpeg"
+                            alt="Modernization Phases Video Thumbnail" 
+                            style="cursor:pointer; width:100%; max-width:400px; margin-bottom: 10px;">
+                        <figcaption style="color:blue;"><i>Agency Modernization Phases</i></figcaption>
+                    </figure>
+                </div>
             </div>
         </div>
     </div>

_sass/_m3.scss

@@ -106,6 +106,26 @@
   }
 }
 
+.m3-playbook-left {
+  width: 70%; 
+}
+
+.m3-playbook-right {
+  width: 30%; 
+}
+
+.m3-playbook-right iframe {
+  width: 100%;
+  height: 120px; 
+  margin-bottom: 15px;
+  cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+}
+
+.m3-playbook-right iframe:hover {
+  transform: scale(1.05);
+}
+
 // @media screen and (min-width: 640px) {
 //   .tablet\:width-1\/3 {
 //     width: 33%;

assets/js/m3.js

@@ -43,4 +43,27 @@ document.querySelectorAll('.filterlist').forEach(function(filterlist) {
 			}
 		});
 	});
+});
+
+
+document.addEventListener("DOMContentLoaded", function () {
+    let mainVideo = document.getElementById("main-video");
+    let videoTitle = document.getElementById("videoTitle");
+    let videoThumbnails = document.querySelectorAll(".video-thumbnail");
+
+    videoThumbnails.forEach(thumbnail => {
+        thumbnail.addEventListener("click", function (event) {
+            event.preventDefault();
+            let newSrc = this.getAttribute("data-video-src");
+
+            if (!newSrc.includes("autoplay=1")) {
+                newSrc = newSrc.includes("?") ? `${newSrc}&autoplay=1` : `${newSrc}?autoplay=1`;
+            }
+            mainVideo.setAttribute("src", newSrc);
+            let figcaption = this.parentElement.querySelector("figcaption");
+            if (figcaption && videoTitle) {
+                videoTitle.innerHTML = figcaption.innerHTML;
+            }
+        });
+    });
 });