vtuber page

layouts/_default/taxonomy.html

@@ -110,6 +110,45 @@
     <!-- /#all -->
 
     {{ partial "scripts.html" . }}
-
+    <script>
+        function tab1 () {
+            console.log('pass');
+            if(('.v-tabs').length){
+                // Show the first tab by default
+            $('.v-tabs-stage>div').hide();
+            $('.v-tabs-stage>div:first').show();
+            $('.v-tabs-nav li:first').addClass('v-tab-active');
+
+            // Change tab class and display content
+            $('.v-tabs-nav a').on('click', function(event){
+                event.preventDefault();
+                $('.v-tabs-nav li').removeClass('v-tab-active');
+                $(this).parent().addClass('v-tab-active');
+                $('.v-tabs-stage>div').hide();
+                $($(this).attr('href')).show();
+            });
+            }
+        }
+        function tab2 () {
+            console.log('pass');
+            if(('.d-tabs').length){
+                // Show the first tab by default
+            $('.d-tabs-stage>div').hide();
+            $('.d-tabs-stage>div:first').show();
+            $('.d-tabs-nav li:first').addClass('d-tab-active');
+
+            // Change tab class and display content
+            $('.d-tabs-nav a').on('click', function(event){
+                event.preventDefault();
+                $('.d-tabs-nav li').removeClass('d-tab-active');
+                $(this).parent().addClass('d-tab-active');
+                $('.d-tabs-stage>div').hide();
+                $($(this).attr('href')).show();
+            });
+            }
+        }
+        tab1();
+        tab2();
+    </script>
   </body>
 </html>

layouts/partials/scripts.html

@@ -2,6 +2,7 @@
 <script src="//code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
 
+
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0/jquery.counterup.min.js"></script>

layouts/shortcodes/vtuber.html

@@ -25,22 +25,22 @@
                         <h2>Top Vtuber</h2>
                         <div class="owl-carousel project">
                             <ul class="item rankblock">
-                                <li><span>No1.</span> Kizuna AI</li>
-                                <li><span>No2.</span> Gawr Gura </li>
-                                <li><span>No3.</span> Inugami Korone </li>
+                                <li><span>No1.</span> Gawr Gura</li>
+                                <li><span>No2.</span> Inugami Korone </li>
+                                <li><span>No3.</span> Usada Pekora </li>
                             </ul>
                             <ul class="item rankblock">
-                                <li><span>No4.</span> Kizuna AI</li>
-                                <li><span>No5.</span> Gawr Gura </li>
-                                <li><span>No6.</span> Inugami Korone </li>
+                                <li><span>No4.</span> Mori Calliope</li>
+                                <li><span>No5.</span> Shirakami Fubuki</li>
+                                <li><span>No6.</span> Houshou Marine </li>
                             </ul>
                             <ul class="item rankblock">
-                                <li><span>No7.</span> Kizuna AI</li>
-                                <li><span>No8.</span> Gawr Gura </li>
-                                <li><span>No9.</span> Inugami Korone </li>
+                                <li><span>No7.</span> Kiryu Coco</li>
+                                <li><span>No8.</span> Watson Amelia</li>
+                                <li><span>No9.</span> Minato Aqua</li>
                             </ul>
                             <ul class="item rankblock">
-                                <li><span>No10.</span> Inugami Korone </li>
+                                <li><span>No10.</span> Uruha Rushi</li>
                             </ul>
                         </div>
                     </div>
@@ -48,4 +48,117 @@
             </div>
         </div>
     </section>
