Skip to content

Commit f1f8ab3

Browse files
PureDreamerPureDreamer
authored
Frontend/about us page (#275)
1 parent 28e460d commit f1f8ab3

File tree

17 files changed

+687
-445
lines changed

17 files changed

+687
-445
lines changed

‎app/main.py‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ def create_tables(engine, psql_environment):
4242
set_ui_language()
4343

4444
from app.routers import ( # noqa: E402
45-
agenda, calendar, categories, celebrity, currency, dayview,
45+
about_us, agenda, calendar, categories, celebrity, currency, dayview,
4646
email, event, export, four_o_four, google_connect,
4747
invitation, login, logout, profile,
4848
register, search, telegram, user, weekview, whatsapp,
@@ -68,6 +68,7 @@ async def swagger_ui_redirect():
6868

6969

7070
routers_to_include = [
71+
about_us.router,
7172
agenda.router,
7273
calendar.router,
7374
categories.router,

‎app/media/free-python-course-4k.png‎

135 KB
Loading

‎app/routers/about_us.py‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
from fastapi import APIRouter, Request
2+
3+
from app.dependencies import templates
4+
5+
6+
router = APIRouter()
7+
8+
9+
@router.get("/about")
10+
def about(request: Request):
11+
return templates.TemplateResponse("about_us.html", {
12+
"request": request,
13+
})

‎app/static/about.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
.moving-words {
2+
margin-top: 4rem;
3+
text-transform: uppercase;
4+
font-size: 6rem;
5+
letter-spacing: 0.1rem;
6+
overflow: hidden;
7+
background: linear-gradient(90deg, #000, #fff, #000);
8+
background-repeat: no-repeat;
9+
background-size: 80%;
10+
animation: animate 4s linear infinite;
11+
-webkit-background-clip: text;
12+
background-clip: text;
13+
-webkit-text-fill-color: rgba(255, 255, 255, 0);
14+
}
15+
16+
@keyframes animate {
17+
0% {
18+
background-position: -500%;
19+
}
20+
100% {
21+
background-position: 500%;
22+
}
23+
}
24+
25+
26+
/* credit for the animation goes to FrankieDoodie */
27+
28+
.infographic {
29+
display: block;
30+
margin-left: auto;
31+
margin-right: auto;
32+
width: 100%;
33+
}
34+
35+
.seprator {
36+
margin-top: 8rem;
37+
margin-bottom: 8rem;
38+
}
39+
40+
.about-text {
41+
font-size: 1.2rem;
42+
text-align: justify;
43+
}

‎app/static/global.css‎

Lines changed: 46 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,58 @@
11
:root {
2-
/* Texts */
3-
--text_xs: 0.75rem; /* 12px */
4-
--text_s: 1rem; /* 16px */
5-
--text_m: 1.2rem; /* 19px */
6-
--text_l: 1.5rem; /* 24px */
7-
--text_xl: 1.75rem; /* 28px */
8-
--text_xxl: 2rem; /* 32px */
9-
10-
/* Spaces */
11-
--space_xs: 0.5rem; /* 6px */
12-
--space_s: 0.75rem; /* 12px */
13-
--space_m: 1.25rem; /* 20px */
14-
--space_l: 2rem; /* 32px */
15-
--space_xl: 4rem; /* 64px */
16-
17-
/* colors */
18-
--primary: #F7F7F7;
19-
--secondary: #222831;
20-
--surface: #e9ecef;
21-
--up_surface: #adb5bd;
22-
--bold_primary: #FFDE4D;
23-
--bold_secondary: #F24726;
24-
--bold_tertiary: #0CA789;
2+
/* Texts */
3+
--text_xs: 0.75rem;
4+
/* 12px */
5+
--text_s: 1rem;
6+
/* 16px */
7+
--text_m: 1.2rem;
8+
/* 19px */
9+
--text_l: 1.5rem;
10+
/* 24px */
11+
--text_xl: 1.75rem;
12+
/* 28px */
13+
--text_xxl: 2rem;
14+
/* 32px */
15+
/* Spaces */
16+
--space_xs: 0.5rem;
17+
/* 6px */
18+
--space_s: 0.75rem;
19+
/* 12px */
20+
--space_m: 1.25rem;
21+
/* 20px */
22+
--space_l: 2rem;
23+
/* 32px */
24+
--space_xl: 4rem;
25+
/* 64px */
26+
/* colors */
27+
--primary: #F7F7F7;
28+
--secondary: #222831;
29+
--surface: #e9ecef;
30+
--up_surface: #adb5bd;
31+
--bold_primary: #FFDE4D;
32+
--bold_secondary: #F24726;
33+
--bold_tertiary: #0CA789;
2534
}
2635

2736
* {
28-
margin: 0;
29-
padding: 0;
30-
box-sizing: border-box;
37+
margin: 0;
38+
padding: 0;
39+
box-sizing: border-box;
3140
}
3241

33-
html, body {
34-
height: 100%;
42+
html,
43+
body {
44+
height: 100%;
3545
}
3646

3747
body {
38-
background-color: #F7F7F7;
39-
color: #222831;
40-
font-family: "Assistant", "Ariel", sans-serif;
41-
font-weight: 400;
42-
line-height: 1.7;
43-
text-rendering: optimizeLegibility;
44-
scroll-behavior: smooth;
45-
width: 100%;
48+
background-color: #F7F7F7;
49+
color: #222831;
50+
font-family: "Assistant", "Ariel", sans-serif;
51+
font-weight: 400;
52+
line-height: 1.7;
53+
text-rendering: optimizeLegibility;
54+
scroll-behavior: smooth;
55+
width: 100%;
4656
}
4757

4858
a {

‎app/templates/about_us.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
{% extends "base.html" %}{% block head %}
2+
<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">
3+
<link href="{{ url_for('static', path='/about.css') }}" rel="stylesheet">
4+
<link href="{{ url_for('static', path='/global.css') }}" rel="stylesheet">
5+
<title>About Us</title>
6+
{% endblock head %} {% block content %}
7+
8+
<div class="container">
9+
<h1 class="moving-words">About The Project</h1>
10+
<!-- credit for the animation goes to FrankieDoodie -->
11+
<div>
12+
<h3>Do you have a dream? How will you make it come true?</h3>
13+
<p class="about-text">
14+
My dream will require some hard work. I know I MUST be:</p>
15+
<ul>
16+
<li> Organized</li>
17+
<li>Well prepared</li>
18+
<li>Plan ahead</li>
19+
</ul>
20+
21+
<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>
22+
<ul>
23+
<li> Want to monitor your expenses? We got it.</li>
24+
<li>Want to organize a zoom meeting while still under quarantine? We got it.</li>
25+
</ul>
26+
<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
27+
and unique. Then each of us began the journey to implement it in the calendar. We worked collaboratively to put it together.
28+
<br> if you like what you just read, please <a title="Sign in page" href="sign_in">sign in.</a>
29+
</p>
30+
</div>
31+
<blockquote class="blockquote text-center seprator">
32+
<p class="mb-0"><i>“If you want to go fast, go alone. If you want to go far, go together.”</i></p><br>
33+
<footer class="blockquote-footer"><cite title="Source Title">African proverb</cite></footer>
34+
</blockquote>
35+
36+
<h1 class="moving-words">Our Story</h1>
37+
<div>
38+
<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"
39+
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
40+
infographic.
41+
</p>
42+
<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>
43+
</div>
44+
<div>
45+
<img class="infographic" src="{{ url_for('media', path='free-python-course-4k.png') }}" alt="Course infographic">
46+
</div>
47+
48+
<div>
49+
<h2> We thank you for letting us share our story and hope you will enjoy our project.</h2>
50+
<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>
51+
</div>
52+
</div>
53+
{% endblock content %}

‎app/templates/base.html‎

Lines changed: 23 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88

9-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
10-
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
9+
<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">
1110
<link rel="icon" href="{{ url_for('static', path='/images/icons/calendar-outline.svg') }}" />
1211
<link href="{{ url_for('static', path='/style.css') }}" rel="stylesheet">
1312
<script type="module" src="https://unpkg.com/ionicons@5.4.0/dist/ionicons/ionicons.esm.js"></script>
@@ -22,8 +21,7 @@
2221
<div class="relative overflow-hidden">
2322
<div class="relative pt-6 px-4 sm:px-6 lg:px-8">
2423
<nav class="navbar navbar-expand-md navbar-light">
25-
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler"
26-
aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
24+
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
2725
<span class="navbar-toggler-icon"></span>
2826
</button>
2927
<div class="navbar-brand">
@@ -40,41 +38,36 @@
4038
<a class="nav-link" href="{{ url_for('login') }}">Sign In</a>
4139
</li>
4240
<li class="nav-item">
43-
<a class="nav-link" href="{{ url_for('logout') }}">{{ gettext("Sign Out") }}</a>
44-
<li class="nav-item">
45-
<li class="nav-item">
46-
<a class="nav-link" href="{{ url_for('register') }}">Sign Up</a>
47-
</li>
48-
<li class="nav-item">
49-
<a class="nav-link" href="{{ url_for('agenda') }}">Agenda</a>
50-
</li>
51-
<li class="nav-item">
52-
<a class="nav-link" href="{{ url_for('view_invitations') }}">Invitations</a>
53-
</li>
54-
<li class="nav-item">
55-
<a class="nav-link" href="{{ url_for('search') }}">Search</a>
56-
</li>
41+
<a class="nav-link" href="{{ url_for('logout') }}">{{ gettext("Sign Out") }}</a>
42+
<li class="nav-item">
43+
<li class="nav-item">
44+
<a class="nav-link" href="{{ url_for('register') }}">Sign Up</a>
45+
</li>
46+
<li class="nav-item">
47+
<a class="nav-link" href="{{ url_for('agenda') }}">Agenda</a>
48+
</li>
49+
<li class="nav-item">
50+
<a class="nav-link" href="{{ url_for('view_invitations') }}">Invitations</a>
51+
</li>
52+
<li class="nav-item">
53+
<a class="nav-link" href="{{ url_for('search') }}">Search</a>
54+
</li>
55+
<li class="nav-item">
56+
<a class="nav-link" href="{{ url_for('about') }}">{{ gettext("About Us") }}</a>
57+
</li>
5758
</ul>
5859
</div>
5960
</nav>
6061
</div>
6162

6263
{% block content %}{% endblock %}
6364
</div>
64-
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
65-
integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
66-
crossorigin="anonymous"></script>
67-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
68-
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
69-
crossorigin="anonymous"></script>
70-
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
71-
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
72-
crossorigin="anonymous"></script>
65+
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
66+
<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>
67+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
7368
<script type="text/javascript" src="{{ url_for('static', path='/popover.js') }}"></script>
7469
<!-- This bootstrap version is needed here because of the toggler bug in the beta version-->
75-
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js"
76-
integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD"
77-
crossorigin="anonymous"></script>
70+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
7871
<script src="{{ url_for('static', path='/horoscope.js') }}"></script>
7972
</body>
8073

‎app/templates/calendar/add_week.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{% for week in weeks_block %}
2+
<div class="week">
3+
{% for day in week.days %}
4+
<div class="{{day.css['day_container']}}" id="{{day.set_id()}}">
5+
<div class="month-day-header">
6+
<div class="{{day.css['date']}}">{{day}}</div>
7+
<div><a href="#" class="add-small">+</a></div>
8+
</div>
9+
{% for devent in day.dailyevents %}
10+
<div class="{{day.css['daily_event']}}">
11+
<div class="{{day.css['daily_event_front']}}">{{devent[0]}}</div>
12+
<div class="{{day.css['daily_event_back']}}">{{devent[1]}}</div>
13+
</div>
14+
{% endfor %}
15+
{% for event in day.events %}
16+
<div class="{{day.css['event']}}"><b>{{event[0]}}</b> {{event[1]}}</div>
17+
{% endfor %}
18+
</div>
19+
{% endfor %}
20+
</div>
21+
{% endfor %}

‎app/templates/calendar/calendar.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{% extends 'calendar/layout.html' %}
2+
3+
{% block main %}
4+
<div class="calendar">
5+
<div class="calender-days-titles">
6+
{% for d in week_days %}
7+
{% if d == day.sday %}
8+
<div class="day-title underline-yellow"><b>{{ d.upper() }}</b></div>
9+
{% else %}
10+
<div class="day-title"> {{ d.upper() }}</div>
11+
{% endif %}
12+
{% endfor %}
13+
</div>
14+
<div id="calender-grid">
15+
{% include 'calendar/add_week.html' %}
16+
</div>
17+
</div>
18+
<div id="day-view"></div>
19+
{% endblock %}

0 commit comments

Comments
 (0)