Create Overview for Learn Piano Chords
Since I've published this, I should include an Overview page to orient potential users. This Overview could be better -- as could many things with this app -- but it's a start, and I'm seeking small wins.
This commit is contained in:
		
							parent
							
								
									f55d2f09f7
								
							
						
					
					
						commit
						9e855f7427
					
				
					 2 changed files with 94 additions and 2 deletions
				
			
		| 
						 | 
				
			
			@ -4,8 +4,100 @@ import Html exposing (..)
 | 
			
		|||
import Html.Attributes exposing (..)
 | 
			
		||||
import Html.Events exposing (..)
 | 
			
		||||
import State
 | 
			
		||||
import UI
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
header1 : String -> Html msg
 | 
			
		||||
header1 copy =
 | 
			
		||||
    h2
 | 
			
		||||
        [ [ "text-center", "text-6xl", "pt-24", "pb-12" ]
 | 
			
		||||
            |> UI.tw
 | 
			
		||||
            |> class
 | 
			
		||||
        ]
 | 
			
		||||
        [ text copy ]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
header2 : String -> Html msg
 | 
			
		||||
header2 copy =
 | 
			
		||||
    h2 [ [ "text-center", "text-5xl", "pb-10" ] |> UI.tw |> class ]
 | 
			
		||||
        [ text copy ]
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
paragraph : String -> Html msg
 | 
			
		||||
paragraph copy =
 | 
			
		||||
    p [ [ "text-4xl", "pb-10" ] |> 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"
 | 
			
		||||
          , "text-4xl"
 | 
			
		||||
          ]
 | 
			
		||||
            |> UI.tw
 | 
			
		||||
            |> class
 | 
			
		||||
        ]
 | 
			
		||||
        (items |> List.map (\x -> li [ [ "pb-10" ] |> UI.tw |> class ] [ text x ]))
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
render : State.Model -> Html State.Msg
 | 
			
		||||
render model =
 | 
			
		||||
    div [] [ text "Hello, Overview" ]
 | 
			
		||||
    div [ [ "container", "mx-auto", "px-20" ] |> 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", "pt-20" ] |> UI.tw |> class ]
 | 
			
		||||
            [ UI.simpleButton
 | 
			
		||||
                { label = "Let's get started"
 | 
			
		||||
                , handleClick = State.SetView State.Preferences
 | 
			
		||||
                , color = UI.Secondary
 | 
			
		||||
                , classes = []
 | 
			
		||||
                }
 | 
			
		||||
            ]
 | 
			
		||||
        ]
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -97,7 +97,7 @@ init =
 | 
			
		|||
    , tempo = 20
 | 
			
		||||
    , firstNote = firstNote
 | 
			
		||||
    , lastNote = lastNote
 | 
			
		||||
    , view = Preferences
 | 
			
		||||
    , view = Overview
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue