Initial Argus web catalog
This commit is contained in:
Курнат Андрей
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="456" height="456" viewBox="0 0 456 456">
|
||||
<path fill="#2B1B15" d="M104,0H352A104,104 0 0 1 456,104V352A104,104 0 0 1 352,456H104A104,104 0 0 1 0,352V104A104,104 0 0 1 104,0Z"/>
|
||||
<path fill="#3A2218" d="M124,36H332A88,88 0 0 1 420,124V332A88,88 0 0 1 332,420H124A88,88 0 0 1 36,332V124A88,88 0 0 1 124,36Z"/>
|
||||
<path fill="none" stroke="#A65436" stroke-opacity="0.28" stroke-width="18" d="M228,74A154,154 0 1 1 228,382A154,154 0 1 1 228,74Z"/>
|
||||
<path fill="none" stroke="#F2CBB0" stroke-opacity="0.18" stroke-width="10" d="M228,112A116,116 0 1 1 228,344A116,116 0 1 1 228,112Z"/>
|
||||
<path fill="none" stroke="#A65436" stroke-opacity="0.42" stroke-linecap="round" stroke-width="18" d="M110,332C141,358 179,372 228,372C277,372 315,358 346,332"/>
|
||||
<path fill="#FFF6ED" d="M134,112C98,112 70,140 70,176V298C70,334 98,362 134,362H188C205,362 220,367 228,378V194C217,143 182,112 144,112H134Z"/>
|
||||
<path fill="#EAD3BE" d="M322,112C358,112 386,140 386,176V298C386,334 358,362 322,362H268C251,362 236,367 228,378V194C239,143 274,112 312,112H322Z"/>
|
||||
<path fill="#A65436" d="M228,120C244,120 258,134 258,150V252L228,232L198,252V150C198,134 212,120 228,120Z"/>
|
||||
<path fill="#FFF1E4" d="M228,194C214,166 190,152 160,152H128C117,152 108,161 108,172V302C108,313 117,322 128,322H190C204,322 218,327 228,336V194Z"/>
|
||||
<path fill="#E8C7A6" d="M228,194C242,166 266,152 296,152H328C339,152 348,161 348,172V302C348,313 339,322 328,322H266C252,322 238,327 228,336V194Z"/>
|
||||
<path fill="none" stroke="#D5A789" stroke-linecap="round" stroke-width="10" d="M144,194H190"/>
|
||||
<path fill="none" stroke="#D5A789" stroke-opacity="0.6" stroke-linecap="round" stroke-width="10" d="M144,226H184"/>
|
||||
<path fill="none" stroke="#B97E58" stroke-linecap="round" stroke-width="10" d="M266,194H312"/>
|
||||
<path fill="none" stroke="#B97E58" stroke-opacity="0.6" stroke-linecap="round" stroke-width="10" d="M272,226H312"/>
|
||||
<path fill="#A65436" d="M228,134L282,292H254L244,258H212L202,292H174L228,134Z"/>
|
||||
<path fill="#FFD9B7" d="M218,236H238L228,190L218,236Z"/>
|
||||
<path fill="#FFD9B7" d="M202,272A6,6 0 0 1 208,266H248A6,6 0 0 1 254,272A6,6 0 0 1 248,278H208A6,6 0 0 1 202,272Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 320 KiB |
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Argus</title>
|
||||
<link rel="icon" type="image/png" href="/assets/argus-icon.png?v=argus-panoptes-3d-20260508">
|
||||
<link rel="stylesheet" href="/site.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="store-header">
|
||||
<nav class="store-nav" aria-label="Главная навигация">
|
||||
<a class="brand" href="/" aria-label="Argus">
|
||||
<img class="brand-icon" src="/assets/argus-icon.png?v=argus-panoptes-3d-20260508" alt="" width="34" height="34">
|
||||
<span>Argus</span>
|
||||
</a>
|
||||
<div class="nav-tabs" aria-label="Разделы">
|
||||
<a class="active" href="/">Приложения</a>
|
||||
<a href="#release-card">Версия</a>
|
||||
</div>
|
||||
<button class="icon-button" id="refresh-button" type="button" aria-label="Обновить данные">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M20 12a8 8 0 1 1-2.34-5.66" />
|
||||
<path d="M20 4v6h-6" />
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main class="store-shell">
|
||||
<div class="device-tabs" aria-label="Устройства">
|
||||
<span class="device-chip active">Телефон</span>
|
||||
</div>
|
||||
|
||||
<section class="app-hero" id="catalog" aria-labelledby="app-name">
|
||||
<div class="app-summary">
|
||||
<div class="app-title-row">
|
||||
<img class="app-icon" id="app-icon" src="/assets/argus-icon.png?v=argus-panoptes-3d-20260508" alt="" width="112" height="112">
|
||||
<div>
|
||||
<p class="collection-label">Опубликованные приложения</p>
|
||||
<h1 id="app-name">Argus</h1>
|
||||
<p class="developer-name">Kusoft</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="app-description" id="app-description">Загрузка каталога приложений...</p>
|
||||
<div class="app-actions">
|
||||
<a class="button primary" id="primary-download" href="#" aria-disabled="true">Скачать файл</a>
|
||||
<a class="button secondary" id="manifest-link" href="#" target="_blank" rel="noreferrer">Манифест</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="release-card" id="release-card" aria-label="Текущая версия">
|
||||
<div class="release-card-head">
|
||||
<span>Текущая версия</span>
|
||||
<strong id="release-version">-</strong>
|
||||
</div>
|
||||
<div class="stat-grid" id="detail-meta"></div>
|
||||
<div class="release-list" id="release-list"></div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="store-section" aria-labelledby="available-title">
|
||||
<div class="section-head">
|
||||
<h2 id="available-title">Доступно в Argus</h2>
|
||||
</div>
|
||||
<div class="catalog-grid" id="catalog-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="store-section" aria-labelledby="current-release-title">
|
||||
<div class="section-head">
|
||||
<h2 id="current-release-title">Последняя публикация</h2>
|
||||
</div>
|
||||
<div class="timeline" id="recent-releases"></div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="/site.js" defer></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,634 @@
|
||||
:root {
|
||||
--bg: #060711;
|
||||
--bg-2: #0b0f20;
|
||||
--surface: rgba(15, 20, 39, 0.78);
|
||||
--surface-strong: rgba(23, 29, 55, 0.92);
|
||||
--surface-soft: rgba(255, 255, 255, 0.055);
|
||||
--surface-lift: rgba(255, 255, 255, 0.09);
|
||||
--text: #f4f7ff;
|
||||
--muted: #b6c0d8;
|
||||
--subtle: #7f8ba7;
|
||||
--line: rgba(178, 194, 255, 0.2);
|
||||
--line-soft: rgba(178, 194, 255, 0.12);
|
||||
--cyan: #56e4ff;
|
||||
--cyan-soft: rgba(86, 228, 255, 0.14);
|
||||
--gold: #f7c76d;
|
||||
--gold-soft: rgba(247, 199, 109, 0.16);
|
||||
--violet: #8b5cf6;
|
||||
--green: #35d6a1;
|
||||
--green-dark: #13b884;
|
||||
--green-soft: rgba(53, 214, 161, 0.14);
|
||||
--danger: #ff7b7b;
|
||||
--shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
|
||||
--glass-blur: blur(22px) saturate(130%);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
background:
|
||||
linear-gradient(145deg, #03040b 0%, #090b18 34%, #141024 72%, #050711 100%),
|
||||
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 96px),
|
||||
repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 96px);
|
||||
font-family: "Segoe UI", Roboto, Arial, sans-serif;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background:
|
||||
linear-gradient(115deg, transparent 0 16%, rgba(86, 228, 255, 0.09) 16% 17%, transparent 17% 100%),
|
||||
linear-gradient(72deg, transparent 0 60%, rgba(247, 199, 109, 0.09) 60% 61%, transparent 61% 100%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 28%, rgba(0, 0, 0, 0.22));
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.store-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: rgba(6, 7, 17, 0.84);
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.26);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
}
|
||||
|
||||
.store-nav {
|
||||
width: min(1280px, calc(100% - 48px));
|
||||
min-height: 72px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
font-size: 1.42rem;
|
||||
font-weight: 650;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
display: block;
|
||||
padding: 3px;
|
||||
border: 1px solid rgba(247, 199, 109, 0.58);
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(86, 228, 255, 0.36));
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(86, 228, 255, 0.24),
|
||||
0 0 26px rgba(86, 228, 255, 0.34),
|
||||
0 0 38px rgba(247, 199, 109, 0.18);
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.nav-tabs a {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
color: var(--muted);
|
||||
font-size: 0.96rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.nav-tabs a.active {
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
.nav-tabs a.active::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
border-radius: 999px 999px 0 0;
|
||||
background: linear-gradient(90deg, var(--gold), var(--cyan));
|
||||
box-shadow: 0 0 18px rgba(86, 228, 255, 0.46);
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-left: auto;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 50%;
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-button:hover {
|
||||
color: var(--text);
|
||||
border-color: var(--line-soft);
|
||||
background: var(--surface-soft);
|
||||
}
|
||||
|
||||
.icon-button svg {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.store-shell {
|
||||
width: min(1280px, calc(100% - 48px));
|
||||
margin: 0 auto;
|
||||
padding: 30px 0 78px;
|
||||
}
|
||||
|
||||
.device-tabs {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 8px 0 30px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.device-chip {
|
||||
min-height: 38px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
padding: 0 16px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
color: var(--muted);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
font-size: 0.94rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.device-chip.active {
|
||||
border-color: rgba(247, 199, 109, 0.42);
|
||||
color: var(--gold);
|
||||
background: linear-gradient(135deg, rgba(247, 199, 109, 0.16), rgba(86, 228, 255, 0.08));
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
|
||||
}
|
||||
|
||||
.app-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 390px;
|
||||
gap: 44px;
|
||||
padding: 36px 0 46px;
|
||||
border-bottom: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.app-summary {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.app-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 118px;
|
||||
height: 118px;
|
||||
flex: 0 0 auto;
|
||||
display: block;
|
||||
padding: 7px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.72);
|
||||
border-radius: 28px;
|
||||
object-fit: cover;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
box-shadow:
|
||||
0 22px 42px rgba(0, 0, 0, 0.32),
|
||||
0 0 34px rgba(86, 228, 255, 0.14);
|
||||
}
|
||||
|
||||
.collection-label {
|
||||
margin: 0 0 8px;
|
||||
color: var(--gold);
|
||||
font-size: 0.86rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
p {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-size: clamp(3rem, 6vw, 4.75rem);
|
||||
font-weight: 540;
|
||||
letter-spacing: 0;
|
||||
line-height: 1.06;
|
||||
text-shadow: 0 0 36px rgba(86, 228, 255, 0.16);
|
||||
}
|
||||
|
||||
.developer-name {
|
||||
margin: 8px 0 0;
|
||||
color: var(--cyan);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
max-width: 760px;
|
||||
margin: 30px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 1.08rem;
|
||||
line-height: 1.68;
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 14px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.button {
|
||||
min-height: 46px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 10px;
|
||||
text-decoration: none;
|
||||
font-size: 0.96rem;
|
||||
font-weight: 760;
|
||||
cursor: pointer;
|
||||
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
color: #08101f;
|
||||
background: linear-gradient(135deg, #ffe29a, var(--gold) 52%, #51dfff);
|
||||
box-shadow: 0 14px 34px rgba(247, 199, 109, 0.18), 0 0 24px rgba(86, 228, 255, 0.14);
|
||||
}
|
||||
|
||||
.button.primary:hover {
|
||||
box-shadow: 0 18px 40px rgba(247, 199, 109, 0.26), 0 0 30px rgba(86, 228, 255, 0.2);
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
color: var(--text);
|
||||
border-color: var(--line);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
border-color: rgba(86, 228, 255, 0.4);
|
||||
background: rgba(86, 228, 255, 0.09);
|
||||
}
|
||||
|
||||
.button[aria-disabled="true"] {
|
||||
opacity: 0.55;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.release-card {
|
||||
min-width: 0;
|
||||
align-self: start;
|
||||
padding: 24px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 14px;
|
||||
background: linear-gradient(180deg, rgba(26, 32, 60, 0.86), rgba(12, 16, 32, 0.82));
|
||||
box-shadow: var(--shadow);
|
||||
backdrop-filter: var(--glass-blur);
|
||||
}
|
||||
|
||||
.release-card-head {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.release-card-head span,
|
||||
.meta-label {
|
||||
color: var(--subtle);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 760;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.release-card-head strong {
|
||||
color: var(--gold);
|
||||
font-size: 1.58rem;
|
||||
font-weight: 720;
|
||||
text-shadow: 0 0 22px rgba(247, 199, 109, 0.32);
|
||||
}
|
||||
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.meta-block {
|
||||
min-height: 82px;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid var(--line-soft);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.meta-label {
|
||||
display: block;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
.meta-value {
|
||||
color: var(--text);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.36;
|
||||
}
|
||||
|
||||
.meta-value a {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.store-section {
|
||||
padding: 36px 0 0;
|
||||
}
|
||||
|
||||
.section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.section-head h2 {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-size: 1.46rem;
|
||||
font-weight: 650;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.catalog-grid,
|
||||
.timeline,
|
||||
.release-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.catalog-grid {
|
||||
grid-template-columns: minmax(280px, 430px);
|
||||
}
|
||||
|
||||
.app-card,
|
||||
.timeline-item,
|
||||
.release-item {
|
||||
display: grid;
|
||||
border-radius: 14px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.app-card {
|
||||
grid-template-columns: 76px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
max-width: 430px;
|
||||
padding: 14px;
|
||||
border: 1px solid transparent;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.app-card:hover,
|
||||
.app-card.active {
|
||||
border-color: var(--line-soft);
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.app-card-icon {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.66);
|
||||
border-radius: 18px;
|
||||
object-fit: cover;
|
||||
background: rgba(255, 255, 255, 0.94);
|
||||
}
|
||||
|
||||
.app-card h3,
|
||||
.timeline-item h3,
|
||||
.release-item h3 {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
|
||||
.app-card p,
|
||||
.timeline-item p,
|
||||
.release-item p,
|
||||
.status,
|
||||
.release-notes,
|
||||
.empty-state {
|
||||
color: var(--muted);
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.app-card p {
|
||||
margin: 4px 0 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.rating-line {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 8px;
|
||||
color: var(--subtle);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.timeline-item,
|
||||
.release-item {
|
||||
gap: 12px;
|
||||
padding: 18px 0;
|
||||
border-top: 1px solid var(--line-soft);
|
||||
}
|
||||
|
||||
.release-item {
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.timeline-item header,
|
||||
.release-item header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.pill-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pill {
|
||||
min-height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
border: 1px solid rgba(53, 214, 161, 0.2);
|
||||
border-radius: 999px;
|
||||
color: #8af6cf;
|
||||
background: var(--green-soft);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 760;
|
||||
}
|
||||
|
||||
.release-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.release-links a {
|
||||
color: var(--gold);
|
||||
font-weight: 760;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.release-links a:hover {
|
||||
color: var(--cyan);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 18px;
|
||||
border: 1px dashed var(--line);
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.055);
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.store-nav,
|
||||
.store-shell {
|
||||
width: min(100% - 28px, 1280px);
|
||||
}
|
||||
|
||||
.store-nav {
|
||||
min-height: 64px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.brand span:last-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.brand-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
gap: 18px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.app-hero,
|
||||
.stat-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.app-hero {
|
||||
gap: 30px;
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.app-title-row {
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.app-icon {
|
||||
width: 92px;
|
||||
height: 92px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.release-card {
|
||||
box-shadow: 0 18px 46px rgba(0, 0, 0, 0.24);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.store-shell {
|
||||
padding-top: 18px;
|
||||
}
|
||||
|
||||
.device-tabs {
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.45rem;
|
||||
}
|
||||
|
||||
.app-actions,
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.catalog-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
}
|
||||
+236
@@ -0,0 +1,236 @@
|
||||
const fallbackIcon = "/assets/argus-icon.png?v=argus-panoptes-3d-20260508";
|
||||
const appIcons = new Map([
|
||||
["aletheia-kotlin", "/assets/aletheia-icon.svg?v=aletheia-launcher-20260508"]
|
||||
]);
|
||||
|
||||
const state = {
|
||||
apps: [],
|
||||
selectedSlug: null
|
||||
};
|
||||
|
||||
const catalogGrid = document.getElementById("catalog-grid");
|
||||
const recentReleases = document.getElementById("recent-releases");
|
||||
const appIcon = document.getElementById("app-icon");
|
||||
const appName = document.getElementById("app-name");
|
||||
const appDescription = document.getElementById("app-description");
|
||||
const releaseVersion = document.getElementById("release-version");
|
||||
const detailMeta = document.getElementById("detail-meta");
|
||||
const releaseList = document.getElementById("release-list");
|
||||
const manifestLink = document.getElementById("manifest-link");
|
||||
const primaryDownload = document.getElementById("primary-download");
|
||||
const refreshButton = document.getElementById("refresh-button");
|
||||
|
||||
refreshButton.addEventListener("click", () => loadAll());
|
||||
window.addEventListener("hashchange", handleHashChange);
|
||||
|
||||
loadAll();
|
||||
|
||||
async function loadAll() {
|
||||
await Promise.all([loadCatalog(), loadRecentReleases()]);
|
||||
handleHashChange();
|
||||
}
|
||||
|
||||
async function loadCatalog() {
|
||||
const response = await fetch("/api/apps");
|
||||
const apps = await response.json();
|
||||
state.apps = Array.isArray(apps) ? apps : [];
|
||||
renderCatalog();
|
||||
}
|
||||
|
||||
async function loadRecentReleases() {
|
||||
const response = await fetch("/api/releases/recent");
|
||||
const items = await response.json();
|
||||
|
||||
if (!Array.isArray(items) || !items.length) {
|
||||
recentReleases.innerHTML = '<div class="empty-state">Пока нет опубликованных релизов.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
recentReleases.innerHTML = items.map(item => `
|
||||
<article class="timeline-item">
|
||||
<header>
|
||||
<h3>${escapeHtml(item.appName)}</h3>
|
||||
<span class="pill">${escapeHtml(item.release.version)}</span>
|
||||
</header>
|
||||
<p>${escapeHtml(item.release.platform)} - ${escapeHtml(item.release.packageKind)} - ${formatDate(item.release.publishedAt)}</p>
|
||||
<div class="release-links">
|
||||
<a href="#${encodeURIComponent(item.slug)}">Открыть карточку</a>
|
||||
<a href="${item.release.downloadPath}">Скачать</a>
|
||||
</div>
|
||||
</article>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
function renderCatalog() {
|
||||
if (!state.apps.length) {
|
||||
catalogGrid.innerHTML = '<div class="empty-state">Пока нет опубликованных приложений.</div>';
|
||||
renderEmptyDetail();
|
||||
return;
|
||||
}
|
||||
|
||||
catalogGrid.innerHTML = state.apps.map(app => {
|
||||
const isActive = app.slug === state.selectedSlug;
|
||||
const latest = app.latestRelease;
|
||||
return `
|
||||
<article class="app-card ${isActive ? "active" : ""}" data-slug="${escapeHtml(app.slug)}">
|
||||
${renderAppIcon("app-card-icon", app, 72)}
|
||||
<div>
|
||||
<h3>${escapeHtml(app.name)}</h3>
|
||||
<p>${escapeHtml(app.summary)}</p>
|
||||
<div class="rating-line">
|
||||
<span>${latest ? escapeHtml(latest.version) : "нет релиза"}</span>
|
||||
<span>${latest ? escapeHtml(latest.packageKind) : "пакет"}</span>
|
||||
<span>${app.releaseCount} версия</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
`;
|
||||
}).join("");
|
||||
|
||||
for (const card of catalogGrid.querySelectorAll(".app-card")) {
|
||||
card.addEventListener("click", () => {
|
||||
window.location.hash = card.dataset.slug;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function handleHashChange() {
|
||||
const slugFromHash = decodeURIComponent(window.location.hash.replace(/^#/, ""));
|
||||
const hashApp = state.apps.find(app => app.slug === slugFromHash);
|
||||
const nextSlug = hashApp?.slug ?? state.apps[0]?.slug ?? null;
|
||||
state.selectedSlug = nextSlug;
|
||||
|
||||
if (!nextSlug) {
|
||||
renderEmptyDetail();
|
||||
return;
|
||||
}
|
||||
|
||||
renderCatalog();
|
||||
|
||||
if (slugFromHash && !hashApp) {
|
||||
window.history.replaceState(null, "", `#${encodeURIComponent(nextSlug)}`);
|
||||
}
|
||||
|
||||
loadAppDetail(nextSlug);
|
||||
}
|
||||
|
||||
async function loadAppDetail(slug) {
|
||||
const response = await fetch(`/api/apps/${encodeURIComponent(slug)}`);
|
||||
if (!response.ok) {
|
||||
renderEmptyDetail("Карточка приложения не загрузилась.");
|
||||
return;
|
||||
}
|
||||
|
||||
const app = await response.json();
|
||||
const latest = app.releases[0] ?? null;
|
||||
appIcon.src = getAppIconSrc(app);
|
||||
appName.textContent = app.name;
|
||||
appDescription.textContent = app.description || app.summary;
|
||||
manifestLink.href = `/api/apps/${encodeURIComponent(app.slug)}/manifest`;
|
||||
|
||||
if (latest) {
|
||||
releaseVersion.textContent = latest.version;
|
||||
primaryDownload.href = latest.downloadPath;
|
||||
primaryDownload.removeAttribute("aria-disabled");
|
||||
} else {
|
||||
releaseVersion.textContent = "-";
|
||||
primaryDownload.href = "#";
|
||||
primaryDownload.setAttribute("aria-disabled", "true");
|
||||
}
|
||||
|
||||
detailMeta.innerHTML = `
|
||||
${renderMetaBlock("Обновлено", formatDate(app.updatedAt))}
|
||||
${renderMetaBlock("Платформа", latest ? latest.platform : "Не опубликовано")}
|
||||
${renderMetaBlock("Тип", latest ? latest.packageKind : "-")}
|
||||
${renderMetaBlock("Размер", latest ? formatBytes(latest.packageSizeBytes) : "-")}
|
||||
`;
|
||||
|
||||
if (!app.releases.length) {
|
||||
releaseList.innerHTML = '<div class="empty-state">Для этого приложения ещё нет опубликованного файла.</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
releaseList.innerHTML = app.releases.slice(0, 1).map(release => `
|
||||
<article class="release-item">
|
||||
<header>
|
||||
<h3>Файл ${escapeHtml(release.version)}</h3>
|
||||
<span class="pill">${escapeHtml(release.channel)}</span>
|
||||
</header>
|
||||
<p>${formatDate(release.publishedAt)} - ${formatBytes(release.packageSizeBytes)} - ${escapeHtml(release.originalFileName)}</p>
|
||||
${release.notes ? `<p class="release-notes">${escapeHtml(release.notes)}</p>` : ""}
|
||||
<div class="pill-row">
|
||||
<span class="pill">${escapeHtml(release.platform)}</span>
|
||||
<span class="pill">${escapeHtml(release.packageKind)}</span>
|
||||
</div>
|
||||
<div class="release-links">
|
||||
<a href="${release.downloadPath}">Скачать файл</a>
|
||||
<a href="/api/apps/${encodeURIComponent(app.slug)}/manifest?platform=${encodeURIComponent(release.platform)}&channel=${encodeURIComponent(release.channel)}" target="_blank" rel="noreferrer">Открыть manifest</a>
|
||||
</div>
|
||||
</article>
|
||||
`).join("");
|
||||
}
|
||||
|
||||
function renderEmptyDetail(message = "Данные приложения появятся после загрузки API.") {
|
||||
appIcon.src = fallbackIcon;
|
||||
appName.textContent = "Argus";
|
||||
appDescription.textContent = message;
|
||||
releaseVersion.textContent = "-";
|
||||
detailMeta.innerHTML = "";
|
||||
releaseList.innerHTML = "";
|
||||
manifestLink.href = "#";
|
||||
primaryDownload.href = "#";
|
||||
primaryDownload.setAttribute("aria-disabled", "true");
|
||||
}
|
||||
|
||||
function renderMetaBlock(label, value) {
|
||||
return `
|
||||
<div class="meta-block">
|
||||
<span class="meta-label">${escapeHtml(label)}</span>
|
||||
<div class="meta-value">${escapeHtml(value)}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function renderAppIcon(className, app, size) {
|
||||
return `<img class="${escapeHtml(className)}" src="${escapeHtml(getAppIconSrc(app))}" alt="" width="${size}" height="${size}">`;
|
||||
}
|
||||
|
||||
function getAppIconSrc(app) {
|
||||
return appIcons.get(app?.slug) ?? fallbackIcon;
|
||||
}
|
||||
|
||||
function formatDate(value) {
|
||||
return new Intl.DateTimeFormat("ru-RU", {
|
||||
year: "numeric",
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit"
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function formatBytes(bytes) {
|
||||
if (!Number.isFinite(bytes) || bytes <= 0) {
|
||||
return "0 Б";
|
||||
}
|
||||
|
||||
const units = ["Б", "КБ", "МБ", "ГБ"];
|
||||
let index = 0;
|
||||
let value = bytes;
|
||||
|
||||
while (value >= 1024 && index < units.length - 1) {
|
||||
value /= 1024;
|
||||
index += 1;
|
||||
}
|
||||
|
||||
return `${value.toFixed(value >= 10 || index === 0 ? 0 : 1)} ${units[index]}`;
|
||||
}
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
Reference in New Issue
Block a user