added shopping page

2021-07-11 07:45:18 +01:00 · 2021-07-11 07:45:18 +01:00 · 6cc974f92c
commit 6cc974f92c
parent 2f7c48fad5
21 changed files with 282 additions and 71 deletions
--- a/img/applePie.jpg
+++ b/img/applePie.jpg
--- a/img/cakes.jpg
+++ b/img/cakes.jpg
--- a/img/cookies.jpg
+++ b/img/cookies.jpg
--- a/img/croissants.jpg
+++ b/img/croissants.jpg
--- a/img/cupcakes.jpg
+++ b/img/cupcakes.jpg
--- a/img/iceCream.jpg
+++ b/img/iceCream.jpg
--- a/img/pancake.jpg
+++ b/img/pancake.jpg
--- a/img/pudding.jpg
+++ b/img/pudding.jpg
--- a/index.html
+++ b/index.html
@ -22,6 +22,13 @@
    <title>New Moon Dessert Bar</title>
  </head>

+
+  <div style="position:fixed; width:100%; height:100%; background-color:rgb(0,0,0,0.5)" id='zoomIn'>
+    <div class='zoomIn' id="zoomInDiv">
+        <img id='imgItem' />
+    </div>
+  </div>
+
  <body class="index-page">
    <div class="container-fluid">
      <div class="video-container-bg">
@ -199,7 +206,7 @@
      <!-- Modal -->
      
      <!-- LogIn Modal -->
-      <form action="shopping/shopping.html" method="post">
+      <form action="shopping/shopping.php" method="post">
        <div class="modal fade" id="logInModal" tabindex="-1" aria-labelledby="logInLabel" aria-hidden="true">
          <div class="modal-dialog modal-dialog-centered">

--- a/php/connection.php
+++ b/php/connection.php
@ -0,0 +1,52 @@
+<?php
+function connectMysql()
+{
+    $servername = "localhost";
+    $username = "root"; // your username
+    $password = "root"; //your password
+    $database = "cpsc2030_project";
+    $conn = new mysqli($servername, $username, $password, $database);
+// Check connection
+    if ($conn->connect_error) {
+        die("Connection failed: " . $conn->connect_error);
+    } 
+    return $conn;
+
+}
+
+
+function getAllProducts($conn){
+    $query = "select * from products ORDER BY Product_ID";
+    $result = $conn->query($query);
+    
+    $allProducts=[];
+    if ($result->num_rows > 0) {
+        while ($row = $result->fetch_assoc()){
+            $allProducts[]=$row;
+        }
+    } else {
+        return null;
+    }
+    return $allProducts;
+}
+
+function getProducts($P_ID,$conn){
+    $query = "select * from products where Product_ID='$P_ID'";
+    $result = $conn->query($query);
+
+    $products=[];
+    if ($result->num_rows > 0) {
+        while ($row = $result->fetch_assoc()){
+            $products[]=$row;
+        }
+    } else {
+        return null;
+    }
+    return $products;
+}
+
+
+
+
+
+?>
--- a/php/password.php
+++ b/php/password.php
--- a/shopping/shopping.html
+++ b/shopping/shopping.html
@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html class="no-js" lang="zxx">
-<?php
-require_once 'connection.php';
-$conn = connectMysql();
-session_start();
-?>
-
-<head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-
-    <title>New Moon Dessert Bar</title>
-
-        <!-- Bootstrap CSS -->
-    <link href="css/bootstrap-grid.min.css" rel="stylesheet">
-    <link href="css/bootstrap.min.css" rel="styleshee t">
-        <!--=== Main Style CSS ===-->
-    <link href="style.css" rel="stylesheet">
-    <!-- Font Awesome styles CDN Link -->
-    <link
-      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
-      rel="stylesheet"
-      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
-      crossorigin="anonymous"
-    />
-</head>
-
-<body class="shopping_body">
-
-    <?php include 'header_logout.php' ?>
-
-    <div id="wrapper">
-
-        <section class="menu_gallery">
-            
-             <h2>| · Click on the picture to add to the cart · |</h2>
-             <?php 
-             $products = getAllProducts($conn); 
-                  foreach ($products as $product): ?>
-                    <a class="imgDiv" href="addToCart.php?<?=$product['Product_ID']?>">
-                        <img class="imgItem" src="img/<?= $product['Product_Name']; ?>.jpg" alt="<?=$product['Product_Name']?>">
-                        <p><?= $product['Product_Name']; ?></p>
-                        <p class="price">&dollar;<?= $product['Product_Price']; ?></p>
-                    </a>
-                  <?php endforeach; 
-            ?> 
-           </section>
-        
-    </div>
-<?php include 'footer.php' ?>
-
-
-
-</body>
-
-</html>
--- a/shopping/shopping.php
+++ b/shopping/shopping.php
@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+  <?php
+  require_once '../php/connection.php';
+  $conn = connectMysql();
+  session_start();
+  ?>
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap-grid.min.css" rel="stylesheet">
+    <link href="../bootstrap-5.0.1-dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!--=== Main Style CSS ===-->
+    <link href="../style/style.css" rel="stylesheet">
+
+    <!-- Font Awesome styles CDN Link -->
+    <link
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <title>New Moon Dessert Bar</title>
+  </head>
+
+<body class="shopping_body">
+
+  <div class="container-fluid">
+
+    <div class="sectionMenu" id="index-sectionMenu">
+      <div class="row">
+        <div class="col-sm-12">
+          <h1> Shopping </h1>
+          <p>| · Click on the picture to add to the cart · |</p>
+        </div>
+      </div>
+      <?php 
+            $products = getAllProducts($conn); 
+                foreach ($products as $product): ?>
+      <div class="row">
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <a class="imgDiv" href="addToCart.php?<?=$product['Product_ID']?>">
+              <img class="imgItem" src="img/<?= $product['Product_Name']; ?>.jpg" alt="<?=$product['Product_Name']?>">
+              <p><?= $product['Product_Name']; ?></p>
+              <p class="price">&dollar;<?= $product['Product_Price']; ?></p>
+          </a>
+        </div>
+      <?php endforeach; ?> 
+        <!-- <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/applePie.jpg" >
+            <h3>ApplePie</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/cakes.jpg" >
+            <h3>Cakes</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/cookies.jpg" >
+            <h3>Cookies</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/croissants.jpg" >
+            <h3>Croissants</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/cupcakes.jpg" >
+            <h3>Cupcakes</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/iceCream.jpg" >
+            <h3>IceCream</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/pancake.jpg" >
+            <h3>Pancake</h3>
+          </div>
+        </div>
+        <div class="col-sm-12 col-lg-6 col-xl-3">
+          <div class="my-img-class">
+            <img class="imgItem" src="../img/pudding.jpg" >
+            <h3>Pudding</h3>
+          </div>
+        </div> -->
+      </div>
+
+    </div>
+  </div>
+
+
+
+</body>
+
+</html>
--- a/style/base/_base.sass
+++ b/style/base/_base.sass
@ -20,3 +20,4 @@ video
    height: 100%
    z-index: -100
    object-fit: cover