+    <section class="row sec sec03">
+        <div class="container">
+            <h2>各國 VTuber</h2>
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="v-tabs">
+                        <ul class="v-tabs-nav">
+                          <li><a href="#tab-1">日本</a></li>
+                          <li><a href="#tab-2">歐美</a></li>
+                          <li><a href="#tab-3">印尼</a></li>
+                        </ul>
+                        <div class="v-tabs-stage">
+                          <div id="tab-1">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>Kizuna AI キズナアイ</h2>
+                                        <p>絆愛（日語：キズナアイ；英語：Kizuna AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//6IjFyOQUPf8?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="tab-2">
+                            <div class="owl-carousel homepage">
+                                <div class="row item">
+                                    <div class="col-md-7">
+                                        <div class="txt-block">
+                                            <h2>Ami Yamato</h2>
+                                            <p>Ami Yamato是一位來自日本居住在倫敦的女性，影片以Vlog的形式呈現，紀錄她生活的點滴，視頻中還經常有真人坐在她的旁邊。</p>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-5">
+                                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//9tYxBQbkmCM?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                    </div>
+                                </div>
+                                <div class="row item">
+                                    <div class="col-md-7">
+                                        <div class="txt-block">
+                                            <h2>Miquela</h2>
+                                            <p>來自洛杉磯，現年19歲的Lil Miquela便是其中佼佼者。擁有巴西與西班牙血統，Lil Miquela總是跟上最新趨勢的時髦穿搭，齊瀏海、雀斑與雙包包頭的個性造型，吸引了超過百萬的全球追蹤者關注。</p>
+                                        </div>
+                                    </div>
+                                    <div class="col-md-5">
+                                        <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//rQkvFXDi8Ic?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                    </div>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="tab-3">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>Kizuna AI キズナアイ</h2>
+                                        <p>絆愛（日語：キズナアイ；英語：Kizuna AI）是一個日本虛擬偶像、影音部落客，經營有YouTube頻道「A.I.Channel」和「A.I.Games」，也是公認的第一個虛擬YouTuber</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//IzHhpC_bD6g?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <section class="row sec sec04">
+        <div class="container">
+            <h2>特殊類型 VTuber</h2>
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="d-tabs">
+                        <ul class="d-tabs-nav">
+                          <li><a href="#tab2-1">企業</a></li>
+                          <li><a href="#tab2-2">非人像</a></li>
+                        </ul>
+                        <div class="d-tabs-stage">
+                          <div id="tab2-1">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>企業形象VTuber</h2>
+                                        <p>各企業也紛紛推出VTuber，Netflix推出N子黑野明擔任宣傳大使。樂敦製藥與三得利也皆推出VTuber，茨城縣則由VTuber擔任形象大使</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//QIbinFBjJxA?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                          <div id="tab2-2">
+                            <div class="row">
+                                <div class="col-md-7">
+                                    <div class="txt-block">
+                                        <h2>非人像玩偶VTuber</h2>
+                                        <p>風靡全球的三麗鷗招牌萌貓 Hello Kitty，在2018年正式出道，當起了 VTuber。除此之外，花生君是另一特別 VTuber，是個外型特殊的花生。</p>
+                                    </div>
+                                </div>
+                                <div class="col-md-5">
+                                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; max-width: 100%; box-shadow: 1px 1px 8px 2px grey; border-radius: 1rem;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed//uwUVb7jPMJo?autoplay=1&mute=1' frameborder='0' allowfullscreen></iframe></div>
+                                </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                </div>
+            </div>
+        </div>
+    </section>
 </div>

static/css/custom.css

@@ -427,9 +427,49 @@
 
 .sec02 {
   background-color: #f3f3f9;
+  position: relative;
   /* clip-path: polygon(0% -10%, 100% 0%, 110% 100%, 0% 100%); */
 }
 
+.sec03, .sec04 {
+  text-align: center;
+  padding: 12rem 0;
+}
+
+.sec04 {
+  padding: 8rem 0;
+  background-color: #f3f3f9;
+  position: relative;
+  padding-top: 3rem;
+}
+
+.sec04::after {
+    content: "";
+    position: absolute;
+    top: -66px;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 66px;
+    transform: rotate(180deg);
+    background-image: url("https://animoto.com/static/desktop-wiggle-6af922ddb441fd9fda898e14ecad1127.svg");
+    background-size: 3840px 66px;
+    background-position: 0 0;
+}
+
+.sec02::after {
+    content: "";
+    position: absolute;
+    bottom: -66px;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 66px;
+    background-image: url("https://animoto.com/static/desktop-wiggle-6af922ddb441fd9fda898e14ecad1127.svg");
+    background-size: 3840px 66px;
+    background-position: 0 0;
+}
+
 .project {
   max-height: 15rem;
 }
@@ -504,6 +544,84 @@
   border: 5px solid white;
 }
 
