mirror of
https://github.com/TheAnachronism/docspell.git
synced 2025-06-22 02:18:26 +00:00
Website redesign
This commit is contained in:
eikek
@ -1,7 +1,6 @@
|
||||
module Main exposing (..)
|
||||
|
||||
import Browser exposing (Document)
|
||||
import Browser.Navigation exposing (Key)
|
||||
import Browser
|
||||
import Demo
|
||||
import ExtraAttr exposing (..)
|
||||
import Feature exposing (Feature)
|
||||
@ -109,34 +108,33 @@ subscriptions _ =
|
||||
view : Model -> Html Msg
|
||||
view model =
|
||||
node "body"
|
||||
[]
|
||||
[ class "text-gray-700" ]
|
||||
[ mainHero model
|
||||
, demoHero
|
||||
, section [ class "section" ]
|
||||
[ div [ class "container" ]
|
||||
, demoHeader
|
||||
, section [ class "container max-w-screen-xl mx-auto mb-2" ]
|
||||
[ div [ class "mt-3 flex flex-col space-y-4" ]
|
||||
[ Demo.demo Demo.processDemo
|
||||
, Demo.demo Demo.navigateDemo
|
||||
]
|
||||
]
|
||||
, featureHero model
|
||||
, section [ class "section" ]
|
||||
[ div [ class "container" ]
|
||||
(List.indexedMap Feature.featureBox model.features
|
||||
++ [ div [ class "columns box" ]
|
||||
[ div [ class "column is-full" ]
|
||||
[ div [ class "content has-text-centered is-medium" ]
|
||||
[ text "A more complete list can be found in "
|
||||
, a [ href "/docs/features" ] [ text "here" ]
|
||||
, text "."
|
||||
]
|
||||
]
|
||||
, featureHeader model
|
||||
, section [ class "mx-auto max-w-screen-xl mb-2 mt-4" ]
|
||||
(List.indexedMap Feature.featureBox model.features
|
||||
++ [ div
|
||||
[ class "flex px-8 py-8 border rounded mb-5 shadow-lg text-2xl"
|
||||
, class "sm:flex-row sm:space-y-0 sm-space-x-4"
|
||||
, class "mx-2 sm:mx-8"
|
||||
]
|
||||
[ div [ class "text-center w-full" ]
|
||||
[ text "A more complete list can be found in "
|
||||
, a [ href "/docs/features", class "link" ] [ text "here" ]
|
||||
, text "."
|
||||
]
|
||||
]
|
||||
)
|
||||
]
|
||||
, getStartedHero model
|
||||
, div [ class "section" ]
|
||||
(GetStarted.getStarted model.flags.version)
|
||||
]
|
||||
]
|
||||
)
|
||||
, getStartedHeader model
|
||||
, GetStarted.getStarted model.flags.version
|
||||
, footHero model
|
||||
]
|
||||
|
||||
@ -147,7 +145,7 @@ footHero model =
|
||||
[ id "footer"
|
||||
, class "footer"
|
||||
]
|
||||
[ div [ class "has-text-centered" ]
|
||||
[ div [ class "text-center" ]
|
||||
[ span []
|
||||
[ text ("Docspell, " ++ model.flags.version)
|
||||
]
|
||||
@ -157,6 +155,7 @@ footHero model =
|
||||
, a
|
||||
[ href "https://spdx.org/licenses/AGPL-3.0-or-later.html"
|
||||
, target "_blank"
|
||||
, class "link"
|
||||
]
|
||||
[ text "AGPLv3+"
|
||||
]
|
||||
@ -166,6 +165,7 @@ footHero model =
|
||||
, a
|
||||
[ href "https://github.com/eikek/docspell"
|
||||
, target "_blank"
|
||||
, class "link"
|
||||
]
|
||||
[ text "Source Code"
|
||||
]
|
||||
@ -176,6 +176,7 @@ footHero model =
|
||||
[ a
|
||||
[ href "https://gitter.im/eikek/docspell"
|
||||
, target "_blank"
|
||||
, class "link"
|
||||
]
|
||||
[ text "Chat on Gitter"
|
||||
]
|
||||
@ -184,166 +185,142 @@ footHero model =
|
||||
]
|
||||
|
||||
|
||||
getStartedHero : Model -> Html Msg
|
||||
getStartedHero _ =
|
||||
getStartedHeader : Model -> Html Msg
|
||||
getStartedHeader _ =
|
||||
section
|
||||
[ id "get-started"
|
||||
, class "hero is-primary is-bold"
|
||||
, class "hero-header"
|
||||
]
|
||||
[ div [ class "hero-body" ]
|
||||
[ div [ class "container" ]
|
||||
[ h2 [ class "title" ]
|
||||
[ text "Get Started"
|
||||
]
|
||||
]
|
||||
]
|
||||
[ text "Get Started"
|
||||
]
|
||||
|
||||
|
||||
demoHero : Html msg
|
||||
demoHero =
|
||||
section
|
||||
[ id "demos"
|
||||
, class "hero is-info is-bold"
|
||||
demoHeader : Html msg
|
||||
demoHeader =
|
||||
h2
|
||||
[ class "hero-header"
|
||||
, id "demos"
|
||||
]
|
||||
[ div
|
||||
[ class "hero-body"
|
||||
]
|
||||
[ div [ class "container" ]
|
||||
[ h2 [ class "title" ]
|
||||
[ text "Screencasts"
|
||||
]
|
||||
]
|
||||
]
|
||||
[ text "Screencasts"
|
||||
]
|
||||
|
||||
|
||||
featureHero : Model -> Html Msg
|
||||
featureHero model =
|
||||
section
|
||||
featureHeader : Model -> Html Msg
|
||||
featureHeader _ =
|
||||
h2
|
||||
[ id "feature-selection"
|
||||
, class "hero is-info is-bold"
|
||||
, class "hero-header"
|
||||
]
|
||||
[ div
|
||||
[ class "hero-body"
|
||||
[ text "Feature Selection"
|
||||
]
|
||||
|
||||
|
||||
navBar : String -> Html Msg
|
||||
navBar classes =
|
||||
nav
|
||||
[ id "top-nav"
|
||||
, class "top-0 z-50 w-full flex flex-row justify-start shadow-sm h-14 antialiased "
|
||||
, class classes
|
||||
]
|
||||
[ a
|
||||
[ onClick ToggleNavbarMenu
|
||||
, href "#"
|
||||
, class "font-bold inline-flex items-center px-4 w-10 sm:hidden "
|
||||
]
|
||||
[ div [ class "container" ]
|
||||
[ h2 [ class "title" ]
|
||||
[ text "Feature Selection"
|
||||
]
|
||||
[ i [ class "fa fa-bars" ] []
|
||||
]
|
||||
, a
|
||||
[ class "inline-flex px-4 items-center hover:bg-gray-50 hover:bg-opacity-20"
|
||||
, href "/"
|
||||
]
|
||||
[ div [ class "" ]
|
||||
[ Icons.logo
|
||||
]
|
||||
, span [ class "ml-1 text-2xl font-semibold font-serif" ]
|
||||
[ text "Docspell" ]
|
||||
]
|
||||
, a
|
||||
[ href "docs/"
|
||||
, class "px-4 flex items-center hover:bg-gray-50 hover:bg-opacity-20"
|
||||
, class " text-xl"
|
||||
]
|
||||
[ Icons.docs
|
||||
, span [ class "ml-2 tracking-wide" ]
|
||||
[ text "Documentation"
|
||||
]
|
||||
]
|
||||
, a
|
||||
[ href "blog/"
|
||||
, class "px-4 flex items-center hover:bg-gray-50 hover:bg-opacity-20"
|
||||
, class " text-xl"
|
||||
]
|
||||
[ Icons.blog
|
||||
, span [ class "ml-2 tracking-wide" ]
|
||||
[ text "Blog"
|
||||
]
|
||||
]
|
||||
, a
|
||||
[ target "_blank"
|
||||
, href "https://github.com/eikek/docspell"
|
||||
, class "px-4 flex items-center hover:bg-gray-50 hover:bg-opacity-20"
|
||||
, class " text-xl"
|
||||
]
|
||||
[ Icons.github
|
||||
, span [ class "ml-2 tracking-wide" ]
|
||||
[ text "Github"
|
||||
]
|
||||
]
|
||||
]
|
||||
|
||||
|
||||
mainHero : Model -> Html Msg
|
||||
mainHero model =
|
||||
mainHero _ =
|
||||
section
|
||||
[ id "hero-main"
|
||||
, class "hero is-fullheight is-primary"
|
||||
, class "min-h-screen text-white flex flex-col items-center main-background"
|
||||
]
|
||||
[ div [ class "hero-head" ]
|
||||
[ nav [ class "navbar" ]
|
||||
[ div [ class "navbar-brand" ]
|
||||
[ a
|
||||
[ class "navbar-item"
|
||||
, href "/"
|
||||
]
|
||||
[ span [ class "icon is-large" ]
|
||||
[ Icons.logo
|
||||
]
|
||||
, text "Docspell"
|
||||
]
|
||||
, a
|
||||
[ role "button"
|
||||
, onClick ToggleNavbarMenu
|
||||
, classList
|
||||
[ ( "navbar-burger", True )
|
||||
, ( "is-active", model.navbarOpen )
|
||||
]
|
||||
, ariaLabel "menu"
|
||||
, ariaExpanded False
|
||||
]
|
||||
[ span [ ariaHidden True ] []
|
||||
, span [ ariaHidden True ] []
|
||||
, span [ ariaHidden True ] []
|
||||
]
|
||||
[ navBar " text-white"
|
||||
, div [ class "flex-grow flex flex-col items-center justify-center w-full" ]
|
||||
[ Icons.logoWidth 112
|
||||
, h1 [ class "text-6xl font-semibold shadow font-serif" ]
|
||||
[ text "Docspell"
|
||||
]
|
||||
, h2 [ class "text-3xl font-madium tracking-wide mt-2 mb-4 " ]
|
||||
[ text "Simple document organizer"
|
||||
]
|
||||
, p [ class "px-2 text-center text-xl font-light shadow max-w-prose font-sans" ]
|
||||
[ text "Docspell assists in organizing your piles of "
|
||||
, text "digital documents, resulting from scanners, e-mails "
|
||||
, text "and other sources with miminal effort."
|
||||
]
|
||||
, div
|
||||
[ class "mt-4 flex flex-col space-y-2 text-2xl"
|
||||
, class "sm:items-center sm:flex-row sm:space-y-0 sm:space-x-4"
|
||||
]
|
||||
[ a
|
||||
[ class "button info"
|
||||
, href "#demos"
|
||||
]
|
||||
, div
|
||||
[ classList
|
||||
[ ( "navbar-menu", True )
|
||||
, ( "is-active", model.navbarOpen )
|
||||
]
|
||||
[ text "Screencasts"
|
||||
]
|
||||
[ div [ class "navbar-start" ]
|
||||
[ a
|
||||
[ href "docs/"
|
||||
, class "navbar-item"
|
||||
]
|
||||
[ span [ class "icon" ]
|
||||
[ Icons.docs
|
||||
]
|
||||
, span []
|
||||
[ text "Documentation"
|
||||
]
|
||||
]
|
||||
, a
|
||||
[ target "_blank"
|
||||
, href "https://github.com/eikek/docspell"
|
||||
, class "navbar-item"
|
||||
]
|
||||
[ span [ class "icon" ]
|
||||
[ Icons.github
|
||||
]
|
||||
, span []
|
||||
[ text "Github"
|
||||
]
|
||||
]
|
||||
]
|
||||
, a
|
||||
[ class "button info"
|
||||
, href "#feature-selection"
|
||||
]
|
||||
[ text "Features"
|
||||
]
|
||||
, a
|
||||
[ class "button primary"
|
||||
, href "#get-started"
|
||||
]
|
||||
[ text "Get Started"
|
||||
]
|
||||
]
|
||||
]
|
||||
, div [ class "hero-body" ]
|
||||
[ div
|
||||
[ class "container has-text-centered"
|
||||
]
|
||||
[ Icons.logoWidth 112
|
||||
, h1 [ class "title main-title is-2" ]
|
||||
[ text "Docspell"
|
||||
]
|
||||
, h2 [ class "subtitle is-3" ]
|
||||
[ text "Simple document organizer"
|
||||
]
|
||||
, p [ class "content is-medium narrow-center" ]
|
||||
[ text "Docspell assists in organizing your piles of "
|
||||
, text "digital documents, resulting from scanners, e-mails "
|
||||
, text "and other sources with miminal effort."
|
||||
]
|
||||
, div [ class " buttons is-centered" ]
|
||||
[ a
|
||||
[ class "button is-info is-medium"
|
||||
, href "#demos"
|
||||
]
|
||||
[ text "Screencasts"
|
||||
]
|
||||
, a
|
||||
[ class "button is-info is-medium"
|
||||
, href "#feature-selection"
|
||||
]
|
||||
[ text "Features"
|
||||
]
|
||||
, a
|
||||
[ class "button is-primary is-medium"
|
||||
, href "#get-started"
|
||||
]
|
||||
[ text "Get Started"
|
||||
]
|
||||
]
|
||||
]
|
||||
]
|
||||
, div [ class "hero-foot" ]
|
||||
[ span [ class "unsplash-credit" ]
|
||||
[ text "Photo by "
|
||||
, div [ class "text-right w-full" ]
|
||||
[ span [ class "opacity-40 text-xs" ]
|
||||
[ i [ class "fab fa-unsplash mr-1" ] []
|
||||
, text "Photo by "
|
||||
, a
|
||||
[ href "https://unsplash.com/@numericcitizen"
|
||||
, target "_blank"
|
||||
|
||||
Reference in New Issue
Block a user