/Main.elm

## elm-package.json
{
    "version": "1.0.0",
    "summary": "Tell the world about your project!",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 5.1.1",
        "elm-lang/html": "2.0.0 <= v < 2.0.0",
        "elm-lang/svg": "2.0.0 <= v < 2.0.0",
        "rtfeldman/hex": "1.0.0 <= v < 1.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

## index.html
<html>
<head>
  <style>
    html {
      background: #F7F7F7;
      color: red;
    }
  </style>
</head>
<body>
  <script>
    var app = Elm.Main.fullscreen()
  </script>
</body>
</html>

## Main.elm
-- Read more about this program in the official Elm guide:
-- https://guide.elm-lang.org/architecture/effects/time.html


module Main exposing (..)

import Html exposing (Html, div, br)
import String exposing (padLeft, join)
import Date
import Color exposing (Color)
import Hex
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Time exposing (Time, second)


main : Program Never Model Msg
main =
    Html.program
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }


-- MODEL


type alias Model =
    Time


init : ( Model, Cmd Msg )
init =
    ( 0, Cmd.none )


-- UPDATE


type Msg
    = Tick Time


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Tick newTime ->
            ( newTime, Cmd.none )


-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
    Time.every second Tick


-- VIEW


view : Model -> Html Msg
view model =
    let
        secs =
            ticksToSecs model

        mins =
            ticksToMins model

        hours =
            ticksToHours model

        sec_angle =
            secsToAngle secs

        min_angle =
            minsToAngle mins

        hour_angle =
            hoursToAngle hours

        sec_handX =
            toString (50 + 40 * cos sec_angle)

        sec_handY =
            toString (50 + 40 * sin sec_angle)

        min_handX =
            toString (50 + 35 * cos min_angle)

        min_handY =
            toString (50 + 35 * sin min_angle)

        hour_handX =
            toString (50 + 30 * cos hour_angle)

        hour_handY =
            toString (50 + 30 * sin hour_angle)
    in
        div []
            [ svg [ viewBox "0 0 100 100", width "300px" ]
                [ circle [ cx "50", cy "50", r "45", fill (toColorStr Color.lightGreen) ] []
                , line [ x1 "50", y1 "50", x2 sec_handX, y2 sec_handY, stroke (toColorStr Color.darkBlue), strokeWidth "1" ] []
                , line [ x1 "50", y1 "50", x2 min_handX, y2 min_handY, stroke (toColorStr Color.blue), strokeWidth "1.5" ] []
                , line [ x1 "50", y1 "50", x2 hour_handX, y2 hour_handY, stroke (toColorStr Color.blue), strokeWidth "2" ] []
                ]
            , br [] []
            , text ("Time " ++ (clockTime model))
            ]


-- Convert parts of an hour to angles of a clock


secsToAngle : Int -> Float
secsToAngle secs =
    turns (((toFloat secs) - 15) / 60.0)


minsToAngle : Int -> Float
minsToAngle mins =
    turns (((toFloat mins) - 15) / 60.0)


hoursToAngle : Int -> Float
hoursToAngle hours =
    turns (toFloat (rem 24 hours) / 12.0)


-- Convert from time to parts of an hour


ticksToSecs : Time -> Int
ticksToSecs time =
    Date.fromTime time |> Date.second


ticksToMins : Time -> Int
ticksToMins time =
    Date.fromTime time |> Date.minute


ticksToHours : Time -> Int
ticksToHours time =
    Date.fromTime time |> Date.hour


toColorStr : Color -> String
toColorStr color =
    let
        rgb =
            Color.toRgb color
    in
        String.concat ("#" :: List.map numTo2h [ rgb.red, rgb.green, rgb.blue ])


type alias Coords =
    { x : String, y : String }


toClockCoords : Int -> Float -> Coords
toClockCoords size angle =
    let
        fsize =
            toFloat (size)

        x =
            50 + fsize * cos angle

        y =
            50 + fsize * sin angle
    in
        Coords (toString x) (toString y)


clockTime : Time -> String
clockTime time =
    let
        d =
            Date.fromTime time
    in
        String.join ":" (List.map numTo2d [ Date.hour d, Date.minute d, Date.second d ])


-- formatting functions


twoDigits : String -> String
twoDigits str =
    padLeft 2 '0' str


numTo2d : Int -> String
numTo2d num =
    twoDigits (toString num)


numTo2h : Int -> String
numTo2h num =
    twoDigits (Hex.toString num)
	{
	"version": "1.0.0",
	"summary": "Tell the world about your project!",
	"repository": "https://github.com/user/project.git",
	"license": "BSD3",
	"source-directories": [
	"."
	],
	"exposed-modules": [],
	"dependencies": {
	"elm-lang/core": "5.1.1 <= v < 5.1.1",
	"elm-lang/html": "2.0.0 <= v < 2.0.0",
	"elm-lang/svg": "2.0.0 <= v < 2.0.0",
	"rtfeldman/hex": "1.0.0 <= v < 1.0.0"
	},
	"elm-version": "0.18.0 <= v < 0.19.0"
	}
	<html>
	<head>
	<style>
	html {
	background: #F7F7F7;
	color: red;
	}
	</style>
	</head>
	<body>
	<script>
	var app = Elm.Main.fullscreen()
	</script>
	</body>
	</html>
	-- Read more about this program in the official Elm guide:
	-- https://guide.elm-lang.org/architecture/effects/time.html


	module Main exposing (..)

	import Html exposing (Html, div, br)
	import String exposing (padLeft, join)
	import Date
	import Color exposing (Color)
	import Hex
	import Svg exposing (..)
	import Svg.Attributes exposing (..)
	import Time exposing (Time, second)


	main : Program Never Model Msg
	main =
	Html.program
	{ init = init
	, view = view
	, update = update
	, subscriptions = subscriptions
	}



	-- MODEL


	type alias Model =
	Time


	init : ( Model, Cmd Msg )
	init =
	( 0, Cmd.none )



	-- UPDATE


	type Msg
	= Tick Time


	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	Tick newTime ->
	( newTime, Cmd.none )



	-- SUBSCRIPTIONS


	subscriptions : Model -> Sub Msg
	subscriptions model =
	Time.every second Tick



	-- VIEW


	view : Model -> Html Msg
	view model =
	let
	secs =
	ticksToSecs model

	mins =
	ticksToMins model

	hours =
	ticksToHours model

	sec_angle =
	secsToAngle secs

	min_angle =
	minsToAngle mins

	hour_angle =
	hoursToAngle hours

	sec_handX =
	toString (50 + 40 * cos sec_angle)

	sec_handY =
	toString (50 + 40 * sin sec_angle)

	min_handX =
	toString (50 + 35 * cos min_angle)

	min_handY =
	toString (50 + 35 * sin min_angle)

	hour_handX =
	toString (50 + 30 * cos hour_angle)

	hour_handY =
	toString (50 + 30 * sin hour_angle)
	in
	div []
	[ svg [ viewBox "0 0 100 100", width "300px" ]
	[ circle [ cx "50", cy "50", r "45", fill (toColorStr Color.lightGreen) ] []
	, line [ x1 "50", y1 "50", x2 sec_handX, y2 sec_handY, stroke (toColorStr Color.darkBlue), strokeWidth "1" ] []
	, line [ x1 "50", y1 "50", x2 min_handX, y2 min_handY, stroke (toColorStr Color.blue), strokeWidth "1.5" ] []
	, line [ x1 "50", y1 "50", x2 hour_handX, y2 hour_handY, stroke (toColorStr Color.blue), strokeWidth "2" ] []
	]
	, br [] []
	, text ("Time " ++ (clockTime model))
	]



	-- Convert parts of an hour to angles of a clock


	secsToAngle : Int -> Float
	secsToAngle secs =
	turns (((toFloat secs) - 15) / 60.0)


	minsToAngle : Int -> Float
	minsToAngle mins =
	turns (((toFloat mins) - 15) / 60.0)


	hoursToAngle : Int -> Float
	hoursToAngle hours =
	turns (toFloat (rem 24 hours) / 12.0)



	-- Convert from time to parts of an hour


	ticksToSecs : Time -> Int
	ticksToSecs time =
	Date.fromTime time \|> Date.second


	ticksToMins : Time -> Int
	ticksToMins time =
	Date.fromTime time \|> Date.minute


	ticksToHours : Time -> Int
	ticksToHours time =
	Date.fromTime time \|> Date.hour


	toColorStr : Color -> String
	toColorStr color =
	let
	rgb =
	Color.toRgb color
	in
	String.concat ("#" :: List.map numTo2h [ rgb.red, rgb.green, rgb.blue ])


	type alias Coords =
	{ x : String, y : String }


	toClockCoords : Int -> Float -> Coords
	toClockCoords size angle =
	let
	fsize =
	toFloat (size)

	x =
	50 + fsize * cos angle

	y =
	50 + fsize * sin angle
	in
	Coords (toString x) (toString y)


	clockTime : Time -> String
	clockTime time =
	let
	d =
	Date.fromTime time
	in
	String.join ":" (List.map numTo2d [ Date.hour d, Date.minute d, Date.second d ])



	-- formatting functions


	twoDigits : String -> String
	twoDigits str =
	padLeft 2 '0' str


	numTo2d : Int -> String
	numTo2d num =
	twoDigits (toString num)


	numTo2h : Int -> String
	numTo2h num =
	twoDigits (Hex.toString num)