diff --git a/gulpfile.js b/gulpfile.js
index 402e54eef..969953181 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -141,6 +141,7 @@ const refactoredSrc = [
"./src/js/popups/rate-quote-popup.js",
"./src/js/popups/version-popup.js",
"./src/js/popups/support-popup.js",
+ "./src/js/popups/contact-popup.js",
"./src/js/popups/custom-word-amount-popup.js",
"./src/js/popups/custom-test-duration-popup.js",
"./src/js/popups/word-filter-popup.js",
diff --git a/src/js/global-dependencies.js b/src/js/global-dependencies.js
index 9a86014c9..2f382cce3 100644
--- a/src/js/global-dependencies.js
+++ b/src/js/global-dependencies.js
@@ -16,6 +16,7 @@ import * as AccountController from "./account-controller";
import { toggleGlarses } from "./test-logic";
import "./caps-warning";
import "./support-popup";
+import "./contact-popup";
import "./version-popup";
import "./input-controller";
import "./ready";
diff --git a/src/js/popups/contact-popup.js b/src/js/popups/contact-popup.js
new file mode 100644
index 000000000..6db1e545c
--- /dev/null
+++ b/src/js/popups/contact-popup.js
@@ -0,0 +1,14 @@
+$(document.body).on("click", "#contactPopupButton", () => {
+ $("#contactPopupWrapper")
+ .css("opacity", 0)
+ .removeClass("hidden")
+ .animate({ opacity: 1 }, 125);
+});
+
+$(document.body).on("click", "#contactPopupWrapper", () => {
+ $("#contactPopupWrapper")
+ .css("opacity", 1)
+ .animate({ opacity: 0 }, 125, () => {
+ $("#contactPopupWrapper").addClass("hidden");
+ });
+});
diff --git a/src/sass/popups.scss b/src/sass/popups.scss
index 6ac6b9bc3..2e63f1e14 100644
--- a/src/sass/popups.scss
+++ b/src/sass/popups.scss
@@ -9,7 +9,7 @@
display: grid;
justify-content: center;
align-items: center;
- padding: 5rem 0;
+ padding: 2rem 0;
}
#customTextPopupWrapper {
@@ -740,6 +740,79 @@
}
}
+#contactPopupWrapper {
+ #contactPopup {
+ // height: 400px;
+ overflow-y: scroll;
+ max-height: 100%;
+ background: var(--bg-color);
+ border-radius: var(--roundness);
+ padding: 2rem;
+ display: grid;
+ grid-template-rows: auto auto auto;
+ gap: 2rem;
+ @extend .ffscroll;
+ margin: 0 2rem;
+ max-width: 900px;
+
+ .title {
+ font-size: 2rem;
+ line-height: 2rem;
+ color: var(--main-color);
+ }
+
+ .text {
+ color: var(--text-color);
+ span {
+ color: var(--error-color);
+ }
+ }
+
+ .subtext {
+ color: var(--sub-color);
+ font-size: 0.75rem;
+ grid-area: subtext;
+ }
+
+ .buttons {
+ display: grid;
+ gap: 1rem;
+ grid-template-columns: 1fr 1fr;
+
+ .button {
+ display: block;
+ width: 100%;
+ height: 100%;
+ padding: 1rem 0;
+ display: grid;
+ // gap: 0.5rem;
+ text-decoration: none;
+ grid-template-areas: "icon textgroup";
+ grid-template-columns: auto 1fr;
+ text-align: left;
+ align-items: center;
+ .textGroup {
+ grid-area: textgroup;
+ }
+ .text {
+ font-size: 1.5rem;
+ line-height: 2rem;
+ transform: 0.25s;
+ }
+ &:hover .text {
+ color: var(--bg-color);
+ }
+ .icon {
+ grid-area: icon;
+ font-size: 2rem;
+ line-height: 2rem;
+ padding: 0 1rem;
+ }
+ }
+ }
+ }
+}
+
#presetWrapper {
#presetEdit {
background: var(--bg-color);
diff --git a/src/sass/z_media-queries.scss b/src/sass/z_media-queries.scss
index 0731337f1..0d8e2814a 100644
--- a/src/sass/z_media-queries.scss
+++ b/src/sass/z_media-queries.scss
@@ -128,6 +128,10 @@
}
}
+ #contactPopupWrapper #contactPopup .buttons {
+ grid-template-columns: 1fr;
+ }
+
.pageAbout .section {
.contributors,
.supporters {
@@ -335,6 +339,16 @@
}
@media only screen and (max-width: 550px) {
+ #contactPopupWrapper #contactPopup .buttons .button .text {
+ font-size: 1rem;
+ }
+ #contactPopupWrapper #contactPopup .buttons .button .icon {
+ font-size: 1.5rem;
+ line-height: 1.5rem;
+ }
+ #contactPopupWrapper #contactPopup {
+ padding: 1rem;
+ }
.pageAbout .section .supporters,
.pageAbout .section .contributors {
grid-template-columns: 1fr;
diff --git a/static/index.html b/static/index.html
index deed56d9c..30a272454 100644
--- a/static/index.html
+++ b/static/index.html
@@ -691,6 +691,89 @@
+