feat: create simple UI for displaying tasks

jakuboskera · Jul 21, 2022 · 6df43d0 · 6df43d0
1 parent d54748e
commit 6df43d0
Show file tree

Hide file tree

Showing 31 changed files with 30,659 additions and 1 deletion.
diff --git a/app/main/templates/index.html b/app/main/templates/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="TODO is a simple API with swagger documentation" />
+    <title>TODO</title>
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/toggle-bootstrap.css') }}">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/toggle-bootstrap-dark.css') }}">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/toggle-bootstrap-print.css') }}">
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/all.min.css') }}" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}" />
+</head>
+
+<body class="bootstrap">
+    <div class="dark-mode text-right mt-3 mb-5">
+        <span class="icon-sun"></span>
+        <label class="switch">
+            <input type="checkbox" onclick="SwapThemes();" id="toggle-dark-mode">
+            <span class="slider round"></span>
+        </label>
+        <span class="icon-moon-o mr-4"></span>
+
+        <span class="git-logo text-right mr-4"> <a href="https://github.com/jakuboskera/todo" target="_blank" rel="noopener noreferrer"><span class="fab fa-git-alt"></span
+            ></a></span>
+    </div>
+    <div class="row justify-content-center">
+        <div class="col-md-6 text-center mb-5">
+            <h1 class="heading-section">
+                &#9745; TODO
+            </h1>
+        </div>
+    </div>
+    <div class="row justify-content-center">
+        <div class="col-md-6 col-lg-4">
+            {% if tasks | length > 0 %}
+            <ul class="list-group list-group-flush ">
+                {% for task in tasks %}
+                <li class="list-group-item">{{ task.text }}</li>
+                {% endfor %}
+            </ul>
+            {% else %}
+            <h4 class="text-center">Nothing to do &#129303;</h4> {% endif %}
+        </div>
+    </div>
+    </div>
+    <footer class="fixed-bottom">
+        <div class="footer-copyright text-center py-3 bg-light">
+            <a href="/api/v1" class="nav-item nav-link">API v1</a> Made with <span style="color:#ec3935;">&#9829;</span> by
+            <a href="https://github.com/jakuboskera" target="_blank" rel="noopener noreferrer">@jakuboskera</a>
+        </div>
+    </footer>
+    <script src="{{ url_for('static', filename='js/jquery-3.5.1.slim.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+</body>
+
+</html>
diff --git a/app/main/views.py b/app/main/views.py
@@ -1,9 +1,11 @@
 from flask import Blueprint
 from flask import render_template
 
+from app.api.tasks import TaskList
+
 blueprint = Blueprint("main", __name__, template_folder="templates")
 
 
 @blueprint.route("/")
 def home():
-    return '<p><a href="/api/v1">Go to API specification</a></p>'
+    return render_template("index.html", tasks=TaskList().get())
diff --git a/app/static/css/all.min.css b/app/static/css/all.min.css
diff --git a/app/static/css/main.css b/app/static/css/main.css
@@ -0,0 +1,150 @@
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 53px;
+    height: 30px;
+    margin: 0px !important;
+}
+
+.switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 23px;
+    width: 23px;
+    left: 3.5px;
+    bottom: 3.5px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked+.slider {
+    background-color: #027BFF;
+}
+
+input:focus+.slider {
+    box-shadow: 0 0 1px #027BFF;
+}
+
+input:checked+.slider:before {
+    -webkit-transform: translateX(23px);
+    -ms-transform: translateX(23px);
+    transform: translateX(23px);
+}
+
+.slider.round {
+    border-radius: 30px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+.dark-mode {
+    font-size: 24px;
+    text-align: center;
+}
+
+@font-face {
+    font-family: 'icomoon';
+    src: url('../fonts/icomoon.eot?q8c1il');
+    src: url('../fonts/icomoon.eot?q8c1il#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?q8c1il') format('truetype'), url('../fonts/icomoon.woff?q8c1il') format('woff'), url('../fonts/icomoon.svg?q8c1il#icomoon') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: block;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+    /* use !important to prevent issues with browser extensions that change fonts */
+    font-family: 'icomoon' !important;
+    speak: never;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-moon-o:before {
+    content: "\e900";
+}
+
+.icon-sun:before {
+    content: "\e9d4";
+}
+
+.bootstrap-dark .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+.bootstrap .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+@media (max-width: 991.98px) {
+    .dark-mode {
+        margin-top: 10px;
+    }
+}
+
+body {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #fff;
+    text-align: left;
+    height: 100vh;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover
+}
+
+.heading-section {
+    font-size: 48px;
+}
+
+.git-logo span {
+    font-size: 40px;
+    /* color: #fff; */
+    padding-top: 16px;
+    transition: .3s all ease
+}
+
+.bootstrap .git-logo span:hover {
+    color: #0e1c42
+}
+
+.bootstrap-dark .git-logo span:hover {
+    color: #027BFF
+}
+
+.fixed-bottom {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1030
+}