iotcat
/
website_material
mirror of https://github.com/string1995/website_material.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

update

Browse Source
master
hhCandy 5 years ago
parent 1a5067ea15
commit a7b9f289b2
24 changed files with 3071 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 130
      用户手机控制界面/about.html
  2. 1656
      用户手机控制界面/css/jquery.mmenu.all.css
  3. 833
      用户手机控制界面/css/style.css
  4. BIN
      用户手机控制界面/images/Thumbs.db
  5. BIN
      用户手机控制界面/images/arrow_up.png
  6. BIN
      用户手机控制界面/images/banner.jpg
  7. BIN
      用户手机控制界面/images/banner1.jpg
  8. BIN
      用户手机控制界面/images/i1.png
  9. BIN
      用户手机控制界面/images/i10.png
  10. BIN
      用户手机控制界面/images/i2.png
  11. BIN
      用户手机控制界面/images/i3.png
  12. BIN
      用户手机控制界面/images/i4.png
  13. BIN
      用户手机控制界面/images/i5.png
  14. BIN
      用户手机控制界面/images/i6.png
  15. BIN
      用户手机控制界面/images/i7.png
  16. BIN
      用户手机控制界面/images/i8.png
  17. BIN
      用户手机控制界面/images/i9.png
  18. BIN
      用户手机控制界面/images/img1.jpg
  19. BIN
      用户手机控制界面/images/img2.jpg
  20. BIN
      用户手机控制界面/images/menu-icon.png
  21. 306
      用户手机控制界面/index.html
  22. 5
      用户手机控制界面/js/jquery.min.js
  23. 133
      用户手机控制界面/js/jquery.mmenu.min.all.js
  24. 8
      用户手机控制界面/js/responsiveslides.min.js

130
用户手机控制界面/about.html
Unescape View File

@ -0,0 +1,130 @@
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<!--Custom Theme files-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--Custom Theme files-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css?v=5.4.4" />
<!--//Custom Theme files-->
<!--web-fonts-->
<link href='http://fonts.useso.com/css?family=Jura:400,300,500,600' rel='stylesheet' type='text/css'>
<!--//web-fonts-->
<!--js-->
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.all.js?v=5.4.4"></script>
<!-- //js -->
</head>
<body>
<div class=" mm-wrapper" id="page">
<div class="push-menu ">
<div class="banner">
<div class="header-top">
<ul>
<li><span></span></li>
<li><span class="chrg"></span> </li>
<li>10:00 </li>
</ul>
</div>
<div class="banner-text">
<div class="menu">
<a href="#menu"><img src="images/menu-icon.png" alt=""/></a>
<nav id="menu">
<ul class="">
<li class="menu-title">MENU</li>
<li><a href="#"><span class="icons"> </span>Dashboard</a></li>
<li><a href="#"><span class="icons icn2"> </span> Activity</a></li>
<li><a href="#"><span class="icons icn3"> </span> Tasks</a></li>
<li><a href="#"><span class="icons icn4"> </span> Gallery</a></li>
<li><a href="#"><span class="icons icn5"> </span> Account settings</a></li>
</ul>
</nav>
<script type="text/javascript">
$(function() {
$("#menu")
.mmenu({
extensions : [ "theme-dark", "effect-listitems-slide" ],
iconPanels : {
add : true,
visible : 1
},
navbar : {
add : false
},
counters : true
}).on( 'click',
'a[href^="#/"]',
function() {
alert( "Thank you for clicking, but that's a demo link." );
return false;
}
);
});
</script>
<!-- /script-for-menu -->
</div>
<div class="title">
<div class="title-left">
<img src="images/img1.jpg" alt=""/>
</div>
<div class="title-right">
<h2>Vestibulum ante </h2>
<h6>UI/UX Designer</h6>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="clear"> </div>
<div class="banner-bottom">
<div class="banner-bottom-left">
<h3>13</h3>
<p>Remaining tasks </p>
</div>
<div class="banner-bottom-right">
<h3>25</h3>
<p>Completed tasks</p>
</div>
<div class="clear"> </div>
</div>
<div class="work-text">
<h3>TODAY</h3>
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1" class="grid1"><i></i>Finish landing page concept</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2" class="grid2"><i></i>Design app illustrations</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3" class="grid3"><i></i>Javascript training</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4" class="grid4"><i></i>Surprise Party for Meet</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
</section>
</div>
</div>
</div>
</body>
</html>

