diff --git a/mockups/README.md b/mockups/README.md new file mode 100644 index 00000000..40c55bfe --- /dev/null +++ b/mockups/README.md @@ -0,0 +1,39 @@ +# Mockups + +HTML Mockups using [Mockdown][]. + +[Mockdown]: https://github.com/anandology/mockdown + +## How to use + +**Step 1:** Get into `mockups` directory + +``` +$ cd mockups +``` + +**Step 2:** Instal `mockdown` + +``` +$ pip install mockdown +``` + +**Step 3:** Start mockdown server + +``` +$ mockdown +... + * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit) +... +``` + +**Step 4:** See the mockups at . + +## How does it work? + +Mockdown uses [Jinja][] templates for writing HTML. + +[Jinja]: https://jinja.palletsprojects.com/ + +To make is easy to provide test data, Mockdown looks for YAML file with the same name as the template. For example, `home.html` template uses the data from `home.yml`. + diff --git a/mockups/base.html b/mockups/base.html new file mode 100644 index 00000000..5952e764 --- /dev/null +++ b/mockups/base.html @@ -0,0 +1,20 @@ + + + + + + + + + + + + + {% block title %}FOSS United{% endblock %} + + + {% block content %} +

Lorem ipsum...

+ {% endblock %} + + diff --git a/mockups/course.html b/mockups/course.html new file mode 100644 index 00000000..e152d2e9 --- /dev/null +++ b/mockups/course.html @@ -0,0 +1,114 @@ +{% extends "base.html" %} + +{% block content %} +
+
+
course
+

{{title}}

+
+ +
+
+
+ +

Course Description

+ +
+ {{ description }} +
+ +
+ +
+ +

Upcoming Batches

+ +
+ {% for batch in batches %} +
+
+
+
Session every {{batch.weekdays}}
+
{{batch.timeslot}}
+
Starting from {{batch.start_date}}
+ +
mentors
+ + {% for m in batch.mentors %} +
+ + {{m.name}} +
+ {% endfor %} +
+
+
+ +
+
+
+
+ {% endfor %} +
+ + +

Course Outline

+ + {% for chapter in chapters %} +
+

{{loop.index}} {{chapter.title}}

+
+ {{chapter.description}} +
+ +
+ {% for lesson in chapter.lessons %} +
+ + {{lesson.title}} +
+ {% endfor %} +
+
+ {% endfor %} +
+
+ +
+
+

Instructor

+
+
{{instructor.name}}
+
Created {{instructor.num_courses}} courses
+
+
+ +
+

Mentors

+ {% for m in mentors %} +
+
{{m.name}}
+
Mentored {{m.num_courses}} batches
+
+ {% endfor %} + +
+ Interested to become a mentor? + + +
+
+
+ +
+
+ + +{% endblock %} diff --git a/mockups/course.yml b/mockups/course.yml new file mode 100644 index 00000000..a88dc34c --- /dev/null +++ b/mockups/course.yml @@ -0,0 +1,89 @@ +title: The Joy of Programming +description: | + Learn the joy of programming by turning the computer into a canvas. +youtube_embed_url: "https://www.youtube.com/embed/IFWAYnUeHR8?start=149" +stats: + chapters: 4 + lessons: 25 + videos: 6 + completed: 287 + +instructor: + name: Anand Chitipothu + num_courses: 4 + +mentors: + - name: Anand Chitipothu + num_courses: 4 + - name: Rushabh Mehta + num_courses: 3 + - name: Jannat Patel + num_courses: 3 + +batches: + - id: jp01 + status: scheduled + mentors: + - name: Anand Chitipothu + photo_url: https://pbs.twimg.com/profile_images/2599066714/igu5hx4wlg3mxucodinl.jpeg + num_batches: 4 + start_date: May 3, 2021 + weekdays: Mon, Thu + timeslot: 5:00-6:00 PM + + - id: jp02 + status: scheduled + mentors: + - name: Anand Chitipothu + photo_url: https://pbs.twimg.com/profile_images/2599066714/igu5hx4wlg3mxucodinl.jpeg + num_batches: 4 + start_date: May 4, 2021 + weekdays: Tue, Fri + timeslot: 5:00-6:00 PM + + - id: jp03 + status: scheduled + mentors: + - name: Rusbhabh Mehta + photo_url: https://pbs.twimg.com/profile_images/2599066714/igu5hx4wlg3mxucodinl.jpeg + num_batches: 4 + start_date: May 15, 2021 + weekdays: Sat + timeslot: 5:00-6:00 PM + + +chapters: + - title: Getting Started + description: | + Getting started with programming by turning the computer into a canvas. + lessons: + - index: 1 + type: video + icon: bi bi-play-circle + title: Introduction to Programming + - index: 2 + type: practice + icon: bi bi-code-square + title: Drawing Shapes + + - title: Repeating Things + description: | + Isn't it very boring to do the same thing again and again? + Well, that is for humans. Computers love to do the same thing again and again. + Learn how to tell the computer to repeat multiple times the same task, or + with slight change every time. + + lessons: + - index: 1 + type: video + icon: bi bi-play-circle + title: Rinse and Repeat + - index: 2 + type: practice + title: many circles + icon: bi bi-check2-circle + - index: 3 + type: practice + icon: bi bi-code-square + title: print, print, print! + diff --git a/mockups/static/style.css b/mockups/static/style.css new file mode 100644 index 00000000..a3a1ca12 --- /dev/null +++ b/mockups/static/style.css @@ -0,0 +1,196 @@ +@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css"); + +:root { + --c1: #fefae0; + --c2: #264653; + --c3: #e9c46a; + --c4: #2a9d8f; + --c5: #f4a261; + --c6: #e76f51; + + --c7: #ccd5ae; + + --bg: var(--c1); + --header-bg: var(--c2); + --header-color: var(--c3); + --tag-color: var(--c7); + --sidebar-bg: var(--c7); + + --h-color: var(--c2); + + --text-color: #333; + --text-color-light: #ccc; + + --cta-color: var(--c4); +} + +body { + padding: 0px; + margin: 0px; + background: var(--bg); +} + +.page-header { + margin-top: 20px; + padding: 20px; + border-radius: 10px; +} + +.page-header .page-header{ + margin-top: 20px; + padding: 20px; + border-radius: 10px; +} + +.course-header { + margin-top: 20px; + padding: 20px; + background: var(--header-bg); + color: var(--header-color); + border-radius: 10px; +} + +.course-header h1 { + color: inherit; +} + +.course-type { + text-transform: uppercase; + font-size: 1.0em; + color: var(--tag-color); +} + +.sidebar { + background: var(--sidebar-bg); + margin: 20px 0px; + border-radius: 10px; + padding: 1px 20px 20px 20px; + color: var(--text-color); +} + +.sidebar h3 { + margin-top: 20px; + color: var(--c2); +} + +.instructor { + padding: 10px; +} + +.instructor-title { + font-weight: bold; +} + +.instructor-subtitle { + font-size: 0.8em; + color: var(--text-color); +} + +.sidebar .notice { + padding: 10px; + border-radius: 10px; + border: 1px dashed var(--text-color); +} + +.sidebar .notice a { + color: inherit; + text-decoration: underline; +} + +.course-details { + margin: 20px 0px; +} + +.course-details h2 { + color: var(--h-color); + font-size: 1.4em; + font-weight: bold; + margin: 20px 0px 10px 0px; +} + +.chapter-plan { + border-radius: 10px; + margin: 20px 0px; + padding: 20px; + border: 1px solid #ddc; + background: white; +} + +.chapter-plan h3 { + font-size: 1.1em; + font-weight: bold; +} + +.chapter-number { + background: var(--text-color); + color: white; + border-radius: 50%; + height: 24px; + min-width: 24px; + align-items: center; + padding: 2px 8px 2px 8px; + margin-right: 5px; +} + +.chapter-description { + margin: 20px 0px; +} + +.lessons { + padding-left: 20px; +} +.lesson { + margin: 5px 0px; + font-weight: bold; +} + +.batch { + border-radius: 10px; + margin: 10px 0px; + background: white; + border: 1px solid #ddc; +} + +.batch-details { + padding: 20px; +} + +.batch .cta { + margin-top: 10px; + padding: 10px; + min-height: 28px; + text-align: right; + border-top: 1px solid #ddc; +} + +.batch .cta button { + background: var(--cta-color); + color: white; + border: none; + border-radius: 5px; + padding: 5px 10px; +} + +.batch .right { + float: right; +} + +img.profile-photo { + width: 24px; + height: 24px; + border-radius: 50%; +} + +.lesson-type { + padding-right: 5px; +} + +.preview-video { + text-align: center; + margin: 20px 0px; +} + +.preview-video iframe { + max-width: 100% +} +