...

app/app.coffee

@@ -31,6 +31,7 @@ globalThis.app = Vue.createApp
             appState:
                 currentDocument: null
                 currentLanguage: 'ru'
+                currentTheme: 'dark' 
                 availableLanguages: ['ru', 'en', 'tj']
                 loading: true
                 error: null
@@ -38,6 +39,10 @@ globalThis.app = Vue.createApp
     
     beforeMount: ->
         globalThis._ = @
+        # Устанавливаем тему из localStorage или по умолчанию
+        theme = localStorage.getItem('theme') or 'dark'
+        @appState.currentTheme = theme
+        document.documentElement.setAttribute('data-theme', theme)
     computed:
         currentLanguage: ->
             @appState.currentLanguage

app/app.pug

@@ -1,15 +1,14 @@
 include ../pug/base.pug
 include ../pug/bem.pug
 
-div(class="min-h-screen bg-white dark:bg-gray-900 transition-colors duration-300")
+div(class="min-h-screen bg-surface transition-colors duration-300" :class="{'dark': _.appState.currentTheme === 'dark'}")
     div(v-if="appState.loading" class="flex items-center justify-center min-h-screen")
         div(class="text-center")
-            div(class="animate-spin rounded-full h-32 w-32 border-b-2 border-blue-600")
-            p(class="mt-4 text-gray-600 dark:text-gray-400") Загрузка...
-    
-    div(v-else-if="appState.error" class="flex items-center justify-center min-h-screen")
-        div(class="text-center")
-            div(class="text-red-600 text-xl") Ошибка
-            p(class="text-gray-600 dark:text-gray-400") {{ appState.error }}
-    
+            div(class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin")
+            p(class="mt-4 text-contrast-medium") Загрузка...
+    div(v-else-if="appState.error" class="flex items-center justify-center min-h-screen px-4")
+        div(class="text-center max-w-md")
+            div(class="text-2xl font-bold text-red-500 mb-2") Ошибка
+            p(class="text-contrast-medium") {{ appState.error }}
+            app-link(to="/" class="mt-4 inline-block text-primary hover:underline") Вернуться на главную
     router-view(v-else)

app/app.styl

@@ -1,43 +1,16 @@
-// Переменные темы
-:root 
-    --primary-color: #3b82f6
-    --secondary-color: #1e40af
-    --text-primary: #1f2937
-    --text-secondary: #6b7280
-    --bg-primary: #ffffff
-    --bg-secondary: #f9fafb
+// app/app.styl — только базовые сбросы, без переопределения DesignTokens
+body
+    margin: 0
+    font-family: var(--font-family-sans)
+    -webkit-font-smoothing: antialiased
 
-[data-theme="dark"]
-    --primary-color: #60a5fa
-    --secondary-color: #3b82f6
-    --text-primary: #f9fafb
-    --text-secondary: #d1d5db
-    --bg-primary: #111827
-    --bg-secondary: #1f2937
+.animate-fade-in-up
+    animation: fadeInUp var(--transition-slow) ease-out
+    opacity: 0
+    transform: translateY(16px)
+    animation-fill-mode: forwards
 
-// Базовые стили
-body 
-    font-family: 'Inter', system-ui, -apple-system, sans-serif
-    color: var(--text-primary)
-    background-color: var(--bg-primary)
-    transition: all 0.3s ease
-
-// Стили для Markdown контента
-.prose 
-    h1, h2, h3, h4, h5, h6 
-        color: var(--text-primary)
-        font-weight: 600
-    
-    p 
-        color: var(--text-secondary)
-        line-height: 1.7
-    
-    a 
-        color: var(--primary-color)
-        text-decoration: none
-        &:hover 
-            text-decoration: underline
-    
-    img 
-        border-radius: 0.5rem
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1)
+@keyframes fadeInUp
+    to
+        opacity: 1
+        transform: translateY(0)

app/layout.pug

@@ -1,11 +1,19 @@
 include ../pug/base.pug
 include ../pug/bem.pug
 
-+mbh
-    header(class="sticky top-0 z-50 glass border-b border-neutral-300/60 transition-all duration-300")
-        div(class="navbar max-w-7xl mx-auto px-4 sm:px-6 lg:px-8")
-    block top-content
-    
-+mbl(class="py-8 md:py-12 lg:py-16")
-    .container
-        block content
+div(class="flex flex-col min-h-screen")
+    header(class="sticky top-0 z-50 border-b border-neutral-300/30 bg-surface-alt")
+        div(class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center")
+            app-link(to="/")
+                h1(class="text-xl font-bold text-contrast-high") s5l.ru
+            nav(class="hidden md:block")
+                app-link(to="/" class="ml-6 text-contrast-medium hover:text-contrast-high") Главная
+
+    main(class="flex-grow")
+        block top-content
+        div(class="container mx-auto px-4 sm:px-6 lg:px-8 py-8")
+            block content
+
+    footer(class="border-t border-neutral-300/30 bg-surface-alt mt-auto")
+        div(class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 text-center text-contrast-low text-sm")
+            | © 2025 s5l.ru — мультиязычная offline-first платформа

app/pages/Home.pug

@@ -7,8 +7,7 @@ block top-content
     hero-section(:document="document")
 
 block content
-    div(class="max-w-4xl mx-auto px-4" v-if="document")
-        h1(class="text-3xl font-bold text-contrast-high animate-fade-in-up") {{ document.translations[_.appState.currentLanguage]?.title || document.translations.en.title }}
-        div(class="prose mt-6 animate-fade-in-up" v-html="_.parse(document.translations[_.appState.currentLanguage]?.content || document.translations.en.content)")
+    div(v-if="document" class="max-w-4xl mx-auto")
+        div(class="prose prose-lg mt-6 animate-fade-in-up" v-html="marked.parse(document.translations[_.appState.currentLanguage]?.content || document.translations.en?.content || '')")
         div(class="mt-12")
-            image-gallery(:images="document.translations[_.appState.currentLanguage]?.gallery || document.translations.en.gallery")
+            image-gallery(:images="document.translations[_.appState.currentLanguage]?.gallery || document.translations.en?.gallery || []")

app/pages/Home.styl

@@ -1,11 +1 @@
 // Используем только утилиты из DesignTokens
-.animate-fade-in-up
-    animation: fadeInUp var(--transition-slow) ease-out
-
-@keyframes fadeInUp
-    from
-        opacity: 0
-        transform: translateY(var(--transition-px))
-    to
-        opacity: 1
-        transform: translateY(0)

lzma.coffee

@@ -6,11 +6,11 @@ document.documentElement.classList.add('dark')
 
 globalThis.initCount = 0
 ic = ()->
-    if initCount > 5
+    if initCount < 5 and initCount > 1  and not globalThis['appReady']
        window.location.reload()
     else if  not globalThis['appReady']
        initCount++
-       #setTimeout ic, 200
+       setTimeout ic, 600
 ic()
 # обязательно подключение глобальных массивов
 globalThis.renderFns = require 'pug.json'
@@ -23,6 +23,9 @@ try
         if  not globalThis['appReady'] and globalThis['vueReady'] and globalThis['puochReady']
             debug.log 'init start ok'
             try
+
+                globalThis.AppDB     = new (require('app/utils/AppDB.coffee'))
+                AppDB.init()
                 require('app/app.coffee')
                 globalThis['appReady'] = true
                 debug.log "init is ok"