diff --git a/css/main.css b/css/main.css
index c7be786..03aa99a 100644
--- a/css/main.css
+++ b/css/main.css
@@ -60,10 +60,13 @@ textarea {
width: 100%;
}
-.PreviewView {
+.card {
background-color: var(--background);
border-radius: 16px;
box-shadow: 0px 18px 24px rgba(0, 0, 0, 0.06);
+}
+
+.card, .footer {
padding: 2rem;
}
@@ -82,4 +85,41 @@ textarea {
.hidden {
display: none !important;
+}
+
+
+@media screen and (max-width: 480px) {
+ body {
+ background-image: none;
+ background-color: var(--background);
+ padding: 0;
+ }
+
+ .card {
+ border-radius: unset;
+ box-shadow: unset;
+ }
+}
+
+.footer .links li:not(:first-child) {
+ margin-left: 0.5em;
+}
+
+.footer .links li:not(:first-child)::before {
+ content: "·";
+ margin-right: 0.5em;
+}
+
+.footer .links li {
+ display: inline-block;
+}
+
+.footer .links {
+ font-size: 0.8em;
+ list-style: none;
+ padding: 0;
+}
+
+a {
+ color: var(--link);
}
\ No newline at end of file
diff --git a/index.html b/index.html
index c929d18..d9e009c 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,8 @@
+
+
diff --git a/src/RootView.js b/src/RootView.js
index aecac4d..b5a9cca 100644
--- a/src/RootView.js
+++ b/src/RootView.js
@@ -21,6 +21,18 @@ export class RootView extends TemplateView {
render(t, vm) {
return t.div({className: "RootView"}, [
t.mapView(vm => vm.previewViewModel, vm => vm ? new PreviewView(vm) : null),
+ t.div({className: "footer"}, [
+ t.p(t.img({src: "images/matrix-logo.svg"})),
+ t.p(["This invite uses ", externalLink(t, "https://matrix.org", "Matrix"), ", an open network for secure, decentralized communication."]),
+ t.ul({className: "links"}, [
+ t.li(externalLink(t, "https://github.com/matrix-org/matrix.to", "GitHub project")),
+ t.li(externalLink(t, "https://github.com/matrix-org/matrix.to/tree/main/src/clients", "Add your app")),
+ ])
+ ])
]);
}
+}
+
+function externalLink(t, href, label) {
+ return t.a({href, target: "_blank", rel: "noopener noreferrer"}, label);
}
\ No newline at end of file
diff --git a/src/preview/PreviewView.js b/src/preview/PreviewView.js
index 60b9704..3dc614b 100644
--- a/src/preview/PreviewView.js
+++ b/src/preview/PreviewView.js
@@ -18,7 +18,7 @@ import {TemplateView} from "../utils/TemplateView.js";
export class PreviewView extends TemplateView {
render(t, vm) {
- return t.div({className: "PreviewView"}, [
+ return t.div({className: "PreviewView card"}, [
t.h2({className: {hidden: vm => !vm.loading}}, "Loading preview…"),
t.div({className: {preview: true, hidden: vm => vm.loading}}, [
t.p(t.img({className: "avatar", src: vm => vm.avatarUrl})),