1656
用户手机控制界面/css/jquery.mmenu.all.css
View File

File diff suppressed because it is too large Load Diff

833
用户手机控制界面/css/style.css
Unescape View File

@ -0,0 +1,833 @@
/*--reset--*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0px;padding:0px;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/*--start editing from here--*/
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{ vertical-align:baseline;}/* vertical align baseline */
.vertical-top{ vertical-align:top;}/* vertical align top */
nav.vertical ul li{ display:block;}/* vertical menu */
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*--end reset--*/
body { font-family: 'Jura', sans-serif; background-color: #252525;
}
h1 {
color: #fff;
text-align: center;
padding: 1em 0 0 0;
font-size: 3em;
font-weight: 700;
}
/*-- main --*/
.main {
margin: 3em auto;
width: 24%;
}
.banner {
background: url(../images/banner.jpg)no-repeat 0px 0px;
background-size: cover;
}
/*--header-top--*/
.header-top {
text-align: right;
padding: 1em;
background-color: rgba(14, 14, 14, 0.28);
}
.header-top ul li {
display: inline-block;
margin-left: 0.6em;
font-size: 1em;
color: #fff;
}
.header-top ul li span {
background: url(../images/i1.png)no-repeat 0px 0px;
width: 16px;
height: 15px;
display: block;
}
.header-top ul li span.chrg{
background: url(../images/i2.png)no-repeat 0px 0px;
width: 10px;
}
/*--banner-text--*/
.banner-text {
padding: 2em 1em 2em 2em;
}
.menu {
display: inline-block;
}
.menu a {
display: block;
}
span.menu-icon,span.menu-icon1 {
display: block;
cursor: pointer;
margin: 0 0 0.5em 0;
position: relative;
}
ul.nav1,ul.nav {
z-index: 999;
width: 102px;
background-color: #FFF;
padding: 0.5em 1em;
position: absolute;
}
ul.nav1{
display: none;
}
ul.nav1 li ,ul.nav li {
display: block;
margin: 0.5em 0;
}
ul.nav1 li a,ul.nav li a{
font-size: 1em;
color: #31386F;
font-weight: 800;
}
ul.nav1 li a:hover,ul.nav li a:hover{
color: #FF7FE5;
}
.title {
margin: 1.5em 0 1em;
}
.title-left {
float: left;
width: 30%;
}
.title-left img {
border-radius: 50%;
}
.title-right {
float: left;
width: 62%;
margin-left: 1.5em;
}
.title-right h2 {
font-size: 1.6em;
color: #fff;
margin-top: 0.6em;
}
.title-right h6 {
font-size: 1em;
color: #68d3ff;
margin-top: 0.5em;
}
/*--banner-bottom--*/
.banner-bottom-left ,.banner-bottom-right{
float: left;
width: 50%;
text-align: center;
padding:1.5em 0;
background-color: #4dc2ff;
}
.banner-bottom-right {
background-color: #ff7fe5;
}
.banner-bottom h3 {
font-size: 2.2em;
color: #fff;
}
.banner-bottom p {
font-size: 1em;
color: #fff;
font-weight: 500;
margin-top: 0.1em;
}
/*--work-text--*/
.work-text {
padding: 2em 1.5em 1.5em;
background-color: #fff;
}
.work-text h3 {
font-size: 1.3em;
color: #8393a3;
font-weight: 900;
margin-bottom: 0.5em;
}
/*--tabs--*/
.ac-container label {
padding: 8px 20px 8px 0;
position: relative;
z-index: 20;
display: block;
cursor: pointer;
color: #3c464f;
line-height: 33px;
font-size: 1em;
font-weight: 600;
}
.ac-container label:hover {
color: #4DC2FF;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
color: #4DC2FF;
}
.ac-container label:after, .ac-container input:checked + label:hover:after {
content: '';
position: absolute;
width: 15px;
height: 11px;
right: 13px;
top: 22px;
background: url(../images/arrow_up.png) no-repeat -4px -5px;
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
}
.ac-container input:checked + label:hover:after ,.ac-container input:checked + label:after{
color: #000;
transform: rotate(180deg);
top: 18px;
}
.ac-container input{
display: none;
}
.ac-container article{
background:#fff;
margin-top: -1px;
overflow: hidden;
height: 0px;
position: relative;
z-index: 10;
-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p {
line-height: 21px;
font-size: 0.9em;
padding: 10px 24px;
color: #FFFFFF;
background-color: #FF7FE5;
}
.ac-container input:checked ~ article{
-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
background-color: #E259C6;
}
.ac-container input:checked ~ article.ac-small{
height: 65px;
}
.ac-container label i {
font-size: 1em;
background-color: #d997f1;
width: 13px;
height: 13px;
display: inline-block;
border-radius: 50%;
margin-right: 1em;
vertical-align: text-top;
}
.ac-container label.grid2 i {
background-color:#5ae29d;
}
.ac-container label.grid3 i {
background-color:#4dc2ff;
}
.ac-container label.grid4 i {
background-color:#ffc06f;
}
/*--//work-text--*/
/*--signin-form--*/
.profile {
margin-top: 3em;
}
.signin-form {
background: url(../images/banner1.jpg)no-repeat 0px 0px;
background-size: cover;
padding: 4em 2.5em;
text-align: center;
}
.signin-form h3 {
font-size: 2em;
color: #fff;
margin-bottom: 0.6em;
}
.signin-form h3 span {
color: #67e1ff;
}
.signin-form img {
border-radius: 50%;
}
.login-form {
margin: 1em 0 2.5em;
}
.signin-form input[type="text"], .signin-form input[type="password"] {
width: 82%;
padding: 1em 1em 1em 3em;
font-size: 0.8em;
margin: 1em 0;
outline: none;
color: #FFF;
border: none;
border-bottom: 2px solid #AA97F1;
letter-spacing: 1px;
}
.signin-form input[type="text"] {
background: url(../images/i3.png)no-repeat 3% center;
display: block;
}
.signin-form input[type="password"] {
background: url(../images/i4.png)no-repeat 3% center;
display: block;
}
::-webkit-input-placeholder{
color:#fff !important;
}
.signin-form input[type="submit"] {
outline: none;
padding: 0.9em 0;
width: 100%;
text-align: center;
font-size: 1em;
margin-top: 1em;
border: none;
color: #fff;
cursor: pointer;
background: #4bc2ff;
box-shadow: 0px 2px 1px rgba(28, 28, 29, 0.42);
}
.signin-form input[type="submit"]:hover {
color: #4DC2FF;
background: rgb(255, 255, 255);
transition: .5s all;
-webkit-transition: .5s all;
-moz-transition: .5s all;
-o-transition: .5s all;
-ms-transition: .5s all;
}
.signin-form p a {
font-size: 1em;
color: #fff;
font-weight: 800;
letter-spacing: 1px;
}
/*--//signin-form--*/
/*--mobile-slider --*/
.profile-slider {
background-color: #4e59ad;
padding: 2.5em 2em;
text-align: center;
position: relative;
}
.profile-slider h3 {
font-size: 1.6em;
color: #fff;
}
.profile-slider p {
font-size: 0.9em;
color: #fff;
margin-top: 1.5em;
line-height: 1.6em;
}
.slider-text {
margin-bottom: 2em;
}
.profile-slider a.skip {
font-size: 1em;
color: #3c464f;
background-color: #fff;
padding: 1em;
display: block;
font-weight: 900;
text-shadow: 1px 0px #3c464f;
margin-top: 2em;
}
.profile-slider a.skip:hover {
background-color: #FF7FE5;
color: #fff;
text-shadow: 1px 0px #fff;
}
/*--responsive-slider --*/
.slide {
float: left;
width: 48%;
background:#fbc565;
padding: 5em 0em 5.04em 0em;
}
.rslides_tabs .rslides_here a {
background: rgba(255,255,255,.1);
color: #fff;
font-weight: bold;
}
.callbacks_container {
position: relative;
width: 100%;
}
.callbacks {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.callbacks li {
position: absolute;
width: 100%;
}
.rslides {
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display:none;
width: 100%;
left: 0;
top: 0;
}
.rslides li{
position: relative;
display: block;
float: left;
}
.callbacks_tabs {
list-style: none;
position: absolute;
padding: 0;
margin: 0;
display: block;
bottom: 0;
z-index: 9999;
right: 38%;
}
.callbacks_tabs li{
display: inline-block;
}
/*----*/
.callbacks_tabs a{
visibility: hidden;
}
.callbacks_tabs a:after {
content: "\f111";
font-size: 0;
font-family: FontAwesome;
visibility: visible;
display: block;
height:9px;
width:9px;
display: inline-block;
background:#404a92;
border:none;
border-radius: 50%;
-o-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
vertical-align: middle;
}
.callbacks_here a:after{
background:#FFFFFF;
height: 12px;
width: 12px;
}
.menu label:after {
background: none;
}
.menu input:checked + label:hover:after, .menu input:checked + label:after {
background:none;
}
.menu input:checked ~ article.ac-medium {
height: 144px;
width: 134px;
display: block;
}
.menu article {
position: relative;
overflow: inherit;
display: none;
}
.banner-text .ac-container label {
padding: 0;
position: relative;
line-height: inherit;
margin-bottom: .5em;
}
/*--//mobile-slider --*/
.mm-menu {
background: #444 !important;
}
.mm-subopened .mm-subblocker {
opacity: 1;
}
.mm-subopened .mm-subblocker:before {
content: "x";
color: #999;
display: inline-block;
padding: 5px 15px;
}
.mm-subopened .mm-subblocker:hover:before {
color: #ccc;
}
.mobile iframe {
overflow: hidden !important;
width: 100% !important;
height: 605px !important;
}
.mm-menu ul li a span.icons {
background: url(../images/i5.png)no-repeat 0px 0px;
width: 25px;
height: 25px;
display: inline-block;
margin-right: .5em;
vertical-align: middle;
}
.mm-menu ul li a span.icons.icn2 {
background: url(../images/i6.png)no-repeat 0px 8px;
display: inline-block;
}
.mm-menu ul li a span.icons.icn3 {
background: url(../images/i7.png)no-repeat 0px 0px;
display: inline-block;
}
.mm-menu ul li a span.icons.icn4 {
background: url(../images/i8.png)no-repeat 0px 0px;
display: inline-block;
}
.mm-menu ul li a span.icons.icn5 {
background: url(../images/i9.png)no-repeat 0px 0px;
display: inline-block;
}
/*--//mobile-slider --*/
/*--mobile-graph--*/
.mobile-graph {
background-color: #fff;
padding: 0.8em;
}
.banner.banner1 {
background: url(../images/img2.jpg) no-repeat 0px 0px;
background-size: cover;
border-bottom: 5px solid #60E6CE;
}
.banner-text a span.icons {
background: url(../images/i10.png)no-repeat 0px 0px;
width: 25px;
height: 25px;
display: inline-block;
margin-right: .5em;
vertical-align: middle;
}
.menu.menu-left {
float: left;
}
.menu-right {
float: right;
}
.mobile-graph h3 {
font-size: 2em;
color: #fff;
margin: 2.5em 0 0;
text-align: center;
}
.mobile-graph h3 span {
color: #67e1ff;
}
.graph-text {
padding: 1em;
margin: 1em 0 2em;
}
.graph-text ul li {
display: inline-block;
font-size: 1em;
color: #000;
margin-right: 1.5em;
}
.graph-text ul li span.dott {
width: 15px;
height: 15px;
background-color: #f8e478;
display: inline-block;
border-radius: 56%;
margin-right: .6em;
vertical-align: text-top;
}
.graph-text ul li span.dott.green {
background-color: #60e6ce;
}
.graph-text ul li span.dott.blue{
background-color: #878aee;
}
.month-graph.effect21 {
margin-left: -1.5em;
}
/*--//mobile-graph--*/
/*--copyright--*/
.copyright {
margin: 2em;
text-align: center;
}
.copyright p {
font-size: 1em;
color: #fff;
line-height:1.8em;
}
.copyright p a{
color: #fff;
}
.copyright p a:hover{
color: #E4FF00;
}
/*--//copyright--*/
/*---- responsive-design -----*/
@media(max-width:1440px){
.main {
width: 26%;
}
canvas#line {
width: 384px !important;
}
.graph-text {
padding: 1em .8em;
}
}
@media(max-width:1366px){
.main {
width: 27%;
}
}
@media(max-width:1280px){
h1 {
font-size: 2.5em;
}
.main {
width: 30%;
}
}
@media(max-width:1080px){
.main {
width: 35%;
margin: 2em auto;
}
}
@media(max-width:1024px){
.main {
width: 38%;
}
.signin-form {
padding: 3em 2.5em;
}
}
@media(max-width:991px){
}
@media(max-width:900px){
.main {
width: 42%;
}
}
@media(max-width:800px){
.main {
width: 49%;
}
}
@media(max-width:768px){
}
@media(max-width:640px){
.main {
width: 60%;
}
}
@media(max-width:480px){
.main {
width: 78%;
}
.banner-text {
padding: 1.5em 1em 1em 1.5em;
}
ul.nav1 li a, ul.nav li a {
font-size: 0.9em;
}
.title-right h2 {
font-size: 1.5em;
}
.title-right h6 {
font-size: 0.9em;
}
h1 {
font-size: 2.2em;
}
.header-top {
padding: 0.8em;
}
.banner-bottom-left, .banner-bottom-right {
padding: 1.3em 0;
}
.banner-bottom h3 {
font-size: 1.8em;
}
.banner-bottom p {
font-size: 0.9em;
margin-top: 0.3em;
}
.work-text {
padding: 1.5em 1.5em 1em;
}
.ac-container label {
font-size: 0.9em;
}
.ac-container label:after, .ac-container input:checked + label:hover:after {
top: 19px;
}
.profile {
margin-top: 2em;
}
.signin-form {
padding: 2em 2.5em;
}
.graph-text ul li {
margin-right: 1em;
}
.copyright p {
font-size: 0.9em;
}
}
@media(max-width:320px){
h1 {
font-size: 1.6em;
}
.main {
width: 89%;
margin: 1.5em auto;
}
.login-form {
margin: 1em 0 1.5em;
}
.banner-text {
padding: 1em 0.5em 1em 1em;
}
.title {
margin: 1em 0;
}
.title-right {
margin-left: 0.8em;
}
.title-right h2 {
font-size: 1.2em;
}
.title-right h6 {
font-size: 0.75em;
}
.banner-bottom-left, .banner-bottom-right {
padding: 1em 0;
}
.banner-bottom h3 {
font-size: 1.6em;
}
.banner-bottom p {
font-size: 0.8em;
}
.work-text {
padding: 1.5em 1em 1em;
}
.ac-container label i {
width: 10px;
height: 10px;
margin-right: 0.5em;
}
.ac-container label {
font-size: 0.8em;
line-height: 22px;
}
.ac-container label:after, .ac-container input:checked + label:hover:after {
width: 12px;
height: 7px;
top: 16px;
right: 4px;
background-position:-5px -5px;
}
.ac-container article p {
font-size: 0.8em;
padding: 6px 13px;
}
.signin-form {
padding: 2em 1.5em;
}
.signin-form h3 {
font-size: 1.5em;
}
.signin-form input[type="text"], .signin-form input[type="password"] {
width: 76%;
}
.signin-form input[type="submit"] {
padding: 0.7em 0;
font-size: 0.9em;
}
.signin-form p a {
font-size: 0.9em;
}
.profile-slider {
padding: 2em 1.3em;
}
.profile-slider h3 {
font-size: 1.2em;
}
.profile-slider p {
font-size: 0.8em;
}
.profile-slider a.skip {
font-size: 0.9em;
padding: 0.8em;
}
.mobile iframe {
height: 502px !important;
}
.ac-container input:checked ~ article.ac-small {
height: 57px;
}
.profile {
margin-top: 1.7em;
}
.menu input:checked ~ article.ac-medium {
height: 136px;
width: 91px;
}
ul.nav1, ul.nav {
width: 71px;
}
.graph-text {
padding: 0.5em 0 0 .5em;
margin: 1em 0;
}
.graph-text ul li {
margin-right: 0.8em;
font-size: 0.9em;
}
.graph-text ul li span.dott {
width: 10px;
height: 10px;
margin-right: .4em;
}
.month-graph.effect21 {
margin-left: -1.5em;
}
canvas#line {
width: 287px !important;
}
}
/*--//responsive-design---*/

