{-# LANGUAGE QuasiQuotes #-} module Main where import Data.String.Interpolate (i) import Data.Text as T (Text, filter, toLower) import Network.HTTP.Types (status200, status404) import Network.Wai import Network.Wai.Handler.Warp as Warp import Web.View main :: IO () main = do putStrLn "Starting on http://localhost:3010/" Warp.run 3010 app buttons :: View c () buttons = col (gap 10 . pad 20) $ do el (bold . fontSize 32) "My page" row (gap 10) $ do button (btn Primary) "Do Something" button (btn Secondary) "Cancel" -- button' Secondary "Another Example" where -- Make style functions to encourage reuse btn c = bg c . hover (bg (light c)) . color White . rounded 3 . pad 15 light Primary = PrimaryLight light Secondary = SecondaryLight light _ = Gray -- alternatively, we can make View functions button' c = button (btn c) responsive :: View c () responsive = do layout (big flexRow) $ do nav (gap 10 . pad 20 . bg Primary . color White . small topbar . big sidebar) $ do el bold "SIDEBAR" el_ "One" el_ "Two" el_ "Three" col (scroll . grow . pad 20 . gap 20 . bg White) $ do el (bold . fontSize 24) "Make the window smaller" el_ "This demonstrates how to create a responsive design. Resize the window under 800px wide and the nav bar will switch to a top bar" col (color Gray . gap 20) $ do el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" el_ "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" where sidebar = width 250 . flexCol topbar = height 100 . flexRow big = media (MinWidth 800) small = media (MaxWidth 800) holygrail :: View c () holygrail = layout id $ do row (bg Primary) "Top Bar" row grow $ do col (bg Secondary) "Left Sidebar" col grow $ do text "Content Upper Left" space row id $ do space text "Content Bottom Right" col (bg Secondary) "Right Sidebar" row (bg Primary) "Bottom Bar" examples :: View c () examples = col (pad 20 . gap 15) $ do el (bold . fontSize 24) "Layout" link "Buttons" link "Responsive" link "Holy Grail" where link :: Text -> View c () link n = tag "a" (att "href" (url n) . color Primary) (text n) url = toLower . T.filter (/= ' ') app :: Application app req respond = do case pathInfo req of [] -> view examples ["buttons"] -> view buttons ["responsive"] -> view responsive ["holygrail"] -> view holygrail _ -> notFound where html h = respond $ responseLBS status200 [("Content-Type", "text/html; charset=utf-8")] h notFound = respond $ responseLBS status404 [("Content-Type", "text/plain; charset=utf-8")] "Not Found" view v = html $ document $ renderLazyByteString v document cnt = [i|
#{cnt} |] data AppColor = White | Light | Gray | Dark | Success | Error | Warning | Primary | PrimaryLight | Secondary | SecondaryLight deriving (Show) instance ToColor AppColor where colorValue White = "#FFF" colorValue Light = "#F2F2F3" colorValue Gray = "#888" colorValue Dark = "#2E3842" -- "#232C41" colorValue Primary = "#2C74BB" colorValue PrimaryLight = "#3281cf" colorValue Success = "#D5E6DE" colorValue Error = "#F3D8DA" colorValue Warning = "#FDF3D1" colorValue Secondary = "#5CADDB" colorValue SecondaryLight = "#6CBDEB"