+.v-tabs {
+  max-width: 100%;
+}
+.v-tabs-nav li {
+  float: left;
+  width: 33.3%;
+  list-style: none;
+}
+.v-tabs-nav li a {
+  color: #23408c;
+  font-size: 2.5rem;
+  letter-spacing: 2px;
+  display: block;
+  font-weight: 600;
+  padding: 10px 0;
+  text-align: center;
+  text-decoration: none;
+}
+.v-tabs-nav li a:hover {
+  color: black;
+}
+.v-tab-active a {
+  background: #fff;
+  border-bottom: 2px solid #23408c;
+  color: #2db34a;
+  cursor: default;
+}
+.v-tabs-stage {
+  clear: both;
+  padding: 40px 30px 10px 30px;
+  position: relative;
+  top: -1px;
+  text-align: left;
+}
+
+#block-vtuber .v-tabs-stage h2 {
+  font-size: 2.5rem;
+}
+
+.d-tabs {
+  max-width: 100%;
+}
+.d-tabs-nav li {
+  float: left;
+  width: 50%;
+  list-style: none;
+}
+.d-tabs-nav li a {
+  color: #23408c;
+  font-size: 2.5rem;
+  letter-spacing: 2px;
+  display: block;
+  font-weight: 600;
+  padding: 10px 0;
+  text-align: center;
+  text-decoration: none;
+}
+.d-tabs-nav li a:hover {
+  color: black;
+}
+.d-tab-active a {
+  background: transparent;
+  border-bottom: 2px solid #23408c;
+  color: #2db34a;
+  cursor: default;
+}
+.d-tabs-stage {
+  clear: both;
+  padding: 40px 30px 10px 30px;
+  position: relative;
+  top: -1px;
+  text-align: left;
+}
+
+#block-vtuber .d-tabs-stage h2 {
+  font-size: 2.5rem;
+}
+
 
 
 

static/js/front.js

@@ -20,8 +20,10 @@ $(function () {
   counters()
   demo()
   contactFormAjax()
+  tab()
 })
 
+
 // Ajax contact
 function contactFormAjax () {
   var form = $('.contact-form-ajax')
@@ -123,6 +125,19 @@ function sliders () {
       lazyLoad: true
     })
 
+    $(".eu-vtuber").owlCarousel({
+      navigation: true, // Show next and prev buttons
+      navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],
+      dots: false,
+      slideSpeed: 300,
+      paginationSpeed: 400,
+      autoPlay: true,
+      stopOnHover: true,
+      singleItem: true,
+      afterInit: '',
+      lazyLoad: true
+    })
+
     $('.homepage').owlCarousel({
       navigation: false, // Show next and prev buttons
       navigationText: ['<i class="fas fa-angle-left"></i>', '<i class="fas fa-angle-right"></i>'],

webSite/content/news/netflix-vtuber.md

@@ -4,7 +4,7 @@ date= "2021-07-23T00:33:53+08:00"
 tags = ["vtuber"]
 type = "blog"
 categories = ["AI"]
-banner = "img/banners/banner-3.jpg"
+banner = "https://cdn-japantimes.com/wp-content/uploads/2021/05/np_file_84325.jpeg"
 summary = "N-ko, a 'sheep-human lifeform' Vtuber promoting Netflix's anime streaming service, is seen in a still image obtained from a YouTube video."
 +++
 

webSite/content/news/shachi-vtuber.md

@@ -4,7 +4,7 @@ date = "2021-07-16T00:21:34+08:00"
 tags = ["vtuber"]
 type = "blog"
 categories = ["news"]
-banner = "img/banners/banner-3.jpg"
+banner = "https://assets.matters.news/embed/f53d65e0-d094-49ea-9a1c-58a2c0de9db9.jpeg"
 summary = "ピンキーポップヘップバーンは自身のYouTubeチャンネルにて活動の終了を報告。活動終了に関しては昨年半ばからスタッフと相談していたとのことで、その理由について、次のやりたいことができたため活動を続けるのが難しくなったと説明している。"
 +++
 

webSite/content/news/vtuber-2020.md

@@ -4,7 +4,7 @@ date= "2021-07-27T00:33:53+08:00"
 tags = ["vtuber"]
 type = "blog"
 categories = ["AI"]
-banner = "img/banners/banner-3.jpg"
+banner = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRo2hOaAWfT4_ZGQtY9NpVO0_3em-LJ1SeycQ&usqp=CAU"
 summary = "On Sept. 18, 2020, the friendliest war ever conducted between Canadians and Americans commenced. And while not the most expensive war in total, the exuberance of its armaments left its primary target, a pink-haired digital goth girl, aghast."
 +++
 

webSite/content/news/vtuber-jp.md

@@ -4,7 +4,7 @@ date= 2021-07-20T00:33:53+08:00
 tags = ["vtuber"]
 type = "blog"
 categories = ["AI"]
-banner = "img/banners/banner-3.jpg"
+banner = "https://prtimes.jp/i/30865/299/ogp/d30865-299-f411605f13933b831d22-6.png"
 summary = "ツイートします。厚労省のＨＰ確認したら 本当にファイザー製のワクチンに「塩化カリウム」が含まれている。これ囚人の死刑の際に使われる劇薬なんだけどね。多量に体内に入ると心停止する毒だよ。マジでお前ら全員ムショにぶち込んでやるから覚悟しておけよっ！」"
 +++