BIN
用户手机控制界面/images/Thumbs.db
View File

Binary file not shown.

BIN
用户手机控制界面/images/arrow_up.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
用户手机控制界面/images/banner.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
用户手机控制界面/images/banner1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
用户手机控制界面/images/i1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
用户手机控制界面/images/i10.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
用户手机控制界面/images/i2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
用户手机控制界面/images/i3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
用户手机控制界面/images/i4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

BIN
用户手机控制界面/images/i5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
用户手机控制界面/images/i6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
用户手机控制界面/images/i7.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
用户手机控制界面/images/i8.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
用户手机控制界面/images/i9.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
用户手机控制界面/images/img1.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
用户手机控制界面/images/img2.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
用户手机控制界面/images/menu-icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

306
用户手机控制界面/index.html
Unescape View File

@ -0,0 +1,306 @@
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<!--Custom Theme files-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--web-fonts-->
<link href='http://fonts.useso.com/css?family=Jura:400,300,500,600' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.all.css?v=5.4.4" />
<!--//web-fonts-->
<!-- js -->
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.all.js?v=5.4.4"></script>
<!-- //js -->
<!-- chart -->
<script src="js/Chart.js"></script>
<!-- //chart -->
</head>
<body>
<h1>Mobile material</h1>
<!-- main -->
<div class="main">
<!--login-profile-->
<div class="login-form">
<div class="banner">
<div class="header-top">
<ul>
<li><span></span></li>
<li><span class="chrg"></span> </li>
<li>10:00 </li>
</ul>
</div>
<div class="banner-text">
<div class="menu">
<span class="menu-icon"><a href="#"><img src="images/menu-icon.png" alt=""/></a></span>
<ul class="nav1">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- script-for-menu -->
<script>
$( "span.menu-icon" ).click(function() {
$( "ul.nav1" ).slideToggle( 300, function() {
// Animation complete.
});
});
</script>
<!-- /script-for-menu -->
</div>
<div class="title">
<div class="title-left">
<img src="images/img1.jpg" alt=""/>
</div>
<div class="title-right">
<h2>Vestibulum ante </h2>
<h6>UI/UX Designer</h6>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="clear"> </div>
<div class="banner-bottom">
<div class="banner-bottom-left">
<h3>13</h3>
<p>Remaining tasks </p>
</div>
<div class="banner-bottom-right">
<h3>25</h3>
<p>Completed tasks</p>
</div>
<div class="clear"> </div>
</div>
<div class="work-text">
<h3>TODAY</h3>
<section class="ac-container">
<div>
<input id="ac-1" name="accordion-1" type="checkbox" />
<label for="ac-1" class="grid1"><i></i>Finish landing page concept</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox" />
<label for="ac-2" class="grid2"><i></i>Design app illustrations</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox" />
<label for="ac-3" class="grid3"><i></i>Javascript training</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox" />
<label for="ac-4" class="grid4"><i></i>Surprise Party for Meet</label>
<article class="ac-small">
<p>Lorem Ipsum is simply dummy text of the printing and industry.</p>
</article>
</div>
</section>
</div>
</div>
<!--login-profile-->
<!--signin-form-->
<div class="signin-form profile">
<h3>Welcome, <span>Jennifer</span></h3>
<img src="images/img1.jpg" alt=""/>
<div class="login-form">
<form>
<input type="text" placeholder="user.name55@gmail.com" required="">
<input type="password" placeholder="* * * * * * * * * *" required="">
<input type="submit" value="LOGIN">
</form>
</div>
<p><a href="#"> CREATE NEW ACCOUNT</a></p>
</div>
<!--//signin-form-->
<!--mobile-slider-->
<div class=" profile">
<div class="banner">
<div class="header-top">
<ul>
<li><span></span></li>
<li><span class="chrg"></span> </li>
<li>10:00 </li>
</ul>
</div>
<div class="banner-text">
<section class="ac-container">
<div class="menu">
<input id="ac-5" name="accordion-1" type="checkbox" />
<label for="ac-5"><img src="images/menu-icon.png" alt=""/></label>
<article class="ac-medium">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</article>
</div>
</section>
<div class="title">
<div class="title-left">
<img src="images/img1.jpg" alt=""/>
</div>
<div class="title-right">
<h2>Vestibulum ante </h2>
<h6>UI/UX Designer</h6>
</div>
<div class="clear"> </div>
</div>
</div>
</div>
<div class="profile-slider">
<script>
// You can also use "$(window).load(function() {"
$(function () {
// Slideshow 4
$("#slider4").responsiveSlides({
auto: true,
pager:true,
nav:false,
speed: 400,
namespace: "callbacks"
});
});
</script>
<div class="callbacks_container">
<ul class="rslides" id="slider4">
<li>
<div class="slider-text">
<h3>Keep track of your tasks</h3>
<p>Never miss an appointment, never forget about your daily team meeting and remember when your favourite team. </p>
</div>
</li>
<li>
<div class="slider-text">
<h3>Team meeting remember</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s remember when your team is playing. </p>
</div>
</li>
<li>
<div class="slider-text">
<h3>Your tasks keep track of </h3>
<p>Never miss an appointment, never forget about your daily team meeting and remember when your favourite team. </p>
</div>
</li>
<li>
<div class="slider-text">
<h3>Keep track of your tasks </h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s remember when your team is playing. </p>
</div>
</li>
</ul>
<div class="clear"> </div>
<script src="js/responsiveslides.min.js"></script>
</div>
<a href="#" class="skip">SKIP TUTORIAL </a>
</div>
</div>
<!--//mobile-slider-->
<!--iframe-Push-Menu-->
<div class="mobile profile">
<iframe src="about.html">
</iframe>
</div>
<!--//iframe-Push-Menu-->
<!--login-graph-->
<div class="mobile-graph profile">
<div class="banner banner1">
<div class="header-top">
<ul>
<li><span></span></li>
<li><span class="chrg"></span> </li>
<li>10:00 </li>
</ul>
</div>
<div class="banner-text">
<div class="menu menu-left">
<section class="ac-container">
<input id="ac-6" name="accordion-1" type="checkbox" />
<label for="ac-6"><img src="images/menu-icon.png" alt=""/></label>
<article class="ac-medium">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</article>
</section>
</div>
<div class="menu-right">
<a href="#"><span class="icons icn4"> </span></a>
</div>
<div class="clear"> </div>
<h3><span>Jennifer</span> Wilson</h3>
</div>
</div>
<div class="graph-info">
<div class="graph-text">
<ul>
<li><span class="dott"> </span>Design </li>
<li><span class="dott green"> </span> CSS</li>
<li><span class="dott blue"> </span>JavaScript </li>
</ul>
</div>
<div class="month-graph effect21">
<canvas id="line" height="195px" width="400px" style="width:300px; height: 300px;"></canvas>
<script>
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(135, 138, 238, 0.88)",
strokeColor : "rgba(135, 138, 238, 0.85)",
pointColor : "rgba(135, 138, 238, 0.85)",
data : [70,80,60,75,90,75,100]
},
{
fillColor : "rgba(87, 226, 201, 0.88)",
strokeColor : "rgba(87, 226, 201, 0.82)",
pointColor : "rgba(87, 226, 201, 0.82)",
data : [70,60,72,61,75,59,80]
},
{
fillColor : "rgba(248, 246, 120, 0.88)",
strokeColor : "rgba(248, 246, 120, 0.81)",
pointColor : "rgba(248, 246, 120, 0.81)",
data : [50,65,51,67,52,64,50]
}
]
}
var myLine = new Chart(document.getElementById("line").getContext("2d")).Line(lineChartData);
</script>
</div>
</div>
</div>
<!--//login-graph-->
</div>
</body>
</html>

