Update of the Version 3 redsign

9 files changed, 671 insertions, 14 deletions

diff --git a/CSS/GreenAndDark.css b/CSS/GreenAndDark.css
new file mode 100644
index 0000000..cd8e7ec
--- /dev/null
+++ b/CSS/GreenAndDark.css
@@ -0,0 +1,180 @@
+
+body, html{
+    height: calc(100% - 2em);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+body{
+    background: #16FF5C; /* Old browsers */
+    background: -moz-linear-gradient(45deg, #16FF5C 0%, #076aff 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(45deg, #16FF5C 0%,#076aff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#16FF5C', endColorstr='#076aff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+aside{
+    color: #fff;
+    display: grid;
+    grid-template-columns: 40px auto;
+    padding: 2em;
+}
+aside img{
+    cursor: pointer;
+}
+a{
+    color:#fff;
+}
+.active {
+    position: absolute;
+    display: block;
+    background: #D2D2D2;
+    width: 50%;
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+.MenuX{
+    position: absolute;
+    display: block;
+    top: 0;
+    right: .5em;
+    padding: 1em;
+    color: #000;
+    cursor: pointer;
+}
+ul {
+    display: none;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+ul li a {
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: .6em;
+    display: block;
+    padding: .5em 3em;
+    color: #000;
+}
+div.logo{
+    width: 150px;
+    height: 150px;
+    background-image: url('../images/LOGO_Transparent.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    padding-bottom:5px;
+}
+main{
+    padding: 1em 1.4em;
+    color: white;
+}
+.search{
+    padding: 12px 20px 12px;
+    width: 50%;
+    border-radius: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15em;
+    display: block;
+    background-color: rgba(36,38,40,.72);
+    color: rgb(186,181,171);
+    border-color: #575757;
+    font-size: 16px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+}
+.search:focus{
+    color: #fff;
+    width: 90%;
+    background-color: rgba(36,38,40,1);
+}
+@media only screen and (min-width: 768px) and (min-height: 614px){
+    body{
+        display: grid;
+        grid-template-columns: 375px auto;
+        /*padding: 2em;*/
+    }
+    .menuimg{
+        display: none;
+    }
+    .MenuX{
+        display: none;
+    }
+    aside{
+        background:rgba(37,37,37,1);
+        grid-template-columns: auto;
+        padding: 0 !important;
+        border-radius: 5px 0px 0px 5px;
+        margin: 82px 0 62px 101px;
+    }
+    main{
+        padding: 4em;
+        background: rgba(24,26,27,1);
+        background-size: 70%;
+        border-radius: 0px 5px 5px 0px;
+        background-image: url('../images/SideFlareGreen.svg') !important;
+        background-repeat: no-repeat;
+        background-position: 100% 100%;
+        margin: 82px 101px 62px 0;
+    }
+    ul{
+        display: block;
+        margin-top: 2em;
+        position:  relative !important;
+        background: none !important;
+        background: #fff;
+        width: 100% !important;
+    }
+    ul li a{
+        padding: 1.4em;
+        font-size: .8em;
+        color:#fff;
+    }
+    ul li a:hover{
+        background: #000;
+    }
+    .search{
+        width: 50%;
+        margin: 0 auto;
+        display: block;
+        margin-bottom: 0;
+    }
+    div.logo{
+        margin-top: 12em;
+    }
+}
+@media only screen and (min-width: 1610px){
+    div.logo{
+        height:6.25em !important;
+        width: 37.8125em !important;
+        background-image: url('../images/LOGO_21x127.png') !important;
+        background-size: contain;
+        background-repeat: no-repeat;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        padding-bottom: 5px !important;
+        /*width: 38.66% !important;*/
+    }
+}
+@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
+    body{
+        display: flex !important;
+    }
+    main{
+        flex: 1;
+    }
+    ul li a{
+        font-size: 0.625em;
+        padding: 1em;        
+    }
+}
+@media only screen and (max-height: 665px) and (min-height: 582px){
+    div.logo{
+        margin-top: 1em;
+    }
+}
\ No newline at end of file
diff --git a/CSS/PurpleAndDark.css b/CSS/PurpleAndDark.css
new file mode 100644
index 0000000..ef6ef8c
--- /dev/null
+++ b/CSS/PurpleAndDark.css
@@ -0,0 +1,176 @@
+
+body, html{
+    height: calc(100% - 2em);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+body{
+    background: linear-gradient(to top right, #076aff 0%, #8e09ff 100%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+aside{
+    color: #fff;
+    display: grid;
+    grid-template-columns: 40px auto;
+    padding: 2em;
+}
+aside img{
+    cursor: pointer;
+}
+a{
+    color:#fff;
+}
+.active {
+    position: absolute;
+    display: block;
+    background: #D2D2D2;
+    width: 50%;
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+.MenuX{
+    position: absolute;
+    display: block;
+    top: 0;
+    right: .5em;
+    padding: 1em;
+    color: #000;
+    cursor: pointer;
+}
+ul {
+    display: none;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+ul li a {
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: .6em;
+    display: block;
+    padding: .5em 3em;
+    color: #000;
+}
+div.logo{
+    width: 150px;
+    height: 150px;
+    background-image: url('../images/LOGO_Transparent.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    padding-bottom:5px;
+}
+main{
+    padding: 1em 1.4em;
+    color: white;
+}
+.search{
+    padding: 12px 20px 12px;
+    width: 50%;
+    border-radius: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15em;
+    display: block;
+    background-color: rgba(36,38,40,.72);
+    color: rgb(186,181,171);
+    border-color: #575757;
+    font-size: 16px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+}
+.search:focus{
+    color: #fff;
+    width: 90%;
+    background-color: rgba(36,38,40,1);
+}
+@media only screen and (min-width: 768px) and (min-height: 614px){
+    body{
+        display: grid;
+        grid-template-columns: 375px auto;
+        /*padding: 2em;*/
+    }
+    .menuimg{
+        display: none;
+    }
+    .MenuX{
+        display: none;
+    }
+    aside{
+        background:rgba(37,37,37,1);
+        grid-template-columns: auto;
+        padding: 0 !important;
+        border-radius: 5px 0px 0px 5px;
+        margin: 82px 0 62px 101px;
+    }
+    main{
+        padding: 4em;
+        background: rgba(24,26,27,1);
+        background-size: 70%;
+        border-radius: 0px 5px 5px 0px;
+        background-image: url('../images/SideFlarePurple.svg') !important;
+        background-repeat: no-repeat;
+        background-position: 100% 100%;
+        margin: 82px 101px 62px 0;
+    }
+    ul{
+        display: block;
+        margin-top: 2em;
+        position:  relative !important;
+        background: none !important;
+        background: #fff;
+        width: 100% !important;
+    }
+    ul li a{
+        padding: 1.4em;
+        font-size: .8em;
+        color:#fff;
+    }
+    ul li a:hover{
+        background: #000;
+    }
+    .search{
+        width: 50%;
+        margin: 0 auto;
+        display: block;
+        margin-bottom: 0;
+    }
+    div.logo{
+        margin-top: 12em;
+    }
+}
+@media only screen and (min-width: 1610px){
+    div.logo{
+        height:6.25em !important;
+        width: 37.8125em !important;
+        background-image: url('../images/LOGO_21x127.png') !important;
+        background-size: contain;
+        background-repeat: no-repeat;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        padding-bottom: 5px !important;
+        /*width: 38.66% !important;*/
+    }
+}
+@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
+    body{
+        display: flex !important;
+    }
+    main{
+        flex: 1;
+    }
+    ul li a{
+        font-size: 0.625em;
+        padding: 1em;        
+    }
+}
+@media only screen and (max-height: 665px) and (min-height: 582px){
+    div.logo{
+        margin-top: 1em;
+    }
+}
\ No newline at end of file
diff --git a/CSS/PurpleAndWhite.css b/CSS/PurpleAndWhite.css
new file mode 100644
index 0000000..c2067b4
--- /dev/null
+++ b/CSS/PurpleAndWhite.css
@@ -0,0 +1,174 @@
+
+body, html{
+    height: calc(100% - 2em);
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 16px;
+}
+body{
+    background: linear-gradient(to top right, #076aff 0%, #8e09ff 100%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+aside{
+    color: #fff;
+    display: grid;
+    grid-template-columns: 40px auto;
+    padding: 2em;
+}
+aside img{
+    cursor: pointer;
+}
+a{
+    color:#000;
+}
+.active {
+    position: absolute;
+    display: block;
+    background: #D2D2D2;
+    width: 50%;
+    left: 0;
+    top: 0;
+    height: 100%;
+}
+.MenuX{
+    position: absolute;
+    display: block;
+    top: 0;
+    right: .5em;
+    padding: 1em;
+    color: #000;
+    cursor: pointer;
+}
+ul {
+    display: none;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+ul li a {
+    text-decoration: none;
+    text-transform: uppercase;
+    font-size: .6em;
+    display: block;
+    padding: .5em 3em;
+    color: #000;
+}
+div.logo{
+    width: 150px;
+    height: 150px;
+    background-image: url('../images/LOGO_Transparent.png');
+    background-size: contain;
+    background-repeat: no-repeat;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    padding-bottom:5px;
+}
+main{
+    padding: 1em 1.4em;
+}
+.search{
+    padding: 12px 20px 12px;
+    width: 50%;
+    border-radius: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    margin-bottom: 15em;
+    display: block;
+    background-color: rgba(213,213,213,.72);
+    color: #878787;
+    font-size: 16px;
+    -webkit-transition: width 0.4s ease-in-out;
+    transition: width 0.4s ease-in-out;
+}
+.search:focus{
+    color: black;
+    width: 90%;
+    background-color: rgba(213,213,213,1.0);
+}
+@media only screen and (min-width: 768px) and (min-height: 614px){
+    body{
+        display: grid;
+        grid-template-columns: 375px auto;
+        /*padding: 2em;*/
+    }
+    .menuimg{
+        display: none;
+    }
+    .MenuX{
+        display: none;
+    }
+    aside{
+        background:rgba(210,210,210,1);
+        grid-template-columns: auto;
+        padding: 0 !important;
+        border-radius: 5px 0px 0px 5px;
+        margin: 82px 0 62px 101px;
+    }
+    main{
+        padding: 4em;
+        background:rgba(255,255,255,1);
+        background-size: 70%;
+        border-radius: 0px 5px 5px 0px;
+        background-image: url('../images/SideFlarePurple.svg') !important;
+        background-repeat: no-repeat;
+        background-position: 100% 100%;
+        margin: 82px 101px 62px 0;
+    }
+    ul{
+        display: block;
+        margin-top: 2em;
+        position:  relative !important;
+        background: none !important;
+        background: #fff;
+        width: 100% !important;
+    }
+    ul li a{
+        padding: 1.4em;
+        font-size: .8em;
+        color:#000;
+    }
+    ul li a:hover{
+        background: #fff;
+    }
+    .search{
+        width: 50%;
+        margin: 0 auto;
+        display: block;
+        margin-bottom: 0;
+    }
+    div.logo{
+        margin-top: 12em;
+    }
+}
+@media only screen and (min-width: 1610px){
+    div.logo{
+        height:6.25em !important;
+        width: 37.8125em !important;
+        background-image: url('../images/LOGO_21x127.png') !important;
+        background-size: contain;
+        background-repeat: no-repeat;
+        margin-left: auto;
+        margin-right: auto;
+        display: block;
+        padding-bottom: 5px !important;
+        /*width: 38.66% !important;*/
+    }
+}
+@media only screen and (max-height: 880px) and (min-width: 768px) and (min-height: 582px){
+    body{
+        display: flex !important;
+    }
+    main{
+        flex: 1;
+    }
+    ul li a{
+        font-size: 0.625em;
+        padding: 1em;        
+    }
+}
+@media only screen and (max-height: 665px) and (min-height: 582px){
+    div.logo{
+        margin-top: 1em;
+    }
+}
\ No newline at end of file
diff --git a/CSS/main.css b/CSS/main.css
index 4f416bd..819f5bc 100644
--- a/CSS/main.css
+++ b/CSS/main.css
@@ -1,7 +1,6 @@
 
 body, html{
     height: calc(100% - 2em);
-    margin: 0;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
 }
@@ -23,6 +22,9 @@ aside{
 aside img{
     cursor: pointer;
 }
+a{
+    color:#000;
+}
 .active {
     position: absolute;
     display: block;
@@ -91,8 +93,8 @@ main{
 @media only screen and (min-width: 768px) and (min-height: 614px){
     body{
         display: grid;
-        grid-template-columns: 17.125em auto;
-        padding: 2em;
+        grid-template-columns: 375px auto;
+        /*padding: 2em;*/
     }
     .menuimg{
         display: none;
@@ -101,16 +103,21 @@ main{
         display: none;
     }
     aside{
-        background:rgba(213,213,213,.72);
+        background:rgba(210,210,210,1);
         grid-template-columns: auto;
-        padding: 0;
+        padding: 0 !important;
         border-radius: 5px 0px 0px 5px;
+        margin: 82px 0 62px 101px;
     }
     main{
         padding: 4em;
-        background: rgba(93,93,93,.72);
+        background:rgba(255,255,255,1);
         background-size: 70%;
         border-radius: 0px 5px 5px 0px;
+        background-image: url('../images/SideFlareGreen.svg') !important;
+        background-repeat: no-repeat;
+        background-position: 100% 100%;
+        margin: 82px 101px 62px 0;
     }
     ul{
         display: block;
@@ -123,6 +130,7 @@ main{
     ul li a{
         padding: 1.4em;
         font-size: .8em;
+        color:#000;
     }
     ul li a:hover{
         background: #fff;
@@ -131,6 +139,7 @@ main{
         width: 50%;
         margin: 0 auto;
         display: block;
+        margin-bottom: 0;
     }
     div.logo{
         margin-top: 12em;
diff --git a/JS/cookies.js b/JS/cookies.js
new file mode 100644
index 0000000..ca71e56
--- /dev/null
+++ b/JS/cookies.js
@@ -0,0 +1,36 @@
+function setCookie(cname,cvalue,exdays) {
+    var d = new Date();
+    d.setTime(d.getTime() + (exdays*24*60*60*1000));
+    var expires = "expires=" + d.toGMTString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}  
+function getCookie(cname) {
+    var name = cname + "=";
+    var decodedCookie = decodeURIComponent(document.cookie);
+    var ca = decodedCookie.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 theme=getCookie("theme");
+    if(theme == ""){
+        setCookie("theme","GreenAndWhite",365);
+        window.location.reload(false);
+    }else if(theme == "GreenAndWhite"){
+        document.getElementById("cssFile").href = "CSS/main.css";
+    }else if(theme == "GreenAndDark"){
+        document.getElementById("cssFile").href = "CSS/GreenAndDark.css";
+    }else if(theme == "PurpleAndWhite"){
+        document.getElementById("cssFile").href = "CSS/PurpleAndWhite.css";
+    }else if(theme == "PurpleAndDark"){
+        document.getElementById("cssFile").href = "CSS/PurpleAndDark.css";
+    }
+}
\ No newline at end of file
diff --git a/images/SideFlareGreen.svg b/images/SideFlareGreen.svg
new file mode 100644
index 0000000..130f9f1
--- /dev/null
+++ b/images/SideFlareGreen.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="860.296" height="634.901" viewBox="0 0 860.296 634.901">
+  <path id="Path_1" data-name="Path 1" d="M1562,967s108.449-224.789,308.493-200,234.16-12.4,234.16-12.4,85.29-71.277,89.942-237.074S2421,333.143,2421,333.143V967Z" transform="translate(-1561.204 -332.599)" fill="#12d986" stroke="#12d986" stroke-width="1"/>
+</svg>
diff --git a/images/SideFlarePurple.svg b/images/SideFlarePurple.svg
new file mode 100644
index 0000000..2249c62
--- /dev/null
+++ b/images/SideFlarePurple.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="859" height="633.857" viewBox="0 0 859 633.857">
+  <path id="Path_1" data-name="Path 1" d="M1562,967s108.449-224.789,308.493-200,234.16-12.4,234.16-12.4,85.29-71.277,89.942-237.074S2421,333.143,2421,333.143V967Z" transform="translate(-1562 -333.143)" fill="#8b0bff"/>
+</svg>
diff --git a/index.html b/index.html
index dbaf10c..e36f7f8 100644
--- a/index.html
+++ b/index.html
@@ -8,20 +8,21 @@
 	<meta name="author" content="Jacob McDonnell"/>
 	<meta name="keywords" content="Jacob,McDonnell,Jacob McDonnell"/>
 	<title>Jacob McDonnell</title>
-        <link href="CSS/main.css" rel="stylesheet" type="text/css">
+        <link id="cssFile" href="CSS/main.css" rel="stylesheet" type="text/css">
         <script src="JS/main.js"></script>
+        <script src="JS/cookies.js"></script>
         <script src="JS/command.js"></script>
     </head>
-    <body onkeydown="keyCode(event)" onload="FocusOnInput()">
-        <aside>
+    <body onkeydown="keyCode(event)" onload="FocusOnInput(),checkCookie()">
+        <aside id="NavBar">
             <img src="images\menu.svg" id="menuicon" class="menuimg">
             <nav>
-                <ul>
+                <ul id="menuLinks">
                     <p id="menuX" class="MenuX">X</p>
-                    <li><a href="https://mcd223.github.io">Home</a></li>
-                    <li><a href="https://mcd223.github.io/morsecode/">Morse code</a></li>
-                    <li><a href="https://mcd223.github.io/binary/" id="pLink">Binary</a></li>
-                    <li><a href="https://mcd223.github.io/Pacman/" id="pLinks">Google Pacman</a></li>
+                    <li><a href="https://jacobmcdonnell.com/">Home</a></li>
+                    <li><a href="https://jacobmcdonnell.com/morsecode/">Morse code</a></li>
+                    <li><a href="https://jacobmcdonnell.com/binary/" id="pLink">Binary</a></li>
+                    <li><a href="https://jacobmcdonnell.com/Pacman/" id="pLinks">Google Pacman</a></li>
                     <li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
                     <li><a href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Gmail</a></li>
                     <li><a href="https://play.google.com/music/listen?authuser&u=0#/home">Google Play Music</a></li>
@@ -34,6 +35,7 @@
                     <li><a href="https://www.politicalcompass.org/test/">Political Compass</a></li>
                     <li><a href="https://www.twitch.tv/">Twitch</a></li>
                     <li><a href="http://www.w3schools.com/html/default.asp">html tutorial</a></li>
+                    <li><a href="https://jacobmcdonnell.com/settings.html">Settings and Information</a></li>
                 </ul>
             </nav>
         </aside>
diff --git a/settings.html b/settings.html
new file mode 100644
index 0000000..eab3848
--- /dev/null
+++ b/settings.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta name="description" content="This is the personal website for the real Jacob McDonnell. Feel free to look around, you might find something interesting."/>
+	<meta name="author" content="Jacob McDonnell"/>
+	<meta name="keywords" content="Jacob,McDonnell,Jacob McDonnell"/>
+	<title>Settings</title>
+        <link id="cssFile" href="CSS/main.css" rel="stylesheet" type="text/css">
+        <script src="JS/main.js"></script>
+        <script src="JS/cookies.js"></script>
+        <script src="JS/command.js"></script>
+    </head>
+    <body onkeydown="keyCode(event)" onload=" checkCookie()">
+        <aside id="NavBar">
+            <img src="images\menu.svg" id="menuicon" class="menuimg">
+            <nav>
+                <ul id="menuLinks">
+                    <p id="menuX" class="MenuX">X</p>
+                    <li><a href="https://jacobmcdonnell.com/">Home</a></li>
+                    <li><a href="https://jacobmcdonnell.com/morsecode/">Morse code</a></li>
+                    <li><a href="https://jacobmcdonnell.com/binary/" id="pLink">Binary</a></li>
+                    <li><a href="https://jacobmcdonnell.com/Pacman/" id="pLinks">Google Pacman</a></li>
+                    <li><a href="https://duckduckgo.com/">DuckDuckGo</a></li>
+                    <li><a href="https://mail.google.com/mail/?tab=wm&authuser=0&ogbl">Gmail</a></li>
+                    <li><a href="https://play.google.com/music/listen?authuser&u=0#/home">Google Play Music</a></li>
+                    <li><a href="https://photos.google.com/">Google Photos</a></li>
+                    <li><a href="https://domains.google.com/m/registrar/">Google Domains</a></li>
+                    <li><a href="https://drive.google.com/drive/u/0/my-drive">Google Drive</a></li>
+                    <li><a href="https://www.youtube.com">Youtube</a></li>
+                    <li><a href="https://www.github.com/">Github</a></li>
+                    <li><a href="https://8values.github.io/">8Values</a></li>
+                    <li><a href="https://www.politicalcompass.org/test/">Political Compass</a></li>
+                    <li><a href="https://www.twitch.tv/">Twitch</a></li>
+                    <li><a href="http://www.w3schools.com/html/default.asp">html tutorial</a></li>
+                    <li><a href="https://jacobmcdonnell.com/settings.html">Settings and Information</a></li>
+                </ul>
+            </nav>
+        </aside>
+        <main>
+            <center><h1>Settings and Information Page</h1></center>
+            <form id="themeForm">
+                <h2>Theme</h2>
+                <select name="themes">
+                    <option value="GreenAndWhite">Green and White</option>
+                    <option value="GreenAndDark">Green and Dark</option>
+                    <option value="PurpleAndWhite">Purple and White</option>
+                    <option value="PurpleAndDark">Purple and Dark</option>
+                </select><br><br>
+                <input type="submit">
+            </form>
+            <h2>About <a href="https://jacobmcdonnell.com/">JacobMcDonnell.com</a></h2>
+            <p>This is the personal website for the <strong>real</strong> Jacob McDonnell. Eventually this will switch to infomation about the <strong>real</strong> Jacob McDonnell. This website was designed and programmed by the <strong>real</strong> Jacob McDonnell.</p>
+            <h2>Cookie Policy</h2>
+            <p><a href="https://jacobmcdonnell.com/">JacobMcDonnell.com</a> uses <strong>ONE</strong> cookie to allow for the theme of the website to stay the same. The information stored in the cookie is the name of cookie, which is theme, the value of the cookie, which is the name of the theme, and is set to expire 365 days after the last vist of the site. The source code of the cookie can be found at <a href="https://jacobmcdonnell.com/JS/cookies.js" target="_blank">here</a>. There are <strong>ZERO</strong> third party cookies used with this site.</p>
+            <h2>Privacy Policy</h2>
+            <p><a href="https://jacobmcdonnell.com/">JacobMcDonnell.com</a> collects <strong>ZERO</strong> information from visitors of the website. The Source code for the website can be found at <a href="https://github.com/mcd223/mcd223.github.io" target="_blank">here</a>. However, <a href="https://jacobmcdonnell.com/">JacobMcDonnell.com</a> is hosted on github pages and is not responible for any of the information collected by them if any.</p>
+            <script>
+                const myForm = document.getElementById("themeForm");
+                myForm.addEventListener("submit", (e) => {
+                    var formData = new FormData(myForm);
+                    e.preventDefault();
+                    for(var value of formData.values()){
+                        console.log(value);
+                        setCookie("theme", value, 365);
+                        checkCookie();
+                    }
+                });
+            </script>
+        </main>
+    </body>
+</html>