Added dropdown on shopping nav bar and billing address page
This commit is contained in:
CodeServer
parent
55d93358c3
commit
916892fa1e
34
footer.html
34
footer.html
@ -1,34 +0,0 @@
|
||||
<footer class="sectionMain">
|
||||
<div class="w3-third">
|
||||
<h3>FOOTER</h3>
|
||||
<p>Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
|
||||
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
|
||||
</div>
|
||||
|
||||
<div class="w3-third">
|
||||
<h3>BLOG POSTS</h3>
|
||||
<ul class="w3-ul w3-hoverable">
|
||||
<li class="w3-padding-16">
|
||||
<img src="/w3images/workshop.jpg" class="w3-left w3-margin-right" style="width:50px">
|
||||
<span class="w3-large">Lorem</span><br>
|
||||
<span>Sed mattis nunc</span>
|
||||
</li>
|
||||
<li class="w3-padding-16">
|
||||
<img src="/w3images/gondol.jpg" class="w3-left w3-margin-right" style="width:50px">
|
||||
<span class="w3-large">Ipsum</span><br>
|
||||
<span>Praes tinci sed</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="w3-third w3-serif">
|
||||
<h3>POPULAR TAGS</h3>
|
||||
<p>
|
||||
<span class="w3-tag w3-black w3-margin-bottom">Travel</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">New York</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dinner</span>
|
||||
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Salmon</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">France</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Drinks</span>
|
||||
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Ideas</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Flavors</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Cuisine</span>
|
||||
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Chicken</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Dressing</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fried</span>
|
||||
<span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Fish</span> <span class="w3-tag w3-dark-grey w3-small w3-margin-bottom">Duck</span>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
@ -33,4 +33,15 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</footer>
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>-->
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="../bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="../style/style.js"></script>
|
||||
21
index.php
21
index.php
@ -184,6 +184,7 @@
|
||||
</div>
|
||||
|
||||
<div class="sectionDocumentation" id="index-sectionDocumentation">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<h1>Instruction</h1>
|
||||
@ -191,18 +192,14 @@
|
||||
</div>
|
||||
<p> This is the webpage of a dessert bar.<br>
|
||||
People need to log in to order. Before logging in, you can browse the menu page first. On the menu page, you can click to enlarge the picture.<br>
|
||||
There is a login button in the upper right corner of the page. On the login page, if you do not have an account, you should register an account.<br>
|
||||
On the login page, if you do not have an account, you should register an account.<br>
|
||||
After logging in, you can click on one of the pictures of desserts, and then select the quantity you want.<br>
|
||||
Unfortunately, I don’t have enough time to complete all the functions of the shopping cart. This website can only display the products that the user has just added.</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="footer">
|
||||
<p> @ Created by KCHU · 2021 </p>
|
||||
</div>
|
||||
</div>
|
||||
</p>
|
||||
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2605.827007455358!2d-123.14033818373676!3d49.22280778293132!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x54867485c515efbb%3A0xf3b09cc69214b862!2s1419%20W%2053rd%20Ave%2C%20Vancouver%2C%20BC%20V6P%201L2!5e0!3m2!1sen!2sca!4v1627983377168!5m2!1sen!2sca" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
|
||||
</div>
|
||||
|
||||
<?php include_once 'footer.php'?>
|
||||
|
||||
<!-- Modal -->
|
||||
|
||||
<!-- LogIn Modal -->
|
||||
@ -306,12 +303,6 @@
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Optional JavaScript; choose one of the two! -->
|
||||
|
||||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||||
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>-->
|
||||
|
||||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
|
||||
<script src="bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
|
||||
|
||||
7
php/logged_in_header.php
Normal file
7
php/logged_in_header.php
Normal file
@ -0,0 +1,7 @@
|
||||
<?php
|
||||
session_start();
|
||||
if(!isset($_SESSION['username'])) {
|
||||
header('Location: ../index.php');
|
||||
exit();
|
||||
}
|
||||
?>
|
||||
@ -93,8 +93,9 @@
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<div class="">
|
||||
<input type="submit" value="Go To Checkout" name="placeorder">
|
||||
<div class="d-grid gap-2 col-4 mx-auto">
|
||||
<button class="btn btn-primary cart_button_1" type="button"> ❮ Continue Shopping</button>
|
||||
<input class="btn btn-primary cart_button_2" type="submit" value="Go To Checkout" name="placeorder">
|
||||
</div>
|
||||
|
||||
<?php $products = getProducts($_SERVER["QUERY_STRING"],$conn); ?>
|
||||
@ -104,8 +105,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<?php include '../footer.html' ?>
|
||||
|
||||
</div>
|
||||
<?php include '../footer.php' ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -68,7 +68,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<?php include_once '../footer.php'?>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
@ -3,11 +3,7 @@
|
||||
<?php
|
||||
require_once '../php/connection.php';
|
||||
$conn = connectMysql();
|
||||
session_start();
|
||||
if(!isset($_SESSION['username'])) {
|
||||
header('Location: ../index.php');
|
||||
exit();
|
||||
}
|
||||
require_once '../php/logged_in_header.php';
|
||||
?>
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
@ -94,8 +90,8 @@
|
||||
|
||||
</div>
|
||||
|
||||
<?php include_once 'footer.php'?>
|
||||
|
||||
<?php include_once '../footer.php'?>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,9 +1,21 @@
|
||||
<div class="shopping_headerNav">
|
||||
<div class="col-xl-12" id="shopping_headerImg">
|
||||
<span id="span-shopping-username" ><i class="fas fa-user-circle"></i> Username <?php echo $_SESSION['username']; ?></span>
|
||||
<form action="../php/logout.php" method="post">
|
||||
<button class="btn btn-lg my-btn" type="submit" id="btn-shopping-logout"> LOGOUT</button>
|
||||
</form>
|
||||
<img id="headerImg" src="../img/headerImg.jpg">
|
||||
<div class="row">
|
||||
<div class="col-xl-12" id="shopping_headerImg">
|
||||
<!-- <span id="span-shopping-username" ><i class="fas fa-user-circle"></i> Username <?php echo $_SESSION['username']; ?></span> -->
|
||||
<div class="dropdown">
|
||||
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="span-shopping-username" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<?php echo $_SESSION['username']; ?>
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="span-shopping-username">
|
||||
<li><a class="dropdown-item" href="shopping.php">Shopping</a></li>
|
||||
<li><a class="dropdown-item" href="cart.php">My Cart</a></li>
|
||||
<li><a class="dropdown-item" href="userInfo.php">My billing address</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<form action="../php/logout.php" method="post">
|
||||
<button class="btn btn-lg my-btn" type="submit" id="btn-shopping-logout"> LOGOUT</button>
|
||||
</form>
|
||||
<img id="headerImg" src="../img/headerImg.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -38,6 +38,50 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12" id="">
|
||||
<h1>My billing address</h1>
|
||||
<form class="row g-3">
|
||||
<div class="col-md-6">
|
||||
<label for="inputEmail4" class="form-label">Email</label>
|
||||
<input type="email" class="form-control" id="inputEmail">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="inputPassword4" class="form-label">Phone</label>
|
||||
<input type="tel" class="form-control" id="inputPhone" placeholder="123-456-7890" maxlength="12">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="inputAddress" class="form-label">Address</label>
|
||||
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label for="inputAddress2" class="form-label"></label>
|
||||
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label for="inputCity" class="form-label">City</label>
|
||||
<input type="text" class="form-control" id="inputCity">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="inputState" class="form-label">State</label>
|
||||
<select id="inputState" class="form-select">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
<label for="inputZip" class="form-label">Zip</label>
|
||||
<input type="text" class="form-control" id="inputZip">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gridCheck">
|
||||
<label class="form-check-label" for="gridCheck">
|
||||
Check me out
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button type="submit" class="btn btn-primary">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -50,8 +94,9 @@
|
||||
|
||||
</div>
|
||||
|
||||
<?php include '../footer.html' ?>
|
||||
|
||||
</div>
|
||||
<?php include '../footer.php' ?>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -12,4 +12,5 @@ $button-border-color: rgba(255,255,255,0.3)
|
||||
$button-background-color-hover: OliveDrab
|
||||
$button-color-hover: white
|
||||
|
||||
$index-background-color: #edeae8
|
||||
$index-background-color: #edeae8
|
||||
$transparent: rgba(255,255,255,0)
|
||||
@ -9,6 +9,7 @@ body
|
||||
height: 100%
|
||||
max-width: 100%
|
||||
// overflow-x: hidden
|
||||
background-color: $index-background-color
|
||||
|
||||
div.container
|
||||
text-align: center
|
||||
|
||||
@ -30,4 +30,19 @@
|
||||
position: fixed
|
||||
|
||||
.my-floating-btn.active
|
||||
display: block
|
||||
display: block
|
||||
|
||||
.cart_button_1
|
||||
color: OliveDrab
|
||||
border-color: OliveDrab
|
||||
background-color: transparent
|
||||
.cart_button_2
|
||||
// color: DarkGrey
|
||||
border-color: $button-border-color
|
||||
background-color: OliveDrab
|
||||
.cart_button_1:hover
|
||||
border-color: $button-border-color
|
||||
background-color: $button-border-color
|
||||
.cart_button_2:hover
|
||||
border-color: $button-border-color
|
||||
background-color: $button-border-color
|
||||
@ -1,5 +1,6 @@
|
||||
|
||||
.sectionShopping
|
||||
background-color: $index-background-color
|
||||
.row
|
||||
padding-left: 20%
|
||||
padding-right: 20%
|
||||
@ -8,6 +9,12 @@
|
||||
margin: 5%
|
||||
padding: 1%
|
||||
border: 1px solid grey
|
||||
|
||||
.shopping_pageNav
|
||||
a
|
||||
background-color: $index-background-color
|
||||
a:hover
|
||||
background-color: grey
|
||||
|
||||
img
|
||||
width: 100%
|
||||
|
||||
@ -1,21 +1,44 @@
|
||||
.sectionShopping
|
||||
.shopping_headerNav #headerImg
|
||||
|
||||
.shopping_headerNav
|
||||
ul
|
||||
background-color: $transparent
|
||||
border: none
|
||||
a
|
||||
font-size: 1.5rem
|
||||
color: black
|
||||
background-color: rgba(255,255,255,0.7)
|
||||
a:hover
|
||||
background-color: rgba(128,128,128,0.7)
|
||||
a:active
|
||||
color: black
|
||||
li:first-of-type
|
||||
a
|
||||
border-top-left-radius: 6px
|
||||
border-top-right-radius: 6px
|
||||
li:last-of-type
|
||||
a
|
||||
border-bottom-left-radius: 6px
|
||||
border-bottom-right-radius: 6px
|
||||
#headerImg
|
||||
z-index: -100
|
||||
height: 150px
|
||||
background-color: rgba(255,0,0,0.1)
|
||||
border-radius: 15px 50px 30px
|
||||
|
||||
.shopping_headerNav #span-shopping-username
|
||||
#span-shopping-username
|
||||
background-color: $transparent
|
||||
border: none
|
||||
position: absolute
|
||||
font-size: 1.5rem
|
||||
left: 1rem
|
||||
top: 1rem
|
||||
color: white
|
||||
|
||||
.shopping_headerNav #btn-shopping-logout
|
||||
// #span-shopping-username:active
|
||||
// outline: none
|
||||
#btn-shopping-logout
|
||||
position: absolute
|
||||
right: 1rem
|
||||
top: 1rem
|
||||
|
||||
#span-shopping-username
|
||||
#span-shopping-username:before
|
||||
font-family: 'FontAwesome'
|
||||
content: '\f2be'
|
||||
@ -11,6 +11,7 @@ body {
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
background-color: #edeae8;
|
||||
}
|
||||
|
||||
div.container {
|
||||
@ -192,6 +193,27 @@ video {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.cart_button_1 {
|
||||
color: OliveDrab;
|
||||
border-color: OliveDrab;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.cart_button_2 {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: OliveDrab;
|
||||
}
|
||||
|
||||
.cart_button_1:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.cart_button_2:hover {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
#logInModal .mb-3, #registerModal .mb-3 {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
@ -354,6 +376,10 @@ video {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.sectionShopping {
|
||||
background-color: #edeae8;
|
||||
}
|
||||
|
||||
.sectionShopping .row {
|
||||
padding-left: 20%;
|
||||
padding-right: 20%;
|
||||
@ -365,6 +391,14 @@ video {
|
||||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_pageNav a {
|
||||
background-color: #edeae8;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_pageNav a:hover {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.sectionShopping img {
|
||||
width: 100%;
|
||||
-o-object-fit: cover;
|
||||
@ -387,13 +421,45 @@ video {
|
||||
color: OliveDrab;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_headerNav #headerImg {
|
||||
.shopping_headerNav ul {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.shopping_headerNav ul a {
|
||||
font-size: 1.5rem;
|
||||
color: black;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.shopping_headerNav ul a:hover {
|
||||
background-color: rgba(128, 128, 128, 0.7);
|
||||
}
|
||||
|
||||
.shopping_headerNav ul a:active {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.shopping_headerNav ul li:first-of-type a {
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
.shopping_headerNav ul li:last-of-type a {
|
||||
border-bottom-left-radius: 6px;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
|
||||
.shopping_headerNav #headerImg {
|
||||
z-index: -100;
|
||||
height: 150px;
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border-radius: 15px 50px 30px;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_headerNav #span-shopping-username {
|
||||
.shopping_headerNav #span-shopping-username {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: none;
|
||||
position: absolute;
|
||||
font-size: 1.5rem;
|
||||
left: 1rem;
|
||||
@ -401,13 +467,13 @@ video {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sectionShopping .shopping_headerNav #btn-shopping-logout {
|
||||
.shopping_headerNav #btn-shopping-logout {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
#span-shopping-username {
|
||||
#span-shopping-username:before {
|
||||
font-family: 'FontAwesome';
|
||||
content: '\f2be';
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user