INQ-15 Make simple view
This commit is contained in:
parent
0b3605a9e8
commit
cb16ac8181
19
App.py
Normal file
19
App.py
Normal file
@ -0,0 +1,19 @@
|
||||
from flask import Flask, render_template
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@app.route('/student')
|
||||
def student():
|
||||
return(render_template('student.html'))
|
||||
|
||||
@app.route('/lecturer')
|
||||
def lecturer():
|
||||
return(render_template('lecturer.html'))
|
||||
|
||||
|
||||
@app.route('/ask')
|
||||
def ask ():
|
||||
return(200)
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(host='0.0.0.0', debug = True)
|
||||
BIN
static/.DS_Store
vendored
Normal file
BIN
static/.DS_Store
vendored
Normal file
Binary file not shown.
116
static/style.css
Normal file
116
static/style.css
Normal file
@ -0,0 +1,116 @@
|
||||
main {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.alertify-notifier .ajs-message.ajs-success {
|
||||
color: #fff;
|
||||
background: rgba(91, 189, 114, 0.95);
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: 50%;
|
||||
}
|
||||
.color--primary {
|
||||
background-color: rgba(34, 51, 89, 1.0);
|
||||
}
|
||||
.header__container, .body__container, .footer__container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
width: 60vw;
|
||||
text-align: center;
|
||||
}
|
||||
#questions-list {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
#questions-list li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 20px 60px 20px 60px;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
#questions-list li:hover {
|
||||
background-color: white;
|
||||
color: rgba(34, 51, 89, 1.0);
|
||||
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
ul > li:not(:last-child) {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.counter > i {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.footer__container--content {
|
||||
display: flex;
|
||||
padding-top: 10px !important;
|
||||
padding-bottom: 10px !important;
|
||||
}
|
||||
.footer__container--content > div {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
transition: 0.5s all;
|
||||
}
|
||||
.footer__container__lecturer--content > div {
|
||||
height: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.footer__container--content > div:not(:last-child) {
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
.footer__container--content > div:hover {
|
||||
background-color: white;
|
||||
color: rgba(34, 51, 89, 1.0);
|
||||
}
|
||||
#modalAsk > div.modal-footer > a.waves-primary {
|
||||
background-color: rgba(34, 51, 89, 1.0);
|
||||
}
|
||||
.btn-thumb-up {
|
||||
cursor: pointer;
|
||||
}
|
||||
.upper-row {
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
.upper-row, .bottom-row {
|
||||
display: flex;
|
||||
}
|
||||
.upper-row > div, .bottom-row > div {
|
||||
width: 50%;
|
||||
height: 20vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.upper-row > div:hover, .bottom-row > div:hover
|
||||
{
|
||||
background-color: white;
|
||||
color: rgba(34, 51, 89, 1.0);
|
||||
}
|
||||
#card-title__lecturer {
|
||||
font-size: 18px;
|
||||
}
|
||||
.upper-row > div:nth-child(odd), .bottom-row > div:nth-child(odd) {
|
||||
border-right: 1px solid white;
|
||||
}
|
||||
.small-font {
|
||||
font-size: 12px;
|
||||
}
|
||||
.question-text {
|
||||
break-after: always;
|
||||
}
|
||||
BIN
templates/.DS_Store
vendored
Normal file
BIN
templates/.DS_Store
vendored
Normal file
Binary file not shown.
28
templates/index.html
Normal file
28
templates/index.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
{% block head %}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<!-- Compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
|
||||
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='style.css') }}">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/css/alertify.min.css"/>
|
||||
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/css/themes/default.min.css"/>
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div id="content">{% block content %}{% endblock %}</div>
|
||||
</main>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||
<!-- Compiled and minified JavaScript -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
|
||||
<script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.2/build/alertify.min.js"></script>
|
||||
{% block script %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
81
templates/lecturer.html
Normal file
81
templates/lecturer.html
Normal file
@ -0,0 +1,81 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Panel prowadzącego{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container header__container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card color--primary white-text">
|
||||
<span class="card-title">Panel prowadzącego</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container body__container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card color--primary white-text">
|
||||
<div class="card-content">
|
||||
<span id="card-title__lecturer" class="card-title card-title__body">Proszę zaznaczyć pytanie i wybrać akcję</span>
|
||||
<div class="upper-row">
|
||||
<div>
|
||||
<span class="col s12 question-text">Pytanie 1</span>
|
||||
<span class="col s12 small-font">12 głosów</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="col s12 question-text">Pytanie 2</span>
|
||||
<span class="col s12 small-font">169 głosów</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom-row">
|
||||
<div>
|
||||
<span class="col s12 question-text">Pytanie 3</span>
|
||||
<span class="col s12 small-font">75 głosów</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="col s12 question-text">Pytanie 4</span>
|
||||
<span class="col s12 small-font">39 głosów</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer__container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card color--primary white-text">
|
||||
<div class="card-content footer__container--content footer__container__lecturer--content">
|
||||
<div class="col s3 question--mark">Oznacz, jako szczególnie ważne pytanie</div>
|
||||
<div class="col s3 question--respond">Odpowiedz na pytanie</div>
|
||||
<div class="col s3 question--add">Odpowiedz i dodaj do wykładu</div>
|
||||
<div class="col s3 question--remove">Usuń pytanie</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{%block script%}
|
||||
<script>
|
||||
$(document).ready(() => {
|
||||
$('.modal').modal();
|
||||
});
|
||||
|
||||
$('.question--mark').on('click', () => {
|
||||
alertify.notify('Pytanie oznaczone, jako szczególnie ważne.', 'success', 3);
|
||||
});
|
||||
$('.question--respond').on('click', () => {
|
||||
alertify.notify('Odpowiedź została udzielona.', 'success', 3);
|
||||
});
|
||||
$('.question--add').on('click', () => {
|
||||
alertify.notify('Odpowiedź została udzielona. Pytanie zostało dodane do wykładu.', 'success', 3);
|
||||
});
|
||||
$('.question--remove').on('click', () => {
|
||||
alertify.notify('Pytanie zostało usunięte', 'error', 3);
|
||||
});
|
||||
</script>
|
||||
{%endblock%}
|
||||
76
templates/student.html
Normal file
76
templates/student.html
Normal file
@ -0,0 +1,76 @@
|
||||
{% extends "index.html" %}
|
||||
{% block title %}Panel studenta{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container header__container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card color--primary white-text">
|
||||
<span class="card-title">Panel studenta</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container body__container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card color--primary white-text">
|
||||
<div class="card-content">
|
||||
<span class="card-title card-title__body">Pytania studentów</span>
|
||||
<ul id="questions-list">
|
||||
<li>Pytanie odnośnie zadania domowego 12.11.2018<span class="counter"><i class="btn-thumb-up material-icons">thumb_up</i><span>12</span></span></li>
|
||||
<li>Zagadnienia dotyczące egzaminu<span class="counter"><i class="btn-thumb-up material-icons">thumb_up</i><span>45</span></span></li>
|
||||
<li>Czy 12 listopada odbędą się zajęcia?<span class="counter"><i class="btn-thumb-up material-icons">thumb_up</i><span>157</span></span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container footer__container">
|
||||
<div class="row">
|
||||
<div class="col s12">
|
||||
<div class="card color--primary white-text">
|
||||
<div class="card-content footer__container--content">
|
||||
<div class="col s4">Powrót</div>
|
||||
<div class="col s4 modal-trigger" href="#modalAsk">Zadaj pytanie</div>
|
||||
<div class="col s4">Informacje</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modalAsk" class="modal">
|
||||
<div class="modal-content">
|
||||
<h4>Zadaj pytanie</h4>
|
||||
<form class="col s12">
|
||||
<div class="row">
|
||||
<div class="input-field col s12">
|
||||
<textarea id="textarea1" class="materialize-textarea"></textarea>
|
||||
<label for="textarea1">Tutaj wpisz swoje pytanie</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#!" class="modal-close waves-effect red btn">Anuluj</a>
|
||||
<a href="#!" id="btn-send" class="modal-close waves-effect waves-primary btn">Wyślij</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{%block script%}
|
||||
<script>
|
||||
$(document).ready(() => {
|
||||
$('.modal').modal();
|
||||
});
|
||||
|
||||
$('#btn-send').on('click', () => {
|
||||
alertify.notify('Pomyślnie wysłano wiadomość', 'success', 3);
|
||||
});
|
||||
$('.btn-thumb-up').on('click', () => {
|
||||
alertify.notify('Pomyślnie oceniono pytanie', 'success', 3);
|
||||
})
|
||||
</script>
|
||||
{%endblock%}
|
||||
Loading…
Reference in New Issue
Block a user