Landing - blame (82ece1) – Центр документации

Blame

82ece1	Admin	2026-02-18 13:13:39
feat: add landing page as entry point

<!DOCTYPE html>

<head>

<title>SKIF.PRO — База знаний</title>

<meta name="description" content="SKIF Wiki — база знаний на платформе OtterWiki">

<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;

100

background: var(--border);

101

}

102

.header-label {

103

font-size: 13px;

104

color: var(--text-dim);

105

font-weight: 500;

106

}

107

.header-right {

108

display: flex;

109

align-items: center;

110

gap: 8px;

111

}

112

.header-link {

113

font-size: 13px;

114

font-weight: 500;

115

color: var(--text-dim);

116

text-decoration: none;

117

padding: 7px 14px;

118

border-radius: 8px;

119

transition: all 0.15s;

120

}

121

.header-link:hover {

122

color: var(--text);

123

background: var(--accent-soft);

124

}

125

126

/* ═══ HERO ═══ */

127

.hero {

128

position: relative;

129

text-align: center;

130

padding: 72px 40px 64px;

131

overflow: hidden;

132

}

133

.hero::before {

134

content: '';

135

position: absolute;

136

inset: 0;

137

background:

138

      radial-gradient(ellipse 60% 50% at 50% 0%, var(--hero-glow-1) 0%, transparent 70%),

139

      radial-gradient(ellipse 40% 60% at 80% 20%, var(--hero-glow-2) 0%, transparent 60%);

140

pointer-events: none;

141

}

142

.hero::after {

143

content: '';

144

position: absolute;

145

inset: 0;

146

background-image:

147

linear-gradient(35deg, var(--hero-grid) 1px, transparent 1px),

148

linear-gradient(-35deg, var(--hero-grid) 1px, transparent 1px);

149

background-size: 40px 40px;

150

mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent);

151

    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, black, transparent);

152

pointer-events: none;

153

}

154

.hero-inner {

155

position: relative;

156

z-index: 1;

157

max-width: 640px;

158

margin: 0 auto;

159

}

160

.hero h1 {

161

font-size: 40px;

162

font-weight: 700;

163

letter-spacing: -0.8px;

164

line-height: 1.15;

165

margin-bottom: 16px;

166

}

167

.hero p {

168

font-size: 16px;

169

line-height: 1.65;

170

color: var(--text-dim);

171

max-width: 480px;

172

margin: 0 auto 36px;

173

}

174

175

/* ═══ SEARCH ═══ */

176

.search-box {

177

position: relative;

178

max-width: 520px;

179

margin: 0 auto;

180

}

181

.search-box svg {

182

position: absolute;

183

left: 20px;

184

top: 50%;

185

transform: translateY(-50%);

186

width: 18px;

187

height: 18px;

188

stroke: var(--text-muted);

189

fill: none;

190

stroke-width: 2;

191

stroke-linecap: round;

192

pointer-events: none;

193

}

194

.search-box input {

195

width: 100%;

196

height: 52px;

197

padding: 0 20px 0 52px;

198

background: var(--bg-card);

199

border: 1px solid var(--border);

200

border-radius: 26px;

201

color: var(--text);

202

font-size: 14px;

203

font-family: inherit;

204

outline: none;

205

transition: all 0.2s;

206

}

207

.search-box input::placeholder { color: var(--text-muted); }

208

.search-box input:focus {

209

border-color: var(--accent);

210

box-shadow: var(--search-focus-shadow);

211

}

212

.search-hint {

213

margin-top: 10px;

214

font-size: 12px;

215

color: var(--text-muted);

216

}

217

218

/* ═══ QUICK LINKS ═══ */

219

.quick-bar {

220

display: flex;

221

gap: 10px;

222

flex-wrap: wrap;

223

justify-content: center;

224

padding: 0 40px;

225

margin-bottom: 40px;

226

}

227

.quick-bar a {

228

display: inline-flex;

229

align-items: center;

230

gap: 7px;

231

padding: 9px 18px;

232

font-size: 13px;

233

font-weight: 500;

234

color: var(--text-dim);

235

background: var(--bg-card);

236

border: 1px solid var(--border);

237

border-radius: 100px;

238

text-decoration: none;

239

transition: all 0.2s;

240

}

