about summary refs log tree commit diff
path: root/website/sandbox/learnpianochords/src/Overview.elm
blob: 628b52d79da9e4c18cd82c0766146afa2c52908a (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
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 = []
                }
            ]
        ]