mirror of
https://github.com/byReqz/webdriverinstaller.git
synced 2026-10-12 08:13:37 +00:00
uploaded the main project
This commit is contained in:
Nils committed
1 parent
94c81ba8c5
commit
f670411460
47 files changed
+8496
No files matched your search
@@ -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>
|
||||
+930
@@ -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 |
+183
@@ -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>
|
||||
+140
@@ -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;
|
||||
}
|
||||
});
|
||||
Vendored
+90
@@ -0,0 +1,90 @@
|
||||
/*!
|
||||
* flipLightBox - Responsive Lightbox jQuery Plugin
|
||||
* version: 1.0.1
|
||||
* @requires jQuery v1.5 or later
|
||||
*
|
||||
* License at http://flipgallery.net/fliplightbox.html#download
|
||||
*
|
||||
* Example at http://flipgallery.net/fliplightbox.html
|
||||
*
|
||||
* Copyright 2013 flipGallery.net
|
||||
*
|
||||
*/
|
||||
|
||||
(function( $ ){
|
||||
|
||||
$.fn.flipLightBox = function(flb_options) {
|
||||
|
||||
var flb_settings = $.extend({
|
||||
|
||||
// FLIP MODE SETTINGS
|
||||
// ------------------
|
||||
|
||||
flip_mode: 1,
|
||||
|
||||
// 1 = Flip On & 0 = Flip Off (fade).
|
||||
|
||||
// VISUAL SETTINGS
|
||||
// ---------------
|
||||
|
||||
lightbox_background_opacity: 0.8,
|
||||
|
||||
lightbox_border_width: 10, // (pixels)
|
||||
|
||||
lightbox_border_color: '#fff',
|
||||
|
||||
lightbox_z_index: '1000',
|
||||
|
||||
// SPEED SETTINGS
|
||||
// --------------
|
||||
|
||||
lightbox_flip_speed: 800,
|
||||
|
||||
// Speed of complete lightbox flip or fade (milliseconds).
|
||||
|
||||
// TEXT SETTINGS
|
||||
// -------------
|
||||
|
||||
// *Picture/Lightbox Text Settings*
|
||||
|
||||
lightbox_text_status: 1,
|
||||
|
||||
// 1 = On & 0 = Off.
|
||||
|
||||
lightbox_text_style: 'font-size: 14px; line-height: 1.4; color: #000; text-align: center;',
|
||||
|
||||
lightbox_text_background_style: 'background-color: #fff; opacity:0.8;',
|
||||
|
||||
lightbox_text_area_position: 'bottom',
|
||||
|
||||
// bottom or top
|
||||
|
||||
// *Picture/Lightbox Navigation Text Settings*
|
||||
|
||||
lightbox_navigation_status: 1,
|
||||
|
||||
// 1 = On & 0 = Off.
|
||||
|
||||
next_image_text: 'Next ››',
|
||||
|
||||
back_image_text: '‹‹ Back',
|
||||
|
||||
next_and_back_image_text_style: 'font-weight: bold; color: #000;',
|
||||
|
||||
image_number_page: 'Image',
|
||||
|
||||
image_number_of: 'of',
|
||||
|
||||
image_number_text_style: 'color: #000;',
|
||||
|
||||
// *Image Streaming Text Settings*
|
||||
|
||||
loading_text_color: '#fff',
|
||||
|
||||
loading_text_opacity: '0.3'
|
||||
|
||||
}, flb_options );
|
||||
|
||||
var flb_loading_image="data:image/gif;base64,R0lGODlhCgARAIABAP///////yH5BAEAAAEALAAAAAAKABEAAAIWTIBpl80No5y00gdXXBjxD4biSJZGAQA7";var flb_close_image="data:image/gif;base64,R0lGODlhMgAyAIABAP///////yH5BAEAAAEALAAAAAAyADIAAALPjI+py+0Po5y0HoCz3rx7/HziKDbkiWZLyp5Kd7VcvL01ImvJvOu2vPLhVAxgkTgEmVIOIQ0QcjWRT+i0dFUmqUFP1GmAZcE/sndsXfK2N3X6KGa3j5BPOW4JjO54ConfJ/HXMygoJWcXwUR46FZYtffVGIZiOKl3iXaGuDZx+egXyclVIQpJ1iPZSRnIqGrWKveqdTr71gWLOnrLd2erW1X2O4cr7GhqvHUMqszIi2mUDOnc4kudljO3Cp3djdsdfQ3OvDu+nYeerr7Ojl4AADs=";var flb_blank_image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABBJREFUeNpi+P//PwNAgAEACPwC/tuiTRYAAAAASUVORK5CYII=";var flb_image_innit_width;var flb_box_sizing='box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;';var flb_distance_from_top;var flb_new_height;var flb_new_width;var flb_placement;var flb_i;var flb_total_lightbox_width;var flb_loading;var flb_in_img;var flb_image_name;var flb_class;var flb_textcontent;var flb_lightbox_data;var flb_total_images;var fgi_lb_name='flipLightBox';var fgi_lb_ind_name;var flb_classnum=1;var flb_itemnum;var flb_clickclass;var flb_classamount=new Array();function flb_find(){if(flb_classnum==1){fgi_lb_ind_name=fgi_lb_name}else{fgi_lb_ind_name=fgi_lb_name;fgi_lb_ind_name+=flb_classnum}if($('.'+fgi_lb_ind_name)[0]){$('.'+fgi_lb_ind_name+' span').hide();flb_itemnum=0;$('.'+fgi_lb_ind_name).each(function(){flb_itemnum=flb_itemnum+1;$(this).attr('class',fgi_lb_ind_name+'-'+flb_itemnum);if(flb_clickclass==null){flb_clickclass='.'+fgi_lb_ind_name+'-'+flb_itemnum}else{flb_clickclass+=', .'+fgi_lb_ind_name+'-'+flb_itemnum}});flb_classamount[fgi_lb_ind_name]=flb_itemnum;flb_classnum++;flb_find()}}flb_find();$(this).append('<div id="flb-lightbox" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: '+flb_settings.lightbox_z_index+'; '+flb_box_sizing+'"><div id="flb-lightbox-background" style="width: 100%; height: 100%; background-color: #000; opacity:'+flb_settings.lightbox_background_opacity+'; '+flb_box_sizing+'"></div><div id="flb-lightbox-content" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: none; text-align: center; '+flb_box_sizing+'"></div><div id="flb-load" style="position: fixed; top: 40%; left: 0px; width: 100%; text-align: center; font-size: 14px; color: '+flb_settings.loading_text_color+'; opacity: '+flb_settings.loading_text_opacity+'; '+flb_box_sizing+'"></div><div id="flb-lightbox-text" style="position: fixed; '+flb_settings.lightbox_text_area_position+': 0px; width: 90%; padding-left: 5%; padding-right: 6%; margin-right: auto; margin-left: auto;'+flb_settings.lightbox_text_background_style+' '+flb_settings.lightbox_text_style+' '+flb_box_sizing+' padding-top: 15px; padding-bottom: 15px;"></div><div id="flb-load2" style="position: fixed; top: 40%; left: 0px; width: 100%; text-align: center; font-size: 14px; color: '+flb_settings.loading_text_color+'; opacity: '+flb_settings.loading_text_opacity+';"></div>');$("#flb-lightbox, #flb-lightbox-content, #flb-lightbox-text").hide();function flb_get_image_width(a){var b=new Image();b.src=a;return b.width}function flb_get_image_height(a){var b=new Image();b.src=a;return b.height}function flb_iphone_check(){return((navigator.platform.indexOf("iPhone")!=-1)||(navigator.platform.indexOf("iPod")!=-1))}function flb_load_animation(){$("#flb-load").html('<div id="flb-loading-img"></div>').show();setTimeout(function(){$("#flb-loading-img").html('<br />Loading Image')},500);setTimeout(function(){$("#flb-loading-img").prepend('<img width="5" src="'+flb_loading_image+'" /> ')},1000);setTimeout(function(){$("#flb-loading-img").prepend('<img width="5" src="'+flb_loading_image+'" /> ')},1500);setTimeout(function(){$("#flb-loading-img").prepend('<img width="5" src="'+flb_loading_image+'" /> ')},2000);setTimeout(function(){$("#flb-loading-img").fadeOut(500)},2500);flb_loading=setTimeout(function(){flb_load_animation()},3000)}$(flb_clickclass).click(function(e){e.preventDefault();flb_image_name=$(this).attr('href');flb_class=$(this).attr('class');flb_textcontent=$('.'+flb_class+' span').html();flb_lightbox_data=flb_class.split('-');flb_total_images=flb_classamount[flb_lightbox_data[0]];$("#flb-lightbox-text").html('');if(flb_textcontent!=null&&flb_textcontent!=''&&flb_settings.lightbox_text_status==1){if(flb_settings.lightbox_navigation_status==1&&flb_total_images>1){$("#flb-lightbox-text").append('<br /><br />')}$("#flb-lightbox-text").append(flb_textcontent)}$("#flb-lightbox").fadeIn(flb_settings.lightbox_flip_speed/2);flb_load_animation();flb_in_img=document.createElement('img');$("<img />").attr('src',flb_image_name).load(function(){flb_in_img.onload=function(){$("#flb-load").html('');clearTimeout(flb_loading);$("#flb-lightbox-content").html('<img src="'+flb_image_name+'" id="flb-lightbox-image" style="border: solid '+flb_settings.lightbox_border_width+'px '+flb_Line truncated
|
||||
|
||||
})( jQuery );
|
||||
Vendored
+50
@@ -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);
|
||||
;
|
||||
Vendored
+44
@@ -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�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�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�s preloader to calculate it�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�s width that will be showed
|
||||
* @param integer intImageHeight The image�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�s width and the left and right padding value
|
||||
var intHeight = (intImageHeight + (settings.containerBorderSize * 2)); // Plus the image�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�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�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�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
Vendored
+2
@@ -0,0 +1,2 @@
|
||||
/*! jQuery v1.8.3 jquery.com | jquery.org/license */
|
||||
(function(e,t){function _(e){var t=M[e]={};return v.each(e.split(y),function(e,n){t[n]=!0}),t}function H(e,n,r){if(r===t&&e.nodeType===1){var i="data-"+n.replace(P,"-$1").toLowerCase();r=e.getAttribute(i);if(typeof r=="string"){try{r=r==="true"?!0:r==="false"?!1:r==="null"?null:+r+""===r?+r:D.test(r)?v.parseJSON(r):r}catch(s){}v.data(e,n,r)}else r=t}return r}function B(e){var t;for(t in e){if(t==="data"&&v.isEmptyObject(e[t]))continue;if(t!=="toJSON")return!1}return!0}function et(){return!1}function tt(){return!0}function ut(e){return!e||!e.parentNode||e.parentNode.nodeType===11}function at(e,t){do e=e[t];while(e&&e.nodeType!==1);return e}function ft(e,t,n){t=t||0;if(v.isFunction(t))return v.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return v.grep(e,function(e,r){return e===t===n});if(typeof t=="string"){var r=v.grep(e,function(e){return e.nodeType===1});if(it.test(t))return v.filter(t,r,!n);t=v.filter(t,r)}return v.grep(e,function(e,r){return v.inArray(e,t)>=0===n})}function lt(e){var t=ct.split("|"),n=e.createDocumentFragment();if(n.createElement)while(t.length)n.createElement(t.pop());return n}function Lt(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function At(e,t){if(t.nodeType!==1||!v.hasData(e))return;var n,r,i,s=v._data(e),o=v._data(t,s),u=s.events;if(u){delete o.handle,o.events={};for(n in u)for(r=0,i=u[n].length;r<i;r++)v.event.add(t,n,u[n][r])}o.data&&(o.data=v.extend({},o.data))}function Ot(e,t){var n;if(t.nodeType!==1)return;t.clearAttributes&&t.clearAttributes(),t.mergeAttributes&&t.mergeAttributes(e),n=t.nodeName.toLowerCase(),n==="object"?(t.parentNode&&(t.outerHTML=e.outerHTML),v.support.html5Clone&&e.innerHTML&&!v.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):n==="input"&&Et.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):n==="option"?t.selected=e.defaultSelected:n==="input"||n==="textarea"?t.defaultValue=e.defaultValue:n==="script"&&t.text!==e.text&&(t.text=e.text),t.removeAttribute(v.expando)}function Mt(e){return typeof e.getElementsByTagName!="undefined"?e.getElementsByTagName("*"):typeof e.querySelectorAll!="undefined"?e.querySelectorAll("*"):[]}function _t(e){Et.test(e.type)&&(e.defaultChecked=e.checked)}function Qt(e,t){if(t in e)return t;var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Jt.length;while(i--){t=Jt[i]+n;if(t in e)return t}return r}function Gt(e,t){return e=t||e,v.css(e,"display")==="none"||!v.contains(e.ownerDocument,e)}function Yt(e,t){var n,r,i=[],s=0,o=e.length;for(;s<o;s++){n=e[s];if(!n.style)continue;i[s]=v._data(n,"olddisplay"),t?(!i[s]&&n.style.display==="none"&&(n.style.display=""),n.style.display===""&&Gt(n)&&(i[s]=v._data(n,"olddisplay",nn(n.nodeName)))):(r=Dt(n,"display"),!i[s]&&r!=="none"&&v._data(n,"olddisplay",r))}for(s=0;s<o;s++){n=e[s];if(!n.style)continue;if(!t||n.style.display==="none"||n.style.display==="")n.style.display=t?i[s]||"":"none"}return e}function Zt(e,t,n){var r=Rt.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function en(e,t,n,r){var i=n===(r?"border":"content")?4:t==="width"?1:0,s=0;for(;i<4;i+=2)n==="margin"&&(s+=v.css(e,n+$t[i],!0)),r?(n==="content"&&(s-=parseFloat(Dt(e,"padding"+$t[i]))||0),n!=="margin"&&(s-=parseFloat(Dt(e,"border"+$t[i]+"Width"))||0)):(s+=parseFloat(Dt(e,"padding"+$t[i]))||0,n!=="padding"&&(s+=parseFloat(Dt(e,"border"+$t[i]+"Width"))||0));return s}function tn(e,t,n){var r=t==="width"?e.offsetWidth:e.offsetHeight,i=!0,s=v.support.boxSizing&&v.css(e,"boxSizing")==="border-box";if(r<=0||r==null){r=Dt(e,t);if(r<0||r==null)r=e.style[t];if(Ut.test(r))return r;i=s&&(v.support.boxSizingReliable||r===e.style[t]),r=parseFloat(r)||0}return r+en(e,t,n||(s?"border":"content"),i)+"px"}function nn(e){if(Wt[e])return Wt[e];var t=v("<"+e+">").appendTo(i.body),n=t.css("display");t.remove();if(n==="none"||n===""){Pt=i.body.appendChild(Pt||v.extend(i.createElement("iframe"),{frameBorder:0,width:0,height:0}));if(!Ht||!Pt.createElement)Ht=(Pt.contentWindow||Pt.contentDocument).document,Ht.write("<!doctype html><html><body>"),Ht.close();t=Ht.body.appendChild(Ht.createElement(e)),n=Dt(t,"display"),i.body.removeChild(Pt)}return Wt[e]=n,n}function fn(e,t,n,r){var i;if(v.isArray(t))v.each(t,function(t,i){n||sn.test(e)?r(e,i):fn(e+"["+(typeof i=="object"?t:"")+"]",i,n,r)});else if(!n&&v.type(t)==="object")for(i in t)fn(e+"["+i+"]",t[i],n,r);else r(e,t)}function Cn(e){return function(t,n){typeof t!="string"&&(n=t,t="*");var r,i,s,o=t.toLowerCase().split(y),u=0,a=o.length;if(v.isFunction(n))for(;u<a;u++)r=o[u],s=/^\+/.test(r),s&&(r=r.substr(1)||"*"),i=e[r]=e[r]||[],i[s?"unshift":"push"](n)}}function kn(e,n,r,i,s,o){s=s||n.dataTypes[0],o=o||{},o[s]=!0;var u,a=e[s],f=0,l=a?a.length:0,c=e===Sn;for(;f<l&&(c||!u);f++)u=a[f](n,r,i),typeof u=="string"&&(!c||o[u]?u=t:(n.dataTypes.unshift(u),u=kn(e,n,r,i,u,o)));return(c||!u)&&!o["*"]&&(u=kn(e,n,r,i,"*",o)),u}function Ln(e,n){var r,i,s=v.ajaxSettings.flatOptions||{};for(r in n)n[r]Line truncated
|
||||
Vendored
+40
@@ -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);
|
||||
@@ -0,0 +1,400 @@
|
||||
/*
|
||||
jquery.percentageloader.js
|
||||
|
||||
Copyright (c) 2012, Better2Web
|
||||
All rights reserved.
|
||||
|
||||
This jQuery plugin is licensed under the Simplified BSD License. Please
|
||||
see the file license.txt that was included with the plugin bundle.
|
||||
|
||||
*/
|
||||
|
||||
/*global jQuery */
|
||||
|
||||
(function ($) {
|
||||
/* Strict mode for this plugin */
|
||||
"use strict";
|
||||
/*jslint browser: true */
|
||||
|
||||
/* Our spiral gradient data */
|
||||
var imgdata = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAIAAABMXPacAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MDM4RjdFNzQ5MzAyMTFFMUFFQTdENUVDNDUwOEI2RUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MDM4RjdFNzU5MzAyMTFFMUFFQTdENUVDNDUwOEI2RUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowMzhGN0U3MjkzMDIxMUUxQUVBN0Q1RUM0NTA4QjZFRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowMzhGN0U3MzkzMDIxMUUxQUVBN0Q1RUM0NTA4QjZFRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv4BSzoAAA+OSURBVHja1F1bkutKEazSdUAErIAdsVaCTfDNAvhgHXCJe8448ciW3I96drdmYGJiwpYl25NZlfXoVjfjn38lJuGHxafsnRB46rw0+BEonqI4AfY5xNLB/QFLB8W3DZ/QPH6cuXXHlB94RyJv4p4Zf5M1P+y+Au9rwntL6B/xeGmL4vs6gkGUvxrZ8Lfj6HeE6HbeY+if+3y8JWy85wArQIf+HJebu2zgYfN3Rc9GvyZgCQdBoL9DhTD/Kq+Q/vpNtrTWX6E8V4DOrgmz7BMcEnd4HxdBf48BUasfFaIBJ/gqnrLmkVYkD/3DA5ZzMIvaV4ds6OZvx15RfOLoU5UFYR0HA3xgmaPYcZVM/Un5wTz6XhDOcpBVm+/ITWE80M0fsUiTRR9+EMYFyoH/RRWa54/y6FMoCGOFEGWV59oYy0a9aph/LjAE0A8HYVwpRCscAKFGlmm/XkMMMfFJoU+JVkScg2xnCZerEZYqDCbQhxUDFnAwndLgC8IACw7BTt2LDEPNhVqIxkgrAuvaOJg2Zix2CATdgs20h72kqHYUKQuaMnyMoIZLlCeKr2f+VnSJeYaRnm4C4rSIg2/FXZEX1hr90DUkLv1iH8kuDhYG4XBATuCOLCtZ5QOH/q2V6LPWjo5wMNNvGLD3uDdwEveY+ccjsI0+9Jb1lgsAiQwHzje6Lu/kaP0VNH8/I+LY/8ptUoRoJTyYccaECItwjwfYANDi6Hy8gwRTdvKVMK3jII3yelqg/UMsH+wv8ft3XcdCq8XMdjSWcpDT1ClHkb8pq70EmAzBy69gir5di60rxLITBL76h2F/C5bI6KQ/iH6qGYe2gl3egTCE6FJ62IkNsAPDDPpsNSRqCYIkFG4Cmrb9fCaP2TAAQ39M8xcDbwp9xEriZmLWhCvEORhwghR37OtPa/4cigQp9F3DVwoxkYZZ/VmH+JdEEWjJaIc+ugfBTlzpTFozDkv153yMQMk/izhsxTfNP4V+a/hspkMNcvx6Q6MZF3YFlV8zIOegz5cPb6A5GCeg9yF89E0AqJukfXwxdusARG0f8UwfaatfNNW3N/8QMdwKjoG+bfh4GT4/PztWBwDWsHtcggwOhrt1SdANoZePdJdXol/IDsijoYNeGhETXaFXpOEwELR6LIJe0h/1ozLoBw2/kfsG+qYOCPQhBmagWBwgpy3i+ZkeXKXj3LbblqAvG/4h93DqgCgNiivAswStwnKT8MyoQHC8xf9MltPNpmqz9KfQHCOR3EL6MzkZCwYAGIfbdx6WCygpE7UqtfJM1jujxeUR6M3xAPdg7wpZDnzNmYrI0b4qy/k+xJCrGD7qaiAIfeEBQcO3achKkBgMoFBoOoc2LQ7smL+AKSufaRp+J/ch6EmYmKXF3rFpcas4SLoBqEo5qLNiWdk19DvZEd5BMXwbeiUNTdh+zBWIrDLGbnnCqw8iU1LN24DfULJVGIMUDiagf/7cXs9Y+SfYPCg8xetmaxzHy3OeByE9xf4vgOsj9UczdUejuJeIC67goa8XwEyx8SctPbu1r7NyHWdoYLy/fol1CTpRi3X/lzQaJNHn9hBEGjz0/SKATqv32z7kzXm5qVbEnkMYNGiuoJHx/vu4yrwkWYK9oxhXobJHP2j4Z02bmIKof7FDglj35wU0cGXvZKvQwYFBmMcHqOoMUy0+qE+LoD8DPbyVC27tsbgEOSpUZDiiKxgqREcwkEGPusNp7JDCQI++moMemoPwwAcFpiRhRIJy5t8p0vNL2R7QM9Qy6i6IwfKzko/OJzT0NeiDJu/OM/EkKMJEnIYzOBseQJ0Qie+mK0/1t0BcRZ+FLLOPtI75J3GvPcCQoHhYbk4TgdNcQeOA2ILekyJIKtR08PUUyILerTMyHmC8Ph8PLBrYykFLDoRvAv1Oa36jzB0NCvqa5kQm5FJyQnNz/KZb+FA8aOAmSc3fIiNlCe0lEM5hte9Ztn0ahakSUJY7Cu0EFnF0ZQ53KQbII0jsu4V4XAsJkOg5FYml7Igs0dcGA07z722/paTKfxzowSHcU+ZvSxAGyWAzJDSecSrS+V4CB1ATm/bzGbX5ixG4UyEOVF6JmouCM5tYJEAjQ3QOwwMMLWoeu4pUctCUeB1YfSJ0Z5mJ/XzWyi570DE+tAHTblBLkOfvMh/sRGM/IOuZDTceyWpxQK2+3xv0hayUzYo33+fxEBcZuvnOwzYfHRm9W9hOwOLMLbYiM0RRZKot/cWBIEGsJD8jg3ga4sHbBW+JwT2/VkB9Anc6o0iQ9qkocs0HkBuqZk3BxEt8+BP0+35ug/69kHsEZj9EDT+GuPHSTX6R5ygRnQNJJs7KmWoO7nzc1XCEgQPBO70M/0kD+HUEh9zbvYdQmOUpuPtzbrn34DwlvXMgtVYVdiaOacRPDtpu56eqvD2AGw/gRv3Vjlv/D3lwz9/teSPKoWGk4SFKhJs1WAjD5d+nYt93Odp2UM+AfIyBPnH/2H+f6B8csJiAGuNc2cySkjNpEJKgrChFnAZaxQuhc99zwEeeuh0n8jGpY7f9D9oJoBcTj7PvUuJP5v3v8Qp2CRkZDxjmySAGouifj7nj4DlufFz8ecLzGn4g/nOjny8C+F6n/6RPQMdqSclee6O1P3GeYNVbR8etHO/lNw2Pl7b9LR5/b/Sx0W8b/XhwwPzRVF4k34E0szzt2vt0bovfbzhoa60OlF3OU3x4T4f2p7/nX3+hXzf+cSSgxuzBtThiDQGX/uCiy48X/o1//Onif+HiH8bf//KlLjeGe3Nz2TPB/AD9Rh//uv/tz3/8A3AD/XKEaq4GInPJRLz9+v8gQQkKYQlz0+S87/rzk+4/Pl/4zx4hfke47WnR85cP3WomDUX4wAVM8EoJmrlxOru0d9tfxmH+hI9XGPhJ9OPzX+Q78Au//GA7ggUXZPRMwGOCpyEOZEFYbeoDK/bZCx2d0D/Rv3+ij8dfvOqIRxq6ty14Pwsbv3JaLjPYenCTofZqx+waQ9dmJWh66wY3AxdsH1Ve+cD9viN/LyrhT5c4tgDCZ7Fw9i9OGoiqB9XMI6RNngMYRHzi5gCzdpV/ZDSHDujpDf2ned/R3sLMn0Fh2/+++n47BxtRSQMV3tBOROJuausQ9JyUan4Nyl9R4QULHtXwUUv/6xdPibm/H5et0rJo27tueJs8v4fd2J0EnFQWnuhh3haXgEjSgK5pKt4FcaJ/PzLSzlFfbZ+jPntysLeLcK/DwEmDPRFbBI8htBIxGh7YyoImm09p24d1G0pp7xDuzoDCwS4mzIcr9DRAaV9pS3mXrXSW0jr22sGdB6xthYwsNge5TVw8wBGHT/MH0ON1RortfPAMD+3g8puGM4xzQGegk6Hx4VJyGxeWsSSHulvDiGwCKvRh3Zb07r6han/e9w0L+biJsYq3nLQ/hQxqnEPPyVn2gKz+BJVHlR2YyY+AvvN1+KXOp6zjiMxbhZkyEUOhgfUJTVpGxAXx1NUcpM4NnfSDxPquHvTUoX9e19TDuh88naD98JoDQXYO8Dg2isHmDJBKfBTnCBRiWKg8nRmYHADoxKWNHWLkRA0NBPzY3t+kuSzrB6LoVwfZ7gXNK74LvccBUN3xiqYzYX61EmQWb+NGoJI96oaUH7CNuxQGblOi7+Q8CN233T1t0YdOp0lDKUQKfkfBFqCBvXnG7M1JE0EalaAx6APiAziLK8LoA8Q7VXyWVCyqFNfBw6BBa+dF3CIvQb4fwJ/cFEQfHdxImAp3rMDyAxJdwaXBdggKHLkti7cR6ELine truncated
|
||||
gradient = new Image();
|
||||
gradient.src = imgdata;
|
||||
|
||||
/** Percentage loader
|
||||
* @param params Specify options in {}. May be on of width, height, progress or value.
|
||||
*
|
||||
* @example $("#myloader-container).percentageLoader({
|
||||
width : 256, // width in pixels
|
||||
height : 256, // height in pixels
|
||||
progress: 0, // initialise progress bar position, within the range [0..1]
|
||||
value: '0kb' // initialise text label to this value
|
||||
});
|
||||
*/
|
||||
$.fn.percentageLoader = function (params) {
|
||||
var settings, canvas, percentageText, valueText, items, i, item, selectors, s, ctx, progress,
|
||||
value, cX, cY, lingrad, innerGrad, tubeGrad, innerRadius, innerBarRadius, outerBarRadius,
|
||||
radius, startAngle, endAngle, counterClockwise, completeAngle, setProgress, setValue,
|
||||
applyAngle, drawLoader, clipValue, outerDiv;
|
||||
|
||||
/* Specify default settings */
|
||||
settings = {
|
||||
width: 256,
|
||||
height: 256,
|
||||
progress: 0,
|
||||
value: '0kb',
|
||||
controllable: false
|
||||
};
|
||||
|
||||
/* Override default settings with provided params, if any */
|
||||
if (params !== undefined) {
|
||||
$.extend(settings, params);
|
||||
} else {
|
||||
params = settings;
|
||||
}
|
||||
|
||||
outerDiv = document.createElement('div');
|
||||
outerDiv.style.width = settings.width + 'px';
|
||||
outerDiv.style.height = settings.height + 'px';
|
||||
outerDiv.style.position = 'relative';
|
||||
|
||||
$(this).append(outerDiv);
|
||||
|
||||
/* Create our canvas object */
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.setAttribute('width', settings.width);
|
||||
canvas.setAttribute('height', settings.height);
|
||||
outerDiv.appendChild(canvas);
|
||||
|
||||
/* Create div elements we'll use for text. Drawing text is
|
||||
* possible with canvas but it is tricky working with custom
|
||||
* fonts as it is hard to guarantee when they become available
|
||||
* with differences between browsers. DOM is a safer bet here */
|
||||
percentageText = document.createElement('div');
|
||||
percentageText.style.width = (settings.width.toString() - 2) + 'px';
|
||||
percentageText.style.textAlign = 'center';
|
||||
percentageText.style.height = '50px';
|
||||
percentageText.style.left = 0;
|
||||
percentageText.style.position = 'absolute';
|
||||
|
||||
valueText = document.createElement('div');
|
||||
valueText.style.width = (settings.width - 2).toString() + 'px';
|
||||
valueText.style.textAlign = 'center';
|
||||
valueText.style.height = '0px';
|
||||
valueText.style.overflow = 'hidden';
|
||||
valueText.style.left = 0;
|
||||
valueText.style.position = 'absolute';
|
||||
|
||||
/* Force text items to not allow selection */
|
||||
items = [valueText, percentageText];
|
||||
for (i = 0; i < items.length; i += 1) {
|
||||
item = items[i];
|
||||
selectors = [
|
||||
'-webkit-user-select',
|
||||
'-khtml-user-select',
|
||||
'-moz-user-select',
|
||||
'-o-user-select',
|
||||
'user-select'];
|
||||
|
||||
for (s = 0; s < selectors.length; s += 1) {
|
||||
$(item).css(selectors[s], 'none');
|
||||
}
|
||||
}
|
||||
|
||||
/* Add the new dom elements to the containing div */
|
||||
outerDiv.appendChild(percentageText);
|
||||
outerDiv.appendChild(valueText);
|
||||
|
||||
/* Get a reference to the context of our canvas object */
|
||||
ctx = canvas.getContext("2d");
|
||||
|
||||
|
||||
/* Set various initial values */
|
||||
|
||||
/* Centre point */
|
||||
cX = (canvas.width / 2) - 1;
|
||||
cY = (canvas.height / 2) - 1;
|
||||
|
||||
/* Create our linear gradient for the outer ring */
|
||||
lingrad = ctx.createLinearGradient(cX, 0, cX, canvas.height);
|
||||
lingrad.addColorStop(0, '#d6eeff');
|
||||
lingrad.addColorStop(1, '#b6d8f0');
|
||||
|
||||
/* Create inner gradient for the outer ring */
|
||||
innerGrad = ctx.createLinearGradient(cX, cX * 0.133333, cX, canvas.height - cX * 0.133333);
|
||||
innerGrad.addColorStop(0, '#f9fcfe');
|
||||
innerGrad.addColorStop(1, '#d9ebf7');
|
||||
|
||||
/* Tube gradient (background, not the spiral gradient) */
|
||||
tubeGrad = ctx.createLinearGradient(cX, 0, cX, canvas.height);
|
||||
tubeGrad.addColorStop(0, '#c1dff4');
|
||||
tubeGrad.addColorStop(1, '#aacee6');
|
||||
|
||||
/* The inner circle is 2/3rds the size of the outer one */
|
||||
innerRadius = cX * 0.6666;
|
||||
/* Outer radius is the same as the width / 2, same as the centre x
|
||||
* (but we leave a little room so the borders aren't truncated) */
|
||||
radius = cX - 2;
|
||||
|
||||
/* Calculate the radii of the inner tube */
|
||||
innerBarRadius = innerRadius + (cX * 0.06);
|
||||
outerBarRadius = radius - (cX * 0.06);
|
||||
|
||||
/* Bottom left angle */
|
||||
startAngle = 2.1707963267949;
|
||||
/* Bottom right angle */
|
||||
endAngle = 0.9707963267949 + (Math.PI * 2.0);
|
||||
|
||||
/* Nicer to pass counterClockwise / clockwise into canvas functions
|
||||
* than true / false */
|
||||
counterClockwise = false;
|
||||
|
||||
/* Borders should be 1px */
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
/**
|
||||
* Little helper method for transforming points on a given
|
||||
* angle and distance for code clarity
|
||||
*/
|
||||
applyAngle = function (point, angle, distance) {
|
||||
return {
|
||||
x : point.x + (Math.cos(angle) * distance),
|
||||
y : point.y + (Math.sin(angle) * distance)
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* render the widget in its entirety.
|
||||
*/
|
||||
drawLoader = function () {
|
||||
/* Clear canvas entirely */
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
/*** IMAGERY ***/
|
||||
|
||||
/* draw outer circle */
|
||||
ctx.fillStyle = lingrad;
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = '#b2d5ed';
|
||||
ctx.arc(cX, cY, radius, 0, Math.PI * 2, counterClockwise);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
/* draw inner circle */
|
||||
ctx.fillStyle = innerGrad;
|
||||
ctx.beginPath();
|
||||
ctx.arc(cX, cY, innerRadius, 0, Math.PI * 2, counterClockwise);
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#b2d5edaa';
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
/**
|
||||
* Helper function - adds a path (without calls to beginPath or closePath)
|
||||
* to the context which describes the inner tube. We use this for drawing
|
||||
* the background of the inner tube (which is always at 100%) and the
|
||||
* progress meter itself, which may vary from 0-100% */
|
||||
function makeInnerTubePath(startAngle, endAngle) {
|
||||
var centrePoint, startPoint, controlAngle, capLength, c1, c2, point1, point2;
|
||||
centrePoint = {
|
||||
x : cX,
|
||||
y : cY
|
||||
};
|
||||
|
||||
startPoint = applyAngle(centrePoint, startAngle, innerBarRadius);
|
||||
|
||||
ctx.moveTo(startPoint.x, startPoint.y);
|
||||
|
||||
point1 = applyAngle(centrePoint, endAngle, innerBarRadius);
|
||||
point2 = applyAngle(centrePoint, endAngle, outerBarRadius);
|
||||
|
||||
controlAngle = endAngle + (3.142 / 2.0);
|
||||
/* Cap length - a fifth of the canvas size minus 4 pixels */
|
||||
capLength = (cX * 0.20) - 4;
|
||||
|
||||
c1 = applyAngle(point1, controlAngle, capLength);
|
||||
c2 = applyAngle(point2, controlAngle, capLength);
|
||||
|
||||
ctx.arc(cX, cY, innerBarRadius, startAngle, endAngle, false);
|
||||
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, point2.x, point2.y);
|
||||
ctx.arc(cX, cY, outerBarRadius, endAngle, startAngle, true);
|
||||
|
||||
point1 = applyAngle(centrePoint, startAngle, innerBarRadius);
|
||||
point2 = applyAngle(centrePoint, startAngle, outerBarRadius);
|
||||
|
||||
controlAngle = startAngle - (3.142 / 2.0);
|
||||
|
||||
c1 = applyAngle(point2, controlAngle, capLength);
|
||||
c2 = applyAngle(point1, controlAngle, capLength);
|
||||
|
||||
ctx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, point1.x, point1.y);
|
||||
}
|
||||
|
||||
/* Background tube */
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = '#bcd4e5';
|
||||
makeInnerTubePath(startAngle, endAngle);
|
||||
|
||||
ctx.fillStyle = tubeGrad;
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
/* Calculate angles for the the progress metre */
|
||||
completeAngle = startAngle + (progress * (endAngle - startAngle));
|
||||
|
||||
ctx.beginPath();
|
||||
makeInnerTubePath(startAngle, completeAngle);
|
||||
|
||||
/* We're going to apply a clip so save the current state */
|
||||
ctx.save();
|
||||
/* Clip so we can apply the image gradient */
|
||||
ctx.clip();
|
||||
|
||||
/* Draw the spiral gradient over the clipped area */
|
||||
ctx.drawImage(gradient, 0, 0, canvas.width, canvas.height);
|
||||
|
||||
/* Undo the clip */
|
||||
ctx.restore();
|
||||
|
||||
/* Draw the outline of the path */
|
||||
ctx.beginPath();
|
||||
makeInnerTubePath(startAngle, completeAngle);
|
||||
ctx.stroke();
|
||||
|
||||
/*** TEXT ***/
|
||||
(function () {
|
||||
var fontSize, string, smallSize, heightRemaining;
|
||||
/* Calculate the size of the font based on the canvas size */
|
||||
fontSize = cX / 2;
|
||||
|
||||
percentageText.style.top = ((settings.height / 2) - (fontSize / 2)).toString() + 'px';
|
||||
percentageText.style.color = '#000';
|
||||
percentageText.style.font = fontSize.toString() + 'px BebasNeueRegular';
|
||||
percentageText.style.textShadow = '0 1px 1px #FFFFFF';
|
||||
|
||||
/* Calculate the text for the given percentage */
|
||||
string = (progress * 100.0).toFixed(0) + '%';
|
||||
|
||||
percentageText.innerHTML = string;
|
||||
|
||||
/* Calculate font and placement of small 'value' text */
|
||||
smallSize = cX / 5.5;
|
||||
valueText.style.color = '#FFF';
|
||||
valueText.style.font = smallSize.toString() + 'px BebasNeueRegular';
|
||||
valueText.style.height = smallSize.toString() + 'px';
|
||||
valueText.style.textShadow = 'None';
|
||||
|
||||
/* Ugly vertical align calculations - fit into bottom ring.
|
||||
* The bottom ring occupes 1/6 of the diameter of the circle */
|
||||
heightRemaining = (settings.height * 0.16666666) - smallSize;
|
||||
valueText.style.top = ((settings.height * 0.8333333) + (heightRemaining / 4)).toString() + 'px';
|
||||
}());
|
||||
};
|
||||
|
||||
/**
|
||||
* Check the progress value and ensure it is within the correct bounds [0..1]
|
||||
*/
|
||||
clipValue = function () {
|
||||
if (progress < 0) {
|
||||
progress = 0;
|
||||
}
|
||||
|
||||
if (progress > 1.0) {
|
||||
progress = 1.0;
|
||||
}
|
||||
};
|
||||
|
||||
/* Sets the current progress level of the loader
|
||||
*
|
||||
* @param value the progress value, from 0 to 1. Values outside this range
|
||||
* will be clipped
|
||||
*/
|
||||
setProgress = function (value) {
|
||||
/* Clip values to the range [0..1] */
|
||||
progress = value;
|
||||
clipValue();
|
||||
drawLoader();
|
||||
};
|
||||
|
||||
this.setProgress = setProgress;
|
||||
|
||||
setValue = function (val) {
|
||||
value = val;
|
||||
valueText.innerHTML = value;
|
||||
};
|
||||
|
||||
this.setValue = setValue;
|
||||
this.setValue(settings.value);
|
||||
|
||||
progress = settings.progress;
|
||||
clipValue();
|
||||
|
||||
/* Do an initial draw */
|
||||
drawLoader();
|
||||
|
||||
/* In controllable mode, add event handlers */
|
||||
if (params.controllable === true) {
|
||||
(function () {
|
||||
var mouseDown, getDistance, adjustProgressWithXY;
|
||||
getDistance = function (x, y) {
|
||||
return Math.sqrt(Math.pow(x - cX, 2) + Math.pow(y - cY, 2));
|
||||
};
|
||||
|
||||
mouseDown = false;
|
||||
|
||||
adjustProgressWithXY = function (x, y) {
|
||||
/* within the bar, calculate angle of touch point */
|
||||
var pX, pY, angle, startTouchAngle, range, posValue;
|
||||
pX = x - cX;
|
||||
pY = y - cY;
|
||||
|
||||
angle = Math.atan2(pY, pX);
|
||||
if (angle > Math.PI / 2.0) {
|
||||
angle -= (Math.PI * 2.0);
|
||||
}
|
||||
|
||||
startTouchAngle = startAngle - (Math.PI * 2.0);
|
||||
range = endAngle - startAngle;
|
||||
posValue = (angle - startTouchAngle) / range;
|
||||
setProgress(posValue);
|
||||
|
||||
if (params.onProgressUpdate) {
|
||||
/* use the progress value as this will have been clipped
|
||||
* to the correct range [0..1] after the call to setProgress
|
||||
*/
|
||||
params.onProgressUpdate(progress);
|
||||
}
|
||||
};
|
||||
|
||||
$(outerDiv).mousedown(function (e) {
|
||||
var offset, x, y, distance;
|
||||
offset = $(this).offset();
|
||||
x = e.pageX - offset.left;
|
||||
y = e.pageY - offset.top;
|
||||
|
||||
distance = getDistance(x, y);
|
||||
|
||||
if (distance > innerRadius && distance < radius) {
|
||||
mouseDown = true;
|
||||
adjustProgressWithXY(x, y);
|
||||
}
|
||||
}).mouseup(function () {
|
||||
mouseDown = false;
|
||||
}).mousemove(function (e) {
|
||||
var offset, x, y;
|
||||
if (mouseDown) {
|
||||
offset = $(outerDiv).offset();
|
||||
x = e.pageX - offset.left;
|
||||
y = e.pageY - offset.top;
|
||||
adjustProgressWithXY(x, y);
|
||||
}
|
||||
}).mouseleave(function () {
|
||||
mouseDown = false;
|
||||
});
|
||||
}());
|
||||
}
|
||||
return this;
|
||||
};
|
||||
}(jQuery));
|
||||
+30
@@ -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});
|
||||
});
|
||||
Reference in new issue
Block a user