241

.quick-bar a:hover {

242

color: var(--text);

243

border-color: var(--border-hover);

244

background: var(--bg-card-hover);

245

box-shadow: 0 0 0 3px var(--accent-glow);

246

}

247

.quick-bar a svg {

248

width: 14px; height: 14px;

249

stroke: currentColor; fill: none;

250

stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;

251

}

252

253

/* ═══ CONTENT ═══ */

254

.content {

255

max-width: 1120px;

256

margin: 0 auto;

257

padding: 0 40px 80px;

258

}

259

260

/* ═══ SECTION LABEL ═══ */

261

.section-label {

262

font-size: 11px;

263

font-weight: 600;

264

text-transform: uppercase;

265

letter-spacing: 1.8px;

266

color: var(--text-muted);

267

margin-bottom: 16px;

268

padding-left: 2px;

269

}

270

.section-label .planned {

271

color: var(--orange);

272

font-weight: 700;

273

letter-spacing: 1px;

274

margin-left: 6px;

275

}

276

277

/* ═══ CARD GRID ═══ */

278

.card-grid {

279

display: grid;

280

grid-template-columns: 1fr 1fr;

281

gap: 14px;

282

margin-bottom: 40px;

283

}

284

.card-grid.cols-3 {

285

grid-template-columns: 1fr 1fr 1fr;

286

}

287

288

.card {

289

background: var(--bg-card);

290

border: 1px solid var(--border);

291

border-radius: var(--radius);

292

padding: 32px 28px 26px;

293

text-align: center;

294

box-shadow: var(--card-shadow);

295

transition: all 0.22s ease;

296

position: relative;

297

overflow: hidden;

298

}

299

.card::after {

300

content: '';

301

position: absolute;

302

top: 0; left: 50%;

303

transform: translateX(-50%) scaleX(0);

304

width: 40px; height: 2.5px;

305

background: var(--accent);

306

border-radius: 0 0 3px 3px;

307

transition: transform 0.22s ease;

308

}

309

.card:hover {

310

border-color: var(--border-hover);

311

background: var(--bg-card-hover);

312

transform: translateY(-2px);

313

box-shadow: var(--card-hover-shadow);

314

}

315

.card:hover::after { transform: translateX(-50%) scaleX(1); }

316

317

.card.planned { opacity: 0.55; }

318

.card.planned:hover { opacity: 0.75; }

319

320

.card-icon {

321

width: 46px; height: 46px;

322

border-radius: var(--radius-sm);

323

background: var(--accent-soft);

324

display: inline-flex;

325

align-items: center; justify-content: center;

326

margin-bottom: 16px;

327

transition: all 0.2s;

328

}

329

.card-icon svg {

330

width: 21px; height: 21px;

331

stroke: var(--accent); fill: none;

332

stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;

333

}

334

.card:hover .card-icon { background: var(--accent); }

335

