Skip to content

Boodle
Boodle
Commit a0a5b25b authored by Felizia Tiburcio's avatar Felizia Tiburcio
Browse files
Options

cleaner frontend skeleton

parent 707af165
Show whitespace changes
Inline Side-by-side
Showing with 334 additions and 253 deletions
boodlesite/static/css/styles.css
View file @ a0a5b25b
html {
scroll-behavior: smooth;
}
body {
display: flex;
flex-direction: column;
margin: 0 auto;
height: 100%;
font-family: Archivo;
font-size: 11pt;
color: #3d3838;
}
......@@ -19,12 +24,9 @@ nav {
width: 100%;
transition: all 0.5s;
position: relative;
z-index: 1;
}
.fixed-nav nav {
position: fixed;
box-shadow 0 5px black;
display: flex;
justify-content: flex-end;
padding: 8px 16px;
}
nav ul {
......@@ -32,6 +34,8 @@ nav ul {
padding: 0;
list-style: none;
display: flex;
flex: 0 1 650px;
justify-content: space-evenly;
}
nav li {
......@@ -65,43 +69,69 @@ nav a {
/* nav bar end */
.footer-basic {
.footer {
background-color: black;
color: #f8edeb;
display: flex;
justify-content: center;
padding: 0rem 1rem;
}
.copyright {
.footer .copyright {
flex: 0 1 800px;
padding: 8px 24px;
padding: 1rem;
}
/* carousel */
.carousel-item {
position: relative !important;
}
.carousel-content {
position: absolute;
top: 40%;
left: 60%;
transform: translate(0%, -20%);
z-index: 20;
color: black;
text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
#btn-shop-now{
border-radius: 5%;
background-color:white;
padding: 0.5rem 1rem;
}
/* homepage about section */
.about-image {
display: flex;
height: 300px;
width: 200px;
padding: 40px 1px 40px 40px;
/*top right bottom left*/
@media(max-width:768px) {
.about-right {padding: 2rem 4rem; text-align:center;}
}
.about-text {
display: flex;
padding: 40px 0px 40px 100px;
.container-about {padding:2rem;}
.about-left {
display:flex; justify-content: center;
}
.about-left img {width:420px; height:420px; object-fit: cover; border-radius: 50%;}
.about-right {display:flex; align-items: center; padding: 2rem 4rem;
}
.text {
justify-content: flex-end;
text-align: right;
font-size: 20px;
.about-text {background-color: #f0f0f0; box-shadow:1rem 1rem #333fcd; padding:1rem 2rem;}
.about-text p { font-size: 18px; }
#btn-read-more {
border-radius: 5%;
background-color:rgb(255, 255, 255);
padding:1rem;
}
/* homepage happening now */
.title-container {
.header-container {
display: flex;
padding: 8px 32px;
padding: 1rem;
justify-content: center;
}
......@@ -117,13 +147,9 @@ nav a {
}
.event-container {
margin: 50px;
margin: 0rem 2.5rem 2.5rem 2.5rem;
display: flex;
justify-content: center;
background-color: #ffc2c2;
padding: 8px;
border: 2px dotted black;
margin: 32px;
}
.event {
......@@ -134,14 +160,20 @@ nav a {
.event img {
max-width: 100%;
height: 240px;
object-fit: cover;
}
.event-text {
padding: 16px;
text-align: center;
display:flex;
flex-direction:column;
justify-content: space-evenly;
}
.event-text h4 { color:black; font-size: 20px;}
.slick-prev:before {
color: black !important;
}
......@@ -189,8 +221,26 @@ nav a {
/* auction view */
.auction-left, .auction-right{
padding: 2rem 1rem;
}
.bid-header {
display: flex;
justify-content: space-between;
padding: 16px 0px;
}
#bid-amount {display:inline-block; }
.product-info {
padding: 8px 16px;
padding: 8px 16px 8px 0;
border: 2px dotted black;
}
.form-group.placebid {
text-align:center;
}
/* auction view end */
......@@ -277,7 +327,7 @@ nav a {
}
@media(max-width:600px) {
@media(max-width:768px) {
.store-item-container {
grid-template-columns: repeat(2, 1fr);
}
......@@ -294,6 +344,7 @@ nav a {
background-color: skyblue;
border: 2px dotted black;
}
.store-item img {
......@@ -303,9 +354,13 @@ nav a {
.item-info {
padding: 1rem 1rem 0 1rem;
text-align: center;
}
#item-name { color: black; font-size: 12pt; }
#item-price {color:black;}
.item-btns {
display: flex;
justify-content: flex-end;
......
boodlesite/templates/additem.html
View file @ a0a5b25b
......@@ -10,7 +10,7 @@
{% block content %}
<div class="container">
<h1>Add/Edit Item</h1>
<h1>{{ title }}</h1>
<div class="row">
<div class="col-lg-7 col-md-6">ITEM IMAGE CONTAINER
<div class="item-image-container"></div>
......
boodlesite/templates/auction.html
View file @ a0a5b25b
......@@ -11,12 +11,13 @@
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-6">
<div class="col-lg-7 col-md-6 auction-left">
<!-- Countdown display-->
<div class="test">
<!-- Format:
Auction ends at: <Date>
Time: <Days>, <Hours>, <Mins>, <Seconds> -->
<h2>{{auction_title}}</h2>
<h4> Auction ends at: {{ auction_end }} </h4>
</div>
......@@ -53,27 +54,53 @@
<!-- <img src="https://thumbs.dreamstime.com/b/toy-teddy-bear-isolated-white-background-40677685.jpg"> -->
</div>
<div class="col-lg-5 col-md-6">
<div class="col-lg-5 col-md-6 auction-right">
<div class="product-info" style="border: 2px dotted black;">
<div class="product-info" >
<h2>{{ item_name }} </h2>
<h4>Product Specifications</h4>
<p>{{ item_specs }}</p>
<p>Starting at: {{item_floor_price}}</p>
<h4>Starting at: ₱ {{item_floor_price}}</h4>
</div>
<!-- latest bids / history -->
<div class="bid-header">
<h1>Latest Bids </h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#placeBidModal"
data-whatever="@mdo">Place Bid</button>
</div>
<ul class="cards">
{% if auction_bids %}
{% for bid in auction_bids %}
<li><img src="" alt="">
<p>User offered <span id="bid-amount">₱{{ bid.amount }}</span></p>
<p> &nbsp | &nbsp </p>
<p>{{bid.bidtime | timesince}} ago </p>
</li>
{% endfor %}
{% else %}
<p> No bids have been placed for this item yet. Be the first!</p>
{% endif %}
</ul>
</div>
</div>
</div>
<div class="modal fade" id="placeBidModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<!-- modal -->
<div class="modal fade" id="placeBidModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Enter Bid</h5>
<h5 class="modal-title" id="exampleModalLabel">Enter Bid Amount</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
......@@ -81,8 +108,9 @@
<div class="modal-body">
<form action="" method="POST">
<div class="form-group">
<h3>Current Highest Bid: PHP {{highest_bid}}</h3>
<div class="form-group placebid">
<h5>Current Highest Bid: </h5>
<h3>PHP {{highest_bid}}</h3>
{% csrf_token %}
{{ form }}
</div>
......@@ -95,32 +123,7 @@
</form>
</div>
</div>
</div>
<!-- latest bids / history -->
<h1>Latest Bids</h1>
<ul class="cards">
{% if auction_bids %}
{% for bid in auction_bids %}
<li><img src="" alt="">
<p>User offered {{ bid.amount }}</p>
<p> &nbsp | &nbsp </p>
<p>{{bid.bidtime | timesince}} ago </p>
</li>
{% endfor %}
{% else %}
<h3> No bids have been placed for this item yet.</h3>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
\ No newline at end of file
boodlesite/templates/base.html
View file @ a0a5b25b
......@@ -2,37 +2,40 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<head>
<meta charset="utf-8">
<meta name='viewport' content='width=device-width'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Archivo">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'slick/slick.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'slick/slick-theme.css' %}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<title>{% block title %}{% endblock %}</title>
<style>
[class*="col"] {
background-color: pink;
border: 2px dotted black;
/* background-color: pink; */
/* border: 2px dotted skyblue; */
}
</style>
</head>
<body>
</head>
<body>
<nav id="main">
<ul>
<li class="logo"><a href="#">LOST.</a></li>
<li><a href="/">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Help</a></li>
......@@ -50,48 +53,25 @@
{% block scripts %}{% endblock %}
<div class="footer-basic">
<footer>
<div class="social"><a href="#"><i class="icon ion-social-instagram"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-facebook"></i></a></div>
<ul class="list-inline">
<li class="list-inline-item"><a href="/">Home</a></li>
<li class="list-inline-item"><a href="#">Services</a></li>
<li class="list-inline-item"><a href="#">About</a></li>
<li class="list-inline-item"><a href="#">Terms</a></li>
<li class="list-inline-item"><a href="#">Privacy Policy</a></li>
</ul>
<div class="footer">
<p class="copyright">Omengineers © 2022</p>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="{% static 'slick/slick.min.js' %}"></script>
<!-- <script>
// nav bar
const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;
function fixNav() {
console.log(topOfNav, window.scrollY);
if (window.scrollY >= topOfNav){
document.body.style.paddingTop = 0;
document.body.classList.add('fixed-nav');
} else {
document.body.classList.remove('fixed-nav');
}
}
window.addEventListener('scroll',fixNav);
</body>
</script> -->
</body>
</html>
\ No newline at end of file
boodlesite/templates/index.html
View file @ a0a5b25b
......@@ -10,17 +10,38 @@
{% block content %}
<!-- banner -->
<div id="container-fluid">
<div id="container-fluid banner">
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="First slide">
<img class="d-block w-100"
src="https://media.istockphoto.com/photos/face-cream-serum-lotion-moisturizer-and-sea-salt-among-bamboo-leaves-picture-id1136422297?k=20&m=1136422297&s=612x612&w=0&h=fk-Du8-BxBYn4rtint_HULFN5FpUWNeaBQye9DoSzpc="
alt="First slide">
<div class="carousel-content">
<h1>Welcome to Boodle.</h1>
<p>Your ultimate online auctioning platform.</p>
<button id="btn-shop-now" onclick="scrollDown()">Shop now</button>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Second slide">
<img class="d-block w-100"
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"
alt="Second slide">
<div class="carousel-content">
<h1>Slide 2.</h1>
<p>Lorem ipsum</p>
<button onclick="scrollDown()">Shop now</button>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80" alt="Third slide">
<img class="d-block w-100"
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80"
alt="Third slide">
<div class="carousel-content">
<h1>Slide 3.</h1>
<p>Lorem ipsum</p>
<button onclick="scrollDown()">Shop now</button>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
......@@ -34,21 +55,28 @@
</div>
</div>
<div class="title-container"><h1> About Us </h1></div>
<div class="container-fluid">
<div class="row">
<div class="col-8">
<div class="about-text">
<p class="text">Boodle was founded by 4 amaing talented software engineers, who are college studyents based in Metro Manila who go to Ateneo de Manila University. They believe they can change status quo of the ecommerce world. And they did. </p>
<div class="container-fluid about">
<div class="row container-about">
<div class="col-lg-5 col-md-6 about-left">
<img src="https://media.istockphoto.com/vectors/mobile-shopping-vector-id1152401093?b=1&k=20&m=1152401093&s=612x612&w=0&h=rE_UnLvBcOmq32s4mX0mZSaidfeGkgLOe5EiI7DbJ4Q=">
</div>
<div class="col-lg-7 col-md-6 about-right">
<div class="about-text">
<h1> About Us </h1>
<p>Boodle was founded by a group of four talented software engineers, who are currently Computer Science students
in Ateneo de Manila University. They believed they could change the status quo
of the e-commerce world—and with Boodle, they did. </p>
<button id="btn-read-more">Read more</button>
</div>
<div class="col about-image">
<img src="../static/media/dancinginthekitchen.jpg">
</div>
</div>
</div>
<div class="title-container"><h1> Happening Now </h1></div>
<div class="header-container">
<h1> Happening Right Now </h1>
</div>
<div class="event-container">
{% if auctions_now %}
......@@ -59,20 +87,23 @@
<div class="event-text">
<a href="{% url 'auctionid' auction.auctionid %}">
<h3>{{ auction.title }}</h3>
<h4>{{ auction.title }}</h4>
</a>
<p>{{ auction.info }}</p>
<p><i>Ends on {{auction.auctionend}}</i></p>
</div>
</div>
{% endfor %}
{% else %}
<h3> no auctions happening yet.</h3>
<p> No auctions currently happening.</p>
{% endif %}
</div>
</div>
<div class="title-container"><h1> Upcoming Events </h1></div>
<div class="header-container">
<h1> Upcoming Events </h1>
</div>
<div class="event-container">
{% if auctions_soon %}
......@@ -90,13 +121,13 @@
</div>
{% endfor %}
{% else %}
<h3> no auctions happening soon.</h3>
<p> No auctions happening soon.</p>
{% endif %}
</div>
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('.event-container').slick({
dots: true,
infinite: false,
......@@ -136,8 +167,15 @@
// settings: "unslick"
// instead of a settings object
]
});
});
});
});
function scrollDown() {
const element = document.getElementsByClassName("header-container");
element[0].scrollIntoView();
console.log('scroll')
}
</script>
{% endblock %}
\ No newline at end of file
boodlesite/templates/store.html
View file @ a0a5b25b
......@@ -39,18 +39,19 @@
<div class="store-item">
<img src="https://www.kurin.com/wp-content/uploads/placeholder-square.jpg">
<div class="item-info">
<h4>{{ item.itemname }}</h4>
<p>{{item.itemspecs}} <span class="item-price">PHP {{item.floorprice}}</span></p>
<h4 id="item-name">{{ item.itemname }}</h4>
<p id="item-price">₱ {{item.floorprice}} </p>
</div>
<div class="item-btns"> <button>Auction</button> <button><a href="{% url 'edititemid' item.itemid %}">Edit</a></button>
<div class="item-btns"> <button>Auction</button> <button><a
href="{% url 'edititemid' item.itemid %}">Edit</a></button>
<!-- <button>Delete</button> -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#delete_{{ item.itemid }}"
data-whatever="@mdo">Delete</button>
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target="#delete_{{ item.itemid }}" data-whatever="@mdo">Delete</button>
<div class="modal fade" id="delete_{{ item.itemid }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal fade" id="delete_{{ item.itemid }}" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
......
main/views.py
View file @ a0a5b25b
......@@ -54,8 +54,8 @@ def auction(request, pk):
new_bid = AuctionBid(amount=amount,bidtime=datetime.now(),auctionid=auction)
new_bid.save()
return redirect(f"/auction/{pk}")
except:
pass
except Exception as e:
print("Error:", e)
context = {
......@@ -64,6 +64,7 @@ def auction(request, pk):
'auction_bids' : auction_bids,
'item_floor_price': auction_item.floorprice,
'highest_bid': highest_bid,
'auction_title': auction.title,
'auction_end': auction.auctionend,
'form' : form,
}
......@@ -139,6 +140,7 @@ def addItem(request, pk):
context = {
'form':form,
'title': 'List new item',
'current_store': current_store # access to store 1
}
......@@ -158,6 +160,7 @@ def editItem(request, pk):
context = {
'form':form,
'title': 'Edit item information'
}
return render(request, "boodlesite/templates/additem.html", context)
......
requirements.txt
View file @ a0a5b25b
......@@ -3,5 +3,6 @@ Django==4.0.3
Pillow==9.0.1
psycopg2==2.9.3
python-dotenv==0.19.2
pytz==2022.1
sqlparse==0.4.2
tzdata==2021.5
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment