tvl-depot/website/sandbox/learnpianochords/src/Overview.elm

module Overview exposing (render)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Responsive
import State
import UI


header1 : String -> Html msg
header1 copy =
    h2
        [ [ "text-center"
          , "pt-24"
          , "pb-12"
          , Responsive.h1
          ]
            |> UI.tw
            |> class
        ]
        [ text copy ]


header2 : String -> Html msg
header2 copy =
    h2
        [ [ "text-center"
          , "pb-10"
          , Responsive.h2
          ]
            |> UI.tw
            |> class
        ]
        [ text copy ]


paragraph : String -> Html msg
paragraph copy =
    p
        [ [ "pb-10"
          , Responsive.h3
          ]
            |> UI.tw
            |> 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
          ]
            |> UI.tw
            |> class
        ]
        (items |> List.map (\x -> li [ [ "pb-10" ] |> UI.tw |> class ] [ text x ]))


render : State.Model -> Html State.Msg
render model =
    div [ [ "container", "mx-auto" ] |> UI.tw |> 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" ] |> UI.tw |> class ]
            [ UI.simpleButton
                { label = "Let's get started"
                , handleClick = State.SetView State.Preferences
                , color = UI.Secondary
                , classes = []
                }
            ]
        ]