uploaded the main project
This commit is contained in:
Nils
parent
94c81ba8c5
commit
f670411460
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
|
||||
<html><head>
|
||||
<title>404 Not Found</title>
|
||||
</head><body>
|
||||
<h1>Not Found</h1>
|
||||
<p>The requested URL /css/BebasNeue-webfont.woff was not found on this server.</p>
|
||||
<hr>
|
||||
<address>Apache/2.4.10 (Debian) Server at downloadmoreram.com Port 80</address>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
|
||||
<html><head>
|
||||
<title>404 Not Found</title>
|
||||
</head><body>
|
||||
<h1>Not Found</h1>
|
||||
<p>The requested URL /css/BebasNeue-webfont.ttf was not found on this server.</p>
|
||||
<hr>
|
||||
<address>Apache/2.4.10 (Debian) Server at downloadmoreram.com Port 80</address>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
|
||||
<html><head>
|
||||
<title>404 Not Found</title>
|
||||
</head><body>
|
||||
<h1>Not Found</h1>
|
||||
<p>The requested URL /css/BebasNeue-webfont.svg was not found on this server.</p>
|
||||
<hr>
|
||||
<address>Apache/2.4.10 (Debian) Server at downloadmoreram.com Port 80</address>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
|
||||
<html><head>
|
||||
<title>404 Not Found</title>
|
||||
</head><body>
|
||||
<h1>Not Found</h1>
|
||||
<p>The requested URL /css/BebasNeue-webfont.eot was not found on this server.</p>
|
||||
<hr>
|
||||
<address>Apache/2.4.10 (Debian) Server at downloadmoreram.com Port 80</address>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
|
||||
<html><head>
|
||||
<title>404 Not Found</title>
|
||||
</head><body>
|
||||
<h1>Not Found</h1>
|
||||
<p>The requested URL /css/BebasNeue-webfont.eot was not found on this server.</p>
|
||||
<hr>
|
||||
<address>Apache/2.4.10 (Debian) Server at downloadmoreram.com Port 80</address>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
/**
|
||||
* jQuery lightBox plugin
|
||||
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
|
||||
* and adapted to me for use like a plugin from jQuery.
|
||||
* @name jquery-lightbox-0.5.css
|
||||
* @author Leandro Vieira Pinho - http://leandrovieira.com
|
||||
* @version 0.5
|
||||
* @date April 11, 2008
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
|
||||
* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
|
||||
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
|
||||
*/
|
||||
#jquery-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 90;
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
#jquery-lightbox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
#jquery-lightbox a img { border: none; }
|
||||
#lightbox-container-image-box {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#lightbox-container-image { padding: 10px; }
|
||||
#lightbox-loading {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 0%;
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 0;
|
||||
}
|
||||
#lightbox-nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
#lightbox-container-image-box > #lightbox-nav { left: 0; }
|
||||
#lightbox-nav a { outline: none;}
|
||||
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
|
||||
width: 49%;
|
||||
height: 100%;
|
||||
zoom: 1;
|
||||
display: block;
|
||||
}
|
||||
#lightbox-nav-btnPrev {
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
#lightbox-nav-btnNext {
|
||||
right: 0;
|
||||
float: right;
|
||||
}
|
||||
#lightbox-container-image-data-box {
|
||||
font: 10px Verdana, Helvetica, sans-serif;
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
line-height: 1.4em;
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
padding: 0 10px 0;
|
||||
}
|
||||
#lightbox-container-image-data {
|
||||
padding: 0 10px;
|
||||
color: #666;
|
||||
}
|
||||
#lightbox-container-image-data #lightbox-image-details {
|
||||
width: 70%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
#lightbox-image-details-caption { font-weight: bold; }
|
||||
#lightbox-image-details-currentNumber {
|
||||
display: block;
|
||||
clear: left;
|
||||
padding-bottom: 1.0em;
|
||||
}
|
||||
#lightbox-secNav-btnClose {
|
||||
width: 66px;
|
||||
float: right;
|
||||
padding-bottom: 0.7em;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
|
||||
<html><head>
|
||||
<title>404 Not Found</title>
|
||||
</head><body>
|
||||
<h1>Not Found</h1>
|
||||
<p>The requested URL /css/portfolio.css was not found on this server.</p>
|
||||
<hr>
|
||||
<address>Apache/2.4.10 (Debian) Server at downloadmoreram.com Port 80</address>
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,930 @@
|
|||
/*
|
||||
Author: W3layout
|
||||
Author URL: http://w3layouts.com
|
||||
License: Creative Commons Attribution 3.0 Unported
|
||||
License URL: http://creativecommons.org/licenses/by/3.0/
|
||||
*/
|
||||
/* 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:0;padding:0;}
|
||||
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;
|
||||
outline : none;
|
||||
}
|
||||
a img {outline : 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 */
|
||||
.underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
|
||||
nav.vertical ul li{ display:block;}/* vertical menu */
|
||||
nav.horizontal ul li{ display: inline-block;}/* horizontal menu */
|
||||
img{max-width:100%;}
|
||||
img{max-height:100%}
|
||||
/*end reset*/
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background:#ffffff;
|
||||
}
|
||||
.wrap {
|
||||
width: 80%;
|
||||
margin: 0px auto;
|
||||
}
|
||||
/*header*/
|
||||
.header {
|
||||
width: 100%;
|
||||
background: #73a977;
|
||||
z-index: 100;
|
||||
display: inline-block;
|
||||
border-bottom: 2px ridge rgba(71, 86, 97, 0.65);
|
||||
position: fixed;
|
||||
}
|
||||
.logo {
|
||||
padding: 0.7em 0em 0em;
|
||||
}
|
||||
/*-- stat topnav --*/
|
||||
#topnav {
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
#topnav #navbtn {
|
||||
display: none;
|
||||
float: right;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
background: url('../images/nav-icon.png') center no-repeat;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#topnav nav {
|
||||
position: absolute;
|
||||
top:-67px;
|
||||
right: -10px;
|
||||
}
|
||||
#topnav nav ul {
|
||||
list-style: none;
|
||||
}
|
||||
#topnav nav ul li {
|
||||
display: block;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#topnav nav ul li a {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
color: #FFF;
|
||||
padding:5px;
|
||||
transition: 0.5s all;
|
||||
-webkit-transition: 0.5s all;
|
||||
-moz-transition: 0.5s all;
|
||||
-o-transition: 0.5s all;
|
||||
font-weight: 600;
|
||||
}
|
||||
#topnav nav ul li a:hover {
|
||||
color: #fff;
|
||||
text-shadow:none;
|
||||
}
|
||||
#btmnav nav { padding: 9px 0; padding-bottom: 15px; }
|
||||
#btmnav nav ul li { display: inline; }
|
||||
#btmnav nav ul li a { font-weight: bold; }
|
||||
/*banner*/
|
||||
.banner{
|
||||
background: #eeeeee;
|
||||
margin-top: -5px;
|
||||
text-align:center;
|
||||
padding: 9% 0;
|
||||
}
|
||||
.banner img{
|
||||
cursor: pointer;
|
||||
}
|
||||
.banner h2{
|
||||
color: #000;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
padding-top: 1.5%;
|
||||
}
|
||||
.banner p{
|
||||
color: #000;
|
||||
font-size: 1.5em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
/*about*/
|
||||
.about{
|
||||
background: #fff;
|
||||
margin-top: -5px;
|
||||
text-align:center;
|
||||
padding: 9% 0;
|
||||
}
|
||||
.about img{
|
||||
cursor: pointer;
|
||||
}
|
||||
.about h3{
|
||||
color: #777;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
.about p{
|
||||
width: 78%;
|
||||
color: #000;
|
||||
font-size: 0.8755em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 0.3%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
#about > div > p:nth-child(2) {
|
||||
padding-bottom: 2%;
|
||||
}
|
||||
/***************start-service************/
|
||||
#download{
|
||||
background:#FFFFFF;
|
||||
text-align:center;
|
||||
padding: 9% 0;
|
||||
}
|
||||
.team-grids p{
|
||||
width: 78%;
|
||||
color: #000;
|
||||
font-size: 0.8755em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 1.3%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
.team-grids h2{
|
||||
color: #777;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
}
|
||||
.middle-grids {
|
||||
margin: 2em 0;
|
||||
}
|
||||
.section {
|
||||
clear: both;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
.images_1_of_4{
|
||||
display: block;
|
||||
float:left;
|
||||
margin-left:3%;
|
||||
text-align: center;
|
||||
}
|
||||
.images_1_of_4:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.images_1_of_4 {
|
||||
width: 21.6%;
|
||||
}
|
||||
.images_1_of_4 a.radius img{
|
||||
max-width: 90%;
|
||||
cursor: pointer;
|
||||
border-radius:30em;
|
||||
transition: 0.5s all;
|
||||
-webkit-transition: 0.5s all;
|
||||
-moz-transition: 0.5s all;
|
||||
-o-transition: 0.5s all;
|
||||
}
|
||||
.images_1_of_4 a img:hover{
|
||||
opacity: 0.7;
|
||||
}
|
||||
.images_1_of_4 h3{
|
||||
color: #777;
|
||||
font-size:1.5em;
|
||||
font-weight :400;
|
||||
padding: 0.2em 0em 0.3em 0em;
|
||||
}
|
||||
.images_1_of_4 p {
|
||||
font-size: 0.8755em;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
line-height: 1.9em;
|
||||
padding: 0em 0em 1.5em 0em;
|
||||
}
|
||||
|
||||
/***************end-servivice************/
|
||||
/* start portfolios */
|
||||
.portfolios{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
.portfoli1{
|
||||
text-align:center;
|
||||
background: #ffffff;
|
||||
padding: 9% 0;
|
||||
}
|
||||
/*---start container --*/
|
||||
#info {
|
||||
-webkit-border-radius:5px;
|
||||
-moz-border-radius:5px;
|
||||
-o-border-radius:5px;
|
||||
border-radius:5px;
|
||||
background:#fcf8e3;
|
||||
border:1px solid #fbeed5;
|
||||
width:95%;
|
||||
margin:0 auto 40px auto;
|
||||
font-family:arial;
|
||||
font-size:12px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
}
|
||||
#info .info-wrapper {
|
||||
padding:10px;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
}
|
||||
#info a {
|
||||
color:#c09853;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
#info p {
|
||||
margin:5px 0 0 0;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
-webkit-transition: all 1s ease;
|
||||
-moz-transition: all 1s ease;
|
||||
-o-transition: all 1s ease;
|
||||
transition: all 1s ease;
|
||||
}
|
||||
#filters {
|
||||
margin:4%;
|
||||
padding:0;
|
||||
list-style:none;
|
||||
}
|
||||
#filters li {
|
||||
display:inline-block;
|
||||
margin-right: 20px;
|
||||
}
|
||||
#filters li span {
|
||||
font-size:1em;
|
||||
display: block;
|
||||
padding: 10px 30px;
|
||||
border: 1px solid rgb(221, 221, 221);
|
||||
text-decoration: none;
|
||||
color: #191919;
|
||||
cursor: pointer;
|
||||
text-transform: uppercase;
|
||||
transition: 0.5s all;
|
||||
-webkit-transition: 0.5s all;
|
||||
-moz-transition: 0.5s all;
|
||||
-o-transition: 0.5s all;
|
||||
}
|
||||
#filters li span.active,#filters li span:hover {
|
||||
border: 1px solid #2C3E50;
|
||||
}
|
||||
#portfoliolist .portfolio {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-o-box-sizing: border-box;
|
||||
width:30%;
|
||||
margin:1.6%;
|
||||
display:none;
|
||||
float:left;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.portfolio-wrapper {
|
||||
overflow:hidden;
|
||||
position: relative !important;
|
||||
cursor:pointer;
|
||||
}
|
||||
.portfolio img {
|
||||
top: 0px !important;
|
||||
width:100%;
|
||||
position: relative;
|
||||
-webkit-filter: grayscale(100%);
|
||||
opacity: 5;
|
||||
transition: all 300ms!important;
|
||||
-webkit-transition: all 300ms!important;
|
||||
-moz-transition: all 300ms!important;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
.portfolio .label {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom:-40px;
|
||||
height:40px;
|
||||
}
|
||||
.portfolio .label-bg {
|
||||
background: #9A9A9A;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0;
|
||||
}
|
||||
.portfolio .label-text {
|
||||
color:#fff;
|
||||
position: relative;
|
||||
z-index:500;
|
||||
padding:5px 8px;
|
||||
}
|
||||
.portfolio .label-text p {
|
||||
color:#fff;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
.portfolio .text-category {
|
||||
display: block;
|
||||
font-size: 1.5em;
|
||||
text-align: left;
|
||||
}
|
||||
/* Self Clearing Goodness */
|
||||
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
|
||||
|
||||
.clearfix:before,
|
||||
.clearfix:after,
|
||||
.row:before,
|
||||
.row:after {
|
||||
content: '\0020';
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.row:after,
|
||||
.clearfix:after {
|
||||
clear: both; }
|
||||
.row,
|
||||
.clearfix {
|
||||
zoom: 1; }
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
/* contact */
|
||||
.contact{
|
||||
background: #eee;
|
||||
text-align:center;
|
||||
padding: 9% 0;
|
||||
}
|
||||
.contact h3{
|
||||
color: #777;
|
||||
font-size: 2.5em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
.contact p{
|
||||
width: 78%;
|
||||
color: #000;
|
||||
font-size: 0.8755em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 0.3%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
line-height: 1.9em;
|
||||
}
|
||||
/* contact_form */
|
||||
.contact_form {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.contact_form span{
|
||||
float: left;
|
||||
width: 100%;
|
||||
}
|
||||
.contact_form span.left{
|
||||
}
|
||||
.contact_form input[type="text"], .contact_form textarea {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #b0b0b0;
|
||||
color:#777;
|
||||
padding: 10px;
|
||||
font-size:0.8755em;
|
||||
display: block;
|
||||
width: 97%;
|
||||
margin-top: 3%;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
text-transform: capitalize;
|
||||
border-radius:3px;
|
||||
-webkit-border-radius:3px;
|
||||
-moz-border-radius:3px;
|
||||
-o-border-radius:3px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.contact_form input[type="text"]:hover,.contact_form textarea:hover {
|
||||
border: 1px solid #2C3E50;
|
||||
}
|
||||
.contact_form textarea{
|
||||
margin: 3% 0;
|
||||
resize:none;
|
||||
height:120px;
|
||||
width: 97%;
|
||||
}
|
||||
.contact_form input[type="submit"]{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
-webkit-appearance: none;
|
||||
cursor:pointer;
|
||||
color: #fff;
|
||||
background: #2C3E50;
|
||||
border:none;
|
||||
outline:none;
|
||||
display: inline-block;
|
||||
padding: 15px 40px;
|
||||
font-size:1em;
|
||||
border-radius:3px;
|
||||
-webkit-border-radius:3px;
|
||||
-moz-border-radius:3px;
|
||||
-o-border-radius:3px;
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
.contact_form input[type="submit"]:hover{
|
||||
color: #fff;
|
||||
background: #333;
|
||||
}
|
||||
#contact > div > p {
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
.footer-bottom{
|
||||
padding:2% 0;
|
||||
}
|
||||
.nav {
|
||||
text-align:center;
|
||||
}
|
||||
.nav ul li {
|
||||
display: inline-block;
|
||||
margin-right: -17px;
|
||||
width: 86px;
|
||||
}
|
||||
.nav ul li span {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
color:#777;
|
||||
}
|
||||
body > div.footer-bottom > div > div > ul > li:nth-child(5) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.nav ul li a{
|
||||
font-size: 0.8755em;
|
||||
color:#777;
|
||||
transition:0.5s all;
|
||||
-webkit-transition:0.5s all;
|
||||
-moz-transition:0.5s all;
|
||||
-o-transition:0.5s all;
|
||||
}
|
||||
.nav ul li a:hover{
|
||||
color:#2C3E50;
|
||||
}
|
||||
.copy-right{
|
||||
text-align: center;
|
||||
}
|
||||
.copy-right p{
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-size: 0.8755em;
|
||||
color: #777;
|
||||
margin-top: 1%;
|
||||
}
|
||||
.copy-right p a{
|
||||
color:#2C3E50;
|
||||
transition:0.5s all;
|
||||
-webkit-transition:0.5s all;
|
||||
-moz-transition:0.5s all;
|
||||
-o-transition:0.5s all;
|
||||
}
|
||||
.copy-right p a:hover{
|
||||
color:#777;
|
||||
}
|
||||
#toTop {
|
||||
display: none;
|
||||
text-decoration: none;
|
||||
position: fixed;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
overflow: hidden;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
text-indent: 100%;
|
||||
background: url(../images/top_move.png) no-repeat right top;
|
||||
}
|
||||
/***** Media Quries *****/
|
||||
@media only screen and (max-width: 1366px) {
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
#portfoliolist .portfolio {
|
||||
width: 30.1%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1280px) {
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 1024px) {
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
.banner h2,.about h3,.team-grids h2,.portfoli1 h5,.contact h3 {
|
||||
font-size: 2em;
|
||||
}
|
||||
.banner p {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
body > div.footer-bottom > div > div > ul > li:nth-child(5) {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.images_1_of_4 h3 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
.contact_form input[type="text"], .contact_form textarea {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 768px) {
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
.banner h2,.about h3,.team-grids h2,.portfoli1 h5,.contact h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.banner p {
|
||||
font-size: 1em;
|
||||
}
|
||||
.images_1_of_4 {
|
||||
width: 47%;
|
||||
margin-top: 3%;
|
||||
}
|
||||
.logo {
|
||||
padding: 0.7em 0em;
|
||||
}
|
||||
.h_logo3{
|
||||
width:22.333%;
|
||||
float: none;
|
||||
}
|
||||
#topnav #navbtn {
|
||||
float:none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -45px;
|
||||
}
|
||||
#topnav { height: auto; }
|
||||
#topnav nav {
|
||||
display: none;
|
||||
position: static;
|
||||
width: 100%;
|
||||
top: auto;
|
||||
right: auto;
|
||||
}
|
||||
#topnav nav ul li { float: none; margin: 0; background: #35485A;}
|
||||
#topnav nav ul li a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 1.4em;
|
||||
border: 0;
|
||||
padding: 9px 9px;
|
||||
border-bottom: 1px solid rgba(90, 85, 73, 0.17);
|
||||
box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-webkit-transition: all 0.3s ease-out;
|
||||
-moz-transition: all 0.3s ease-out;
|
||||
-ms-transition: all 0.3s ease-out;
|
||||
-o-transition: all 0.3s ease-out;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
#topnav nav ul li a:hover {
|
||||
background: #B3B3B3;
|
||||
color: #ffffff;
|
||||
}
|
||||
#topnav nav ul li a.sel {
|
||||
color: #6f8767;
|
||||
background: #cbdcc5;
|
||||
}
|
||||
|
||||
#topnav #navbtn {
|
||||
display: block;
|
||||
}
|
||||
.images_1_of_4 a.radius img {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 640px) {
|
||||
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
#filters li {
|
||||
margin-right: 6px;
|
||||
}
|
||||
#filters li span {
|
||||
font-size: 0.82355em;
|
||||
}
|
||||
.portfolio .text-category {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.contact_form textarea {
|
||||
height: 83px;
|
||||
}
|
||||
.contact_form input[type="submit"] {
|
||||
padding: 10px 19px;
|
||||
font-size: 0.82355em;
|
||||
}
|
||||
.images_1_of_4 h3 {
|
||||
font-size: 1em;
|
||||
}
|
||||
#topnav #navbtn {
|
||||
top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
#filters li span {
|
||||
padding: 6px 18px;
|
||||
}
|
||||
.banner {
|
||||
padding-top: 150px;
|
||||
}
|
||||
.banner h2,.about h3,.team-grids h2,.portfoli1 h5,.contact h3 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
.banner p {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.portfolio .text-category {
|
||||
font-size: 1em;
|
||||
}
|
||||
.contact_form input[type="text"], .contact_form textarea {
|
||||
padding: 6px;
|
||||
}
|
||||
.contact_form textarea {
|
||||
height: 60px;
|
||||
}
|
||||
#topnav #navbtn {
|
||||
top: -143px;
|
||||
}
|
||||
.images_1_of_4 a.radius img {
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
@media only screen and (max-width: 320px) {
|
||||
|
||||
.wrap{
|
||||
width:95%;
|
||||
}
|
||||
.images_1_of_4 {
|
||||
width: 100%;
|
||||
}
|
||||
#filters li span {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
#portfoliolist .portfolio {
|
||||
width: 46.7%;
|
||||
}
|
||||
.contact_form textarea {
|
||||
height: 43px;
|
||||
}
|
||||
.nav {
|
||||
display: none;
|
||||
}
|
||||
body > div.footer-bottom > div > div.nav > ul > li:nth-child(1) {
|
||||
margin-left: -27px;
|
||||
}
|
||||
.copy-right p {
|
||||
line-height: 1.8em;
|
||||
}
|
||||
.contact_form {
|
||||
width: 80%;
|
||||
}
|
||||
.contact_form input[type="text"], .contact_form textarea {
|
||||
width: 94%;
|
||||
}
|
||||
.images_1_of_4 a.radius img {
|
||||
width: 50%;
|
||||
}
|
||||
#topnav #navbtn {
|
||||
top: -40px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.gridCell {
|
||||
float:left;
|
||||
text-align:center;
|
||||
overflow:hidden;
|
||||
}
|
||||
/* This is the style given to the product image link by default */
|
||||
.gridCell .realviewLink {
|
||||
padding:0px;
|
||||
}
|
||||
/* This is the style given to the product image itself by default */
|
||||
.gridCell .realviewImage {
|
||||
border:0px;
|
||||
}
|
||||
/* This is the style given to the inside of the image link when hovering over the image */
|
||||
.gridCell .realviewLink:hover .realviewImage {
|
||||
border:2px solid #AFD0F8!important;
|
||||
}
|
||||
/* This is the style given to the outside of the image link when hovering over the image */
|
||||
.gridCell .realviewLink:hover {
|
||||
border:1px solid #88a2c1!important;
|
||||
}
|
||||
/* This is the style given to the text underneath the image (title, description, price...) */
|
||||
.gridCellInfo {
|
||||
text-align:center;
|
||||
font-size:.75em;
|
||||
}
|
||||
/* Centers text under the product */
|
||||
.gridCellInfo a, .gridCellInfo a span {
|
||||
text-align:center;
|
||||
}
|
||||
/* This is the main container for the grid of products */
|
||||
.allGrids {
|
||||
text-align:center;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
padding-top: 25px;
|
||||
text-align: center;
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Centers the grid of products inside allGrids */
|
||||
.centerGrids {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.error {
|
||||
border:1px solid;
|
||||
padding:18px;
|
||||
margin-bottom:23px;
|
||||
}
|
||||
/* The currently selected sort method */
|
||||
.selectedSort, .selectedSort a {
|
||||
text-decoration:none;
|
||||
}
|
||||
/* The pagination links */
|
||||
.count {
|
||||
float:right;
|
||||
margin-left:-2px;
|
||||
margin-bottom:7px;
|
||||
text-align:right;
|
||||
position:relative;
|
||||
}
|
||||
/* Powered by Zazzle logo */
|
||||
.pbimg {
|
||||
position:absolute;
|
||||
top:-5px;
|
||||
left:0px;
|
||||
}
|
||||
.pbimg img {
|
||||
border:0px;
|
||||
}
|
||||
/* Empty classes in case you want to change the look of the pagination and sort */
|
||||
.count a, .sortLinks a {
|
||||
|
||||
}
|
||||
.sortLinks {
|
||||
|
||||
}
|
||||
/* Used to stop product grids from floating to the left (at the end of the grid) */
|
||||
.clearMe {
|
||||
clear:both;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
/* Height of clearMe DIV */
|
||||
.short {
|
||||
height:10px;
|
||||
}
|
||||
/* Fix for Mozilla browsers for floating elements...best not touch this! */
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.clearfix {display: inline-block;}
|
||||
|
||||
/* Hides from IE-mac \*/
|
||||
* html .clearfix {height: 1%;}
|
||||
.clearfix {display: block;}
|
||||
/* End hide from IE-mac */
|
||||
|
||||
/* Empty class in case you want to style the currently selected page number */
|
||||
.current {
|
||||
|
||||
}
|
||||
/* The product description text. To show more than one line of the description, increase the height. */
|
||||
.productDescription {
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
height:15px;
|
||||
}
|
||||
/* The product title text */
|
||||
.productTitle {
|
||||
display:block;
|
||||
height:15px;
|
||||
overflow:hidden;
|
||||
font-weight:bold;
|
||||
}
|
||||
/* Product price text */
|
||||
.productPrice {
|
||||
cursor: default;
|
||||
text-decoration: none;
|
||||
font-size: 8pt;
|
||||
}
|
||||
/* The pagination arrows (previous/next)*/
|
||||
.paginationArrows {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.videoWrapper {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 */
|
||||
padding-top: 25px;
|
||||
text-align: center;
|
||||
height: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.videoWrapper iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#topLoader {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
margin-bottom: 32px;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
|
||||
#container {
|
||||
width: 940px;
|
||||
padding: 10px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#animateButton {
|
||||
width: 356px;
|
||||
height: 50px;
|
||||
margin-bottom: 20px;
|
||||
margin-top: 20px;
|
||||
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'BebasNeueRegular';
|
||||
src: url('BebasNeue-webfont.html');
|
||||
src: url('BebasNeue-webfontd41d.html#iefix') format('embedded-opentype'),
|
||||
url('BebasNeue-webfont-2.html') format('woff'),
|
||||
url('BebasNeue-webfont-3.html') format('truetype'),
|
||||
url('BebasNeue-webfont-4.html#BebasNeueRegular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
|
||||
}
|
||||
#topbanner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.gads {
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
html, body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: #222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color: #FFF;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.window {
|
||||
max-width: 600px;
|
||||
min-width: 420px;
|
||||
margin: 40px auto 0px auto;
|
||||
}
|
||||
|
||||
.microsoft {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
-webkit-animation: openwindows 0.2s;
|
||||
animation: openwindows 0.2s;
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.microsoft .header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 40px;
|
||||
font-weight: 100;
|
||||
height: 40px;
|
||||
background: #449;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .title {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .header .title .icon {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 6px;
|
||||
}
|
||||
.microsoft .header .title .text {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 25px;
|
||||
top: 7px;
|
||||
position: relative;
|
||||
padding: 0px 8px;
|
||||
line-height: 25px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.microsoft .header .buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
}
|
||||
.microsoft .header .buttons .btn {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.minus {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.expand {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.close {
|
||||
background: rgba(150, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .header .buttons .btn i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.microsoft .form {
|
||||
min-height: 60px;
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.microsoft .form .top .icon {
|
||||
width: 50px;
|
||||
padding: 0px 10px 0px 0px;
|
||||
}
|
||||
.microsoft .form .top .icon .amd {
|
||||
background: #333;
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .form .top .icon .amd .amd-border, .microsoft .form .top .icon .amd .amd-border:after, .microsoft .form .top .icon .amd .amd-top:after {
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top .loader {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.microsoft .form .top .loader .text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.microsoft .form .top .loader .bar {
|
||||
min-height: 20px;
|
||||
background: #019966;
|
||||
width: 100%;
|
||||
-webkit-transition: 0.2s all;
|
||||
transition: 0.2s all;
|
||||
-webkit-animation: 0.4s opacitize;
|
||||
animation: 0.4s opacitize;
|
||||
}
|
||||
.microsoft .middle {
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
.microsoft .middle .display {
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #32c832;
|
||||
font-weight: 300;
|
||||
overflow-y: auto;
|
||||
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .bottom {
|
||||
min-height: 40px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 0px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.microsoft .bottom .btn {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
background: #444;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .bottom .btn:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.microsoft .bottom .btn:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .bottom .text {
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amd {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
background: #000;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.amd .amd-border {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
.amd .amd-border:after {
|
||||
content: '';
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd .amd-border .amd-top {
|
||||
position: absolute;
|
||||
background: #019966;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.amd .amd-border .amd-bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
background: #019966;
|
||||
-webkit-transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
}
|
||||
|
||||
@-webkit-keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>AMD Drivers Webinstaller</title>
|
||||
|
||||
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway'>
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="window microsoft">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div class="icon"><i class="material-icons">get_app</i></div>
|
||||
<div class="text">AMD Radeon Software Webinstaller</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="btn minus"> <i class="material-icons">remove</i></div>
|
||||
<div class="btn expand"> <i class="material-icons">crop_square</i></div>
|
||||
<div class="btn close"> <i class="material-icons">close</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<div class="amd">
|
||||
<div class="amd-border">
|
||||
<div class="amd-top"></div>
|
||||
<div class="amd-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div class="text">Extract: opengl32sw.dll... 35%</div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="display">
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract RadeonInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract RadeonInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract RadeonInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="btn">Cancel</div>
|
||||
<div class="text">AMD Webinstaller v4.0</div>
|
||||
<div class="btn">Back</div>
|
||||
<div class="btn">Close</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.window.microsoft
|
||||
.header
|
||||
.title
|
||||
.icon #[i.material-icons get_app]
|
||||
.text Radeon Software Crimson Install
|
||||
.buttons
|
||||
.btn.minus
|
||||
i.material-icons remove
|
||||
.btn.expand
|
||||
i.material-icons crop_square
|
||||
.btn.close
|
||||
i.material-icons close
|
||||
.form
|
||||
.top
|
||||
.icon
|
||||
.amd
|
||||
.amd-border
|
||||
.amd-top
|
||||
.amd-bottom
|
||||
.loader
|
||||
.text Extract: opengl32sw.dll... 35%
|
||||
.bar
|
||||
.middle
|
||||
.display
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.bottom
|
||||
.btn Cancel
|
||||
.text Nullsoft Install System v4.0
|
||||
.btn Back
|
||||
.btn Close
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
var data = []
|
||||
|
||||
var nameData = {
|
||||
prefix: ['Win', 'Qt', 'Radeon', 'AMD', 'Setup', 'lib', 'mfc', 'ms', 'mdn'],
|
||||
word: ['EGL', 'Installer', 'GLES', 'Soft', 'Diag', 'Over', 'vcr', 'Open', 'Light'],
|
||||
suffix: ['Installer.exe', 'Extra.dll', '64a.exe', 'V2.dll', '12sw.exe', 'x86.sys', '120.dll']
|
||||
}
|
||||
var display = document.querySelectorAll('.display')[0]
|
||||
var loaderBar = document.querySelectorAll('.loader .bar')[0]
|
||||
var loaderText = document.querySelectorAll('.loader .text')[0]
|
||||
var words = makeInstallerFiles()
|
||||
drawInstallerFiles(words)
|
||||
setInterval(function(){
|
||||
for(var i = 0; i < words.length; i++){
|
||||
if(words[i].percent < 100){
|
||||
words[i].percent += Math.floor(Math.random()*25)
|
||||
loaderBar.style.display = 'block'
|
||||
if(words[i].percent >= 100){
|
||||
words[i].percent = 100
|
||||
if(words.length-1 !== i)
|
||||
loaderBar.style.display = 'none'
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
drawInstallerFiles(words)
|
||||
}, 200)
|
||||
function drawInstallerFiles(words){
|
||||
display.innerHTML = ''
|
||||
words.forEach(function(word){
|
||||
if(word.percent > 0){
|
||||
display.innerHTML += '<div class="line">'+word.word+'...'+word.percent+'%</div>'
|
||||
loaderText.innerHTML = word.word+'...'+word.percent+'%'
|
||||
loaderBar.style.width = word.percent + '%'
|
||||
if(word.percent < 100)
|
||||
display.scrollTop = 100000;
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function makeInstallerFiles(){
|
||||
var arr = []
|
||||
for(var i = 0; i < 20; i++){
|
||||
var prefix = chooseRandomValue(nameData.prefix)
|
||||
var word = chooseRandomValue(nameData.word)
|
||||
var suffix = chooseRandomValue(nameData.suffix)
|
||||
arr.push({
|
||||
word: prefix + word + suffix,
|
||||
percent: 0
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function chooseRandomValue(arr){
|
||||
min = 0
|
||||
max = arr.length
|
||||
return arr[Math.floor(Math.random()*(max-min)+min)]
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
html, body{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background:#222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color:#FFF;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
font-weight:100;
|
||||
}
|
||||
body{
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
display:block;
|
||||
padding:0px 20px;
|
||||
}
|
||||
|
||||
.window{
|
||||
max-width:600px;
|
||||
min-width:420px;
|
||||
margin:40px auto 0px auto;
|
||||
}
|
||||
.microsoft{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow:0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
.header{
|
||||
display:flex;
|
||||
color:rgba(255, 255, 255, 0.85);
|
||||
line-height:40px;
|
||||
font-weight:100;
|
||||
height:40px;
|
||||
background:#449;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
box-shadow:0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
.title{
|
||||
flex:1;
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:0px 10px;
|
||||
display:flex;
|
||||
user-select:none;
|
||||
.icon{
|
||||
width:30px;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:6px;
|
||||
}
|
||||
.text{
|
||||
flex:1;
|
||||
height:25px;
|
||||
top:7px;
|
||||
position:relative;
|
||||
padding:0px 8px;
|
||||
line-height:25px;
|
||||
border-left:1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display:flex;
|
||||
width:160px;
|
||||
height:30px;
|
||||
.btn{
|
||||
flex:1;
|
||||
text-align:center;
|
||||
|
||||
&:hover{
|
||||
&.minus{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.expand{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.close{ background:rgba(150, 0, 0, 0.5); }
|
||||
cursor:pointer;
|
||||
}
|
||||
i{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:-1px;
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form{
|
||||
min-height:60px;
|
||||
background:#333;
|
||||
|
||||
.top{
|
||||
padding:10px;
|
||||
display:flex;
|
||||
.icon{
|
||||
width:50px;
|
||||
padding:0px 10px 0px 0px;
|
||||
.amd{
|
||||
background:#333;
|
||||
box-shadow:none;
|
||||
.amd-border, .amd-border:after, .amd-top:after{background:#333;}
|
||||
}
|
||||
}
|
||||
.loader{
|
||||
flex:1;
|
||||
|
||||
.text{
|
||||
font-size:12px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.bar{
|
||||
min-height:20px;
|
||||
background:#019966;
|
||||
width:100%;
|
||||
transition:0.2s all;
|
||||
animation:0.4s opacitize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
padding:0px 10px 10px 10px;
|
||||
.display{
|
||||
height:200px;
|
||||
background:rgba(0, 0, 0, 0.25);
|
||||
padding:5px;
|
||||
font-size:12px;
|
||||
color:rgba(50, 200, 50, 1);
|
||||
font-weight:300;
|
||||
overflow-y:auto;
|
||||
box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
min-height:40px;
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
padding:0px 10px;
|
||||
line-height:30px;
|
||||
.btn{
|
||||
width:80px;
|
||||
&:not(:first-child){margin-left:4px;}
|
||||
text-align:center;
|
||||
height:30px;
|
||||
position:relative;
|
||||
background:#444;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
user-select:none;
|
||||
&:active{
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
color:rgba(255, 255, 255, 0.1);
|
||||
flex:1;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
animation: openwindows 0.2s;
|
||||
transform-origin:bottom center;
|
||||
}
|
||||
|
||||
.amd{
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
padding:5%;
|
||||
background:#000;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius:2px;
|
||||
.amd-border{
|
||||
width:100%;
|
||||
background:#000;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
padding-bottom:100%;
|
||||
&:after{
|
||||
content: '';
|
||||
width:45%;
|
||||
height:45%;
|
||||
background:#000;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd-top{
|
||||
position:absolute;
|
||||
background:#019966;
|
||||
top:0%;
|
||||
left:0%;
|
||||
width:200%;
|
||||
height:200%;
|
||||
|
||||
transform:rotateZ(-45deg);
|
||||
transform-origin:top left;
|
||||
}
|
||||
.amd-bottom{
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:55%;
|
||||
background:#019966;
|
||||
transform:rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize{
|
||||
0%{ opacity:0; }
|
||||
50%{ opacity: 0; }
|
||||
100%{ opacity:1; }
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
html, body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: #222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color: #FFF;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.window {
|
||||
max-width: 600px;
|
||||
min-width: 420px;
|
||||
margin: 40px auto 0px auto;
|
||||
}
|
||||
|
||||
.microsoft {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
-webkit-animation: openwindows 0.2s;
|
||||
animation: openwindows 0.2s;
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.microsoft .header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 40px;
|
||||
font-weight: 100;
|
||||
height: 40px;
|
||||
background: #449;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .title {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .header .title .icon {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 6px;
|
||||
}
|
||||
.microsoft .header .title .text {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 25px;
|
||||
top: 7px;
|
||||
position: relative;
|
||||
padding: 0px 8px;
|
||||
line-height: 25px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.microsoft .header .buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
}
|
||||
.microsoft .header .buttons .btn {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.minus {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.expand {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.close {
|
||||
background: rgba(150, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .header .buttons .btn i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.microsoft .form {
|
||||
min-height: 60px;
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.microsoft .form .top .icon {
|
||||
width: 50px;
|
||||
padding: 0px 10px 0px 0px;
|
||||
}
|
||||
.microsoft .form .top .icon .amd {
|
||||
background: #333;
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .form .top .icon .amd .amd-border, .microsoft .form .top .icon .amd .amd-border:after, .microsoft .form .top .icon .amd .amd-top:after {
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top .loader {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.microsoft .form .top .loader .text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.microsoft .form .top .loader .bar {
|
||||
min-height: 20px;
|
||||
background: #019966;
|
||||
width: 100%;
|
||||
-webkit-transition: 0.2s all;
|
||||
transition: 0.2s all;
|
||||
-webkit-animation: 0.4s opacitize;
|
||||
animation: 0.4s opacitize;
|
||||
}
|
||||
.microsoft .middle {
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
.microsoft .middle .display {
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #32c832;
|
||||
font-weight: 300;
|
||||
overflow-y: auto;
|
||||
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .bottom {
|
||||
min-height: 40px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 0px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.microsoft .bottom .btn {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
background: #444;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .bottom .btn:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.microsoft .bottom .btn:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .bottom .text {
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amd {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
background: #000;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.amd .amd-border {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
.amd .amd-border:after {
|
||||
content: '';
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd .amd-border .amd-top {
|
||||
position: absolute;
|
||||
background: #019966;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.amd .amd-border .amd-bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
background: #019966;
|
||||
-webkit-transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
}
|
||||
|
||||
@-webkit-keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>MSI Drivers Webinstaller</title>
|
||||
|
||||
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway'>
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="window microsoft">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div class="icon"><i class="material-icons">get_app</i></div>
|
||||
<div class="text">MSI Drivers Webinstaller</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="btn minus"> <i class="material-icons">remove</i></div>
|
||||
<div class="btn expand"> <i class="material-icons">crop_square</i></div>
|
||||
<div class="btn close"> <i class="material-icons">close</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<div class="amd">
|
||||
<div class="amd-border">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div class="text">Extract: opengl32sw.dll... 35%</div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="display">
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract MSIInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract MSIInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract MSIInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="btn">Cancel</div>
|
||||
<div class="text">MSI Web Installer v4.0</div>
|
||||
<div class="btn">Back</div>
|
||||
<div class="btn">Close</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.window.microsoft
|
||||
.header
|
||||
.title
|
||||
.icon #[i.material-icons get_app]
|
||||
.text Radeon Software Crimson Install
|
||||
.buttons
|
||||
.btn.minus
|
||||
i.material-icons remove
|
||||
.btn.expand
|
||||
i.material-icons crop_square
|
||||
.btn.close
|
||||
i.material-icons close
|
||||
.form
|
||||
.top
|
||||
.icon
|
||||
.amd
|
||||
.amd-border
|
||||
.amd-top
|
||||
.amd-bottom
|
||||
.loader
|
||||
.text Extract: opengl32sw.dll... 35%
|
||||
.bar
|
||||
.middle
|
||||
.display
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.bottom
|
||||
.btn Cancel
|
||||
.text Nullsoft Install System v4.0
|
||||
.btn Back
|
||||
.btn Close
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
var data = []
|
||||
|
||||
var nameData = {
|
||||
prefix: ['Win', 'Qt', 'MSI', 'MSI', 'Setup', 'lib', 'mfc', 'ms', 'mdn'],
|
||||
word: ['EGL', 'Installer', 'GLES', 'Soft', 'Diag', 'Over', 'vcr', 'Open', 'Light'],
|
||||
suffix: ['Installer.exe', 'Extra.dll', '64a.exe', 'V2.dll', '12sw.exe', 'x86.sys', '120.dll']
|
||||
}
|
||||
var display = document.querySelectorAll('.display')[0]
|
||||
var loaderBar = document.querySelectorAll('.loader .bar')[0]
|
||||
var loaderText = document.querySelectorAll('.loader .text')[0]
|
||||
var words = makeInstallerFiles()
|
||||
drawInstallerFiles(words)
|
||||
setInterval(function(){
|
||||
for(var i = 0; i < words.length; i++){
|
||||
if(words[i].percent < 100){
|
||||
words[i].percent += Math.floor(Math.random()*25)
|
||||
loaderBar.style.display = 'block'
|
||||
if(words[i].percent >= 100){
|
||||
words[i].percent = 100
|
||||
if(words.length-1 !== i)
|
||||
loaderBar.style.display = 'none'
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
drawInstallerFiles(words)
|
||||
}, 200)
|
||||
function drawInstallerFiles(words){
|
||||
display.innerHTML = ''
|
||||
words.forEach(function(word){
|
||||
if(word.percent > 0){
|
||||
display.innerHTML += '<div class="line">'+word.word+'...'+word.percent+'%</div>'
|
||||
loaderText.innerHTML = word.word+'...'+word.percent+'%'
|
||||
loaderBar.style.width = word.percent + '%'
|
||||
if(word.percent < 100)
|
||||
display.scrollTop = 100000;
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function makeInstallerFiles(){
|
||||
var arr = []
|
||||
for(var i = 0; i < 20; i++){
|
||||
var prefix = chooseRandomValue(nameData.prefix)
|
||||
var word = chooseRandomValue(nameData.word)
|
||||
var suffix = chooseRandomValue(nameData.suffix)
|
||||
arr.push({
|
||||
word: prefix + word + suffix,
|
||||
percent: 0
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function chooseRandomValue(arr){
|
||||
min = 0
|
||||
max = arr.length
|
||||
return arr[Math.floor(Math.random()*(max-min)+min)]
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
html, body{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background:#222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color:#FFF;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
font-weight:100;
|
||||
}
|
||||
body{
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
display:block;
|
||||
padding:0px 20px;
|
||||
}
|
||||
|
||||
.window{
|
||||
max-width:600px;
|
||||
min-width:420px;
|
||||
margin:40px auto 0px auto;
|
||||
}
|
||||
.microsoft{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow:0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
.header{
|
||||
display:flex;
|
||||
color:rgba(255, 255, 255, 0.85);
|
||||
line-height:40px;
|
||||
font-weight:100;
|
||||
height:40px;
|
||||
background:#449;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
box-shadow:0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
.title{
|
||||
flex:1;
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:0px 10px;
|
||||
display:flex;
|
||||
user-select:none;
|
||||
.icon{
|
||||
width:30px;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:6px;
|
||||
}
|
||||
.text{
|
||||
flex:1;
|
||||
height:25px;
|
||||
top:7px;
|
||||
position:relative;
|
||||
padding:0px 8px;
|
||||
line-height:25px;
|
||||
border-left:1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display:flex;
|
||||
width:160px;
|
||||
height:30px;
|
||||
.btn{
|
||||
flex:1;
|
||||
text-align:center;
|
||||
|
||||
&:hover{
|
||||
&.minus{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.expand{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.close{ background:rgba(150, 0, 0, 0.5); }
|
||||
cursor:pointer;
|
||||
}
|
||||
i{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:-1px;
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form{
|
||||
min-height:60px;
|
||||
background:#333;
|
||||
|
||||
.top{
|
||||
padding:10px;
|
||||
display:flex;
|
||||
.icon{
|
||||
width:50px;
|
||||
padding:0px 10px 0px 0px;
|
||||
.amd{
|
||||
background:#333;
|
||||
box-shadow:none;
|
||||
.amd-border, .amd-border:after, .amd-top:after{background:#333;}
|
||||
}
|
||||
}
|
||||
.loader{
|
||||
flex:1;
|
||||
|
||||
.text{
|
||||
font-size:12px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.bar{
|
||||
min-height:20px;
|
||||
background:#019966;
|
||||
width:100%;
|
||||
transition:0.2s all;
|
||||
animation:0.4s opacitize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
padding:0px 10px 10px 10px;
|
||||
.display{
|
||||
height:200px;
|
||||
background:rgba(0, 0, 0, 0.25);
|
||||
padding:5px;
|
||||
font-size:12px;
|
||||
color:rgba(50, 200, 50, 1);
|
||||
font-weight:300;
|
||||
overflow-y:auto;
|
||||
box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
min-height:40px;
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
padding:0px 10px;
|
||||
line-height:30px;
|
||||
.btn{
|
||||
width:80px;
|
||||
&:not(:first-child){margin-left:4px;}
|
||||
text-align:center;
|
||||
height:30px;
|
||||
position:relative;
|
||||
background:#444;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
user-select:none;
|
||||
&:active{
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
color:rgba(255, 255, 255, 0.1);
|
||||
flex:1;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
animation: openwindows 0.2s;
|
||||
transform-origin:bottom center;
|
||||
}
|
||||
|
||||
.amd{
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
padding:5%;
|
||||
background:#000;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius:2px;
|
||||
.amd-border{
|
||||
width:100%;
|
||||
background:#000;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
padding-bottom:100%;
|
||||
&:after{
|
||||
content: '';
|
||||
width:45%;
|
||||
height:45%;
|
||||
background:#000;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd-top{
|
||||
position:absolute;
|
||||
background:#019966;
|
||||
top:0%;
|
||||
left:0%;
|
||||
width:200%;
|
||||
height:200%;
|
||||
|
||||
transform:rotateZ(-45deg);
|
||||
transform-origin:top left;
|
||||
}
|
||||
.amd-bottom{
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:55%;
|
||||
background:#019966;
|
||||
transform:rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize{
|
||||
0%{ opacity:0; }
|
||||
50%{ opacity: 0; }
|
||||
100%{ opacity:1; }
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
html, body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: #222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color: #FFF;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.window {
|
||||
max-width: 600px;
|
||||
min-width: 420px;
|
||||
margin: 40px auto 0px auto;
|
||||
}
|
||||
|
||||
.microsoft {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
-webkit-animation: openwindows 0.2s;
|
||||
animation: openwindows 0.2s;
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.microsoft .header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 40px;
|
||||
font-weight: 100;
|
||||
height: 40px;
|
||||
background: #449;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .title {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .header .title .icon {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 6px;
|
||||
}
|
||||
.microsoft .header .title .text {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 25px;
|
||||
top: 7px;
|
||||
position: relative;
|
||||
padding: 0px 8px;
|
||||
line-height: 25px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.microsoft .header .buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
}
|
||||
.microsoft .header .buttons .btn {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.minus {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.expand {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.close {
|
||||
background: rgba(150, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .header .buttons .btn i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.microsoft .form {
|
||||
min-height: 60px;
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.microsoft .form .top .icon {
|
||||
width: 50px;
|
||||
padding: 0px 10px 0px 0px;
|
||||
}
|
||||
.microsoft .form .top .icon .amd {
|
||||
background: #333;
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .form .top .icon .amd .amd-border, .microsoft .form .top .icon .amd .amd-border:after, .microsoft .form .top .icon .amd .amd-top:after {
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top .loader {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.microsoft .form .top .loader .text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.microsoft .form .top .loader .bar {
|
||||
min-height: 20px;
|
||||
background: #019966;
|
||||
width: 100%;
|
||||
-webkit-transition: 0.2s all;
|
||||
transition: 0.2s all;
|
||||
-webkit-animation: 0.4s opacitize;
|
||||
animation: 0.4s opacitize;
|
||||
}
|
||||
.microsoft .middle {
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
.microsoft .middle .display {
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #32c832;
|
||||
font-weight: 300;
|
||||
overflow-y: auto;
|
||||
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .bottom {
|
||||
min-height: 40px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 0px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.microsoft .bottom .btn {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
background: #444;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .bottom .btn:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.microsoft .bottom .btn:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .bottom .text {
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amd {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
background: #000;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.amd .amd-border {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
.amd .amd-border:after {
|
||||
content: '';
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd .amd-border .amd-top {
|
||||
position: absolute;
|
||||
background: #019966;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.amd .amd-border .amd-bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
background: #019966;
|
||||
-webkit-transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
}
|
||||
|
||||
@-webkit-keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Nvidia Drivers Webinstaller</title>
|
||||
|
||||
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway'>
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="window microsoft">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div class="icon"><i class="material-icons">get_app</i></div>
|
||||
<div class="text">Nvidia Geforce Webinstaller</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="btn minus"> <i class="material-icons">remove</i></div>
|
||||
<div class="btn expand"> <i class="material-icons">crop_square</i></div>
|
||||
<div class="btn close"> <i class="material-icons">close</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<div class="amd">
|
||||
<div class="amd-border">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div class="text">Extract: opengl32sw.dll... 35%</div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="display">
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract GeforceInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract GeforceInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract GeforceInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="btn">Cancel</div>
|
||||
<div class="text">Nullsoft Install System v4.0</div>
|
||||
<div class="btn">Back</div>
|
||||
<div class="btn">Close</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.window.microsoft
|
||||
.header
|
||||
.title
|
||||
.icon #[i.material-icons get_app]
|
||||
.text Radeon Software Crimson Install
|
||||
.buttons
|
||||
.btn.minus
|
||||
i.material-icons remove
|
||||
.btn.expand
|
||||
i.material-icons crop_square
|
||||
.btn.close
|
||||
i.material-icons close
|
||||
.form
|
||||
.top
|
||||
.icon
|
||||
.amd
|
||||
.amd-border
|
||||
.amd-top
|
||||
.amd-bottom
|
||||
.loader
|
||||
.text Extract: opengl32sw.dll... 35%
|
||||
.bar
|
||||
.middle
|
||||
.display
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.bottom
|
||||
.btn Cancel
|
||||
.text Nullsoft Install System v4.0
|
||||
.btn Back
|
||||
.btn Close
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
var data = []
|
||||
|
||||
var nameData = {
|
||||
prefix: ['Win', 'Qt', 'Geforce', 'Nvidia', 'Setup', 'lib', 'mfc', 'ms', 'mdn'],
|
||||
word: ['EGL', 'Installer', 'GLES', 'Soft', 'Diag', 'Over', 'vcr', 'Open', 'Light'],
|
||||
suffix: ['Installer.exe', 'Extra.dll', '64a.exe', 'V2.dll', '12sw.exe', 'x86.sys', '120.dll']
|
||||
}
|
||||
var display = document.querySelectorAll('.display')[0]
|
||||
var loaderBar = document.querySelectorAll('.loader .bar')[0]
|
||||
var loaderText = document.querySelectorAll('.loader .text')[0]
|
||||
var words = makeInstallerFiles()
|
||||
drawInstallerFiles(words)
|
||||
setInterval(function(){
|
||||
for(var i = 0; i < words.length; i++){
|
||||
if(words[i].percent < 100){
|
||||
words[i].percent += Math.floor(Math.random()*25)
|
||||
loaderBar.style.display = 'block'
|
||||
if(words[i].percent >= 100){
|
||||
words[i].percent = 100
|
||||
if(words.length-1 !== i)
|
||||
loaderBar.style.display = 'none'
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
drawInstallerFiles(words)
|
||||
}, 200)
|
||||
function drawInstallerFiles(words){
|
||||
display.innerHTML = ''
|
||||
words.forEach(function(word){
|
||||
if(word.percent > 0){
|
||||
display.innerHTML += '<div class="line">'+word.word+'...'+word.percent+'%</div>'
|
||||
loaderText.innerHTML = word.word+'...'+word.percent+'%'
|
||||
loaderBar.style.width = word.percent + '%'
|
||||
if(word.percent < 100)
|
||||
display.scrollTop = 100000;
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function makeInstallerFiles(){
|
||||
var arr = []
|
||||
for(var i = 0; i < 20; i++){
|
||||
var prefix = chooseRandomValue(nameData.prefix)
|
||||
var word = chooseRandomValue(nameData.word)
|
||||
var suffix = chooseRandomValue(nameData.suffix)
|
||||
arr.push({
|
||||
word: prefix + word + suffix,
|
||||
percent: 0
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function chooseRandomValue(arr){
|
||||
min = 0
|
||||
max = arr.length
|
||||
return arr[Math.floor(Math.random()*(max-min)+min)]
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
html, body{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background:#222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color:#FFF;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
font-weight:100;
|
||||
}
|
||||
body{
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
display:block;
|
||||
padding:0px 20px;
|
||||
}
|
||||
|
||||
.window{
|
||||
max-width:600px;
|
||||
min-width:420px;
|
||||
margin:40px auto 0px auto;
|
||||
}
|
||||
.microsoft{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow:0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
.header{
|
||||
display:flex;
|
||||
color:rgba(255, 255, 255, 0.85);
|
||||
line-height:40px;
|
||||
font-weight:100;
|
||||
height:40px;
|
||||
background:#449;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
box-shadow:0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
.title{
|
||||
flex:1;
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:0px 10px;
|
||||
display:flex;
|
||||
user-select:none;
|
||||
.icon{
|
||||
width:30px;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:6px;
|
||||
}
|
||||
.text{
|
||||
flex:1;
|
||||
height:25px;
|
||||
top:7px;
|
||||
position:relative;
|
||||
padding:0px 8px;
|
||||
line-height:25px;
|
||||
border-left:1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display:flex;
|
||||
width:160px;
|
||||
height:30px;
|
||||
.btn{
|
||||
flex:1;
|
||||
text-align:center;
|
||||
|
||||
&:hover{
|
||||
&.minus{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.expand{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.close{ background:rgba(150, 0, 0, 0.5); }
|
||||
cursor:pointer;
|
||||
}
|
||||
i{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:-1px;
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form{
|
||||
min-height:60px;
|
||||
background:#333;
|
||||
|
||||
.top{
|
||||
padding:10px;
|
||||
display:flex;
|
||||
.icon{
|
||||
width:50px;
|
||||
padding:0px 10px 0px 0px;
|
||||
.amd{
|
||||
background:#333;
|
||||
box-shadow:none;
|
||||
.amd-border, .amd-border:after, .amd-top:after{background:#333;}
|
||||
}
|
||||
}
|
||||
.loader{
|
||||
flex:1;
|
||||
|
||||
.text{
|
||||
font-size:12px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.bar{
|
||||
min-height:20px;
|
||||
background:#019966;
|
||||
width:100%;
|
||||
transition:0.2s all;
|
||||
animation:0.4s opacitize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
padding:0px 10px 10px 10px;
|
||||
.display{
|
||||
height:200px;
|
||||
background:rgba(0, 0, 0, 0.25);
|
||||
padding:5px;
|
||||
font-size:12px;
|
||||
color:rgba(50, 200, 50, 1);
|
||||
font-weight:300;
|
||||
overflow-y:auto;
|
||||
box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
min-height:40px;
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
padding:0px 10px;
|
||||
line-height:30px;
|
||||
.btn{
|
||||
width:80px;
|
||||
&:not(:first-child){margin-left:4px;}
|
||||
text-align:center;
|
||||
height:30px;
|
||||
position:relative;
|
||||
background:#444;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
user-select:none;
|
||||
&:active{
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
color:rgba(255, 255, 255, 0.1);
|
||||
flex:1;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
animation: openwindows 0.2s;
|
||||
transform-origin:bottom center;
|
||||
}
|
||||
|
||||
.amd{
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
padding:5%;
|
||||
background:#000;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius:2px;
|
||||
.amd-border{
|
||||
width:100%;
|
||||
background:#000;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
padding-bottom:100%;
|
||||
&:after{
|
||||
content: '';
|
||||
width:45%;
|
||||
height:45%;
|
||||
background:#000;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd-top{
|
||||
position:absolute;
|
||||
background:#019966;
|
||||
top:0%;
|
||||
left:0%;
|
||||
width:200%;
|
||||
height:200%;
|
||||
|
||||
transform:rotateZ(-45deg);
|
||||
transform-origin:top left;
|
||||
}
|
||||
.amd-bottom{
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:55%;
|
||||
background:#019966;
|
||||
transform:rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize{
|
||||
0%{ opacity:0; }
|
||||
50%{ opacity: 0; }
|
||||
100%{ opacity:1; }
|
||||
}
|
||||
|
|
@ -0,0 +1,276 @@
|
|||
html, body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: #222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color: #FFF;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
body {
|
||||
display: block;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
body * {
|
||||
box-sizing: border-box;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
.window {
|
||||
max-width: 600px;
|
||||
min-width: 420px;
|
||||
margin: 40px auto 0px auto;
|
||||
}
|
||||
|
||||
.microsoft {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
-webkit-animation: openwindows 0.2s;
|
||||
animation: openwindows 0.2s;
|
||||
-webkit-transform-origin: bottom center;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
.microsoft .header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
line-height: 40px;
|
||||
font-weight: 100;
|
||||
height: 40px;
|
||||
background: #449;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .title {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0px 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .header .title .icon {
|
||||
width: 30px;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: 6px;
|
||||
}
|
||||
.microsoft .header .title .text {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
height: 25px;
|
||||
top: 7px;
|
||||
position: relative;
|
||||
padding: 0px 8px;
|
||||
line-height: 25px;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.microsoft .header .buttons {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
width: 160px;
|
||||
height: 30px;
|
||||
}
|
||||
.microsoft .header .buttons .btn {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.minus {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.expand {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.microsoft .header .buttons .btn:hover.close {
|
||||
background: rgba(150, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .header .buttons .btn i {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.microsoft .form {
|
||||
min-height: 60px;
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
}
|
||||
.microsoft .form .top .icon {
|
||||
width: 50px;
|
||||
padding: 0px 10px 0px 0px;
|
||||
}
|
||||
.microsoft .form .top .icon .amd {
|
||||
background: #333;
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .form .top .icon .amd .amd-border, .microsoft .form .top .icon .amd .amd-border:after, .microsoft .form .top .icon .amd .amd-top:after {
|
||||
background: #333;
|
||||
}
|
||||
.microsoft .form .top .loader {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.microsoft .form .top .loader .text {
|
||||
font-size: 12px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.microsoft .form .top .loader .bar {
|
||||
min-height: 20px;
|
||||
background: #019966;
|
||||
width: 100%;
|
||||
-webkit-transition: 0.2s all;
|
||||
transition: 0.2s all;
|
||||
-webkit-animation: 0.4s opacitize;
|
||||
animation: 0.4s opacitize;
|
||||
}
|
||||
.microsoft .middle {
|
||||
padding: 0px 10px 10px 10px;
|
||||
}
|
||||
.microsoft .middle .display {
|
||||
height: 200px;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
padding: 5px;
|
||||
font-size: 12px;
|
||||
color: #32c832;
|
||||
font-weight: 300;
|
||||
overflow-y: auto;
|
||||
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.microsoft .bottom {
|
||||
min-height: 40px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 0px 10px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.microsoft .bottom .btn {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
background: #444;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor: pointer;
|
||||
-webkit-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.microsoft .bottom .btn:not(:first-child) {
|
||||
margin-left: 4px;
|
||||
}
|
||||
.microsoft .bottom .btn:active {
|
||||
box-shadow: none;
|
||||
}
|
||||
.microsoft .bottom .text {
|
||||
color: rgba(255, 255, 255, 0.1);
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amd {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 5%;
|
||||
background: #000;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.amd .amd-border {
|
||||
width: 100%;
|
||||
background: #000;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
.amd .amd-border:after {
|
||||
content: '';
|
||||
width: 45%;
|
||||
height: 45%;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%) translateY(-50%);
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd .amd-border .amd-top {
|
||||
position: absolute;
|
||||
background: #019966;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
.amd .amd-border .amd-bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 55%;
|
||||
background: #019966;
|
||||
-webkit-transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
transform: rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
}
|
||||
|
||||
@-webkit-keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<html >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Zotac Drivers Webinstaller</title>
|
||||
|
||||
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway'>
|
||||
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="window microsoft">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<div class="icon"><i class="material-icons">get_app</i></div>
|
||||
<div class="text">Zotac Drivers Webinstaller</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="btn minus"> <i class="material-icons">remove</i></div>
|
||||
<div class="btn expand"> <i class="material-icons">crop_square</i></div>
|
||||
<div class="btn close"> <i class="material-icons">close</i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="top">
|
||||
<div class="icon">
|
||||
<div class="amd">
|
||||
<div class="amd-border">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="loader">
|
||||
<div class="text">Extract: opengl32sw.dll... 35%</div>
|
||||
<div class="bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="middle">
|
||||
<div class="display">
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract ZotacInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract ZotacInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
<div class="line">Extract Qt5WinExtras.dll... 100%</div>
|
||||
<div class="line">Extract ZotacInstaller.exe... 100%</div>
|
||||
<div class="line">Extract Setup.exe... 100%</div>
|
||||
<div class="line">Extract libEGL.dll... 100%</div>
|
||||
<div class="line">Extract mfc120u.dll... 100%</div>
|
||||
<div class="line">Extract atdcm64a.exe... 100%</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="btn">Cancel</div>
|
||||
<div class="text">Zotac Web Installer v4.0</div>
|
||||
<div class="btn">Back</div>
|
||||
<div class="btn">Close</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="js/index.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
.window.microsoft
|
||||
.header
|
||||
.title
|
||||
.icon #[i.material-icons get_app]
|
||||
.text Radeon Software Crimson Install
|
||||
.buttons
|
||||
.btn.minus
|
||||
i.material-icons remove
|
||||
.btn.expand
|
||||
i.material-icons crop_square
|
||||
.btn.close
|
||||
i.material-icons close
|
||||
.form
|
||||
.top
|
||||
.icon
|
||||
.amd
|
||||
.amd-border
|
||||
.amd-top
|
||||
.amd-bottom
|
||||
.loader
|
||||
.text Extract: opengl32sw.dll... 35%
|
||||
.bar
|
||||
.middle
|
||||
.display
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.line Extract Qt5WinExtras.dll... 100%
|
||||
.line Extract RadeonInstaller.exe... 100%
|
||||
.line Extract Setup.exe... 100%
|
||||
.line Extract libEGL.dll... 100%
|
||||
.line Extract mfc120u.dll... 100%
|
||||
.line Extract atdcm64a.exe... 100%
|
||||
.bottom
|
||||
.btn Cancel
|
||||
.text Nullsoft Install System v4.0
|
||||
.btn Back
|
||||
.btn Close
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
var data = []
|
||||
|
||||
var nameData = {
|
||||
prefix: ['Win', 'Qt', 'Geforce', 'Zotac', 'Setup', 'lib', 'mfc', 'ms', 'mdn'],
|
||||
word: ['EGL', 'Installer', 'GLES', 'Soft', 'Diag', 'Over', 'vcr', 'Open', 'Light'],
|
||||
suffix: ['Installer.exe', 'Extra.dll', '64a.exe', 'V2.dll', '12sw.exe', 'x86.sys', '120.dll']
|
||||
}
|
||||
var display = document.querySelectorAll('.display')[0]
|
||||
var loaderBar = document.querySelectorAll('.loader .bar')[0]
|
||||
var loaderText = document.querySelectorAll('.loader .text')[0]
|
||||
var words = makeInstallerFiles()
|
||||
drawInstallerFiles(words)
|
||||
setInterval(function(){
|
||||
for(var i = 0; i < words.length; i++){
|
||||
if(words[i].percent < 100){
|
||||
words[i].percent += Math.floor(Math.random()*25)
|
||||
loaderBar.style.display = 'block'
|
||||
if(words[i].percent >= 100){
|
||||
words[i].percent = 100
|
||||
if(words.length-1 !== i)
|
||||
loaderBar.style.display = 'none'
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
drawInstallerFiles(words)
|
||||
}, 200)
|
||||
function drawInstallerFiles(words){
|
||||
display.innerHTML = ''
|
||||
words.forEach(function(word){
|
||||
if(word.percent > 0){
|
||||
display.innerHTML += '<div class="line">'+word.word+'...'+word.percent+'%</div>'
|
||||
loaderText.innerHTML = word.word+'...'+word.percent+'%'
|
||||
loaderBar.style.width = word.percent + '%'
|
||||
if(word.percent < 100)
|
||||
display.scrollTop = 100000;
|
||||
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function makeInstallerFiles(){
|
||||
var arr = []
|
||||
for(var i = 0; i < 20; i++){
|
||||
var prefix = chooseRandomValue(nameData.prefix)
|
||||
var word = chooseRandomValue(nameData.word)
|
||||
var suffix = chooseRandomValue(nameData.suffix)
|
||||
arr.push({
|
||||
word: prefix + word + suffix,
|
||||
percent: 0
|
||||
})
|
||||
}
|
||||
return arr
|
||||
}
|
||||
|
||||
function chooseRandomValue(arr){
|
||||
min = 0
|
||||
max = arr.length
|
||||
return arr[Math.floor(Math.random()*(max-min)+min)]
|
||||
}
|
||||
|
|
@ -0,0 +1,216 @@
|
|||
html, body{
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
background:#222;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
color:#FFF;
|
||||
height:100%;
|
||||
overflow:hidden;
|
||||
font-weight:100;
|
||||
}
|
||||
body{
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
display:block;
|
||||
padding:0px 20px;
|
||||
}
|
||||
|
||||
.window{
|
||||
max-width:600px;
|
||||
min-width:420px;
|
||||
margin:40px auto 0px auto;
|
||||
}
|
||||
.microsoft{
|
||||
font-family: 'Raleway', sans-serif;
|
||||
box-shadow:0px 4px 10px rgba(0, 0, 0, 0.5);
|
||||
.header{
|
||||
display:flex;
|
||||
color:rgba(255, 255, 255, 0.85);
|
||||
line-height:40px;
|
||||
font-weight:100;
|
||||
height:40px;
|
||||
background:#449;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
box-shadow:0px 2px 2px rgba(0, 0, 0, 0.25);
|
||||
.title{
|
||||
flex:1;
|
||||
width:100%;
|
||||
height:100%;
|
||||
padding:0px 10px;
|
||||
display:flex;
|
||||
user-select:none;
|
||||
.icon{
|
||||
width:30px;
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:6px;
|
||||
}
|
||||
.text{
|
||||
flex:1;
|
||||
height:25px;
|
||||
top:7px;
|
||||
position:relative;
|
||||
padding:0px 8px;
|
||||
line-height:25px;
|
||||
border-left:1px solid rgba(0, 0, 0, 0.2);
|
||||
white-space:nowrap;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
}
|
||||
.buttons{
|
||||
display:flex;
|
||||
width:160px;
|
||||
height:30px;
|
||||
.btn{
|
||||
flex:1;
|
||||
text-align:center;
|
||||
|
||||
&:hover{
|
||||
&.minus{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.expand{ background:rgba(0, 0, 0, 0.25); }
|
||||
&.close{ background:rgba(150, 0, 0, 0.5); }
|
||||
cursor:pointer;
|
||||
}
|
||||
i{
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
top:-1px;
|
||||
font-size:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.form{
|
||||
min-height:60px;
|
||||
background:#333;
|
||||
|
||||
.top{
|
||||
padding:10px;
|
||||
display:flex;
|
||||
.icon{
|
||||
width:50px;
|
||||
padding:0px 10px 0px 0px;
|
||||
.amd{
|
||||
background:#333;
|
||||
box-shadow:none;
|
||||
.amd-border, .amd-border:after, .amd-top:after{background:#333;}
|
||||
}
|
||||
}
|
||||
.loader{
|
||||
flex:1;
|
||||
|
||||
.text{
|
||||
font-size:12px;
|
||||
margin-bottom:5px;
|
||||
}
|
||||
.bar{
|
||||
min-height:20px;
|
||||
background:#019966;
|
||||
width:100%;
|
||||
transition:0.2s all;
|
||||
animation:0.4s opacitize;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.middle{
|
||||
padding:0px 10px 10px 10px;
|
||||
.display{
|
||||
height:200px;
|
||||
background:rgba(0, 0, 0, 0.25);
|
||||
padding:5px;
|
||||
font-size:12px;
|
||||
color:rgba(50, 200, 50, 1);
|
||||
font-weight:300;
|
||||
overflow-y:auto;
|
||||
box-shadow:inset 0px 0px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
.bottom{
|
||||
min-height:40px;
|
||||
display:flex;
|
||||
font-size:12px;
|
||||
color:rgba(255, 255, 255, 0.8);
|
||||
padding:0px 10px;
|
||||
line-height:30px;
|
||||
.btn{
|
||||
width:80px;
|
||||
&:not(:first-child){margin-left:4px;}
|
||||
text-align:center;
|
||||
height:30px;
|
||||
position:relative;
|
||||
background:#444;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
cursor:pointer;
|
||||
transition:all 0.2s;
|
||||
user-select:none;
|
||||
&:active{
|
||||
box-shadow:none;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
color:rgba(255, 255, 255, 0.1);
|
||||
flex:1;
|
||||
text-align:center;
|
||||
}
|
||||
}
|
||||
animation: openwindows 0.2s;
|
||||
transform-origin:bottom center;
|
||||
}
|
||||
|
||||
.amd{
|
||||
display:inline-block;
|
||||
width:100%;
|
||||
padding:5%;
|
||||
background:#000;
|
||||
box-shadow:0px 2px 4px rgba(0, 0, 0, 0.25);
|
||||
border-radius:2px;
|
||||
.amd-border{
|
||||
width:100%;
|
||||
background:#000;
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
padding-bottom:100%;
|
||||
&:after{
|
||||
content: '';
|
||||
width:45%;
|
||||
height:45%;
|
||||
background:#000;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
left:50%;
|
||||
transform:translateX(-50%) translateY(-50%);
|
||||
}
|
||||
.amd-top{
|
||||
position:absolute;
|
||||
background:#019966;
|
||||
top:0%;
|
||||
left:0%;
|
||||
width:200%;
|
||||
height:200%;
|
||||
|
||||
transform:rotateZ(-45deg);
|
||||
transform-origin:top left;
|
||||
}
|
||||
.amd-bottom{
|
||||
position:absolute;
|
||||
bottom:0px;
|
||||
left:0px;
|
||||
width:100%;
|
||||
height:55%;
|
||||
background:#019966;
|
||||
transform:rotateZ(-45deg) translateX(-30%) translateY(-30%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacitize{
|
||||
0%{ opacity:0; }
|
||||
50%{ opacity: 0; }
|
||||
100%{ opacity:1; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
|
|
@ -0,0 +1,183 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Install your Drivers Online</title>
|
||||
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
|
||||
<link href='../external.html?link=http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||||
<link href="css/portfolio.html" rel="stylesheet" type="text/css" media="all" />
|
||||
<script type="text/javascript" src="js/fliplightbox.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$('body').flipLightBox()
|
||||
</script>
|
||||
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
|
||||
var filterList = {
|
||||
|
||||
init : function() {
|
||||
|
||||
// MixItUp plugin
|
||||
// http://mixitup.io
|
||||
$('#portfoliolist').mixitup({
|
||||
targetSelector : '.portfolio',
|
||||
filterSelector : '.filter',
|
||||
effects : ['fade'],
|
||||
easing : 'snap',
|
||||
// call the hover effect
|
||||
onMixEnd : filterList.hoverEffect()
|
||||
});
|
||||
|
||||
},
|
||||
|
||||
hoverEffect : function() {
|
||||
|
||||
// Simple parallax effect
|
||||
$('#portfoliolist .portfolio').hover(function() {
|
||||
$(this).find('.label').stop().animate({
|
||||
bottom : 0
|
||||
}, 200, 'easeOutQuad');
|
||||
$(this).find('img').stop().animate({
|
||||
top : -40
|
||||
}, 500, 'easeOutQuad');
|
||||
}, function() {
|
||||
$(this).find('.label').stop().animate({
|
||||
bottom : -40
|
||||
}, 200, 'easeInQuad');
|
||||
$(this).find('img').stop().animate({
|
||||
top : 0
|
||||
}, 300, 'easeOutQuad');
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
// Run the show!
|
||||
filterList.init();
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- scroll -->
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
||||
var defaults = {
|
||||
containerID: 'toTop', // fading element id
|
||||
containerHoverID: 'toTopHover', // fading element hover id
|
||||
scrollSpeed: 1200,
|
||||
easingType: 'linear'
|
||||
};
|
||||
|
||||
|
||||
$().UItoTop({ easingType: 'easeOutQuart' });
|
||||
|
||||
});
|
||||
</script>
|
||||
<!-- //scroll -->
|
||||
<!-- start header_style3 -->
|
||||
<script type="text/javascript" src="js/menu.js"></script>
|
||||
<!-- popup -->
|
||||
<link rel="stylesheet" type="text/css" href="css/magnific-popup.css">
|
||||
<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('.popup-with-zoom-anim').magnificPopup({
|
||||
type: 'inline',
|
||||
fixedContentPos: false,
|
||||
fixedBgPos: true,
|
||||
overflowY: 'auto',
|
||||
closeBtnInside: true,
|
||||
preloader: false,
|
||||
midClick: true,
|
||||
removalDelay: 300,
|
||||
mainClass: 'my-mfp-zoom-in'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$('#portfoliolist a').lightBox();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div id="topnav"><!--start topnav --->
|
||||
|
||||
|
||||
|
||||
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="active"><a href="#home" class="scroll">Home</a></li>
|
||||
<li><a href="#download" class="scroll">Download</a></li>
|
||||
<div class="clear"> </div>
|
||||
</ul>
|
||||
</nav>
|
||||
<a href="#" id="navbtn">Nav Menu</a>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!---------banner------------->
|
||||
<div id="home" class="banner">
|
||||
<div class="wrap">
|
||||
<h2>Download your Drivers online!</h2>
|
||||
<p>Free and no Risk</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="download" id="download">
|
||||
<div class="wrap">
|
||||
<div class="team-grids">
|
||||
<h2>Download</h2>
|
||||
<p>
|
||||
Please select your Manufacturer. Dont wanna destroy your PC. </p>
|
||||
<div class="images_1_of_4">
|
||||
<a href="#" class="radius"><img src="images/pic1.jpg"></a>
|
||||
<h3>AMD</h3>
|
||||
<p>Drivers for Amd Devices<br />
|
||||
512mb</p>
|
||||
<a href="drivers/amd/index.html"><img src="images/msg.png"></a>
|
||||
</div>
|
||||
<div class="images_1_of_4">
|
||||
<a href="#" class="radius"><img src="images/pic2.jpg"></a>
|
||||
<h3>Nvidia</h3>
|
||||
<p>Drivers for Nvidia <br />
|
||||
670mb</p>
|
||||
<a href="drivers/nvidia/index.html"><img src="images/msg.png"></a>
|
||||
</div>
|
||||
<div class="images_1_of_4">
|
||||
<a href="#" class="radius"><img src="images/pic3.jpg"></a>
|
||||
<h3>Zotac</h3>
|
||||
<p>Drivers for Zotac <br />
|
||||
265mb</p>
|
||||
<a href="drivers/zotac/index.html"><img src="images/msg.png"></a>
|
||||
</div>
|
||||
<div class="images_1_of_4">
|
||||
<a href="#" class="radius"><img src="images/pic4.jpg"></a>
|
||||
<h3>MSI</h3>
|
||||
<p>Drivers for MSI <br />
|
||||
800mb</p>
|
||||
<a href="drivers/msi/index.html"><img src="images/msg.png"></a>
|
||||
</div>
|
||||
<div class="clear"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------about------------->
|
||||
<div class="about" id="about">
|
||||
<div class="wrap">
|
||||
<h3>About Us</h3>
|
||||
<p>Im creating Webinstallers to deliver you the newest Drivers directly without download! (all is Fun and Parody, no Virus or Phishing) </p>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
/*
|
||||
* jQuery EasIng v1.1.2 - http://gsgd.co.uk/sandbox/jquery.easIng.php
|
||||
*
|
||||
* Uses the built In easIng capabilities added In jQuery 1.1
|
||||
* to offer multiple easIng options
|
||||
*
|
||||
* Copyright (c) 2007 George Smith
|
||||
* Licensed under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,50 @@
|
|||
/*!
|
||||
* jQuery UI 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI
|
||||
*/
|
||||
(function(c,j){function k(a,b){var d=a.nodeName.toLowerCase();if("area"===d){b=a.parentNode;d=b.name;if(!a.href||!d||b.nodeName.toLowerCase()!=="map")return false;a=c("img[usemap=#"+d+"]")[0];return!!a&&l(a)}return(/input|select|textarea|button|object/.test(d)?!a.disabled:"a"==d?a.href||b:b)&&l(a)}function l(a){return!c(a).parents().andSelf().filter(function(){return c.curCSS(this,"visibility")==="hidden"||c.expr.filters.hidden(this)}).length}c.ui=c.ui||{};if(!c.ui.version){c.extend(c.ui,{version:"1.8.16",
|
||||
keyCode:{ALT:18,BACKSPACE:8,CAPS_LOCK:20,COMMA:188,COMMAND:91,COMMAND_LEFT:91,COMMAND_RIGHT:93,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,INSERT:45,LEFT:37,MENU:93,NUMPAD_ADD:107,NUMPAD_DECIMAL:110,NUMPAD_DIVIDE:111,NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,NUMPAD_SUBTRACT:109,PAGE_DOWN:34,PAGE_UP:33,PERIOD:190,RIGHT:39,SHIFT:16,SPACE:32,TAB:9,UP:38,WINDOWS:91}});c.fn.extend({propAttr:c.fn.prop||c.fn.attr,_focus:c.fn.focus,focus:function(a,b){return typeof a==="number"?this.each(function(){var d=
|
||||
this;setTimeout(function(){c(d).focus();b&&b.call(d)},a)}):this._focus.apply(this,arguments)},scrollParent:function(){var a;a=c.browser.msie&&/(static|relative)/.test(this.css("position"))||/absolute/.test(this.css("position"))?this.parents().filter(function(){return/(relative|absolute|fixed)/.test(c.curCSS(this,"position",1))&&/(auto|scroll)/.test(c.curCSS(this,"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0):this.parents().filter(function(){return/(auto|scroll)/.test(c.curCSS(this,
|
||||
"overflow",1)+c.curCSS(this,"overflow-y",1)+c.curCSS(this,"overflow-x",1))}).eq(0);return/fixed/.test(this.css("position"))||!a.length?c(document):a},zIndex:function(a){if(a!==j)return this.css("zIndex",a);if(this.length){a=c(this[0]);for(var b;a.length&&a[0]!==document;){b=a.css("position");if(b==="absolute"||b==="relative"||b==="fixed"){b=parseInt(a.css("zIndex"),10);if(!isNaN(b)&&b!==0)return b}a=a.parent()}}return 0},disableSelection:function(){return this.bind((c.support.selectstart?"selectstart":
|
||||
"mousedown")+".ui-disableSelection",function(a){a.preventDefault()})},enableSelection:function(){return this.unbind(".ui-disableSelection")}});c.each(["Width","Height"],function(a,b){function d(f,g,m,n){c.each(e,function(){g-=parseFloat(c.curCSS(f,"padding"+this,true))||0;if(m)g-=parseFloat(c.curCSS(f,"border"+this+"Width",true))||0;if(n)g-=parseFloat(c.curCSS(f,"margin"+this,true))||0});return g}var e=b==="Width"?["Left","Right"]:["Top","Bottom"],h=b.toLowerCase(),i={innerWidth:c.fn.innerWidth,innerHeight:c.fn.innerHeight,
|
||||
outerWidth:c.fn.outerWidth,outerHeight:c.fn.outerHeight};c.fn["inner"+b]=function(f){if(f===j)return i["inner"+b].call(this);return this.each(function(){c(this).css(h,d(this,f)+"px")})};c.fn["outer"+b]=function(f,g){if(typeof f!=="number")return i["outer"+b].call(this,f);return this.each(function(){c(this).css(h,d(this,f,true,g)+"px")})}});c.extend(c.expr[":"],{data:function(a,b,d){return!!c.data(a,d[3])},focusable:function(a){return k(a,!isNaN(c.attr(a,"tabindex")))},tabbable:function(a){var b=c.attr(a,
|
||||
"tabindex"),d=isNaN(b);return(d||b>=0)&&k(a,!d)}});c(function(){var a=document.body,b=a.appendChild(b=document.createElement("div"));c.extend(b.style,{minHeight:"100px",height:"auto",padding:0,borderWidth:0});c.support.minHeight=b.offsetHeight===100;c.support.selectstart="onselectstart"in b;a.removeChild(b).style.display="none"});c.extend(c.ui,{plugin:{add:function(a,b,d){a=c.ui[a].prototype;for(var e in d){a.plugins[e]=a.plugins[e]||[];a.plugins[e].push([b,d[e]])}},call:function(a,b,d){if((b=a.plugins[b])&&
|
||||
a.element[0].parentNode)for(var e=0;e<b.length;e++)a.options[b[e][0]]&&b[e][1].apply(a.element,d)}},contains:function(a,b){return document.compareDocumentPosition?a.compareDocumentPosition(b)&16:a!==b&&a.contains(b)},hasScroll:function(a,b){if(c(a).css("overflow")==="hidden")return false;b=b&&b==="left"?"scrollLeft":"scrollTop";var d=false;if(a[b]>0)return true;a[b]=1;d=a[b]>0;a[b]=0;return d},isOverAxis:function(a,b,d){return a>b&&a<b+d},isOver:function(a,b,d,e,h,i){return c.ui.isOverAxis(a,d,h)&&
|
||||
c.ui.isOverAxis(b,e,i)}})}})(jQuery);
|
||||
;/*!
|
||||
* jQuery UI Widget 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Widget
|
||||
*/
|
||||
(function(b,j){if(b.cleanData){var k=b.cleanData;b.cleanData=function(a){for(var c=0,d;(d=a[c])!=null;c++)try{b(d).triggerHandler("remove")}catch(e){}k(a)}}else{var l=b.fn.remove;b.fn.remove=function(a,c){return this.each(function(){if(!c)if(!a||b.filter(a,[this]).length)b("*",this).add([this]).each(function(){try{b(this).triggerHandler("remove")}catch(d){}});return l.call(b(this),a,c)})}}b.widget=function(a,c,d){var e=a.split(".")[0],f;a=a.split(".")[1];f=e+"-"+a;if(!d){d=c;c=b.Widget}b.expr[":"][f]=
|
||||
function(h){return!!b.data(h,a)};b[e]=b[e]||{};b[e][a]=function(h,g){arguments.length&&this._createWidget(h,g)};c=new c;c.options=b.extend(true,{},c.options);b[e][a].prototype=b.extend(true,c,{namespace:e,widgetName:a,widgetEventPrefix:b[e][a].prototype.widgetEventPrefix||a,widgetBaseClass:f},d);b.widget.bridge(a,b[e][a])};b.widget.bridge=function(a,c){b.fn[a]=function(d){var e=typeof d==="string",f=Array.prototype.slice.call(arguments,1),h=this;d=!e&&f.length?b.extend.apply(null,[true,d].concat(f)):
|
||||
d;if(e&&d.charAt(0)==="_")return h;e?this.each(function(){var g=b.data(this,a),i=g&&b.isFunction(g[d])?g[d].apply(g,f):g;if(i!==g&&i!==j){h=i;return false}}):this.each(function(){var g=b.data(this,a);g?g.option(d||{})._init():b.data(this,a,new c(d,this))});return h}};b.Widget=function(a,c){arguments.length&&this._createWidget(a,c)};b.Widget.prototype={widgetName:"widget",widgetEventPrefix:"",options:{disabled:false},_createWidget:function(a,c){b.data(c,this.widgetName,this);this.element=b(c);this.options=
|
||||
b.extend(true,{},this.options,this._getCreateOptions(),a);var d=this;this.element.bind("remove."+this.widgetName,function(){d.destroy()});this._create();this._trigger("create");this._init()},_getCreateOptions:function(){return b.metadata&&b.metadata.get(this.element[0])[this.widgetName]},_create:function(){},_init:function(){},destroy:function(){this.element.unbind("."+this.widgetName).removeData(this.widgetName);this.widget().unbind("."+this.widgetName).removeAttr("aria-disabled").removeClass(this.widgetBaseClass+
|
||||
"-disabled ui-state-disabled")},widget:function(){return this.element},option:function(a,c){var d=a;if(arguments.length===0)return b.extend({},this.options);if(typeof a==="string"){if(c===j)return this.options[a];d={};d[a]=c}this._setOptions(d);return this},_setOptions:function(a){var c=this;b.each(a,function(d,e){c._setOption(d,e)});return this},_setOption:function(a,c){this.options[a]=c;if(a==="disabled")this.widget()[c?"addClass":"removeClass"](this.widgetBaseClass+"-disabled ui-state-disabled").attr("aria-disabled",
|
||||
c);return this},enable:function(){return this._setOption("disabled",false)},disable:function(){return this._setOption("disabled",true)},_trigger:function(a,c,d){var e=this.options[a];c=b.Event(c);c.type=(a===this.widgetEventPrefix?a:this.widgetEventPrefix+a).toLowerCase();d=d||{};if(c.originalEvent){a=b.event.props.length;for(var f;a;){f=b.event.props[--a];c[f]=c.originalEvent[f]}}this.element.trigger(c,d);return!(b.isFunction(e)&&e.call(this.element[0],c,d)===false||c.isDefaultPrevented())}}})(jQuery);
|
||||
;/*
|
||||
* jQuery UI Progressbar 1.8.16
|
||||
*
|
||||
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* http://docs.jquery.com/UI/Progressbar
|
||||
*
|
||||
* Depends:
|
||||
* jquery.ui.core.js
|
||||
* jquery.ui.widget.js
|
||||
*/
|
||||
(function(b,d){b.widget("ui.progressbar",{options:{value:0,max:100},min:0,_create:function(){this.element.addClass("ui-progressbar ui-widget ui-widget-content ui-corner-all").attr({role:"progressbar","aria-valuemin":this.min,"aria-valuemax":this.options.max,"aria-valuenow":this._value()});this.valueDiv=b("<div class='ui-progressbar-value ui-widget-header ui-corner-left'></div>").appendTo(this.element);this.oldValue=this._value();this._refreshValue()},destroy:function(){this.element.removeClass("ui-progressbar ui-widget ui-widget-content ui-corner-all").removeAttr("role").removeAttr("aria-valuemin").removeAttr("aria-valuemax").removeAttr("aria-valuenow");
|
||||
this.valueDiv.remove();b.Widget.prototype.destroy.apply(this,arguments)},value:function(a){if(a===d)return this._value();this._setOption("value",a);return this},_setOption:function(a,c){if(a==="value"){this.options.value=c;this._refreshValue();this._value()===this.options.max&&this._trigger("complete")}b.Widget.prototype._setOption.apply(this,arguments)},_value:function(){var a=this.options.value;if(typeof a!=="number")a=0;return Math.min(this.options.max,Math.max(this.min,a))},_percentage:function(){return 100*
|
||||
this._value()/this.options.max},_refreshValue:function(){var a=this.value(),c=this._percentage();if(this.oldValue!==a){this.oldValue=a;this._trigger("change")}this.valueDiv.toggle(a>this.min).toggleClass("ui-corner-right",a===this.options.max).width(c.toFixed(0)+"%");this.element.attr("aria-valuenow",a)}});b.extend(b.ui.progressbar,{version:"1.8.16"})})(jQuery);
|
||||
;
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
*
|
||||
* Uses the built in easing capabilities added In jQuery 1.1
|
||||
* to offer multiple easing options
|
||||
*
|
||||
* TERMS OF USE - EASING EQUATIONS
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner
|
||||
* All rights reserved.
|
||||
*
|
||||
* TERMS OF USE - jQuery Easing
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{def:"easeOutQuad",swing:function(e,f,a,h,g){return jQuery.easing[jQuery.easing.def](e,f,a,h,g)},easeInQuad:function(e,f,a,h,g){return h*(f/=g)*f+a},easeOutQuad:function(e,f,a,h,g){return -h*(f/=g)*(f-2)+a},easeInOutQuad:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f+a}return -h/2*((--f)*(f-2)-1)+a},easeInCubic:function(e,f,a,h,g){return h*(f/=g)*f*f+a},easeOutCubic:function(e,f,a,h,g){return h*((f=f/g-1)*f*f+1)+a},easeInOutCubic:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f+a}return h/2*((f-=2)*f*f+2)+a},easeInQuart:function(e,f,a,h,g){return h*(f/=g)*f*f*f+a},easeOutQuart:function(e,f,a,h,g){return -h*((f=f/g-1)*f*f*f-1)+a},easeInOutQuart:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f+a}return -h/2*((f-=2)*f*f*f-2)+a},easeInQuint:function(e,f,a,h,g){return h*(f/=g)*f*f*f*f+a},easeOutQuint:function(e,f,a,h,g){return h*((f=f/g-1)*f*f*f*f+1)+a},easeInOutQuint:function(e,f,a,h,g){if((f/=g/2)<1){return h/2*f*f*f*f*f+a}return h/2*((f-=2)*f*f*f*f+2)+a},easeInSine:function(e,f,a,h,g){return -h*Math.cos(f/g*(Math.PI/2))+h+a},easeOutSine:function(e,f,a,h,g){return h*Math.sin(f/g*(Math.PI/2))+a},easeInOutSine:function(e,f,a,h,g){return -h/2*(Math.cos(Math.PI*f/g)-1)+a},easeInExpo:function(e,f,a,h,g){return(f==0)?a:h*Math.pow(2,10*(f/g-1))+a},easeOutExpo:function(e,f,a,h,g){return(f==g)?a+h:h*(-Math.pow(2,-10*f/g)+1)+a},easeInOutExpo:function(e,f,a,h,g){if(f==0){return a}if(f==g){return a+h}if((f/=g/2)<1){return h/2*Math.pow(2,10*(f-1))+a}return h/2*(-Math.pow(2,-10*--f)+2)+a},easeInCirc:function(e,f,a,h,g){return -h*(Math.sqrt(1-(f/=g)*f)-1)+a},easeOutCirc:function(e,f,a,h,g){return h*Math.sqrt(1-(f=f/g-1)*f)+a},easeInOutCirc:function(e,f,a,h,g){if((f/=g/2)<1){return -h/2*(Math.sqrt(1-f*f)-1)+a}return h/2*(Math.sqrt(1-(f-=2)*f)+1)+a},easeInElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return -(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e},easeOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k)==1){return e+l}if(!j){j=k*0.3}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}return g*Math.pow(2,-10*h)*Math.sin((h*k-i)*(2*Math.PI)/j)+l+e},easeInOutElastic:function(f,h,e,l,k){var i=1.70158;var j=0;var g=l;if(h==0){return e}if((h/=k/2)==2){return e+l}if(!j){j=k*(0.3*1.5)}if(g<Math.abs(l)){g=l;var i=j/4}else{var i=j/(2*Math.PI)*Math.asin(l/g)}if(h<1){return -0.5*(g*Math.pow(2,10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j))+e}return g*Math.pow(2,-10*(h-=1))*Math.sin((h*k-i)*(2*Math.PI)/j)*0.5+l+e},easeInBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*(f/=h)*f*((g+1)*f-g)+a},easeOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}return i*((f=f/h-1)*f*((g+1)*f+g)+1)+a},easeInOutBack:function(e,f,a,i,h,g){if(g==undefined){g=1.70158}if((f/=h/2)<1){return i/2*(f*f*(((g*=(1.525))+1)*f-g))+a}return i/2*((f-=2)*f*(((g*=(1.525))+1)*f+g)+2)+a},easeInBounce:function(e,f,a,h,g){return h-jQuery.easing.easeOutBounce(e,g-f,0,h,g)+a},easeOutBounce:function(e,f,a,h,g){if((f/=g)<(1/2.75)){return h*(7.5625*f*f)+a}else{if(f<(2/2.75)){return h*(7.5625*(f-=(1.5/2.75))*f+0.75)+a}else{if(f<(2.5/2.75)){return h*(7.5625*(f-=(2.25/2.75))*f+0.9375)+a}else{return h*(7.5625*(f-=(2.625/2.75))*f+0.984375)+a}}}},easeInOutBounce:function(e,f,a,h,g){if(f<g/2){return jQuery.easing.easeInBounce(e,f*2,0,h,g)*0.5+a}return jQuery.easing.easeOutBounce(e,f*2-g,0,h,g)*0.5+h*0.5+a}});
|
||||
|
|
@ -0,0 +1,472 @@
|
|||
/**
|
||||
* jQuery lightBox plugin
|
||||
* This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
|
||||
* and adapted to me for use like a plugin from jQuery.
|
||||
* @name jquery-lightbox-0.5.js
|
||||
* @author Leandro Vieira Pinho - http://leandrovieira.com
|
||||
* @version 0.5
|
||||
* @date April 11, 2008
|
||||
* @category jQuery plugin
|
||||
* @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
|
||||
* @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
|
||||
* @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
|
||||
*/
|
||||
|
||||
// Offering a Custom Alias suport - More info: http://docs.jquery.com/Plugins/Authoring#Custom_Alias
|
||||
(function($) {
|
||||
/**
|
||||
* $ is an alias to jQuery object
|
||||
*
|
||||
*/
|
||||
$.fn.lightBox = function(settings) {
|
||||
// Settings to configure the jQuery lightBox plugin how you like
|
||||
settings = jQuery.extend({
|
||||
// Configuration related to overlay
|
||||
overlayBgColor: '#000', // (string) Background color to overlay; inform a hexadecimal value like: #RRGGBB. Where RR, GG, and BB are the hexadecimal values for the red, green, and blue values of the color.
|
||||
overlayOpacity: 0.8, // (integer) Opacity value to overlay; inform: 0.X. Where X are number from 0 to 9
|
||||
// Configuration related to navigation
|
||||
fixedNavigation: false, // (boolean) Boolean that informs if the navigation (next and prev button) will be fixed or not in the interface.
|
||||
// Configuration related to images
|
||||
imageLoading: 'images/lightbox-ico-loading.gif', // (string) Path and the name of the loading icon
|
||||
imageBtnPrev: 'images/lightbox-btn-prev.gif', // (string) Path and the name of the prev button image
|
||||
imageBtnNext: 'images/lightbox-btn-next.gif', // (string) Path and the name of the next button image
|
||||
imageBtnClose: 'images/lightbox-btn-close.gif', // (string) Path and the name of the close btn
|
||||
imageBlank: 'images/lightbox-blank.gif', // (string) Path and the name of a blank image (one pixel)
|
||||
// Configuration related to container image box
|
||||
containerBorderSize: 10, // (integer) If you adjust the padding in the CSS for the container, #lightbox-container-image-box, you will need to update this value
|
||||
containerResizeSpeed: 400, // (integer) Specify the resize duration of container image. These number are miliseconds. 400 is default.
|
||||
// Configuration related to texts in caption. For example: Image 2 of 8. You can alter either "Image" and "of" texts.
|
||||
txtImage: 'Image', // (string) Specify text "Image"
|
||||
txtOf: 'of', // (string) Specify text "of"
|
||||
// Configuration related to keyboard navigation
|
||||
keyToClose: 'c', // (string) (c = close) Letter to close the jQuery lightBox interface. Beyond this letter, the letter X and the SCAPE key is used to.
|
||||
keyToPrev: 'p', // (string) (p = previous) Letter to show the previous image
|
||||
keyToNext: 'n', // (string) (n = next) Letter to show the next image.
|
||||
// Don<6F>t alter these variables in any way
|
||||
imageArray: [],
|
||||
activeImage: 0
|
||||
},settings);
|
||||
// Caching the jQuery object with all elements matched
|
||||
var jQueryMatchedObj = this; // This, in this context, refer to jQuery object
|
||||
/**
|
||||
* Initializing the plugin calling the start function
|
||||
*
|
||||
* @return boolean false
|
||||
*/
|
||||
function _initialize() {
|
||||
_start(this,jQueryMatchedObj); // This, in this context, refer to object (link) which the user have clicked
|
||||
return false; // Avoid the browser following the link
|
||||
}
|
||||
/**
|
||||
* Start the jQuery lightBox plugin
|
||||
*
|
||||
* @param object objClicked The object (link) whick the user have clicked
|
||||
* @param object jQueryMatchedObj The jQuery object with all elements matched
|
||||
*/
|
||||
function _start(objClicked,jQueryMatchedObj) {
|
||||
// Hime some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
|
||||
$('embed, object, select').css({ 'visibility' : 'hidden' });
|
||||
// Call the function to create the markup structure; style some elements; assign events in some elements.
|
||||
_set_interface();
|
||||
// Unset total images in imageArray
|
||||
settings.imageArray.length = 0;
|
||||
// Unset image active information
|
||||
settings.activeImage = 0;
|
||||
// We have an image set? Or just an image? Let<65>s see it.
|
||||
if ( jQueryMatchedObj.length == 1 ) {
|
||||
settings.imageArray.push(new Array(objClicked.getAttribute('href'),objClicked.getAttribute('title')));
|
||||
} else {
|
||||
// Add an Array (as many as we have), with href and title atributes, inside the Array that storage the images references
|
||||
for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
|
||||
settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
|
||||
}
|
||||
}
|
||||
while ( settings.imageArray[settings.activeImage][0] != objClicked.getAttribute('href') ) {
|
||||
settings.activeImage++;
|
||||
}
|
||||
// Call the function that prepares image exibition
|
||||
_set_image_to_view();
|
||||
}
|
||||
/**
|
||||
* Create the jQuery lightBox plugin interface
|
||||
*
|
||||
* The HTML markup will be like that:
|
||||
<div id="jquery-overlay"></div>
|
||||
<div id="jquery-lightbox">
|
||||
<div id="lightbox-container-image-box">
|
||||
<div id="lightbox-container-image">
|
||||
<img src="../fotos/XX.jpg" id="lightbox-image">
|
||||
<div id="lightbox-nav">
|
||||
<a href="#" id="lightbox-nav-btnPrev"></a>
|
||||
<a href="#" id="lightbox-nav-btnNext"></a>
|
||||
</div>
|
||||
<div id="lightbox-loading">
|
||||
<a href="#" id="lightbox-loading-link">
|
||||
<img src="../images/lightbox-ico-loading.gif">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lightbox-container-image-data-box">
|
||||
<div id="lightbox-container-image-data">
|
||||
<div id="lightbox-image-details">
|
||||
<span id="lightbox-image-details-caption"></span>
|
||||
<span id="lightbox-image-details-currentNumber"></span>
|
||||
</div>
|
||||
<div id="lightbox-secNav">
|
||||
<a href="#" id="lightbox-secNav-btnClose">
|
||||
<img src="../images/lightbox-btn-close.gif">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
*
|
||||
*/
|
||||
function _set_interface() {
|
||||
// Apply the HTML markup into body tag
|
||||
$('body').append('<div id="jquery-overlay"></div><div id="jquery-lightbox"><div id="lightbox-container-image-box"><div id="lightbox-container-image"><img id="lightbox-image"><div style="" id="lightbox-nav"><a href="#" id="lightbox-nav-btnPrev"></a><a href="#" id="lightbox-nav-btnNext"></a></div><div id="lightbox-loading"><a href="#" id="lightbox-loading-link"><img src="' + settings.imageLoading + '"></a></div></div></div><div id="lightbox-container-image-data-box"><div id="lightbox-container-image-data"><div id="lightbox-image-details"><span id="lightbox-image-details-caption"></span><span id="lightbox-image-details-currentNumber"></span></div><div id="lightbox-secNav"><a href="#" id="lightbox-secNav-btnClose"><img src="' + settings.imageBtnClose + '"></a></div></div></div></div>');
|
||||
// Get page sizes
|
||||
var arrPageSizes = ___getPageSize();
|
||||
// Style overlay and show it
|
||||
$('#jquery-overlay').css({
|
||||
backgroundColor: settings.overlayBgColor,
|
||||
opacity: settings.overlayOpacity,
|
||||
width: arrPageSizes[0],
|
||||
height: arrPageSizes[1]
|
||||
}).fadeIn();
|
||||
// Get page scroll
|
||||
var arrPageScroll = ___getPageScroll();
|
||||
// Calculate top and left offset for the jquery-lightbox div object and show it
|
||||
$('#jquery-lightbox').css({
|
||||
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
|
||||
left: arrPageScroll[0]
|
||||
}).show();
|
||||
// Assigning click events in elements to close overlay
|
||||
$('#jquery-overlay,#jquery-lightbox').click(function() {
|
||||
_finish();
|
||||
});
|
||||
// Assign the _finish function to lightbox-loading-link and lightbox-secNav-btnClose objects
|
||||
$('#lightbox-loading-link,#lightbox-secNav-btnClose').click(function() {
|
||||
_finish();
|
||||
return false;
|
||||
});
|
||||
// If window was resized, calculate the new overlay dimensions
|
||||
$(window).resize(function() {
|
||||
// Get page sizes
|
||||
var arrPageSizes = ___getPageSize();
|
||||
// Style overlay and show it
|
||||
$('#jquery-overlay').css({
|
||||
width: arrPageSizes[0],
|
||||
height: arrPageSizes[1]
|
||||
});
|
||||
// Get page scroll
|
||||
var arrPageScroll = ___getPageScroll();
|
||||
// Calculate top and left offset for the jquery-lightbox div object and show it
|
||||
$('#jquery-lightbox').css({
|
||||
top: arrPageScroll[1] + (arrPageSizes[3] / 10),
|
||||
left: arrPageScroll[0]
|
||||
});
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Prepares image exibition; doing a image<EFBFBD>s preloader to calculate it<EFBFBD>s size
|
||||
*
|
||||
*/
|
||||
function _set_image_to_view() { // show the loading
|
||||
// Show the loading
|
||||
$('#lightbox-loading').show();
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-image,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
|
||||
} else {
|
||||
// Hide some elements
|
||||
$('#lightbox-image,#lightbox-nav,#lightbox-nav-btnPrev,#lightbox-nav-btnNext,#lightbox-container-image-data-box,#lightbox-image-details-currentNumber').hide();
|
||||
}
|
||||
// Image preload process
|
||||
var objImagePreloader = new Image();
|
||||
objImagePreloader.onload = function() {
|
||||
$('#lightbox-image').attr('src',settings.imageArray[settings.activeImage][0]);
|
||||
// Perfomance an effect in the image container resizing it
|
||||
_resize_container_image_box(objImagePreloader.width,objImagePreloader.height);
|
||||
// clear onLoad, IE behaves irratically with animated gifs otherwise
|
||||
objImagePreloader.onload=function(){};
|
||||
};
|
||||
objImagePreloader.src = settings.imageArray[settings.activeImage][0];
|
||||
};
|
||||
/**
|
||||
* Perfomance an effect in the image container resizing it
|
||||
*
|
||||
* @param integer intImageWidth The image<EFBFBD>s width that will be showed
|
||||
* @param integer intImageHeight The image<EFBFBD>s height that will be showed
|
||||
*/
|
||||
function _resize_container_image_box(intImageWidth,intImageHeight) {
|
||||
// Get current width and height
|
||||
var intCurrentWidth = $('#lightbox-container-image-box').width();
|
||||
var intCurrentHeight = $('#lightbox-container-image-box').height();
|
||||
// Get the width and height of the selected image plus the padding
|
||||
var intWidth = (intImageWidth + (settings.containerBorderSize * 2)); // Plus the image<67>s width and the left and right padding value
|
||||
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image<67>s height and the left and right padding value
|
||||
// Diferences
|
||||
var intDiffW = intCurrentWidth - intWidth;
|
||||
var intDiffH = intCurrentHeight - intHeight;
|
||||
// Perfomance the effect
|
||||
$('#lightbox-container-image-box').animate({ width: intWidth, height: intHeight },settings.containerResizeSpeed,function() { _show_image(); });
|
||||
if ( ( intDiffW == 0 ) && ( intDiffH == 0 ) ) {
|
||||
if ( $.browser.msie ) {
|
||||
___pause(250);
|
||||
} else {
|
||||
___pause(100);
|
||||
}
|
||||
}
|
||||
$('#lightbox-container-image-data-box').css({ width: intImageWidth });
|
||||
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ height: intImageHeight + (settings.containerBorderSize * 2) });
|
||||
};
|
||||
/**
|
||||
* Show the prepared image
|
||||
*
|
||||
*/
|
||||
function _show_image() {
|
||||
$('#lightbox-loading').hide();
|
||||
$('#lightbox-image').fadeIn(function() {
|
||||
_show_image_data();
|
||||
_set_navigation();
|
||||
});
|
||||
_preload_neighbor_images();
|
||||
};
|
||||
/**
|
||||
* Show the image information
|
||||
*
|
||||
*/
|
||||
function _show_image_data() {
|
||||
$('#lightbox-container-image-data-box').slideDown('fast');
|
||||
$('#lightbox-image-details-caption').hide();
|
||||
if ( settings.imageArray[settings.activeImage][1] ) {
|
||||
$('#lightbox-image-details-caption').html(settings.imageArray[settings.activeImage][1]).show();
|
||||
}
|
||||
// If we have a image set, display 'Image X of X'
|
||||
if ( settings.imageArray.length > 1 ) {
|
||||
$('#lightbox-image-details-currentNumber').html(settings.txtImage + ' ' + ( settings.activeImage + 1 ) + ' ' + settings.txtOf + ' ' + settings.imageArray.length).show();
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Display the button navigations
|
||||
*
|
||||
*/
|
||||
function _set_navigation() {
|
||||
$('#lightbox-nav').show();
|
||||
|
||||
// Instead to define this configuration in CSS file, we define here. And it<69>s need to IE. Just.
|
||||
$('#lightbox-nav-btnPrev,#lightbox-nav-btnNext').css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
|
||||
// Show the prev button, if not the first image in set
|
||||
if ( settings.activeImage != 0 ) {
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-nav-btnPrev').css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' })
|
||||
.unbind()
|
||||
.bind('click',function() {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
// Show the images button for Next buttons
|
||||
$('#lightbox-nav-btnPrev').unbind().hover(function() {
|
||||
$(this).css({ 'background' : 'url(' + settings.imageBtnPrev + ') left 15% no-repeat' });
|
||||
},function() {
|
||||
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
}).show().bind('click',function() {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Show the next button, if not the last image in set
|
||||
if ( settings.activeImage != ( settings.imageArray.length -1 ) ) {
|
||||
if ( settings.fixedNavigation ) {
|
||||
$('#lightbox-nav-btnNext').css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' })
|
||||
.unbind()
|
||||
.bind('click',function() {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
} else {
|
||||
// Show the images button for Next buttons
|
||||
$('#lightbox-nav-btnNext').unbind().hover(function() {
|
||||
$(this).css({ 'background' : 'url(' + settings.imageBtnNext + ') right 15% no-repeat' });
|
||||
},function() {
|
||||
$(this).css({ 'background' : 'transparent url(' + settings.imageBlank + ') no-repeat' });
|
||||
}).show().bind('click',function() {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
}
|
||||
// Enable keyboard navigation
|
||||
_enable_keyboard_navigation();
|
||||
}
|
||||
/**
|
||||
* Enable a support to keyboard navigation
|
||||
*
|
||||
*/
|
||||
function _enable_keyboard_navigation() {
|
||||
$(document).keydown(function(objEvent) {
|
||||
_keyboard_action(objEvent);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* Disable the support to keyboard navigation
|
||||
*
|
||||
*/
|
||||
function _disable_keyboard_navigation() {
|
||||
$(document).unbind();
|
||||
}
|
||||
/**
|
||||
* Perform the keyboard actions
|
||||
*
|
||||
*/
|
||||
function _keyboard_action(objEvent) {
|
||||
// To ie
|
||||
if ( objEvent == null ) {
|
||||
keycode = event.keyCode;
|
||||
escapeKey = 27;
|
||||
// To Mozilla
|
||||
} else {
|
||||
keycode = objEvent.keyCode;
|
||||
escapeKey = objEvent.DOM_VK_ESCAPE;
|
||||
}
|
||||
// Get the key in lower case form
|
||||
key = String.fromCharCode(keycode).toLowerCase();
|
||||
// Verify the keys to close the ligthBox
|
||||
if ( ( key == settings.keyToClose ) || ( key == 'x' ) || ( keycode == escapeKey ) ) {
|
||||
_finish();
|
||||
}
|
||||
// Verify the key to show the previous image
|
||||
if ( ( key == settings.keyToPrev ) || ( keycode == 37 ) ) {
|
||||
// If we<77>re not showing the first image, call the previous
|
||||
if ( settings.activeImage != 0 ) {
|
||||
settings.activeImage = settings.activeImage - 1;
|
||||
_set_image_to_view();
|
||||
_disable_keyboard_navigation();
|
||||
}
|
||||
}
|
||||
// Verify the key to show the next image
|
||||
if ( ( key == settings.keyToNext ) || ( keycode == 39 ) ) {
|
||||
// If we<77>re not showing the last image, call the next
|
||||
if ( settings.activeImage != ( settings.imageArray.length - 1 ) ) {
|
||||
settings.activeImage = settings.activeImage + 1;
|
||||
_set_image_to_view();
|
||||
_disable_keyboard_navigation();
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Preload prev and next images being showed
|
||||
*
|
||||
*/
|
||||
function _preload_neighbor_images() {
|
||||
if ( (settings.imageArray.length -1) > settings.activeImage ) {
|
||||
objNext = new Image();
|
||||
objNext.src = settings.imageArray[settings.activeImage + 1][0];
|
||||
}
|
||||
if ( settings.activeImage > 0 ) {
|
||||
objPrev = new Image();
|
||||
objPrev.src = settings.imageArray[settings.activeImage -1][0];
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Remove jQuery lightBox plugin HTML markup
|
||||
*
|
||||
*/
|
||||
function _finish() {
|
||||
$('#jquery-lightbox').remove();
|
||||
$('#jquery-overlay').fadeOut(function() { $('#jquery-overlay').remove(); });
|
||||
// Show some elements to avoid conflict with overlay in IE. These elements appear above the overlay.
|
||||
$('embed, object, select').css({ 'visibility' : 'visible' });
|
||||
}
|
||||
/**
|
||||
/ THIRD FUNCTION
|
||||
* getPageSize() by quirksmode.com
|
||||
*
|
||||
* @return Array Return an array with page width, height and window width, height
|
||||
*/
|
||||
function ___getPageSize() {
|
||||
var xScroll, yScroll;
|
||||
if (window.innerHeight && window.scrollMaxY) {
|
||||
xScroll = window.innerWidth + window.scrollMaxX;
|
||||
yScroll = window.innerHeight + window.scrollMaxY;
|
||||
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
|
||||
xScroll = document.body.scrollWidth;
|
||||
yScroll = document.body.scrollHeight;
|
||||
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
|
||||
xScroll = document.body.offsetWidth;
|
||||
yScroll = document.body.offsetHeight;
|
||||
}
|
||||
var windowWidth, windowHeight;
|
||||
if (self.innerHeight) { // all except Explorer
|
||||
if(document.documentElement.clientWidth){
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
} else {
|
||||
windowWidth = self.innerWidth;
|
||||
}
|
||||
windowHeight = self.innerHeight;
|
||||
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
|
||||
windowWidth = document.documentElement.clientWidth;
|
||||
windowHeight = document.documentElement.clientHeight;
|
||||
} else if (document.body) { // other Explorers
|
||||
windowWidth = document.body.clientWidth;
|
||||
windowHeight = document.body.clientHeight;
|
||||
}
|
||||
// for small pages with total height less then height of the viewport
|
||||
if(yScroll < windowHeight){
|
||||
pageHeight = windowHeight;
|
||||
} else {
|
||||
pageHeight = yScroll;
|
||||
}
|
||||
// for small pages with total width less then width of the viewport
|
||||
if(xScroll < windowWidth){
|
||||
pageWidth = xScroll;
|
||||
} else {
|
||||
pageWidth = windowWidth;
|
||||
}
|
||||
arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
|
||||
return arrayPageSize;
|
||||
};
|
||||
/**
|
||||
/ THIRD FUNCTION
|
||||
* getPageScroll() by quirksmode.com
|
||||
*
|
||||
* @return Array Return an array with x,y page scroll values.
|
||||
*/
|
||||
function ___getPageScroll() {
|
||||
var xScroll, yScroll;
|
||||
if (self.pageYOffset) {
|
||||
yScroll = self.pageYOffset;
|
||||
xScroll = self.pageXOffset;
|
||||
} else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
|
||||
yScroll = document.documentElement.scrollTop;
|
||||
xScroll = document.documentElement.scrollLeft;
|
||||
} else if (document.body) {// all other Explorers
|
||||
yScroll = document.body.scrollTop;
|
||||
xScroll = document.body.scrollLeft;
|
||||
}
|
||||
arrayPageScroll = new Array(xScroll,yScroll);
|
||||
return arrayPageScroll;
|
||||
};
|
||||
/**
|
||||
* Stop the code execution from a escified time in milisecond
|
||||
*
|
||||
*/
|
||||
function ___pause(ms) {
|
||||
var date = new Date();
|
||||
curDate = null;
|
||||
do { var curDate = new Date(); }
|
||||
while ( curDate - date < ms);
|
||||
};
|
||||
// Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once
|
||||
return this.unbind('click').click(_initialize);
|
||||
};
|
||||
})(jQuery); // Call and execute the function immediately passing the jQuery object
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,40 @@
|
|||
/*
|
||||
* MIXITUP - A CSS3 & JQuery Filter and Sort Plugin
|
||||
* Version: 1.4.0
|
||||
* Author: Patrick Kunka
|
||||
* Copyright 2012-2013 Patrick Kunka, All Rights Reserved
|
||||
* FREE FOR NON-COMMERCIAL USE
|
||||
* http://www.mixitup.io
|
||||
*/
|
||||
(function(e){function m(d,b,h,c,a){function j(){k.unbind();b&&v(b,h,c,a);a.startOrder=[];a.newOrder=[];a.origSort=[];a.checkSort=[];u.removeStyle(a.prefix+"filter, filter, "+a.prefix+"transform, transform, opacity, display").css(a.clean).removeAttr("data-checksum");window.atob||u.css({display:"none",opacity:"0"});k.removeStyle(a.prefix+"transition, transition, "+a.prefix+"perspective, perspective, "+a.prefix+"perspective-origin, perspective-origin, "+(a.resizeContainer?"height":""));"list"==a.layoutMode?
|
||||
(q.css({display:a.targetDisplayList,opacity:"1"}),a.origDisplay=a.targetDisplayList):(q.css({display:a.targetDisplayGrid,opacity:"1"}),a.origDisplay=a.targetDisplayGrid);a.origLayout=a.layoutMode;setTimeout(function(){u.removeStyle(a.prefix+"transition, transition");a.mixing=!1;if("function"==typeof a.onMixEnd){var b=a.onMixEnd.call(this,a);a=b?b:a}})}clearInterval(a.failsafe);a.mixing=!0;if("function"==typeof a.onMixStart){var f=a.onMixStart.call(this,a);a=f?f:a}for(var g=a.transitionSpeed,f=0;2>
|
||||
f;f++){var n=0==f?n=a.prefix:"";a.transition[n+"transition"]="all "+g+"ms linear";a.transition[n+"transform"]=n+"translate3d(0,0,0)";a.perspective[n+"perspective"]=a.perspectiveDistance+"px";a.perspective[n+"perspective-origin"]=a.perspectiveOrigin}var r=a.targetSelector,u=c.find(r);u.each(function(){this.data={}});var k=u.parent();k.css(a.perspective);a.easingFallback="ease-in-out";"smooth"==a.easing&&(a.easing="cubic-bezier(0.25, 0.46, 0.45, 0.94)");"snap"==a.easing&&(a.easing="cubic-bezier(0.77, 0, 0.175, 1)");
|
||||
"windback"==a.easing&&(a.easing="cubic-bezier(0.175, 0.885, 0.320, 1.275)",a.easingFallback="cubic-bezier(0.175, 0.885, 0.320, 1)");"windup"==a.easing&&(a.easing="cubic-bezier(0.6, -0.28, 0.735, 0.045)",a.easingFallback="cubic-bezier(0.6, 0.28, 0.735, 0.045)");f="list"==a.layoutMode&&null!=a.listEffects?a.listEffects:a.effects;Array.prototype.indexOf&&(a.fade=-1<f.indexOf("fade")?"0":"",a.scale=-1<f.indexOf("scale")?"scale(.01)":"",a.rotateZ=-1<f.indexOf("rotateZ")?"rotate(180deg)":"",a.rotateY=-1<
|
||||
f.indexOf("rotateY")?"rotateY(90deg)":"",a.rotateX=-1<f.indexOf("rotateX")?"rotateX(90deg)":"",a.blur=-1<f.indexOf("blur")?"blur(8px)":"",a.grayscale=-1<f.indexOf("grayscale")?"grayscale(100%)":"");d=d.replace(/\s|\//g,".");var q=e(),s=e();if("or"==a.filterLogic){var m=d.split(".");!0==a.multiFilter&&""==m[0]&&m.shift();1>m.length?s=s.add(c.find(r+":visible")):u.each(function(){for(var a=0,b=e(this),c=0;c<m.length;c++)b.hasClass(m[c])&&(q=q.add(b),a++);0==a&&(s=s.add(b))})}else q=q.add(k.find(r+"."+
|
||||
d)),s=s.add(k.find(r+":not(."+d+"):visible"));d=q.length;var t=e(),p=e(),l=e();s.each(function(){var a=e(this);"none"!=a.css("display")&&(t=t.add(a),l=l.add(a))});if(q.filter(":visible").length==d&&!t.length&&!b){if(a.origLayout==a.layoutMode)return j(),!1;if(1==q.length)return"list"==a.layoutMode?(c.addClass(a.listClass),c.removeClass(a.gridClass),l.css("display",a.targetDisplayList)):(c.addClass(a.gridClass),c.removeClass(a.listClass),l.css("display",a.targetDisplayGrid)),j(),!1}a.origHeight=k.height();
|
||||
if(q.length){c.removeClass(a.failClass);q.each(function(){var a=e(this);"none"==a.css("display")?p=p.add(a):l=l.add(a)});if(a.origLayout!=a.layoutMode&&!1==a.animateGridList)return"list"==a.layoutMode?(c.addClass(a.listClass),c.removeClass(a.gridClass),l.css("display",a.targetDisplayList)):(c.addClass(a.gridClass),c.removeClass(a.listClass),l.css("display",a.targetDisplayGrid)),j(),!1;if(!window.atob)return j(),!1;u.css(a.clean);l.each(function(){this.data.origPos=e(this).offset()});"list"==a.layoutMode?
|
||||
(c.addClass(a.listClass),c.removeClass(a.gridClass),p.css("display",a.targetDisplayList)):(c.addClass(a.gridClass),c.removeClass(a.listClass),p.css("display",a.targetDisplayGrid));p.each(function(){this.data.showInterPos=e(this).offset()});t.each(function(){this.data.hideInterPos=e(this).offset()});l.each(function(){this.data.preInterPos=e(this).offset()});"list"==a.layoutMode?l.css("display",a.targetDisplayList):l.css("display",a.targetDisplayGrid);b&&v(b,h,c,a);if(b&&a.origSort.compare(a.checkSort))return j(),
|
||||
!1;t.hide();p.each(function(){this.data.finalPos=e(this).offset()});l.each(function(){this.data.finalPrePos=e(this).offset()});a.newHeight=k.height();b&&v("reset",null,c,a);p.hide();l.css("display",a.origDisplay);"block"==a.origDisplay?(c.addClass(a.listClass),p.css("display",a.targetDisplayList)):(c.removeClass(a.listClass),p.css("display",a.targetDisplayGrid));a.resizeContainer&&k.css("height",a.origHeight+"px");d={};for(f=0;2>f;f++)n=0==f?n=a.prefix:"",d[n+"transform"]=a.scale+" "+a.rotateX+" "+
|
||||
a.rotateY+" "+a.rotateZ,d[n+"filter"]=a.blur+" "+a.grayscale;p.css(d);l.each(function(){var b=this.data,c=e(this);c.hasClass("mix_tohide")?(b.preTX=b.origPos.left-b.hideInterPos.left,b.preTY=b.origPos.top-b.hideInterPos.top):(b.preTX=b.origPos.left-b.preInterPos.left,b.preTY=b.origPos.top-b.preInterPos.top);for(var d={},g=0;2>g;g++){var f=0==g?f=a.prefix:"";d[f+"transform"]="translate("+b.preTX+"px,"+b.preTY+"px)"}c.css(d)});"list"==a.layoutMode?(c.addClass(a.listClass),c.removeClass(a.gridClass)):
|
||||
(c.addClass(a.gridClass),c.removeClass(a.listClass));setTimeout(function(){if(a.resizeContainer){for(var b={},c=0;2>c;c++){var d=0==c?d=a.prefix:"";b[d+"transition"]="all "+g+"ms ease-in-out";b.height=a.newHeight+"px"}k.css(b)}t.css("opacity",a.fade);p.css("opacity",1);p.each(function(){var b=this.data;b.tX=b.finalPos.left-b.showInterPos.left;b.tY=b.finalPos.top-b.showInterPos.top;for(var c={},d=0;2>d;d++){var f=0==d?f=a.prefix:"";c[f+"transition-property"]=f+"transform, "+f+"filter, opacity";c[f+
|
||||
"transition-timing-function"]=a.easing+", linear, linear";c[f+"transition-duration"]=g+"ms";c[f+"transition-delay"]="0";c[f+"transform"]="translate("+b.tX+"px,"+b.tY+"px)";c[f+"filter"]="none"}e(this).css("-webkit-transition","all "+g+"ms "+a.easingFallback).css(c)});l.each(function(){var b=this.data;b.tX=0!=b.finalPrePos.left?b.finalPrePos.left-b.preInterPos.left:0;b.tY=0!=b.finalPrePos.left?b.finalPrePos.top-b.preInterPos.top:0;for(var c={},d=0;2>d;d++){var f=0==d?f=a.prefix:"";c[f+"transition"]=
|
||||
"all "+g+"ms "+a.easing;c[f+"transform"]="translate("+b.tX+"px,"+b.tY+"px)"}e(this).css("-webkit-transition","all "+g+"ms "+a.easingFallback).css(c)});b={};for(c=0;2>c;c++)d=0==c?d=a.prefix:"",b[d+"transition"]="all "+g+"ms "+a.easing+", "+d+"filter "+g+"ms linear, opacity "+g+"ms linear",b[d+"transform"]=a.scale+" "+a.rotateX+" "+a.rotateY+" "+a.rotateZ,b[d+"filter"]=a.blur+" "+a.grayscale,b.opacity=a.fade;t.css(b);k.bind("webkitTransitionEnd transitionend otransitionend oTransitionEnd",function(a){if(-1<
|
||||
a.originalEvent.propertyName.indexOf("transform")||-1<a.originalEvent.propertyName.indexOf("opacity"))-1<r.indexOf(".")?e(a.target).hasClass(r.replace(".",""))&&j():e(a.target).is(r)&&j()})},10);a.failsafe=setTimeout(function(){a.mixing&&j()},g+400)}else{a.resizeContainer&&k.css("height",a.origHeight+"px");if(!window.atob)return j(),!1;t=s;setTimeout(function(){k.css(a.perspective);if(a.resizeContainer){for(var b={},d=0;2>d;d++){var e=0==d?e=a.prefix:"";b[e+"transition"]="height "+g+"ms ease-in-out";
|
||||
b.height=a.minHeight+"px"}k.css(b)}u.css(a.transition);if(s.length){b={};for(d=0;2>d;d++)e=0==d?e=a.prefix:"",b[e+"transform"]=a.scale+" "+a.rotateX+" "+a.rotateY+" "+a.rotateZ,b[e+"filter"]=a.blur+" "+a.grayscale,b.opacity=a.fade;t.css(b);k.bind("webkitTransitionEnd transitionend otransitionend oTransitionEnd",function(b){if(-1<b.originalEvent.propertyName.indexOf("transform")||-1<b.originalEvent.propertyName.indexOf("opacity"))c.addClass(a.failClass),j()})}else a.mixing=!1},10)}}function v(d,b,
|
||||
h,c){function a(a,b){return 1*a.attr(d).toLowerCase()<1*b.attr(d).toLowerCase()?-1:1*a.attr(d).toLowerCase()>1*b.attr(d).toLowerCase()?1:0}function j(a){"asc"==b?f.prepend(a).prepend(" \
|
||||
"):f.append(a).append(" \
|
||||
")}h.find(c.targetSelector).wrapAll('<div class="mix_sorter"/>');var f=h.find(".mix_sorter");c.origSort.length||f.find(c.targetSelector+":visible").each(function(){e(this).wrap("<s/>");c.origSort.push(e(this).parent().html().replace(/\s+/g,""));e(this).unwrap()});f.empty();if("reset"==d)e.each(c.startOrder,
|
||||
function(){f.append(this).append(" \
|
||||
")});else if("default"==d)e.each(c.origOrder,function(){j(this)});else if("random"==d){if(!c.newOrder.length){for(var g=c.startOrder.slice(),n=g.length,r=n;r--;){var m=parseInt(Math.random()*n),k=g[r];g[r]=g[m];g[m]=k}c.newOrder=g}e.each(c.newOrder,function(){f.append(this).append(" \
|
||||
")})}else"custom"==d?e.each(b,function(){j(this)}):("undefined"===typeof c.origOrder[0].attr(d)&&console.log("No such attribute found. Terminating"),c.newOrder.length||(e.each(c.origOrder,
|
||||
function(){c.newOrder.push(e(this))}),c.newOrder.sort(a)),e.each(c.newOrder,function(){j(this)}));c.checkSort=[];f.find(c.targetSelector+":visible").each(function(a){var b=e(this);0==a&&b.attr("data-checksum","1");b.wrap("<s/>");c.checkSort.push(b.parent().html().replace(/\s+/g,""));b.unwrap()});h.find(c.targetSelector).unwrap()}var w={init:function(d){return this.each(function(){var b={targetSelector:".mix",filterSelector:".filter",sortSelector:".sort",buttonEvent:"click",effects:["fade","scale"],
|
||||
listEffects:null,easing:"smooth",layoutMode:"grid",targetDisplayGrid:"inline-block",targetDisplayList:"block",listClass:"",gridClass:"",transitionSpeed:600,showOnLoad:"all",multiFilter:!1,filterLogic:"or",resizeContainer:!0,minHeight:0,failClass:"fail",perspectiveDistance:"3000",perspectiveOrigin:"50% 50%",animateGridList:!0,onMixLoad:null,onMixStart:null,onMixEnd:null,container:null,origOrder:[],startOrder:[],newOrder:[],origSort:[],checkSort:[],filter:"",mixing:!1,origDisplay:"",origLayout:"",origHeight:0,
|
||||
newHeight:0,isTouch:!1,resetDelay:0,failsafe:null,prefix:"",easingFallback:"ease-in-out",transition:{},perspective:{},clean:{},fade:"1",scale:"",rotateX:"",rotateY:"",rotateZ:"",blur:"",grayscale:""};d&&e.extend(b,d);this.config=b;e.support.touch="ontouchend"in document;e.support.touch&&(b.isTouch=!0,b.resetDelay=350);b.container=e(this);var h=b.container,c;a:{c=h[0];for(var a=["Webkit","Moz","O","ms"],j=0;j<a.length;j++)if(a[j]+"Transition"in c.style){c=a[j];break a}c="transition"in c.style?"":!1}b.prefix=
|
||||
c;b.prefix=b.prefix?"-"+b.prefix.toLowerCase()+"-":"";h.find(b.targetSelector).each(function(){b.origOrder.push(e(this))});for(c=0;2>c;c++)a=0==c?a=b.prefix:"",b.transition[a+"transition"]="all "+b.transitionSpeed+"ms ease-in-out",b.perspective[a+"perspective"]=b.perspectiveDistance+"px",b.perspective[a+"perspective-origin"]=b.perspectiveOrigin;for(c=0;2>c;c++)a=0==c?a=b.prefix:"",b.clean[a+"transition"]="none";"list"==b.layoutMode?(h.addClass(b.listClass),b.origDisplay=b.targetDisplayList):(h.addClass(b.gridClass),
|
||||
b.origDisplay=b.targetDisplayGrid);b.origLayout=b.layoutMode;c=b.showOnLoad.split(" ");e.each(c,function(){e(b.filterSelector+'[data-filter="'+this+'"]').addClass("active")});h.find(b.targetSelector).addClass("mix_all");"all"==c[0]&&(c[0]="mix_all",b.showOnLoad="mix_all");var f=e();e.each(c,function(){f=f.add(e("."+this))});f.each(function(){var a=e(this);"list"==b.layoutMode?a.css("display",b.targetDisplayList):a.css("display",b.targetDisplayGrid);a.css(b.transition)});setTimeout(function(){b.mixing=
|
||||
!0;f.css("opacity","1");setTimeout(function(){"list"==b.layoutMode?f.removeStyle(b.prefix+"transition, transition").css({display:b.targetDisplayList,opacity:1}):f.removeStyle(b.prefix+"transition, transition").css({display:b.targetDisplayGrid,opacity:1});b.mixing=!1;if("function"==typeof b.onMixLoad){var a=b.onMixLoad.call(this,b);b=a?a:b}},b.transitionSpeed)},10);b.filter=b.showOnLoad;e(b.sortSelector).bind(b.buttonEvent,function(){if(!b.mixing){var a=e(this),c=a.attr("data-sort"),d=a.attr("data-order");
|
||||
if(a.hasClass("active")){if("random"!=c)return!1}else e(b.sortSelector).removeClass("active"),a.addClass("active");h.find(b.targetSelector).each(function(){b.startOrder.push(e(this))});m(b.filter,c,d,h,b)}});e(b.filterSelector).bind(b.buttonEvent,function(){if(!b.mixing){var a=e(this);if(!1==b.multiFilter)e(b.filterSelector).removeClass("active"),a.addClass("active"),b.filter=a.attr("data-filter"),e(b.filterSelector+'[data-filter="'+b.filter+'"]').addClass("active"),"all"==b.filter&&(b.filter="mix_all");
|
||||
else{var c=a.attr("data-filter");"all"==c&&(c="mix_all");a.hasClass("active")?(a.removeClass("active"),b.filter=b.filter.replace(RegExp("(\\s|^)"+c),"")):(a.addClass("active"),b.filter=b.filter+" "+c)}m(b.filter,null,null,h,b)}})})},toGrid:function(){return this.each(function(){var d=this.config;"grid"!=d.layoutMode&&(d.layoutMode="grid",m(d.filter,null,null,e(this),d))})},toList:function(){return this.each(function(){var d=this.config;"list"!=d.layoutMode&&(d.layoutMode="list",m(d.filter,null,null,
|
||||
e(this),d))})},filter:function(d){return this.each(function(){var b=this.config;e(b.filterSelector).removeClass("active");e(b.filterSelector+'[data-filter="'+d+'"]').addClass("active");"all"==d&&(d="mix_all");b.mixing||(b.filter=d,m(d,null,null,e(this),b))})},sort:function(d){return this.each(function(){var b=this.config;if(e.isArray(d))var h=d[0],c=d[1];else h=d,c="desc";b.mixing||(e(this).find(b.targetSelector).each(function(){b.startOrder.push(e(this))}),m(b.filter,h,c,e(this),b))})}};e.fn.mixitup=
|
||||
function(d,b){if(w[d])return w[d].apply(this,Array.prototype.slice.call(arguments,1));if("object"===typeof d||!d)return w.init.apply(this,arguments)};e.fn.removeStyle=function(d){return this.each(function(){var b=e(this);d=d.replace(/\s+/g,"");var h=d.split(",");e.each(h,function(){var c=RegExp(this.toString()+"[^;]+;?","g");b.attr("style",function(a,b){if(b)return b.replace(c,"")})})})};Array.prototype.compare=function(d){if(this.length!=d.length)return!1;for(var b=0;b<d.length;b++)if(this[b].compare&&
|
||||
!this[b].compare(d[b])||this[b]!==d[b])return!1;return!0}})(jQuery);
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,30 @@
|
|||
$(function(){
|
||||
var nb = $('#navbtn');
|
||||
var n = $('#topnav nav');
|
||||
|
||||
$(window).on('resize', function(){
|
||||
|
||||
if($(this).width() < 570 && n.hasClass('keep-nav-closed')) {
|
||||
// if the nav menu and nav button are both visible,
|
||||
// then the responsive nav transitioned from open to non-responsive, then back again.
|
||||
// re-hide the nav menu and remove the hidden class
|
||||
$('#topnav nav').hide().removeAttr('class');
|
||||
}
|
||||
if(nb.is(':hidden') && n.is(':hidden') && $(window).width() > 569) {
|
||||
// if the navigation menu and nav button are both hidden,
|
||||
// then the responsive nav is closed and the window resized larger than 560px.
|
||||
// just display the nav menu which will auto-hide at <560px width.
|
||||
$('#topnav nav').show().addClass('keep-nav-closed');
|
||||
}
|
||||
});
|
||||
|
||||
$('#topnav nav a,#topnav h1 a,#btmnav nav a').on('click', function(e){
|
||||
e.preventDefault(); // stop all hash(#) anchor links from loading
|
||||
});
|
||||
|
||||
$('#navbtn').on('click', function(e){
|
||||
e.preventDefault();
|
||||
$("#topnav nav").slideToggle(350);
|
||||
});
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
/* UItoTop jQuery Plugin 1.2 | Matt Varone | http://www.mattvarone.com/web-design/uitotop-jquery-plugin */
|
||||
(function($){$.fn.UItoTop=function(options){var defaults={text:'To Top',min:200,inDelay:600,outDelay:400,containerID:'toTop',containerHoverID:'toTopHover',scrollSpeed:1200,easingType:'linear'},settings=$.extend(defaults,options),containerIDhash='#'+settings.containerID,containerHoverIDHash='#'+settings.containerHoverID;$('body').append('<a href="#" id="'+settings.containerID+'">'+settings.text+'</a>');$(containerIDhash).hide().on('click.UItoTop',function(){$('html, body').animate({scrollTop:0},settings.scrollSpeed,settings.easingType);$('#'+settings.containerHoverID,this).stop().animate({'opacity':0},settings.inDelay,settings.easingType);return false;}).prepend('<span id="'+settings.containerHoverID+'"></span>').hover(function(){$(containerHoverIDHash,this).stop().animate({'opacity':1},600,'linear');},function(){$(containerHoverIDHash,this).stop().animate({'opacity':0},700,'linear');});$(window).scroll(function(){var sd=$(window).scrollTop();if(typeof document.body.style.maxHeight==="undefined"){$(containerIDhash).css({'position':'absolute','top':sd+$(window).height()-50});}
|
||||
if(sd>settings.min)
|
||||
$(containerIDhash).fadeIn(settings.inDelay);else
|
||||
$(containerIDhash).fadeOut(settings.Outdelay);});};})(jQuery);
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
$(document).ready(function(){
|
||||
jQuery.fn.anim_progressbar = function (aOptions) {
|
||||
// def values
|
||||
var iCms = 1000;
|
||||
var iMms = 60 * iCms;
|
||||
var iHms = 3600 * iCms;
|
||||
var iDms = 24 * 3600 * iCms;
|
||||
|
||||
// def options
|
||||
var aDefOpts = {
|
||||
start: new Date(), // now
|
||||
finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec
|
||||
interval: 100
|
||||
}
|
||||
var aOpts = jQuery.extend(aDefOpts, aOptions);
|
||||
var vPb = this;
|
||||
|
||||
// each progress bar
|
||||
return this.each(
|
||||
function() {
|
||||
var iDuration = aOpts.finish - aOpts.start;
|
||||
|
||||
// calling original progressbar
|
||||
$(vPb).children('.pbar').progressbar();
|
||||
|
||||
// looping process
|
||||
var vInterval = setInterval(
|
||||
function(){
|
||||
var iLeftMs = aOpts.finish - new Date(); // left time in MS
|
||||
var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
|
||||
iDays = parseInt(iLeftMs / iDms), // elapsed days
|
||||
iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
|
||||
iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
|
||||
iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
|
||||
iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
|
||||
|
||||
// display current positions and progress
|
||||
$(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
|
||||
$(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
|
||||
$(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
|
||||
|
||||
// in case of Finish
|
||||
if (iPerc >= 100) {
|
||||
clearInterval(vInterval);
|
||||
$(vPb).children('.percent').html('<b>100%</b>');
|
||||
$(vPb).children('.elapsed').html('Finished');
|
||||
}
|
||||
} ,aOpts.interval
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// default mode
|
||||
$('#progress1').anim_progressbar();
|
||||
|
||||
// from second #5 till 15
|
||||
var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
|
||||
var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
|
||||
$('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
|
||||
|
||||
// we will just set interval of updating to 1 sec
|
||||
$('#progress3').anim_progressbar({interval: 1000});
|
||||
});
|
||||
Loading…
Reference in New Issue