Skip to content
Snippets Groups Projects
Commit 6a66f646 authored by Oliwer Mattsson's avatar Oliwer Mattsson :headphones:
Browse files

Laddade upp techniques.html

parent 069534c2
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 315 additions and 51 deletions
MyPortfolio/data.json
+ 7
− 7
View file @ 6a66f646
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"start_date": "2009-09-05", "start_date": "2009-09-05",
"short_description": "A python data module script tester written in Python.", "short_description": "A python data module script tester written in Python.",
"course_name": "OK\u00c4NT", "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, "group_size": 2,
"academic_credits": "WUT?", "academic_credits": "WUT?",
"lulz_had": "many", "lulz_had": "many",
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
"start_date": "2009-09-07", "start_date": "2009-09-07",
"short_description": "Spreadsheet program for economics.", "short_description": "Spreadsheet program for economics.",
"course_name": "OK\u00c4NT", "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, "group_size": 4,
"academic_credits": "WUT?", "academic_credits": "WUT?",
"lulz_had": "few", "lulz_had": "few",
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
"start_date": "2009-09-08", "start_date": "2009-09-08",
"short_description": "A keygen for spotify. A break from the ads!", "short_description": "A keygen for spotify. A break from the ads!",
"course_name": "OK\u00c4NT", "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, "group_size": 6,
"academic_credits": "WUT?", "academic_credits": "WUT?",
"lulz_had": "medium", "lulz_had": "medium",
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
"start_date": "2009-09-09", "start_date": "2009-09-09",
"short_description": "A twitter re-skin for X.", "short_description": "A twitter re-skin for X.",
"course_name": "HOHO", "course_name": "HOHO",
"long_description": "no no no", "long_description": "Reverts the changes to the graphical interfaces by Musk Inc.",
"group_size": 8, "group_size": 8,
"academic_credits": "WUT?", "academic_credits": "WUT?",
"lulz_had": "over 9000", "lulz_had": "over 9000",
...@@ -85,7 +85,7 @@ ...@@ -85,7 +85,7 @@
"start_date": "2009-09-10", "start_date": "2009-09-10",
"short_description": "Swedish neovim plugin", "short_description": "Swedish neovim plugin",
"course_name": "HOHO", "course_name": "HOHO",
"long_description": "no no no", "long_description": "Allows for swedish to autocompleted and spellchecked in NeoVim!",
"group_size": 8, "group_size": 8,
"academic_credits": "WUT?", "academic_credits": "WUT?",
"lulz_had": "over 9000", "lulz_had": "over 9000",
...@@ -106,7 +106,7 @@ ...@@ -106,7 +106,7 @@
"start_date": "2009-09-12", "start_date": "2009-09-12",
"short_description": "A mod manager for minecraft forge.", "short_description": "A mod manager for minecraft forge.",
"course_name": "HOHO", "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, "group_size": 8,
"academic_credits": "WUT?", "academic_credits": "WUT?",
"lulz_had": "over 9000", "lulz_had": "over 9000",
...@@ -116,7 +116,7 @@ ...@@ -116,7 +116,7 @@
"java", "java",
"c" "c"
], ],
"project_name": "Minecraft Mod Manager", "project_name": "Modded Minecraft Multiple Mod Manager",
"course_id": " \"", "course_id": " \"",
"end_date": "2009-09-18", "end_date": "2009-09-18",
"project_id": 6, "project_id": 6,
......
MyPortfolio/myFlaskProject.py
+ 31
− 5
View file @ 6a66f646
...@@ -9,22 +9,48 @@ data = load('data.json') ...@@ -9,22 +9,48 @@ data = load('data.json')
def index(): def index():
return render_template('index.html') return render_template('index.html')
@app.route("/list.html", methods=['GET', 'POST']) @app.route("/list", methods=['GET', 'POST'])
def list(): def list():
search_query = request.form.get('search', '') search_query = request.form.get('search', '')
sort_by = request.form.get('sort_by', 'start_date') sort_by = request.form.get('sort_by', 'start_date')
sort_order = request.form.get('sort_order', 'desc') sort_order = request.form.get('sort_order', 'desc')
filtered_projects = search(data, sort_by=sort_by, sort_order=sort_order, search=search_query) 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) 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>") @app.route("/project/<int:project_id>")
def project_details(project_id): def project_details(project_id):
project = get_project(data, project_id) project = get_project(load('data.json'), project_id)
if project: if project:
return render_template('project_details.html', project=project) return render_template('project_details.html', project=project)
else: 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__": if __name__ == "__main__":
app.run(debug=True) app.run(debug=True)
MyPortfolio/static/style/main.css
+ 126
− 0
View file @ 6a66f646
...@@ -68,9 +68,68 @@ header a { ...@@ -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 { .content-container {
...@@ -85,6 +144,14 @@ header a { ...@@ -85,6 +144,14 @@ header a {
width: 100%; width: 100%;
} }
.list-search-form {
position: relative;
overflow: auto;
display: flex;
justify-content: center;
}
/* LIST.HTML */ /* LIST.HTML */
.project-table { .project-table {
...@@ -140,6 +207,8 @@ header a { ...@@ -140,6 +207,8 @@ header a {
.project-desc { .project-desc {
font-size: small; font-size: small;
margin-left: 10px; margin-left: 10px;
text-decoration: dotted;
font-size: 11px;
} }
/* INDEX.HTML */ /* INDEX.HTML */
...@@ -195,6 +264,63 @@ header a { ...@@ -195,6 +264,63 @@ header a {
/* INDEX.HTML */ /* 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 { footer {
/* STYLING */ /* STYLING */
background:rgba(15,15,15,0.5); background:rgba(15,15,15,0.5);
......
MyPortfolio/templates/index.html
+ 5
− 4
View file @ 6a66f646
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Portfol.io</title>
<link rel="stylesheet" href="../static/style/main.css"> <link rel="stylesheet" href="../static/style/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
...@@ -10,7 +11,7 @@ ...@@ -10,7 +11,7 @@
<header> <header>
<ul> <ul>
<li><a href="/">Home</a></li> <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"> <li><pre class="logo">
██████╗ ██╗ ██████╗ ██████╗ ██╗ ██████╗
██╔══██╗██║██╔═══██╗ ██╔══██╗██║██╔═══██╗
...@@ -18,7 +19,7 @@ ...@@ -18,7 +19,7 @@
██╔═══╝ ██║██║ ██║ ██╔═══╝ ██║██║ ██║
██║██╗ ██║╚██████╔╝ ██║██╗ ██║╚██████╔╝
╚═╝╚═╝ ╚═╝ ╚═════╝</pre></li> ╚═╝╚═╝ ╚═╝ ╚═════╝</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> <li><a href="https://github.com/olma957">GitHub</a></li>
</ul> </ul>
</header> </header>
...@@ -56,8 +57,8 @@ ...@@ -56,8 +57,8 @@
</p> </p>
<p>Links:<br> <p>Links:<br>
<a href="/">Home</a><br> <a href="/">Home</a><br>
<a href="techniques.html">Techniques</a><br> <a href="/techniques">Techniques</a><br>
<a href="list.html">Projects</a><br> <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a> <a href="https://github.com/olma957">GitHub</a>
</p> </p>
</footer> </footer>
......
MyPortfolio/templates/list.html
+ 14
− 9
View file @ 6a66f646
...@@ -8,15 +8,22 @@ ...@@ -8,15 +8,22 @@
<header> <header>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="techniques.html">Techniques</a></li> <li><a href="/techniques">Techniques</a></li>
<li><a href="list.html">Projects</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> <li><a href="https://github.com/olma957">GitHub</a></li>
</ul> </ul>
</header> </header>
<div class="content-container"> <div class="content-container">
<!-- Search and Sort Form --> <!-- 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 }}"> <input type="text" name="search" placeholder="Search projects" value="{{ search_query }}">
<select name="sort_by"> <select name="sort_by">
<option value="start_date" {% if sort_by == 'start_date' %}selected{% endif %}>Start Date</option> <option value="start_date" {% if sort_by == 'start_date' %}selected{% endif %}>Start Date</option>
...@@ -35,11 +42,9 @@ ...@@ -35,11 +42,9 @@
<div class="project-table"> <div class="project-table">
{% for p in projects %} {% for p in projects %}
<div class="project"> <div class="project">
<a href="/project/{{ p['project_id'] }}"> <img class="project-img" src="{{ p['small_image'] }}", alt="Project Thumbnail">
<img class="project-img" src="{{ p['small_image'] }}"> <a href="/project/{{ p['project_id'] }}" class="project-title"> »{{ p['project_name'] }} </a>
<p class="project-title"> >{{ p['project_name'] }} </p>
<p class="project-desc"> {{ p['short_description'] }}</p> <p class="project-desc"> {{ p['short_description'] }}</p>
</a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
...@@ -55,8 +60,8 @@ ...@@ -55,8 +60,8 @@
</p> </p>
<p>Links:<br> <p>Links:<br>
<a href="/">Home</a><br> <a href="/">Home</a><br>
<a href="techniques.html">Techniques</a><br> <a href="/techniques">Techniques</a><br>
<a href="list.html">Projects</a><br> <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a> <a href="https://github.com/olma957">GitHub</a>
</p> </p>
</footer> </footer>
......
MyPortfolio/templates/project_details.html
+ 33
− 20
View file @ 6a66f646
...@@ -8,29 +8,42 @@ ...@@ -8,29 +8,42 @@
<header> <header>
<ul> <ul>
<li><a href="/">Home</a></li> <li><a href="/">Home</a></li>
<li><a href="techniques.html">Techniques</a></li> <li><a href="/techniques">Techniques</a></li>
<li><a href="list.html">Projects</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> <li><a href="https://github.com/olma957">GitHub</a></li>
</ul> </ul>
</header> </header>
<div class="content-container"> <div class="content-container">
<h1>{{ project['project_name'] }}</h1> <div class="project-showcase">
<img src="{{ project['big_image'] }}" alt="Project Image"> <h1>{{ project['project_name'] }}</h1>
<img class="showcase-img" src="{{ project['small_image'] }}" alt="Project Image">
<ul>
<li><strong>Course Name:</strong> {{ project['course_name'] }}</li> <div class="project-stats">
<li><strong>Group Size:</strong> {{ project['group_size'] }}</li> <ul>
<li><strong>Start Date:</strong> {{ project['start_date'] }}</li> <li><strong>Course Name:</strong> {{ project['course_name'] }}</li>
<li><strong>End Date:</strong> {{ project['end_date'] }}</li> <!--<li><strong>Group Size:</strong> {{ project['group_size'] }}</li> -->
<li><strong>Techniques Used:</strong> {{ project['techniques_used'] | join(', ') }}</li> <li><strong>Start Date:</strong> {{ project['start_date'] }}</li>
<li><strong>Description:</strong> {{ project['long_description'] }}</li> <li><strong>End Date:</strong> {{ project['end_date'] }}</li>
<li><strong>Academic Credits:</strong> {{ project['academic_credits'] }}</li> <li><strong>Techniques:</strong> {{ project['techniques_used'] | join(', ') }}</li>
<li><strong>Lulz Had:</strong> {{ project['lulz_had'] }}</li> <!-- <li><strong>Academic Credits:</strong> {{ project['academic_credits'] }}</li> -->
<li><strong>External Link:</strong> <a href="{{ project['external_link'] }}" target="_blank">{{ project['external_link'] }}</a></li> <!--<li><strong>Lulz Had:</strong> {{ project['lulz_had'] }}</li> -->
</ul> <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>
<a href="/list.html">Back to Projects</a> </ul>
</div>
<button onclick="history.back()">» Back</button>
</div>
</div> </div>
<footer> <footer>
...@@ -43,8 +56,8 @@ ...@@ -43,8 +56,8 @@
</p> </p>
<p>Links:<br> <p>Links:<br>
<a href="/">Home</a><br> <a href="/">Home</a><br>
<a href="techniques.html">Techniques</a><br> <a href="/techniques">Techniques</a><br>
<a href="list.html">Projects</a><br> <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a> <a href="https://github.com/olma957">GitHub</a>
</p> </p>
</footer> </footer>
......
MyPortfolio/templates/techniques.html 0 → 100644
+ 93
− 0
View file @ 6a66f646
<!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>
MyPortfolio/templates/template.html
+ 6
− 6
View file @ 6a66f646
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
<body> <body>
<header> <header>
<ul> <ul>
<li><a href="index.html">Home</a></li> <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"> <li><pre class="logo">
██████╗ ██╗ ██████╗ ██████╗ ██╗ ██████╗
██╔══██╗██║██╔═══██╗ ██╔══██╗██║██╔═══██╗
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
██╔═══╝ ██║██║ ██║ ██╔═══╝ ██║██║ ██║
██║██╗ ██║╚██████╔╝ ██║██╗ ██║╚██████╔╝
╚═╝╚═╝ ╚═╝ ╚═════╝</pre></li> ╚═╝╚═╝ ╚═╝ ╚═════╝</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> <li><a href="https://github.com/olma957">GitHub</a></li>
</ul> </ul>
</header> </header>
...@@ -35,9 +35,9 @@ ...@@ -35,9 +35,9 @@
<a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a> <a href="https://www.gnu.org/licenses/gpl-3.0.html">GPLv3 License</a>
</p> </p>
<p>Links:<br> <p>Links:<br>
<a href="index.html">Home</a><br> <a href="/">Home</a><br>
<a href="techniques.html">Techniques</a><br> <a href="/techniques">Techniques</a><br>
<a href="list.html">Projects</a><br> <a href="/list">Projects</a><br>
<a href="https://github.com/olma957">GitHub</a> <a href="https://github.com/olma957">GitHub</a>
</p> </p>
</footer> </footer>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment