Accueil Explorer Aide
Connexion
choozmo
/
AI_Anchor_Demo
2
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

lan switch, demo

huai-sian il y a 4 ans
Parent
b4bc875115
commit
5e970fa41c
10 fichiers modifiés avec 161 ajouts et 44 suppressions
Vue séparée Afficher les stats Diff
  1. 1 1
      about.html
  2. 3 3
      demo.html
  3. 5 5
      features.html
  4. 2 2
      goto.js
  5. 27 19
      index.html
  6. 18 0
      js/lan.js
  7. 41 1
      style.css
  8. 0 0
      style.css.map
  9. 44 1
      style.scss
  10. 20 12
      video.html

+ 1 - 1
about.html
Voir le fichier 

@@ -31,7 +31,7 @@
 
                             </a>
 
                             <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
                                 <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
 
-                                    <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
 
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
 
                             </ul>
 
                         </li>
 
                     </ul>

+ 3 - 3
demo.html
Voir le fichier 

@@ -16,7 +16,7 @@
 
 <body>
 
     <div class="ai-spokesgril">
 
       <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
 
-          href="./index.html"><img class="me-3" style="width: 60px;" src="./img/home-button.png" alt="">AI
 
+          href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
 
           Spokesgirl</a>
 
       <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
 
           <li class="nav-item dropdown">
 
@@ -34,12 +34,12 @@
 
       <div class="container">
 
           <div class="row my-5">
 
               <div class="col m-2">
 
-                <a onclick="direct()">
 
+                <a onclick="direct()" class="demo-btn">
 
                   <h3 class="usecase-sub"><i class="fas fa-circle"></i> <lan set-lan="html:make_video_hand">手動製作影片</lan></h3>
 
                 </a>
 
               </div>
 
               <div class="col m-2">
 
-                <a href="#">
 
+                <a href="#" class="demo-btn">
 
                   <h3 class="usecase-sub"><i class="fas fa-circle"></i> 自動影片製作</h3>
 
                 </a>
 
               </div>

+ 5 - 5
features.html
Voir le fichier 

@@ -16,20 +16,20 @@
 
 
 <body>
 
 <div style="overflow: hidden;">
 
-    <div class="ai-spokesgril"> 
+    <div class="ai-spokesgril features-nav"> 
         <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900; margin-top: 30px; margin-left: 15px;" href="./index.html">
 
             <img class="me-5" style="width: 50px; margin-right: 15px;" src="./img/圖片1.png" alt="">
 
             AI Spokesgirl
 
         </a>
 
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
 
-            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0" style="list-style: none;font-size: 2rem;">
 
                 <li class="nav-item dropdown">
 
                     <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
                         中/En
 
                     </a>
 
-                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
-                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
 
-                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
 
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown" style="padding: .5rem 0;">
 
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en" style="padding: .5rem 0;font-size: 1.8rem;">English</button></li>
 
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh" style="padding: .5rem 0;font-size: 1.8rem;">中文</button></li>
 
                     </ul>
 
                 </li>
 
             </ul>

+ 2 - 2
goto.js
Voir le fichier 

@@ -30,9 +30,9 @@ function btnPrev() {
 
     
 };
 
 
-next.onclick = btnNext;
 
+// next.onclick = btnNext;
 
 
-prev.onclick = btnPrev;
 
+// prev.onclick = btnPrev;
 
 
 console.log(items)

+ 27 - 19
index.html
Voir le fichier 

@@ -6,12 +6,10 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>springpoolglass</title>
 
-
 
-
 
-
 
-    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
         integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
 
+      crossorigin="anonymous">
 
     <link rel="stylesheet" href="./style.css">
 
 </head>
 
 
@@ -36,42 +34,55 @@
 
                     <li><img src="./img/bgsec01.png" class="itemimg01 card-img img-fluid" alt="..."></li> -->
 
                 </ul>
 
             </div>
 
+            <div class="ai-spokesgril">
 
+                <ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-2">
 
+                    <li class="nav-item dropdown">
 
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
+                            中/En
 
+                        </a>
 
+                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
 
+                            <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
 
+                        </ul>
 
+                    </li>
 
+                </ul>
 
+              </div>
 
             <div class="card-img-overlay d-flex align-items-center">
 
                 <div>
 
                     <div class="row px-0 mx-0">
 
                         <div class="home-box col-4 mb-4">
 
                             <a style="text-decoration: none;" href="./about.html">
 
                             <!-- <img class="img-fluid" src="./img/Button01.png" alt=""> -->
 
-                            <button type="button" class="home-btn">簡介</button>
 
+                            <button type="button" class="home-btn" set-lan="html:index-about">簡介</button>
 
                             </a>
 
                         </div>
 
                         <div class="home-box col-4 mb-4">
 
                             <a style="text-decoration: none;" href="./features.html">
 
                             <!-- <img class="img-fluid" src="./img/Button_玻璃特性.png" alt=""> -->
 
