Skip to content

cyh #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cyhwilliam wants to merge 1 commit into
base: master
Choose a base branch
from
Open

cyh #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 92 additions & 18 deletions Main/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,18 @@
<script type="text/javascript" src="static/cyh/jquery.1.10.2.js"></script>
<script type="text/javascript" src="static/cyh/bootstrap.min.js"></script>
<script type="text/javascript" src="static/cyh/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="static/cyh/jquery.validate.js"></script>
<script type="text/javascript" src="static/cyh/jquery-ui.min.js"></script>



</head>
<body>
<div id="startBar">
<h2>click me!</h2>
</div>


<div id="topBar">
<div id="icon">
<img src="static/images/robot.png" >
Expand All @@ -28,7 +34,49 @@

<div id="leftBar">
<!-- img-macbookair -->
<img src="static/images/macbook.png">
<!-- <img src="static/images/macbook.png"> -->

<div class="container">
<div id="content">
<div id="slider">
<div id="mask">
<ul>
<li id="slideFirst" class="firstAnimation">
<a href="">
<img src="static/images/1.jpg">
</a>
</li>

<li id="slideSecond" class="secondAnimation">
<a href="">
<img src="static/images/2.jpg">
</a>
</li>

<li id="slideThird" class="thirdAnimation">
<a href="">
<img src="static/images/3.jpg">
</a>
</li>

<li id="slideFourth" class="fourthAnimation">
<a href="">
<img src="static/images/4.jpg">
</a>
</li>

<li id="slideFifth" class="fifthAnimation">
<a href="">
<img src="static/images/5.jpg">
</a>
</li>
</ul>
</div>
<div id="progressBar"></div>
</div>
</div>
</div>

</div>

<div id="rightBar">
Expand All @@ -40,7 +88,7 @@ <h1>Manage your life</h1>
</p>
</div>

<button class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal" id="signIn">Sign in</button>
<button class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal" id="logIn">Login</button>
<button class="btn btn-lg btn-success" id="signUp" onclick="window.open('signup.html');">Sign up</button>

</div>
Expand Down Expand Up @@ -68,18 +116,25 @@ <h2 class="modal-title">Sign In</h2>
<form role="form" class="form-group">
<div class="form-group">
<label for="uesename">Username or Email</label>
<input class="form-control" id="username" placeholder="请输入用户名或邮箱地址">
<input class="form-control input-lg" id="username" required="required" placeholder="请输入用户名或邮箱地址" background="static/images/envelope.jpg">
<!-- <span class="input-group-addon glyphicon glyphicon-envelope form-control-feedback"></span>
<span class="help-block help-inline">你输入的信息是正确的</span> -->
</div>
<div class="form-group">
<label for="password">Password<a href="#">(forgot password)</a></label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
<label for="password">Password</label>
<input type="password" class="form-control input-lg" id="password" placeholder="请输入密码">
</div>
<div>
<a href="#">Forgot password?</a>
<p>No account, now <a href="signup.html">sign up</a></p>
</div>
<!-- <div class="checkbox">
<label>
<input type="checkbox" id="check">Keep it next time
</label>
<div> -->
<button class="btn btn-primary" id="submit">Sign in</button>

<button class="btn btn-primary btn-lg" id="submit" type="submit">Login</button>
</div>
</form>

Expand All @@ -92,34 +147,53 @@ <h2 class="modal-title">Sign In</h2>




<script type="text/javascript">