.card:hover .card-icon svg { stroke: #fff; }

336

337

.card h3 {

338

font-size: 16px;

339

font-weight: 600;

340

margin-bottom: 6px;

341

letter-spacing: -0.1px;

342

}

343

.card p {

344

font-size: 13px;

345

line-height: 1.55;

346

color: var(--text-dim);

347

margin-bottom: 18px;

348

}

349

.card-links {

350

display: flex;

351

justify-content: center;

352

gap: 16px;

353

flex-wrap: wrap;

354

align-items: center;

355

}

356

.card-links a {

357

font-size: 12.5px;

358

font-weight: 500;

359

color: var(--accent);

360

text-decoration: none;

361

transition: color 0.15s;

362

}

363

.card-links a:hover {

364

color: var(--accent-light);

365

text-decoration: underline;

366

text-underline-offset: 3px;

367

}

368

.badge {

369

display: inline-block;

370

font-size: 9px;

371

font-weight: 700;

372

color: #fff;

373

background: var(--orange);

374

border-radius: 4px;

375

padding: 2px 6px;

376

letter-spacing: 0.5px;

377

vertical-align: middle;

378

}

379

380

/* ═══ FOOTER ═══ */

381

.footer {

382

border-top: 1px solid var(--border);

383

padding: 28px 40px;

384

text-align: center;

385

font-size: 13px;

386

color: var(--text-muted);

387

}

388

.footer a {

389

color: var(--accent);

390

text-decoration: none;

391

}

392

.footer a:hover { text-decoration: underline; }

393

394

/* ═══ THEME TOGGLE ═══ */

395

.theme-toggle {

396

background: none;

397

border: 1px solid var(--border);

398

border-radius: 8px;

399

padding: 7px;

400

cursor: pointer;

401

display: flex;

402

align-items: center;

403

justify-content: center;

404

color: var(--text-dim);

405

transition: all 0.15s;

406

}

407

.theme-toggle:hover {

408

color: var(--text);

409

background: var(--accent-soft);

410

}

411

.theme-toggle svg {

412

width: 16px;

413

height: 16px;

414

stroke: currentColor;

415

fill: none;

416

stroke-width: 2;

417

stroke-linecap: round;

418

stroke-linejoin: round;

419

}

420

.theme-toggle .icon-sun { display: none; }

421

.theme-toggle .icon-moon { display: block; }

422

[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

423

[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

424

425

/* ═══ RESPONSIVE ═══ */

426

@media (max-width: 768px) {

427

.card-grid, .card-grid.cols-3 { grid-template-columns: 1fr; }

428

.hero { padding: 48px 20px 40px; }

429

.hero h1 { font-size: 28px; }

430

.content, .quick-bar { padding-left: 20px; padding-right: 20px; }

431

.header { padding: 0 20px; }

432

}

433

434

/* ═══ ANIMATIONS ═══ */

435

@keyframes fadeUp {

436

from { opacity: 0; transform: translateY(14px); }

437

to { opacity: 1; transform: translateY(0); }

438

}

439

.hero-inner { animation: fadeUp 0.5s ease-out; }

440

.quick-bar { animation: fadeUp 0.5s ease-out 0.05s backwards; }

441

.card { animation: fadeUp 0.45s ease-out backwards; }

442

.card:nth-child(1) { animation-delay: 0.08s; }

443

.card:nth-child(2) { animation-delay: 0.12s; }

444

.card:nth-child(3) { animation-delay: 0.16s; }

445

.card:nth-child(4) { animation-delay: 0.20s; }

446

.card:nth-child(5) { animation-delay: 0.24s; }

447

.card:nth-child(6) { animation-delay: 0.28s; }

448

</style>

449

</head>

450

<body>

451

452

453

454

455

456

457

458

</div>

459

460

    <a class="header-link" href="https://skif.pro" target="_blank">Платформа</a>

461

462

    <button class="theme-toggle" id="themeToggle" aria-label="Переключить тему">

463

      <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>

464

      <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>

465

</button>

466

</div>

467

</header>

468

469

470

471

472

473

    <p>Добро пожаловать в базу знаний SKIF.PRO. Документация, руководства и инструкции на платформе OtterWiki.</p>

474

475

      <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>

476

      <input type="text" id="searchInput" placeholder="Поиск по wiki..." autocomplete="off">

477

</div>

478

</div>

479

</section>

480

481

482

483

484

    <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>

485

Главная страница Wiki

486

</a>

487

488

    <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>

489

Все страницы

490

</a>

491

492

    <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>

493

Регистрация

494

</a>

495

496

    <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>

497

Админ-панель

498

</a>

499

</div>

500

501

502

503

504

505

<div class="section-label">Разделы базы знаний</div>

506

507

508

    <a href="/-/view/Начинающим" class="card" style="text-decoration: none; color: inherit;">

509

510

        <svg viewBox="0 0 24 24"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>

511

</div>

512

<h3>Начинающим</h3>

513

      <p>Основы работы с системой. Первые шаги и руководства для новичков.</p>

514

<div class="card-links">Открыть раздел →</div>

515

</a>

516

517

    <a href="/-/view/Установка" class="card" style="text-decoration: none; color: inherit;">

518

519

        <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>

520

</div>

521

<h3>Установка</h3>

522

      <p>Инструкции по установке и настройке всех компонентов системы.</p>

523

<div class="card-links">Открыть раздел →</div>

524

</a>

525

526

    <a href="/-/view/Конфигурация" class="card" style="text-decoration: none; color: inherit;">

527

528

        <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>

529

</div>

530

<h3>Конфигурация</h3>

531

      <p>Подробное описание всех настроек и параметров конфигурации.</p>

532

<div class="card-links">Открыть раздел →</div>

533

</a>

534

535

    <a href="/-/view/API" class="card" style="text-decoration: none; color: inherit;">

536

537

        <svg viewBox="0 0 24 24"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>

538

</div>

539

540

      <p>Документация по API, примеры запросов и интеграции.</p>

541

<div class="card-links">Открыть раздел →</div>

542

</a>

543

544

    <a href="/-/view/Траблшутинг" class="card" style="text-decoration: none; color: inherit;">

545

546

        <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>

547

</div>

548

<h3>Траблшутинг</h3>

549

<p>Решение проблем и frequently asked questions.</p>

550

<div class="card-links">Открыть раздел →</div>

551

</a>

552

553

    <a href="/-/view/Глоссарий" class="card" style="text-decoration: none; color: inherit;">

554

555

        <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>

556

</div>

557

<h3>Глоссарий</h3>

558

      <p>Словарь терминов и сокращений, используемых в проекте.</p>

559

<div class="card-links">Открыть раздел →</div>

560

</a>

561

562

</div>

563

564

565

<div class="section-label">Быстрый старт</div>

566

567

568

    <a href="/-/register" class="card" style="text-decoration: none; color: inherit;">

569

570

        <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>

571

</div>

572

<h3>Регистрация</h3>

573

      <p>Создайте аккаунт для редактирования страниц.</p>

574

<div class="card-links">Зарегистрироваться →</div>

575

</a>

576

577

    <a href="/-/view/Начинающим" class="card" style="text-decoration: none; color: inherit;">

578

579

        <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>

580

</div>

581

<h3>Руководства</h3>

582

<p>Пошаговые инструкции для начинающих.</p>

583

<div class="card-links">Читать →</div>

584

</a>

585

586

    <a href="/-/allpages" class="card" style="text-decoration: none; color: inherit;">

587

588

        <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>

589

</div>

590

<h3>Все страницы</h3>

591

<p>Просмотр всех страниц в базе знаний.</p>

592

<div class="card-links">Открыть →</div>

593

</a>

594

595

</div>

596

597

</div>

598

599

600

601

  © 2025 SKIF.PRO · <a href="https://skif.pro" target="_blank">Платформа</a> · <a href="/-/view/home">Wiki Home</a>

602

</footer>

603

604

605

606

const searchInput = document.getElementById('searchInput');

607

608

// Redirect search to OtterWiki search

609

searchInput.addEventListener('keydown', (e) => {

610

if (e.key === 'Enter') {

611

const q = searchInput.value.trim();

612

if (q) {

613

window.location.href = '/-/search?q=' + encodeURIComponent(q);

614

}

615

}

616

});

617

618

// Cmd/Ctrl+K focus

619

document.addEventListener('keydown', (e) => {

620

if ((e.metaKey || e.ctrlKey) && e.key === 'k') {

621

e.preventDefault();

622

searchInput.focus();

623

searchInput.select();

624

}

625

});

626

627

// Theme toggle

628

document.getElementById('themeToggle').addEventListener('click', () => {

629

const current = document.documentElement.dataset.theme;

630

const next = current === 'dark' ? 'light' : 'dark';

631

document.documentElement.dataset.theme = next;

632

localStorage.setItem('theme', next);

633

});

634

635

// Cross-tab sync

636

window.addEventListener('storage', (e) => {

637

if (e.key === 'theme' && e.newValue) {

638

document.documentElement.dataset.theme = e.newValue;

639

}

640

});

641

</script>

642

643

</body>

644

</html>