Sites webs

Elm est un langage fonctionnel qui sert à faire des sites web. C'est un langage de niche, peu de personnes l'utilisent, mais c'est parfait pour ce qu'on a à faire.

Pour en voir un exemple, c'est très simple:

• Copiez le code ci-dessous dans Main.elm
• Mettez vous dans votre répertoire elm en ligne de commande
• Exécutez la commande elm reactor qui lance le serveur web
• Dans votre navigateur, allez à l'adresse http://localhost:8000/src/Main.elm

(Ctrl+C pour killer le serveur dans le terminal ensuite)

module Main exposing (..)

import Html exposing (..)
import Html.Attributes exposing (class, href, rel)


-- Lien vers Water, un framework css très léger
cssLink : Html msg
cssLink =
    node "link"
        [ rel "stylesheet"
        , href "https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
        ]
        []


-- Ajout de quelques styles personnalisés
customStyles : Html msg
customStyles =
    node "style" [] 
        [ text """
            .header { 
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 40px;
                text-align: center;
                border-radius: 8px;
                margin-bottom: 30px;
            }
            .avantages-list li {
                border-left: 3px solid #667eea;
                padding-left: 15px;
                transition: all 0.2s;
            }
            .avantages-list li:hover {
                border-left-color: #764ba2;
                transform: translateX(5px);
            }
        """ ]


-- Données
avantages : List String
avantages =
    [ "Pas d'erreurs à l'exécution"
    , "Syntaxe claire"
    , "Architecture robuste"
    , "Messages d'erreur excellents"
    ]


-- Fonctions de vue
entete : Html msg
entete =
    header [ class "header" ] 
        [ h1 [] [ text "Mon Site en Elm" ]
        , p [] [ text "Programmation fonctionnelle pour le web" ]
        ]


sectionAPropos : Html msg
sectionAPropos =
    section []
        [ h2 [] [ text "À propos" ]
        , p [] [ text "Elm est un langage fonctionnel pour créer des applications web robustes et maintenables." ]
        ]


avantageItem : String -> Html msg
avantageItem texte =
    li [] [ text texte ]


sectionAvantages : List String -> Html msg
sectionAvantages listeAvantages =
    section []
        [ h2 [] [ text "Avantages" ]
        , ul [ class "avantages-list" ] 
            (List.map avantageItem listeAvantages)
        ]


piedDePage : Html msg
piedDePage =
    footer []
        [ p [] [ text "© 2025 - Mon site" ]
        ]


-- Vue principale
main : Html msg
main =
    div []
        [ cssLink
        , customStyles
        , div [ class "container" ]
            [ entete
            , sectionAPropos
            , sectionAvantages avantages
            , piedDePage
            ]
        ]