Elvira

account.php

@@ -1,5 +1,5 @@
 <?php
-$page_title = "Login";
+$page_title = "Account";
 include("./nav.php");
 ?>
 

css/account.css

@@ -0,0 +1,76 @@
+/* ACCOUNT SECTION */
+
+#account {
+  padding: 2rem;
+}
+
+#account h1 {
+  color: #e5989b; /* Sets text color to pink */
+  font-size: 2.6em; /* Increases font size */
+  text-shadow: 2px 2px black; /* Adds black text shadow */
+  letter-spacing: 0.4em; /* Increases space between letters */
+  margin: 0.6em; /* Adds spacing */
+  width: 100%;
+}
+#account_container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  justify-content: center;
+  max-width: 30rem;
+  margin: 2rem auto;
+  padding: 1rem;
+  background-color: #f9f9f9;
+  border-radius: 10px;
+}
+
+.account_h2 {
+  margin: 2rem;
+  text-align: center;
+}
+
+.booking-box {
+  border: 1px solid #795757;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  border-radius: 8px;
+  background-color: white;
+}
+
+.booking-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.booking-info p {
+  margin: 0.3rem 0;
+}
+
+.booking-actions {
+  text-align: center;
+  margin-top: 1rem;
+}
+
+.edit-btn {
+  padding: 0.5rem 1rem;
+  margin-right: 1rem;
+  background-color: #e5989b;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.delete-btn {
+  padding: 0.5rem 1rem;
+  background-color: red;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.no-booking-message {
+  text-align: center;
+}

css/booking.css

@@ -83,7 +83,7 @@
 }
 
 .booking_form button:hover {
-  background-color: #f5f5f5; /* Changes background to light gray on hover */
+  background-color: #f9f9f9; /* Changes background to light gray on hover */
   color: #e5989b; /* Changes text color to light pink on hover */
   border: 1px solid #3b3030; /* Adds a dark brown border on hover */
 }

css/desktop.css

@@ -162,4 +162,18 @@
       transform: translateX(0); /* Moves element to normal position */
     }
   }
+
+  /* Gallery page page layout set*/
+
+  /* Horizontal image will take up half of the images row*/
+  .horizontal {
+    width: 48%; /* Sets image width */
+    object-fit: cover; /* Makes all images fit in the same width */
+  }
+
+  /* Vertical image will show 4 in one row */
+  .vertical {
+    width: 23%; /* Sets image width */
+    object-fit: cover; /* Makes all images fit in the same width */
+  }
 }

css/style.css

@@ -177,7 +177,7 @@ Dark Button Styling
 .family_photo {
   width: 100%; /* Takes full width of the parent */
   padding: 1.2em 0 1.2em 0; /* Adds vertical padding */
-  background-color: #f5efff; /* Light purple background */
+  background-color: #f9f9f9; /* Light purple background */
   margin-bottom: 1em; /* Adds spacing below */
 }
 
@@ -305,7 +305,7 @@ hgroup {
 .book a {
   color: #3b3030; /* Sets text color to dark brown */
   padding: 1em 3em; /* Adds padding inside the button */
-  background-color: #f5efff; /* Sets background color to light purple */
+  background-color: #f9f9f9; /* Sets background color to light purple */
   border-radius: 2em; /* Rounds the button edges */
 }
 
@@ -325,7 +325,7 @@ hgroup {
   justify-content: center; /* Centers elements vertically */
   border-radius: 8px; /* Rounds the edges of the form */
   padding: 1rem; /* Adds space inside the form */
-  background: #f5f5f5; /* Sets background color to light gray */
+  background: #f9f9f9; /* Sets background color to light gray */
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Adds a soft shadow */
 }
 
@@ -370,7 +370,43 @@ hgroup {
 }
 
 .contact_form button:hover {
-  background-color: #f5f5f5; /* Changes background to light gray on hover */
+  background-color: #f9f9f9; /* Changes background to light gray on hover */
   color: #e5989b; /* Changes text color to light pink on hover */
   border: 1px solid #3b3030; /* Adds a dark brown border on hover */
 }
+
+.gallery_page h1 {
+  color: #e5989b; /* Sets text color to pink */
+  text-align: center; /* Centers the heading */
+  font-size: 2.6em; /* Increases font size */
+  text-shadow: 2px 2px black; /* Adds black text shadow */
+  letter-spacing: 0.4em; /* Increases space between letters */
+  margin: 0.6em; /* Adds spacing */
+}
+
+/* Style for gallery page 
+- Uses flexbox to arrange content in a row and wrap if not enough space.
+- content is aligned at the center of the page
+- sets gap between images
+*/
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  flex-basis: auto;
+  justify-content: center;
+  gap: 10px;
+  padding: 2em;
+}
+
+/* For horizontal images width is the size of the screen */
+.horizontal {
+  width: 100%; /* Sets image width */
+  object-fit: cover; /* Makes all images fit in the same width */
+}
+
+/* For horizontal images width is half the size of the screen, showing 2 images in one row */
+.vertical {
+  width: 48%; /* Sets image width */
+  object-fit: cover; /* Makes all images fit in the same width */
+}

