feat: finish main pages

elm.json

@@ -6,7 +6,6 @@
       "elm-explorations/webgl": "1.1.3",
       "elm/browser": "1.0.2",
       "elm/core": "1.0.5",
-      "elm/html": "1.0.0",
       "elm/http": "2.0.0",
       "elm/time": "1.0.0",
       "ianmackenzie/elm-3d-camera": "3.1.0",
@@ -21,6 +20,7 @@
       "elm-explorations/linear-algebra": "1.0.3",
       "elm/bytes": "1.0.8",
       "elm/file": "1.0.5",
+      "elm/html": "1.0.0",
       "elm/json": "1.1.3",
       "elm/random": "1.0.0",
       "elm/url": "1.0.0",

flake.nix

@@ -33,6 +33,7 @@
             buildInputs = self.checks.${system}.pre-commit-check.enabledPackages ++ [
               elmPackages.elm
               elmPackages.elm-review
+              elmPackages.elm-json
               entr
             ];
           };

src/Main.elm

@@ -13,7 +13,6 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Element.Input exposing (button)
-import Html exposing (Html)
 import Http
 import Length
 import Obj.Decode
@@ -98,6 +97,16 @@ type Msg
     | Copy String
 
 
+modulo : Float -> Float -> Float
+modulo a b =
+    b - toFloat (floor (b / a)) * a
+
+
+canonicalize : Float -> Float
+canonicalize angle =
+    modulo 360 angle
+
+
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     let
@@ -134,7 +143,7 @@ update msg model =
                         }
 
         Rotate time ->
-            wrap { model | angle = model.angle + 2 * (2 + sin (toFloat (Time.posixToMillis time) / 1000)) }
+            wrap { model | angle = canonicalize (model.angle + 2 * (2 + sin (toFloat (Time.posixToMillis time) / 1000))) }
 
         Copy text ->
             ( model, copyToClipboard text )
@@ -148,11 +157,6 @@ subscribe _ =
         ]
 
 
-htmlify : List (Element Msg) -> List (Html Msg)
-htmlify =
-    List.map (Element.layout [])
-
-
 vw : Model -> Float -> Float
 vw model percent =
     Basics.toFloat model.w * percent / 100
@@ -176,7 +180,7 @@ black =
 btnStyle : List (Attribute msg)
 btnStyle =
     [ padding 10
-    , Font.color (rgb255 255 255 255)
+    , Font.color white
     , Font.family [ Font.typeface "Rubik" ]
     , Font.semiBold
     , Font.size 20
@@ -196,49 +200,141 @@ btn disp act =
     button btnStyle { onPress = Just act, label = text (String.toUpper disp) }
 
 
+vw2pt : Model -> Float -> Int
+vw2pt model ratio =
+    (round << vw model) ratio
+
+
+vw2px : Model -> Float -> Length
+vw2px model ratio =
+    px (vw2pt model ratio)
+
+
+vh2pt : Model -> Float -> Int
+vh2pt model ratio =
+    (round << vh model) ratio
+
+
+vh2px : Model -> Float -> Length
+vh2px model ratio =
+    px (vh2pt model ratio)
+
+
+heading : List (Attr () msg)
+heading =
+    [ Font.color white
+    , Font.family [ Font.typeface "Imbue" ]
+    , Font.size 96
+    ]
+
+
+subheading : List (Attr () msg)
+subheading =
+    [ Font.color white
+    , Font.family [ Font.typeface "Imbue" ]
+    , Font.size 72
+    , width (px 600)
+    ]
+
+
+bodyText : List (Attr () msg)
+bodyText =
+    [ Font.color white
+    , Font.family [ Font.typeface "Inter" ]
+    , Font.size 20
+    , width (px 600)
+    ]
+
+
+page : Model -> List (Attr () msg)
+page model =
+    [ width fill
+    , height (vh2px model 100)
+    , spacing (vh2pt model -100)
+    , Background.color black
+    ]
+
+
+fullImage : Model -> List (Attr () msg)
+fullImage model =
+    [ width fill
+    , height (vh2px model 100)
+    , alpha 0.5
+    ]
+
+
+pageText : Model -> List (Attr () msg)
+pageText model =
+    [ spacing 30
+    , alignLeft
+    , alignTop
+    , width (vw2px model 50)
+    , height (vh2px model 100)
+    , paddingEach
+        { top = vh2pt model 50 - 96
+        , bottom = 0
+        , left = vw2pt model 10
+        , right = 0
+        }
+    ]
+
+
+inlineLink : String -> String -> Element msg
+inlineLink disp addr =
+    newTabLink
+        [ Font.underline
+        , Font.bold
+        ]
+        { url = addr
+        , label = text disp
+        }
+
+
 view : Model -> Browser.Document Msg
 view model =
     { title = "MacGregor House"
     , body =
-        htmlify
+        [ Element.layout
+            [ width fill
+            ]
+            (column [ width fill ]
                 [ column
                     [ width fill
                     , height fill
-                , spacing (round (vh model -100))
+                    , spacing (vh2pt model -100)
                     ]
                     [ el
                         [ width fill
-                    , height (px (round (vh model 100)))
+                        , height (vh2px model 100)
-                    , Background.color (rgb255 0 0 0)
+                        , Background.color black
                         ]
                         Element.none
                     , animatedEl crossfadeIn
                         [ width fill
-                    , height (px (round (vh model 100)))
+                        , height (vh2px model 100)
                         , Background.gradient { angle = 45, steps = [ rgb255 200 0 100, rgb255 100 0 200 ] }
                         ]
                         Element.none
                     , animatedEl crossfadeOut
                         [ width fill
-                    , height (px (round (vh model 100)))
+                        , height (vh2px model 100)
                         , Background.gradient { angle = 45, steps = [ rgb255 0 100 200, rgb255 0 200 100 ] }
                         ]
                         Element.none
                     , el
-                    [ alignLeft
+                        ([ alignLeft
                          , alignTop
-                    , width (px (round (vw model 50)))
+                         , width (vw2px model 50)
-                    , height (px (round (vh model 100)))
+                         , height (vh2px model 100)
                          , paddingEach
-                        { top = round (vh model 50) - 96
+                            { top = vh2pt model 50 - 96
                             , bottom = 0
-                        , left = round (vw model 10)
+                            , left = vw2pt model 10
                             , right = 0
                             }
-                    , Font.color (rgb255 255 255 255)
-                    , Font.family [ Font.typeface "Imbue" ]
-                    , Font.size 96
                          ]
+                            ++ heading
+                        )
                         (column
                             [ spacing 20
                             ]
@@ -255,17 +351,101 @@ view model =
                     , el
                         [ alignRight
                         , alignTop
-                    , width (px (round (vw model 60)))
+                        , width (vw2px model 60)
-                    , height (px (round (vh model 100)))
+                        , height (vh2px model 100)
                         , paddingEach
-                        { top = round (vh model 25)
+                            { top = vh2pt model 25
-                        , bottom = round (vh model 25)
+                            , bottom = vh2pt model 25
                             , left = 0
                             , right = 0
                             }
                         ]
                         (view3D model)
                     ]
+                , column
+                    (page model)
+                    [ image (fullImage model)
+                        { src = "../assets/img/tall.jpg"
+                        , description = "the imposing macgregor superstructure stands tall in defiance of strong winds"
+                        }
+                    , column (pageText model)
+                        [ paragraph subheading [ text "The tallest undergraduate dormitory." ]
+                        , paragraph bodyText
+                            [ text "Enrico Fermi once said, \"Before I came here I was confused about this subject. Having listened to your lecture, I am still confused, but on a higher level.\" "
+                            , inlineLink "Pietro Belluschi" "https://listart.mit.edu/art-artists/macgregor-house-1970"
+                            , text " attended that lecture."
+                            ]
+                        ]
+                    ]
+                , column
+                    (page model)
+                    [ image (fullImage model)
+                        { src = "../assets/img/view.jpg"
+                        , description = "the macgregor pov just hits different"
+                        }
+                    , column (pageText model)
+                        [ paragraph subheading [ text "Stunning vistas are just the beginning." ]
+                        , paragraph bodyText
+                            [ text "A view from MacGregor is like looking down on Earth from the stars. MacGregor's prime waterfront real estate offers breathtaking views of the Charles and the Boston skyline beyond."
+                            ]
+                        ]
+                    ]
+                , column
+                    (page model)
+                    [ image (fullImage model)
+                        { src = "../assets/img/free.jpg"
+                        , description = "macgregor is often seen as the gateway to new worlds, especially briggs field"
+                        }
+                    , column (pageText model)
+                        [ paragraph subheading [ text "Free as in freedom." ]
+                        , paragraph bodyText
+                            [ text "This website's source code and infrastructure, the ability to cook, your choice of living community and room assignments—they operate in the public interest of all MacGregorites. You won't get this freedom at many other undergraduate dormitories at MIT."
+                            ]
+                        ]
+                    ]
+                , column
+                    (page model)
+                    [ image (fullImage model)
+                        { src = "../assets/img/location.jpg"
+                        , description = "the bright lights of the macgregor high rise shine down upon the glossy snow-covered surface of briggs field"
+                        }
+                    , column (pageText model)
+                        [ paragraph subheading [ text "Nestled between Kendall and Cambridgeport." ]
+                        , paragraph bodyText
+                            [ text "Between "
+                            , inlineLink "the innovative spirit of Kendall" "https://kendallsquare.org/kendalls-history-orientation/"
+                            , text " and the industrial crossroads of Cambridgeport, there is a place—on a tiny stretch of street called Amherst Alley—that fills the quiet void with a voracious intellectual appetite and an unparalleled creative vision."
+                            ]
+                        ]
+                    ]
+                , column
+                    (page model)
+                    [ image (fullImage model)
+                        { src = "../assets/img/brick.jpg"
+                        , description = "multicolored bricks shine in the limelight of macgregorian festivities"
+                        }
+                    , column (pageText model)
+                        [ paragraph subheading [ text "We like the ", el [ Font.bold, Font.size 96 ] (text "brick"), text "." ]
+                        , paragraph bodyText
+                            [ text "The bricks are everywhere—by far the most recognizable feature of MacGregor. You'll find them protecting the building's exterior from harsh Bostonian winters, lining its fabled corridors, and in your room, as much an architectural statement as they are a testament to the people of MacGregor."
+                            ]
+                        ]
+                    ]
+                , column
+                    (page model)
+                    [ image (fullImage model)
+                        { src = "../assets/img/belong.jpg"
+                        , description = "the cultural murals of macgregor breathe life into its ancient pedestrian thoroughfares"
+                        }
+                    , column (pageText model)
+                        [ paragraph subheading [ text "You belong here." ]
+                        , paragraph bodyText
+                            [ text "MacGregor's greatness is the greatness of its people. Living in MacGregor inevitably connects you to its people and its culture—one of the most diverse, unique, and historic of any MIT dorm—spanning nine entries, countless murals and traditions, and a couple hundred current residents."
+                            ]
+                        ]
+                    ]
+                ]
+            )
         ]
     }