choozmo
/
spokesgirl_tests


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>AI Spokesgirl Video Generator</title>
<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="main.css">
<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>    
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body class="color__grey">

<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <!-- Container wrapper -->
    <div class="container-fluid">
      <!-- Navbar brand -->
      <a class="navbar-brand" href="#">AI Spokesgirl Video Generator</a>
  
      <!-- Toggle button -->
      <button class="navbar-toggler" type="button" data-mdb-toggle="collapse"
        data-mdb-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-bars text-light"></i>
      </button>
  
      <!-- Collapsible wrapper -->
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <!-- Left links -->
        <ul class="navbar-nav me-auto d-flex flex-row mt-3 mt-lg-0">
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link active" aria-current="page" href="/">
              <div>
                <i class="fas fa-home fa-lg mb-1"></i>
              </div>
              Home
            </a>
          </li>
          <li class="nav-item text-center mx-2 mx-lg-1">
            <a class="nav-link active" aria-current="page" href="https://telegram.org/">
              <div>
                <i class="fab fa-telegram-plane fa-lg mb-1"></i>
              </div>
              Telegram
            </a>
          </li>
        </ul>
        <!-- Right links -->
      </div>
      <!-- Collapsible wrapper -->
    </div>
    <!-- Container wrapper -->
  </nav>
  <!-- Navbar -->

<div class="container">
  <div class="row">
    <!-- <div class="col-1 col-lg-1"></div> -->
    <div class="col-12">
      <div class="card card__grback mb-5">
        <div class="card-body card__left">
        <!-- 根據搜尋內容顯示網站標題及網站內容簡介 -->
          <h5 class="card-title card__url" id="sitetitle"><i class="fas fa-book-open card__url__icon"></i>如何使用</h5>
          <div class="d-flex align-items-center justify-content-between">
            <div class="mr-4 animate_in">
              <div>
                <i class="fas fa-exclamation"></i>
                連結Telegram 帳號
              </div>
              <a class="btn download" href="https://telegram.org/">下載Telegram</a>
            </div>
            <div class="card-text card__intro animate_in" id="descriptions">
              <div class="intro_text pl-4"><span class="intro_num">1</span> 選擇人物 </div>
              <div class="intro_text pl-3"><span class="intro_num">2</span> 選擇背景</div>
              <div class="intro_text pl-2"><span class="intro_num">3</span> 輸入腳本文字 </div>
              <div class="intro_text"><span class="intro_num intro_num_last">4</span> 完成</div>
            </div>
            <div class="d-flex align-items-center animate_in">
              <div style="width:7rem;height:12rem;">
                <img src="assets/Labinaagu.png" alt="" style="width:100%;height:100%;">
              </div>
              <div class="intro__last"><i class="fas fa-check-circle" style="font-size:1.4rem;color: green;display: block;margin-bottom: 1rem;"></i>等待影片連結傳送至手機</div>
            </div>
            <!-- <div><i class="fab fa-youtube youtube__icon"></i></div> -->
          </div>
    <!--  <a href="#" class="btn btn-primary" id="globalrank2"></a> -->
        </div>
      </div>
      <!-- Text input Block  -->
      <div class="text_input animate_fade">
        <div class="step d-flex align-items-center">
          <h3 class='step__text'>Step 1</h3>
          <hr style="width:8rem;border-top:1.5px dotted grey;margin-right:.5rem;">
          <span>選擇人物</span>
        </div>
        <div class='characs d-flex w-100'>
          <div class="row justify-content-around">
            <div class="col-sm-12 col-md-4">
              <input type="radio" id="num1" name="characs" value="num1" checked>
              <label for="num1"><div class="card characs_fr"><img src="assets/girl1.png" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-4">
              <input type="radio" id="num2" name="characs" value="num2">
              <label for="num2"><div class="card characs_fr"><img src="assets/girl2.png" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-4">
              <input type="radio" id="num3" name="characs" value="num3">
              <label for="num3"><div class="card characs_fr"><img src="assets/girl3.png" alt=""></div></label>
            </div>
          </div>
        </div>
      </div>
      <div class="text_input animate_fade">
        <div class="step d-flex align-items-center">
          <h3 class='step__text'>Step 2</h3>
          <hr style="width:8rem;border-top:1.5px dotted grey;margin-right:.5rem;">
          <span>選擇背景</span>
        </div>
        <div class='characs d-flex w-100'>
          <div class="row justify-content-around">
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back1" name="back" value="back1" checked>
              <label for="back1"><div class="card back_fr"><img src="assets/patrick-perkins-3wylDrjxH-E-unsplash.jpg" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back2" name="back" value="back2">
              <label for="back2"><div class="card back_fr"><img src="assets/alberto-castillo-q-mx4mSkK9zeo-unsplash.jpg" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back3" name="back" value="back3">
              <label for="back3"><div class="card back_fr"><img src="assets/jarek-ceborski-jn7uVeCdf6U-unsplash.jpg" alt=""></div></label>
            </div>
            <div class="col-sm-12 col-md-3">
              <input type="radio" id="back4" name="back" value="back4">
              <label for="back4"><div class="card back_fr"><img src="assets/kelsey-dody-mt2QzllH814-unsplash.jpg" alt=""></div></label>
            </div>
          </div>
        </div>
      </div>
      <div class="text_input animate_fade">
        <div class="step d-flex align-items-center">
          <h3 class='step__text'>Step 3</h3>
          <hr style="width:8rem;border-top:1.5px dotted grey;margin-right:.5rem;">
          <span>輸入您的專屬影片的腳本文字</span>
        </div>
        <form id="searchform" class="d-flex input-group search__form">
          <textarea form="searchform" class="search__bar" placeholder="輸入腳本文字" aria-label="Domain Name" id="search_query"></textarea>
          <!-- <button class="btn btn-primary search__btn" type="button" data-mdb-ripple-color="dark" id="search__btn">
              完成
          </button> -->
        </form>
      </div>
      <div class="text_input text-center">
        <button type="submit" class="submit disabled">送出</button>
      </div>
      </div>
      </div>
      </div>
    <footer class="footer text-center p-4 bg-white">
      <div class="text-muted"> © 2021 Copyright: Choozmo. AI Spokesgirl Video Generator</div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.16.6/dist/sweetalert2.all.min.js"></script>
    <!-- <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script> -->
<script>

const input = document.getElementById("search_query");
const search__btn = document.getElementById("search__btn");
const submit__btn = document.querySelector('.submit');
const search__bar = document.querySelector('.search__bar');
const text_input = document.querySelectorAll('.text_input');
const animate_in = document.querySelectorAll('.animate_in');

search__bar.addEventListener('mouseenter', function() {
  if(search__bar.value) {
    submit__btn.classList.remove('disabled');
  }
});
search__bar.addEventListener('mouseleave', function() {
  if(search__bar.value) {
    submit__btn.classList.remove('disabled');
  }
});
window.addEventListener("scroll", function(){
  for(let i = 0;i < text_input.length;i++){
    const scrollPos = window.innerHeight + window.scrollY;
    if(scrollPos >= text_input[i].offsetTop){
      text_input[i].classList.add('fade_up');
    }
  }
});
window.onload = function() {
  for(let i = 0;i < animate_in.length;i++) {
    animate_in[i].classList.add('fade_in');
  }
}

let option;

 submit__btn.addEventListener('click', function(){
  Swal.fire({
  icon: 'success',
  title: '已送出！正在製作影片',
  text: '等待Telegram訊息通知傳送影片連結，約2分鐘後收到訊息'
  });
});

</script>

</body>

    
</html>