css/tablet.css

@@ -38,4 +38,11 @@
   .process-grid {
     grid-template-columns: repeat(2, 1fr); /* tablet */
   }
+
+  /* Gallery page page layout set*/
+  /* Vertical image will show 3 in one row */
+  .vertical {
+    width: 32%; /* Sets image width */
+    object-fit: cover; /* Makes all images fit in the same width */
+  }
 }

gallery.php

@@ -1,10 +1,35 @@
 <?php
-$page_title = "Login";
-include("./nav.php");
-?>
-
-
+$page_title = "Gallery"; // page title
+include("./nav.php"); //include header of the page
+include("./connection.php");
 
+$query = $conn->prepare("SELECT filePath FROM Photos;"); // SQL to get all files from photos database
+$query->execute(); // executes query
+$result = $query->get_result(); // creates an object of results
+//var_dump($result); 
+$user = mysqli_fetch_all($result, MYSQLI_ASSOC); // makes results appear as array
+//var_dump($user);
+?>
+<section class="gallery_page"> 
+<h1>Gallery</h1>
+<figure class="gallery">
+<?php
+// takes each element of the user array
+foreach ($user as $img) {
+    //var_dump($img);
+    $size = getimagesize($img["filePath"]); // gets width and height of the photo
+    // if width is more than height, it assigns horizontal class
+    // otherwise image has vertical class
+    if ($size[0] > $size[1]) {
+        echo '<img class="horizontal" src="'. $img["filePath"] . '" alt="" />'; // show image from found filepath
+    }
+    else
+        echo '<img class="vertical" src="'. $img["filePath"] . '" alt="" />'; // show image from found filepath
+
+}
+?>
+</figure>
+</section>
 <?php
-include("./footer.php");
+include("./footer.php"); //include footer of the page
 ?>

html/index.html

@@ -68,30 +68,30 @@
       <div class="slider_wrapper">
         <figure class="card_list swiper-wrapper">
           <picture class="card_item swiper-slide">
-            <img src="./media/family5.jpg" alt="" class="image" />
+            <img src="./media/family5.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/family4.jpg" alt="" class="image" />
+            <img src="./media/family4.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/DSC01073.jpg" alt="" class="image" />
+            <img src="./media/DSC01073.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/IMG_1490.jpg" alt="" class="image" />
+            <img src="./media/IMG_1490.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/IMG_1678-Edit.jpg" alt="" class="image" />
+            <img src="./media/IMG_1678-Edit.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/Eduard final.jpg" alt="" class="image" />
+            <img src="./media/Eduard final.png" alt="" class="image" />
           </picture>
         </figure>
       </div>
     </section>
     <!-- About -->
     <section id="about">
       <!-- Image of the photographer -->
-      <img src="./media/profile.jpg" alt="" />
+      <img src="./media/profile.png" alt="" />
 
       <!-- Description of the photographer -->
       <article class="about_her">
@@ -111,21 +111,21 @@ <h1>Hello, I'm <span>Ivana Tumbeva</span></h1>
         <article class="portrait">
           <h2>Portrait</h2>
           <figure class="portrait_photo">
-            <img src="./media/DSC01061.jpg" alt="" />
-            <img src="./media/DSC01073.jpg" alt="" />
-            <img class="desktop tablet" src="./media/portrait1.jpg" alt="" />
-            <img class="desktop tablet" src="./media/portrait.jpg" alt="" />
-            <img class="desktop" src="./media/portrait2.jpg" alt="" />
+            <img src="./media/DSC01061.png" alt="" />
+            <img src="./media/DSC01073.png" alt="" />
+            <img class="desktop tablet" src="./media/portrait1.png" alt="" />
+            <img class="desktop tablet" src="./media/portrait.png" alt="" />
+            <img class="desktop" src="./media/portrait2.png" alt="" />
           </figure>
         </article>
         <article class="family_photo">
           <h2>Family Photoshots</h2>
           <figure class="family_photo">
-            <img src="./media/family2.jpg" alt="" />
-            <img src="./media/IMG_1501.jpg" alt="" />
-            <img class="desktop tablet" src="./media/family3.jpg" alt="" />
-            <img class="desktop tablet" src="./media/family4.jpg" alt="" />
-            <img class="desktop" src="./media/family5.jpg" alt="" />
+            <img src="./media/family2.png" alt="" />
+            <img src="./media/IMG_1501.png" alt="" />
+            <img class="desktop tablet" src="./media/family3.png" alt="" />
+            <img class="desktop tablet" src="./media/family4.png" alt="" />
+            <img class="desktop" src="./media/family5.png" alt="" />
           </figure>
         </article>
       </figure>

index.php

@@ -10,22 +10,22 @@
       <div class="slider_wrapper">
         <figure class="card_list swiper-wrapper">
           <picture class="card_item swiper-slide">
-            <img src="./media/family5.jpg" alt="" class="image" />
+            <img src="./media/family5.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/family4.jpg" alt="" class="image" />
+            <img src="./media/family4.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/DSC01073.jpg" alt="" class="image" />
+            <img src="./media/DSC01073.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/IMG_1490.jpg" alt="" class="image" />
+            <img src="./media/IMG_1490.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/IMG_1678-Edit.jpg" alt="" class="image" />
+            <img src="./media/IMG_1678-Edit.png" alt="" class="image" />
           </picture>
           <picture class="card_item swiper-slide">
-            <img src="./media/Eduard final.jpg" alt="" class="image" />
+            <img src="./media/Eduard final.png" alt="" class="image" />
           </picture>
         </figure>
       </div>
@@ -52,21 +52,21 @@
         <article class="portrait">
           <h2>Portrait</h2>
           <figure class="portrait_photo">
-            <img src="./media/DSC01061.jpg" alt="" />
-            <img src="./media/DSC01073.jpg" alt="" />
-            <img class="desktop tablet" src="./media/portrait1.jpg" alt="" />
-            <img class="desktop tablet" src="./media/portrait.jpg" alt="" />
-            <img class="desktop" src="./media/portrait2.jpg" alt="" />
+            <img src="./media/DSC01061.png" alt="" />
+            <img src="./media/DSC01073.png" alt="" />
+            <img class="desktop tablet" src="./media/portrait1.png" alt="" />
+            <img class="desktop tablet" src="./media/portrait.png" alt="" />
+            <img class="desktop" src="./media/portrait2.png" alt="" />
           </figure>
         </article>
         <article class="family_photo">
           <h2>Family Photoshots</h2>
           <figure class="family_photo">
-            <img src="./media/family2.jpg" alt="" />
-            <img src="./media/IMG_1501.jpg" alt="" />
-            <img class="desktop tablet" src="./media/family3.jpg" alt="" />
-            <img class="desktop tablet" src="./media/family4.jpg" alt="" />
-            <img class="desktop" src="./media/family5.jpg" alt="" />
+            <img src="./media/family2.png" alt="" />
+            <img src="./media/IMG_1501.png" alt="" />
+            <img class="desktop tablet" src="./media/family3.png" alt="" />
+            <img class="desktop tablet" src="./media/family4.png" alt="" />
+            <img class="desktop" src="./media/family5.png" alt="" />
           </figure>
         </article>
       </figure>

service.php

@@ -1,5 +1,5 @@
 <?php
-$page_title = "Login";
+$page_title = "Service";
 include("./nav.php");
 ?>