Skip to content

Commit

Permalink
Home page added.
Browse files Browse the repository at this point in the history
  • Loading branch information
@clj13001
clj13001 committed Nov 15, 2016
1 parent b566408 commit 3f10975
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 74 deletions.
73 changes: 0 additions & 73 deletions html/ListingBootstrap.html
View file

This file was deleted.

9 changes: 9 additions & 0 deletions html/css/stylesheet.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body{
background-color: #94969A;
padding-top: 50px;
}

a.divlink{
color: black;
}

2 changes: 1 addition & 1 deletion html/ListingBootstrap.js → html/javascript/listing.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ function show(){

for(var i = 0; i < devices.length; i++){
if(type.localeCompare(devices[i].hardware) == 0 || type.localeCompare(devices[i].software) == 0){
html += '<div style="border: solid; border-width: thin; padding: 15px;"><div style = "display: inline-block; text-align: center;"><img src="imgs/' + devices[i].hardware + '.png" style="display: block;">' + devices[i].name + '</div><div style="display: inline-block; width: 200px; text-align: center; vertical-align: center;"><p>' + devices[i].description + '</p><button type="button" style="display: block; margin: auto;">Order device</button></div></div><br>'
html += '<div class = "deviceContainer"><div class = "imgContainer"><img src="../imgs/' + devices[i].hardware + '.png" class = "device">' + devices[i].name + '</div><div class = "deviceDescp"><p>' + devices[i].description + '</p><button class = "request" type="button">Order device</button></div></div><br>'
}
}

Expand Down
92 changes: 92 additions & 0 deletions html/webpages/homePage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>Synchrony Financial</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
<style>
div.menuOption{
display: inline-block;
width: 250px;
height: 150px;
vertical-align: top;
border: solid;
padding: 10px;
margin: 10px;
border-radius: 10px;
background-color: #E9EAEB;
}

div.menuBox{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -260px;
}
</style>

</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="../imgs/synchrony-financial-logo-dlpx.png" style = "height: 100%;"></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
<ul class="nav navbar-nav navbar-right">
<li><a href="homePage.html">Home</a></li>
<li><a href="requestPage.html">Request Device</a></li>
<li><a href="#">Return Device</a></li>
<li><a href="#">Device Listing</a></li>
<li><a href="#">User Information</a></li>
</ul>
</div>
</div>
</nav>

<div class = "menuBox">
<div>
<a class = "divlink" href = "requestPage.html">
<div class = "menuOption">
<h2>Request</h2>
<p>Check out our selection of devices that YOU have the chance to check out!</p>
</div>
</a>
<div class = "menuOption">
<h2>Return</h2>
<p>All set with a device? No problem! You can return it here!</p>
</div>
</div>
<div>
<div class = "menuOption">
<h2>All Items</h2>
<p>Just curious to see what devices we have to offer? You've come to the right place.</p>
</div>
<div class = "menuOption">
<h2>Data</h2>
<p>Interested in statistics related to this service? Check out this link!</p>
</div>
</div>
</div>

</body>
</html>
110 changes: 110 additions & 0 deletions html/webpages/requestPage.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">

<title>Synchrony Financial</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "../css/stylesheet.css">
<style>
div.displayDevice{
display: inline-block;
position: absolute;
padding-left: 30px;
}

div.deviceContainer{
border: solid;
border-width: thin;
padding: 15px;
background-color: #E9EAEB;
}

div.imgContainer{
display: inline-block;
text-align: center;
}

img.device{
display: block;
}

div.deviceDescp{
display: inline-block;
width: 200px;
text-align: center;
vertical-align: center;
}

button.request{
display: block;
margin: auto;
}

div.sidebar{
display: inline-block;
border-right-style: solid;
height: 100%;
width: 200px;
background-color: #E9EAEB;
}

ul.nav{
padding: 0px;
}
</style>
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="../imgs/synchrony-financial-logo-dlpx.png" style = "height: 100%"></a>
</div>
<div id="navbar" class="navbar-collapse collapse" aria-expanded="false">
<ul class="nav navbar-nav navbar-right">
<li><a href="homePage.html">Home</a></li>
<li><a href="requestPage.html">Request Device</a></li>
<li><a href="#">Return Device</a></li>
<li><a href="#">Device Listing</a></li>
<li><a href="#">User Information</a></li>
</ul>
</div>
</div>
</nav>
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<h4>Device Options</h4>
<li class = "option" data-type = "iphone"><a href="#">iPhones</a></li>
<li class = "option" data-type = "ipad"><a href="#">iPad</a></li>
<li class = "option" data-type = "computerStick"><a href="#">Computer Sticks</a></li>
</ul>
<br>
<ul class="nav nav-sidebar">
<h4>Operating Systems</h4>
<li class = "option" data-type = "intel"><a href="#">Intel</a></li>
<li class = "option" data-type = "apple"><a href="#">Apple</a></li>
</ul>
</div>

<div class = "displayDevice">
<h2>Available Devices</h2>
<div id = "devContainer"></div>
</div>

<script src="../javascript/listing.js"></script>
</body>
</html>

0 comments on commit 3f10975

Please sign in to comment.