Commit 82ece1
2026-02-18 13:13:39 Admin: feat: add landing page as entry point| home.md .. | |
| @@ 1,110 1,1 @@ | |
| - | <div class="skif-hero"> |
| - | <img src="/logo.webp" alt="SKIF.PRO" class="skif-hero-logo"> |
| - | <h1>SKIF Wiki</h1> |
| - | <p>Добро пожаловать в базу знаний SKIF.PRO</p> |
| - | </div> |
| - | |
| - | <div class="skif-section"> |
| - | <h2 class="skif-section-title">🔍 Быстрый поиск</h2> |
| - | <div class="skif-search-box"> |
| - | <a href="/-/search" class="skif-link" style="justify-content: center; background: white;"> |
| - | <span class="skif-link-icon">🔎</span> |
| - | <span class="skif-link-text">Поиск по wiki</span> |
| - | </a> |
| - | </div> |
| - | </div> |
| - | |
| - | <div class="skif-section"> |
| - | <h2 class="skif-section-title">⚡ Быстрые ссылки</h2> |
| - | <div class="skif-quick-links"> |
| - | <a href="/-/register" class="skif-link"> |
| - | <span class="skif-link-icon">👤</span> |
| - | <span class="skif-link-text">Регистрация</span> |
| - | </a> |
| - | <a href="/-/login" class="skif-link"> |
| - | <span class="skif-link-icon">🔐</span> |
| - | <span class="skif-link-text">Вход</span> |
| - | </a> |
| - | <a href="/-/admin" class="skif-link"> |
| - | <span class="skif-link-icon">⚙️</span> |
| - | <span class="skif-link-text">Админ-панель</span> |
| - | </a> |
| - | <a href="/-/allpages" class="skif-link"> |
| - | <span class="skif-link-icon">📄</span> |
| - | <span class="skif-link-text">Все страницы</span> |
| - | </a> |
| - | </div> |
| - | </div> |
| - | |
| - | <div class="skif-section"> |
| - | <h2 class="skif-section-title">📚 Разделы</h2> |
| - | <div class="skif-grid"> |
| - | <a href="[[Начинающим]]" class="skif-link" style="display: block; text-decoration: none;"> |
| - | <div class="skif-card"> |
| - | <div class="skif-card-title">🚀 Начинающим</div> |
| - | <div class="skif-card-desc">Основы работы с системой. Первые шаги и руководства для новичков.</div> |
| - | <div class="skif-card-meta">📖 5 страниц</div> |
| - | </div> |
| - | </a> |
| - | <a href="[[Установка]]" class="skif-link" style="display: block; text-decoration: none;"> |
| - | <div class="skif-card"> |
| - | <div class="skif-card-title">💾 Установка</div> |
| - | <div class="skif-card-desc">Инструкции по установке и настройке всех компонентов системы.</div> |
| - | <div class="skif-card-meta">⚙️ 8 страниц</div> |
| - | </div> |
| - | </a> |
| - | <a href="[[Конфигурация]]" class="skif-link" style="display: block; text-decoration: none;"> |
| - | <div class="skif-card"> |
| - | <div class="skif-card-title">🔧 Конфигурация</div> |
| - | <div class="skif-card-desc">Подробное описание всех настроек и параметров конфигурации.</div> |
| - | <div class="skif-card-meta">⚡ 12 страниц</div> |
| - | </div> |
| - | </a> |
| - | <a href="[[API]]" class="skif-link" style="display: block; text-decoration: none;"> |
| - | <div class="skif-card"> |
| - | <div class="skif-card-title">🌐 API</div> |
| - | <div class="skif-card-desc">Документация по API, примеры запросов и интеграции.</div> |
| - | <div class="skif-card-meta">🔌 6 страниц</div> |
| - | </div> |
| - | </a> |
| - | <a href="[[Траблшутинг]]" class="skif-link" style="display: block; text-decoration: none;"> |
| - | <div class="skif-card"> |
| - | <div class="skif-card-title">🔍 Траблшутинг</div> |
| - | <div class="skif-card-desc">Решение проблем и frequently asked questions.</div> |
| - | <div class="skif-card-meta">❓ 10 страниц</div> |
| - | </div> |
| - | </a> |
| - | <a href="[[Глоссарий]]" class="skif-link" style="display: block; text-decoration: none;"> |
| - | <div class="skif-card"> |
| - | <div class="skif-card-title">📖 Глоссарий</div> |
| - | <div class="skif-card-desc">Словарь терминов и сокращений, используемых в проекте.</div> |
| - | <div class="skif-card-meta">📝 15 страниц</div> |
| - | </div> |
| - | </a> |
| - | </div> |
| - | </div> |
| - | |
| - | <div class="skif-section"> |
| - | <h2 class="skif-section-title">📊 Статистика</h2> |
| - | <div class="skif-stats"> |
| - | <div class="skif-stat"> |
| - | <div class="skif-stat-value">50+</div> |
| - | <div class="skif-stat-label">Страниц</div> |
| - | </div> |
| - | <div class="skif-stat"> |
| - | <div class="skif-stat-value">6</div> |
| - | <div class="skif-stat-label">Разделов</div> |
| - | </div> |
| - | <div class="skif-stat"> |
| - | <div class="skif-stat-value">24/7</div> |
| - | <div class="skif-stat-label">Доступность</div> |
| - | </div> |
| - | </div> |
| - | </div> |
| - | |
| - | <hr class="skif-divider"> |
| - | |
| - | <div class="skif-footer"> |
| - | <p><strong>SKIF Wiki</strong> — база знаний на базе OtterWiki</p> |
| - | <p><a href="/-/register">Создать аккаунт</a> • <a href="/-/allpages">Все страницы</a> • <a href="/-/help">Помощь</a></p> |
| - | </div> |
| + | <script>window.location.href='/-/view/landing'</script> |
| /dev/null .. landing.html | |
| @@ 0,0 1,644 @@ | |
| + | <!DOCTYPE html> |
| + | <html lang="ru"> |
| + | <head> |
| + | <meta charset="UTF-8"> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| + | <title>SKIF.PRO — База знаний</title> |
| + | <meta name="description" content="SKIF Wiki — база знаний на платформе OtterWiki"> |
| + | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| + | <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| + | <script>(function(){var t=localStorage.getItem('theme');if(!t)t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.dataset.theme=t})()</script> |
| + | <style> |
| + | :root, [data-theme="light"] { |
| + | --bg-base: #f4f6fb; |
| + | --bg-raised: #ffffff; |
| + | --bg-card: #ffffff; |
| + | --bg-card-hover: #edf1fa; |
| + | --border: #dfe4ee; |
| + | --border-hover: rgba(56,142,255,0.35); |
| + | --text: #1a1f2e; |
| + | --text-dim: #5c6478; |
| + | --text-muted: #9aa2b5; |
| + | --accent: #2b7ff2; |
| + | --accent-light: #1a6ad8; |
| + | --accent-soft: rgba(56,142,255,0.08); |
| + | --accent-glow: rgba(56,142,255,0.04); |
| + | --orange: #e86a10; |
| + | --radius: 14px; |
| + | --radius-sm: 10px; |
| + | --header-bg: rgba(244,246,251,0.88); |
| + | --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); |
| + | --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.08); |
| + | --hero-glow-1: rgba(56,142,255,0.06); |
| + | --hero-glow-2: rgba(56,142,255,0.03); |
| + | --hero-grid: rgba(56,142,255,0.03); |
| + | --search-focus-shadow: 0 0 0 3px rgba(56,142,255,0.12), 0 8px 24px rgba(0,0,0,0.08); |
| + | } |
| + | |
| + | [data-theme="dark"] { |
| + | --bg-base: #090c14; |
| + | --bg-raised: #0f1320; |
| + | --bg-card: #141927; |
| + | --bg-card-hover: #191f33; |
| + | --border: #1e2640; |
| + | --border-hover: rgba(56,142,255,0.35); |
| + | --text: #e4e8f1; |
| + | --text-dim: #7c849a; |
| + | --text-muted: #4a5068; |
| + | --accent: #388eff; |
| + | --accent-light: #5ea4ff; |
| + | --accent-soft: rgba(56,142,255,0.1); |
| + | --accent-glow: rgba(56,142,255,0.06); |
| + | --header-bg: rgba(9,12,20,0.85); |
| + | --card-shadow: none; |
| + | --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.25); |
| + | --hero-glow-1: rgba(56,142,255,0.07); |
| + | --hero-glow-2: rgba(56,142,255,0.04); |
| + | --hero-grid: rgba(56,142,255,0.025); |
| + | --search-focus-shadow: 0 0 0 3px rgba(56,142,255,0.15), 0 8px 24px rgba(0,0,0,0.3); |
| + | } |
| + | |
| + | *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| + | |
| + | body { |
| + | font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif; |
| + | background: var(--bg-base); |
| + | color: var(--text); |
| + | min-height: 100vh; |
| + | -webkit-font-smoothing: antialiased; |
| + | -moz-osx-font-smoothing: grayscale; |
| + | } |
| + | |
| + | /* ═══ HEADER ═══ */ |
| + | .header { |
| + | display: flex; |
| + | align-items: center; |
| + | justify-content: space-between; |
| + | padding: 0 40px; |
| + | height: 60px; |
| + | background: var(--header-bg); |
| + | backdrop-filter: blur(16px); |
| + | -webkit-backdrop-filter: blur(16px); |
| + | border-bottom: 1px solid var(--border); |
| + | position: sticky; |
| + | top: 0; |
| + | z-index: 100; |
| + | } |
| + | .header-left { |
| + | display: flex; |
| + | align-items: center; |
| + | gap: 14px; |
| + | } |
| + | .logo-img { |
| + | height: 28px; |
| + | width: auto; |
| + | object-fit: contain; |
| + | } |
| + | .header-divider { |
| + | width: 1px; |
| + | height: 20px; |
| + | background: var(--border); |
| + | } |
| + | .header-label { |
| + | font-size: 13px; |
| + | color: var(--text-dim); |
| + | font-weight: 500; |
| + | } |
| + | .header-right { |
| + | display: flex; |
| + | align-items: center; |
| + | gap: 8px; |
| + | } |
| + | .header-link { |
| + | font-size: 13px; |
| + | font-weight: 500; |
| + | color: var(--text-dim); |
| + | text-decoration: none; |
| + | padding: 7px 14px; |
| + | border-radius: 8px; |
| + | transition: all 0.15s; |
| + | } |
| + | .header-link:hover { |
| + | color: var(--text); |
| + | background: var(--accent-soft); |
| + | } |
| + | |
| + | /* ═══ HERO ═══ */ |
| + | .hero { |
| + | position: relative; |
| + | text-align: center; |
| + | padding: 72px 40px 64px; |
| + | overflow: hidden; |
| + | } |
| + | .hero::before { |
| + | content: ''; |
| + | position: absolute; |
| + | inset: 0; |
| + | background: |
| + | radial-gradient(ellipse 60% 50% at 50% 0%, var(--hero-glow-1) 0%, transparent 70%), |
| + | radial-gradient(ellipse 40% 60% at 80% 20%, var(--hero-glow-2) 0%, transparent 60%); |
| + | pointer-events: none; |
| + | } |
| + | .hero::after { |
| + | content: ''; |
| + | position: absolute; |
| + | inset: 0; |
| + | background-image: |
| + | linear-gradient(35deg, var(--hero-grid) 1px, transparent 1px), |
| + | linear-gradient(-35deg, var(--hero-grid) 1px, transparent 1px); |
| + | background-size: 40px 40px; |
| + | mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent); |
| + | -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent); |
| + | pointer-events: none; |
| + | } |
| + | .hero-inner { |
| + | position: relative; |
| + | z-index: 1; |
| + | max-width: 640px; |
| + | margin: 0 auto; |
| + | } |
| + | .hero h1 { |
| + | font-size: 40px; |
| + | font-weight: 700; |
| + | letter-spacing: -0.8px; |
| + | line-height: 1.15; |
| + | margin-bottom: 16px; |
| + | } |
| + | .hero p { |
| + | font-size: 16px; |
| + | line-height: 1.65; |
| + | color: var(--text-dim); |
| + | max-width: 480px; |
| + | margin: 0 auto 36px; |
| + | } |
| + | |
| + | /* ═══ SEARCH ═══ */ |
| + | .search-box { |
| + | position: relative; |
| + | max-width: 520px; |
| + | margin: 0 auto; |
| + | } |
| + | .search-box svg { |
| + | position: absolute; |
| + | left: 20px; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | width: 18px; |
| + | height: 18px; |
| + | stroke: var(--text-muted); |
| + | fill: none; |
| + | stroke-width: 2; |
| + | stroke-linecap: round; |
| + | pointer-events: none; |
| + | } |
| + | .search-box input { |
| + | width: 100%; |
| + | height: 52px; |
| + | padding: 0 20px 0 52px; |
| + | background: var(--bg-card); |
| + | border: 1px solid var(--border); |
| + | border-radius: 26px; |
| + | color: var(--text); |
| + | font-size: 14px; |
| + | font-family: inherit; |
| + | outline: none; |
| + | transition: all 0.2s; |
| + | } |
| + | .search-box input::placeholder { color: var(--text-muted); } |
| + | .search-box input:focus { |
| + | border-color: var(--accent); |
| + | box-shadow: var(--search-focus-shadow); |
| + | } |
| + | .search-hint { |
| + | margin-top: 10px; |
| + | font-size: 12px; |
| + | color: var(--text-muted); |
| + | } |
| + | |
| + | /* ═══ QUICK LINKS ═══ */ |
| + | .quick-bar { |
| + | display: flex; |
| + | gap: 10px; |
| + | flex-wrap: wrap; |
| + | justify-content: center; |
| + | padding: 0 40px; |
| + | margin-bottom: 40px; |
| + | } |
| + | .quick-bar a { |
| + | display: inline-flex; |
| + | align-items: center; |
| + | gap: 7px; |
| + | padding: 9px 18px; |
| + | font-size: 13px; |
| + | font-weight: 500; |
| + | color: var(--text-dim); |
| + | background: var(--bg-card); |
| + | border: 1px solid var(--border); |
| + | border-radius: 100px; |
| + | text-decoration: none; |
| + | transition: all 0.2s; |
| + | } |
| + | .quick-bar a:hover { |
| + | color: var(--text); |
| + | border-color: var(--border-hover); |
| + | background: var(--bg-card-hover); |
| + | box-shadow: 0 0 0 3px var(--accent-glow); |
| + | } |
| + | .quick-bar a svg { |
| + | width: 14px; height: 14px; |
| + | stroke: currentColor; fill: none; |
| + | stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; |
| + | } |
| + | |
| + | /* ═══ CONTENT ═══ */ |
| + | .content { |
| + | max-width: 1120px; |
| + | margin: 0 auto; |
| + | padding: 0 40px 80px; |
| + | } |
| + | |
| + | /* ═══ SECTION LABEL ═══ */ |
| + | .section-label { |
| + | font-size: 11px; |
| + | font-weight: 600; |
| + | text-transform: uppercase; |
| + | letter-spacing: 1.8px; |
| + | color: var(--text-muted); |
| + | margin-bottom: 16px; |
| + | padding-left: 2px; |
| + | } |
| + | .section-label .planned { |
| + | color: var(--orange); |
| + | font-weight: 700; |
| + | letter-spacing: 1px; |
| + | margin-left: 6px; |
| + | } |
| + | |
| + | /* ═══ CARD GRID ═══ */ |
| + | .card-grid { |
| + | display: grid; |
| + | grid-template-columns: 1fr 1fr; |
| + | gap: 14px; |
| + | margin-bottom: 40px; |
| + | } |
| + | .card-grid.cols-3 { |
| + | grid-template-columns: 1fr 1fr 1fr; |
| + | } |
| + | |
| + | .card { |
| + | background: var(--bg-card); |
| + | border: 1px solid var(--border); |
| + | border-radius: var(--radius); |
| + | padding: 32px 28px 26px; |
| + | text-align: center; |
| + | box-shadow: var(--card-shadow); |
| + | transition: all 0.22s ease; |
| + | position: relative; |
| + | overflow: hidden; |
| + | } |
| + | .card::after { |
| + | content: ''; |
| + | position: absolute; |
| + | top: 0; left: 50%; |
| + | transform: translateX(-50%) scaleX(0); |
| + | width: 40px; height: 2.5px; |
| + | background: var(--accent); |
| + | border-radius: 0 0 3px 3px; |
| + | transition: transform 0.22s ease; |
| + | } |
| + | .card:hover { |
| + | border-color: var(--border-hover); |
| + | background: var(--bg-card-hover); |
| + | transform: translateY(-2px); |
| + | box-shadow: var(--card-hover-shadow); |
| + | } |
| + | .card:hover::after { transform: translateX(-50%) scaleX(1); } |
| + | |
| + | .card.planned { opacity: 0.55; } |
| + | .card.planned:hover { opacity: 0.75; } |
| + | |
| + | .card-icon { |
| + | width: 46px; height: 46px; |
| + | border-radius: var(--radius-sm); |
| + | background: var(--accent-soft); |
| + | display: inline-flex; |
| + | align-items: center; justify-content: center; |
| + | margin-bottom: 16px; |
| + | transition: all 0.2s; |
| + | } |
| + | .card-icon svg { |
| + | width: 21px; height: 21px; |
| + | stroke: var(--accent); fill: none; |
| + | stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; |
| + | } |
| + | .card:hover .card-icon { background: var(--accent); } |
| + | .card:hover .card-icon svg { stroke: #fff; } |
| + | |
| + | .card h3 { |
| + | font-size: 16px; |
| + | font-weight: 600; |
| + | margin-bottom: 6px; |
| + | letter-spacing: -0.1px; |
| + | } |
| + | .card p { |
| + | font-size: 13px; |
| + | line-height: 1.55; |
| + | color: var(--text-dim); |
| + | margin-bottom: 18px; |
| + | } |
| + | .card-links { |
| + | display: flex; |
| + | justify-content: center; |
| + | gap: 16px; |
| + | flex-wrap: wrap; |
| + | align-items: center; |
| + | } |
| + | .card-links a { |
| + | font-size: 12.5px; |
| + | font-weight: 500; |
| + | color: var(--accent); |
| + | text-decoration: none; |
| + | transition: color 0.15s; |
| + | } |
| + | .card-links a:hover { |
| + | color: var(--accent-light); |
| + | text-decoration: underline; |
| + | text-underline-offset: 3px; |
| + | } |
| + | .badge { |
| + | display: inline-block; |
| + | font-size: 9px; |
| + | font-weight: 700; |
| + | color: #fff; |
| + | background: var(--orange); |
| + | border-radius: 4px; |
| + | padding: 2px 6px; |
| + | letter-spacing: 0.5px; |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | /* ═══ FOOTER ═══ */ |
| + | .footer { |
| + | border-top: 1px solid var(--border); |
| + | padding: 28px 40px; |
| + | text-align: center; |
| + | font-size: 13px; |
| + | color: var(--text-muted); |
| + | } |
| + | .footer a { |
| + | color: var(--accent); |
| + | text-decoration: none; |
| + | } |
| + | .footer a:hover { text-decoration: underline; } |
| + | |
| + | /* ═══ THEME TOGGLE ═══ */ |
| + | .theme-toggle { |
| + | background: none; |
| + | border: 1px solid var(--border); |
| + | border-radius: 8px; |
| + | padding: 7px; |
| + | cursor: pointer; |
| + | display: flex; |
| + | align-items: center; |
| + | justify-content: center; |
| + | color: var(--text-dim); |
| + | transition: all 0.15s; |
| + | } |
| + | .theme-toggle:hover { |
| + | color: var(--text); |
| + | background: var(--accent-soft); |
| + | } |
| + | .theme-toggle svg { |
| + | width: 16px; |
| + | height: 16px; |
| + | stroke: currentColor; |
| + | fill: none; |
| + | stroke-width: 2; |
| + | stroke-linecap: round; |
| + | stroke-linejoin: round; |
| + | } |
| + | .theme-toggle .icon-sun { display: none; } |
| + | .theme-toggle .icon-moon { display: block; } |
| + | [data-theme="dark"] .theme-toggle .icon-sun { display: block; } |
| + | [data-theme="dark"] .theme-toggle .icon-moon { display: none; } |
| + | |
| + | /* ═══ RESPONSIVE ═══ */ |
| + | @media (max-width: 768px) { |
| + | .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; } |
| + | .hero { padding: 48px 20px 40px; } |
| + | .hero h1 { font-size: 28px; } |
| + | .content, .quick-bar { padding-left: 20px; padding-right: 20px; } |
| + | .header { padding: 0 20px; } |
| + | } |
| + | |
| + | /* ═══ ANIMATIONS ═══ */ |
| + | @keyframes fadeUp { |
| + | from { opacity: 0; transform: translateY(14px); } |
| + | to { opacity: 1; transform: translateY(0); } |
| + | } |
| + | .hero-inner { animation: fadeUp 0.5s ease-out; } |
| + | .quick-bar { animation: fadeUp 0.5s ease-out 0.05s backwards; } |
| + | .card { animation: fadeUp 0.45s ease-out backwards; } |
| + | .card:nth-child(1) { animation-delay: 0.08s; } |
| + | .card:nth-child(2) { animation-delay: 0.12s; } |
| + | .card:nth-child(3) { animation-delay: 0.16s; } |
| + | .card:nth-child(4) { animation-delay: 0.20s; } |
| + | .card:nth-child(5) { animation-delay: 0.24s; } |
| + | .card:nth-child(6) { animation-delay: 0.28s; } |
| + | </style> |
| + | </head> |
| + | <body> |
| + | |
| + | <!-- ═══════ HEADER ═══════ --> |
| + | <header class="header"> |
| + | <div class="header-left"> |
| + | <img src="/logo.webp" alt="SKIF.PRO" class="logo-img"> |
| + | <div class="header-divider"></div> |
| + | <span class="header-label">SKIF Wiki</span> |
| + | </div> |
| + | <div class="header-right"> |
| + | <a class="header-link" href="https://skif.pro" target="_blank">Платформа</a> |
| + | <a class="header-link" href="/-/view/home">Wiki</a> |
| + | <button class="theme-toggle" id="themeToggle" aria-label="Переключить тему"> |
| + | <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> |
| + | <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg> |
| + | </button> |
| + | </div> |
| + | </header> |
| + | |
| + | <!-- ═══════ HERO ═══════ --> |
| + | <section class="hero"> |
| + | <div class="hero-inner"> |
| + | <h1>SKIF Wiki</h1> |
| + | <p>Добро пожаловать в базу знаний SKIF.PRO. Документация, руководства и инструкции на платформе OtterWiki.</p> |
| + | <div class="search-box"> |
| + | <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> |
| + | <input type="text" id="searchInput" placeholder="Поиск по wiki..." autocomplete="off"> |
| + | </div> |
| + | </div> |
| + | </section> |
| + | |
| + | <!-- ═══════ QUICK LINKS ═══════ --> |
| + | <div class="quick-bar"> |
| + | <a href="/-/view/home"> |
| + | <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| + | Главная страница Wiki |
| + | </a> |
| + | <a href="/-/allpages"> |
| + | <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> |
| + | Все страницы |
| + | </a> |
| + | <a href="/-/register"> |
| + | <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg> |
| + | Регистрация |
| + | </a> |
| + | <a href="/-/admin" style="color: var(--orange);"> |
| + | <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8.82a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> |
| + | Админ-панель |
| + | </a> |
| + | </div> |
| + | |
| + | <!-- ═══════ CARDS ═══════ --> |
| + | <div class="content"> |
| + | |
| + | <!-- ── Разделы Wiki ── --> |
| + | <div class="section-label">Разделы базы знаний</div> |
| + | <div class="card-grid"> |
| + | |
| + | <a href="/-/view/Начинающим" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| + | </div> |
| + | <h3>Начинающим</h3> |
| + | <p>Основы работы с системой. Первые шаги и руководства для новичков.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Установка" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> |
| + | </div> |
| + | <h3>Установка</h3> |
| + | <p>Инструкции по установке и настройке всех компонентов системы.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Конфигурация" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8.82a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> |
| + | </div> |
| + | <h3>Конфигурация</h3> |
| + | <p>Подробное описание всех настроек и параметров конфигурации.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/API" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> |
| + | </div> |
| + | <h3>API</h3> |
| + | <p>Документация по API, примеры запросов и интеграции.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Траблшутинг" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> |
| + | </div> |
| + | <h3>Траблшутинг</h3> |
| + | <p>Решение проблем и frequently asked questions.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Глоссарий" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg> |
| + | </div> |
| + | <h3>Глоссарий</h3> |
| + | <p>Словарь терминов и сокращений, используемых в проекте.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | </div> |
| + | |
| + | <!-- ── Быстрый старт ── --> |
| + | <div class="section-label">Быстрый старт</div> |
| + | <div class="card-grid cols-3"> |
| + | |
| + | <a href="/-/register" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg> |
| + | </div> |
| + | <h3>Регистрация</h3> |
| + | <p>Создайте аккаунт для редактирования страниц.</p> |
| + | <div class="card-links">Зарегистрироваться →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Начинающим" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> |
| + | </div> |
| + | <h3>Руководства</h3> |
| + | <p>Пошаговые инструкции для начинающих.</p> |
| + | <div class="card-links">Читать →</div> |
| + | </a> |
| + | |
| + | <a href="/-/allpages" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> |
| + | </div> |
| + | <h3>Все страницы</h3> |
| + | <p>Просмотр всех страниц в базе знаний.</p> |
| + | <div class="card-links">Открыть →</div> |
| + | </a> |
| + | |
| + | </div> |
| + | |
| + | </div> |
| + | |
| + | <!-- ═══════ FOOTER ═══════ --> |
| + | <footer class="footer"> |
| + | © 2025 SKIF.PRO · <a href="https://skif.pro" target="_blank">Платформа</a> · <a href="/-/view/home">Wiki Home</a> |
| + | </footer> |
| + | |
| + | <!-- ═══════ SEARCH → OTTERWIKI ═══════ --> |
| + | <script> |
| + | const searchInput = document.getElementById('searchInput'); |
| + | |
| + | // Redirect search to OtterWiki search |
| + | searchInput.addEventListener('keydown', (e) => { |
| + | if (e.key === 'Enter') { |
| + | const q = searchInput.value.trim(); |
| + | if (q) { |
| + | window.location.href = '/-/search?q=' + encodeURIComponent(q); |
| + | } |
| + | } |
| + | }); |
| + | |
| + | // Cmd/Ctrl+K focus |
| + | document.addEventListener('keydown', (e) => { |
| + | if ((e.metaKey || e.ctrlKey) && e.key === 'k') { |
| + | e.preventDefault(); |
| + | searchInput.focus(); |
| + | searchInput.select(); |
| + | } |
| + | }); |
| + | |
| + | // Theme toggle |
| + | document.getElementById('themeToggle').addEventListener('click', () => { |
| + | const current = document.documentElement.dataset.theme; |
| + | const next = current === 'dark' ? 'light' : 'dark'; |
| + | document.documentElement.dataset.theme = next; |
| + | localStorage.setItem('theme', next); |
| + | }); |
| + | |
| + | // Cross-tab sync |
| + | window.addEventListener('storage', (e) => { |
| + | if (e.key === 'theme' && e.newValue) { |
| + | document.documentElement.dataset.theme = e.newValue; |
| + | } |
| + | }); |
| + | </script> |
| + | |
| + | </body> |
| + | </html> |
| /dev/null .. landing.md | |
| @@ 0,0 1,644 @@ | |
| + | <!DOCTYPE html> |
| + | <html lang="ru"> |
| + | <head> |
| + | <meta charset="UTF-8"> |
| + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| + | <title>SKIF.PRO — База знаний</title> |
| + | <meta name="description" content="SKIF Wiki — база знаний на платформе OtterWiki"> |
| + | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| + | <link href="https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap" rel="stylesheet"> |
| + | <script>(function(){var t=localStorage.getItem('theme');if(!t)t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';document.documentElement.dataset.theme=t})()</script> |
| + | <style> |
| + | :root, [data-theme="light"] { |
| + | --bg-base: #f4f6fb; |
| + | --bg-raised: #ffffff; |
| + | --bg-card: #ffffff; |
| + | --bg-card-hover: #edf1fa; |
| + | --border: #dfe4ee; |
| + | --border-hover: rgba(56,142,255,0.35); |
| + | --text: #1a1f2e; |
| + | --text-dim: #5c6478; |
| + | --text-muted: #9aa2b5; |
| + | --accent: #2b7ff2; |
| + | --accent-light: #1a6ad8; |
| + | --accent-soft: rgba(56,142,255,0.08); |
| + | --accent-glow: rgba(56,142,255,0.04); |
| + | --orange: #e86a10; |
| + | --radius: 14px; |
| + | --radius-sm: 10px; |
| + | --header-bg: rgba(244,246,251,0.88); |
| + | --card-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06); |
| + | --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.08); |
| + | --hero-glow-1: rgba(56,142,255,0.06); |
| + | --hero-glow-2: rgba(56,142,255,0.03); |
| + | --hero-grid: rgba(56,142,255,0.03); |
| + | --search-focus-shadow: 0 0 0 3px rgba(56,142,255,0.12), 0 8px 24px rgba(0,0,0,0.08); |
| + | } |
| + | |
| + | [data-theme="dark"] { |
| + | --bg-base: #090c14; |
| + | --bg-raised: #0f1320; |
| + | --bg-card: #141927; |
| + | --bg-card-hover: #191f33; |
| + | --border: #1e2640; |
| + | --border-hover: rgba(56,142,255,0.35); |
| + | --text: #e4e8f1; |
| + | --text-dim: #7c849a; |
| + | --text-muted: #4a5068; |
| + | --accent: #388eff; |
| + | --accent-light: #5ea4ff; |
| + | --accent-soft: rgba(56,142,255,0.1); |
| + | --accent-glow: rgba(56,142,255,0.06); |
| + | --header-bg: rgba(9,12,20,0.85); |
| + | --card-shadow: none; |
| + | --card-hover-shadow: 0 8px 28px rgba(0,0,0,0.25); |
| + | --hero-glow-1: rgba(56,142,255,0.07); |
| + | --hero-glow-2: rgba(56,142,255,0.04); |
| + | --hero-grid: rgba(56,142,255,0.025); |
| + | --search-focus-shadow: 0 0 0 3px rgba(56,142,255,0.15), 0 8px 24px rgba(0,0,0,0.3); |
| + | } |
| + | |
| + | *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
| + | |
| + | body { |
| + | font-family: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif; |
| + | background: var(--bg-base); |
| + | color: var(--text); |
| + | min-height: 100vh; |
| + | -webkit-font-smoothing: antialiased; |
| + | -moz-osx-font-smoothing: grayscale; |
| + | } |
| + | |
| + | /* ═══ HEADER ═══ */ |
| + | .header { |
| + | display: flex; |
| + | align-items: center; |
| + | justify-content: space-between; |
| + | padding: 0 40px; |
| + | height: 60px; |
| + | background: var(--header-bg); |
| + | backdrop-filter: blur(16px); |
| + | -webkit-backdrop-filter: blur(16px); |
| + | border-bottom: 1px solid var(--border); |
| + | position: sticky; |
| + | top: 0; |
| + | z-index: 100; |
| + | } |
| + | .header-left { |
| + | display: flex; |
| + | align-items: center; |
| + | gap: 14px; |
| + | } |
| + | .logo-img { |
| + | height: 28px; |
| + | width: auto; |
| + | object-fit: contain; |
| + | } |
| + | .header-divider { |
| + | width: 1px; |
| + | height: 20px; |
| + | background: var(--border); |
| + | } |
| + | .header-label { |
| + | font-size: 13px; |
| + | color: var(--text-dim); |
| + | font-weight: 500; |
| + | } |
| + | .header-right { |
| + | display: flex; |
| + | align-items: center; |
| + | gap: 8px; |
| + | } |
| + | .header-link { |
| + | font-size: 13px; |
| + | font-weight: 500; |
| + | color: var(--text-dim); |
| + | text-decoration: none; |
| + | padding: 7px 14px; |
| + | border-radius: 8px; |
| + | transition: all 0.15s; |
| + | } |
| + | .header-link:hover { |
| + | color: var(--text); |
| + | background: var(--accent-soft); |
| + | } |
| + | |
| + | /* ═══ HERO ═══ */ |
| + | .hero { |
| + | position: relative; |
| + | text-align: center; |
| + | padding: 72px 40px 64px; |
| + | overflow: hidden; |
| + | } |
| + | .hero::before { |
| + | content: ''; |
| + | position: absolute; |
| + | inset: 0; |
| + | background: |
| + | radial-gradient(ellipse 60% 50% at 50% 0%, var(--hero-glow-1) 0%, transparent 70%), |
| + | radial-gradient(ellipse 40% 60% at 80% 20%, var(--hero-glow-2) 0%, transparent 60%); |
| + | pointer-events: none; |
| + | } |
| + | .hero::after { |
| + | content: ''; |
| + | position: absolute; |
| + | inset: 0; |
| + | background-image: |
| + | linear-gradient(35deg, var(--hero-grid) 1px, transparent 1px), |
| + | linear-gradient(-35deg, var(--hero-grid) 1px, transparent 1px); |
| + | background-size: 40px 40px; |
| + | mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent); |
| + | -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent); |
| + | pointer-events: none; |
| + | } |
| + | .hero-inner { |
| + | position: relative; |
| + | z-index: 1; |
| + | max-width: 640px; |
| + | margin: 0 auto; |
| + | } |
| + | .hero h1 { |
| + | font-size: 40px; |
| + | font-weight: 700; |
| + | letter-spacing: -0.8px; |
| + | line-height: 1.15; |
| + | margin-bottom: 16px; |
| + | } |
| + | .hero p { |
| + | font-size: 16px; |
| + | line-height: 1.65; |
| + | color: var(--text-dim); |
| + | max-width: 480px; |
| + | margin: 0 auto 36px; |
| + | } |
| + | |
| + | /* ═══ SEARCH ═══ */ |
| + | .search-box { |
| + | position: relative; |
| + | max-width: 520px; |
| + | margin: 0 auto; |
| + | } |
| + | .search-box svg { |
| + | position: absolute; |
| + | left: 20px; |
| + | top: 50%; |
| + | transform: translateY(-50%); |
| + | width: 18px; |
| + | height: 18px; |
| + | stroke: var(--text-muted); |
| + | fill: none; |
| + | stroke-width: 2; |
| + | stroke-linecap: round; |
| + | pointer-events: none; |
| + | } |
| + | .search-box input { |
| + | width: 100%; |
| + | height: 52px; |
| + | padding: 0 20px 0 52px; |
| + | background: var(--bg-card); |
| + | border: 1px solid var(--border); |
| + | border-radius: 26px; |
| + | color: var(--text); |
| + | font-size: 14px; |
| + | font-family: inherit; |
| + | outline: none; |
| + | transition: all 0.2s; |
| + | } |
| + | .search-box input::placeholder { color: var(--text-muted); } |
| + | .search-box input:focus { |
| + | border-color: var(--accent); |
| + | box-shadow: var(--search-focus-shadow); |
| + | } |
| + | .search-hint { |
| + | margin-top: 10px; |
| + | font-size: 12px; |
| + | color: var(--text-muted); |
| + | } |
| + | |
| + | /* ═══ QUICK LINKS ═══ */ |
| + | .quick-bar { |
| + | display: flex; |
| + | gap: 10px; |
| + | flex-wrap: wrap; |
| + | justify-content: center; |
| + | padding: 0 40px; |
| + | margin-bottom: 40px; |
| + | } |
| + | .quick-bar a { |
| + | display: inline-flex; |
| + | align-items: center; |
| + | gap: 7px; |
| + | padding: 9px 18px; |
| + | font-size: 13px; |
| + | font-weight: 500; |
| + | color: var(--text-dim); |
| + | background: var(--bg-card); |
| + | border: 1px solid var(--border); |
| + | border-radius: 100px; |
| + | text-decoration: none; |
| + | transition: all 0.2s; |
| + | } |
| + | .quick-bar a:hover { |
| + | color: var(--text); |
| + | border-color: var(--border-hover); |
| + | background: var(--bg-card-hover); |
| + | box-shadow: 0 0 0 3px var(--accent-glow); |
| + | } |
| + | .quick-bar a svg { |
| + | width: 14px; height: 14px; |
| + | stroke: currentColor; fill: none; |
| + | stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; |
| + | } |
| + | |
| + | /* ═══ CONTENT ═══ */ |
| + | .content { |
| + | max-width: 1120px; |
| + | margin: 0 auto; |
| + | padding: 0 40px 80px; |
| + | } |
| + | |
| + | /* ═══ SECTION LABEL ═══ */ |
| + | .section-label { |
| + | font-size: 11px; |
| + | font-weight: 600; |
| + | text-transform: uppercase; |
| + | letter-spacing: 1.8px; |
| + | color: var(--text-muted); |
| + | margin-bottom: 16px; |
| + | padding-left: 2px; |
| + | } |
| + | .section-label .planned { |
| + | color: var(--orange); |
| + | font-weight: 700; |
| + | letter-spacing: 1px; |
| + | margin-left: 6px; |
| + | } |
| + | |
| + | /* ═══ CARD GRID ═══ */ |
| + | .card-grid { |
| + | display: grid; |
| + | grid-template-columns: 1fr 1fr; |
| + | gap: 14px; |
| + | margin-bottom: 40px; |
| + | } |
| + | .card-grid.cols-3 { |
| + | grid-template-columns: 1fr 1fr 1fr; |
| + | } |
| + | |
| + | .card { |
| + | background: var(--bg-card); |
| + | border: 1px solid var(--border); |
| + | border-radius: var(--radius); |
| + | padding: 32px 28px 26px; |
| + | text-align: center; |
| + | box-shadow: var(--card-shadow); |
| + | transition: all 0.22s ease; |
| + | position: relative; |
| + | overflow: hidden; |
| + | } |
| + | .card::after { |
| + | content: ''; |
| + | position: absolute; |
| + | top: 0; left: 50%; |
| + | transform: translateX(-50%) scaleX(0); |
| + | width: 40px; height: 2.5px; |
| + | background: var(--accent); |
| + | border-radius: 0 0 3px 3px; |
| + | transition: transform 0.22s ease; |
| + | } |
| + | .card:hover { |
| + | border-color: var(--border-hover); |
| + | background: var(--bg-card-hover); |
| + | transform: translateY(-2px); |
| + | box-shadow: var(--card-hover-shadow); |
| + | } |
| + | .card:hover::after { transform: translateX(-50%) scaleX(1); } |
| + | |
| + | .card.planned { opacity: 0.55; } |
| + | .card.planned:hover { opacity: 0.75; } |
| + | |
| + | .card-icon { |
| + | width: 46px; height: 46px; |
| + | border-radius: var(--radius-sm); |
| + | background: var(--accent-soft); |
| + | display: inline-flex; |
| + | align-items: center; justify-content: center; |
| + | margin-bottom: 16px; |
| + | transition: all 0.2s; |
| + | } |
| + | .card-icon svg { |
| + | width: 21px; height: 21px; |
| + | stroke: var(--accent); fill: none; |
| + | stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; |
| + | } |
| + | .card:hover .card-icon { background: var(--accent); } |
| + | .card:hover .card-icon svg { stroke: #fff; } |
| + | |
| + | .card h3 { |
| + | font-size: 16px; |
| + | font-weight: 600; |
| + | margin-bottom: 6px; |
| + | letter-spacing: -0.1px; |
| + | } |
| + | .card p { |
| + | font-size: 13px; |
| + | line-height: 1.55; |
| + | color: var(--text-dim); |
| + | margin-bottom: 18px; |
| + | } |
| + | .card-links { |
| + | display: flex; |
| + | justify-content: center; |
| + | gap: 16px; |
| + | flex-wrap: wrap; |
| + | align-items: center; |
| + | } |
| + | .card-links a { |
| + | font-size: 12.5px; |
| + | font-weight: 500; |
| + | color: var(--accent); |
| + | text-decoration: none; |
| + | transition: color 0.15s; |
| + | } |
| + | .card-links a:hover { |
| + | color: var(--accent-light); |
| + | text-decoration: underline; |
| + | text-underline-offset: 3px; |
| + | } |
| + | .badge { |
| + | display: inline-block; |
| + | font-size: 9px; |
| + | font-weight: 700; |
| + | color: #fff; |
| + | background: var(--orange); |
| + | border-radius: 4px; |
| + | padding: 2px 6px; |
| + | letter-spacing: 0.5px; |
| + | vertical-align: middle; |
| + | } |
| + | |
| + | /* ═══ FOOTER ═══ */ |
| + | .footer { |
| + | border-top: 1px solid var(--border); |
| + | padding: 28px 40px; |
| + | text-align: center; |
| + | font-size: 13px; |
| + | color: var(--text-muted); |
| + | } |
| + | .footer a { |
| + | color: var(--accent); |
| + | text-decoration: none; |
| + | } |
| + | .footer a:hover { text-decoration: underline; } |
| + | |
| + | /* ═══ THEME TOGGLE ═══ */ |
| + | .theme-toggle { |
| + | background: none; |
| + | border: 1px solid var(--border); |
| + | border-radius: 8px; |
| + | padding: 7px; |
| + | cursor: pointer; |
| + | display: flex; |
| + | align-items: center; |
| + | justify-content: center; |
| + | color: var(--text-dim); |
| + | transition: all 0.15s; |
| + | } |
| + | .theme-toggle:hover { |
| + | color: var(--text); |
| + | background: var(--accent-soft); |
| + | } |
| + | .theme-toggle svg { |
| + | width: 16px; |
| + | height: 16px; |
| + | stroke: currentColor; |
| + | fill: none; |
| + | stroke-width: 2; |
| + | stroke-linecap: round; |
| + | stroke-linejoin: round; |
| + | } |
| + | .theme-toggle .icon-sun { display: none; } |
| + | .theme-toggle .icon-moon { display: block; } |
| + | [data-theme="dark"] .theme-toggle .icon-sun { display: block; } |
| + | [data-theme="dark"] .theme-toggle .icon-moon { display: none; } |
| + | |
| + | /* ═══ RESPONSIVE ═══ */ |
| + | @media (max-width: 768px) { |
| + | .card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; } |
| + | .hero { padding: 48px 20px 40px; } |
| + | .hero h1 { font-size: 28px; } |
| + | .content, .quick-bar { padding-left: 20px; padding-right: 20px; } |
| + | .header { padding: 0 20px; } |
| + | } |
| + | |
| + | /* ═══ ANIMATIONS ═══ */ |
| + | @keyframes fadeUp { |
| + | from { opacity: 0; transform: translateY(14px); } |
| + | to { opacity: 1; transform: translateY(0); } |
| + | } |
| + | .hero-inner { animation: fadeUp 0.5s ease-out; } |
| + | .quick-bar { animation: fadeUp 0.5s ease-out 0.05s backwards; } |
| + | .card { animation: fadeUp 0.45s ease-out backwards; } |
| + | .card:nth-child(1) { animation-delay: 0.08s; } |
| + | .card:nth-child(2) { animation-delay: 0.12s; } |
| + | .card:nth-child(3) { animation-delay: 0.16s; } |
| + | .card:nth-child(4) { animation-delay: 0.20s; } |
| + | .card:nth-child(5) { animation-delay: 0.24s; } |
| + | .card:nth-child(6) { animation-delay: 0.28s; } |
| + | </style> |
| + | </head> |
| + | <body> |
| + | |
| + | <!-- ═══════ HEADER ═══════ --> |
| + | <header class="header"> |
| + | <div class="header-left"> |
| + | <img src="/logo.webp" alt="SKIF.PRO" class="logo-img"> |
| + | <div class="header-divider"></div> |
| + | <span class="header-label">SKIF Wiki</span> |
| + | </div> |
| + | <div class="header-right"> |
| + | <a class="header-link" href="https://skif.pro" target="_blank">Платформа</a> |
| + | <a class="header-link" href="/-/view/home">Wiki</a> |
| + | <button class="theme-toggle" id="themeToggle" aria-label="Переключить тему"> |
| + | <svg class="icon-moon" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg> |
| + | <svg class="icon-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg> |
| + | </button> |
| + | </div> |
| + | </header> |
| + | |
| + | <!-- ═══════ HERO ═══════ --> |
| + | <section class="hero"> |
| + | <div class="hero-inner"> |
| + | <h1>SKIF Wiki</h1> |
| + | <p>Добро пожаловать в базу знаний SKIF.PRO. Документация, руководства и инструкции на платформе OtterWiki.</p> |
| + | <div class="search-box"> |
| + | <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> |
| + | <input type="text" id="searchInput" placeholder="Поиск по wiki..." autocomplete="off"> |
| + | </div> |
| + | </div> |
| + | </section> |
| + | |
| + | <!-- ═══════ QUICK LINKS ═══════ --> |
| + | <div class="quick-bar"> |
| + | <a href="/-/view/home"> |
| + | <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| + | Главная страница Wiki |
| + | </a> |
| + | <a href="/-/allpages"> |
| + | <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> |
| + | Все страницы |
| + | </a> |
| + | <a href="/-/register"> |
| + | <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg> |
| + | Регистрация |
| + | </a> |
| + | <a href="/-/admin" style="color: var(--orange);"> |
| + | <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8.82a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> |
| + | Админ-панель |
| + | </a> |
| + | </div> |
| + | |
| + | <!-- ═══════ CARDS ═══════ --> |
| + | <div class="content"> |
| + | |
| + | <!-- ── Разделы Wiki ── --> |
| + | <div class="section-label">Разделы базы знаний</div> |
| + | <div class="card-grid"> |
| + | |
| + | <a href="/-/view/Начинающим" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg> |
| + | </div> |
| + | <h3>Начинающим</h3> |
| + | <p>Основы работы с системой. Первые шаги и руководства для новичков.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Установка" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg> |
| + | </div> |
| + | <h3>Установка</h3> |
| + | <p>Инструкции по установке и настройке всех компонентов системы.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Конфигурация" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 8.82a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg> |
| + | </div> |
| + | <h3>Конфигурация</h3> |
| + | <p>Подробное описание всех настроек и параметров конфигурации.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/API" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> |
| + | </div> |
| + | <h3>API</h3> |
| + | <p>Документация по API, примеры запросов и интеграции.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Траблшутинг" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg> |
| + | </div> |
| + | <h3>Траблшутинг</h3> |
| + | <p>Решение проблем и frequently asked questions.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Глоссарий" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg> |
| + | </div> |
| + | <h3>Глоссарий</h3> |
| + | <p>Словарь терминов и сокращений, используемых в проекте.</p> |
| + | <div class="card-links">Открыть раздел →</div> |
| + | </a> |
| + | |
| + | </div> |
| + | |
| + | <!-- ── Быстрый старт ── --> |
| + | <div class="section-label">Быстрый старт</div> |
| + | <div class="card-grid cols-3"> |
| + | |
| + | <a href="/-/register" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg> |
| + | </div> |
| + | <h3>Регистрация</h3> |
| + | <p>Создайте аккаунт для редактирования страниц.</p> |
| + | <div class="card-links">Зарегистрироваться →</div> |
| + | </a> |
| + | |
| + | <a href="/-/view/Начинающим" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg> |
| + | </div> |
| + | <h3>Руководства</h3> |
| + | <p>Пошаговые инструкции для начинающих.</p> |
| + | <div class="card-links">Читать →</div> |
| + | </a> |
| + | |
| + | <a href="/-/allpages" class="card" style="text-decoration: none; color: inherit;"> |
| + | <div class="card-icon"> |
| + | <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg> |
| + | </div> |
| + | <h3>Все страницы</h3> |
| + | <p>Просмотр всех страниц в базе знаний.</p> |
| + | <div class="card-links">Открыть →</div> |
| + | </a> |
| + | |
| + | </div> |
| + | |
| + | </div> |
| + | |
| + | <!-- ═══════ FOOTER ═══════ --> |
| + | <footer class="footer"> |
| + | © 2025 SKIF.PRO · <a href="https://skif.pro" target="_blank">Платформа</a> · <a href="/-/view/home">Wiki Home</a> |
| + | </footer> |
| + | |
| + | <!-- ═══════ SEARCH → OTTERWIKI ═══════ --> |
| + | <script> |
| + | const searchInput = document.getElementById('searchInput'); |
| + | |
| + | // Redirect search to OtterWiki search |
| + | searchInput.addEventListener('keydown', (e) => { |
| + | if (e.key === 'Enter') { |
| + | const q = searchInput.value.trim(); |
| + | if (q) { |
| + | window.location.href = '/-/search?q=' + encodeURIComponent(q); |
| + | } |
| + | } |
| + | }); |
| + | |
| + | // Cmd/Ctrl+K focus |
| + | document.addEventListener('keydown', (e) => { |
| + | if ((e.metaKey || e.ctrlKey) && e.key === 'k') { |
| + | e.preventDefault(); |
| + | searchInput.focus(); |
| + | searchInput.select(); |
| + | } |
| + | }); |
| + | |
| + | // Theme toggle |
| + | document.getElementById('themeToggle').addEventListener('click', () => { |
| + | const current = document.documentElement.dataset.theme; |
| + | const next = current === 'dark' ? 'light' : 'dark'; |
| + | document.documentElement.dataset.theme = next; |
| + | localStorage.setItem('theme', next); |
| + | }); |
| + | |
| + | // Cross-tab sync |
| + | window.addEventListener('storage', (e) => { |
| + | if (e.key === 'theme' && e.newValue) { |
| + | document.documentElement.dataset.theme = e.newValue; |
| + | } |
| + | }); |
| + | </script> |
| + | |
| + | </body> |
| + | </html> |