optimize steps page

js/lan.js

@@ -179,7 +179,7 @@ var zh = {
     "index-steps": "使用流程",
     "index-usecases": "應用情境",
     "index-demo": "即時展示",
-    "time-lapse": "縮時影片",
+    "time-lapse": "操作影片",
     "index_title1": "強大的Ai虛擬代言人",
     "index_title2": "快速生成影片工具",
     "make_video_txt1": "文字轉影片，輕鬆完成",

steps.html

@@ -72,48 +72,59 @@
                 <!-- </nav> -->
             </div>
         </div>
-        <section class="sec-steps my-5">
-        <div class="container text-center">
-            <h2 class="steps-title mb-5"><strong>3</strong><lan set-lan="html:steps_title">步驟快速合成影片</lan></h2>
+        <section class="sec-steps my-1">
+        <div class="container-fluid text-center">
             <div class="row">
-                <div class="col-12 col-sm-4 my-4">
-                    <div class="steps-block">
-                        <div class="steps-imgfr" style="background-image: url('img/aigirls.png');"></div>
-                        <div class="steps-txt">
-                            <span>1</span>
-                            <h3 class="steps-sub" set-lan="html:steps_no1">選擇AI人物</h3>
+                <div class="col">
+                   <h2 class="steps-title mb-5"><strong>3</strong><lan set-lan="html:steps_title">步驟快速合成影片</lan></h2>
+                    <div class="row">
+                        <div class="col">
+                            <div class="steps-block row">
+                                <div class="col">
+                                    <div class="steps-imgfr" style="background-image: url('img/steps/step1.webp');"></div>
+                                </div>
+                                <div class="steps-txt col">
+                                    <span class="steps-txt-num">1</span>
+                                    <h3 class="steps-sub" set-lan="html:steps_no1">選擇AI人物</h3>
+                                </div>
+                            </div>
+                            <div class="steps-block row">
+                                <div class="col">
+                                    <div class="steps-imgfr" style="background-image: url('img/steps/step2.webp');"></div>
+                                </div>
+                                <div class="steps-txt col">
+                                    <span>2</span>
+                                    <h3 class="steps-sub" set-lan="html:steps_no2">輸入腳本文字</h3>
+                                </div>
+                            </div>
+                            <div class="steps-block row">
+                                <div class="col">
+                                    <div class="steps-imgfr" style="background-image: url('img/steps/step3.webp');"></div>
+                                </div>
+                                <div class="steps-txt col">
+                                    <span>3</span>
+                                    <h3 class="steps-sub" set-lan="html:steps_no3">輸入圖片素材</h3>
+                                </div>
+                            </div>
+                            
                         </div>
                     </div>
+                    
                 </div>
-                <div class="col-12 col-sm-4 my-4">
-                    <div class="steps-block">
-                        <div class="steps-imgfr" style="background-image: url('img/textgrp.png');"></div>
-                        <div class="steps-txt">
-                            <span>2</span>
-                            <h3 class="steps-sub" set-lan="html:steps_no2">輸入腳本文字</h3>
+                <div class="col">
+                    <div class="mx-auto">
+                        <h2 class="step-video-title"><img src="https://i.imgur.com/Sb7ik9D.png" width="45" class="me-2"><span set-lan="html:time-lapse">縮時影片</span></h2>
+                        <div class="step-videofr">
+                            <video autoplay muted loop>
+                                <source src="img/官網1_加速.mp4" type="video/mp4">
+                            </video>
                         </div>
+                        <a class="btn-dark" onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></a>
                     </div>
                 </div>
-                <div class="col-12 col-sm-4 my-4">
-                    <div class="steps-block">
-                        <div class="steps-imgfr" style="background-image: url('img/imagesgrp.png');"></div>
-                        <div class="steps-txt">
-                            <span>3</span>
-                            <h3 class="steps-sub" set-lan="html:steps_no3">輸入圖片素材</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <a class="btn-dark" onclick="direct()"><lan set-lan="html:try_it_out">立即開始</lan></a>
-            <div class="row my-5">
-            <div class="col-10 mx-auto">
-                <h2><img src="https://i.imgur.com/Sb7ik9D.png" width="45" class="me-2"><span set-lan="html:time-lapse">縮時影片</span></h2>
-                <div class="step-videofr">
-                <video autoplay muted loop>
-                    <source src="img/官網1_加速.mp4" type="video/mp4">
-                </video>
-            </div>
+                
             </div>
+            
             </div>
         </div>
 
@@ -127,6 +138,39 @@
         crossorigin="anonymous"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="js/lan.js"></script>
+    <script>
+      
+        //   openFullscreen();
+        var expandbtn = document.getElementById("expand");
+        var compressionbtn = document.getElementById("compression");
+
+        // Using JavaScript to open the page in fullscreen mode
+        var elem = document.documentElement;
+
+        function openFullscreen() {
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+                compressionbtn.style.display = 'inline';
+                // alert('hi')
+            } else if (elem.webkitRequestFullscreen) { /* Safari */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) { /* IE11 */
+                elem.msRequestFullscreen();
+            }
+        }
+
+        function closeFullscreen() {
+            if (document.exitFullscreen) {
+                document.exitFullscreen();
+                compressionbtn.style.display = 'none';
+
+            } else if (document.webkitExitFullscreen) { /* Safari */
+                document.webkitExitFullscreen();
+            } else if (document.msExitFullscreen) { /* IE11 */
+                document.msExitFullscreen();
+            }
+        }
+    </script>
 </body>
 
 </html>

