Added mockups
This commit is contained in:
Anand Chitipothu
39
mockups/README.md
Normal file
39
mockups/README.md
Normal file
@@ -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 <http://localhost:5000/>.
|
||||
|
||||
## 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`.
|
||||
|
||||
20
mockups/base.html
Normal file
20
mockups/base.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
|
||||
|
||||
<link href="/static/style.css" rel="stylesheet">
|
||||
|
||||
<title>{% block title %}FOSS United{% endblock %}</title>
|
||||
</head>
|
||||
<body>
|
||||
{% block content %}
|
||||
<h1>Lorem ipsum...</h1>
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
114
mockups/course.html
Normal file
114
mockups/course.html
Normal file
@@ -0,0 +1,114 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="course-header">
|
||||
<div class="course-type">course</div>
|
||||
<h1>{{title}}</h1>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-9 col-md-12">
|
||||
<div class="course-details">
|
||||
|
||||
<h2>Course Description</h2>
|
||||
|
||||
<div class="course-description">
|
||||
{{ description }}
|
||||
</div>
|
||||
|
||||
<div class="preview-video">
|
||||
<iframe
|
||||
width="560"
|
||||
height="315"
|
||||
src="{{youtube_embed_url}}"
|
||||
title="YouTube video player"
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h2>Upcoming Batches</h2>
|
||||
|
||||
<div class="row">
|
||||
{% for batch in batches %}
|
||||
<div class="col-lg-4 col-md-6">
|
||||
<div class="batch">
|
||||
<div class="batch-details">
|
||||
<div>Session every {{batch.weekdays}}</div>
|
||||
<div>{{batch.timeslot}}</div>
|
||||
<div>Starting from {{batch.start_date}}</div>
|
||||
|
||||
<div class="course-type" style="color: #888; padding: 10px 0px;">mentors</div>
|
||||
|
||||
{% for m in batch.mentors %}
|
||||
<div>
|
||||
<img class="profile-photo" src="{{m.photo_url}}">
|
||||
<span class="instructor-title">{{m.name}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="cta">
|
||||
<div class="">
|
||||
<button type="button">Join this Batch</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
<h2>Course Outline</h2>
|
||||
|
||||
{% for chapter in chapters %}
|
||||
<div class="chapter-plan">
|
||||
<h3><span class="chapter-number">{{loop.index}}</span> {{chapter.title}}</h3>
|
||||
<div class="chapter-description">
|
||||
{{chapter.description}}
|
||||
</div>
|
||||
|
||||
<div class="lessons">
|
||||
{% for lesson in chapter.lessons %}
|
||||
<div class="lesson">
|
||||
<span class="lesson-type"><i class="{{lesson.icon}}"></i></span>
|
||||
<span class="lesson-title">{{lesson.title}}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-3 col-md-12">
|
||||
<div class="sidebar">
|
||||
<h3>Instructor</h3>
|
||||
<div class="instructor">
|
||||
<div class="instructor-title">{{instructor.name}}</div>
|
||||
<div class="instructor-subtitle">Created {{instructor.num_courses}} courses</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<h3>Mentors</h3>
|
||||
{% for m in mentors %}
|
||||
<div class="instructor">
|
||||
<div class="instructor-title">{{m.name}}</div>
|
||||
<div class="instructor-subtitle">Mentored {{m.num_courses}} batches</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="notice">
|
||||
Interested to become a mentor?
|
||||
|
||||
<div><a href="#">Apply Now!</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
89
mockups/course.yml
Normal file
89
mockups/course.yml
Normal file
@@ -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!
|
||||
|
||||
196
mockups/static/style.css
Normal file
196
mockups/static/style.css
Normal file
@@ -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%
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user