182 pages/profile.html 100644 → 100755
View file
@@ -2,176 +2,9 @@
<html>
<head>
<title>Endor | Profile Page</title>
<link rel="stylesheet" type="text/css" href="/style">
<link rel="stylesheet" type="text/css" href="/css/homeStyle.css">
<link rel="stylesheet" type="text/css" href="/css/profileStyle.css">
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<style>
/* Hides Scrollbar */
::-webkit-scrollbar {
display: none;
}
body{
margin: 0;
background-color: #212338;
overflow-x: hidden;
}
#homeBg{
background-color: #212338;
height: 100vh;
width: 100vw;
}
#parallaxBg{
background: url(https://media.giphy.com/media/1lRrsraIsEYRW/giphy.gif);
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
#homeHeader{
width: 100vw;
height: 75px;
background-color: #212338;
vertical-align: top;
position: absolute;
top:0;
z-index: 5;
}
#homeLogo{
height: 75px;
width: 75px;
/*
border : 1px solid;
border-radius: 75px;
*/
display: inline-block;
float:left;
transition: 0.5s;
}
#login{
width: 55px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
transition: 0.5s;
top:0;
right:220px;
margin: 10px 0 0 10px;
}
#support{
width: 70px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
top:0;
right:125px;
transition: 0.5s;
margin: 10px 0 0 10px;
}
#cart{
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
transition: 0.5s;
top:0;
right:50px;
margin: 10px 0 0 10px;
}
/*Menu Section*/
#welcomeBanner{
text-align: center;
vertical-align: middle;
width: 50%;
height: 300px;
margin: 0 auto;
top:20vh;
z-index: 5;
font: 400 75px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* Kelvin's code */
#welcomeText {
text-align: center;
vertical-align: middle;
margin: 0 auto;
top: 40vh;
width: 125px;
height: 50px;
background-color: transparent;
font: 400 25px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#custInfo {
text-align: left;
vertical-align: left;
top: 45vh;
left: 4vw;
background-color: transparent;
font: 400 25px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#changePass {
text-align: center;
vertical-align: middle;
margin: 0 auto;
top: 30vh;
width: 250px;
height: 50px;
background-color: transparent;
font: 400 25px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#ordersBg{
text-align: center;
vertical-align: middle;
height: 100vh;
width: 100vw;
top:35vh;
background-color: yellow;
background: url(http://2geekswhoeat.com/wp-content/uploads/2017/04/Rogue-One-Party-1.jpg);
background-size: cover;
position: absolute;
}

#ordersText {
text-align: center;
vertical-align: middle;
margin: 0 auto;
top: 10vh;
width: 500px;
height: 50px;
background-color: transparent;
font: 400 40px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}
</style>
</head>

<body>
@@ -182,18 +15,19 @@
<div id="homeHeader" class="header parallax__layer parallax__fg">
<div id="homeLogo" class="kit">ENDOR LOGO</div>
<div id="login" class="kit">LOGIN</div>
<div id="profile" class="kit">PROFILE</div>
<div id="support" class="kit">SUPPORT</div>
<div id="cart" class="kit">CART</div>
</div>

<div id="welcomeBanner" class="parallax__layer parallax__fg">PROFILE PAGE</div>
<div id="profileWelcome" class="parallax__layer parallax__fg">PROFILE PAGE</div>

<div id="welcomeText" class="parallax__layer parallax__fg">Welcome!<span id="username"></span></div>

<div id="custInfo" class="parallax__layer parallax__fg">
<p>E-mail:</p>
<p>Location:</p>
<p>Type:</p>
<p>E-mail:</p><div id="email"></div>
<p>Location:</p><div id="location"></div>
<p>Type:</p><div id="type"></div>
<div id="changePass" class="parallax__layer parallax__fg scroll">Change password</div>
</div>
</div>
@@ -205,7 +39,7 @@
</div>
</div>

