borbad.s5l.ru/vue/app/temp.coffee

globalThis.renderFns = require '../pug.json'
globalThis.stylFns   = require '../styl.json'

debug.log "000"
document.head.insertAdjacentHTML 'beforeend','<meta charset="UTF-8">'
document.head.insertAdjacentHTML 'beforeend','<meta name="viewport" content="width=device-width, initial-scale=1.0">'

document.head.insertAdjacentHTML('beforeend','<style>'+stylFns['main.css']+'</style>')
document.head.insertAdjacentHTML('beforeend','<style  type="text/tailwindcss">'+stylFns['app/temp.styl']+'</style>')

document.head.insertAdjacentHTML('beforeend','<title> Кохи Борбад - Концертный зал Душанбе</title>')

debug.log "001"
# Маршруты
routes = [
  { path: '/', component: require 'app/pages/Home' }
  { path: '/events', component: require 'app/pages/Events' }
  #{ path: '/about', component: require 'app/pages/About' }
  #{ path: '/contacts', component: require 'app/pages/Contacts' }
]
tailwind.config = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
  darkMode: 'class', # или 'media' для автоматического определения системной темы
  theme: {
    extend: {
      colors: {
        # Основная палитра на основе красного золота
        'primary': {
          50: '#fef7ee',
          100: '#fdedd6',
          200: '#fbd7ad',
          300: '#f8ba79',
          400: '#f49343',
          500: '#f17317', # Базовый красное золото
          600: '#e2570d',
          700: '#bc3f0d',
          800: '#963213',
          900: '#792b14',
          950: '#411308',
        },
        
        # Вторичные цвета - глубокие благородные тона
        'secondary': {
          50: '#f8fafc',
          100: '#f1f5f9',
          200: '#e2e8f0',
          300: '#cbd5e1',
          400: '#94a3b8',
          500: '#64748b',
          600: '#475569',
          700: '#334155',
          800: '#1e293b',
          900: '#0f172a',
          950: '#020617',
        },
        
        # Акцентные цвета - контрастные элементы
        'accent': {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b', # Теплый золотой акцент
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
          950: '#451a03',
        },
        
        # Фоновые цвета для светлой и темной тем
        'surface': {
          light: {
            DEFAULT: '#ffffff',
            variant: '#f8fafc',
            elevated: '#ffffff',
          },
          dark: {
            DEFAULT: '#0f172a',
            variant: '#1e293b',
            elevated: '#334155',
          }
        },
        
        # Статусные цвета
        'success': {
          50: '#f0fdf4',
          100: '#dcfce7',
          200: '#bbf7d0',
          300: '#86efac',
          400: '#4ade80',
          500: '#22c55e',
          600: '#16a34a',
          700: '#15803d',
          800: '#166534',
          900: '#14532d',
        },
        'warning': {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
        },
        'error': {
          50: '#fef2f2',
          100: '#fee2e2',
          200: '#fecaca',
          300: '#fca5a5',
          400: '#f87171',
          500: '#ef4444',
          600: '#dc2626',
          700: '#b91c1c',
          800: '#991b1b',
          900: '#7f1d1d',
        }
      },
      
      # Дополнительные настройки темы
      fontFamily: {
        'display': ['Playfair Display', 'serif'], # Для заголовков
        'body': ['Inter', 'sans-serif'], # Для основного текста
      },
      
      backgroundImage: {
        'gold-gradient': 'linear-gradient(135deg, #f17317 0%, #f59e0b 100%)',
        'premium-gradient': 'linear-gradient(135deg, #792b14 0%, #411308 100%)',
      },
      
      boxShadow: {
        'gold': '0 4px 14px 0 rgba(241, 115, 23, 0.3)',
        'premium': '0 8px 32px 0 rgba(121, 43, 20, 0.4)',
      }
    },
  },
  plugins: [],
}
debug.log "002"
# Глобальное состояние темы
app = Vue.createApp
  name: 'app'
  data: ()->
        return  {}
  beforeMount: ()->
        debug.log "start beforeMount"
        globalThis._ = @
  render: (new Function '_ctx', '_cache', renderFns['app/temp.pug'])()
  mounted: ->
    # Предзагрузка темы
    if localStorage.theme == 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
      @theme = 'dark'
      document.documentElement.classList.add('dark')
    else
      @theme = 'light'
      document.documentElement.classList.remove('dark')
  methods:
    toggleTheme: ->
      @theme = if @theme == 'light' then 'dark' else 'light'
      localStorage.setItem 'theme', @theme
      document.documentElement.classList.toggle 'dark'
      @$emit 'theme-changed', @theme
  components:
      'themetoggle':    require 'app/shared/ThemeToggle'
      'multilevelmenu': require 'app/shared/MultiLevelMenu'
      'imageslider': require 'app/shared/ImageSlider'
app.use(VueRouter.createRouter({
  routes: routes
  history: VueRouter.createWebHistory()
  scrollBehavior: (to, from, savedPosition) ->
    if savedPosition
      return savedPosition
    else
      return { x: 0, y: 0 }
}))


app.mount('body')