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 = []
}
]
]
|
