homepage content added

app.py

@@ -1,4 +1,4 @@
-from flask import Flask, render_template
+from flask import Flask, render_template, Response
 import requests
 from bs4 import BeautifulSoup
 
@@ -13,6 +13,7 @@ class WikiApp(Flask):
         # Define routes
         self.route('/', methods=['GET'])(self.homepage)
         self.route('/<string:title>', methods=['GET'])(self.page_content)
+        self.route('/favicon.ico')(self.favicon)
         
     def fetch_pages(self, category):
         # Make a request to MediaWiki API using ask action to get all pages in the specified category
@@ -28,20 +29,23 @@ class WikiApp(Flask):
         articles = self.fetch_pages('Articles')
         projects = self.fetch_pages('Projects')
         newsletters = self.fetch_pages('Newsletters')
+        nav_elements = self.fetch_pages('MainNavigation')
         
-        return render_template('homepage.html', articles=articles, projects=projects, newsletters=newsletters)
+        
+        return render_template('homepage.html', articles=articles, projects=projects, newsletters=newsletters, nav_elements=nav_elements)
     
     def page_content(self, title):
         # Make a request to MediaWiki API to get content of a specific page
         response = requests.get(self.MEDIAWIKI_BASE_URL + self.BASE_API, params={'action': 'parse', 'page': title, 'format': 'json'})
         data = response.json()
+        print(title)
         # Extract page title and content
         page_title = data['parse']['title']
         page_content = data['parse']['text']['*']
-        page_content = self.fix_images(page_content)
+        page_content = self.fix_html(page_content)
         return render_template('page_content.html', title=page_title, content=page_content)
     
-    def fix_images(self, page_content):
+    def fix_html(self, page_content):
         soup = BeautifulSoup(page_content, 'html.parser')
 
         # Find all img tags
@@ -73,6 +77,11 @@ class WikiApp(Flask):
         
         return soup.prettify()
     
+    # Route for favicon.ico to prevent Flask from raising an error
+    def favicon(self):
+        return Response('', status=200)
+ 
+
 if __name__ == '__main__':
     app = WikiApp(__name__)
     app.run(debug=True)

static/assets/styles.css

@@ -0,0 +1,105 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+
+/* styles.css */
+body {
+    font-family: Arial, sans-serif;
+	background-color: black;
+	color: white;
+	margin: auto;
+	padding: 20px;
+	font-family: "Space Mono", monospace;
+}
+
+.main-cont {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	height: 100%;
+	gap: 10px;
+}
+
+.header-title {
+	font-size: 40px;
+}
+
+.header-summary {
+	font-size: 15px;
+	font-style: italic;
+}
+
+.nav-cont {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	gap: 5px;
+}
+
+.nav-element-cont {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+	text-transform: lowercase;
+	font-size: 20px;
+}
+
+.nav-element-cont a{
+	text-decoration: none;
+	color: white;
+}
+
+.nav-element {
+	display: flex;
+	flex-direction: row;
+	gap: 10px;
+}
+
+.line {
+	background-color: white;
+	width: 100%;
+	height: 1px;
+}
+
+.spinning-star {
+            transform-origin: center; /* Set the transform origin to the center */
+            animation: spin 5s linear infinite; /* Apply the spin animation */
+}
+
+.section-cont {
+	width: 100%;
+	height: 100%;
+	min-height: 750px;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin-top: 10px;
+	background-color: rgb(54, 54, 255); /* Background color for demonstration */
+	border-radius: 30% 70% 70% 30% / 46% 30% 70% 54% 
+}
+
+.section {
+	width: calc(100% / 3); /* Each div takes up one-third of the container */
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	height: 100%;
+}
+
+.section-title {
+
+}
+
+.section-element {
+	text-transform: lowercase;
+}
+
+.section-element a {
+	text-decoration: none;
+	color: white;
+}
+
+
+/* Keyframes for the spin animation */
+@keyframes spin {
+	0% { transform: rotate(0deg); } /* Initial rotation */
+	100% { transform: rotate(360deg); } /* Final rotation */
+}

