Skip to content

Commit fefa0bb

Browse files
vv13vv13
committed
fix: video fix and some style change
1 parent ac3bc82 commit fefa0bb

File tree

6 files changed

+112
-126
lines changed

6 files changed

+112
-126
lines changed

‎static/css/styles.css

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,13 @@ h2::after { content: " "; border: solid 2px #3dc9b3; display: block; width: 35px
212212
}
213213
}
214214

215+
@media (max-width: 768px) {
216+
.navbar-fixed-bottom {
217+
display: none;
218+
}
219+
}
220+
221+
215222
/* ==========================================================================
216223
Hero
217224
========================================================================== */
@@ -230,25 +237,13 @@ Hero
230237

231238
.signup-btn, .login-btn{ background: rgba(61, 201, 179, 1); padding: 20px 40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; color: #fff; text-transform: uppercase; letter-spacing: 1px; display: inline-block; -webkit-box-shadow: 0px 3px 0px 0px #309383; -moz-box-shadow: 0px 3px 0px 0px #309383; box-shadow: 0px 3px 0px 0px #309383; margin: 20px 0 0; font-weight: bold; }
232239
.signup-btn:hover, .login-btn:hover, .signup-btn:focus, .login-btn:focus { background: rgba(61, 201, 179, 0.6); color: #fff; }
233-
/* ========================================================================== */
234-
235-
video {
236-
position: fixed;
237-
top: 50%;
238-
left: 50%;
239-
min-width: 100%;
240-
min-height: 100%;
241-
width: auto;
242-
height: auto;
243-
z-index: -100;
244-
transform: translateX(-50%) translateY(-50%);
245-
background: url('/static/images/helloworld.jpg') no-repeat;
246-
background-size: cover;
247-
transition: 1s opacity;
240+
.signup-loginhref {
241+
color: #a1a9b0
248242
}
249-
243+
/* ========================================================================== */
250244

251245
#signup { padding: 40px 0 0px 0; height: auto; display: none;}
246+
252247
#login { padding: 40px 0 0px 0; height: auto; display: none;}
253248

254249
form {
@@ -259,9 +254,6 @@ form {
259254
.form h1 { margin: 0px 0px 20px 0;}
260255

261256
form input {
262-
-webkit-appearance: none;
263-
-moz-appearance: none;
264-
appearance: none;
265257
outline: 0;
266258
border: 1px solid rgba(255, 255, 255, 0.4);
267259
background-color: rgba(255, 255, 255, 0.2);
@@ -279,19 +271,19 @@ form input {
279271
}
280272

281273
form input:hover {
282-
background-color: rgba(255, 255, 255, 0.4);
274+
background-color: rgba(255, 255, 255, 0.5);
275+
}
276+
form input::placeholder {
277+
color: rgba(255, 255, 255, .7);
283278
}
284279

285280
form input:focus {
286281
background-color: white;
287282
width: 300px;
288-
color: #53e3a6;
283+
color: #555;
289284
}
290285

291286
.common-btn {
292-
-webkit-appearance: none;
293-
-moz-appearance: none;
294-
appearance: none;
295287
outline: 0;
296288
background: rgba(61, 201, 179, 1);
297289
border: 0;
@@ -465,6 +457,24 @@ InfoBox
465457
margin-left: 2px;
466458
}
467459

460+
461+
/* video */
462+
.bg-videosnap,
463+
.bg-video {
464+
display: none;
465+
position: fixed;
466+
top: 0;
467+
left: 0;
468+
right: 0;
469+
bottom: 0;
470+
z-index: -100;
471+
min-width: 100%;
472+
min-height: 100%;
473+
background: url('/static/images/helloworld.jpg') no-repeat;
474+
background-size: cover;
475+
transition: 1s opacity;
476+
}
477+
468478
/*Bubbles*/
469479
.bg-bubbles {
470480
position: absolute;
@@ -577,8 +587,13 @@ InfoBox
577587
}
578588
}
579589

590+
580591
/*Footer
581592
========================================================================== */
593+
.footer {
594+
display: flex;
595+
justify-content: space-between;
596+
}
582597
footer a { color: #a1a9b0; }
583598
footer { background-color: rgba(0,0,0,0.5); padding: 5px 0 5px; }
584599
footer p { color: #fff; }
@@ -601,3 +616,5 @@ Waypoints
601616
.delay-05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
602617
.delay-1s { animation-delay: 1s; -webkit-animation-delay: 1s; }
603618
.wp3 { background: url('/static/images/iphone-bg.png') no-repeat center center; background-position: 200px 10px; height: 100%; }
619+
620+

‎static/js/scripts.js

Lines changed: 26 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,21 @@
1-
$(document).ready(function() {
2-
//scaleVideoContainer();
3-
4-
initBannerVideoSize('.video-container .poster img');
5-
initBannerVideoSize('.video-container .filter');
6-
initBannerVideoSize('.video-container video');
7-
8-
$(window).on('resize', function() {
9-
// scaleVideoContainer();
10-
scaleBannerVideoSize('.video-container .poster img');
11-
scaleBannerVideoSize('.video-container .filter');
12-
scaleBannerVideoSize('.video-container video');
13-
});
14-
15-
$('.main-title').css('visibility', 'visible').addClass('animated fadeInDown');
16-
17-
});
18-
19-
function initBannerVideoSize(element){
20-
21-
$(element).each(function(){
22-
$(this).data('height', $(this).height());
23-
$(this).data('width', $(this).width());
24-
});
25-
26-
scaleBannerVideoSize(element);
27-
}
28-
29-
function scaleBannerVideoSize(element){
30-
31-
var windowWidth = $(window).width(),
32-
windowHeight = $(window).height() + 5,
33-
videoWidth,
34-
videoHeight;
35-
36-
$(element).each(function(){
37-
var videoAspectRatio = $(this).data('height')/$(this).data('width');
38-
39-
$(this).width(windowWidth);
40-
41-
if(windowWidth < 1000){
42-
videoHeight = windowHeight;
43-
videoWidth = videoHeight / videoAspectRatio;
44-
$(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
45-
46-
$(this).width(videoWidth).height(videoHeight);
47-
}
48-
49-
$('.homepage-hero-module .video-container video').addClass('fadeIn animated');
50-
51-
});
52-
}
1+
// client symbol
2+
window.os = function() {
3+
var ua = navigator.userAgent,
4+
isWindowsPhone = /(?:Windows Phone)/.test(ua),
5+
isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
6+
isAndroid = /(?:Android)/.test(ua),
7+
isFireFox = /(?:Firefox)/.test(ua),
8+
isChrome = /(?:Chrome|CriOS)/.test(ua),
9+
isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
10+
isPhone = /(?:iPhone)/.test(ua) && !isTablet,
11+
isPc = !isPhone && !isAndroid && !isSymbian;
12+
return {
13+
isTablet: isTablet,
14+
isPhone: isPhone,
15+
isAndroid : isAndroid,
16+
isPc : isPc
17+
};
18+
}();
5319

5420
/*
5521
**********************************************************
@@ -59,11 +25,11 @@ function scaleBannerVideoSize(element){
5925

6026
// Toggle tranparent navbar when the user scrolls the page
6127

62-
$(window).scroll(function() {
63-
if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
64-
{
65-
$('.opaque-navbar').addClass('opaque');
66-
} else {
67-
$('.opaque-navbar').removeClass('opaque');
68-
}
69-
});
28+
// $(window).scroll(function() {
29+
// if($(this).scrollTop() > 50) /*height in pixels when the navbar becomes non opaque*/
30+
// {
31+
// $('.opaque-navbar').addClass('opaque');
32+
// } else {
33+
// $('.opaque-navbar').removeClass('opaque');
34+
// }
35+
// });

‎static/js/user.js

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,14 @@
11
var User = function () {
2+
var currentId = 'hero';
23

4+
function animateToggle(targetId) {
5+
$('#' + currentId).fadeOut(500);
6+
$('#' + currentId).css("display", "none");
7+
$('.header-' + targetId).addClass("active").siblings().removeClass("active");
8+
$('#' + targetId).fadeIn(1000);
9+
currentId = targetId;
10+
}
311
var signupHandler = function () {
4-
$(".signup").click(function(event){
5-
event.preventDefault();
6-
$('#hero').fadeOut(1000);
7-
$('#hero').css("display", "none");
8-
9-
$('#login').css("display", "none");
10-
$('.header-signup').addClass("active").siblings().removeClass("active");
11-
$('#signup').fadeIn(500);
12-
});
1312

1413
$('#signup-btn').on('click', function (e) {
1514
e.preventDefault();
@@ -29,15 +28,6 @@ var User = function () {
2928
};
3029

3130
var loginHandler = function () {
32-
$('.login').on('click', function (e) {
33-
e.preventDefault();
34-
$('#hero').fadeOut(1000);
35-
$('#hero').css("display", "none");
36-
37-
$('#signup').css("display", "none")
38-
$('.header-login').addClass("active").siblings().removeClass("active");
39-
$('#login').fadeIn(500);
40-
});
4131

4232
$('#login-btn').on('click', function (e) {
4333
e.preventDefault();
@@ -63,6 +53,15 @@ var User = function () {
6353
$('.header-li').on('click', function (e) {
6454
$(this).addClass("active").siblings().removeClass("active");
6555
});
56+
$(".hero-move").click(function(){
57+
animateToggle('hero');
58+
});
59+
$(".signup-move").click(function(){
60+
animateToggle('signup');
61+
});
62+
$('.login-move').on('click', function() {
63+
animateToggle('login');
64+
});
6665
};
6766

6867
return {
@@ -73,4 +72,4 @@ var User = function () {
7372
commonHandler();
7473
}
7574
};
76-
}();
75+
}();

‎templates/footer.html

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
{{ define "footer.html" }}
22
<footer class="navbar navbar-fixed-bottom">
3-
<div class="container">
4-
<div class="row">
5-
<div class="col-md-6">
6-
<ul class="legals">
7-
<li><a href="#">Terms &amp; Conditions</a></li>
8-
<li><a href="#">Legals</a></li>
9-
</ul>
10-
</div>
11-
<div class="col-md-6 credit">
3+
<div class="container">
4+
<div class="footer">
5+
<ul class="legals">
6+
<li><a href="#">Terms &amp; Conditions</a></li>
7+
<li><a href="#">Legals</a></li>
8+
</ul>
9+
<div class="credit">
1210
<p>A dockernized service for <a href="#"><em>SS</em></a></p>
1311
</div>
1412
</div>
15-
</div>
13+
</div>
1614
</footer>
1715
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
1816
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
1917
<script src="/static/js/bootstrap.min.js"></script>
2018
<!-- Toastr script-->
2119
<script src="/static/js/toastr.min.js"></script>
22-
{{end}}
20+
{{end}}

‎templates/header.html

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@
44
<div class="container">
55
<div class="navbar-header">
66
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
7-
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
8-
</button>
7+
<i class="iconfont icon-caidanlan" style="color:white;"></i>
8+
</button>
99
<a class="navbar-brand" href="/">ignite</a>
1010
</div>
1111
<div class="collapse navbar-collapse" id="navMain">
1212
<ul class="nav navbar-nav pull-right">
13-
<li class="active header-li"><a href="/">首页</a></li>
13+
<li class="active header-li header-hero"><a class="hero-move" href="#">首页</a></li>
1414
{{ if not .uInfo }}
15-
<li class="header-li header-signup"><a class="signup" href="#">注册</a></li>
16-
<li class="header-li header-login"><a class="login" href="#">登录</a></li>
15+
<li class="header-li header-signup"><a class="signup-move" href="#">注册</a></li>
16+
<li class="header-li header-login"><a class="login-move" href="#">登录</a></li>
1717
{{ else }}
1818
<li class="header-li"><a href="/panel/logout">退出</a></li>
1919
{{ end }}
20-
<li class="header-li"><a href="#">关于</a></li>
20+
<!-- <a class="header-li"><a href="#">关于</a></a> -->
2121
</ul>
2222
</div>
2323
</div>
2424
</div>
25-
{{end}}
25+
{{end}}

‎templates/index.html

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
1212
<link href="/static/css/styles.css" rel="stylesheet">
1313
<link href="/static/css/animate.css" rel="stylesheet">
14+
<!-- iconfont -->
15+
<link rel="stylesheet" href="//at.alicdn.com/t/font_537943_aej5aeuyfym34n29.css">
1416
<!-- Toastr -->
1517
<link href="/static/css/toastr.min.css" rel="stylesheet">
1618
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
@@ -26,7 +28,8 @@
2628

2729
{{template "header.html" .}}
2830

29-
<video playsinline autoplay muted loop>
31+
<div class="bg-videosnap"></div>
32+
<video playsinline autoplay muted loop class="bg-video">
3033
<source src="/static/images/helloworld.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
3134
<source src="/static/images/helloworld.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
3235
</video>
@@ -43,8 +46,8 @@ <h1 class="animated swing delay-1s">ignite<span>V1</span></h1>
4346
<div class="row">
4447
<div class="col-md-6 col-md-offset-3 text-center">
4548
{{ if not .uInfo }}
46-
<a href="#" class="signup-btn signup">激活账号</a>
47-
<p class="login-text">已注册用户，点击 <em><a class="login" href="#">此处</a></em> 登录</p>
49+
<a href="#" class="signup-btn signup-move">激活账号</a>
50+
<p class="login-text">已注册用户，点击 <em><a class="login-move signup-loginhref" href="#">此处</a></em> 登录</p>
4851
{{ else }}
4952
<a href="/panel/index" class="signup-btn">控制台</a> {{ end }}
5053
</div>
@@ -74,11 +77,14 @@ <h1>用户登录</h1>
7477
<script src="/static/js/scripts.js"></script>
7578
<script src="/static/js/user.js"></script>
7679
<script src="/static/js/header.js"></script>
80+
7781
<script>
78-
$(document).ready(function () {
82+
(function(){
7983
User.init();
8084
Header.init();
81-
});
85+
var videoElm = window.os.isPc ? '.bg-video' : '.bg-videosnap';
86+
document.querySelector(videoElm).style.display = 'block';
87+
})()
8288
</script>
8389
</body>
8490

0 commit comments

Comments
 (0)