Add Telegram moderator application mini app

2026-11-01 10:21:05 +00:00
parent 05854818a0
commit 3afad02686
11 changed files with 753 additions and 17 deletions
--- a/app/moderator-apply/moderator-apply.css
+++ b/app/moderator-apply/moderator-apply.css
@@ -0,0 +1,118 @@
+.tg-apply {
+  min-height: 100vh;
+  min-height: 100dvh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: var(--tg-bg, #0e1621);
+  color: var(--tg-text, #fff);
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+    Arial, sans-serif;
+}
+
+.tg-apply *,
+.tg-apply *::before,
+.tg-apply *::after {
+  box-sizing: border-box;
+}
+
+.tg-apply-card {
+  width: 100%;
+  max-width: 420px;
+}
+
+.tg-apply-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.tg-apply-title {
+  margin: 0 0 4px;
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--tg-text, inherit);
+}
+
+.tg-apply-hint {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--tg-hint, #707579);
+}
+
+.tg-apply-label {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--tg-text, inherit);
+}
+
+.tg-apply-input {
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  background: var(--tg-secondary-bg, #f4f4f5);
+  color: var(--tg-text, #000);
+  font-size: 16px;
+  line-height: 1.3;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.tg-apply-input:focus {
+  border-color: var(--tg-link, #3390ec);
+}
+
+.tg-apply-input::placeholder {
+  color: var(--tg-hint, #707579);
+}
+
+.tg-apply-error {
+  margin: 0;
+  padding: 10px 12px;
+  border-radius: 12px;
+  background: color-mix(in srgb, #e53935 14%, transparent);
+  color: #e53935;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.tg-apply-button {
+  margin-top: 10px;
+  width: 100%;
+  padding: 13px 16px;
+  border: none;
+  border-radius: 12px;
+  background: var(--tg-button, #3390ec);
+  color: var(--tg-button-text, #fff);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+
+.tg-apply-button:hover {
+  filter: brightness(1.06);
+}
+
+.tg-apply-button:active {
+  filter: brightness(0.94);
+}
+
+.tg-apply-url {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  word-break: break-all;
+  color: var(--tg-hint, #707579);
+  user-select: all;
+}