style.css

@@ -151,13 +151,15 @@ p {
 }
 
 .sec-steps .steps-title {
-  font-size: 3rem;
+  font-size: 1.9rem;
   text-align: center;
   letter-spacing: 1px;
+  color: #041959;
 }
 
 .sec-steps .steps-title strong {
-  font-size: 5rem;
+  font-size: 2.5rem;
+  color: #041959;
 }
 
 .sec-steps .steps-block {
@@ -165,10 +167,6 @@ p {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
@@ -178,26 +176,13 @@ p {
   position: relative;
 }
 
-.sec-steps .steps-block::after {
-  position: absolute;
-  bottom: -1rem;
-  left: 0;
-  width: 100%;
-  height: 15rem;
-  background-color: #ffebe2;
-  content: " ";
-  z-index: -1;
-  border-radius: 2rem;
-}
-
 .sec-steps .steps-block .steps-imgfr {
-  width: 85%;
+  width: 70%;
   margin: 0 auto;
-  height: 45vh;
+  height: 20vh;
   background-position: center center;
   background-size: contain;
   background-repeat: no-repeat;
-  margin-bottom: 1.5rem;
 }
 
 .sec-steps .steps-block .steps-txt {
@@ -207,6 +192,7 @@ p {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  color: #041959;
 }
 
 .sec-steps .steps-block .steps-txt span {
@@ -222,10 +208,28 @@ p {
   margin-right: 0.6rem;
 }
 
+.sec-steps .steps-block .steps-txt .steps-txt-num {
+  position: relative;
+}
+
+.sec-steps .steps-block .steps-txt .steps-txt-num::after {
+  position: absolute;
+  left: calc(50% - 2px);
+  top: 100%;
+  width: 100%;
+  height: 40vh;
+  content: "";
+  border-left: 2px dashed #ea5413;
+}
+
 .sec-steps .steps-block .steps-txt .steps-sub {
   font-size: 1.6rem;
 }
 
+.sec-steps .step-video-title {
+  color: #041959;
+}
+
 .sec-steps .step-videofr {
   width: 100%;
 }

style.scss

@@ -203,43 +203,34 @@ p {
     width: 100%;
   }
   .steps-title {
-    font-size: 3rem;
+    font-size: 1.9rem;
     text-align: center;
     letter-spacing: 1px;
+    color: #041959;
   }
   .steps-title strong {
-    font-size: 5rem;
+    font-size: 2.5rem;
+    color: #041959;
   }
   .steps-block {
     padding: 0 1rem;
     display: flex;
-    flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
-    &::after {
-      position: absolute;
-      bottom: -1rem;
-      left: 0;
-      width: 100%;
-      height: 15rem;
-      background-color: #ffebe2;
-      content: " ";
-      z-index: -1;
-      border-radius: 2rem;
-    }
     .steps-imgfr {
-      width: 85%;
+      width: 70%;
       margin: 0 auto;
-      height: 45vh;
+      height: 20vh;
       background-position: center center;
       background-size: contain;
       background-repeat: no-repeat;
-      margin-bottom: 1.5rem;
+      
     }
     .steps-txt {
       display: flex;
       align-items: center;
+      color: #041959;
       span {
         display: inline-block;
         width: 35px;
@@ -252,11 +243,26 @@ p {
         text-align: center;
         margin-right: 0.6rem;
       }
+      .steps-txt-num {
+        position: relative;
+        &::after {
+          position: absolute;
+          left: calc(50% - 2px);
+          top: 100%;
+          width: 100%;
+          height: 40vh;
+          content: "";
+          border-left: 2px dashed #ea5413;
+        }
+      }
       .steps-sub {
         font-size: 1.6rem;
       }
     }
   }
+  .step-video-title {
+    color: #041959;
+  }
   .step-videofr {
     width: 100%;
   }