diff --git a/startbootstrap-agency-gh-pages/index.php b/index.php similarity index 58% rename from startbootstrap-agency-gh-pages/index.php rename to index.php index 262adf2954611d4f3e7077c9648b9e113c6399b2..fdecfd453899f55222cbe4f5be1374204736360c 100644 --- a/startbootstrap-agency-gh-pages/index.php +++ b/index.php @@ -55,6 +55,7 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> <!-- Font Awesome icons (free version)--> <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script> + <script src="https://kit.fontawesome.com/883fc94f2e.js" crossorigin="anonymous"></script> <!-- Google fonts--> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" /> <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" /> @@ -71,15 +72,23 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl <i class="fas fa-bars ms-1"></i> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> + <i class="fa-solid fa-cart-shopping"></i> + <style> + .fa-cart-shopping{ + color: white; + font-size: 25px + } + </style> <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0"> <li> <form action="/search" method="GET"> <input type="text" name="query" id=search placeholder="Search..."> </form> - </li> + </li> <li class="nav-item"><a class="nav-link" href="#services">Offers</a></li> <li class="nav-item"><a class="nav-link" href="#portfolio">PCs & Laptops</a></li> <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> + <li class="nav-item"><a class="nav-link" href="../html/data_treatment/logout_treatment.php">Log Out</a></li> </ul> </div> @@ -88,7 +97,10 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl <!-- Masthead--> <header class="masthead"> <div class="containerM"> - <div class="masthead-subheading">Welcome!</div> + <div class="masthead-subheading">Welcome + <?php echo "".explode('@',$_SESSION["username"])[0]."! You were last online on ".$Fday." - ".$day.".".$month.".".$year."."; + ?> + </div> <div class="masthead-heading text-uppercase">Find some good offers now!</div> <a class="btn btn-primary btn-xl text-uppercase" href="#services">Tell Me More</a> </div> @@ -310,181 +322,6 @@ echo "Hello Mr./Ms. ".explode('@',$_SESSION["username"])[0].", you were last onl </div> </div> <?php }; ?> - <!-- Portfolio item 2 modal popup--> - <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> - <div class="container"> - <div class="row justify-content-center"> - <div class="col-lg-8"> - <div class="modal-body"> - <!-- Project details--> - <h2 class="text-uppercase">Project Name</h2> - <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> - <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/2.jpg" alt="..." /> - <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> - <ul class="list-inline"> - <li> - <strong>Client:</strong> - Explore - </li> - <li> - <strong>Category:</strong> - Graphic Design - </li> - </ul> - <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button"> - <i class="fas fa-xmark me-1"></i> - Close Project - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <!-- Portfolio item 3 modal popup--> - <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> - <div class="container"> - <div class="row justify-content-center"> - <div class="col-lg-8"> - <div class="modal-body"> - <!-- Project details--> - <h2 class="text-uppercase">Project Name</h2> - <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> - <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/3.jpg" alt="..." /> - <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> - <ul class="list-inline"> - <li> - <strong>Client:</strong> - Finish - </li> - <li> - <strong>Category:</strong> - Identity - </li> - </ul> - <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button"> - <i class="fas fa-xmark me-1"></i> - Close Project - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <!-- Portfolio item 4 modal popup--> - <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> - <div class="container"> - <div class="row justify-content-center"> - <div class="col-lg-8"> - <div class="modal-body"> - <!-- Project details--> - <h2 class="text-uppercase">Project Name</h2> - <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> - <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/4.jpg" alt="..." /> - <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> - <ul class="list-inline"> - <li> - <strong>Client:</strong> - Lines - </li> - <li> - <strong>Category:</strong> - Branding - </li> - </ul> - <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button"> - <i class="fas fa-xmark me-1"></i> - Close Project - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <!-- Portfolio item 5 modal popup--> - <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> - <div class="container"> - <div class="row justify-content-center"> - <div class="col-lg-8"> - <div class="modal-body"> - <!-- Project details--> - <h2 class="text-uppercase">Project Name</h2> - <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> - <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/5.jpg" alt="..." /> - <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> - <ul class="list-inline"> - <li> - <strong>Client:</strong> - Southwest - </li> - <li> - <strong>Category:</strong> - Website Design - </li> - </ul> - <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button"> - <i class="fas fa-xmark me-1"></i> - Close Project - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> - <!-- Portfolio item 6 modal popup--> - <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true"> - <div class="modal-dialog"> - <div class="modal-content"> - <div class="close-modal" data-bs-dismiss="modal"><img src="assets/img/close-icon.svg" alt="Close modal" /></div> - <div class="container"> - <div class="row justify-content-center"> - <div class="col-lg-8"> - <div class="modal-body"> - <!-- Project details--> - <h2 class="text-uppercase">Project Name</h2> - <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> - <img class="img-fluid d-block mx-auto" src="assets/img/portfolio/6.jpg" alt="..." /> - <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p> - <ul class="list-inline"> - <li> - <strong>Client:</strong> - Window - </li> - <li> - <strong>Category:</strong> - Photography - </li> - </ul> - <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button"> - <i class="fas fa-xmark me-1"></i> - Close Project - </button> - </div> - </div> - </div> - </div> - </div> - </div> - </div> <!-- Bootstrap core JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> <!-- Core theme JS--> diff --git a/startbootstrap-agency-gh-pages/css/styles.css b/startbootstrap-agency-gh-pages/css/styles.css index 23236ba89138c68cdd57aa789a524cf24743eb97..450fec3a12354b23f1345a4a85d11d91cf09695b 100644 --- a/startbootstrap-agency-gh-pages/css/styles.css +++ b/startbootstrap-agency-gh-pages/css/styles.css @@ -11009,7 +11009,7 @@ p { padding-top: 1.5rem; padding-bottom: 1.5rem; border: none; - background-color: transparent; + background-color: #066173; transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out; } #mainNav .navbar-brand { diff --git a/startbootstrap-agency-gh-pages/js/staticNavBar.js b/startbootstrap-agency-gh-pages/js/staticNavBar.js new file mode 100644 index 0000000000000000000000000000000000000000..9920d8ca21079d5f33de6a8c5cc6287fd99812c4 --- /dev/null +++ b/startbootstrap-agency-gh-pages/js/staticNavBar.js @@ -0,0 +1,30 @@ +window.addEventListener('DOMContentLoaded', event => { + + // Navbar shrink function + var navbarShrink = function () { + const navbarCollapsible = document.body.querySelector('#mainNav'); + if (!navbarCollapsible) { + return; + } + + // Always add 'navbar-shrink' class + navbarCollapsible.classList.add('navbar-shrink'); + }; + + // Shrink the navbar + navbarShrink(); + + // Collapse responsive navbar when toggler is visible + const navbarToggler = document.body.querySelector('.navbar-toggler'); + const responsiveNavItems = [].slice.call( + document.querySelectorAll('#navbarResponsive .nav-link') + ); + responsiveNavItems.map(function (responsiveNavItem) { + responsiveNavItem.addEventListener('click', () => { + if (window.getComputedStyle(navbarToggler).display !== 'none') { + navbarToggler.click(); + } + }); + }); + +}); diff --git a/startbootstrap-agency-gh-pages/shoppingPage.php b/startbootstrap-agency-gh-pages/shoppingPage.php new file mode 100644 index 0000000000000000000000000000000000000000..f7bc414bbc0a3b6204e3847128326b8e575f156b --- /dev/null +++ b/startbootstrap-agency-gh-pages/shoppingPage.php @@ -0,0 +1,156 @@ +<!DOCTYPE html> + +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> + <meta name="description" content="" /> + <meta name="author" content="" /> + <title>Web Shop</title> + <!-- Favicon--> + <link rel="icon" type="image/x-icon" href="assets/favicon.ico" /> + <!-- Font Awesome icons (free version)--> + <script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script> + <script src="https://kit.fontawesome.com/883fc94f2e.js" crossorigin="anonymous"></script> + <!-- Google fonts--> + <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" /> + <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700" rel="stylesheet" type="text/css" /> + <!-- Core theme CSS (includes Bootstrap)--> + <link href="css/styles.css" rel="stylesheet" /> + </head> + <body id="page-top"> + <!-- Navigation--> + <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav"> + <div class="container"> + + <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> + Menu + <i class="fas fa-bars ms-1"></i> + </button> + <div class="collapse navbar-collapse" id="navbarResponsive"> + <i class="fa-solid fa-chevron-left"></i> + <style> + .fa-chevron-left{ + color: white; + font-size: 25px + } + </style> + <ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0"> + + <li class="nav-item"><a class="nav-link" href="../html/data_treatment/logout_treatment.php">Log Out</a></li> + </ul> + </div> + </div> + </nav> + + <!-- product Grid--> + <section class="page-section bg-light"> + <div class="container"> + <div class="text-center"> + <h2 class="section-heading text-uppercase">Your cart</h2> + <h3 class="section-subheading text-muted">These are the items you are about to buy</h3> + </div> + </div> + </section> + + <div class="product"> + <img src="assets/img/laptops/2.jpg" style="width:10%"> + <h2>HP Omen 17</h2> + <p>Price: $19.99</p> + <div class="quantity"> + <button class="remove-button" onclick="removeProduct(this)">X</button> + <button onclick="decrementQuantity(this)">-</button> + <input type="text" value="1" id="quantity1" readonly> + <button onclick="incrementQuantity(this)">+</button> + </div> + </div> + + <div class="product"> + <h2>Product 2</h2> + <p>Price: $29.99</p> + <button>Add to Cart</button> + </div> + + <div class="button-container"> + <a class="btn btn-primary btn-xl text-uppercase" href="#services" style="background-color: #ff6961; color: #fff; border: none; padding: 10px 20px; text-decoration: none; text-align: center; display: inline-block; font-size: 16px;">Checkout</a> + </div> + + <script> + function incrementQuantity(button) { + var input = button.parentNode.querySelector('input'); + var value = parseInt(input.value, 10); + input.value = value + 1; + } + + function decrementQuantity(button) { + var input = button.parentNode.querySelector('input'); + var value = parseInt(input.value, 10); + if (value > 0) { + input.value = value - 1; + } + } + function removeProduct(button) { + var product = button.parentNode.parentNode; + product.parentNode.removeChild(product); + } + </script> + <style> + .button-container { + text-align: center; + } + .product { + border: 1px solid #ddd; + margin: 1em; + padding: 1em; + text-align: center; + } + .page-section h3.section-subheading, .page-section .section-subheading.h3 { + margin-bottom: 0; + } + .remove-button { + background-color: #ff6961; /* Light red color */ + color: #fff; + border: none; + padding: 0.5em; + cursor: pointer; + } + .quantity button { + background-color: #333; + color: #fff; + border: none; + padding: 0.5em; + cursor: pointer; + } + + .quantity input { + width: 2em; + text-align: center; + margin: 0 0.5em; + } + + </style> + + + + <!-- Footer--> + <footer class="footer py-4"> + <div class="container"> + <div class="row align-items-center"> + <div class="col-lg-4 text-lg-start">Copyright © Your Website 2023</div> + + <div class="col-lg-4 text-lg-end"> + <a class="link-dark text-decoration-none me-3" href="#!">Privacy Policy</a> + <a class="link-dark text-decoration-none" href="#!">Terms of Use</a> + </div> + </div> + </div> + </footer> + + <!-- Bootstrap core JS--> + <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> + <!-- Core theme JS--> + <script src="js/staticNavBar.js"></script> + <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> + <script src="js/slideBox.js"></script> + </body> +</html>