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