+
--- a/style/base/_index.sass
+++ b/style/base/_index.sass
@ -4,3 +4,35 @@
 .container-fluid
    height: 100%
    padding: 0
+
+
+#zoomIn 
+    display: none
+    z-index: 100
+    
+.zoomIn 
+    margin: 0
+    position: absolute
+    top: 35%
+    left: 50%
+    -ms-transform: translateY(-50%)
+    -ms-transform: translateX(-50%)
+    transform: translateY(-50%)
+    transform: translateX(-50%)
+    z-index: 1
+    img 
+        animation-name: zoom_in
+        animation-duration: 0.5s
+        display: block
+        padding: 10px
+        margin: auto
+        max-width: 100%
+        max-height: 100%
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2)
+        z-index: 999
+
+    
+
+@keyframes zoom_in 
+    from {transform: scale(0.1)}
+    to {transform: scale(1)}
--- a/style/modules/_sectionDocumentation.sass
+++ b/style/modules/_sectionDocumentation.sass
@ -1,8 +1,9 @@
 .sectionDocumentation
-    margin-top: 10%
+    margin-top: 3%
    text-align: center
    h2
        margin-top: 5%
+        color: OliveDrab
    img
        margin: auto
        padding: 10px
--- a/style/modules/_sectionMenu.sass
+++ b/style/modules/_sectionMenu.sass
@ -1,5 +1,4 @@
 .sectionMenu
-    margin-top: 12%
    .row
        padding-left: 20%
        padding-right: 20%
@ -16,3 +15,5 @@
    h3
        text-align: center
        color: OliveDrab
+
+    
--- a/style/modules/_sectionSource.sass
+++ b/style/modules/_sectionSource.sass
@ -1,4 +1,5 @@
 .sectionSource
    text-align: center
    h2
-        margin-top: 10%
+        margin-top: 3%
+        color: OliveDrab
--- a/style/style.css
+++ b/style/style.css
@ -36,6 +36,60 @@ video {
  padding: 0;
 }