$(function(){
$('#topBar').click(function(){
$('#startBar').click(function(){
$('#startBar').hide('bounce',{times:'5',distance:'100'},1400);
$('#topBar')
.delay(1000)
.animate({width:'100%',height:'60',borderTopLeftRadius:'0',borderTopRightRadius:'0',borderBottomLeftRadius:'0',borderBottomRightRadius:'0'},1000,'easeInOutExpo')
.delay(2000)
.animate({width:'100%',height:'60',borderTopLeftRadius:'0',borderTopRightRadius:'0',borderBottomLeftRadius:'0',borderBottomRightRadius:'0',opacity:'1'},1000,'easeInOutExpo')
;
$('#icon')
.delay(1000)
.animate({top:'0',opacity:'1'}, 1000,'easeInOutExpo')
.animate({left: '2%'}, 1000,'easeInOutExpo');
$('#icon a')
.delay(1000)
.delay(2000)
.animate({opacity:"1"}, 1000,'easeInOutElastic');
$('#rightBar')
.delay(2000)
.animate({left: '50%',opacity:'1'},1000,'easeInOutExpo');
$('#leftBar img')
.delay(2000)
.delay(3000)
.animate({left: '50%',opacity:'.7'},1000,'easeInOutExpo');
$('#leftBar')
.delay(3000)
.animate({left: '10%',opacity:'1'},1000,'easeInOutExpo');


});
// validate插件验证
// $('.modal form')
// .delay(5000).validate({
// rules:{
// username:{
// required:true;
// }
// },
// success:function(label){
// label.text('ok!').addclass('valid');

// }

// });




});
</script>



</script>

</form>
</body>
</html>
38 changes: 26 additions & 12 deletions Main/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@
<script type="text/javascript" src="static/cyh/jquery.1.10.2.js"></script>
<script type="text/javascript" src="static/cyh/bootstrap.min.js"></script>
<script type="text/javascript" src="static/cyh/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="static/cyh/jquery.validate.js"></script>

</head>
<body>
<div id="topBar2">
Expand All @@ -23,7 +25,7 @@
<div id="leftBar2">

<div id="up2">
<h1>Contact Us</br>484-200-7390</h1>
<h3>Contact Us</br>484-200-7390</h3>
</div>

<div id="down2">
Expand All @@ -35,37 +37,49 @@ <h3>About Inforobot:</h3>
</div>
<div id="rightBar2">
<div id="progress">
<img src="images/progressBar.png">
<img src="#">
</div>
<div id="form">
<form class="form-horizontal" role="form">

<div class="form-group" class="has-success has-feedback">
<div class="form-group has-success has-feedback" class="has-success has-feedback">
<label class="col-sm-2 control-label" for="Name">Name:</label>
<input type="text" id="Name" class="form-control" placeholder="Please input your name">
<!-- <span class="glyphicon glyphicon-ok form-control-feedback"></span>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
<span class="glyphicon glyphicon-remove form-control-feedback"></span> -->
<input type="text" id="Name" class="form-control input-lg has-success" placeholder="Please input your name">
</input>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"for="Email">Email:</label>
<input type="email" id="Email" class="form-control"placeholder="Email address will be your log id"/>
<input type="email" id="Email" class="form-control input-lg" placeholder="Email address will be your log id"/>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"for="Password">Password:</label>
<input type="password" id="Password" class="form-control"placeholder="Please input your password"/>
<input type="password" id="Password" class="form-control input-lg"placeholder="Please input your password"/>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"for="Phone">Phone:</label>
<input type="text" id="Phone-Number" class="form-control"placeholder="Please input your phone-numeber"/>
<input type="text" id="Phone" class="form-control input-lg"placeholder="Please input your phone-numeber"/>
</div>
</form>
<div id="btns">
<button class="btn btn-sm btn-success" style="margin:5%;">submit</button>
<button class="btn btn-sm btn-primary" style="margin:5%;">reset </button>
<input type="reset" class="btn btn-sm btn-success btns" style="margin-top:10%;width:30%;" value="reset">
<input type="submit"class="btn btn-sm btn-primary btns" style="margin-top:10%;width:20%;" value="submit">

</div>
</div>
</div>


<script type="text/javascript">
$('#form form').validate({
rules:{
Name:{
required:true;
}
},
success:function(label){
alert(cool);
}
});
</script>
</body>
</html>
53 changes: 53 additions & 0 deletions Main/static/css/animation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
@keyframes slide{
0%{left:0px;}
16%{left: 0px;opacity: 1;}
20%{left: -500px;opacity: 0;}
21%{left:500px;opacity: 0;}
96%{left: 500px;opacity: 0;}
100%{left:0px;opacity: 1; }
}
@keyframes slideSecond{
0%{left:500px;}
16%{left: 500px;opacity: 0;}
20%{left: 0px;opacity: 1;}
36%{left:0px;opacity: 1;}
40%{left: -500px;opacity: 0;}
41%{left: 500px;opacity: 0;}
100%{left:500px;opacity: 0; }
}
@keyframes slideThird{
0%{left:500px;}
36%{left: 500px;opacity: 0;}
40%{left: 0px;opacity: 1;}
56%{left:0px;opacity: 1;}
60%{left: -500px;opacity: 0;}
61%{left: 500px;opacity: 0;}
100%{left:500px;opacity: 0; }
}
@keyframes slideFourth{
0%{left:500px;}
56%{left: 500px;opacity: 0;}
60%{left: 0px;opacity: 1;}
76%{left:0px;opacity: 1;}
80%{left: -500px;opacity: 0;}
81%{left: 500px;opacity: 0;}
100%{left:500px;opacity: 0; }
}
@keyframes slideFifth{
0%{left: -500px;opacity: 0;}
1%{left: 500px;opacity: 0;}
76%{left: 500px;opacity: 0;}
80%{left: 0px;opacity: 1;}
96%{left:0px;opacity: 1;}
100%{left: -500px;opacity: 0;}

}


@keyframes expand{
0%,20%,40%,60%,80%,100%{width:0%;opacity: .3;}
19%,39%,59%,79%,99%{width:0%;opacity: 0;}
16%,36%,56%,76%,96%{width:96%;opacity: .8;}
17%,37%,57%,77%,97%{width:96%;opacity: .3;}
18%,38%,58%,78%,98%{width:96%;opacity: 00;}
}
Loading