snw/bot_pozhitki
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add photographic glassmorphism theme

Browse source
This commit is contained in:
Codex 2026-09-07 19:59:43 +00:00
parent 5386a2e153
commit d2ee5b96b4
4 changed files with 70 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
static/app.js
View file

@ -32,8 +32,9 @@
safely(() => tg.ready()); safely(() => tg.ready());
safely(() => tg.expand()); safely(() => tg.expand());
safely(() => tg.enableClosingConfirmation?.()); safely(() => tg.enableClosingConfirmation?.());
if (tg.isVersionAtLeast?.("6.1")) safely(() => tg.setHeaderColor("secondary_bg_color")); if (tg.isVersionAtLeast?.("6.1")) safely(() => tg.setBackgroundColor("#111111"));
if (tg.isVersionAtLeast?.("7.10")) safely(() => tg.setBottomBarColor("secondary_bg_color")); if (tg.isVersionAtLeast?.("6.9")) safely(() => tg.setHeaderColor("#111111"));
if (tg.isVersionAtLeast?.("7.10")) safely(() => tg.setBottomBarColor("#111111"));
} }
function showToast(message) { function showToast(message) {

BIN
static/background.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 450 KiB

8
static/index.html
View file

@ -3,12 +3,12 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#f1f0ea" /> <meta name="theme-color" content="#111111" />
<title>Пожитки</title> <title>Пожитки</title>
<link rel="stylesheet" href="./styles.css" /> <link rel="stylesheet" href="./styles.css?v=4" />
<script src="./telegram-web-app.js"></script> <script src="./telegram-web-app.js"></script>
<script src="./app.js?v=3" defer></script> <script src="./app.js?v=4" defer></script>
</head> </head>
<body> <body>
<main class="shell"> <main class="shell">

88
static/styles.css
View file

@ -1,14 +1,15 @@
:root { :root {
--bg: var(--tg-theme-bg-color, #f1f0ea); --bg: #111111;
--surface: var(--tg-theme-secondary-bg-color, #ffffff); --surface: rgba(0, 0, 0, .1);
--text: var(--tg-theme-text-color, #17201c); --surface-active: rgba(0, 0, 0, .28);
--muted: var(--tg-theme-hint-color, #707a74); --text: #ffffff;
--accent: var(--tg-theme-button-color, #216a4b); --muted: rgba(255, 255, 255, .68);
--accent-text: var(--tg-theme-button-text-color, #ffffff); --accent: #f0d28a;
--link: var(--tg-theme-link-color, #216a4b); --accent-text: #17130b;
--danger: var(--tg-theme-destructive-text-color, #bd4a3e); --link: #ffffff;
--line: color-mix(in srgb, var(--text) 12%, transparent); --danger: #ff9188;
--shadow: 0 16px 50px color-mix(in srgb, var(--text) 9%, transparent); --line: rgba(255, 255, 255, .18);
--shadow: 0 18px 55px rgba(0, 0, 0, .2);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
@ -19,25 +20,43 @@
html, body { margin: 0; min-height: 100%; background: var(--bg); } html, body { margin: 0; min-height: 100%; background: var(--bg); }
body { body {
position: relative;
isolation: isolate;
min-height: 100vh; min-height: 100vh;
min-height: 100dvh; min-height: 100dvh;
padding: max(14px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom)); padding: max(14px, env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));
background-image: background: transparent;
radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 32%), }
linear-gradient(180deg, color-mix(in srgb, var(--surface) 35%, transparent), transparent 28%);
body::before,
body::after {
position: fixed;
inset: 0;
z-index: -2;
content: "";
pointer-events: none;
}
body::before {
background: #111 url("./background.jpg") center center / cover no-repeat;
}
body::after {
z-index: -1;
background: rgba(0, 0, 0, .16);
} }
button, input, select { font: inherit; color: inherit; } button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; } button { cursor: pointer; }
.shell { width: min(100%, 560px); margin: 0 auto; } .shell { width: min(100%, 560px); margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 26px; } .topbar { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 26px; text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.eyebrow { margin: 0 0 3px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 750; color: var(--muted); } .eyebrow { margin: 0 0 3px; text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 750; color: var(--muted); }
h1, h2, p { margin-top: 0; } h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; } h1 { margin-bottom: 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; } h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.user-chip { display: flex; align-items: center; gap: 8px; max-width: 48%; padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 72%, transparent); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; } .user-chip { display: flex; align-items: center; gap: 8px; max-width: 48%; padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; }
.mini-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--accent); color: var(--accent-text); } .mini-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(0, 0, 0, .28); color: var(--text); }
.view { display: none; animation: reveal .25s ease; } .view { display: none; animation: reveal .25s ease; }
.view.active { display: block; } .view.active { display: block; }
@ -47,10 +66,9 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
min-height: 210px; min-height: 210px;
padding: 27px; padding: 27px;
border-radius: 29px; border-radius: 29px;
color: #f5f7f3; border: 1px solid var(--line);
background: color: var(--text);
linear-gradient(135deg, rgba(255,255,255,.11), transparent 45%), background: var(--surface);
linear-gradient(145deg, color-mix(in srgb, var(--accent) 82%, #132e24), color-mix(in srgb, var(--accent) 50%, #0c1914));
box-shadow: var(--shadow); box-shadow: var(--shadow);
} }
.hero-card p { margin-bottom: 15px; opacity: .72; font-size: 13px; } .hero-card p { margin-bottom: 15px; opacity: .72; font-size: 13px; }
@ -97,9 +115,9 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.add-heading { margin: 5px 3px 24px; } .add-heading { margin: 5px 3px 24px; }
.transaction-form { display: grid; gap: 18px; } .transaction-form { display: grid; gap: 18px; }
.segmented, .board-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 15px; background: color-mix(in srgb, var(--text) 7%, transparent); } .segmented, .board-switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 15px; background: var(--surface); }
.segment, .board-switch button { padding: 11px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; } .segment, .board-switch button { padding: 11px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 650; }
.segment.active, .board-switch button.active { color: var(--text); background: var(--surface); box-shadow: 0 3px 12px color-mix(in srgb, var(--text) 8%, transparent); } .segment.active, .board-switch button.active { color: var(--text); background: var(--surface-active); box-shadow: 0 3px 12px rgba(0, 0, 0, .16); }
.transaction-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 700; } .transaction-form label { display: grid; gap: 8px; font-size: 12px; font-weight: 700; }
.transaction-form label > span { margin-left: 4px; } .transaction-form label > span { margin-left: 4px; }
.transaction-form em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 500; } .transaction-form em { color: var(--muted); font-size: 10px; font-style: normal; font-weight: 500; }
@ -108,7 +126,7 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.amount-field > div { position: relative; } .amount-field > div { position: relative; }
.amount-field input { height: 78px; padding-right: 54px; font-size: 35px; font-weight: 750; letter-spacing: -.04em; } .amount-field input { height: 78px; padding-right: 54px; font-size: 35px; font-weight: 750; letter-spacing: -.04em; }
.amount-field b { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 24px; } .amount-field b { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 24px; }
.primary-button { min-height: 54px; margin-top: 3px; border: 0; border-radius: 16px; background: var(--accent); color: var(--accent-text); font-weight: 750; box-shadow: 0 10px 25px color-mix(in srgb, var(--accent) 28%, transparent); } .primary-button { min-height: 54px; margin-top: 3px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 16px; background: var(--surface-active); color: var(--text); font-weight: 750; box-shadow: var(--shadow); }
.secondary-button { min-height: 44px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); font-weight: 700; } .secondary-button { min-height: 44px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, var(--surface)); color: var(--accent); font-weight: 700; }
.form-hint { margin: -8px 15px 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; } .form-hint { margin: -8px 15px 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-align: center; }
.hidden { display: none !important; } .hidden { display: none !important; }
@ -133,14 +151,34 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.leader-percent.negative { color: var(--danger); } .leader-percent.negative { color: var(--danger); }
.friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; } .friend-hint { margin: 13px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; }
.bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px max(15px, calc((100vw - 560px) / 2)) max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(18px); } .bottom-nav { position: fixed; z-index: 10; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 8px max(15px, calc((100vw - 560px) / 2)) max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bottom-nav button { display: grid; place-items: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; } .bottom-nav button { display: grid; place-items: center; gap: 2px; padding: 3px; border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 650; }
.bottom-nav button > span { font-size: 22px; line-height: 30px; } .bottom-nav button > span { font-size: 22px; line-height: 30px; }
.bottom-nav button.active { color: var(--accent); } .bottom-nav button.active { color: var(--accent); }
.bottom-nav .add-mark { display: grid; place-items: center; width: 42px; height: 32px; border-radius: 12px; background: var(--accent); color: var(--accent-text); } .bottom-nav .add-mark { display: grid; place-items: center; width: 42px; height: 32px; border-radius: 12px; background: var(--accent); color: var(--accent-text); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); max-width: calc(100% - 36px); padding: 11px 16px; border-radius: 12px; transform: translate(-50%, 20px); background: var(--text); color: var(--bg); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); } .toast { position: fixed; z-index: 20; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); max-width: calc(100% - 36px); padding: 11px 16px; border: 1px solid var(--line); border-radius: 12px; transform: translate(-50%, 20px); background: rgba(0, 0, 0, .62); color: var(--text); opacity: 0; pointer-events: none; transition: .2s ease; font-size: 12px; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); } .toast.show { opacity: 1; transform: translate(-50%, 0); }
.hero-card,
.user-chip,
.metric,
.category-list,
.transaction-list,
.segmented,
.board-switch,
.transaction-form input,
.transaction-form select,
.secondary-button,
.icon-button,
.leader-filter select,
.leaderboard-list {
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
input::placeholder { color: rgba(255, 255, 255, .48); }
select option { color: #ffffff; background: #252525; }
@media (min-width: 600px) { @media (min-width: 600px) {
body { padding-top: 28px; } body { padding-top: 28px; }
.bottom-nav { left: 50%; bottom: 14px; width: 540px; border: 1px solid var(--line); border-radius: 22px; transform: translateX(-50%); padding: 8px 22px; box-shadow: var(--shadow); } .bottom-nav { left: 50%; bottom: 14px; width: 540px; border: 1px solid var(--line); border-radius: 22px; transform: translateX(-50%); padding: 8px 22px; box-shadow: var(--shadow); }