<script src='/builder/homebundle.js'></script>
<script src='/builder/profilebundle.js'></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function(){
17 style/homeStyle.css 100644 → 100755
View file
@@ -199,9 +199,24 @@ body{
position: absolute;
transition: 0.5s;
top:0;
right:220px;
right:315px;
margin: 10px 0 0 10px;
}
#profile{
width: 70px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
top:0;
right:220px;
transition: 0.5s;
margin: 10px 0 0 10px;
}
#support{
width: 70px;
height: 50px;
144 style/loginStyle.css
View file
@@ -0,0 +1,144 @@
/* Top Section */

#homeLogo{
height: 75px;
width: 75px;
/*
border : 1px solid;
border-radius: 75px;
*/
display: inline-block;
float:left;
transition: 0.5s;
}

#what{
width: 55px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
transition: 0.5s;
top:0;
right:220px;
margin: 10px 0 0 10px;
}

#support{
width: 70px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
top:0;
right:125px;
transition: 0.5s;
margin: 10px 0 0 10px;
}
#cart{
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: aliceblue;
display:inline-block;
position: absolute;
transition: 0.5s;
top:0;
right:50px;
margin: 10px 0 0 10px;
}

/* Login Section */

#randomBox {
display:none;
}

#startBox{
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
line-height: 50px;
text-shadow: 1px 1px grey;
color: orange;
display:inline-block;
position: absolute;
transition: 0.5s;
top:100px;
left:40vw;
margin: 10px 0 0 10px;
}

#email{
font-size: 18px;
}

#pass{
font-size: 18px;
}

#loginBut {
background-color: #4CAF50; /* Green */
border: 2px solid #000000; /* Blue */
color: white;
padding: 15px 32px;
position:relative;
top:50%;
left:100%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
border-radius: 8px;
transition-duration: 0.4s;
}

#loginBut:hover {
background-color: #0042FF; /* Blue */
color: white;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

#loginBut:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}

/* Register Below Section */


#regBelow{
width: 50vw;
height: 50px;
line-height: 50px;
text-shadow: 1px 1px grey;
color: orange;
display:inline-block;
position: relative;
transition: 0.5s;
left: -250px;
margin: 100px 0px 0px 0px;
}

#registerText{
font-size: 20px;
}

#registerBut{
width: 100px;
font-size: 20px;
position: relative;
}
83 style/profileStyle.css
View file
@@ -0,0 +1,83 @@
/* Kelvin's code */
#profileWelcome{
text-align: center;
vertical-align: middle;
width: 50%;
height: 300px;
margin: 0 auto;
top:20vh;
z-index: 5;
font: 400 75px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

#welcomeText {
text-align: center;
vertical-align: middle;
margin: 0 auto;
top: 40vh;
width: 125px;
height: 50px;
background-color: transparent;
font: 400 25px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#custInfo {
text-align: left;
vertical-align: left;
top: 45vh;
left: 4vw;
background-color: transparent;
font: 400 25px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#changePass {
text-align: center;
vertical-align: middle;
margin: 0 auto;
top: 30vh;
width: 250px;
height: 50px;
background-color: transparent;
font: 400 25px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#ordersBg{
text-align: center;
vertical-align: middle;
height: 100vh;
width: 100vw;
top:35vh;
background-color: yellow;
background: url(http://2geekswhoeat.com/wp-content/uploads/2017/04/Rogue-One-Party-1.jpg);
background-size: cover;
position: absolute;
}

#ordersText {
text-align: center;
vertical-align: middle;
margin: 0 auto;
top: 10vh;
width: 500px;
height: 50px;
background-color: transparent;
font: 400 40px/1.3 'Oleo Script', Helvetica, sans-serif;
color: yellow;
text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
z-index: 6;
}

#email{
color: lawngreen;
}
4 webpack.config.js
View file
@@ -7,7 +7,9 @@ var bF = path.resolve(__dirname, "build");
var config = {
entry: {
"home":sF+"/home.js",
"menu":sF+"/menu.js"
"menu":sF+"/menu.js",
"login":sF+"/login.js",
"profile":sF+"/profile.js"
},
output:{
filename:"[name]bundle.js",