From 6a66f646357c06cd78b17a69f10d0f07353564a4 Mon Sep 17 00:00:00 2001
From: olima957 <olima957@student.liu.se>
Date: Wed, 16 Oct 2024 21:57:38 +0200
Subject: [PATCH] Laddade upp techniques.html
---
MyPortfolio/data.json | 14 +--
MyPortfolio/myFlaskProject.py | 36 +++++-
MyPortfolio/static/style/main.css | 126 +++++++++++++++++++++
MyPortfolio/templates/index.html | 9 +-
MyPortfolio/templates/list.html | 23 ++--
MyPortfolio/templates/project_details.html | 53 +++++----
MyPortfolio/templates/techniques.html | 93 +++++++++++++++
MyPortfolio/templates/template.html | 12 +-
8 files changed, 315 insertions(+), 51 deletions(-)
create mode 100644 MyPortfolio/templates/techniques.html
diff --git a/MyPortfolio/data.json b/MyPortfolio/data.json
index 157fd70..b5d270a 100644
--- a/MyPortfolio/data.json
+++ b/MyPortfolio/data.json
@@ -3,7 +3,7 @@
"start_date": "2009-09-05",
"short_description": "A python data module script tester written in Python.",
"course_name": "OK\u00c4NT",
- "long_description": "no no no",
+ "long_description": "This python program tests different module scripts which is useful for something!",
"group_size": 2,
"academic_credits": "WUT?",
"lulz_had": "many",
@@ -22,7 +22,7 @@
"start_date": "2009-09-07",
"short_description": "Spreadsheet program for economics.",
"course_name": "OK\u00c4NT",
- "long_description": "no no no",
+ "long_description": "This is a spreadsheet program, perfect for when you need to budget your snus!",
"group_size": 4,
"academic_credits": "WUT?",
"lulz_had": "few",
@@ -43,7 +43,7 @@
"start_date": "2009-09-08",
"short_description": "A keygen for spotify. A break from the ads!",
"course_name": "OK\u00c4NT",
- "long_description": "no no no",
+ "long_description": "This program generates product-keys for spotify to emancipate the music starved mob from ad tyrrany!",
"group_size": 6,
"academic_credits": "WUT?",
"lulz_had": "medium",
@@ -63,7 +63,7 @@
"start_date": "2009-09-09",
"short_description": "A twitter re-skin for X.",
"course_name": "HOHO",
- "long_description": "no no no",
+ "long_description": "Reverts the changes to the graphical interfaces by Musk Inc.",
"group_size": 8,
"academic_credits": "WUT?",
"lulz_had": "over 9000",
@@ -85,7 +85,7 @@
"start_date": "2009-09-10",
"short_description": "Swedish neovim plugin",
"course_name": "HOHO",
- "long_description": "no no no",
+ "long_description": "Allows for swedish to autocompleted and spellchecked in NeoVim!",
"group_size": 8,
"academic_credits": "WUT?",
"lulz_had": "over 9000",
@@ -106,7 +106,7 @@
"start_date": "2009-09-12",
"short_description": "A mod manager for minecraft forge.",
"course_name": "HOHO",
- "long_description": "no no no",
+ "long_description": "The need for CurseForge & Modrinth is no more! Now you can use MMMMM for all your modding needs!",
"group_size": 8,
"academic_credits": "WUT?",
"lulz_had": "over 9000",
@@ -116,7 +116,7 @@
"java",
"c"
],
- "project_name": "Minecraft Mod Manager",
+ "project_name": "Modded Minecraft Multiple Mod Manager",
"course_id": " \"",
"end_date": "2009-09-18",
"project_id": 6,
diff --git a/MyPortfolio/myFlaskProject.py b/MyPortfolio/myFlaskProject.py
index aadc3af..bdc6129 100644
--- a/MyPortfolio/myFlaskProject.py
+++ b/MyPortfolio/myFlaskProject.py
@@ -9,22 +9,48 @@ data = load('data.json')
def index():
return render_template('index.html')
-@app.route("/list.html", methods=['GET', 'POST'])
+@app.route("/list", methods=['GET', 'POST'])
def list():
search_query = request.form.get('search', '')
sort_by = request.form.get('sort_by', 'start_date')
sort_order = request.form.get('sort_order', 'desc')
- filtered_projects = search(data, sort_by=sort_by, sort_order=sort_order, search=search_query)
- return render_template('list.html', projects=filtered_projects, search_query=search_query, sort_by=sort_by, sort_order=sort_order)
+ filtered_projects = search(load('data.json'), sort_by=sort_by, sort_order=sort_order, search=search_query)
+ return render_template('list.html',
+ projects=filtered_projects,
+ search_query=search_query,
+ sort_by=sort_by,
+ sort_order=sort_order)
@app.route("/project/<int:project_id>")
def project_details(project_id):
- project = get_project(data, project_id)
+ project = get_project(load('data.json'), project_id)
if project:
return render_template('project_details.html', project=project)
else:
- return "Project not found", 404
+ return "404: Project not found", 404
+
+@app.route("/techniques", methods=['GET', 'POST'])
+def techniques():
+
+ techniques = get_technique_stats(load('data.json'))
+
+ search_query = request.form.get('search', '')
+ sort_by = request.form.get('sort_by', 'start_date')
+ sort_order = request.form.get('sort_order', 'desc')
+ techniques_search = request.form.getlist('technique')
+
+ #print(techniques_search)
+
+ filtered_projects = search(load('data.json'), sort_by=sort_by, sort_order=sort_order, techniques=techniques_search, search=search_query)
+
+ return render_template('techniques.html',
+ techniques = techniques,
+ techniques_search = techniques_search,
+ projects=filtered_projects,
+ search_query=search_query,
+ sort_by=sort_by,
+ sort_order=sort_order)
if __name__ == "__main__":
app.run(debug=True)
diff --git a/MyPortfolio/static/style/main.css b/MyPortfolio/static/style/main.css
index 8016298..411afe7 100644
--- a/MyPortfolio/static/style/main.css
+++ b/MyPortfolio/static/style/main.css
@@ -68,9 +68,68 @@ header a {
}
+.techniques-content-container {
+ position: relative;
+ overflow: auto;
+
+ /* STYLING */
+ background:rgba(15,15,15,0.9);
+
+ /* SIZING */
+ min-height: 75%;
+ width: 100%;
+
+ display: flex;
+
+ flex-direction: row;
+}
+
+.techniques-list-search-form {
+
+ background:rgba(10,10,10,0.9);
+
+ position: relative;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+
+ width: 30%;
+ height: 100%;
+ padding-top: 20px;
+}
+
+.techniques-project-table {
+ background:rgba(10,10,10,0.9);
+ height: 100vh;
+ width: 120vh;
+
+ display: flex;
+
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ align-items: space-evenly;
+ align-content: flex-start;
+
+
+ padding: 10px;
+}
+
+.searchbar {
+
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.checkboxes {
+
+ position: relative;
+ column-count: 4;
+ font-size: 12px;
+
+}
.content-container {
@@ -85,6 +144,14 @@ header a {
width: 100%;
}
+.list-search-form {
+ position: relative;
+ overflow: auto;
+
+ display: flex;
+ justify-content: center;
+}
+
/* LIST.HTML */
.project-table {
@@ -140,6 +207,8 @@ header a {
.project-desc {
font-size: small;
margin-left: 10px;
+ text-decoration: dotted;
+ font-size: 11px;
}
/* INDEX.HTML */
@@ -195,6 +264,63 @@ header a {
/* INDEX.HTML */
+
+/* PROJECT_DETAILS.HTML */
+
+.project-showcase {
+
+ background:rgba(10,10,10,0.9);
+
+ margin-left: auto;
+ margin-right: auto;
+
+ display: flex;
+ flex-direction: column;
+
+ width: 50%;
+ height: 65vh;
+
+ align-items: center;
+}
+
+.project-showcase ul {
+ margin: 0;
+
+}
+
+
+.project-showcase a {
+
+ color: whitesmoke;
+
+}
+
+.showcase-desc {
+ margin-left: 13%;
+}
+
+.project-showcase img {
+
+ object-fit:scale-down;
+ width: 25%;
+ height: 25%;
+
+}
+
+.project-stats {
+ display: flex;
+ width: 100%;
+ align-content: center;
+ margin-top: 85px;
+
+ margin-bottom: 125px;
+}
+
+
+/* PROJECT_DETAILS.HTML */
+
+
+
footer {
/* STYLING */
background:rgba(15,15,15,0.5);
diff --git a/MyPortfolio/templates/index.html b/MyPortfolio/templates/index.html
index 0a0b238..0801121 100644
--- a/MyPortfolio/templates/index.html
+++ b/MyPortfolio/templates/index.html
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html>
<head>
+ <title>Portfol.io</title>
<link rel="stylesheet" href="../static/style/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -10,7 +11,7 @@
<header>
<ul>
<li><a href="/">Home</a></li>
- <li><a href="techniques.html">Techniques</a></li>
+ <li><a href="/techniques">Techniques</a></li>
<li><pre class="logo">
██████╗ ██╗ ██████╗
██╔â•â•â–ˆâ–ˆâ•—██║██╔â•â•â•â–ˆâ–ˆâ•—
@@ -18,7 +19,7 @@
██╔â•â•â•â• ██║██║ ██║
██║██╗ ██║╚██████╔â•
â•šâ•â•â•šâ•â• â•šâ•â• â•šâ•â•â•â•â•â•</pre></li>
- <li><a href="list.html">Projects</a></li>
+ <li><a href="/list">Projects</a></li>
<li><a href="https://github.com/olma957">GitHub</a></li>
</ul>
</header>
@@ -56,8 +57,8 @@
</p>
<p>Links:<br>
<a href="/">Home</a><br>
- <a href="techniques.html">Techniques</a><br>
- <a href="list.html">Projects</a><br>
+ <a href="/techniques">Techniques</a><br>
+ <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a>
</p>
</footer>
diff --git a/MyPortfolio/templates/list.html b/MyPortfolio/templates/list.html
index 96eef4e..1f26ee1 100644
--- a/MyPortfolio/templates/list.html
+++ b/MyPortfolio/templates/list.html
@@ -8,15 +8,22 @@
<header>
<ul>
<li><a href="/">Home</a></li>
- <li><a href="techniques.html">Techniques</a></li>
- <li><a href="list.html">Projects</a></li>
+ <li><a href="/techniques">Techniques</a></li>
+ <li><pre class="logo">
+██████╗ ██╗ ██████╗
+██╔â•â•â–ˆâ–ˆâ•—██║██╔â•â•â•â–ˆâ–ˆâ•—
+██████╔â•â–ˆâ–ˆâ•‘██║ ██║
+██╔â•â•â•â• ██║██║ ██║
+██║██╗ ██║╚██████╔â•
+â•šâ•â•â•šâ•â• â•šâ•â• â•šâ•â•â•â•â•â•</pre></li>
+ <li><a href="/list">Projects</a></li>
<li><a href="https://github.com/olma957">GitHub</a></li>
</ul>
</header>
<div class="content-container">
<!-- Search and Sort Form -->
- <form method="POST" action="/list.html">
+ <form class="list-search-form"method="POST" action="/list">
<input type="text" name="search" placeholder="Search projects" value="{{ search_query }}">
<select name="sort_by">
<option value="start_date" {% if sort_by == 'start_date' %}selected{% endif %}>Start Date</option>
@@ -35,11 +42,9 @@
<div class="project-table">
{% for p in projects %}
<div class="project">
- <a href="/project/{{ p['project_id'] }}">
- <img class="project-img" src="{{ p['small_image'] }}">
- <p class="project-title"> >{{ p['project_name'] }} </p>
+ <img class="project-img" src="{{ p['small_image'] }}", alt="Project Thumbnail">
+ <a href="/project/{{ p['project_id'] }}" class="project-title"> »{{ p['project_name'] }} </a>
<p class="project-desc"> {{ p['short_description'] }}</p>
- </a>
</div>
{% endfor %}
</div>
@@ -55,8 +60,8 @@
</p>
<p>Links:<br>
<a href="/">Home</a><br>
- <a href="techniques.html">Techniques</a><br>
- <a href="list.html">Projects</a><br>
+ <a href="/techniques">Techniques</a><br>
+ <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a>
</p>
</footer>
diff --git a/MyPortfolio/templates/project_details.html b/MyPortfolio/templates/project_details.html
index 4bb6004..3f11d6a 100644
--- a/MyPortfolio/templates/project_details.html
+++ b/MyPortfolio/templates/project_details.html
@@ -8,29 +8,42 @@
<header>
<ul>
<li><a href="/">Home</a></li>
- <li><a href="techniques.html">Techniques</a></li>
- <li><a href="list.html">Projects</a></li>
+ <li><a href="/techniques">Techniques</a></li>
+ <li><pre class="logo">
+██████╗ ██╗ ██████╗
+██╔â•â•â–ˆâ–ˆâ•—██║██╔â•â•â•â–ˆâ–ˆâ•—
+██████╔â•â–ˆâ–ˆâ•‘██║ ██║
+██╔â•â•â•â• ██║██║ ██║
+██║██╗ ██║╚██████╔â•
+â•šâ•â•â•šâ•â• â•šâ•â• â•šâ•â•â•â•â•â•</pre></li>
+ <li><a href="/list">Projects</a></li>
<li><a href="https://github.com/olma957">GitHub</a></li>
</ul>
</header>
<div class="content-container">
- <h1>{{ project['project_name'] }}</h1>
- <img src="{{ project['big_image'] }}" alt="Project Image">
-
- <ul>
- <li><strong>Course Name:</strong> {{ project['course_name'] }}</li>
- <li><strong>Group Size:</strong> {{ project['group_size'] }}</li>
- <li><strong>Start Date:</strong> {{ project['start_date'] }}</li>
- <li><strong>End Date:</strong> {{ project['end_date'] }}</li>
- <li><strong>Techniques Used:</strong> {{ project['techniques_used'] | join(', ') }}</li>
- <li><strong>Description:</strong> {{ project['long_description'] }}</li>
- <li><strong>Academic Credits:</strong> {{ project['academic_credits'] }}</li>
- <li><strong>Lulz Had:</strong> {{ project['lulz_had'] }}</li>
- <li><strong>External Link:</strong> <a href="{{ project['external_link'] }}" target="_blank">{{ project['external_link'] }}</a></li>
- </ul>
-
- <a href="/list.html">Back to Projects</a>
+ <div class="project-showcase">
+ <h1>{{ project['project_name'] }}</h1>
+ <img class="showcase-img" src="{{ project['small_image'] }}" alt="Project Image">
+
+ <div class="project-stats">
+ <ul>
+ <li><strong>Course Name:</strong> {{ project['course_name'] }}</li>
+ <!--<li><strong>Group Size:</strong> {{ project['group_size'] }}</li> -->
+ <li><strong>Start Date:</strong> {{ project['start_date'] }}</li>
+ <li><strong>End Date:</strong> {{ project['end_date'] }}</li>
+ <li><strong>Techniques:</strong> {{ project['techniques_used'] | join(', ') }}</li>
+ <!-- <li><strong>Academic Credits:</strong> {{ project['academic_credits'] }}</li> -->
+ <!--<li><strong>Lulz Had:</strong> {{ project['lulz_had'] }}</li> -->
+ <li><strong>External Link:</strong> <a href="{{ project['external_link'] }}" target="_blank">{{ project['external_link'] }}</a></li>
+ <li><strong>Description:</strong> {{ project['long_description'] }}</li>
+ </ul>
+ </div>
+
+
+
+ <button onclick="history.back()">» Back</button>
+ </div>
</div>
<footer>
@@ -43,8 +56,8 @@
</p>
<p>Links:<br>
<a href="/">Home</a><br>
- <a href="techniques.html">Techniques</a><br>
- <a href="list.html">Projects</a><br>
+ <a href="/techniques">Techniques</a><br>
+ <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a>
</p>
</footer>
diff --git a/MyPortfolio/templates/techniques.html b/MyPortfolio/templates/techniques.html
new file mode 100644
index 0000000..3b23220
--- /dev/null
+++ b/MyPortfolio/templates/techniques.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="stylesheet" href="../static/style/main.css">
+ <title>Techniques</title>
+</head>
+<body>
+ <header>
+ <ul>
+ <li><a href="/">Home</a></li>
+ <li><a href="/techniques">Techniques</a></li>
+ <li><pre class="logo">
+██████╗ ██╗ ██████╗
+██╔â•â•â–ˆâ–ˆâ•—██║██╔â•â•â•â–ˆâ–ˆâ•—
+██████╔â•â–ˆâ–ˆâ•‘██║ ██║
+██╔â•â•â•â• ██║██║ ██║
+██║██╗ ██║╚██████╔â•
+â•šâ•â•â•šâ•â• â•šâ•â• â•šâ•â•â•â•â•â•</pre></li>
+ <li><a href="/list">Projects</a></li>
+ <li><a href="https://github.com/olma957">GitHub</a></li>
+ </ul>
+ </header>
+
+
+
+
+
+ <div class="techniques-content-container">
+ <!-- Search and Sort Form -->
+ <form class="techniques-list-search-form" method="POST" action="/techniques">
+
+ <div class="searchbar">
+ <input type="text" name="search" placeholder="Search projects" value="{{ search_query }}">
+ <select name="sort_by">
+ <option value="start_date" {% if sort_by == 'start_date' %}selected{% endif %}>Start Date</option>
+ <option value="project_name" {% if sort_by == 'project_name' %}selected{% endif %}>Project Name</option>
+ <option value="group_size" {% if sort_by == 'group_size' %}selected{% endif %}>Group Size</option>
+ <!--<option value="lulz_had" {% if sort_by == 'lulz_had' %}selected{% endif %}>Lulz Had</option>-->
+ </select>
+ <select name="sort_order">
+ <option value="desc" {% if sort_order == 'desc' %}selected{% endif %}>Descending</option>
+ <option value="asc" {% if sort_order == 'asc' %}selected{% endif %}>Ascending</option>
+ </select>
+ <button type="submit">Search</button>
+ </div>
+
+ <ul class="checkboxes">
+ {% for t in techniques %}
+
+ <li>
+
+ {% if t in techniques_search %}
+ <input type="checkbox" name="technique" value="{{ t }}" checked> {{ t }}
+ {% else %}
+ <input type="checkbox" name="technique" value="{{ t }}"> {{ t }}
+ {% endif %}
+ </li>
+
+ {% endfor %}
+ </ul>
+
+
+ </form>
+
+ <!-- Project List -->
+ <div class="techniques-project-table">
+ {% for p in projects %}
+ <div class="project">
+ <img class="project-img" src="{{ p['small_image'] }}", alt="Project Thumbnail">
+ <a href="/project/{{ p['project_id'] }}" class="project-title"> »{{ p['project_name'] }} </a>
+ <p class="project-desc"> {{ p['short_description'] }}</p>
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+
+ <footer>
+ <p>Authors:<br>
+ <a href="mailto:olima957@student.liu.se">Oliwer Mattsson: olima957@student.liu.se</a><br>
+ <a href="mailto:taiku983@student.liu.se">Taif Kurji: taiku983@student.liu.se</a>
+ </p>
+ <p>License:<br>
+ <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
+ </p>
+ <p>Links:<br>
+ <a href="/">Home</a><br>
+ <a href="/techniques">Techniques</a><br>
+ <a href="/list">Projects</a><br>
+ <a href="https://github.com/olma957">GitHub</a>
+ </p>
+ </footer>
+</body>
+</html>
diff --git a/MyPortfolio/templates/template.html b/MyPortfolio/templates/template.html
index 0085228..fb07d6e 100644
--- a/MyPortfolio/templates/template.html
+++ b/MyPortfolio/templates/template.html
@@ -9,8 +9,8 @@
<body>
<header>
<ul>
- <li><a href="index.html">Home</a></li>
- <li><a href="techniques.html">Techniques</a></li>
+ <li><a href="/">Home</a></li>
+ <li><a href="/techniques">Techniques</a></li>
<li><pre class="logo">
██████╗ ██╗ ██████╗
██╔â•â•â–ˆâ–ˆâ•—██║██╔â•â•â•â–ˆâ–ˆâ•—
@@ -18,7 +18,7 @@
██╔â•â•â•â• ██║██║ ██║
██║██╗ ██║╚██████╔â•
â•šâ•â•â•šâ•â• â•šâ•â• â•šâ•â•â•â•â•â•</pre></li>
- <li><a href="list.html">Projects</a></li>
+ <li><a href="/list">Projects</a></li>
<li><a href="https://github.com/olma957">GitHub</a></li>
</ul>
</header>
@@ -35,9 +35,9 @@
<a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
</p>
<p>Links:<br>
- <a href="index.html">Home</a><br>
- <a href="techniques.html">Techniques</a><br>
- <a href="list.html">Projects</a><br>
+ <a href="/">Home</a><br>
+ <a href="/techniques">Techniques</a><br>
+ <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a>
</p>
</footer>
--
GitLab