Skip to content

Instantly share code, notes, and snippets.

@cormacrelf

cormacrelf/untitled.html

Created February 2, 2012 06:42
Show Gist options
  • Save cormacrelf/1722043 to your computer and use it in GitHub Desktop.
Save cormacrelf/1722043 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
untitled.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
// switch the protocol to "https:// to enforce a SSL connection
var protocol = "http://";
//var protocol = "https://";
// Switch to secure SSL connection, if configured above
if (protocol == "https://" & window.location.protocol == "http:") {
var host = window.location.hostname;
var pathname = window.location.pathname;
var search = window.location.search;
var url = protocol + host + pathname + search;
location.replace(url);
}
function setFormFocus() {
document.forms[0].Username.focus();
document.forms[0].Username.select();
}
function convertTargetAddress() {
//alert("Converting from: " + document.forms[0].RedirectTo.value);
//if (window.location.href.indexOf('/names.nsf?Login')==-1) {
//document.forms[0].RedirectTo.value = window.location.href.replace(/https:/,"http:");
}
//alert("Converted to: " + document.forms[0].RedirectTo.value);
//}
function checkReason() {
f = document.forms[0];
//alert( document.cookie );
if ( f.reasonType.value == "2" ) {
if ( getCookie("ulg") == "" ) {
setCookie("ulg",0,null,"/");
} else {
thisCookie=getCookie("ulg");
ctr = eval(thisCookie) + 1;
if (ctr >= 3 ) {
alert("You have tried to login 3 times unsuccessfully.\n Please close your browser and try again.\n If still unsuccessful see your intranet administrator.");
return false;
}
setCookie("ulg",ctr,null,"/");
}
// if ( document.cookie == ""){
// document.cookie = "ulg=1; path= /";
// }else{
//thisCookie = document.cookie.split("ulg=")[1]; DFS Apr 2011
// thisCookie=getCookie("ulg");
// if( thisCookie.indexOf(";") >=0 ) {
// thisCookie = document.cookie.split(";")[0];
// }
//alert("thisCookie: " + thisCookie );
// if ( thisCookie == "" ) thisCookie = document.cookie;
// ctr = eval(thisCookie.split("=")[1]) + 1;
// if (ctr >= 3 ) {alert("You have tried to login 3 times unsuccessfully.\n Please close your browser and try again.\n If still unsuccessful see your intranet administrator."); return false;}
// document.cookie = "ulg=" + ctr + "; path= /";
//alert(document.cookie);
// }
}
return true;
}
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString() : "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
function deleteCookie(name, path, domain) {
if (getCookie(name)) {
document.cookie = name + "=" +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
"; expires=Thu, 01-Jan-70 00:00:01 GMT";
}
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" marginwidth=0 marginheight=0 leftmargin=0 topmargin=0 onload="// Position cursor in field 'Username'
setFormFocus();
// Change target address to not use SSL
//convertTargetAddress();
// Use this code to populate RedirectTo if the login.nsf database resides in the root of the data directory
//var x = document.forms[0].RedirectTo.value
//if( x.indexOf(&quot;redir&quot;) &lt;= 0 ){
//document.forms[0].RedirectTo.value = &quot;/login.nsf/TestForm?Open&amp;redir=&quot; + document.forms[0].RedirectTo.value;
//}
if ( document.forms[0].reasonType.value != &quot;2&quot; ) {
document.cookie = &quot;ulg=0; path= /&quot;;
}
//use this code if the login.nsf database resides in the school directory
var pathname = window.location.pathname
var array = pathname.split(&quot;/&quot;)
var dir = array[1]
var x = document.forms[0].RedirectTo.value
if( x.indexOf(&quot;redir&quot;) &lt;= 0 ){
if(window.location.href.indexOf(&quot;melexch&quot;) &gt; 0){
document.forms[0].RedirectTo.value = &quot;/login.nsf/TestForm?Open&amp;redir=&quot; + document.forms[0].RedirectTo.value;
}else{
document.forms[0].RedirectTo.value = &quot;/&quot;+ dir +&quot;/login.nsf/TestForm?Open&amp;redir=&quot; + document.forms[0].RedirectTo.value;
}
}">
<form onsubmit="if ( ! checkReason() ) { return false };" method="post" action="/names.nsf?Login" name="_LoginWhiteKeyStatic">
<input type="hidden" name="%%ModDate" value="0000000000000000"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" background="/ScotchLP/login.nsf/bg.gif" height="48" width="1275">
<div align="left"><img src="/ScotchLP/login.nsf/secure_login.gif" width="147" height="48"></div>
</td>
</tr>
<tr>
<td valign="top" height="20" bgcolor="#003366"><IMG SCR="/icons/ecblank.gif" border="0" height="1" width="1" alt=""></td>
</tr>
<tr>
<td height="270" valign="top">
<p>&nbsp;</p>
<table border="0" cellspacing="0" cellpadding="0" width="747" height="98" align="center">
<tr>
<td height="245" align="center" width="401" valign="top">
<table cellspacing=0 cellpadding=3 border=0 width="400">
<tbody>
<tr>
<td width="99">&nbsp; </td>
<td width="286"><b><font face="Arial, Helvetica, sans-serif" color="#003366" size="4">Scotch College Intranet Login</font></b></td>
</tr>
<tr>
<td width="99">&nbsp; </td>
<td align=left width="286"><IMG SRC="/ScotchLP/ImageStore.nsf/SchoolCrestsView/LoginCrest/$FILE/login.GIF"></td>
</tr>
<tr>
<td width="99">&nbsp; </td>
<td width="286"><font face="Arial, Helvetica, sans-serif" color="#003366" size="2"><br>
Please enter your Username and Password:</font></td>
</tr>
<tr>
<td align=right width="99"><b><font face="Arial, Helvetica, sans-serif" color="#003366" size="2">Username:</font></b></td>
<td align=left width="286">
<input name="Username" value="" style="width:140px">
<tr>
<td align=right width="99"><b><font face="Arial, Helvetica, sans-serif" color="#003366" size="2">Password:</font></b></td>
<td align=left width="286">
<input name="Password" value="" type="password" style="width:140px">
<tr>
<td width="99">&nbsp; </td>
<td align=left width="286">
<p>
<input type=submit value=Login name="submit">
</p>
</tbody>
</table>
</td>
<td height="245" width="355" valign="center" align="center">
<table width="40%" border="0" cellspacing="0" cellpadding="0" height="174">
</table>
</td>
</tr>
</table>
<p>&nbsp;</p>
</td>
</tr>
<tr>
<td>
<div align="center">
<font face="Arial, Helvetica, sans-serif" color="#003366" size="2">Please call Scotch Support on 9810 4411 if you need assistance. </font>
</div>
</td>
</tr>
<tr>
<td height="38">
<div align="center">
<font face="Arial, Helvetica, sans-serif" color="#003366" size="2"> <font size="2" face="Arial"><style type="text/css">
body {
background-color:#1c4170;
color: #fff;
font-family: Arial;
}
a {
text-decoration: none;
color: #aaa;
}
/* -- body -- */
.skin {
background-color: #a7a5aa;
border: 5px solid #000000;
}
@-moz-keyframes toastBody {
0% { top: 0; }
89.99% { top: 0; }
90% { top: -5px; }
99.99% { top: -5px; }
100% { top: 0; }
}
@-webkit-keyframes toastBody {
0% { top: 0; }
89.99% { top: 0; }
90% { top: -5px; }
99.99% { top: -5px; }
100% { top: 0; }
}
#toastBody {
background-color:#fad695;
width:100px;
height: 70px;
border: solid #000 5px;
border-radius: 15px;
padding: 2px;
position:absolute;
z-index:19;
-moz-animation: toastBody 0.8s linear 0s infinite;
-webkit-animation: toastBody 0.8s linear 0s infinite;
}
#toastBody > div {
width:100px;
height:70px;
border-radius: 30px;
background-color: #fc9dff;
display:block;
color: #da3eb9;
font-size: 40px;
line-height: 10px;
}
/* -- head -- */
@-moz-keyframes wholeHead {
0% { top: -15px; left: 0;}
24.99% { top: -15px; left: 0;}
25% { top: -10px; left: 5px; }
49.99% { top: -10px; left:5px; }
50% { top: -5px; left: 0; }
74.99% { top: -5px; left: 0; }
75% { top: -10px; left: -5px; }
99.99% { top: -10px; left: -5px;}
100% { top: -15px; left: 0;}
}
@-webkit-keyframes wholeHead {
0% { top: -15px; left: 0;}
24.99% { top: -15px; left: 0;}
25% { top: -10px; left: 5px; }
49.99% { top: -10px; left:5px; }
50% { top: -5px; left: 0; }
74.99% { top: -5px; left: 0; }
75% { top: -10px; left: -5px; }
99.99% { top: -10px; left: -5px;}
100% { top: -15px; left: 0;}
}
#wholeHead{
position:absolute;
top: -15px;
-moz-animation: wholeHead 0.4s linear 0s infinite;
-webkit-animation: wholeHead 0.4s linear 0s infinite;
}
#mainHead {
width: 80px;
height: 35px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
position:absolute;
z-index: 20;
top: 48px;
left: 60px;
}
.ear {
width: 30px;
height: 20px;
position: absolute;
z-index: 21;
left: 65px;
top: 28px;
border-bottom: none;
border-top-right-radius: 25px;
}
.rightEar {
border-top-right-radius: 0;
border-top-left-radius: 25px;
left: 106px;
}
.eye {
width: 5px;
height:5px;
background-color: #fff;
position: absolute;
top:4px;
left: 17px;
z-index: 22;
border-right: 5px solid #000;
border-bottom: 5px solid #000;
}
.rightEye {
left: 56px;
}
.nose {
width:5px;
height: 5px;
background-color:#000;
position:absolute;
top:9px;
left: 45px;
}
.chick {
width: 10px;
height: 10px;
background-color: #f7a4a3;
position: absolute;
top: 15px;
left: 5px;
}
.rightChick {
left: 70px;
}
.mouth {
position: absolute;
-moz-transform: scale(2, 0.7) rotate(-90deg);
-webkit-transform: scale(2, 0.7) rotate(-90deg);
font-family: Arial;
font-size: 25px;
font-weight: bold;
top:9px;
left:37px;
color: #000;
}
/* -- tail -- */
@-moz-keyframes midTail {
0% { top: 52px;}
24.99% { top: 52px; }
25% { top: 56px;}
49.99% { top: 56px;}
50% { top: 60px;}
74.99% { top: 60px;}
75% { top: 56px;}
99.99% { top: 56px;}
100% { top: 52px;}
}
@-webkit-keyframes midTail {
0% { top: 52px;}
24.99% { top: 52px; }
25% { top: 56px;}
49.99% { top: 56px;}
50% { top: 60px;}
74.99% { top: 60px;}
75% { top: 56px;}
99.99% { top: 56px;}
100% { top: 52px;}
}
@-moz-keyframes backTail {
0% { top: 48px;}
12.49% { top: 48px; }
12.50% { top: 52px;}
24.99% { top: 52px;}
25% { top: 56px;}
37.49% { top: 56px;}
37.5% { top: 60px; }
49.99% { top: 60px; }
50% { top: 64px; }
62.49% { top: 64px; }
62.5% { top: 60px; }
74.99% { top: 60px; }
75% { top: 56px;}
87.49% { top: 56px;}
87.5% { top: 52px;}
99.99% { top: 52px;}
100% { top: 48px;}
}
@-webkit-keyframes backTail {
0% { top: 48px;}
12.49% { top: 48px; }
12.50% { top: 52px;}
24.99% { top: 52px;}
25% { top: 56px;}
37.49% { top: 56px;}
37.5% { top: 60px; }
49.99% { top: 60px; }
50% { top: 64px; }
62.49% { top: 64px; }
62.5% { top: 60px; }
74.99% { top: 60px; }
75% { top: 56px;}
87.49% { top: 56px;}
87.5% { top: 52px;}
99.99% { top: 52px;}
100% { top: 48px;}
}
#wholeTail {
top: -15px;
position:absolute;
}
.tail {
width: 10px;
height: 10px;
position: absolute;
left: -15px;
top: 56px;
z-index: 18;
}
.middleTail {
left: -25px;
z-index:19;
border-right: none;
top: 52px;
-moz-animation: midTail 0.4s linear 0s infinite;
-webkit-animation: midTail 0.4s linear 0s infinite;
}
.backTail {
left: -35px;
z-index:19;
border-right: none;
top: 48px;
-moz-animation: backTail 0.4s linear 0s infinite;
-webkit-animation: backTail 0.4s linear 0s infinite;
}
/* -- legs -- */
@-moz-keyframes letsDanceBeeAch {
0% { top: 0px; left: 0;}
24.99% { top: 0px; left: 0;}
25% { top: 5px; left: 5px; }
49.99% { top: 5px; left:5px; }
50% { top: 10px; left: 0; }
74.99% { top: 10px; left: 0; }
75% { top: 5px; left: -5px; }
99.99% { top: 5px; left: -5px;}
100% { top: 0px; left: 0;}
}
@-webkit-keyframes letsDanceBeeAch {
0% { top: 0px; left: 0;}
24.99% { top: 0px; left: 0;}
25% { top: 5px; left: 5px; }
49.99% { top: 5px; left:5px; }
50% { top: 10px; left: 0; }
74.99% { top: 10px; left: 0; }
75% { top: 5px; left: -5px; }
99.99% { top: 5px; left: -5px;}
100% { top: 0px; left: 0;}
}
#allYourLegAreBelongToUs {
position: absolute;
top: 10px;
-moz-animation: letsDanceBeeAch 0.2s linear 0s infinite;
-webkit-animation: letsDanceBeeAch 0.2s linear 0s infinite;
}
.leg {
width:10px;
height:20px;
position:absolute;
z-index: 18;
top: 64px;
left:5px;
}
.back {
-moz-transform: rotate(40deg);
-webkit-transform: rotate(40deg);
}
.leftBack {
left: 35px;
}
.front {
-moz-transform: rotate(-40deg);
-webkit-transform: rotate(-40deg);
left:100px;
}
.leftFront {
left: 70px;
}
/* -- RAINBOW -- */
@-moz-keyframes rainbow1 {
0% { top: 0; }
49.99% { top: 0; }
50% { top: 5px; }
99.99% { top: 5px; }
100% { top: 0; }
}
@-webkit-keyframes rainbow1 {
0% { top: 0; }
49.99% { top: 0; }
50% { top: 5px; }
99.99% { top: 5px; }
100% { top: 0; }
}
@-moz-keyframes rainbow2 {
0% { top: 5px; }
49.99% { top: 5px; }
50% { top: 0; }
99.99% { top: 0; }
100% { top: 5px; }
}
@-webkit-keyframes rainbow2 {
0% { top: 5px; }
49.99% { top: 5px; }
50% { top: 0; }
99.99% { top: 0; }
100% { top: 5px; }
}
.rainbow {
position:absolute;
width:45px;
height:90px;
background: -moz-linear-gradient(top, #d91a12 15%, #e13300 15%, #ff7f14 16%, #f2ab03 32%, #ebc000 32%, #fade00 33%, #efff03 48%, #56fc02 49%, #52ff01 66%, #4ade7e 67%, #3baaf2 67%, #3baaf2 84%, #7337f7 84%, #6b40f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(15%,#d91a12), color-stop(15%,#e13300), color-stop(16%,#ff7f14), color-stop(32%,#f2ab03), color-stop(32%,#ebc000), color-stop(33%,#fade00), color-stop(48%,#efff03), color-stop(49%,#56fc02), color-stop(66%,#52ff01), color-stop(67%,#4ade7e), color-stop(67%,#3baaf2), color-stop(84%,#3baaf2), color-stop(84%,#7337f7), color-stop(100%,#6b40f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d91a12 15%,#e13300 15%,#ff7f14 16%,#f2ab03 32%,#ebc000 32%,#fade00 33%,#efff03 48%,#56fc02 49%,#52ff01 66%,#4ade7e 67%,#3baaf2 67%,#3baaf2 84%,#7337f7 84%,#6b40f2 100%); /* Chrome10+,Safari5.1+ */
left: -40px;
-moz-animation: rainbow1 0.3s linear 0s infinite;
-webkit-animation: rainbow1 0.3s linear 0s infinite;
z-index: 15;
}
.r2 {
left: -85px;
top: 5px;
-moz-animation-name: rainbow2;
-webkit-animation-name: rainbow2;
}
.r3 {
left: -130px;
}
.r4 {
left: -175px;
top: 5px;
-moz-animation-name: rainbow2;
-webkit-animation-name: rainbow2;
}
/* -- stars -- */
@-moz-keyframes star1 {
0% { top: 0; height: 5px;}
33.19% { top: 0; height: 5px; }
33.2% { height:10px; top:0; }
49.79% { height:10px; top:0; }
49.8% { height:10px; top:5px; }
66.39% {height:10px; top:5px; }
66.4% { height:5px; top:10px;}
82.99% { height:5px; top:10px;}
83% { height: 5px; top: 15px; }
99.99% { height: 5px; top: 15px; }
100% { top: 0; height: 5px; }
}
@-webkit-keyframes star1{
0% { top: 0; height: 5px;}
33.19% { top: 0; height: 5px; }
33.2% { height:10px; top:0; }
49.79% { height:10px; top:0; }
49.8% { height:10px; top:5px; }
66.39% {height:10px; top:5px; }
66.4% { height:5px; top:10px;}
82.99% { height:5px; top:10px;}
83% { height: 5px; top: 15px; }
99.99% { height: 5px; top: 15px; }
100% { top: 0; height: 5px; }
}
@-moz-keyframes star2-3-6-7 {
0% { visibility: hidden; }
16.59% { visibility: hidden; }
16.6% { visibility: visible; }
33.19% { visibility: visible; }
33.2% { visibility: hidden; }
100% { visibility: hidden; }
}
@-webkit-keyframes star2-3-6-7{
0% { visibility: hidden; }
16.59% { visibility: hidden; }
16.6% { visibility: visible; }
33.19% { visibility: visible; }
33.2% { visibility: hidden; }
100% { visibility: hidden; }
}
@-moz-keyframes star4 {
0% { left: 0; width: 5px; visibility: visible;}
33.19% { left: 0; width: 5px; }
33.2% { width:10px; left:0; }
49.79% { width:10px; left:0; }
49.8% { width:10px; left:5px; }
66.39% {width:10px; left:5px; }
66.4% { width:5px; left:10px;}
82.99% { width:5px; left:10px;}
83% { width: 5px; left: 15px; visibility:hidden;}
99.99% { width: 5px; left: 15px; visibility:hidden;}
100% { left: 0; width: 5px; visibility:hidden;}
}
@-webkit-keyframes star4 {
0% { left: 0; width: 5px; visibility: visible;}
33.19% { left: 0; width: 5px; }
33.2% { width:10px; left:0; }
49.79% { width:10px; left:0; }
49.8% { width:10px; left:5px; }
66.39% {width:10px; left:5px; }
66.4% { width:5px; left:10px;}
82.99% { width:5px; left:10px;}
83% { width: 5px; left: 15px; visibility:hidden;}
99.99% { width: 5px; left: 15px; visibility:hidden;}
100% { left: 0; width: 5px; visibility:hidden;}
}
@-moz-keyframes star5 {
0% { left: 38px; width: 5px; visibility: visible;}
33.19% { left: 38px; width: 5px; }
33.2% { width:10px; left:33px; }
49.79% { width:10px; left:33px; }
49.8% { width:10px; left:28px; }
66.39% {width:10px; left:28px; }
66.4% { width:5px; left:28px;}
82.99% { width:5px; left:28px;}
83% { width: 5px; left: 15px; visibility:hidden;}
99.99% { width: 5px; left: 15px; visibility:hidden;}
100% { left: 0; width: 5px; visibility:hidden;}
}
@-webkit-keyframes star5 {
0% { left: 38px; width: 5px; visibility: visible;}
33.19% { left: 38px; width: 5px; }
33.2% { width:10px; left:33px; }
49.79% { width:10px; left:33px; }
49.8% { width:10px; left:28px; }
66.39% {width:10px; left:28px; }
66.4% { width:5px; left:28px;}
82.99% { width:5px; left:28px;}
83% { width: 5px; left: 15px; visibility:hidden;}
99.99% { width: 5px; left: 15px; visibility:hidden;}
100% { left: 0; width: 5px; visibility:hidden;}
}
@-moz-keyframes star8 {
0% { top: 32px; height: 5px; visibility:visible;}
33.19% { top: 32px; height: 5px; }
33.2% { height:10px; top:28px; }
49.79% { height:10px; top:28px; }
49.8% { height:10px; top:23px; }
66.39% {height:10px; top:23px; }
66.4% { height:5px; top:18px;}
82.99% { height:5px; top:18px;}
83% { height: 5px; top: 15px; visibility:hidden;}
99.99% { height: 5px; top: 15px; visibility:hidden;}
100% { top: 0; height: 5px; visibility:hidden;}
}
@-webkit-keyframes star8 {
0% { top: 32px; height: 5px; visibility:visible;}
33.19% { top: 32px; height: 5px; }
33.2% { height:10px; top:28px; }
49.79% { height:10px; top:28px; }
49.8% { height:10px; top:23px; }
66.39% {height:10px; top:23px; }
66.4% { height:5px; top:18px;}
82.99% { height:5px; top:18px;}
83% { height: 5px; top: 15px; visibility:hidden;}
99.99% { height: 5px; top: 15px; visibility:hidden;}
100% { top: 0; height: 5px; visibility:hidden;}
}
.star {
position: absolute;
width: 40px;
height: 40px;
z-index: 10;
}
.star div {
width: 5px;
height: 5px;
background-color: #fff;
position: absolute;
-moz-animation: star1 0.4s linear 0s infinite;
-webkit-animation: star1 0.4s linear 0s infinite;
}
.star div[number="1"] {
left: 18px;
top: 0;
}
.star div[number="2"] {
left: 8px;
top: 6px;
visibility: hidden;
-moz-animation-name: star2-3-6-7;
-webkit-animation-name: star2-3-6-7;
}
.star div[number="3"] {
left: 30px;
top: 6px;
visibility: hidden;
-moz-animation-name: star2-3-6-7;
-webkit-animation-name: star2-3-6-7;
}
.star div[number="4"] {
left: 0px;
top: 16px;
-moz-animation-name: star4;
-webkit-animation-name: star4;
}
.star div[number="5"] {
left: 38px;
top: 16px;
-moz-animation-name: star5;
-webkit-animation-name: star5;
}
.star div[number="6"] {
left: 8px;
top: 26px;
visibility: hidden;
-moz-animation-name: star2-3-6-7;
-webkit-animation-name: star2-3-6-7;
}
.star div[number="7"] {
left: 30px;
top: 26px;
visibility: hidden;
-moz-animation-name: star2-3-6-7;
-webkit-animation-name: star2-3-6-7;
}
.star div[number="8"] {
left: 18px;
top: 32px;
-moz-animation-name: star8;
-webkit-animation-name: star8;
}
@-moz-keyframes starMovement1 {
0% { top: 80px; left: 600px}
100% { top: 80px; left: 0px;}
}
@-webkit-keyframes starMovement1 {
0% { top: 80px; left: 600px}
100% { top: 80px; left: 0px;}
}
.starMovement1 {
-moz-animation: starMovement1 3s linear 0s infinite;
-webkit-animation: starMovement1 3s linear 0s infinite;
}
@-moz-keyframes starMovement2 {
0% { top: -10px; left: 800px}
100% { top: -10px; left: -100px;}
}
@-webkit-keyframes starMovement2{
0% { top: -10px; left: 800px}
100% { top: -10px; left: -100px;}
}
.starMovement2 {
-moz-animation: starMovement2 4.5s linear 0s infinite;
-webkit-animation: starMovement2 4.5s linear 0s infinite;
}
@-moz-keyframes starMovement3 {
0% { top: 270px; left: 728px}
100% { top: 270px; left: -172px;}
}
@-webkit-keyframes starMovement3 {
0% { top: 270px; left: 728px}
100% { top: 270px; left: -172px;}
}
.starMovement3 {
-moz-animation: starMovement3 4.5s linear 0s infinite;
-webkit-animation: starMovement3 4.5s linear 0s infinite;
}
@-moz-keyframes starMovement4 {
0% { top: 160px; left: 2300px}
100% { top: 160px; left: -100px;}
}
@-webkit-keyframes starMovement4 {
0% { top: 160px; left: 2300px}
100% { top: 160px; left: -100px;}
}
.starMovement4 {
-moz-animation: starMovement4 12s linear 0s infinite;
-webkit-animation: starMovement4 12s linear 0s infinite;
}
@-moz-keyframes starMovement5 {
0% { top: 130px; left: 1100px}
100% { top: 130px; left: -100px;}
}
@-webkit-keyframes starMovement5 {
0% { top: 130px; left: 1100px}
100% { top: 130px; left: -100px;}
}
.starMovement5 {
-moz-animation: starMovement5 6s linear 0s infinite;
-webkit-animation: starMovement5 6s linear 0s infinite;
}
/* -- rest -- */
#nyanCat {
position:absolute;
left:150px;
top: 100px;
}
#mainContainer {
position:absolute;
width:500px;
height:300px;
border: solid #fff 3px;
overflow:hidden;
}
#description {
position: absolute;
top: 350px;
}
</style>
CSS NYAN CAT was created by <a href="https://profiles.google.com/michal.budzynski.js/about">Michal Budzynski</a> for <a href="http://mozillalabs.com/demoparty/helsinki">Mozilla Demo Party</a> in Helsinki on 18.06.2011.
<div id="mainContainer">
<div id="nyanCat">
<div id="wholeHead">
<div class="skin ear"></div>
<div class="skin ear rightEar"></div>
<div id="mainHead" class="skin">
<div class="eye"></div>
<div class="eye rightEye"></div>
<div class="nose"></div>
<div class="chick"></div>
<div class="chick rightChick"></div>
<div class="mouth">E</div>
</div>
</div>
<div id="toastBody">
<div>
&nbsp; &nbsp; &nbsp;.&nbsp;&nbsp;.&nbsp; &nbsp; &nbsp;..&nbsp; &nbsp; &nbsp;.&nbsp;.&nbsp; &nbsp; &nbsp;&nbsp&nbsp&nbsp;..&nbsp; &nbsp; &nbsp;.&nbsp;&nbsp;.
</div>
</div>
<div id="wholeTail">
<div class="tail skin"></div>
<div class="tail middleTail skin"></div>
<div class="tail backTail skin"></div>
</div>
<div id="allYourLegAreBelongToUs">
<div class="skin leg back leftBack"></div>
<div class="skin leg back"></div>
<div class="skin leg front leftFront"></div>
<div class="skin leg front"></div>
</div>
<div class="rainbow"></div>
<div class="rainbow r2"></div>
<div class="rainbow r3"></div>
<div class="rainbow r4"></div>
</div>
<div class="star starMovement1">
<div number="1"></div>
<div number="2"></div>
<div number="3"></div>
<div number="4"></div>
<div number="5"></div>
<div number="6"></div>
<div number="7"></div>
<div number="8"></div>
</div>
<div class="star starMovement2 backwards">
<div number="1"></div>
<div number="2"></div>
<div number="3"></div>
<div number="4"></div>
<div number="5"></div>
<div number="6"></div>
<div number="7"></div>
<div number="8"></div>
</div>
<div class="star starMovement3">
<div number="1"></div>
<div number="2"></div>
<div number="3"></div>
<div number="4"></div>
<div number="5"></div>
<div number="6"></div>
<div number="7"></div>
<div number="8"></div>
</div>
<div class="star starMovement4">
<div number="1"></div>
<div number="2"></div>
<div number="3"></div>
<div number="4"></div>
<div number="5"></div>
<div number="6"></div>
<div number="7"></div>
<div number="8"></div>
</div>
<div class="star starMovement5">
<div number="1"></div>
<div number="2"></div>
<div number="3"></div>
<div number="4"></div>
<div number="5"></div>
<div number="6"></div>
<div number="7"></div>
<div number="8"></div>
</div>
</div>
<div id="description">It contains 81 DOM elements, 688 lines of pure CSS and one JavaScript function for <br/>looping audio. My CSS fails CSSLint test and I'm really proud of this. <a href="https://github.com/michalbe/css-nyan-cat">Fork me on GitHub</a>,<br/>and see you on <a href="http://ongamestart.com/">onGameStart, first HTML5 game conference ever</a>!</div>
<audio loop="loop" src="nyancat.ogg" autoplay="true">
<script>
document.getElementsByTagName('audio')[0].addEventListener('ended', function(){
this.currentTime = 0;
}, false);
</script>
<script type="text/javascript">
//GOOGLE ANALITICS
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24051618-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script></font> </font>
</div>
</td>
</tr>
<tr>
<td height="22">
<div align="center">
<font face="Arial, Helvetica, sans-serif" color="#003366" size="2">Your Intranet has been successfully accessed<font size="2" color="#000080"> </font><font size="2">1185865</font><font size="2" color="#000080"> </font>times.</font>
</div>
</td>
</tr>
</table>
</table><br>
<input name="RedirectTo" value="/ScotchLP/twb.nsf?Opendatabase" type=hidden>
<input name="LoginColor" type="hidden" value="#003366">
<input name="LoginGraphic" type="hidden" value="">
<input name="Quote" type="hidden" value="&quot;Fair warning, guys. A journey through winter wonderland tends to test your commitment to Christmas. So when I say test, I mean Wonka-style. I'm talking dark. My advice: Stay honest, stay alert, and for the love of God, stay between the gumdrops.&quot; - Abed Nadir">
<input name="Number" type="hidden" value="1185865">
<input name="$PublicAccess" type="hidden" value="1">
<input name="reasonType" type="hidden" value="0">
<input name="useSSL" type="hidden" value="0"></form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment