diff --git a/account.php b/account.php
index 5de7189..0460c4e 100644
--- a/account.php
+++ b/account.php
@@ -1,5 +1,5 @@
diff --git a/css/account.css b/css/account.css
new file mode 100644
index 0000000..c943898
--- /dev/null
+++ b/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;
+}
diff --git a/css/booking.css b/css/booking.css
index 03530e6..c5ca7ed 100644
--- a/css/booking.css
+++ b/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 */
}
diff --git a/css/desktop.css b/css/desktop.css
index 0b0c7d8..3a48ea5 100644
--- a/css/desktop.css
+++ b/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 */
+ }
}
diff --git a/css/style.css b/css/style.css
index 033406e..eee49ce 100644
--- a/css/style.css
+++ b/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 */
+}
diff --git a/css/tablet.css b/css/tablet.css
index 1fa9af7..4fbb0dd 100644
--- a/css/tablet.css
+++ b/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 */
+ }
}
diff --git a/gallery.php b/gallery.php
index 5de7189..2429fb0 100644
--- a/gallery.php
+++ b/gallery.php
@@ -1,10 +1,35 @@
-
-
+$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);
+?>
+
+
Gallery
+
+ $size[1]) {
+ echo ''; // show image from found filepath
+ }
+ else
+ echo ''; // show image from found filepath
+
+}
+?>
+
+
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index 9ff760b..f500389 100644
--- a/html/index.html
+++ b/html/index.html
@@ -68,22 +68,22 @@
+ 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
- 
- 
- 
- 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 