Return to template
Old project in the process of being gutted and adapted to a template for my website.
This commit is contained in:
Jim Shepich III
parent
b821f0f225
commit
84a2e0a66e
14
css/home.css
Normal file
14
css/home.css
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
body{
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-image:url('../images/backgrounds/firstepisode.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
}
|
||||||
|
#title::before{
|
||||||
|
|
||||||
|
content:"Home";
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
44
index.html
Normal file
44
index.html
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="main.css">
|
||||||
|
<link id ="stylesheet" rel="stylesheet" type="text/css" href="">
|
||||||
|
<!--<link rel="stylesheet" type="text/css" href="css/home.css">-->
|
||||||
|
<title>CHEM216HTML</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="logo" onload="logoloader()"><p id="logop" align="center" onload="logoloader()">Total Synthesis of (−)-Nahuoic Acid C<sub>i</sub> (B<sub>ii</sub>)</p></div>
|
||||||
|
<div class="container" id="container">
|
||||||
|
<!--********************************************Navigation Sidebar*******************************************************************-->
|
||||||
|
<div id="navibar">
|
||||||
|
<table id="navibartable">
|
||||||
|
<tr class="navibar" title="Pilot" target="home" style="font-weight:bold;"><td><a href="" class="navibarlink"><div class="gradient"><p class="padded"><br />HOME</p></div></a></td></tr>
|
||||||
|
<tr class="navibar" title="Get Schwifty" target="question"><td><a href="" class="navibarlink"><div class="gradient"><p class="padded"><br />LEADING QUESTION</p></div></a></td></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--************************************************Title of Page********************************************************************-->
|
||||||
|
<div id="title"></div>
|
||||||
|
<div id="contentarea">
|
||||||
|
<iframe id="frame"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
<!--******************************************************SCRIPT*********************************************************************-->
|
||||||
|
<script src="main.js"></script>
|
||||||
|
|
||||||
|
<script src="navigation.js"></script>
|
||||||
|
<script src="resize.js"></script>
|
||||||
|
<script>
|
||||||
|
if(window.self!==window.top/*&&window.location.toLocaleString().indexOf("deeper")>=0*/){
|
||||||
|
document.body.style.backgroundImage="url('images/backgrounds/miniverse"+Math.round(Math.random()*4+1)+".png')";
|
||||||
|
} else if(document.getElementById("frame").src.indexOf("index.html")>=0){
|
||||||
|
document.body.style.backgroundImage="url('images/backgrounds/microverse.png')";
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script src="cheats.js"></script>
|
||||||
|
</html>
|
||||||
180
main.css
Normal file
180
main.css
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
/*
|
||||||
|
@font-face {
|
||||||
|
font-family: schwifty;
|
||||||
|
src: url('css/fonts/schwifty.ttf');
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
html,body{
|
||||||
|
overflow:hidden;
|
||||||
|
/* text-shadow:
|
||||||
|
-1px -1px 0 #FFF,
|
||||||
|
1px -1px 0 #FFF,
|
||||||
|
-1px 1px 0 #FFF,
|
||||||
|
1px 1px 0 #FFF;*/
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
.container{
|
||||||
|
position:fixed;
|
||||||
|
top:10%;
|
||||||
|
left:0px;
|
||||||
|
width:95%;/*80% to make scroll bar flush.*/
|
||||||
|
height:85%;
|
||||||
|
/*opacity:0.7;*/
|
||||||
|
background-color:rgba(255,255,255,0.69);
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
/* overflow:none;*/
|
||||||
|
}
|
||||||
|
div{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#navibar{
|
||||||
|
z-index:38;
|
||||||
|
color: black;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 #FFF,
|
||||||
|
1px -1px 0 #FFF,
|
||||||
|
-1px 1px 0 #FFF,
|
||||||
|
1px 1px 0 #FFF;
|
||||||
|
position:fixed;
|
||||||
|
top:15%;
|
||||||
|
left:0%;
|
||||||
|
width:15%;
|
||||||
|
height:65%;
|
||||||
|
/* list-style-image: url('au14.png');*/
|
||||||
|
font-family:roboto;
|
||||||
|
overflow:auto;
|
||||||
|
overflow-x:hidden;
|
||||||
|
|
||||||
|
margin:0;padding:0;
|
||||||
|
}
|
||||||
|
#navibartable{
|
||||||
|
|
||||||
|
}
|
||||||
|
.navibar{
|
||||||
|
background-image:url('images/portal.jpg');
|
||||||
|
border-radius: 10%;
|
||||||
|
height:10%;pbh
|
||||||
|
|
||||||
|
margin:0;padding:0;
|
||||||
|
}
|
||||||
|
td{
|
||||||
|
border-left: 1px solid #000;
|
||||||
|
border-right: 1px solid #000;
|
||||||
|
border-top: 1px solid #000;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
border-spacing:2px;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
margin:0;padding:0;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.padded{
|
||||||
|
padding-left:3%;
|
||||||
|
padding-botom:2px;
|
||||||
|
}
|
||||||
|
.navibarlink{
|
||||||
|
color: black;
|
||||||
|
text-decoration: none;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 #FFF,
|
||||||
|
1px -1px 0 #FFF,
|
||||||
|
-1px 1px 0 #FFF,
|
||||||
|
1px 1px 0 #FFF;
|
||||||
|
margin:0;padding:0;
|
||||||
|
}
|
||||||
|
#title{
|
||||||
|
position:fixed;
|
||||||
|
top:15%;
|
||||||
|
left:20%;
|
||||||
|
width:80%;
|
||||||
|
height:10%;
|
||||||
|
font-size:42;
|
||||||
|
font-family:credits;
|
||||||
|
color: black;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 #FFF,
|
||||||
|
1px -1px 0 #FFF,
|
||||||
|
-1px 1px 0 #FFF,
|
||||||
|
1px 1px 0 #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#contentarea{
|
||||||
|
z-index:1;
|
||||||
|
position:fixed;
|
||||||
|
top:25%;
|
||||||
|
left:20%;
|
||||||
|
width:70%;
|
||||||
|
height:65%;
|
||||||
|
font-size:14px;
|
||||||
|
font-family:roboto;
|
||||||
|
color: black;
|
||||||
|
text-shadow:
|
||||||
|
-1px -1px 0 #FFF,
|
||||||
|
1px -1px 0 #FFF,
|
||||||
|
-1px 1px 0 #FFF,
|
||||||
|
1px 1px 0 #FFF;
|
||||||
|
overflow:hidden;
|
||||||
|
overflow-x:hidden;
|
||||||
|
}
|
||||||
|
.content{
|
||||||
|
display:none;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
#logo{
|
||||||
|
height:6%;
|
||||||
|
position:fixed;
|
||||||
|
top:2%;
|
||||||
|
width:100%;
|
||||||
|
font-family: schwifty;
|
||||||
|
font-size:100%;
|
||||||
|
color:#00B1C1;
|
||||||
|
text-shadow:
|
||||||
|
|
||||||
|
-1px -1px 1px #000000,
|
||||||
|
1px -1px 1px #000000,
|
||||||
|
-1px 1px 1px #000000,
|
||||||
|
1px 1px 1px #000000,
|
||||||
|
-2px -2px 6px #81BC76,
|
||||||
|
2px -2px 6px #81BC76,
|
||||||
|
-2px 2px 6px #81BC76,
|
||||||
|
2px 2px 6px #81BC76;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
/*font-style: italic;*/
|
||||||
|
}
|
||||||
|
#logop{
|
||||||
|
font-family: schwifty;
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
}
|
||||||
|
body{
|
||||||
|
background-attachment: fixed;
|
||||||
|
background-image:url('images/backgrounds/firstepisode.png');
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
.gradient{
|
||||||
|
/* z-index:-1;
|
||||||
|
position:relative;
|
||||||
|
top:0;
|
||||||
|
left:0;*/
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
background: linear-gradient(to bottom , rgba(0,0,0,0.6) , rgba(0,0,0,0));
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#frame{
|
||||||
|
width:100%;
|
||||||
|
height:90%;
|
||||||
|
}
|
||||||
73
main.js
Normal file
73
main.js
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
function id(ID){
|
||||||
|
return document.getElementById(ID);
|
||||||
|
}
|
||||||
|
var navibar = document.getElementsByClassName("navibar");
|
||||||
|
var pages=document.getElementsByClassName("content");
|
||||||
|
function iframe(ID,width,height,src,name){
|
||||||
|
this.ID=ID;
|
||||||
|
this.width=width;
|
||||||
|
this.height=height;
|
||||||
|
this.src=src;
|
||||||
|
this.type="iframe";
|
||||||
|
this.name=name;
|
||||||
|
}
|
||||||
|
function content(ID,content,name){
|
||||||
|
this.ID=ID;
|
||||||
|
this.content=content;
|
||||||
|
this.name=name;
|
||||||
|
this.type="content";
|
||||||
|
}
|
||||||
|
/*function writecookie(attribute,value){
|
||||||
|
var d = new Date();
|
||||||
|
d.setTime(d.getTime() + (1*24*60*60*1000));
|
||||||
|
var expires = "expires=" + d.toGMTString();
|
||||||
|
if(document.cookie.indexOf(attribute)>-1){
|
||||||
|
document.cookie.substring(attribute+"=",document.cookie.substring(attribute+"=",document.cookie.length).indexOf(";"))+value+document.cookie.substring(document.cookie.substring(attribute+"=",document.cookie.length).indexOf(";"),document.cookie.length)+"expires="+d.toGMTString()+";path=/";
|
||||||
|
} else {
|
||||||
|
document.cookie=attribute+"="+value+";"+"expires="+d.toGMTString()+";path=/";
|
||||||
|
}
|
||||||
|
}*/
|
||||||
|
id("navibar").addEventListener("mouseenter",function(){id("navibar").style.zIndex=39;
|
||||||
|
for(i=0;i<document.getElementsByClassName("overlay").length;i++){
|
||||||
|
document.getElementsByClassName("overlay")[i].style.zIndex=38;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
id("navibar").addEventListener("mouseleave",function(){id("navibar").style.zIndex=38;
|
||||||
|
for(i=0;i<document.getElementsByClassName("overlay").length;i++){
|
||||||
|
document.getElementsByClassName("overlay")[i].style.zIndex=39;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.addEventListener("mousemove",movecursor);
|
||||||
|
id("frame").addEventListener("mouseenter",hidecursor);
|
||||||
|
id("frame").addEventListener("mouseleave",showcursor);
|
||||||
|
|
||||||
|
//window.addEventListener("mouseenter",movecursor);
|
||||||
|
function movecursor(e){
|
||||||
|
if(window.e){e=window.e;}
|
||||||
|
id("cursor").style.top=e.clientY-(id("cursor").clientHeight/672)*(76);
|
||||||
|
id("cursor").style.left=e.clientX-(id("cursor").clientWidth/541)*(134);
|
||||||
|
}
|
||||||
|
function hidecursor(){
|
||||||
|
id("cursor").style.display="none";
|
||||||
|
}
|
||||||
|
function showcursor(){
|
||||||
|
id("cursor").style.display="inline";
|
||||||
|
}
|
||||||
|
var topgrad=1;
|
||||||
|
var bottomgrad=1;
|
||||||
|
var time=1200;
|
||||||
|
for(i=0;i<time;i++){
|
||||||
|
|
||||||
|
setTimeout(dim,1200*i/(time))
|
||||||
|
|
||||||
|
}
|
||||||
|
function dim(){
|
||||||
|
topgrad-=2/time;
|
||||||
|
if(topgrad<=0){
|
||||||
|
topgrad=0;
|
||||||
|
}
|
||||||
|
bottomgrad-=1/time;
|
||||||
|
console.log("got it");document.getElementById("loading").style.background="linear-gradient(to bottom , rgba(0,0,0,"+topgrad+") , rgba(0,0,0,"+bottomgrad+"))";
|
||||||
|
document.getElementById("loadingimg").style.opacity=bottomgrad;
|
||||||
|
}
|
||||||
|
setTimeout(function(){document.getElementById("loading").parentNode.removeChild(document.getElementById("loading"));},time);
|
||||||
57
navigation.js
Normal file
57
navigation.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
function id(ID){
|
||||||
|
return document.getElementById(ID);
|
||||||
|
}
|
||||||
|
|
||||||
|
var URL=window.location.toLocaleString();
|
||||||
|
var querystring;
|
||||||
|
var query = {};
|
||||||
|
var page;
|
||||||
|
|
||||||
|
if(URL.indexOf("?")>-1){
|
||||||
|
querystring = URL.split("?")[1] //Extract the query string from the URL.
|
||||||
|
var queryterms = querystring.split("&") //Array of query terms.
|
||||||
|
for(i=0;i<queryterms.length;i++){
|
||||||
|
term = queryterms[i].split("="); //Split keys from values.
|
||||||
|
query[term[0]]=term[1] //Add key/val pairs to dict.
|
||||||
|
}
|
||||||
|
page = query["page"] //The page name is the first.
|
||||||
|
} else {
|
||||||
|
page = "home"; //If no page name is specified in the query, go to the home page.
|
||||||
|
}
|
||||||
|
|
||||||
|
var iframetarget="";
|
||||||
|
|
||||||
|
var pages = ["home","about"]; //Array of defined pages
|
||||||
|
|
||||||
|
switch(page){
|
||||||
|
//Add cases here for navibar items that don't just open a simple page.
|
||||||
|
default:
|
||||||
|
if(pages.indexOf(page)>-1){
|
||||||
|
iframetarget="pages/"+page+".html"; //By default, display the file whose name is specified in the query.
|
||||||
|
} else {
|
||||||
|
iframetarget = "pages/home.html"; //If the query specifies a page name that doesn't exist, open the home page.
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
navibar = document.getElementsByClassName("navibar");
|
||||||
|
for(k=0;k<navibar.length;k++){
|
||||||
|
navibar[k].href="index.html?page="+navibar[k].getAttribute("target");
|
||||||
|
//Set the navibar links to the page specified in their "target" attribute.
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
id("frame").src = iframetarget;
|
||||||
|
|
||||||
|
/*}
|
||||||
|
|
||||||
|
for(i=0;i<document.getElementsByClassName("navibar").length;i++){
|
||||||
|
if(document.getElementsByClassName("navibar")[i].getAttribute("target")==page){
|
||||||
|
document.getElementsByClassName("navibar")[i].style.fontWeight="bold";
|
||||||
|
document.getElementsByClassName("gradient")[i].style.background="rgba(0,0,0,0)";
|
||||||
|
} else{
|
||||||
|
document.getElementsByClassName("gradient")[i].style.background="linear-gradient(to bottom , rgba(0,0,0,0.6) , rgba(0,0,0,0));";
|
||||||
|
document.getElementsByClassName("navibar")[i].style.fontWeight="normal";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
4
pages/about.html
Normal file
4
pages/about.html
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
I'm the guy!
|
||||||
|
</html>
|
||||||
7
pages/home.html
Normal file
7
pages/home.html
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<html>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<head></head>
|
||||||
|
<body>
|
||||||
|
Are you there world? It's me, Jim!
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user