+#zoomIn {
+  display: none;
+  z-index: 100;
+}
+
+.zoomIn {
+  margin: 0;
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+  z-index: 1;
+}
+
+.zoomIn img {
+  -webkit-animation-name: zoom_in;
+          animation-name: zoom_in;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  display: block;
+  padding: 10px;
+  margin: auto;
+  max-width: 100%;
+  max-height: 100%;
+  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.2);
+  z-index: 999;
+}
+
+@-webkit-keyframes zoom_in {
+  from {
+    -webkit-transform: scale(0.1);
+            transform: scale(0.1);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
+@keyframes zoom_in {
+  from {
+    -webkit-transform: scale(0.1);
+            transform: scale(0.1);
+  }
+  to {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+  }
+}
+
 .my-btn {
  background-color: rgba(255, 255, 255, 0.3);
  color: black;
@ -153,10 +207,6 @@ video {
  content: '\f2be';
 }

-.sectionMenu {
-  margin-top: 12%;
-}
-
 .sectionMenu .row {
  padding-left: 20%;
  padding-right: 20%;
@ -188,16 +238,18 @@ video {
 }

 .sectionSource h2 {
-  margin-top: 10%;
+  margin-top: 3%;
+  color: OliveDrab;
 }

 .sectionDocumentation {
-  margin-top: 10%;
+  margin-top: 3%;
  text-align: center;
 }

 .sectionDocumentation h2 {
  margin-top: 5%;
+  color: OliveDrab;
 }

 .sectionDocumentation img {
--- a/style/style.css.map
+++ b/style/style.css.map
@ -1,6 +1,6 @@
 {
    "version": 3,
-    "mappings": "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",
+    "mappings": "AAAA,OAAO,CAAC,wFAAI;AGAZ,AAAA,IAAI,CAAC;EACD,WAAW,EFDI,aAAa;EEE5B,MAAM,EAAE,IAAI;CAAG;;AACnB,AAAA,IAAI,CAAC;EACD,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;CAAG;;AAEnB,AAAA,GAAG,AAAA,UAAU,CAAC;EACV,UAAU,EAAE,MAAM;CAAG;;AAGzB,AAAA,KAAK,CAAC;EACF,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,CAAC;EACP,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,IAAI;EAChB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,KAAK;CAAG;;ACrBxB,AAAA,WAAW,CAAC;EACR,gBAAgB,EHaK,OAAO;CGbgB;;AAEhD,AAAA,gBAAgB,CAAC;EACb,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,CAAC;CAAG;;AAGjB,AAAA,OAAO,CAAC;EACJ,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,GAAG;CAAG;;AAEnB,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,aAAa,EAAE,gBAAgB;EAC/B,aAAa,EAAE,gBAAgB;EAC/B,SAAS,EAAE,gBAAgB;EAC3B,SAAS,EAAE,gBAAgB;EAC3B,OAAO,EAAE,CAAC;CAUW;;AAnBzB,AAUI,OAVG,CAUH,GAAG,CAAC;EACA,cAAc,EAAE,OAAO;EACvB,kBAAkB,EAAE,IAAI;EACxB,OAAO,EAAE,KAAK;EACd,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAkB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB;EACxE,OAAO,EAAE,GAAG;CAAG;;AAIvB,UAAU,CAAV,OAAU;EACN,IAAI;IAAE,SAAS,EAAE,UAAU;;EAC3B,EAAE;IAAE,SAAS,EAAE,QAAQ;;;;AKrC3B,AAAA,OAAO,CAAC;EACJ,gBAAgB,EROM,wBAAqB;EQN3C,KAAK,EROM,KAAK;EQNhB,YAAY,EROM,wBAAqB;EQNvC,OAAO,EAAE,GAAG;EACZ,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAe,EAAE,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,kBAAe,CAAC,KAAK;EACxE,SAAS,EAAE,MAAM;EACjB,MAAM,EAAE,IAAI;CAAG;;AAEnB,AAAA,OAAO,AAAA,MAAM,CAAC;EACV,gBAAgB,ERAY,SAAS;EQCrC,KAAK,ERAY,KAAK;CQAO;;AAEjC,AAAA,gBAAgB,CAAC;EACb,OAAO,EAAE,IAAI;EAQb,GAAG,EAAE,GAAG;EACR,KAAK,EAAE,IAAI;EACX,QAAQ,EAAE,KAAK;CAAG;;AAXtB,AAEI,gBAFY,CAEZ,CAAC,CAAC;EACE,KAAK,ERRE,KAAK;EQSZ,eAAe,EAAE,IAAI;CAAG;;AAJhC,AAKI,gBALY,CAKZ,MAAM,CAAC;EACH,KAAK,EAAE,KAAK;EACZ,aAAa,EAAE,GAAG;EAClB,YAAY,EAAE,IAAI;CAAG;;AAK7B,AAAA,gBAAgB,AAAA,OAAO,CAAC;EACpB,OAAO,EAAE,KAAK;CAAG;;AC5BrB,AAEQ,WAFG,CACP,WAAW,CACP,EAAE,CAAC;EACC,KAAK,EAAE,SAAS;EAChB,UAAU,EAAE,MAAM;CAAG;;AAJjC,AAMQ,WANG,CAKP,aAAa,CACT,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,GAAG;EAChB,YAAY,EAAE,IAAI;CAAG;;ACTjC,AAAA,mBAAmB,CAAC;EAChB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;CAAG;;ACFnB,AAAA,OAAO,CAAC;EACJ,gBAAgB,EAAE,sBAAmB;CAeI;;AAhB7C,AAEI,OAFG,CAEH,aAAa,CAAC;EACV,KAAK,EXCO,SAAS;CWDO;;AAHpC,AAII,OAJG,CAIH,CAAC,CAAC;EACE,SAAS,EAAE,MAAM;EACjB,MAAM,EAAE,GAAG;EACX,KAAK,EXHO,SAAS;EWIrB,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,wBAAwB;CAG3C;;AAZF,AAaI,OAbG,CAaH,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EXTa,KAAK;CWSW;;AAd1C,AAeI,OAfG,CAeH,CAAC,AAAA,OAAO,CAAC;EACL,KAAK,EXVc,KAAK;CWUW;;AAE3C,AAAA,iBAAiB,CAAC;EACd,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,cAAc;EAC7B,KAAK,EAAE,KAAK;CAAG;;AAOnB,MAAM,EAAE,SAAS,EAAE,KAAK;EACpB,AAAA,iBAAiB,CAAC;IACd,KAAK,EAAE,IAAI;GAAG;;;AC9BtB,AAAA,YAAY,CAAC;EACT,UAAU,EAAE,MAAM;EAClB,UAAU,EAAE,GAAG;EAUf,QAAQ,EAAE,QAAQ;CAAG;;AAZzB,AAGI,YAHQ,CAGR,EAAE,CAAC;EACC,WAAW,EZHH,UAAU;EYIlB,SAAS,EAAE,IAAI;CAAG;;AAL1B,AAMI,YANQ,CAMR,EAAE,CAAC;EACC,WAAW,EZLN,OAAO;EYMZ,SAAS,EAAE,IAAI;CAAG;;AAR1B,AASI,YATQ,CASR,EAAE,CAAC;EACC,KAAK,EAAE,SAAS;EAChB,SAAS,EAAE,MAAM;CAAG;;AAE5B,AAAA,eAAe,AAAA,OAAO,CAAC;EACnB,WAAW,EAAE,aAAa;EAC1B,OAAO,EAAE,OAAO;CAAG;;ACfvB,AACI,YADQ,CACR,IAAI,CAAC;EACD,YAAY,EAAE,GAAG;EACjB,aAAa,EAAE,GAAG;CAAG;;AAH7B,AAII,YAJQ,CAIR,aAAa,CAAC;EACV,MAAM,EAAE,EAAE;EACV,OAAO,EAAE,EAAE;EACX,MAAM,EAAE,cAAc;CAAG;;AAPjC,AAQI,YARQ,CAQR,GAAG,CAAC;EACA,KAAK,EAAE,IAAI;CAAG;;AATtB,AAUI,YAVQ,CAUR,EAAE,CAAC;EACC,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,SAAS;CAAG;;AAb3B,AAcI,YAdQ,CAcR,EAAE,CAAC;EACC,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,SAAS;CAAG;;AChB3B,AAAA,cAAc,CAAC;EACX,UAAU,EAAE,MAAM;CAGO;;AAJ7B,AAEI,cAFU,CAEV,EAAE,CAAC;EACC,UAAU,EAAE,EAAE;EACd,KAAK,EAAE,SAAS;CAAG;;ACJ3B,AAAA,qBAAqB,CAAC;EAClB,UAAU,EAAE,EAAE;EACd,UAAU,EAAE,MAAM;CAMI;;AAR1B,AAGI,qBAHiB,CAGjB,EAAE,CAAC;EACC,UAAU,EAAE,EAAE;EACd,KAAK,EAAE,SAAS;CAAG;;AAL3B,AAMI,qBANiB,CAMjB,GAAG,CAAC;EACA,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;CAAG",
    "sources": [
        "style.sass",
        "_variables.sass",
--- a/style/style.js
+++ b/style/style.js
@ -9,3 +9,15 @@ window.onscroll = function()
        floatingButton.className ="my-floating-btn active";
    }
 };
+
+var zoomIn = document.getElementById('zoomIn');
+var imgItem = document.getElementById('imgItem');
+
+function showBgImg(e) {
+    zoomIn.style.display = 'block';
+    imgItem.src = e.src;
+}
+
+imgItem.onclick = function() {
+    zoomIn.style.display = 'none';
+}