-
Ignacio Hernández de la Fuente authoredIgnacio Hernández de la Fuente authored
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
index.php 20.56 KiB
<!DOCTYPE html>
<?php session_start();
include("../html/data_treatment/update_activity.php");
if(!isset($_SESSION["username"])){
header("location: ../html/login.php");
exit;
}
list($year, $month, $day) = explode('-', explode(' ', $_SESSION["last_session"])[0]);
// Calcul de c
$c = ($month <= 2) ? 1 : 0;
// Calcul de a
$a = $year - $c;
// Calcul de m
$m = $month + 12 * $c - 2;
// Calcul de j
$j = ($day + $a + floor($a/4) - floor($a/100) + floor($a/400) + floor((31*$m)/12)) % 7;
switch ($j) {
case 0:
$Fday = "Sunday";
break;
case 1:
$Fday = "Monday";
break;
case 2:
$Fday = "Tuesday";
break;
case 3:
$Fday = "Wednesday";
break;
case 4:
$Fday = "Thursday";
break;
case 5:
$Fday = "Friday";
break;
case 6:
$Fday = "Saturday";
break;
}
include("../html/data_treatment/connect_database.php");
?>
<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>
<!-- JQuery -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></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">
<a href="shoppingPage.php"><i class="fa-solid fa-cart-shopping"></i></a>
<div id="onlineUsers" style="color:white">Loading ...</div>
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li>
</li>
<li>
<form method="GET">
<input type="text" name="query" id=search placeholder="Search...">
</form>
</li>
<li class="nav-item"><a class="nav-link" href="#services">Offers</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">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>
</div>
<style>
#search {
width: 50%;
margin-right: 50px ;
}
.fa-cart-shopping{
color: white;
font-size: 25px;
margin-right: 240px;
}
</style>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="containerM">
<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>
</header>
<!-- Services-->
<section class="page-section" id="services">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Offers</h2>
<h3 class="section-subheading text-muted">Some offers you may like</h3>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<div class="mySlides fade">
<img src="assets/img/laptops/1.jpg" style="width:50%">
ASUS ROG Strix G15 - $1,100
</div>
<div class="mySlides fade">
<img src="assets/img/laptops/2.jpg" style="width:50%">
HP OMEN 16 - $950 </div>
<div class="mySlides fade">
<img src="assets/img/laptops/3.jpg" style="width:50%">
Acer Nitro 5 - $1,150
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<br>
</div>
</section>
<?php
$sql = "select * from articles";
$result = $conn->query($sql);
$articles = array();
while ($row = $result->fetch_assoc()) {
$articles[] = $row;
}
?>
<!-- Portfolio Grid-->
<section class="page-section bg-light" id="portfolio">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Laptops</h2>
<h3 class="section-subheading text-muted">The best quality is here</h3>
</div>
<div class="row">
<?php
for($i=0; $i<count($articles); $i++){
?>
<div class="col-lg-4 col-sm-6 mb-4">
<!-- Portfolio item 1-->
<div class="portfolio-item">
<a class="portfolio-link" data-bs-toggle="modal" <?php echo 'href="#portfolioModal'.$i.'"' ?>>
<div class="portfolio-hover">
<div class="portfolio-hover-content"><i class="fas fa-plus fa-3x"></i></div>
</div>
<img class="img-fluid" src=<?php echo "'../image/laptops/".$articles[$i]["imagename"]."'"; ?> alt="..." />
</a>
<div class="portfolio-caption">
<div class="portfolio-caption-heading"><?php echo $articles[$i]["itemName"]?></div>
<div class="portfolio-caption-subheading text-muted"><?php echo $articles[$i]["price"]." €"?></div>
</div>
</div>
</div>
<?php };?>
</div>
</div>
</section>
<!-- Clients--> <div class="py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/microsoft.svg" alt="..." aria-label="Microsoft Logo" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/google.svg" alt="..." aria-label="Google Logo" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/facebook.svg" alt="..." aria-label="Facebook Logo" /></a>
</div>
<div class="col-md-3 col-sm-6 my-3">
<a href="#!"><img class="img-fluid img-brand d-block mx-auto" src="assets/img/logos/ibm.svg" alt="..." aria-label="IBM Logo" /></a>
</div>
</div>
</div>
</div>
<!-- Contact-->
<section class="page-section" id="contact">
<div class="container">
<div class="text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
<!-- * * * * * * * * * * * * * * *-->
<!-- * * SB Forms Contact Form * *-->
<!-- * * * * * * * * * * * * * * *-->
<!-- This form is pre-integrated with SB Forms.-->
<!-- To make this form functional, sign up at-->
<!-- https://startbootstrap.com/solution/contact-forms-->
<!-- to get an API token!-->
<form id="contactForm" data-sb-form-api-token="API_TOKEN">
<div class="row align-items-stretch mb-5">
<div class="col-md-6">
<div class="form-group">
<!-- Name input-->
<input class="form-control" id="name" type="text" placeholder="Your Name *" data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
</div>
<div class="form-group">
<!-- Email address input-->
<input class="form-control" id="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
<div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
<div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
</div>
<div class="form-group mb-md-0">
<!-- Phone number input-->
<input class="form-control" id="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
<div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group form-group-textarea mb-md-0">
<!-- Message input-->
<textarea class="form-control" id="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
<div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
</div>
</div>
</div>
<!-- Submit success message-->
<!---->
<!-- This is what your users will see when the form-->
<!-- has successfully submitted-->
<div class="d-none" id="submitSuccessMessage">
<div class="text-center text-white mb-3">
<div class="fw-bolder">Form submission successful!</div>
</div>
</div>
<!-- Submit error message--> <!---->
<!-- This is what your users will see when there is-->
<!-- an error submitting the form-->
<div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
<!-- Submit Button-->
<div class="text-center"><button class="btn btn-primary btn-xl text-uppercase disabled" id="submitButton" type="submit">Send Message</button></div>
</form>
</div>
</section>
<!-- 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 my-3 my-lg-0">
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-dark btn-social mx-2" href="#!" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</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>
<!-- Portfolio Modals-->
<!-- Portfolio item 1 modal popup-->
<?php
for($i=0; $i<count($articles); $i++){
?>
<div class="portfolio-modal modal fade" <?php echo 'id="portfolioModal'.$i.'"' ?> 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" <?php echo 'id="modal'.$articles[$i]["itemName"].'"';?>>
<!-- Project details-->
<h2 class="text-uppercase"><?php echo $articles[$i]["itemName"]?></h2>
<!-- <p class="item-intro text-muted">Lorem ipsum dolor sit amet consectetur.</p> -->
<img class="img-fluid d-block mx-auto" src=<?php echo "'../image/laptops/".$articles[$i]["imagename"]."'"; ?> alt="..." />
<p><?php echo $articles[$i]["description"]; ?></p>
<p><?php echo "Price: ".$articles[$i]["price"]." € <br>Quantity available: ".$articles[$i]["quantity"];?></p>
<div class="quantity">
<button onclick="decrementQuantity(this)">-</button>
<input type="text" value="1" <?php echo 'id="quantity"'.$i; ?>>
<button onclick="incrementQuantity(this)">+</button>
</div>
<button class="btn btn-primary btn-xl text-uppercase" type="button" <?php echo 'id = "buttonShoppingCart'.$i.'"';?>>
Add to shopping cart
</button>
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php }; ?>
<!-- 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/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
<script src="js/slideBox.js"></script>
<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);
}
function updateOnlineUsers() {
$.ajax({
url: '../html/data_treatment/AJAX/online_Users.php',
success: function (data) {
$('#onlineUsers').text('Online Users: ' + data);
}
});
}
// Update online user count every 30 seconds
setInterval(updateOnlineUsers, 30000);
// Initial update
updateOnlineUsers();
</script>
</body>
</html>