-                            <button type="button" class="home-btn">特色</button>
 
+                            <button type="button" class="home-btn" set-lan="html:index-features">特色</button>
 
                             </a>
 
                         </div>
 
                         <div class="home-box col-4 mb-4">
 
                             <a style="text-decoration: none;" href="./video.html">
 
-                                <button type="button" class="home-btn">影片導覽</button>
 
+                                <button type="button" class="home-btn" set-lan="html:index-videos">影片導覽</button>
 
                                 <!-- <img class="img-fluid" src="./img/Button_影片導覽.png" alt=""> -->
 
                             </a>
 
                         </div>
 
                         <div class="home-box col-4 mb-4">
 
                             <a style="text-decoration: none;" href="./steps.html">
 
-                                <button type="button" class="home-btn">使用流程</button>
 
+                                <button type="button" class="home-btn" set-lan="html:index-steps">使用流程</button>
 
                             </a>
 
                             <!-- <img class="img-fluid" src="./img/Button_玻璃流程.png" alt=""> -->
 
                         </div>
 
                         <div class="home-box col-4 mb-4">
 
                             <a style="text-decoration: none;" href="./usecases.html">
 
-                                <button type="button" class="home-btn">應用情境</button>
 
+                                <button type="button" class="home-btn" set-lan="html:index-usecases">應用情境</button>
 
                             </a>
 
                             <!-- <img class="img-fluid" src="./img/Button_玻璃用途.png" alt=""> -->
 
                         </div>
 
                         <div class="home-box col-4 mb-4">
 
-                            <a style="text-decoration: none;" href="./make_video.html">
 
-                                <button type="button" class="home-btn">即時展示</button>
 
+                            <a style="text-decoration: none;" href="./demo.html">
 
+                                <button type="button" class="home-btn" set-lan="html:index-demo">即時展示</button>
 
                             </a>
 
                             <!-- <img class="img-fluid" src="./img/Button_玻璃藝術.png" alt=""> -->
 
                         </div>
 
@@ -81,18 +92,15 @@
 
         </div>
 
 
     </section>
 
-
 
-
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
 
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
         crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
         crossorigin="anonymous"></script>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
     <script src="./goto.js"></script>
 
+    <script src="js/lan.js"></script>
 
 </body>
 
 
 </html>

+ 18 - 0
js/lan.js
Voir le fichier 

@@ -166,6 +166,15 @@ var zh = {
 
     "feature_no4_li1": "支援中英文內容",
 
     "feature_no4_li2": "可加入字幕",
 
     "make_video_hand": "手動製作影片",
 
+    "5G_network": "5G網路",
 
+    "metaverse": "元宇宙",
 
+    "local_news": "地方日報",
 
+    "index-about": "簡介",
 
+    "index-features": "特色",
 
+    "index-videos": "影片導覽",
 
+    "index-steps": "使用流程",
 
+    "index-usecases": "應用情境",
 
+    "index-demo": "即時展示",
 
 };
 
 
 var en = {
 
@@ -286,6 +295,15 @@ var en = {
 
     "feature_no4_li1": "Support english & chinese content",
 
     "feature_no4_li2": "Caption included",
 
     "make_video_hand": "Make Video",
 
+    "5G_network": "5G Network",
 
+    "metaverse": "Metaverse",
 
+    "local_news": "Local News",
 
+    "index-about": "About",
 
+    "index-features": "Features",
 
+    "index-videos": "Samples",
 
+    "index-steps": "Steps",
 
+    "index-usecases": "Usecases",
 
+    "index-demo": "Try it",
 
 };
 
 
 function switchLanContent(val){

+ 41 - 1
style.css
Voir le fichier 

@@ -463,6 +463,21 @@ p {
 
           justify-content: space-between;
 
 }
 
 
+.ai-spokesgril .nav-link {
 
+  border: none;
 
+  outline: none;
 
+  background-color: transparent;
 
+  color: black;
 
+}
 
+
 
+.ai-spokesgril .dropdown-toggle {
 
+  text-decoration: none;
 
+}
 
+
 
+.ai-spokesgril .dropdown-toggle:hover {
 
+  text-decoration: none;
 
+}
 
+
 
 .sec-features {
 
   padding: 5rem 0;
 
 }
 
@@ -689,7 +704,7 @@ p {
 
 
 .video-int .video-box .video-btn {
 
   padding: 15px 50px;
 
-  width: 250px;
 
+  width: 280px;
 
   background: #fff;
 
   font-size: 32px;
 
 }
 
@@ -704,4 +719,29 @@ p {
 
   font-size: 32px;
 
   padding: 10px 20px;
 
 }
 
+
 
+.demo-btn {
 
+  width: 90%;
 
+  margin: 0 auto;
 
+  background: #fff;
 
+  font-size: 32px;
 
+  padding: 10px 20px;
 
+  text-decoration: none;
 
+  color: black;
 
+  border: 1px solid black;
 
+  display: block;
 
+  padding: 4rem 0;
 
+  text-align: center;
 
+}
 
+
 
+.features-nav .dropdown-toggle::after {
 
+  display: inline-block;
 
+  margin-left: .255em;
 
+  vertical-align: .255em;
 
+  content: "";
 
+  border-top: .3em solid;
 
+  border-right: .3em solid transparent;
 
+  border-bottom: 0;
 
+  border-left: .3em solid transparent;
 
+}
 
 /*# sourceMappingURL=style.css.map */

Fichier diff supprimé car celui-ci est trop grand
+ 0 - 0
style.css.map


+ 44 - 1
style.scss
Voir le fichier 

@@ -417,6 +417,18 @@ h6,
 
   display: flex;
 
   align-items: center;
 
   justify-content: space-between;
 
+  .nav-link {
 
+    border: none;
 
+    outline: none;
 
+    background-color: transparent;
 
+    color: black;
 
+  }
 
+  .dropdown-toggle {
 
+    text-decoration: none;
 
+    &:hover {
 
+      text-decoration: none;
 
+    }
 
+  }
 
 }
 
 
 .sec-features {
 
@@ -629,7 +641,7 @@ h6,
 
     margin-top: 30px;
 
     .video-btn{
 
       padding:15px 50px;
 
-      width: 250px;
 
+      width: 280px;
 
       background: #fff;
 
       font-size: 32px;
 
     }
 
@@ -649,3 +661,34 @@ h6,
 
     }
 
   }
 
 }
 
