feat: finish landing page

src/Clipboard.elm

@@ -0,0 +1,4 @@
+port module Clipboard exposing (copyToClipboard)
+
+
+port copyToClipboard : String -> Cmd msg

src/Main.elm

@@ -5,11 +5,14 @@ import Array
 import Browser
 import Browser.Events as Events
 import Camera3d
+import Clipboard exposing (copyToClipboard)
 import Color
 import Direction3d
 import Element exposing (..)
 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
@@ -92,6 +95,7 @@ type Msg
     | GotMesh (Result Http.Error Object3d)
     | GotTexture (Result WebGL.Texture.Error (Material.Texture Color.Color))
     | Rotate Time.Posix
+    | Copy String
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
@@ -132,6 +136,9 @@ update msg model =
         Rotate time ->
             wrap { model | angle = model.angle + 2 * (2 + sin (toFloat (Time.posixToMillis time) / 1000)) }
 
+        Copy text ->
+            ( model, copyToClipboard text )
+
 
 subscribe : Model -> Sub Msg
 subscribe _ =
@@ -156,6 +163,39 @@ vh model percent =
     Basics.toFloat model.h * percent / 100
 
 
+white : Color
+white =
+    rgb 255 255 255
+
+
+black : Color
+black =
+    rgb 0 0 0
+
+
+btnStyle : List (Attribute msg)
+btnStyle =
+    [ padding 10
+    , Font.color (rgb255 255 255 255)
+    , Font.family [ Font.typeface "Rubik" ]
+    , Font.semiBold
+    , Font.size 20
+    , Border.width 2
+    , Border.color white
+    , mouseOver [ Background.color white, Font.color black ]
+    ]
+
+
+linkBtn : String -> String -> Element msg
+linkBtn disp addr =
+    newTabLink btnStyle { url = addr, label = text (String.toUpper disp) }
+
+
+btn : String -> Msg -> Element Msg
+btn disp act =
+    button btnStyle { onPress = Just act, label = text (String.toUpper disp) }
+
+
 view : Model -> Browser.Document Msg
 view model =
     { title = "MacGregor House"
@@ -199,7 +239,19 @@ view model =
                     , Font.family [ Font.typeface "Imbue" ]
                     , Font.size 96
                     ]
-                    (text "MacGregor House")
+                    (column
+                        [ spacing 20
+                        ]
+                        [ text "MacGregor House"
+                        , row
+                            [ spacing 20
+                            ]
+                            [ linkBtn "Events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
+                            , linkBtn "Space" "https://forms.gle/KxFAG65TQuPxdYak8"
+                            , btn "iCal" (Copy "https://calendar.google.com/calendar/ical/c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com/public/basic.ics")
+                            ]
+                        ]
+                    )
                 , el
                     [ alignRight
                     , alignTop

src/index.html

@@ -6,7 +6,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Imbue:opsz,wght@10..100,100..900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Imbue:opsz,wght@10..100,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap"
       rel="stylesheet"
     />
   </head>
@@ -18,6 +18,15 @@
         node: document.getElementById("app"),
         flags: [window.innerWidth, window.innerHeight],
       });
+
+      app.ports.copyToClipboard.subscribe((text) => {
+        var textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textArea);
+      });
     </script>
   </body>
 </html>