~singpolyma/cheogram-matrix-spa

537ed5aae27f65d4623d7602d56ee5b53e4a88ea — Stephen Paul Weber 2 months ago 0abf85e
Tabs and styling
10 files changed, 377 insertions(+), 33 deletions(-)

M .gitignore
A ArchivoBlackLatin.woff2
M Makefile
A PoppinsLatin.woff2
A gloop01.svg
A gloop02.svg
M index.html
A index.scss
A logo.svg
M src/Main.elm
M .gitignore => .gitignore +2 -1
@@ 1,2 1,3 @@
index.js
elm-stuff/
\ No newline at end of file
elm-stuff/
index.css
\ No newline at end of file

A ArchivoBlackLatin.woff2 => ArchivoBlackLatin.woff2 +0 -0
M Makefile => Makefile +9 -0
@@ 1,6 1,15 @@
.PHONY: all

all: index.js index.css

index.js: elm-stuff/Main.elm
	elm make elm-stuff/Main.elm --optimize --output=index.js

elm-stuff/Main.elm: src/Main.elm
	mkdir -p elm-stuff
	expand -i src/Main.elm > elm-stuff/Main.elm

.SUFFIXES: .css .scss

.scss.css:
	sassc -t expanded $< $@

A PoppinsLatin.woff2 => PoppinsLatin.woff2 +0 -0
A gloop01.svg => gloop01.svg +9 -0
@@ 0,0 1,9 @@
<svg width="748" height="660" viewBox="0 0 748 660" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M747.895 0H0L0 659.315C471.36 614.304 650.541 307.697 747.895 0Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="0" y1="0" x2="509" y2="436" gradientUnits="userSpaceOnUse">
<stop stop-color="#7C01DE"/>
<stop offset="1" stop-color="#8001E5"/>
</linearGradient>
</defs>
</svg>

A gloop02.svg => gloop02.svg +9 -0
@@ 0,0 1,9 @@
<svg width="1260" height="1852" viewBox="0 0 1260 1852" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1260 0V1852C987.617 1676.32 790.037 1662.91 622.05 1651.5C431.895 1638.59 279.658 1628.25 99.7639 1388.05C-142.284 1064.87 76.3271 499.702 537.475 477.604C793.641 465.328 925.933 315.387 1038.34 187.98C1064.41 158.434 1089.41 130.099 1114.64 104.974C1150.73 69.0281 1201.02 32.1248 1260 0Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="1260" y1="1570.41" x2="618.987" y2="488.325" gradientUnits="userSpaceOnUse">
<stop stop-color="#7D01DD"/>
<stop offset="1" stop-color="#8301E9"/>
</linearGradient>
</defs>
</svg>

M index.html => index.html +10 -6
@@ 1,14 1,18 @@
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="index.js"></script>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<link rel="stylesheet" type="text/css" href="index.css" />
	<script type="text/javascript" src="index.js"></script>
	<title>Get Matrix IDs</title>
</head>

<body>
<h1>Matrix Blah</h1>
<div id="elm"></div>
<script type="text/javascript">
Elm.Main.init({ node: document.getElementById("elm") });
</script>
	<h1>Get Matrix IDs for Other IDs</h1>
	<div id="elm"></div>
	<script type="text/javascript">
		Elm.Main.init({ node: document.getElementById("elm") });
	</script>
</body>
</html>

A index.scss => index.scss +94 -0
@@ 0,0 1,94 @@
@font-face {
	font-family: 'Archivo Black';
	font-style: normal;
	font-weight: 400;
	src: url(ArchivoBlackLatin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 500;
	src: url(PoppinsLatin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	color: #fff;
	background: #7401cf url(gloop01.svg) no-repeat;
	background-size: 40vw;
	font-family: Poppins, sans-serif;
}

body {
	text-align: center;
	margin: 0;
	padding-left: 10%;
	padding-right: 10%;
	background: url(gloop02.svg) no-repeat right bottom;
	background-size: 60vw;
	min-height: 100vh;
}

body > h1 {
	margin: auto;
	margin-bottom: 2em;
	position: relative;
	top: 1em;
	background: url(logo.svg) center no-repeat;
	background-size: contain;
	width: 100%;
	height: 20vh;
	text-indent: -9999px;
}

.tabs {
	cursor: pointer;
	list-style-type: none;
	padding: 0;
	font-size: 1.3em;
	color: #1e0036;

	li {
		display: inline-block;
		background-color: #ffc700;
		border-top-left-radius: 1em;
		border-top-right-radius: 1em;
		padding: 0.5em;
		margin-right: 0.5em;

		&:hover, &.current {
			color: #fff;
		}
	}
}

input {
	font-size: 1.4em;
	padding: 0.2em;
	width: 75%;
	max-width: 35em;
}

.mxid {
	display: block;
	margin: 1em auto;
	padding: 1em;
	border-radius: 2em;
	width: max-content;
	font-size: 1.3em;
	color: #1e0036;
	background-color: #ffc700;
	text-decoration: none;

	&:hover {
		color: #fff;
	}
}

select {
	position: absolute;
	bottom: 2em;
	right: 2em;
}

A logo.svg => logo.svg +193 -0
@@ 0,0 1,193 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 81.7817 38.394009"
   height="38.394009"
   width="81.7817"
   id="svg16">
  <metadata
     id="metadata20">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="g973"
     transform="matrix(0.42630355,0,0,0.42630355,0,4.6334608)">
    <ellipse
       cx="25.528276"
       cy="37.448799"
       rx="5.4057102"
       ry="5.4737501"
       id="ellipse8"
       style="fill:#ffffff" />
    <ellipse
       cx="40.972076"
       cy="37.448799"
       rx="5.4057102"
       ry="5.4737501"
       id="ellipse10"
       style="fill:#ffffff" />
    <ellipse
       cx="56.416176"
       cy="37.448799"
       rx="5.4057102"
       ry="5.4737501"
       id="ellipse12"
       style="fill:#ffffff" />
    <path
       d="m 41.089578,0.00159859 c -10.1229,0.0857 -19.9788,3.61280001 -27.5877,10.00520041 -7.6235004,6.4048 -12.4958004,15.2886 -13.36320043,24.9619 -0.8691,9.6922 2.37640003,19.1814 8.90390003,26.5442 0.8874,1.0009 1.8256004,1.9519 2.8098004,2.8513 -1.0988,3.9653 -3.1446004,6.5406 -4.9704004,8.0439 -0.7464,0.6146 -0.5833,2.063 0.375,2.19 4.0637004,0.539 9.9937004,0.187 14.3800004,-3.6702 4.0962,1.9545 8.5503,3.2572 13.1713,3.8382 10.0219,1.259 20.2894,-0.9411 28.7784,-6.2322 5.472,-3.4107 10.0164,-7.3947 13.1974,-12.568 0.861,-1.4009 0.249,-3.1938 -1.219,-3.9323 l -5.7118,-2.8734 c -1.4912,-0.7502 -3.2917,-0.1202 -4.2565,1.2434 -2.0854,2.9475 -4.9696,5.2758 -8.4959,7.4737 -6.0428,3.7665 -13.4811,5.3905 -20.7855,4.4727 -7.3025,-0.9175 -13.7283,-4.2768 -18.0829,-9.1887 -4.3307,-4.8848 -6.334,-10.9678 -5.7889,-17.0466 0.5468,-6.0978 3.6472,-12.0168 8.9543,-16.4755 5.3219,-4.471 12.3979,-7.0642 19.8097,-7.127 7.4114,-0.0627 14.3972,2.4092 19.5866,6.7372 1.9727,1.6453 3.6449,3.903 4.9708,6.1367 0.8507,1.4332 2.6525,2.0496 4.1419,1.2998 l 5.6982,-2.8683 c 1.471,-0.7406 2.079,-2.5335 1.265,-3.9644 -2.1418,-3.7666 -4.9307,-7.5076 -8.2277,-10.2572004 -7.5755,-6.318 -17.4295,-9.68010001 -27.5528,-9.59440001 z"
       id="path14"
       style="clip-rule:evenodd;fill:#ffffff;fill-rule:evenodd" />
  </g>
  <defs
     id="defs33">
    <marker
       style="overflow:visible"
       id="Tail"
       refX="0"
       refY="0"
       orient="auto">
      <g
         transform="scale(-1.2)"
         id="g1039"
         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-opacity:1">
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1"
           d="M -3.8048674,-3.9585227 0.54352094,0"
           id="path1027" />
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1"
           d="M -1.2866832,-3.9585227 3.0617053,0"
           id="path1029" />
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1"
           d="M 1.3053582,-3.9585227 5.6537466,0"
           id="path1031" />
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1"
           d="M -3.8048674,4.1775838 0.54352094,0.21974226"
           id="path1033" />
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1"
           d="M -1.2866832,4.1775838 3.0617053,0.21974226"
           id="path1035" />
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:0.8;stroke-linecap:round;stroke-opacity:1"
           d="M 1.3053582,4.1775838 5.6537466,0.21974226"
           id="path1037" />
      </g>
    </marker>
    <marker
       style="overflow:visible"
       id="marker1295"
       refX="0"
       refY="0"
       orient="auto">
      <path
         transform="matrix(-0.8,0,0,-0.8,-10,0)"
         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         d="M 0,0 5,-5 -12.5,0 5,5 Z"
         id="path1293" />
    </marker>
    <marker
       style="overflow:visible"
       id="Arrow1Lend"
       refX="0"
       refY="0"
       orient="auto">
      <path
         transform="matrix(-0.8,0,0,-0.8,-10,0)"
         style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         d="M 0,0 5,-5 -12.5,0 5,5 Z"
         id="path994" />
    </marker>
    <linearGradient
       gradientUnits="userSpaceOnUse"
       y2="128"
       x2="64"
       y1="0"
       x1="64"
       id="paint0_linear">
      <stop
         id="stop18"
         stop-color="#6F00C7" />
      <stop
         id="stop20"
         stop-color="#8F00FF"
         offset="1" />
    </linearGradient>
    <linearGradient
       gradientUnits="userSpaceOnUse"
       y2="44.638199"
       x2="124.827"
       y1="-9.3053102"
       x1="1.10839"
       id="paint1_linear">
      <stop
         id="stop23"
         stop-color="#8F00FF" />
      <stop
         id="stop25"
         stop-opacity="0"
         stop-color="#8F00FF"
         offset="1" />
      <stop
         id="stop27"
         stop-color="#8A01F6"
         offset="1" />
    </linearGradient>
    <clipPath
       id="clip0">
      <rect
         style="fill:#ffffff"
         y="0"
         x="0"
         id="rect30"
         height="128"
         width="128" />
    </clipPath>
  </defs>
  <g
     transform="translate(53.831699,6.4260068)"
     fill="#040404"
     id="g955"
     style="fill:#ffffff">
    <path
       d="M 27.1,31.2 V 0.7 h -2.19 v -0.732 h 3.04 v 32 h -3.04 v -0.732 z"
       id="path949"
       style="fill:#ffffff" />
    <path
       d="m 8.23,10.4 v 1.54 h 0.044 c 0.385,-0.564 0.893,-1.03 1.49,-1.37 0.58,-0.323 1.25,-0.485 1.99,-0.485 0.72,0 1.38,0.14 1.97,0.42 0.595,0.279 1.05,0.771 1.36,1.48 0.338,-0.5 0.796,-0.941 1.38,-1.32 0.58,-0.383 1.27,-0.574 2.06,-0.574 0.602,0 1.16,0.074 1.67,0.22 0.514,0.148 0.954,0.383 1.32,0.707 0.366,0.323 0.653,0.746 0.859,1.27 0.205,0.522 0.308,1.15 0.308,1.89 v 7.63 h -3.13 v -6.46 c 0,-0.383 -0.015,-0.743 -0.044,-1.08 -0.0209,-0.307 -0.103,-0.607 -0.242,-0.882 -0.133,-0.251 -0.336,-0.458 -0.584,-0.596 -0.257,-0.146 -0.606,-0.22 -1.05,-0.22 -0.44,0 -0.796,0.085 -1.07,0.253 -0.272,0.17 -0.485,0.39 -0.639,0.662 -0.159,0.287 -0.264,0.602 -0.308,0.927 -0.052,0.347 -0.078,0.697 -0.078,1.05 v 6.35 h -3.13 v -6.4 c 0,-0.338 -0.007,-0.673 -0.021,-1 -0.0114,-0.314 -0.0749,-0.623 -0.188,-0.916 -0.108,-0.277 -0.3,-0.512 -0.55,-0.673 -0.258,-0.168 -0.636,-0.253 -1.14,-0.253 -0.198,0.0083 -0.394,0.042 -0.584,0.1 -0.258,0.0745 -0.498,0.202 -0.705,0.374 -0.228,0.184 -0.422,0.449 -0.584,0.794 -0.161,0.346 -0.242,0.798 -0.242,1.36 v 6.62 h -3.13 v -11.4 z"
       id="path951"
       style="fill:#ffffff" />
    <path
       d="m 0.936,0.732 v 30.5 h 2.19 v 0.732 h -3.04 v -32 h 3.03 v 0.732 z"
       id="path953"
       style="fill:#ffffff" />
  </g>
  <path
     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 27.156082,4.6598768 Z"
     id="path985" />
  <path
     style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.943084px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;paint-order:markers stroke fill"
     d="m 28.513755,4.3946548 c 15.542381,-8.6402056 22.126497,-0.32229 22.126497,-0.32229 v 0 0 0"
     id="path989" />
  <path
     style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:5.17343;stroke-linecap:square;stroke-opacity:1;paint-order:markers stroke fill"
     id="path1449"
     d="m 54.749733,15.62983 0.09003,0.01023 -0.05387,0.07285 z"
     transform="matrix(-0.62548765,0.05427286,-0.05427286,-0.62548765,85.965318,10.620632)" />
</svg>

M src/Main.elm => src/Main.elm +51 -26
@@ 1,7 1,7 @@
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (onInput)
import Html.Events exposing (onInput, onClick)
import Url exposing (percentEncode)
import Regex
import Dict


@@ 14,56 14,81 @@ main =
		subscriptions = \_ -> Sub.none
	}

type Tab = TabJid | TabSMS | TabEmail | TabSIP

type alias Model = {
		tab : Tab,
		jabberId : String,
		bifrost : Bifrost
	}

init : () -> (Model, Cmd Msg)
init _ =
	(Model "" ariaNet, Cmd.none)
	(Model TabJid "" ariaNet, Cmd.none)

type Msg = JabberID String | SMS String | Email String | SIP String | Gateway String
type Msg = SetTab Tab | JabberID String | SMS String | Email String | SIP String | Gateway String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
	case msg of
		SetTab tab -> ({ model | tab = tab }, Cmd.none)
		JabberID jid -> ({ model | jabberId = jid }, Cmd.none)
		SMS tel -> ({ model | jabberId = telToJid tel }, Cmd.none)
		Email email -> ({ model | jabberId = emailToJid email }, Cmd.none)
		SIP sip -> ({ model | jabberId = sipToJid sip }, Cmd.none)
		Gateway gw -> ({ model | bifrost = Maybe.withDefault ariaNet (Dict.get gw gateways) }, Cmd.none)

mkTab : Model -> Tab -> String -> Html Msg
mkTab model tab label =
	let klass = if model.tab == tab then [class "current"] else []
	in
	li ([onClick (SetTab tab)] ++ klass)
	[text label]

view : Model -> Html Msg
view model =
	let matrixId = jidToMatrix model.bifrost model.jabberId
	in
	div [] [
		select [onInput Gateway] (List.map (\gateway ->
		select [title "Use Gateway", onInput Gateway] (List.map (\gateway ->
			option [] [text gateway]
		) (Dict.keys gateways)),
		input [
			type_ "text",
			placeholder "Jabber ID",
			value model.jabberId,
			onInput JabberID
		] [],
		input [
			type_ "tel",
			placeholder "SMS",
			onInput SMS
		] [],
		input [
			type_ "email",
			placeholder "Email",
			onInput Email
		] [],
		input [
			type_ "text",
			placeholder "SIP",
			onInput SIP
		] [],
		a [target "_blank", href ("https://matrix.to/#/" ++ matrixId)] [text matrixId]
		ul [class "tabs"] [
			mkTab model TabJid "Jabber ID",
			mkTab model TabSMS "SMS",
			mkTab model TabEmail "Email",
			mkTab model TabSIP "SIP"
		],
		case model.tab of
			TabJid ->
				input [
					type_ "text",
					placeholder "Jabber ID",
					value model.jabberId,
					onInput JabberID
				] []
			TabSMS ->
				input [
					type_ "tel",
					placeholder "SMS",
					onInput SMS
				] []
			TabEmail ->
				input [
					type_ "email",
					placeholder "Email",
					onInput Email
				] []
			TabSIP ->
				input [
					type_ "text",
					placeholder "SIP",
					onInput SIP
				] [],
		if matrixId /= "" then
			a [class "mxid", target "_blank", href ("https://matrix.to/#/" ++ matrixId)] [text matrixId]
		else
			text ""
	]

type alias Bifrost = {