+
 
+// demo
 
+
 
+.demo-btn {
 
+  width: 90%;
 
+  margin: 0 auto;
 
+  background: #fff;
 
+  font-size: 32px;
 
+  padding: 10px 20px;
 
+  text-decoration: none;
 
+  color: black;
 
+  border: 1px solid black;
 
+  display: block;
 
+  padding: 4rem 0;
 
+  text-align: center;
 
+}
 
+
 
+.features-nav {
 
+  .dropdown-toggle {
 
+    &::after {
 
+      display: inline-block;
 
+      margin-left: .255em;
 
+      vertical-align: .255em;
 
+      content: "";
 
+      border-top: .3em solid;
 
+      border-right: .3em solid transparent;
 
+      border-bottom: 0;
 
+      border-left: .3em solid transparent;
 
+    }
 
+  }
 
+}

+ 20 - 12
video.html
Voir le fichier 

@@ -20,23 +20,34 @@
 
         <div class="card border-0">
 
             <!-- <img src="./img/T1.png" class="card-img img-fluid" alt="..."> -->
 
             <div class="card-img-overlay pb-0">
 
-                <div>
 
+                <div class="ai-spokesgril">
 
                     <a style="text-decoration: none;color:#000; font-size: 32px;font-weight: 900;"
 
                         href="./index.html"><img class="me-3" style="width: 50px;" src="./img/圖片1.png" alt="">AI
 
                         Spokesgirl</a>
 
+                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
 
+                        <li class="nav-item dropdown">
 
+                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
 
+                                中/En
 
+                            </a>
 
+                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
 
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
 
+                                <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
 
+                            </ul>
 
+                        </li>
 
+                    </ul>
 
                 </div>
 
                 <section class="video-int text-center" style="margin-top:100px;">
 
                     <div class="video-box">
 
-                        <button type="button" class="video-btn">5G網路</button>
 
+                        <button type="button" class="video-btn" set-lan="html:5G_network">5G網路</button>
 
                     </div>
 
                     <div class="video-box">
 
                         <button type="button" class="video-btn">NFT</button>
 
                     </div>
 
                     <div class="video-box">
 
-                        <button type="button" class="video-btn">元宇宙</button>
 
+                        <button type="button" class="video-btn" set-lan="html:metaverse">元宇宙</button>
 
                     </div>
 
                     <div class="video-box">
 
-                        <button type="button" class="video-btn">地方日報</button>
 
+                        <button type="button" class="video-btn" set-lan="html:local_news">地方日報</button>
 
                     </div>
 
                     <div class="video-box">
 
                         <button type="button" class="video-btn">VTuber</button>
 
@@ -49,17 +60,14 @@
 
 
 
     </section>
 
-
 
-
 
-
 
-    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"
 
-        integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN"
 
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
         crossorigin="anonymous"></script>
 
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"
 
-        integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/"
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
         crossorigin="anonymous"></script>
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+    <script src="js/lan.js"></script>
 
 </body>
 
 
 </html>

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff