The beginning

Added the base structure and a minimal web frontend. Much work needed.
This commit is contained in:
Michael Rodin 2023-10-16 21:58:50 +02:00
parent 25b5af94fd
commit a2f9b4f978
9 changed files with 247 additions and 9 deletions

21
flask/app.py Normal file
View file

@ -0,0 +1,21 @@
# Importing flask module in the project is mandatory
# An object of Flask class is our WSGI application.
from flask import Flask,redirect,url_for,request,render_template
# Flask constructor takes the name of
# current module (__name__) as argument.
app = Flask(__name__)
## WEB FRONTEND
@app.route('/')
def homepage():
return render_template("home.html", title="Homepage")
## API CALLS
# main driver function
if __name__ == '__main__':
# run app if executed directly
app.run()

50
flask/static/base.css Normal file
View file

@ -0,0 +1,50 @@
body {
background: teal;
}
header {
background: lightskyblue;
border-radius: 0.5em;
border: greenyellow dotted 0.2em;
box-sizing: border-box;
position: relative;
top: 0;
margin: 0;
padding: 0.1em;
width: 100%;
display: flex;
}
header > div#container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: end;
}
.big-button {
width: 2em;
height: 2em;
margin: auto 0.1em;
border: none;
background: linear-gradient(135deg, white, yellow);
}
.big-button:hover {
background: linear-gradient(135deg, yellow, orange);
}
span#title {
display: inline-block;
font-size: 2em;
font-weight: 600;
}
div#content {
margin: 2em 1em;
padding: 0.5em;
background: white;
height: 100%;
border-radius: 1em;
border: dimgrey 0.2em solid;
}

21
flask/templates/base.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/static/base.css" />
<title>RAR-Index {{title}}</title>
</head>
<body>
<header>
<span id="title">{{title}}</span>
<div id="container">
<button class="big-button">&#x1F50E;</div>
</div>
</header>
<div id="content">
{% block content %}
{% endblock %}
</div>
</body>
</html>

View file

@ -0,0 +1,5 @@
{% extends "base.html" %}
{% block content %}
<p>Test</p>
{% endblock %}