QQXR7DTOQ3BDRAIYASTMTFQXAVIG4MFIRNUH4C5M72WZMHPFL2YAC body {padding-top: 40px;padding-bottom: 40px;background-color: #eee;}.form-signin {max-width: 330px;padding: 15px;margin: 0 auto;}.form-signin .form-signin-heading,.form-signin .checkbox {margin-bottom: 10px;}.form-signin .checkbox {font-weight: normal;}.form-signin .form-control {position: relative;height: auto;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 10px;font-size: 16px;}.form-signin .form-control:focus {z-index: 2;}.form-signin input[type="email"] {margin-bottom: -1px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;}.form-signin input[type="password"] {margin-bottom: 10px;border-top-left-radius: 0;border-top-right-radius: 0;}
<!doctype html><html xmlns="http://www.w3.org/1999/xhtml" xmlns:foo="http://www.w3.org/2000/svg"><head><title>Aftok</title><!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"><!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"><!-- Custom styles --><link href="aftok.css" rel="stylesheet"></head><body><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!-- Latest compiled and minified Bootstrap JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script><script src="aftok.js"></script></body></html>
[ P.classes (className <$> ["panel", "panel-primary"]) ][ H.div[ P.classes [ className "panel-heading" ] ][ H.h3 [ P.classes [ className "panel-title" ]] [ H.text "Aftok Login" ] ], H.div[ P.classes [ className "panel-body" ] ][H.h2_[ H.text "username:" ], H.p_[ H.input[ P.value st.username, P.inputType P.InputText, E.onValueInput (E.input SetUsername)]], H.h2_[ H.text "password:" ], H.p_[ H.input[ P.value st.password, P.inputType P.InputPassword, E.onValueInput (E.input SetPassword)]], H.p_[ H.button[ P.classes (className <$> ["btn", "btn-primary"]), E.onClick (E.input_ (Login st.username st.password))][ H.text "Login" ]]
[ P.classes (className <$> ["container"]) ][ H.form[ P.classes [ className "form-signin" ] ][ H.h2 [ P.classes [ className "form-signin-heading" ]] [ H.text "Aftok Login" ], H.label [ P.for "inputUsername", P.classes [ className "sr-only" ]] [ H.text "username" ], H.input[ P.inputType P.InputText, P.id_ "inputUsername", P.classes [ className "form-control" ], P.placeholder "username", P.required true, P.autofocus true, P.value st.username, E.onValueInput (E.input SetUsername)], H.label [ P.for "inputPassword", P.classes [ className "sr-only" ]] [ H.text "username" ], H.input[ P.inputType P.InputPassword, P.id_ "inputPassword", P.classes [ className "form-control" ], P.placeholder "password", P.required true, P.value st.password, E.onValueInput (E.input SetPassword)], H.button[ P.classes (className <$> ["btn", "btn-primary"]), E.onClick (E.input_ (Login st.username st.password))][ H.text "Sign in" ]