feat: added donation page

frontend/src/Donate/Helpers.elm

@@ -0,0 +1,245 @@
+module Donate.Helpers exposing (..)
+
+import Config.CardFormat exposing (..)
+import Config.Colour exposing (..)
+import Config.Format exposing (..)
+import Config.StrengthBar exposing (..)
+import Config.ToolTip exposing (..)
+import Donate.Types exposing (..)
+import Effect exposing (Effect)
+import Element as E exposing (..)
+import Element.Background as B exposing (..)
+import Element.Border as D
+import Element.Font as F
+import Html.Attributes as H exposing (style)
+import Layouts
+import Page exposing (Page)
+import Route exposing (Route)
+import Shared
+import View exposing (View)
+
+
+donateMaker : Donate -> Element msg
+donateMaker donate =
+    row
+        topLevelBox
+        [ cardImageMaker (donateImage donate)
+        , cardMaker
+            [ cardTitleMaker (donateTitle donate)
+            , cardFormatter
+                [ cardContentSpacing
+                    [ column
+                        fieldSpacer
+                        [ feeMaker donate
+                        , preferenceMaker donate
+                        , proTitleMaker donate
+                        , proMaker donate
+                        , conTitleMaker donate
+                        , conMaker donate
+                        ]
+                    ]
+                ]
+            ]
+        ]
+
+
+donateImage :
+    Donate
+    ->
+        { src : String
+        , description : String
+        }
+donateImage donate =
+    { src = "donate/" ++ donate.donateImage ++ ".png"
+    , description = donate.donateName
+    }
+
+
+donateTitle : Donate -> String
+donateTitle donate =
+    donate.donateName
+
+
+donateWidth =
+    width <| px 45
+
+
+feeMaker : Donate -> Element msg
+feeMaker donate =
+    row
+        (paragraphBoldFormat
+            ++ [ F.size 18
+               , E.width fill
+               ]
+        )
+        [ column
+            [ alignTop
+            , donateWidth
+            ]
+            [ text "Fees:"
+            ]
+        , column
+            [ E.width fill
+            , alignLeft
+            ]
+            [ paragraph [ F.regular ]
+                [ el [ F.color colourTheme.textLightOrange ] <|
+                    text donate.donateFees
+                ]
+            ]
+        ]
+
+
+proTitleMaker : Donate -> Element msg
+proTitleMaker donate =
+    row paragraphBoldFormat
+        [ column
+            [ alignTop
+            , width <| px 80
+            ]
+            [ text "Pros:"
+            ]
+        ]
+
+
+conTitleMaker : Donate -> Element msg
+conTitleMaker donate =
+    row paragraphBoldFormat
+        [ column
+            [ alignTop
+            , width <| px 80
+            ]
+            [ text "Cons:"
+            ]
+        ]
+
+
+proMaker : Donate -> Element msg
+proMaker donate =
+    column
+        [ spacing 8
+        , width fill
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 35
+            }
+        ]
+    <|
+        List.map2 (\x y -> makePro x)
+            donate.donatePros
+            (List.range 1 (List.length donate.donatePros))
+
+
+makePro : Pros -> Element msg
+makePro pro =
+    column
+        (paragraphAlignLeft
+            ++ [ spacing 8
+               , width fill
+               ]
+        )
+        [ paragraph [ F.regular ]
+            [ text ("‣ " ++ pro.pro) ]
+        ]
+
+
+conMaker : Donate -> Element msg
+conMaker donate =
+    column
+        [ spacing 8
+        , width fill
+        , paddingEach
+            { top = 0
+            , right = 0
+            , bottom = 0
+            , left = 35
+            }
+        ]
+    <|
+        List.map2 (\x y -> makeCon x)
+            donate.donateCons
+            (List.range 1 (List.length donate.donateCons))
+
+
+makeCon : Cons -> Element msg
+makeCon con =
+    column
+        (paragraphAlignLeft
+            ++ [ spacing 8
+               , width fill
+               ]
+        )
+        [ paragraph [ F.regular ]
+            [ text ("‣ " ++ con.con) ]
+        ]
+
+
+preferenceMaker : Donate -> Element msg
+preferenceMaker donate =
+    row
+        [ width fill
+        , height fill
+        ]
+        [ column
+            [ E.alignTop
+            , E.alignLeft
+            ]
+            [ paragraph
+                (paragraphBoldFormat
+                    ++ [ F.size 18
+                       , alignLeft
+                       , E.width fill
+                       ]
+                )
+                [ el
+                    [ tooltip
+                        "This represents how pleasant it was to interact with the host(s)."
+                    ]
+                    (text "Preference:")
+                ]
+            ]
+        , barPadding
+            [ barMaker getPreferenceTooltip donate.donatePreference ]
+        ]
+
+
+getPreferenceTooltip : Int -> String
+getPreferenceTooltip num =
+    case num of
+        0 ->
+            "Disdain this platform."
+
+        1 ->
+            "Very negative towards this platform."
+
+        2 ->
+            "Strongly dislike this platform."
+
+        3 ->
+            "Dislike this platform."
+
+        4 ->
+            "Somewhat dislike this platform."
+
+        5 ->
+            "Neutral, no strong feelings."
+
+        6 ->
+            "Somewhat like this platform."
+
+        7 ->
+            "Like this platform."
+
+        8 ->
+            "Strongly like this platform."
+
+        9 ->
+            "Very positive towards this platform."
+
+        10 ->
+            "Absolutely love this platform!"
+
+        _ ->
+            "Preference is out of bounds."

