choozmo
/
AI_Anchor_Demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ai_anchor_Demo</title>
  
  <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>

<body>
  <div class="row px-0 mx-0">
    <div class="col-lg-2 px-0">
      <div class="card border-0">
        <img style="width:14vw;" src="./img/about/home_六角.png" alt="...">
        <div class="card-img-overlay d-flex justify-content-center align-items-center">
          <div>
            <a href="./index.html">
              <img class="home-btn" style="width: 70px; position: relative; right:1.5vw; bottom:20px;"
                src="./img/about/home_黑.png" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-9 px-0">
      <div class="card border-0">
        <img style="position: relative; right:20px;" class="img-fluid" src="./img/about/Bar.png" alt="">
        <div class="card-img-overlay">
          <div class="mt-3 me-2">
            <h1 style="font-size:3rem;" class="fw-bold mb-0 text-white">即時展示</h1>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-1 px-0">
      <!-- <nav style="margin-top: 40px;" class="navbar"> -->
      <div style="margin-top: 40px;">
        <ul style="float: left;" class="navbar-nav mb-2 mb-lg-0 me-3">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" style="font-size: 18px;" 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);window.location.reload();" value="en">English</button>
              </li>
              <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh"
                  onclick="changeLan(this);window.location.reload();" value="zh">中文</button></li>
            </ul>
          </li>
        </ul>
        <div style="float: left;" class="me-auto mt-2">
          <a id="expand" onclick="openFullscreen();" style="cursor: pointer;" class="border-0"><i
              style="font-size: 18px;" class="fas fa-expand text-dark"></i></a>
          <a id="compression" onclick="closeFullscreen();" style="cursor: pointer;" class="border-0"><i
              class="fas fa-compress text-dark"></i></a>
        </div>
      </div>
      <!-- </nav> -->
    </div>
  </div>
  <section class="sec-usecase">
    <div class="container-fluid">
      <div style="width: 85vw; margin:0 auto;">
        <div class="row my-5">
          <div class="col m-2">
            <a onclick="direct()" style="background:#193179;" class="demo-btn">
              <h3 class="usecase-sub">
                <!-- <i class="fas fa-circle"></i> -->
                <lan set-lan="html:make_video_hand">手動製作影片</lan>
              </h3>
            </a>
            <div class="demo-box">
              <div class="demo-card">
                <ul>
                  <li>只需要等待數分鐘即可生產完成</li>
                  <li>可上傳圖片或是影片作為背景</li>
                  <li>生成MP4檔</li>
                </ul>
              </div>
              <div class="text-center">
                <button style="background:#193179;" class="demo-CTA border-0 mb-5">開始制作</button>
              </div>
            </div>
          </div>
          <div class="col m-2">
            <a href="" class="demo-btn" style="background:#294290;">
              <h3 class="usecase-sub">
                <!-- <i class="fas fa-circle"></i> -->
                <lan set-lan="html:make_video_auto">自動影片製作</lan>
              </h3>
              <div>
              </div>
            </a>
            <div class="demo-box">
              <div class="demo-card">
                <ul>
                  <li>只需要等待數分鐘即可生產完成</li>
                  <li>可上傳圖片或是影片作為背景</li>
                  <li>生成MP4檔</li>
                </ul>
              </div>
              <div class="text-center">
                <button style="background:#193179;" class="demo-CTA border-0 mb-5">開始制作</button>
              </div>
            </div>
          </div>
          <div class="col m-2">
            <a class="demo-btn" style="background: #3C57A7;" data-bs-toggle="modal" data-bs-target="#exampleModal">
              <h3 class="usecase-sub">
                <!-- <i class="fas fa-circle"></i> -->
                <lan set-lan="html:make_video_trial">免費註冊使用</lan>
              </h3>
            </a>
            <div class="demo-box">
              <div class="demo-card text-center">
               <img src="./img/Video_choozmo_qrcode.png" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="closeplay modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel2"
      aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content border-0">
          <div class="modal-header border-0">
            <h5 class="modal-title" id="exampleModalLabel"></h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><img
                src="./img/close.svg" alt=""></button>
          </div>
          <div class="modal-body text-center">
            <h2><i class="far fa-caret-square-right me-2"></i>
              <lan set-lan="html:make_video_trial">免費註冊使用</lan>
            </h2>
            <img src="./img/Video_choozmo_qrcode.png" alt="" width="450">
            <a href="https://video.choozmo.com" style="text-decoration: none;color: black;">
              <h2>https://video.choozmo.com</h2>
            </a>
          </div>
        </div>
      </div>
    </div>

  </section>
  <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.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="js/lan.js"></script>
  <script>
    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';
        } 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>