Frontend/about us page

app/main.py

@@ -39,14 +39,15 @@ def create_tables(engine, psql_environment):
 
 from app.routers import (  # noqa: E402
 
-    agenda, calendar, categories, celebrity, currency, dayview,
+    about_us, agenda, calendar, categories, celebrity, currency, dayview,
     email, event, export, four_o_four, invitation, login, logout, profile,
     register, search, telegram, weekview, whatsapp,
 )
 
 json_data_loader.load_to_db(next(get_db()))
 
 routers_to_include = [
+    about_us.router,
     agenda.router,
     calendar.router,
     categories.router,
@@ -67,6 +68,8 @@ def create_tables(engine, psql_environment):
     search.router,
     telegram.router,
     whatsapp.router,
+
+
 ]
 
 for router in routers_to_include:

app/routers/about_us.py

@@ -0,0 +1,13 @@
+from fastapi import APIRouter, Request
+
+from app.dependencies import templates
+
+
+router = APIRouter()
+
+
+@router.get("/about")
+def about(request: Request):
+    return templates.TemplateResponse("about_us.html", {
+        "request": request,
+    })

app/static/about.css

@@ -0,0 +1,43 @@
+.moving-words {
+    margin-top: 4rem;
+    text-transform: uppercase;
+    font-size: 6rem;
+    letter-spacing: 0.1rem;
+    overflow: hidden;
+    background: linear-gradient(90deg, #000, #fff, #000);
+    background-repeat: no-repeat;
+    background-size: 80%;
+    animation: animate 4s linear infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: rgba(255, 255, 255, 0);
+}
+
+@keyframes animate {
+    0% {
+        background-position: -500%;
+    }
+    100% {
+        background-position: 500%;
+    }
+}
+
+
+/* credit for the animation goes to FrankieDoodie */
+
+.infographic {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+}
+
+.seprator {
+    margin-top: 8rem;
+    margin-bottom: 8rem;
+}
+
+.about-text {
+    font-size: 1.2rem;
+    text-align: justify;
+}

app/static/global.css

@@ -1,20 +1,61 @@
+:root {
+    /* Texts */
+    --text_xs: 0.75rem;
+    /* 12px */
+    --text_s: 1rem;
+    /* 16px */
+    --text_m: 1.2rem;
+    /* 19px */
+    --text_l: 1.5rem;
+    /* 24px */
+    --text_xl: 1.75rem;
+    /* 28px */
+    --text_xxl: 2rem;
+    /* 32px */
+    /* Spaces */
+    --space_xs: 0.5rem;
+    /* 6px */
+    --space_s: 0.75rem;
+    /* 12px */
+    --space_m: 1.25rem;
+    /* 20px */
+    --space_l: 2rem;
+    /* 32px */
+    --space_xl: 4rem;
+    /* 64px */
+    /* colors */
+    --primary: #F7F7F7;
+    --secondary: #222831;
+    --surface: #e9ecef;
+    --up_surface: #adb5bd;
+    --bold_primary: #FFDE4D;
+    --bold_secondary: #F24726;
+    --bold_tertiary: #0CA789;
+}
+
 * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-html, body {
-  height: 100%;
+html,
+body {
+    height: 100%;
 }
 
 body {
-  background-color: #F7F7F7;
-  color: #222831;
-  font-family: "Assistant", "Ariel", sans-serif;
-  font-weight: 400;
-  line-height: 1.7;
-  text-rendering: optimizeLegibility;
-  scroll-behavior: smooth;
-  width: 100%;
+    background-color: #F7F7F7;
+    color: #222831;
+    font-family: "Assistant", "Ariel", sans-serif;
+    font-weight: 400;
+    line-height: 1.7;
+    text-rendering: optimizeLegibility;
+    scroll-behavior: smooth;
+    width: 100%;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
 }

app/templates/about_us.html

@@ -0,0 +1,53 @@
+{% extends "base.html" %}{% block head %}
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+<link href="{{ url_for('static', path='/about.css') }}" rel="stylesheet">
+<link href="{{ url_for('static', path='/global.css') }}" rel="stylesheet">
+<title>About Us</title>
+{% endblock head %} {% block content %}
+
+<div class="container">
+    <h1 class="moving-words">About The Project</h1>
+    <!--  credit for the animation goes to FrankieDoodie -->
+    <div>
+        <h3>Do you have a dream? How will you make it come true?</h3>
+        <p class="about-text">
+            My dream will require some hard work. I know I MUST be:</p>
+        <ul>
+            <li> Organized</li>
+            <li>Well prepared</li>
+            <li>Plan ahead</li>
+        </ul>
+
+        <p class="about-text">We started this project as a course project. Step by step it became our dream, this calendar is built by programmers. One of its many traits is the ability to add features.</p>
+        <ul>
+            <li> Want to monitor your expenses? We got it.</li>
+            <li>Want to organize a zoom meeting while still under quarantine? We got it.</li>
+        </ul>
+        <p class="about-text">Even better - you got it! Develop your own feature and add it to the calendar. This calendar is open source developed mostly in Python as the finale to an extraordinary course. For the calendar development we selected features, aiming at required
+            and unique. Then each of us began the journey to implement it in the calendar. We worked collaboratively to put it together.
+            <br> if you like what you just read, please <a title="Sign in page" href="sign_in">sign in.</a>
+        </p>
+    </div>
+    <blockquote class="blockquote text-center seprator">
+        <p class="mb-0"><i>“If you want to go fast, go alone. If you want to go far, go together.”</i></p><br>
+        <footer class="blockquote-footer"><cite title="Source Title">African proverb</cite></footer>
+    </blockquote>
+
+    <h1 class="moving-words">Our Story</h1>
+    <div>
+        <p class="about-text"> When this online course started, we did not know what <em>"Hello World"</em> meant.<br> Now, we have created this calendar. This project was created as our concluding project in the online “python free and for all” course by <a title="Yam Mesicka Linkedin account"
+                href="https://www.linkedin.com/in/mesicka/">Yam Mesicka</a>, a course that has helped us set foot in the world of programming. The course took us from complete newbies to decent programmers. The course curriculum can be found in the attached
+            infographic.
+        </p>
+        <p class="about-text">The materials of the first half of the course can be found on GitHub, you can take a look right <a title="Course GitHub" href="https://github.com/PythonFreeCourse/Notebooks">here.</a></p>
+    </div>
+    <div>
+        <img class="infographic" src="{{ url_for('media', path='free-python-course-4k.png') }}" alt="Course infographic">
+    </div>
+
+    <div>
+        <h2> We thank you for letting us share our story and hope you will enjoy our project.</h2>
+        <p>If you enjoy it please consider giving us a star in our <a title="Github for the calendar" href="https://github.com/PythonFreeCourse/calendar">GitHub repository.</a></p>
+    </div>
+</div>
+{% endblock content %}

app/templates/base.html

@@ -2,12 +2,11 @@
 <html lang="en">
 
 <head>
-  {% block head %}
+    {% block head %}
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
     <link rel="icon" href="{{ url_for('static', path='/images/icons/calendar-outline.svg') }}" />
     <link href="{{ url_for('static', path='/style.css') }}" rel="stylesheet">
     <script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
@@ -22,8 +21,7 @@
     <div class="relative overflow-hidden">
         <div class="relative pt-6 px-4 sm:px-6 lg:px-8">
             <nav class="navbar navbar-expand-md navbar-light">
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
-                    aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
+                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
                 <div class="navbar-brand">
@@ -54,27 +52,22 @@
                         <li class="nav-item">
                             <a class="nav-link" href="{{ url_for('search') }}">Search</a>
                         </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('about') }}">{{ gettext("About Us") }}</a>
