88 lines
2.9 KiB
Python
88 lines
2.9 KiB
Python
import dash
|
|
import dash_bootstrap_components as dbc
|
|
import dash_html_components as html
|
|
import dash_core_components as dcc
|
|
#from dash.dependencies import Input, Output
|
|
|
|
import datetime
|
|
ex_css = [dbc.themes.BOOTSTRAP, "static/test.css"]
|
|
app = dash.Dash(__name__, external_stylesheets=ex_css)
|
|
|
|
card_main = dbc.Card(
|
|
[
|
|
dbc.CardImg(src="/assets/ball_of_sun.jpg", top=True, bottom=False,
|
|
title="Image by Kevin Dinkel", alt='Learn Dash Bootstrap Card Component'),
|
|
dbc.CardBody(
|
|
[
|
|
html.H4("Learn Dash with Charming Data", className="card-title"),
|
|
html.H6("Lesson 1:", className="card-subtitle"),
|
|
html.P(
|
|
"Choose the year you would like to see on the bubble chart.",
|
|
className="card-text",
|
|
),
|
|
|
|
dbc.Button("Still not live I guess?", color="primary"),
|
|
# dbc.CardLink("GirlsWhoCode", href="https://girlswhocode.com/", target="_blank"),
|
|
]
|
|
),
|
|
],
|
|
color="dark", # https://bootswatch.com/default/ for more card colors
|
|
inverse=True, # change color of text (black or white)
|
|
outline=False, # True = remove the block colors from the background and header
|
|
)
|
|
|
|
card_question = dbc.Card(
|
|
[
|
|
dbc.CardBody([
|
|
html.H4("Question 1", className="card-title"),
|
|
html.P("What was India's life expectancy in 1952?", className="card-text"),
|
|
dbc.ListGroup(
|
|
[
|
|
dbc.ListGroupItem("A. 55 years"),
|
|
dbc.ListGroupItem("B. 37 years"),
|
|
dbc.ListGroupItem("C. 49 years"),
|
|
], flush=True)
|
|
]),
|
|
], color="warning",
|
|
)
|
|
|
|
|
|
|
|
|
|
|
|
today = datetime.date.today().strftime("%d.%m.%Y")
|
|
tag = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag", "Sonntag"][datetime.datetime.today().weekday()]
|
|
|
|
string_header = tag + ", der " + today
|
|
|
|
|
|
app.layout = html.Div([
|
|
html.Header(children = [
|
|
html.H1(string_header)
|
|
]),
|
|
html.Div(
|
|
className = "content",
|
|
style = {"padding-top" : "32em"},
|
|
children = [
|
|
dbc.Row([dbc.Col(card_main, width=3),
|
|
dbc.Col(card_question, width=3)], justify="around"), # justify="start", "center", "end", "between", "around"
|
|
|
|
# dbc.CardGroup([card_main, card_question, card_graph]) # attaches cards with equal width and height columns
|
|
# dbc.CardDeck([card_main, card_question, card_graph]) # same as CardGroup but with gutter in between cards
|
|
|
|
# dbc.CardColumns([ # Cards organised into Masonry-like columns
|
|
# card_main,
|
|
# card_question,
|
|
# card_graph,
|
|
# card_question,
|
|
# card_question,
|
|
# ])
|
|
])
|
|
])
|
|
|
|
|
|
|
|
|
|
if __name__ == "__main__":
|
|
app.run_server(host="0.0.0.0")
|