019f8fd211
git-subtree-dir: users/wpcarro git-subtree-mainline:464bbcb15cgit-subtree-split:24f5a642afChange-Id: I6105b3762b79126b3488359c95978cadb3efa789
122 lines
3.4 KiB
Elm
122 lines
3.4 KiB
Elm
module Overview exposing (render)
|
||
|
||
import Html exposing (..)
|
||
import Html.Attributes exposing (..)
|
||
import Html.Events exposing (..)
|
||
import Responsive
|
||
import State
|
||
import Tailwind
|
||
import UI
|
||
|
||
|
||
header1 : String -> Html msg
|
||
header1 copy =
|
||
h2
|
||
[ [ "text-center"
|
||
, "pt-24"
|
||
, "pb-12"
|
||
, Responsive.h1
|
||
]
|
||
|> Tailwind.use
|
||
|> class
|
||
]
|
||
[ text copy ]
|
||
|
||
|
||
header2 : String -> Html msg
|
||
header2 copy =
|
||
h2
|
||
[ [ "text-center"
|
||
, "pb-10"
|
||
, Responsive.h2
|
||
]
|
||
|> Tailwind.use
|
||
|> class
|
||
]
|
||
[ text copy ]
|
||
|
||
|
||
paragraph : String -> Html msg
|
||
paragraph copy =
|
||
p
|
||
[ [ "pb-10"
|
||
, Responsive.h3
|
||
]
|
||
|> Tailwind.use
|
||
|> class
|
||
]
|
||
[ text copy ]
|
||
|
||
|
||
sect : { title : String, copy : List String } -> Html msg
|
||
sect { title, copy } =
|
||
section [] (header2 title :: (copy |> List.map paragraph))
|
||
|
||
|
||
numberedList : List String -> Html msg
|
||
numberedList items =
|
||
ol
|
||
[ [ "list-inside"
|
||
, "list-decimal"
|
||
, Responsive.h3
|
||
]
|
||
|> Tailwind.use
|
||
|> class
|
||
]
|
||
(items |> List.map (\x -> li [ [ "pb-10" ] |> Tailwind.use |> class ] [ text x ]))
|
||
|
||
|
||
render : State.Model -> Html State.Msg
|
||
render model =
|
||
div [ [ "container", "mx-auto" ] |> Tailwind.use |> class ]
|
||
[ header1 "Welcome to LearnPianoChords.app!"
|
||
, paragraph """
|
||
Learn Piano Chords helps piano players master chords.
|
||
"""
|
||
, paragraph """
|
||
Chords are the building blocks songwriters use to create
|
||
music. Whether you're a performer or songwriter, you need
|
||
to understand chords to unlock your full musical potential.
|
||
"""
|
||
, paragraph """
|
||
I think that if practicing is enjoyable, students will
|
||
practice more. Practice doesn’t make perfect; perfect
|
||
practice makes perfect.
|
||
"""
|
||
, section []
|
||
[ header2 "Ready to get started?"
|
||
, numberedList
|
||
[ """
|
||
Sit down at the piano.
|
||
"""
|
||
, """
|
||
Set the tempo at which you would like to practice.
|
||
"""
|
||
, """
|
||
Select the key or keys in which you would like to
|
||
practice.
|
||
"""
|
||
, """
|
||
When you are ready, close the preferences pane. We will show
|
||
you the name of a chord, and you should play that chord on
|
||
the piano.
|
||
"""
|
||
, """
|
||
If you don't know how to play the chord, toggle the piano
|
||
viewer to see the notes.
|
||
"""
|
||
, """
|
||
At any point while you're training, press the screen to pause
|
||
or resume your practice.
|
||
"""
|
||
]
|
||
]
|
||
, div [ [ "text-center", "py-20" ] |> Tailwind.use |> class ]
|
||
[ UI.simpleButton
|
||
{ label = "Let's get started"
|
||
, handleClick = State.SetView State.Preferences
|
||
, color = UI.Secondary
|
||
, classes = []
|
||
}
|
||
]
|
||
]
|