+                        </li>
                     </ul>
                 </div>
             </nav>
         </div>
 
         {% block content %}{% endblock %}
     </div>
-    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
-        integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
-        crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
-        integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
-        crossorigin="anonymous"></script>
+    <script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
     <script type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script>
     <!-- This bootstrap version is needed here because of the toggler bug in the beta version-->
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"
-        integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
-        crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
 
 </body>
 

app/templates/calendar/add_week.html

@@ -0,0 +1,21 @@
+{% for week in weeks_block %}
+<div class="week">
+    {% for day in week.days %}
+    <div class="{{day.css['day_container']}}" id="{{day.set_id()}}">
+        <div class="month-day-header">
+            <div class="{{day.css['date']}}">{{day}}</div>
+            <div><a href="#" class="add-small">+</a></div>
+        </div>
+        {% for devent in day.dailyevents %}
+        <div class="{{day.css['daily_event']}}">
+            <div class="{{day.css['daily_event_front']}}">{{devent[0]}}</div>
+            <div class="{{day.css['daily_event_back']}}">{{devent[1]}}</div>
+        </div>
+        {% endfor %}
+        {% for event in day.events %}
+        <div class="{{day.css['event']}}"><b>{{event[0]}}</b> {{event[1]}}</div>
+        {% endfor %}
+    </div>
+    {% endfor %}
+</div>
+{% endfor %}

app/templates/calendar/calendar.html

@@ -0,0 +1,19 @@
+{% extends 'calendar/layout.html' %}
+
+{% block main %}
+<div class="calendar">
+    <div class="calender-days-titles">
+        {% for d in week_days %}
+        {% if d == day.sday %}
+        <div class="day-title underline-yellow"><b>{{ d.upper() }}</b></div>
+        {% else %}
+        <div class="day-title"> {{ d.upper() }}</div>
+        {% endif %}
+        {% endfor %}
+    </div>
+    <div id="calender-grid">
+        {% include 'calendar/add_week.html' %}
+    </div>
+</div>
+<div id="day-view"></div>
+{% endblock %}