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
123
124
125
126
127
|
module Styles exposing (..)
import Base exposing (WordStatus(..))
import Css exposing (..)
import Css.Global exposing (global, selector)
import Html
import Html.Styled exposing (..)
styledButton : List (Attribute msg) -> List (Html msg) -> Html msg
styledButton =
styled
button
[ marginTop (px 12)
, marginBottom (px 12)
, paddingTop (px 12)
, paddingBottom (px 12)
, paddingLeft (px 0)
, paddingRight (px 12)
, fontFamily monospace
, border (px 0)
, backgroundColor (hex "#fff")
, borderRadius (px 4)
]
correctInputStyle : Style
correctInputStyle =
color (hex "#000")
wrongInputStyle : Style
wrongInputStyle =
wrongWordStyle
styledInput : Bool -> List (Attribute msg) -> List (Html msg) -> Html msg
styledInput inputStatus =
styled
input
[ fontFamily monospace
, if inputStatus then
correctInputStyle
else
wrongInputStyle
, border zero
, paddingTop (px 12)
, paddingBottom (px 12)
, width (pct 95)
]
styledListItem : List (Attribute msg) -> List (Html msg) -> Html msg
styledListItem =
styled
li
[ display inline
]
styledUnorderedList : List (Attribute msg) -> List (Html msg) -> Html msg
styledUnorderedList =
styled
ul
[ listStyle Css.none
, padding (px 0)
]
styledTextBox : List (Attribute msg) -> List (Html msg) -> Html msg
styledTextBox =
styled
div
[ color (hex "#000")
, fontFamily monospace
, border (px 0)
, borderRadius (px 4)
, paddingTop (px 12)
, paddingBottom (px 12)
, display inlineBlock
]
actionContainer : List (Attribute msg) -> List (Html msg) -> Html msg
actionContainer =
styled
div
[ padding (px 12)
, width (pct 100)
]
wrongWordStyle : Style
wrongWordStyle =
color (hex "#f07178")
correctWordStyle : Style
correctWordStyle =
color (hex "#13CA91")
todoWordStyle : Style
todoWordStyle =
color (hex "#787878")
currentWordStyle : Style
currentWordStyle =
textDecoration underline
wordStyle : WordStatus -> Style
wordStyle w =
case w of
Correct ->
correctWordStyle
Wrong ->
wrongWordStyle
Todo ->
todoWordStyle
CurrentWord ->
currentWordStyle
|
