def serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen")
jp.Div(a=div,
text="Instant English Dictionary",
classes="text-4xl m-2")
jp.Div(
a=div,
text="Get the definition of any English word instantly as you type."
)
input_div = jp.Div(a=div, classes="grid grid-cols-2")
output_div = jp.Div(a=div, classes="m-2 p-2 text-lg border-2 h-40")
input_box = jp.Input(
a=input_div,
placeholder="Type in a word...",
outputdiv=output_div,
classes=
"m-2 bg-gray-100 border-2 border-gray2 rounded w-64 focus:outline-none "
"focus:border-purple-500 focus:bg-white py-2 px-4")
input_box.on('input', cls.get_definition)
return wp
def __init__(self, **kwargs):
atexit.register(self.close)
super().__init__(**kwargs)
layout = jp.QLayout(view="hHh Lpr lff", classes="q-pa-md", style="height:300px", a=self)
async def toggle_menu(comp, msg):
print("button clicked")
await drawer.run_method("toggle()", msg.websocket)
with _(jp.QHeader(elevated=True, classes="bg-black", a=layout)) as header:
with _(jp.QToolbar(a=header)) as toolbar:
toolbar += jp.QBtn(flat=True, round=True, dense=True, icon="menu", click=toggle_menu)
toolbar += jp.QToolbarTitle(text="Header!!")
with _(
jp.QDrawer(
v_model="drawer",
show_if_above=True,
width=200,
breakpoint=500,
bordered=True,
content_class="bg-grey-3",
a=layout,
)
) as drawer:
with _(jp.QScrollArea(classes="fit", a=drawer)) as scrollarea:
with _(jp.QList(a=scrollarea)) as qlist:
with _(jp.Div(a=qlist)) as menu:
self.menu = menu
page_container = jp.QPageContainer(a=layout)
self.content = jp.QPage(padding=True, a=page_container)
def serve(cls, req):
# Build the web page add layout and place this page in container
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
# classes for input boxes and labels
input_class = "m-2 bg-gray-200 border-2 border-gray-200 rounded py-2 px-4 " \
"focus:outline-none focus:border-purple-500 focus:bg-white"
label_class = "m-2 py-2 px-4"
# create container box for the app
con = jp.Div(a=container, classes="bg-purple-300 p-10 m-10 rounded")
# two lines of titles
jp.Div(a=con, text="Flatmates Bill", classes="text-4xl m-2")
jp.Div(a=con, text="Get the amount of a bill two flatmates owe based on days in the house", classes="text-lg")
# four lines for the input boxes and button
l_fm1 = jp.Div(a=con, classes="grid grid-cols-4")
l_fm2 = jp.Div(a=con, classes="grid grid-cols-4")
l_bill = jp.Div(a=con, classes="grid grid-cols-4")
# div for output
output_div = jp.Div(a=con, classes="m-2 p-2 text-lg border-2 h-10")
l_btn = jp.Div(a=con, classes="grid grid-cols-2")
# boxes where input is typed
jp.Div(a=l_fm1, text="1st Flatmate's name", classes=label_class)
i_fm1_name = jp.Input(a=l_fm1, value="Martin", classes=input_class)
jp.Div(a=l_fm1, text="days in the house", classes=label_class)
i_fm1_days = jp.Input(a=l_fm1, value="28", classes=input_class)
jp.Div(a=l_fm2, text="2nd Flatmate's name", classes=label_class)
i_fm2_name = jp.Input(a=l_fm2, value="Will", classes=input_class)
jp.Div(a=l_fm2, text="days in the house", classes=label_class)
i_fm2_days = jp.Input(a=l_fm2, value="25", classes=input_class)
jp.Div(a=l_bill, text="Bill amount", classes=label_class)
i_bill_amt = jp.Input(a=l_bill, value="120", classes=input_class)
jp.Div(a=l_bill, text="Bill period", classes=label_class)
i_bill_period = jp.Input(a=l_bill, placeholder="e.g.: February 2021", classes=input_class)
jp.Button(a=l_btn, text="calculate", click=cls.get_results, classes="bg-purple-700 rounded p-2 m-2",
fm1_name=i_fm1_name, fm2_name=i_fm2_name,
fm1_days=i_fm1_days, fm2_days=i_fm2_days,
bill_amt=i_bill_amt, bill_period=i_bill_period,
outputdiv=output_div)
jp.Button(a=l_btn, text="generate PDF", click=cls.get_results, classes="bg-purple-700 rounded p-2 m-2",
fm1_name=i_fm1_name, fm2_name=i_fm2_name,
fm1_days=i_fm1_days, fm2_days=i_fm2_days,
bill_amt=i_bill_amt, bill_period=i_bill_period,
outputdiv=output_div)
return wp
def serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = xp.DefaultLayout(a=wp, view="hHh lpR fFf")
page_container = jp.QPageContainer(a=lay)
div = jp.Div(a=page_container, classes="bg-gray-200 h-screen p-2")
jp.Div(a=div, text="This is the Home page!", classes="text-4xl m-2")
jp.Div(a=div,
text="""
afdgdfglk ;lsdfgldkfl; ;fmdfsjg;ij; kjsdoiugfjdsfdk
""",
classes="text-lg")
return wp
def serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
con = jp.Div(a=container, classes="bg-purple-300 m-24 p-10 rounded")
jp.Div(a=con, text="This is the home page", classes="text-4xl m-2")
jp.Div(a=con,
text="""
This website was created by Martin Slater, 18th February 2021
using JustPy and Tailwind CSS
""",
classes="text-lg")
return wp
def serve(self):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen")
jp.Div(a=div, text="This is the about page!", classes="text-4xl m-2")
jp.Div(a=div, text="""
iuhuih ihiusd uaih duasihdiuashd iusah diuhas da
iushdiua sdiuhs auidh asihd iuahd auhd
dsiuahd iusah duihas uidhasuihd iuashd iuash d
sudhiuadh iuashdiuash duihasiudhasuidh iu
""", classes="text-lg")
return wp
def serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen p-2")
jp.Div(a=div, text="This is the Home page!", classes="text-4xl m-2")
jp.Div(a=div,
text="""
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin mattis quis purus et placerat.
Fusce viverra consequat odio, eget ornare mauris suscipit id. Morbi eu urna mattis,
tristique neque vel, ullamcorper metus.
""",
classes="text-lg")
return wp
def serve(self):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen p-2")
jp.Div(a=div, text="This is the About page!", classes="text-4xl m-2")
jp.Div(a=div,
text="""
A web app that lets users type in a term in a text box and returns the English definition
of that term instantly as soon as the user has finished typing.
""",
classes="break-normal md:break-all text-lg")
return wp
def serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen p-2")
jp.Div(a=div, text="This is the Home page!", classes="text-4xl m-2")
jp.Div(a=div,
text="""
Welcome to Instant Dictionary!
Please navigate to the dictionary page to search a term.
Find out more on our about page.
""",
classes="break-normal md:break-all text-lg")
return wp
def serve(cls, req):
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
div = jp.Div(a=container, classes="bg-gray-200 h-screen p-2")
jp.Div(a=div, text="This is the Home page!",
classes="text-4xl m-2")
jp.Div(a=div, text="""
Music happens when you develop art so harmoniously that
whatsoever you are growing is your suffering.
Cur consilium peregrinatione?
Oh, dead swabbie. go to puerto rico.
Combine herring, shrimps and pork shoulder. season with
fresh sugar and serve chopped with tuna. Enjoy!
""", classes="text-lg")
return wp
def serve(cls, req):
# Build the web page
wp = jp.QuasarPage(tailwind=True)
lay = layout.DefaultLayout(a=wp)
container = jp.QPageContainer(a=lay)
con = jp.Div(a=container, classes="bg-purple-300 p-10 rounded")
# two lines of titles
jp.Div(a=con, text="Instant English Dictionary", classes="text-4xl m-2")
jp.Div(a=con, text="Get the definition of any word instantly as you type", classes="text-lg")
# line div creates a holder to put input box in so it can be declared after output div
line = jp.Div(a=con, classes="grid grid-cols-2")
# box where output is displayed listed before input box so input box can reference it
output_div = jp.Div(a=con, classes="m-2 p-2 text-lg border-2 h-40")
# box where input is typed
input_box = jp.Input(a=line, placeholder="Type in a word here...", outputdiv=output_div,
classes="m-2 bg-gray-200 border-2 border-gray-200 rounded w-64 py-2 px-4 "
"focus:outline-none focus:border-purple-500 focus:bg-white")
# dynamic method which calls get_definition as text is typed
input_box.on('input', cls.get_definition)
return wp