frontend/src/Donate/Methods/Cardano.elm

@@ -0,0 +1,50 @@
+module Donate.Methods.Cardano exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donateCardano : Donate
+donateCardano =
+    let
+        name : String
+        name =
+            "Cardano"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://handle.me/thenutrivore"
+    , donateName = name
+    , donateFees = "0.17 ADA"
+    , donatePreference = 6
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just False
+          , openSource = Just True
+          , fastPayments = Just True
+          , userFriendly = Just False
+          , anonymous = Just True
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = "Blockchain-based peer-to-peer donations."
+          }
+        , { pro = "Open source, state-of-the-art cryptocurrency."
+          }
+        , { pro = "Extremely fast transactions."
+          }
+        , { pro = "Extremely minimal gas fees per transaction."
+          }
+        , { pro = "Decentralized cryptocurrency platform."
+          }
+        ]
+    , donateCons =
+        [ { con = "Less accessible for non-crypto users."
+          }
+        , { con = "Requires cryptocurrency knowledge."
+          }
+        , { con = "Volatile cryptocurrency market."
+          }
+        , { con = "Additional steps needed (wallet, exchange)."
+          }
+        ]
+    }

frontend/src/Donate/Methods/KoFi.elm

@@ -0,0 +1,42 @@
+module Donate.Methods.KoFi exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donateKoFi : Donate
+donateKoFi =
+    let
+        name : String
+        name =
+            "Ko-Fi"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://ko-fi.com/thenutrivore"
+    , donateName = name
+    , donateFees = "5%"
+    , donatePreference = 5
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just True
+          , openSource = Just False
+          , fastPayments = Just False
+          , userFriendly = Just True
+          , anonymous = Just True
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = "Supports one-time and monthly donations."
+          }
+        , { pro = "Allows digital downloads and commissions."
+          }
+        , { pro = "Relatively simple platform."
+          }
+        ]
+    , donateCons =
+        [ { con = "Less feature-rich compared to other services."
+          }
+        , { con = "Smaller user base compared to more established platforms."
+          }
+        ]
+    }

frontend/src/Donate/Methods/LiberaPay.elm

@@ -0,0 +1,46 @@
+module Donate.Methods.LiberaPay exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donateLiberaPay : Donate
+donateLiberaPay =
+    let
+        name : String
+        name =
+            "LiberaPay"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://liberapay.com/TheNutrivore"
+    , donateName = name
+    , donateFees = "0%"
+    , donatePreference = 10
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just True
+          , openSource = Just True
+          , fastPayments = Just False
+          , userFriendly = Just True
+          , anonymous = Just True
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = "Open-source platform."
+          }
+        , { pro = "Focuses on privacy and transparency."
+          }
+        , { pro = "Allows weekly recurring donations."
+          }
+        , { pro = "Creator-friendly with no platform charges."
+          }
+        ]
+    , donateCons =
+        [ { con = "Less mainstream compared to other platforms."
+          }
+        , { con = "Fewer features compared to more established platforms."
+          }
+        , { con = "Requires users to be comfortable with a less-known service."
+          }
+        ]
+    }

frontend/src/Donate/Methods/Merch.elm

@@ -0,0 +1,42 @@
+module Donate.Methods.Merch exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donateMerch : Donate
+donateMerch =
+    let
+        name : String
+        name =
+            "Merch"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://streamlabs.com/thenutrivore/merch"
+    , donateName = name
+    , donateFees = "~60%"
+    , donatePreference = 1
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just False
+          , openSource = Just False
+          , fastPayments = Just False
+          , userFriendly = Just True
+          , anonymous = Just False
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = "Allows supporters to get tangible goods."
+          }
+        , { pro = "Potential for creative design opportunities."
+          }
+        ]
+    , donateCons =
+        [ { con = "They gouge me pretty hard per sale."
+          }
+        , { con = "Potentially expensive for supporters."
+          }
+        , { con = "Limited design options through current provider."
+          }
+        ]
+    }

frontend/src/Donate/Methods/Patreon.elm

@@ -0,0 +1,46 @@
+module Donate.Methods.Patreon exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donatePatreon : Donate
+donatePatreon =
+    let
+        name : String
+        name =
+            "Patreon"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://www.patreon.com/thenutrivore"
+    , donateName = name
+    , donateFees = "5%"
+    , donatePreference = 6
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just True
+          , openSource = Just False
+          , fastPayments = Just False
+          , userFriendly = Just True
+          , anonymous = Just False
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = "Established platform for creator support."
+          }
+        , { pro = "Tools for managing patron relationships."
+          }
+        , { pro = "Enables exclusive content and perks."
+          }
+        , { pro = "Wide recognition among content creators and supporters."
+          }
+        ]
+    , donateCons =
+        [ { con = "Can be complex to set up and manage."
+          }
+        , { con = "Potential for high competition among creators."
+          }
+        , { con = "Platform takes a notable cut of creator earnings."
+          }
+        ]
+    }

frontend/src/Donate/Methods/PayPal.elm

@@ -0,0 +1,46 @@
+module Donate.Methods.PayPal exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donatePayPal : Donate
+donatePayPal =
+    let
+        name : String
+        name =
+            "PayPal"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://paypal.me/TheNutrivore"
+    , donateName = name
+    , donateFees = "1%"
+    , donatePreference = 8
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just False
+          , openSource = Just False
+          , fastPayments = Just True
+          , userFriendly = Just True
+          , anonymous = Just False
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = "Widely used and recognized globally"
+          }
+        , { pro = "Low 1% transaction fee"
+          }
+        , { pro = "Offers buyer and seller protections"
+          }
+        , { pro = "Easy to use for one-time and recurring donations"
+          }
+        , { pro = "Familiar to most internet users"
+          }
+        ]
+    , donateCons =
+        [ { con = "Can have complicated international transaction rules."
+          }
+        , { con = "Potential account limitations or freezes."
+          }
+        ]
+    }

frontend/src/Donate/Methods/Template.elm

@@ -0,0 +1,35 @@
+module Donate.Methods.Template exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donateTemplate : Donate
+donateTemplate =
+    let
+        name : String
+        name =
+            ""
+    in
+    { donateImage = formatName name
+    , donateLink = ""
+    , donateName = name
+    , donateFees = ""
+    , donatePreference = 1
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just True
+          , openSource = Just True
+          , fastPayments = Just False
+          , userFriendly = Just True
+          , anonymous = Just True
+          , rewardTiers = Just False
+          }
+        ]
+    , donatePros =
+        [ { pro = ""
+          }
+        ]
+    , donateCons =
+        [ { con = "" }
+        ]
+    }

frontend/src/Donate/Methods/YouTube.elm

@@ -0,0 +1,48 @@
+module Donate.Methods.YouTube exposing (..)
+
+import Donate.Types exposing (..)
+
+
+donateYouTube : Donate
+donateYouTube =
+    let
+        name : String
+        name =
+            "YouTube"
+    in
+    { donateImage = formatName name
+    , donateLink = "https://www.youtube.com/@TheNutrivore/membership"
+    , donateName = name
+    , donateFees = "45%"
+    , donatePreference = 3
+    , donateFeatures =
+        [ { fees = Just True
+          , subscriptions = Just True
+          , openSource = Just False
+          , fastPayments = Just False
+          , userFriendly = Just True
+          , anonymous = Just True
+          , rewardTiers = Just True
+          }
+        ]
+    , donatePros =
+        [ { pro = "Extremely familiar platform that most people use anyway."
+          }
+        , { pro = "Built-in monetization through ad revenue sharing."
+          }
+        ]
+    , donateCons =
+        [ { con = "Extremely high platform cut (45% of ad revenue)."
+          }
+        , { con = "Content can be demonetized arbitrarily."
+          }
+        , { con = "Complicated and often changing monetization policies."
+          }
+        , { con = "High competition and algorithm dependency."
+          }
+        , { con = "Limited creator control over content visibility."
+          }
+        , { con = "Creators are easily censored."
+          }
+        ]
+    }

frontend/src/Donate/Types.elm

@@ -0,0 +1,40 @@
+module Donate.Types exposing (..)
+
+
+type alias Donate =
+    { donateImage : String
+    , donateLink : String
+    , donateName : String
+    , donateFees : String
+    , donatePreference : Int
+    , donatePros : List Pros
+    , donateCons : List Cons
+    , donateFeatures : List Features
+    }
+
+
+type alias Features =
+    { fees : Maybe Bool
+    , subscriptions : Maybe Bool
+    , openSource : Maybe Bool
+    , fastPayments : Maybe Bool
+    , userFriendly : Maybe Bool
+    , anonymous : Maybe Bool
+    , rewardTiers : Maybe Bool
+    }
+
+
+type alias Pros =
+    { pro : String
+    }
+type alias Cons =
+    { con : String
+    }
+
+
+formatName : String -> String
+formatName name =
+    name
+        |> String.toLower
+        |> String.replace " " ""
+        |> String.replace "-" ""