first commit
This commit is contained in:
Joshua Perry
commit
4b470368a8
|
|
@ -0,0 +1,45 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>
|
||||||
|
<?php
|
||||||
|
echo $pageTitle
|
||||||
|
?>
|
||||||
|
</title>
|
||||||
|
<link rel="stylesheet" href="assets/ibuy.css" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1><a href="index.php"><span class="i">i</span><span class="b">b</span><span class="u">u</span><span class="y">y</span></a></h1>
|
||||||
|
|
||||||
|
<form action="#">
|
||||||
|
<input type="text" name="search" placeholder="Search for anything" />
|
||||||
|
<input type="submit" name="submit" value="Search" />
|
||||||
|
</form>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav> <!--TODO: Populate this list from the categories defined by the admins-->
|
||||||
|
<ul>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Home+%26+Garden">Home & Garden</a></li>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Electronics">Electronics</a></li>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Fashion">Fashion</a></li>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Sport">Sport</a></li>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Health">Health</a></li>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Toys">Toys</a></li>
|
||||||
|
<li><a class="categoryLink" href="index.php?pageHeading=Motors">Motors</a></li>
|
||||||
|
<li><a class="categoryLink" href="categories.php">More</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<img src="../assets/banners/1.jpg" alt="Banner" />
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<?php
|
||||||
|
echo $pageContent;
|
||||||
|
?>
|
||||||
|
<footer>
|
||||||
|
© ibuy 2019
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
|
|
@ -0,0 +1,196 @@
|
||||||
|
/* Import website font */
|
||||||
|
@import url('https://stockfont.org/?3e1218d9a01517d5734a1be9e67be4af797abff1230ab272235ec8ed759251d6');
|
||||||
|
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body { font-family: 'Oxygen-Regular', sans-serif; background-color: #f6f5f4; max-width: 100vw; overflow-x: hidden;}
|
||||||
|
h1, h2, h3, h4 { font-weight: normal; }
|
||||||
|
|
||||||
|
a, a:visited {color: #444;}
|
||||||
|
a:hover {text-decoration: underline; color: #222;}
|
||||||
|
header {
|
||||||
|
margin-top: 1vw;
|
||||||
|
font-family: 'Univers-Light-Normal';
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 15% 85%;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 1vw;
|
||||||
|
padding-bottom: 1vw;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 5em;
|
||||||
|
}
|
||||||
|
form {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
header form input[type=text] {
|
||||||
|
border: 3px solid black;
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > img { width: 100vw; }
|
||||||
|
|
||||||
|
header form input[type=submit] {
|
||||||
|
background-color: #3665f3;
|
||||||
|
color: white;
|
||||||
|
width: 20%;
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 0.5em;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .i {
|
||||||
|
color: #e43137;
|
||||||
|
}
|
||||||
|
header .b {
|
||||||
|
color: #0063d1;
|
||||||
|
}
|
||||||
|
header .u {
|
||||||
|
color: #f4ae01;
|
||||||
|
}
|
||||||
|
header .y {
|
||||||
|
color: #85b716;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav {
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
body > nav ul li:last-child a:after {content: 'ˬ'; position: absolute;}
|
||||||
|
|
||||||
|
body > nav ul {
|
||||||
|
display: flex;
|
||||||
|
width: 100vw;
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul li {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > nav ul li a {
|
||||||
|
display: block; text-align: center;
|
||||||
|
padding-top: 0.5vw;
|
||||||
|
padding-bottom: 0.5vw;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productList {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productList li {
|
||||||
|
padding: 2vw;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 18% 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productList img {width: auto; display: block; max-width: 10vw;}
|
||||||
|
|
||||||
|
p.price {display: block; text-align: right; font-weight: bold; font-size: 2em;}
|
||||||
|
a.more {display: block; text-align: right; font-weight: bold; float: right; background-color: #3665f3;
|
||||||
|
color: white;
|
||||||
|
|
||||||
|
font-size: 2em;
|
||||||
|
padding: 0.5em;
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
main {padding: 3vw; display: block; overflow: hidden; width: 80vw; margin: auto; border-left: 2px solid #ddd; border-right: 2px solid #ddd;}
|
||||||
|
|
||||||
|
article.product {
|
||||||
|
display: grid;
|
||||||
|
griid-template-columns: 60% 40%;
|
||||||
|
grid-template-areas: "img details"
|
||||||
|
"description description"
|
||||||
|
"reviews reviews"
|
||||||
|
}
|
||||||
|
|
||||||
|
article.product img {
|
||||||
|
grid-area: img;
|
||||||
|
}
|
||||||
|
|
||||||
|
main h1 {margin-top: 5vw; margin-bottom: 5vw;}
|
||||||
|
article .details {
|
||||||
|
grid-area: details;
|
||||||
|
}
|
||||||
|
|
||||||
|
article .reviews {
|
||||||
|
grid-area: reviews;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {width: 100%; height: 20em;}
|
||||||
|
.reviews form {margin-top: 5em;}
|
||||||
|
.reviews ul {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
.reviews li{
|
||||||
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
article .description {
|
||||||
|
grid-area: description;
|
||||||
|
padding-top: 3em;
|
||||||
|
padding-bottom: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {color: red;}
|
||||||
|
article.product .price {text-align: left;}
|
||||||
|
|
||||||
|
footer {margin-top: 5vw; border-top: 1px solid #ddd;}
|
||||||
|
|
||||||
|
time {display: block; margin: 1em 0;}
|
||||||
|
main form {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.details p {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
main form label, main form input {
|
||||||
|
flex-grow: 1;
|
||||||
|
width: 20vw;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
margin-right: 2vw;
|
||||||
|
margin-left: 2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bid {
|
||||||
|
margin-top: 2em;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bid input {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main form input[type=submit] {
|
||||||
|
background-color: #3665f3;
|
||||||
|
color: white;
|
||||||
|
flex-grow: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 1.2em;
|
||||||
|
padding: 0.2em;
|
||||||
|
cursor: pointer;
|
||||||
|
border: 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,98 @@
|
||||||
|
|
||||||
|
|
||||||
|
<h1>Latest Listings / Search Results / Category listing</h1>
|
||||||
|
|
||||||
|
<ul class="productList">
|
||||||
|
<li>
|
||||||
|
<img src="product.png" alt="product name">
|
||||||
|
<article>
|
||||||
|
<h2>Product name</h2>
|
||||||
|
<h3>Product category</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ornare purus, non laoreet dolor sagittis id. Vestibulum lobortis laoreet nibh, eu luctus purus volutpat sit amet. Proin nec iaculis nulla. Vivamus nec tempus quam, sed dapibus massa. Etiam metus nunc, cursus vitae ex nec, scelerisque dapibus eros. Donec ac diam a ipsum accumsan aliquet non quis orci. Etiam in sapien non erat dapibus rhoncus porta at lorem. Suspendisse est urna, egestas ut purus quis, facilisis porta tellus. Pellentesque luctus dolor ut quam luctus, nec porttitor risus dictum. Aliquam sed arcu vehicula, tempor velit consectetur, feugiat mauris. Sed non pellentesque quam. Integer in tempus enim.</p>
|
||||||
|
|
||||||
|
<p class="price">Current bid: £123.45</p>
|
||||||
|
<a href="#" class="more auctionLink">More >></a>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="product.png" alt="product name">
|
||||||
|
<article>
|
||||||
|
<h2>Product name</h2>
|
||||||
|
<h3>Product category</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ornare purus, non laoreet dolor sagittis id. Vestibulum lobortis laoreet nibh, eu luctus purus volutpat sit amet. Proin nec iaculis nulla. Vivamus nec tempus quam, sed dapibus massa. Etiam metus nunc, cursus vitae ex nec, scelerisque dapibus eros. Donec ac diam a ipsum accumsan aliquet non quis orci. Etiam in sapien non erat dapibus rhoncus porta at lorem. Suspendisse est urna, egestas ut purus quis, facilisis porta tellus. Pellentesque luctus dolor ut quam luctus, nec porttitor risus dictum. Aliquam sed arcu vehicula, tempor velit consectetur, feugiat mauris. Sed non pellentesque quam. Integer in tempus enim.</p>
|
||||||
|
|
||||||
|
<p class="price">Current bid: £123.45</p>
|
||||||
|
<a href="#" class="more auctionLink">More >></a>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<img src="product.png" alt="product name">
|
||||||
|
<article>
|
||||||
|
<h2>Product name</h2>
|
||||||
|
<h3>Product category</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ornare purus, non laoreet dolor sagittis id. Vestibulum lobortis laoreet nibh, eu luctus purus volutpat sit amet. Proin nec iaculis nulla. Vivamus nec tempus quam, sed dapibus massa. Etiam metus nunc, cursus vitae ex nec, scelerisque dapibus eros. Donec ac diam a ipsum accumsan aliquet non quis orci. Etiam in sapien non erat dapibus rhoncus porta at lorem. Suspendisse est urna, egestas ut purus quis, facilisis porta tellus. Pellentesque luctus dolor ut quam luctus, nec porttitor risus dictum. Aliquam sed arcu vehicula, tempor velit consectetur, feugiat mauris. Sed non pellentesque quam. Integer in tempus enim.</p>
|
||||||
|
|
||||||
|
<p class="price">Current bid: £123.45</p>
|
||||||
|
<a href="#" class="more auctionLink">More >></a>
|
||||||
|
</article>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<h1>Product Page</h1>
|
||||||
|
<article class="product">
|
||||||
|
|
||||||
|
<img src="product.png" alt="product name">
|
||||||
|
<section class="details">
|
||||||
|
<h2>Product name</h2>
|
||||||
|
<h3>Product category</h3>
|
||||||
|
<p>Auction created by <a href="#">User.Name</a></p>
|
||||||
|
<p class="price">Current bid: £123.45</p>
|
||||||
|
<time>Time left: 8 hours 3 minutes</time>
|
||||||
|
<form action="#" class="bid">
|
||||||
|
<input type="text" name="bid" placeholder="Enter bid amount" />
|
||||||
|
<input type="submit" value="Place bid" />
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<section class="description">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ornare purus, non laoreet dolor sagittis id. Vestibulum lobortis laoreet nibh, eu luctus purus volutpat sit amet. Proin nec iaculis nulla. Vivamus nec tempus quam, sed dapibus massa. Etiam metus nunc, cursus vitae ex nec, scelerisque dapibus eros. Donec ac diam a ipsum accumsan aliquet non quis orci. Etiam in sapien non erat dapibus rhoncus porta at lorem. Suspendisse est urna, egestas ut purus quis, facilisis porta tellus. Pellentesque luctus dolor ut quam luctus, nec porttitor risus dictum. Aliquam sed arcu vehicula, tempor velit consectetur, feugiat mauris. Sed non pellentesque quam. Integer in tempus enim.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="reviews">
|
||||||
|
<h2>Reviews of User.Name </h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Ali said </strong> great ibuyer! Product as advertised and delivery was quick <em>29/09/2019</em></li>
|
||||||
|
<li><strong>Dave said </strong> disappointing, product was slightly damaged and arrived slowly.<em>22/07/2019</em></li>
|
||||||
|
<li><strong>Susan said </strong> great value but the delivery was slow <em>22/07/2019</em></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<label>Add your review</label> <textarea name="reviewtext"></textarea>
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Add Review" />
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
<h1>Sample Form</h1>
|
||||||
|
|
||||||
|
<form action="#">
|
||||||
|
<label>Text box</label> <input type="text" />
|
||||||
|
<label>Another Text box</label> <input type="text" />
|
||||||
|
<input type="checkbox" /> <label>Checkbox</label>
|
||||||
|
<input type="radio" /> <label>Radio</label>
|
||||||
|
<input type="submit" value="Submit" />
|
||||||
|
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
© ibuy 2019
|
||||||
|
</footer>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
|
|
@ -0,0 +1,34 @@
|
||||||
|
<?php
|
||||||
|
//Listing display page. Display the 10 auctions finishing soonest
|
||||||
|
//Can be used for index, search page, and category listing
|
||||||
|
|
||||||
|
$pageTitle = 'iBuy - Home';
|
||||||
|
|
||||||
|
if (isset($_GET['pageHeading'])) {
|
||||||
|
$pageHeading = $_GET['pageHeading'];
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$pageHeading = 'Latest Listings';
|
||||||
|
}
|
||||||
|
|
||||||
|
$pageContent = '<h1>'.$pageHeading.'</h1>
|
||||||
|
<ul class="productList">'.populateList().'</ul>';
|
||||||
|
require '../layout.php';
|
||||||
|
|
||||||
|
function populateList() { //TODO: This will need to be updated to populate from the database
|
||||||
|
$output = '';
|
||||||
|
for ($i = 0; $i <= 10; $i++) {
|
||||||
|
$output .= '<li>
|
||||||
|
<img src="assets/product.png" alt="product name">
|
||||||
|
<article>
|
||||||
|
<h2>Product name</h2>
|
||||||
|
<h3>Product category</h3>
|
||||||
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ornare purus, non laoreet dolor sagittis id. Vestibulum lobortis laoreet nibh, eu luctus purus volutpat sit amet. Proin nec iaculis nulla. Vivamus nec tempus quam, sed dapibus massa. Etiam metus nunc, cursus vitae ex nec, scelerisque dapibus eros. Donec ac diam a ipsum accumsan aliquet non quis orci. Etiam in sapien non erat dapibus rhoncus porta at lorem. Suspendisse est urna, egestas ut purus quis, facilisis porta tellus. Pellentesque luctus dolor ut quam luctus, nec porttitor risus dictum. Aliquam sed arcu vehicula, tempor velit consectetur, feugiat mauris. Sed non pellentesque quam. Integer in tempus enim.</p>
|
||||||
|
<p class="price">Current bid: £123.45</p>
|
||||||
|
<a href="listing.php" class="more auctionLink">More >></a>
|
||||||
|
</article>
|
||||||
|
</li>';
|
||||||
|
}
|
||||||
|
return $output;
|
||||||
|
}
|
||||||
|
?>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
<?php
|
||||||
|
$pageTitle = 'iBuy - Product Listing';
|
||||||
|
//TODO: have page populate information based on listing in the database
|
||||||
|
$pageContent = '<h1>Product Page</h1>
|
||||||
|
<article class="product">
|
||||||
|
|
||||||
|
<img src="product.png" alt="product name">
|
||||||
|
<section class="details">
|
||||||
|
<h2>Product name</h2>
|
||||||
|
<h3>Product category</h3>
|
||||||
|
<p>Auction created by <a href="#">User.Name</a></p>
|
||||||
|
<p class="price">Current bid: £123.45</p>
|
||||||
|
<time>Time left: 8 hours 3 minutes</time>
|
||||||
|
<form action="#" class="bid">
|
||||||
|
<input type="text" name="bid" placeholder="Enter bid amount" />
|
||||||
|
<input type="submit" value="Place bid" />
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
<section class="description">
|
||||||
|
<p>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales ornare purus, non laoreet dolor sagittis id. Vestibulum lobortis laoreet nibh, eu luctus purus volutpat sit amet. Proin nec iaculis nulla. Vivamus nec tempus quam, sed dapibus massa. Etiam metus nunc, cursus vitae ex nec, scelerisque dapibus eros. Donec ac diam a ipsum accumsan aliquet non quis orci. Etiam in sapien non erat dapibus rhoncus porta at lorem. Suspendisse est urna, egestas ut purus quis, facilisis porta tellus. Pellentesque luctus dolor ut quam luctus, nec porttitor risus dictum. Aliquam sed arcu vehicula, tempor velit consectetur, feugiat mauris. Sed non pellentesque quam. Integer in tempus enim.</p>
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="reviews">
|
||||||
|
<h2>Reviews of User.Name </h2>
|
||||||
|
<ul>
|
||||||
|
<li><strong>Ali said </strong> great ibuyer! Product as advertised and delivery was quick <em>29/09/2019</em></li>
|
||||||
|
<li><strong>Dave said </strong> disappointing, product was slightly damaged and arrived slowly.<em>22/07/2019</em></li>
|
||||||
|
<li><strong>Susan said </strong> great value but the delivery was slow <em>22/07/2019</em></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<form>
|
||||||
|
<label>Add your review</label> <textarea name="reviewtext"></textarea>
|
||||||
|
|
||||||
|
<input type="submit" name="submit" value="Add Review" />
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
|
</article>';
|
||||||
|
require '../layout.php'
|
||||||
|
?>
|
||||||
Loading…
Reference in New Issue