terms.astro raw

   1  ---
   2  export const prerender = false;
   3  import Base from '../layouts/Base.astro';
   4  ---
   5  <Base title="Условия" titleEn="Terms">
   6    <main class="terms-page">
   7      <section class="about-hero">
   8        <div class="about-hero-bg" id="terms-hero-bg" style="background-image: url('/images/shop-hero.jpg')"></div>
   9        <div class="container about-hero-content">
  10          <h1 class="about-hero-title" style="color:var(--white)">УСЛОВИЯ</h1>
  11        </div>
  12      </section>
  13      <section class="section">
  14        <div class="container">
  15          <div class="terms-content md-content" id="terms-content">Зареждане...</div>
  16        </div>
  17      </section>
  18    </main>
  19  </Base>
  20  
  21  <script>
  22    import { currentLang } from '../lib/i18n';
  23    import { renderMarkdown } from '../lib/markdown';
  24  
  25    async function load() {
  26      const lang = currentLang();
  27      const key = lang === 'en' ? 'terms_en' : 'terms_bg';
  28      try {
  29        const r = await fetch('/api/terms');
  30        const d = await r.json();
  31        const md = d[key] || '';
  32        document.getElementById('terms-content')!.innerHTML = md ? renderMarkdown(md) : `<p>${lang === 'en' ? 'No terms available.' : 'Няма налични условия.'}</p>`;
  33      } catch {
  34        document.getElementById('terms-content')!.innerHTML = '<p>Грешка при зареждане.</p>';
  35      }
  36    }
  37    load();
  38    window.addEventListener('lang-changed', load);
  39  </script>
  40  
  41  <script>
  42    const bg = document.getElementById('terms-hero-bg');
  43    if (bg) {
  44      const factor = 0.5;
  45      function parallax() {
  46        bg.style.transform = `translateY(${window.scrollY * factor}px)`;
  47      }
  48      window.addEventListener('scroll', parallax, { passive: true });
  49      parallax();
  50    }
  51  </script>
  52  
  53  <style>
  54    .terms-content {
  55      color: var(--text);
  56      line-height: 1.8;
  57      text-align: justify;
  58      max-width: 800px;
  59    }
  60    .terms-content h2, .terms-content h3 { color: var(--text); }
  61    .terms-content p { color: var(--text-light); }
  62    .terms-content li { color: var(--text-light); }
  63    .terms-content a { color: var(--primary); }
  64  </style>
  65