diff --git a/app.py b/app.py index 07ba560..d96c44f 100644 --- a/app.py +++ b/app.py @@ -36,7 +36,10 @@ def conference(): 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}) diff --git a/public/css/styles.css b/public/css/styles.css index e737add..fe96a0e 100644 --- a/public/css/styles.css +++ b/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%); diff --git a/public/images/locations/digital-hub.png b/public/images/locations/digital-hub.png new file mode 100644 index 0000000..ee816dc Binary files /dev/null and b/public/images/locations/digital-hub.png differ diff --git a/public/images/locations/pallas.png b/public/images/locations/pallas.png new file mode 100644 index 0000000..843cf01 Binary files /dev/null and b/public/images/locations/pallas.png differ diff --git a/public/js/locations.js b/public/js/locations.js new file mode 100644 index 0000000..b8d1249 --- /dev/null +++ b/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); + }); +}); diff --git a/templates/index.html b/templates/index.html index 6bc0a4f..7265cde 100644 --- a/templates/index.html +++ b/templates/index.html @@ -13,18 +13,19 @@ +
diff --git a/templates/list.html b/templates/list.html index 5102ab3..112c26c 100644 --- a/templates/list.html +++ b/templates/list.html @@ -6,9 +6,9 @@
{% include '_nav.html' %}
- - - + + +
diff --git a/templates/locations.html b/templates/locations.html new file mode 100644 index 0000000..42aab8b --- /dev/null +++ b/templates/locations.html @@ -0,0 +1,33 @@ +{% extends "base.html" %} + +{% block title %}{{ '| '+ title }}{% endblock %} + +{% block content %} +
+ {% include '_nav.html' %} +
+
+
+
The Digital Hub
+
Pallas Projects
+
+
+
+ 10-13 Thomas Street +
+ +
↳ Directions
+ +
+
+
+
+ +
+
+
+
+ + + +{% endblock content %} \ No newline at end of file