templates/homepage.html

@@ -3,27 +3,48 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Homepage</title>
+    <title>concept null</title>
+	<link rel="stylesheet" href="{{ url_for('static', filename='assets/styles.css') }}">
 </head>
 <body>
-    <h1>Homepage</h1>
+	<div class='main-cont'>
-    <h2>Articles</h2>
+		<div class='nav-cont'>
-    <ul>
+			<div class='header-title'>
-        {% for article_title in articles %}
+				CONCEPTNULL
-            <li><a href="{{ url_for('page_content', title=article_title) }}">{{ article_title }}</a></li>
+			</div>
+			<div class='header-summary'>
+				summary about us
+			</div>
+			<div class='nav-element-cont'>
+				{% for nav_element in nav_elements %}
+				<div class='nav-element'><a href="{{ url_for('page_content', title=nav_element) }}">{{ nav_element }}</a><div class='spinning-star'>🞱</div></div>
 				{% endfor %}
-    </ul>
+			</div>
-    <h2>Projects</h2>
+		</div>
-    <ul>
+		<span class='line'></span>
-        {% for project_title in projects %}
+		
-            <li><a href="{{ url_for('page_content', title=project_title) }}">{{ project_title }}</a></li>
+		<div class='section-cont'>
+			<div class='section'>
+				<div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 20px; font-style: italic; object-fit: contain; font-family: monospace; color: white; text-shadow: white 0px 5px 5px; text-decoration: none;">articles&nbsp;<img src="https://i-love-everything.com/buttons/img/7.gif" style="max-height: 32px;"></div></div>
+				{% for article in articles %}
+					<div class='section-element'><a href="{{ url_for('page_content', title=article) }}">{{ article }} ↗</a></div>
 				{% endfor %}
-    </ul>
+			</div>
-    <h2>Newsletters</h2>
+			<div class='section'>
-    <ul>
+				<div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 2.2px; font-size: 20px; font-style: oblique; object-fit: contain; font-family: monospace;  color: white; text-shadow: red 0px 2px 5px;">newsletters<br><img src="https://i-love-everything.com/buttons/img/34.gif" style="max-height: 32px;"></div></div>
-        {% for newsletter_title in newsletters %}
+				{% for newsletter in newsletters %}
-            <li><a href="{{ url_for('page_content', title=newsletter_title) }}">{{ newsletter_title }}</a></li>
+					<div class='section-element'><a href="{{ url_for('page_content', title=newsletter) }}">{{ newsletter }} ↗</a></div>
 				{% endfor %}
-    </ul>
+			</div>
+			<div class='section'>
+				<div class='section-title'><div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 20px; font-style: normal; object-fit: contain; font-family: monospace; color: white; border: 1px solid white;">projects<img src="https://i-love-everything.com/buttons/img/26.gif" style="max-height: 32px;"></div></div>
+				{% for project in projects %}
+					<div class='section-element'><a href="{{ url_for('page_content', title=project) }}">{{ project }} ↗</a></div>
+				{% endfor %}
+			</div>
+		</div>
+
+		<div style="display: inline-flex; text-align: center; justify-content: center; align-items: center; line-height: 100%; padding: 3.3px; font-size: 12px; font-style: normal; object-fit: contain; background: rgb(0, 0, 0); color: rgb(255, 255, 255); text-shadow: rgb(8, 0, 255) 0px 3px 3px; flex-wrap: wrap;"><span style="display:flex;">hypertext connection<img src="https://i-love-everything.com/buttons/img/67.gif" style="max-height: 32px;"></span><span style="width:100%;text-shadow:0 0 5px #fff">𓆝 𓆟 𓆞 𓆝</span></div>
+	</div>
 </body>
 </html>