location page added

app.py

@@ -37,6 +37,9 @@ def event_article(type, title):
     data = get_content_by_title(title, type)
     return render_template('article.html', title=title, content=data)
 
+@app.route('/locations')
+def locations():
+    return render_template('locations.html', title='Locations')
     
 def get_all_content(type):
     entries = client.entries({'content_type': type})

public/css/styles.css

@@ -116,7 +116,7 @@ hr {
 	padding: 10px;
 	padding-left: 25px;
 	padding-right: 25px;
-	font-family: 'Syne Mono', monospace;
+	/* font-family: 'Syne Mono', monospace; */
 	color: white;
 }
 
@@ -133,7 +133,6 @@ hr {
 	padding: 10px;
 	padding-left: 25px;
 	padding-right: 25px;
-	font-family: 'Syne Mono', monospace;
 	color: white;
 	border-color: #0075FF;
 	transition: transform 0.7s ease-out;
@@ -251,7 +250,6 @@ hr {
 	font-size: 30px;
 	gap: 20px;
 	height: 100px;
-	font-family: 'Syne Mono', monospace;
 	color: #0075FF;
 	align-items: center;
 	overflow-x: scroll;
@@ -270,6 +268,7 @@ hr {
 	display: flex;
 	flex-direction: row;
 	gap:10px;
+	font-family: 'Syne Mono', monospace;
 }
 
 .page-info-title {
@@ -350,6 +349,92 @@ hr {
 	transition: opacity 1s ease-in-out; /* 1s transition */
 }
 
+#main-container-locations {
+	display: flex;
+	flex-direction: row;
+	gap: 0px;
+	overflow-y: hidden;
+    box-sizing: border-box; /* Include padding in the height calculation */
+	flex: 1;
+	flex-shrink: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#location-list {
+	display: flex;
+	flex-basis: 45%; /* Initial width */
+    flex-grow: 0;    /* Do not grow beyond the flex-basis */
+    flex-shrink: 0;  /* Do not shrink below the flex-basis */
+	background-color: white;
+	flex-direction: column;
+	padding-top: 50px;
+	gap: 50px;
+}
+
+#location-button-list {
+	padding-left: 50px;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap:20px 10px;
+}
+
+#location-information {
+	padding-left: 50px;
+	display: flex;
+	flex-direction: column;
+	gap: 20px;
+}
+
+#location-information a{
+	width: fit-content;
+}
+
+#location-images {
+	display: flex;
+	flex-basis: 55%; /* Initial width */
+    flex-grow: 0;    /* Do not grow beyond the flex-basis */
+    flex-shrink: 0;  /* Do not shrink below the flex-basis */
+	align-items: center; /* Center align images if they have different sizes */
+    justify-content: center; /* Center align horizontally */
+    overflow: hidden; /* Ensures overflow content is not shown */
+}
+
+#location-image {
+	width: 100%;
+	height: 100%;
+	background-color: aqua;
+	
+}
+
+#location-image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+
+.location-button {
+	font-size: 30px;
+	border: 1px solid;
+	border-radius: 30px;
+	padding: 10px;
+	padding-left: 25px;
+	padding-right: 25px;
+	border-color: #0075FF;
+	color: #0075FF;
+	width: fit-content;
+	cursor: pointer;
+}
+
+#location-text {
+	font-size: 30px;
+	padding: 10px;
+}
+
+
+
 @keyframes fadeInUp {
 	0% {
 		transform: translateY(100%);

public/js/locations.js

@@ -0,0 +1,29 @@
+// Example location data
+const locationData = {
+    'digital-hub': {
+        text: '10-13 Thomas Street',
+        imageUrl: '/public/images/locations/digital-hub.png'
+    },
+    'pallas-projects': {
+        text: '115-117, The Coombe, The Liberties, Dublin, D08 A970',
+        imageUrl: 'public/images/locations/pallas.png'
+    }
+    // Add more locations as needed
+};
+
+// Function to update the content
+function updateLocationContent(locationKey) {
+    const location = locationData[locationKey];
+    if (location) {
+        document.getElementById('location-text').innerText = location.text;
+        document.getElementById('location-img').src = location.imageUrl;
+    }
+}
+
+// Add event listeners to buttons
+document.querySelectorAll('.location-button').forEach(button => {
+    button.addEventListener('click', (event) => {
+        const locationKey = event.currentTarget.getAttribute('data-location');
+        updateLocationContent(locationKey);
+    });
+});

templates/index.html

@@ -13,18 +13,19 @@
 			</div>
 			<div id="hyperlink-container">
 				<a href="/exhibitions"><div class="hyperlink">
-					<div>/</div>
+					
 					<div>Exhibitions</div>
 				</div></a>
 				<a href="/events"><div class="hyperlink">
-					<div>/</div>
+					
 					<div>Events</div>
 				</div></a>
 				<a href="/conferences"><div class="hyperlink">
-					<div>/</div>
+					
 					<div>Conferences</div>
 				</div></a>
 			</div>
+			
 		</div>
 	</div>
 	<div id="container"></div>

templates/list.html

@@ -6,9 +6,9 @@
 <div id="main-wrapper">
 	{% include '_nav.html' %}
 	<div id="page-header">
-		<a href="/exhibitions"><div class="hyperlink-header" id="exhibitions">/ Exhibitions</div></a>
-		<a href="/events"><div class="hyperlink-header" id="events">/ Events</div></a>
-		<a href="/conferences"><div class="hyperlink-header" id="conferences">/ Conferences</div></a>
+		<a href="/exhibitions"><div class="hyperlink-header" id="exhibitions">Exhibitions</div></a>
+		<a href="/events"><div class="hyperlink-header" id="events">Events</div></a>
+		<a href="/conferences"><div class="hyperlink-header" id="conferences">Conferences</div></a>
 	</div>
 	<hr>
 	<div id="main-container">

templates/locations.html

@@ -0,0 +1,33 @@
+{% extends "base.html" %}
+
+{% block title %}{{ '| '+ title }}{% endblock %}
+
+{% block content %}
+<div id="main-wrapper">
+	{% include '_nav.html' %}
+	<div id="main-container-locations">
+		<div id="location-list">
+			<div id="location-button-list">
+				<div class="location-button" data-location="digital-hub">The Digital Hub</div>
+				<div class="location-button" data-location="pallas-projects">Pallas Projects</div>
+			</div>
+			<div id="location-information">
+				<div id="location-text">
+					10-13 Thomas Street
+				</div>
+				<a target="_blank" href="https://www.google.com/maps/dir//115-117,+The+Coombe,+The+Liberties,+Dublin,+D08+A970/@53.3391179,-6.3569591,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x48670e89423ed249:0x8aa3669566840ff9!2m2!1d-6.274559!2d53.3391463?entry=ttu">
+					<div class="location-button">↳ Directions</div>
+				</a>
+			</div>
+		</div>
+		<div id="location-images">
+			<div id="location-image">
+				<img id="location-img" src="{{ url_for('static', filename='images/locations/digital-hub.png') }}">
+			</div>
+		</div>	
+	</div>
+</div>
+
+<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
+<script type="module" src="{{ url_for('static', filename='js/locations.js') }}"></script>
+{% endblock content %}