@@ -0,0 +1,234 @@
1+module Main exposing (Form, Lunch(..), Msg(..), blue, darkBlue, grey, init, main, red, update, view, white)
2+
3+{-| -}
4+
5+import Browser
6+import Element exposing (..)
7+import Element.Background as Background
8+import Element.Border as Border
9+import Element.Font as Font
10+import Element.Input as Input
11+import Element.Region as Region
12+import Html.Attributes
13+
14+
15+white =
16+ Element.rgb 1 1 1
17+
18+
19+grey =
20+ Element.rgb 0.9 0.9 0.9
21+
22+
23+blue =
24+ Element.rgb 0 0 0.8
25+
26+
27+red =
28+ Element.rgb 0.8 0 0
29+
30+
31+darkBlue =
32+ Element.rgb 0 0 0.9
33+
34+
35+main =
36+ Browser.sandbox
37+ { init = init
38+ , view = view
39+ , update = update
40+ }
41+
42+
43+init =
44+ { username = ""
45+ , password = ""
46+ , agreeTOS = False
47+ , comment = "Extra hot sauce?\n\n\nYes pls"
48+ , lunch = Gyro
49+ , spiciness = 2
50+ }
51+
52+
53+type alias Form =
54+ { username : String
55+ , password : String
56+ , agreeTOS : Bool
57+ , comment : String
58+ , lunch : Lunch
59+ , spiciness : Float
60+ }
61+
62+
63+type Msg
64+ = Update Form
65+
66+
67+update msg model =
68+ case Debug.log "msg" msg of
69+ Update new ->
70+ new
71+
72+
73+id i =
74+ htmlAttribute (Html.Attributes.id i)
75+
76+
77+type Lunch
78+ = Burrito
79+ | Taco
80+ | Gyro
81+
82+
83+view model =
84+ Element.layout
85+ [ Font.size 20
86+ ]
87+ <|
88+ Element.column
89+ [ width (px 800)
90+ , height shrink
91+ , centerY
92+ , centerX
93+ , spacing 36
94+ , padding 10
95+ ]
96+ [ el
97+ [ Region.heading 1
98+ , alignLeft
99+ , Font.size 36
100+ ]
101+ (text "Welcome to the Stylish Elephants Lunch Emporium")
102+ , Input.radio
103+ [ spacing 12
104+ , alpha 0.5
105+ , id "radio-1"
106+ ]
107+ { selected = Just model.lunch
108+ , onChange = \new -> Update { model | lunch = new }
109+ , label =
110+ -- Input.labelHidden "Just a label"
111+ Input.labelAbove
112+ [ Font.size 14
113+ , paddingXY 0 12
114+ ]
115+ (text "What would you like for lunch?")
116+ , options =
117+ [ Input.option Gyro (text "Gyro")
118+ , Input.option Burrito (text "Burrito")
119+ , Input.option Taco (text "Taco")
120+ ]
121+ }
122+ , Input.text
123+ [ spacing 12
124+ , id "text-1"
125+ ]
126+ { text = model.username
127+ , placeholder =
128+ Just
129+ (Input.placeholder
130+ [ focused
131+ [ moveUp 30 ]
132+ ]
133+ (text "Placeholder Label")
134+ )
135+ , onChange = \new -> Update { model | username = new }
136+ , label =
137+ Input.labelHidden "Just a label"
138+
139+ -- Input.labelBelow
140+ -- [ Font.size 14
141+ -- , focused
142+ -- [ moveUp 30 ]
143+ -- ]
144+ -- (text "Username")
145+ }
146+ , Input.currentPassword [ spacing 12, width shrink ]
147+ { text = model.password
148+ , placeholder = Nothing
149+ , onChange = \new -> Update { model | password = new }
150+ , label = Input.labelAbove [ Font.size 14 ] (text "Password")
151+ , show = False
152+ }
153+ , Input.multiline
154+ [ height
155+ (shrink
156+ |> maximum 400
157+ )
158+ , spacing 12
159+ , id "multiline-1"
160+ ]
161+ { text = model.comment
162+ , placeholder = Just (Input.placeholder [] (text "Extra hot sauce?\n\n\nYes pls"))
163+ , onChange = \new -> Update { model | comment = new }
164+ , label =
165+ -- Input.labelAbove [ Font.size 14 ] (text "Leave a comment!")
166+ Input.labelHidden "Just a label"
167+ , spellcheck = False
168+ }
169+ , Input.checkbox [ id "checkbox-1" ]
170+ { checked = model.agreeTOS
171+ , onChange = \new -> Update { model | agreeTOS = new }
172+ , icon = Input.defaultCheckbox
173+ , label =
174+ -- Input.labelRight [] (text "Agree to Terms of Service")
175+ Input.labelHidden "Just a label"
176+ }
177+ , Input.slider
178+ [ Element.height (Element.px 30)
179+ , Element.behindContent
180+ (Element.el
181+ [ Element.width Element.fill
182+ , Element.height (Element.px 2)
183+ , Element.centerY
184+ , Background.color grey
185+ , Border.rounded 2
186+ ]
187+ Element.none
188+ )
189+ ]
190+ { onChange = \new -> Update { model | spiciness = new }
191+ , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))
192+ , min = 0
193+ , max = 3.2
194+ , step = Nothing
195+ , value = model.spiciness
196+ , thumb =
197+ Input.defaultThumb
198+ }
199+ , --el [height (px 300), width (px 30)] <|
200+ Input.slider
201+ [ Element.width (Element.px 40)
202+ , Element.height (Element.px 80)
203+ , Element.behindContent
204+ (Element.el
205+ [ Element.height Element.fill
206+ , Element.width (Element.px 2)
207+ , Element.centerX
208+ , Background.color grey
209+ , Border.rounded 2
210+ ]
211+ Element.none
212+ )
213+ ]
214+ { onChange = \new -> Update { model | spiciness = new }
215+ , label = Input.labelAbove [] (text ("Spiciness: " ++ String.fromFloat model.spiciness))
216+ , min = 0
217+ , max = 3.2
218+ , step = Nothing
219+ , value = model.spiciness
220+ , thumb =
221+ Input.defaultThumb
222+ }
223+ , Input.button
224+ [-- Background.color blue
225+ -- , Font.color white
226+ -- , Border.color darkBlue
227+ -- , paddingXY 32 16
228+ -- , Border.rounded 3
229+ -- , width fill
230+ ]
231+ { onPress = Nothing
232+ , label = Element.text "Place your lunch order!"
233+ }
234+ ]