upload files

2025-10-17 18:43:12 +03:00
parent 8f76cc9a8a
commit 71bb073934
7 changed files with 456 additions and 0 deletions
--- a/assets/style.css
+++ b/assets/style.css
@@ -0,0 +1,222 @@
+:root {
+  --mantle: #181825;
+  --crust: #11111b;
+  --text: #cdd6f4;
+  --muted: #a6adc8;
+  --line: #45475a;
+  --lav: #b4befe;
+  --sky: #89dceb;
+  --green: #a6e3a1;
+  --red: #f38ba8;
+  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: linear-gradient(160deg, var(--mantle), var(--crust));
+  color: var(--text);
+  font: 16px/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Inter, Roboto,
+    Ubuntu, Arial, sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.shell {
+  width: 100%;
+  max-width: 520px;
+}
+
+.card {
+  background: linear-gradient(
+    180deg,
+    rgba(49, 50, 68, 0.9),
+    rgba(24, 24, 37, 0.92)
+  );
+  border: 1px solid var(--line);
+  border-radius: 24px;
+  padding: 26px;
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(8px);
+}
+
+.h {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-bottom: 18px;
+}
+
+.h1 {
+  font-size: clamp(22px, 4vw, 28px);
+  font-weight: 700;
+  letter-spacing: 0.2px;
+}
+
+.form {
+  display: grid;
+  gap: 16px;
+}
+
+.lbl {
+  font-size: 13px;
+  color: var(--muted);
+}
+
+.input {
+  width: 100%;
+  background: #2b2d3a;
+  border: 1px solid var(--line);
+  color: var(--text);
+  border-radius: 14px;
+  padding: 14px 16px;
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.input:focus {
+  border-color: var(--lav);
+  box-shadow: 0 0 0 4px rgba(180, 190, 254, 0.18);
+}
+
+/* Segmented control */
+.segment {
+  background: #2b2d3a;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 4px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+}
+
+.segbtn {
+  border: 0;
+  border-radius: 10px;
+  padding: 10px 12px;
+  cursor: pointer;
+  color: var(--text);
+  background: transparent;
+  font-weight: 700;
+}
+
+.segbtn.active {
+  background: linear-gradient(90deg, var(--lav), var(--sky));
+  color: #0b0b10;
+}
+
+/* Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  margin-top: 6px;
+  padding: 14px 16px;
+  border-radius: 14px;
+  border: 0;
+  cursor: pointer;
+  background: linear-gradient(90deg, var(--lav), var(--sky));
+  color: #0b0b10;
+  font-weight: 800;
+  transition: transform 0.06s ease, filter 0.2s ease;
+}
+
+.btn:active {
+  transform: translateY(1px);
+}
+
+.btn[disabled] {
+  filter: saturate(0.2) brightness(0.85);
+  cursor: default;
+}
+
+/* Toasts (top-right) */
+#toasts {
+  position: fixed;
+  right: 16px;
+  top: 16px;
+  display: grid;
+  gap: 10px;
+  z-index: 9999;
+}
+
+.toast {
+  background: #2b2d3a;
+  border: 1px solid var(--line);
+  color: var(--text);
+  padding: 12px 14px;
+  border-radius: 14px;
+  min-width: 260px;
+  box-shadow: var(--shadow);
+  display: flex;
+  gap: 10px;
+  align-items: flex-start;
+  animation: slideIn 0.25s ease both;
+}
+
+.toast.ok {
+  border-color: var(--green);
+}
+
+.toast.err {
+  border-color: var(--red);
+}
+
+.toast .dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  margin-top: 5px;
+}
+
+.toast.ok .dot {
+  background: var(--green);
+}
+
+.toast.err .dot {
+  background: var(--red);
+}
+
+.toast .x {
+  margin-left: auto;
+  cursor: pointer;
+  opacity: 0.6;
+}
+
+.credit {
+  position: fixed;
+  right: 18px;
+  bottom: 16px;
+  color: var(--muted);
+  font-size: 13px;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  opacity: 0.75;
+}
+.credit:hover {
+  color: var(--lav);
+  opacity: 1;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}