5
用户手机控制界面/js/jquery.min.js vendored
View File

File diff suppressed because one or more lines are too long

133
用户手机控制界面/js/jquery.mmenu.min.all.js
View File

File diff suppressed because one or more lines are too long

8
用户手机控制界面/js/responsiveslides.min.js vendored
Unescape View File

@ -0,0 +1,8 @@
/*! http://responsiveslides.com v1.54 by @viljamis */
(function(c,I,B){c.fn.responsiveSlides=function(l){var a=c.extend({auto:!0,speed:500,timeout:4E3,pager:!1,nav:!1,random:!1,pause:!1,pauseControls:!0,prevText:"Previous",nextText:"Next",maxwidth:"",navContainer:"",manualControls:"",namespace:"rslides",before:c.noop,after:c.noop},l);return this.each(function(){B++;var f=c(this),s,r,t,m,p,q,n=0,e=f.children(),C=e.size(),h=parseFloat(a.speed),D=parseFloat(a.timeout),u=parseFloat(a.maxwidth),g=a.namespace,d=g+B,E=g+"_nav "+d+"_nav",v=g+"_here",j=d+"_on",
w=d+"_s",k=c("<ul class='"+g+"_tabs "+d+"_tabs' />"),x={"float":"left",position:"relative",opacity:1,zIndex:2},y={"float":"none",position:"absolute",opacity:0,zIndex:1},F=function(){var b=(document.body||document.documentElement).style,a="transition";if("string"===typeof b[a])return!0;s=["Moz","Webkit","Khtml","O","ms"];var a=a.charAt(0).toUpperCase()+a.substr(1),c;for(c=0;c<s.length;c++)if("string"===typeof b[s[c]+a])return!0;return!1}(),z=function(b){a.before(b);F?(e.removeClass(j).css(y).eq(b).addClass(j).css(x),
n=b,setTimeout(function(){a.after(b)},h)):e.stop().fadeOut(h,function(){c(this).removeClass(j).css(y).css("opacity",1)}).eq(b).fadeIn(h,function(){c(this).addClass(j).css(x);a.after(b);n=b})};a.random&&(e.sort(function(){return Math.round(Math.random())-0.5}),f.empty().append(e));e.each(function(a){this.id=w+a});f.addClass(g+" "+d);l&&l.maxwidth&&f.css("max-width",u);e.hide().css(y).eq(0).addClass(j).css(x).show();F&&e.show().css({"-webkit-transition":"opacity "+h+"ms ease-in-out","-moz-transition":"opacity "+
h+"ms ease-in-out","-o-transition":"opacity "+h+"ms ease-in-out",transition:"opacity "+h+"ms ease-in-out"});if(1<e.size()){if(D<h+100)return;if(a.pager&&!a.manualControls){var A=[];e.each(function(a){a+=1;A+="<li><a href='#' class='"+w+a+"'>"+a+"</a></li>"});k.append(A);l.navContainer?c(a.navContainer).append(k):f.after(k)}a.manualControls&&(k=c(a.manualControls),k.addClass(g+"_tabs "+d+"_tabs"));(a.pager||a.manualControls)&&k.find("li").each(function(a){c(this).addClass(w+(a+1))});if(a.pager||a.manualControls)q=
k.find("a"),r=function(a){q.closest("li").removeClass(v).eq(a).addClass(v)};a.auto&&(t=function(){p=setInterval(function(){e.stop(!0,!0);var b=n+1<C?n+1:0;(a.pager||a.manualControls)&&r(b);z(b)},D)},t());m=function(){a.auto&&(clearInterval(p),t())};a.pause&&f.hover(function(){clearInterval(p)},function(){m()});if(a.pager||a.manualControls)q.bind("click",function(b){b.preventDefault();a.pauseControls||m();b=q.index(this);n===b||c("."+j).queue("fx").length||(r(b),z(b))}).eq(0).closest("li").addClass(v),
a.pauseControls&&q.hover(function(){clearInterval(p)},function(){m()});if(a.nav){g="<a href='#' class='"+E+" prev'>"+a.prevText+"</a><a href='#' class='"+E+" next'>"+a.nextText+"</a>";l.navContainer?c(a.navContainer).append(g):f.after(g);var d=c("."+d+"_nav"),G=d.filter(".prev");d.bind("click",function(b){b.preventDefault();b=c("."+j);if(!b.queue("fx").length){var d=e.index(b);b=d-1;d=d+1<C?n+1:0;z(c(this)[0]===G[0]?b:d);if(a.pager||a.manualControls)r(c(this)[0]===G[0]?b:d);a.pauseControls||m()}});
a.pauseControls&&d.hover(function(){clearInterval(p)},function(){m()})}}if("undefined"===typeof document.body.style.maxWidth&&l.maxwidth){var H=function(){f.css("width","100%");f.width()>u&&f.css("width",u)};H();c(I).bind("resize",function(){H()})}})}})(jQuery,this,0);
Write Preview
Loading…
Cancel
Save