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

Compact balance card and float leaderboard switch

Browse source
This commit is contained in:
Codex 2026-09-07 21:10:53 +00:00
parent 6208cc578e
commit 3e27ee7263
3 changed files with 11 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/app.js
View file

@ -99,6 +99,7 @@
document.querySelector(`.bottom-nav button[data-view="${viewId}"]`)?.classList.add("active");
state.currentView = viewId;
document.body.classList.toggle("form-open", viewId === "addView");
document.body.classList.toggle("leaderboard-open", viewId === "leaderboardView");
updateNativeControls();
window.scrollTo({ top: 0, behavior: "auto" });
animateViewStage(direction);

4
static/index.html
View file

@ -6,9 +6,9 @@
<meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#111111" />
<title>Пожитки</title>
<link rel="stylesheet" href="./styles.css?v=13" />
<link rel="stylesheet" href="./styles.css?v=15" />
<script src="./telegram-web-app.js"></script>
<script src="./app.js?v=14" defer></script>
<script src="./app.js?v=15" defer></script>
</head>
<body>
<main class="shell">

13
static/styles.css
View file

@ -91,7 +91,7 @@ button:active { filter: brightness(.88); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 30px; line-height: 1; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.user-chip { position: fixed; z-index: 9; top: calc(var(--app-device-safe-top) + 10px); left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(42vw, 190px); padding: 5px 11px 5px 5px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.user-chip { position: fixed; z-index: 9; top: calc(var(--app-device-safe-top) + 10px); left: 50%; display: flex; align-items: center; gap: 8px; max-width: min(42vw, 190px); padding: 5px 11px 5px 5px; border: 0; border-radius: 999px; transform: translateX(-50%); background: var(--surface); font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.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-stage { display: flex; flex: 1; flex-direction: column; width: 100%; min-width: 0; }
@ -105,9 +105,9 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.hero-card {
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 148px;
padding: 21px 23px;
justify-content: flex-start;
min-height: 122px;
padding: 15px 20px;
border-radius: 29px;
border: 1px solid var(--line);
color: var(--text);
@ -179,7 +179,9 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.board-heading { align-items: center; margin-top: 5px; margin-bottom: 20px; }
.icon-button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--link); font-size: 21px; }
.board-switch { margin-bottom: 13px; }
.board-switch { position: fixed; z-index: 9; bottom: calc(max(12px, calc(var(--app-safe-bottom) + 8px)) + 64px); left: 50%; width: fit-content; margin: 0; padding: 5px; border: 1px solid var(--line); border-radius: 999px; transform: translateX(-50%); box-shadow: var(--shadow); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
.board-switch button { min-width: 84px; padding: 8px 14px; border-radius: 999px; }
.board-switch button.active { color: var(--accent); background: transparent; box-shadow: none; }
.leader-filter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 0 3px 13px; color: var(--muted); font-size: 11px; font-weight: 700; }
.leader-filter select { width: 100%; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; outline: none; background: var(--surface); }
.leaderboard-list { overflow: hidden; min-height: 100px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); }
@ -206,6 +208,7 @@ h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
.app-action:disabled { opacity: .72; cursor: default; }
.form-open .nav-tabs { display: none; }
.form-open .app-action { flex-basis: 100%; width: 100%; border-radius: 999px; font-size: 16px; font-weight: 800; }
.leaderboard-open { padding-bottom: calc(174px + var(--app-safe-bottom)); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: calc(100px + var(--app-safe-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(50px); -webkit-backdrop-filter: blur(50px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }