article page completed

app.py

@@ -34,8 +34,7 @@ def conference():
 @app.route('/<type>/<title>')
 def event_article(type, title):
     data = get_content_by_title(title, type)
-    print(data)
-    return render_template('article.html', title=title)
+    return render_template('article.html', title=title, content=data)
     
     
 def get_all_content(type):
@@ -61,10 +60,12 @@ def get_all_content(type):
     return content_list
 
 def get_content_by_title(title, pre_type):
+    print(title)
     content_list = []
     type = pre_type[:-1]
-    entries = client.entries({'query': title, 'limit': 1})
-    for entry in entries:
+    entries = client.entries({'query': title, 'limit': 5})
+    exact_matches = [entry for entry in entries if getattr(entry, f'title_of_{type}') == title]
+    for entry in exact_matches:
        
         date_time_obj = getattr(entry, f'{type}_date_time')
         date_str, time_str = format_datetime(date_time_obj)
@@ -81,6 +82,7 @@ def get_content_by_title(title, pre_type):
             'location': getattr(entry, f'{type}_location')
         }
         content_list.append(content)
+    print(content_list)
     return content_list
 
 def format_datetime(dt):

public/css/styles.css

@@ -221,6 +221,75 @@ hr {
 	padding-bottom: 20px;
 	padding-left: 50px;
 	font-size: 30px;
+	gap: 50px;
+	height: 100px;
+	font-family: 'Syne Mono', monospace;
+	color: #0075FF;
+	align-items: center;
+}
+
+.page-info-cont {
+	display: flex;
+	flex-direction: row;
+	gap:10px;
+}
+
+.page-info-title {
+	font-size: 30px;
+	font-weight: 600;
+}
+
+.page-info-entry {
+	font-family: 'Inter', sans-serif;
+	color: black;
+	font-size: 30px;
+}
+
+#article-container {
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	padding-top: 50px;
+	gap: 40px
+}
+
+#article-image {
+	flex: 6;
+	display: flex;
+	justify-content: space-evenly;
+	align-items: baseline;
+}
+
+#article-image img {
+	max-height:100%; max-width:100%;
+	object-fit: contain;
+}
+
+#article-text {
+	flex: 4;
+	display: flex;
+	flex-direction: column;
+	gap: 40px;
+	font-size: 26px;
+	line-height: 40px;
+	width: 100%;	
+}
+
+#article-title {
+	font-size: 40px;
+	font-family: 'Syne Mono', monospace;
+	color: #0075FF;
+}
+
+#article-book {
+	font-size: 30px;
+	font-family: 'Syne Mono', monospace;
+	color: #0075FF;
+	padding-bottom: 50px;
+}
+
+#article-artists {
 	font-family: 'Syne Mono', monospace;
 	color: #0075FF;
 }
@@ -252,6 +321,17 @@ hr {
 		padding-left: 5vw;
 		width: 80%;
 	}
+
+	#article-container {
+		flex-direction: column;
+	}
+
+	#page-header {
+		overflow: scroll;
+		padding-right: 20px;
+		padding-left: 20px;
+		white-space: nowrap;
+	}
 }
 
 /* Mobile breakpoint (less than 768px) */
@@ -314,4 +394,65 @@ hr {
 		padding-left: 20px;
 		padding-right: 20px;
 	}
+
+	.list{
+		width: 100%;
+	}
+
+	#page-header {
+		font-size: 20px;
+	}
+
+	#article-container {
+		flex-direction: column;
+		width: auto;
+		margin-left: 20px;
+		margin-right: 20px;
+		align-items: center;
+		padding-top: 25px;
+	}
+
+	#article-image {
+		order: 1;
+		flex: 0;
+	}
+
+	#article-text {
+		order: 2;
+		gap: 10px;
+	}
+
+	#article-title {
+		font-size: 20px;
+		font-weight: 700;
+	}
+
+	#article-artists {
+		font-size: 18px;
+	}
+
+	#article-information {
+		font-size: 18px;
+	}
+
+	#article-book {
+		font-size: 20px;
+	}
+
+	#page-header {
+		overflow: scroll;
+		height: 20px;
+		padding-right: 20px;
+		padding-left: 20px;
+		white-space: nowrap;
+		scroll-snap-align: center;
+	}
+
+	.page-info-title {
+		font-size: 20px;
+	}
+
+	.page-info-entry {
+		font-size: 20px;
+	}
 }

public/js/list.js

@@ -16,7 +16,7 @@ import { randFloat } from 'three/src/math/MathUtils.js';
 	let cubeGroup = []
 	let instancedMesh, dummy, count
 
-	const texture = new THREE.TextureLoader().load("public/images/dither.png")
+	const texture = new THREE.TextureLoader().load("public/images/test.png")
 	texture.minFilter = THREE.NearestFilter
 	texture.colorSpace = THREE.SRGBColorSpace;
 	texture.wrapS = THREE.RepeatWrapping;
@@ -100,7 +100,7 @@ import { randFloat } from 'three/src/math/MathUtils.js';
 
 	function AddLights() {
 		// Add Ambient Light
-		const ambientLight = new THREE.AmbientLight(0xffffff, 10); // Soft white light
+		const ambientLight = new THREE.AmbientLight(0xffffff, 5); // Soft white light
 		scene.add(ambientLight);
 	
 		// Add Directional Light

templates/_nav.html

@@ -1,5 +1,5 @@
 <div id="nav-bar">
     <a href="/"><div class="nav-element">BETA FESTIVAL (2024)</div></a>
-    <div class="nav-element">NOV 1 - 2 | DUBLIN</div>
+    <div class="nav-element">NOV 1 - 3 | DUBLIN</div>
 </div>
 <hr>

templates/article.html

@@ -6,14 +6,38 @@
 <div id="main-wrapper">
 	{% include '_nav.html' %}
 	<div id="main-container">
+		{% for article in content %}
 		<div id="article-container">
-		
-		</div>		
+			<div id="article-text">
+				<div id="article-title">{{ article.title }}</div>
+				<div id="article-artists">{{ article.artists | join(', ') }}</div>
+				<div id="article-information">{{ article.information }}</div>
+				<div id="article-book">BOOK ↗</div>
+			</div>
+			<div id="article-image">
+				<img src="{{ article.image }}">
+			</div>
+		</div>
+		{% endfor %}		
 	</div>
 	<hr>
 	<div id="page-header">
-		<div>/{{ title }}</div>
+		{% for article in content %}
+		<div class="page-info-cont">
+			<div class="page-info-title">/Date:</div>
+			<div class="page-info-entry">{{ article.date }}</div>
+		</div>
+		<div class="page-info-cont">
+			<div class="page-info-title">/Time:</div>
+			<div class="page-info-entry">{{ article.time }}</div>
+		</div>
+		<div class="page-info-cont">
+			<div class="page-info-title">/Location:</div>
+			<div class="page-info-entry">{{ article.location[0] }}</div>
+		</div>
+		{% endfor %}	
 	</div>
 </div>
 <div id="container"></div>	
+<script type="module" src="{{ url_for('static', filename='js/skybox.js') }}"></script>
 {% endblock content %}