<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Ryan Simms</title>
<link id ="pageStyle" rel="stylesheet" href="lightStyle.css" type="text/css"> <!-- Loads Default Stylesheet -->
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto'); <!-- Custom Font -->
</style>
</head>
<body>
<script src="lightSwitch.js"></script> <!-- Loads LightSwitch Script -->
<button type="button" id="lightSwitchOn">Turn On Night Mode</button>
<button type="button" id="lightSwitchOff">Turn Off Night Mode</button>
</body>
</html>
function handleDocumentLoad() {
checkCookie();
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) === 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var nightmode = getCookie("lights");
if (nightmode == "off") {
lightsOff();
} else {
lightsOn();
}
}
var style = document.getElementById("pageStyle")
function lightsOff() {
document.cookie = "lights = off; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'darkStyle.css');
}
function lightsOn() {
document.cookie = "lights = on; expires = Fri, 31 Dec 9999 23:59:59 GMT";
style.setAttribute('href', 'lightStyle.css');
}
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("lightSwitchOff").addEventListener("click", lightsOff);
document.getElementById("lightSwitchOn").addEventListener("click", lightsOn);
});
}
handleDocumentLoad();
@charset "utf-8"
@font-face {
font-family: 'Roboto', sans-serif;
}
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
color: #1C1C1C;
font-family: 'Roboto';
background-color: #FFF;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
font-size: 1.5em;
}
/*Navigation*/
nav {
max-width: 100%;
max-height: 100%;
border: solid 1px #1C1C1C;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 6em;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #1C1C1C;
text-decoration: none;
}
/*Main heading*/
h1 {
font-size: 3em;
max-width: 100%;
max-height: 100%;
position: relative;
margin: 0 auto;
margin-left: -2.5em;
text-align: center;
}
/*Secondary heading*/
h2 {
font-size: 2.75em;
max-width: 100%;
max-height: 100%;
}
/*Tertiary heading*/
h3 {
font-size: 2.5em;
max-width: 100%;
max-height: 100%;
}
/*Text*/
p {
font-size: 0.75em;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
border: solid 0px #1C1C1C;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 1em;
margin-top: 1em;
}
textarea {
max-width: 100%;
max-height: 100%;
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #1C1C1C;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #1C1C1C;
border-radius: 2px;
padding: 5px;
}
#logo {
float: left;
margin-left: 10px;
margin-top: 5px;
max-height: 100px;
max-width: 100px;
border: 0px;
}
#enter {
margin-top: 5em;
margin-bottom: 5em;
margin-left: 3em;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
border: solid 1px #1C1C1C;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 2em;
margin-left: 2em;
}
/*Light Switches*/
#lightSwitchOn {
display: inline;
position: absolute;
top: 85px;
right: 30px;
margin-right: 10px;
}
#lightSwitchOff {
display: none;
position: absolute;
top: 85px;
right: 30px;
margin-right: 10px;
}
/*Layout for device with a min-width of 1024px*/
@media only screen and (min-width: 1024px) {
p, li {
font-size: 1.5em;
}
h1 {
font-size: 2.75em;
}
h2 {
font-size: 2.25em;
}
h3 {
font-size: 2em;
}
#enter {
max-width: 60%;
max-height: 60%;
}
#lightSwitchOff, #lightSwitchOn {
display: inline;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
@media only screen and (min-width: 1280px) {
li {
font-size: 1.5em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
@media only screen and (min-width: 1920px) {
p {
font-size: 1.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 200px e.g. iMac*/
@media only screen and (min-width: 2000px) {
p {
font-size: 2em;
}
}
@charset "utf-8"
@font-face {
font-family: 'Roboto', sans-serif;
}
/*Layout for phones and tablets e.g. iPhone 5 and iPad*/
/*webpage fades in*/
html {
animation: fadein 2s;
position: relative;
min-height: 100%;
}
/*animation*/
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/*main colour settings for page*/
body {
color: #FFF;
font-family: 'Roboto';
background-color: #1C1C1C;
margin: 0 0 100px;
padding: 25px;
}
/*List in nav*/
li {
list-style-type: none;
display: inline;
font-size: 1.5em;
}
/*Navigation*/
nav {
max-width: 100%;
max-height: 100%;
border: solid 1px #FFF;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
ol {
text-align: center;
margin-right: 6em;
}
/*Links*/
a, a:link, a:visited, a:hover {
color: #FFF;
text-decoration: none;
}
/*Main heading*/
h1 {
font-size: 3em;
max-width: 100%;
max-height: 100%;
position: relative;
margin: 0 auto;
margin-left: -2.5em;
text-align: center;
}
/*Secondary heading*/
h2 {
font-size: 2.75em;
max-width: 100%;
max-height: 100%;
}
/*Tertiary heading*/
h3 {
font-size: 2.5em;
max-width: 100%;
max-height: 100%;
}
/*Text*/
p {
font-size: 0.75em;
}
/*Images*/
img {
max-width: 100%;
max-height: 100%;
border: solid 0px #FFF;
border-radius: 5px;
margin: 0 auto;
text-align: center;
}
label {
display: block;
margin-bottom: 1em;
margin-top: 1em;
}
textarea {
max-width: 100%;
max-height: 100%;
width: 300px;
height: 200px;
margin-bottom: 10px;
padding: 10px;
border: solid 1px #FFF;
border-radius: 2px;
resize: none;
}
input {
border: solid 1px #FFF;
border-radius: 2px;
padding: 5px;
}
#logo {
float: left;
margin-left: 10px;
margin-top: 5px;
max-height: 100px;
max-width: 100px;
border: 0px;
}
#enter {
margin-top: 5em;
margin-bottom: 5em;
margin-left: 3em;
max-width: 90%;
max-height: 90%;
}
video {
max-width: 80%;
margin: 0 auto;
display: block;
}
/*Footer*/
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
overflow: hidden;
text-align: center;
}
/*Main Body*/
#mainContent {
padding: 10px;
border: solid 1px #FFF;
border-radius: 5px;
margin-top: 10px;
margin-bottom: 10px;
}
#mainContent img {
display: inline;
max-width: 375px;
max-height: 375px;
float: right;
margin-right: 2em;
margin-left: 2em;
}
/*Light Switches*/
#lightSwitchOn {
display: none;
position: absolute;
top: 85px;
right: 30px;
margin-right: 10px;
}
#lightSwitchOff {
display: inline;
position: absolute;
top: 85px;
right: 30px;
margin-right: 10px;
}
/*Layout for device with a min-width of 1024px*/
@media only screen and (min-width: 1024px) {
p, li {
font-size: 1.5em;
}
h1 {
font-size: 2.75em;
}
h2 {
font-size: 2.25em;
}
h3 {
font-size: 2em;
}
#enter {
max-width: 60%;
max-height: 60%;
}
#lightSwitchOff, #lightSwitchOn {
display: inline;
}
}
/*Layout for desktop with a min-width of 1280px (720p HD)*/
@media only screen and (min-width: 1280px) {
li {
font-size: 1.5em;
}
h1 {
font-size: 3em;
}
h2 {
font-size: 2.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 1920px (1080p HD)*/
@media only screen and (min-width: 1920px) {
p {
font-size: 1.25em;
}
#enter {
max-width: 40%;
max-height: 40%;
}
}
/*Layout for desktop with a min-width of 200px e.g. iMac*/
@media only screen and (min-width: 2000px) {
p {
font-size: 2em;
}
}