{% extends "main.html" %}

{% block content %}

<div class="setup-guide-banner" style="background-color: #f5f5f5; padding: 20px; margin-bottom: 20px; border-radius: 8px; text-align: center; border-left: 5px solid #2196f3;">
  <h2 style="margin-top: 0; color: #333;">Need help with setup?</h2>
  <p>For the most up-to-date installation instructions and documentation, please visit our official guide:</p>
  <div style="margin-top: 15px;">
    <a href="https://docs.bnkops.com/cm" class="cta-button" style="display: inline-block; font-size: 1.1em; font-weight: bold; background-color: #2196f3; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px; margin-right: 10px;">Visit Official Setup Guide</a>
    <a href="https://gitea.bnkops.com/admin/Changemaker" class="cta-button" style="display: inline-block; font-size: 1.1em; font-weight: bold; background-color: #333; color: white; padding: 12px 24px; text-decoration: none; border-radius: 4px;"><span class="material-icons" style="vertical-align: middle; font-size: 1.1em; margin-right: 5px;">source</span>View Source Code</a>
  </div>
</div>

<div style="position: relative; padding-top: 56.25%;">
  <iframe
    src="https://customer-1ebw5tv06sxrrq32.cloudflarestream.com/e98f453daee6e89c3a1632465806d0d5/iframe?muted=true&preload=true&loop=true&autoplay=true&poster=https%3A%2F%2Fcustomer-1ebw5tv06sxrrq32.cloudflarestream.com%2Fe98f453daee6e89c3a1632465806d0d5%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600"
    loading="lazy"
    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

<div class="hero-section">
  <h1>Welcome to Changemaker Lite</h1>
  <p class="description">A streamlined, self-hosted platform for documentation and development.</p>
  <p class="description">Changemaker Lite is a lightweight, self-hosted productivity suite that empowers you to build secure websites, blogs, newsletters, and automation workflows. With locally hosted tools and services, it helps you manage documentation and development projects—granting you complete control and security for your content.</p>
  <p class="subtitle">Build your power, don't rent it.</p>
  <a href="#apps-showcase" class="cta-button">Explore Applications</a>
  <a href="https://gitea.bnkops.com/admin/Changemaker" class="git-code-button">
    <span class="material-icons">code</span> Code
  </a>
</div>

<div class="quick-start-section">
  <h2>Quick Start</h2>
  <p>Familiar with the terminal, git, and <a href="https://docs.docker.com/get-docker/" target="_blank">Docker</a>? Get Changemaker up and running in minutes:</p>
  <div class="code-container">
    <pre><code># Clone the repository
git clone https://gitea.bnkops.com/admin/Changemaker.git
cd changemaker.lite</code></pre>
  </div>

  <div class="code-container">
    <pre><code># Run the config.sh script
./config.sh</code></pre>
    </div>
  
  <div class="code-container">
    <pre><code># Start all services
docker compose up -d</code></pre>
  </div>
  
  <p class="quick-note">That's it! After services start (which may take a few minutes on first run), visit the individual service ports to get started.</p>
  <p class="quick-note"><a href="http://localhost:4000" class="button">Access MkDocs (Documentation)</a></p>
  <a href="https://gitea.bnkhome.org/bnkops/Changemaker/src/branch/main/README.md" class="button">Detailed Installation Guide</a>
</div>

<div class="info-section">
  <h2>What is Changemaker Lite?</h2>
  <p>Changemaker Lite is a streamlined version focused on documentation and development tools. It provides essential services for creating and managing content, including documentation sites, newsletters, automation workflows, and development environments.</p>
</div>

<div class="info-section">
  <h2>Why Changemaker Lite?</h2>
  <p>Changemaker Lite offers a minimal but powerful self-hosted solution for individuals and small teams who need reliable documentation and development tools without the complexity of larger platforms. Perfect for personal projects, small campaigns, or development workflows.</p>
</div>

<div class="apps-grid-container" id="apps-showcase">
  <h2>Core Applications & Services</h2>
  <p style="text-align: center; max-width: 700px; margin: 0 auto 2rem auto;">Changemaker Lite comes with essential self-hosted tools for documentation, development, and automation. Click on any app to learn more about its features and how to use it.</p>
  <div class="apps-grid">
    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">dashboard</span>Homepage</h3>
        <p>Modern dashboard for accessing and monitoring all your self-hosted services from one place.</p>
      </div>
      <a href="{{ 'services/homepage/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">code</span>Code Server</h3>
        <p>Visual Studio Code in your browser. Develop and edit code from any device with full IDE features.</p>
      </div>
      <a href="{{ 'services/code-server/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">mail</span>Listmonk</h3>
        <p>Self-hosted newsletter and mailing list manager for full control over email campaigns.</p>
      </div>
      <a href="{{ 'services/listmonk/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">storage</span>PostgreSQL</h3>
        <p>Reliable database backend for Listmonk and other applications requiring persistent data storage.</p>
      </div>
      <a href="{{ 'services/postgresql/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">description</span>MkDocs Material</h3>
        <p>Modern documentation site generator with live preview and beautiful Material Design theme.</p>
      </div>
      <a href="{{ 'services/mkdocs/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">web</span>Static Site Server</h3>
        <p>Nginx-powered static site server for hosting your built documentation and websites.</p>
      </div>
      <a href="{{ 'services/static-server/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">hub</span>n8n</h3>
        <p>Workflow automation tool for connecting services and automating repetitive tasks.</p>
      </div>
      <a href="{{ 'services/n8n/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">grid_view</span>NocoDB</h3>
        <p>No-code database platform that turns any database into a smart spreadsheet interface.</p>
      </div>
      <a href="{{ 'services/nocodb/' | url }}" class="button">Learn More</a>
    </div>
  </div>
</div>

<div class="info-section">
  <h2>Development Pathway</h2>
  <p>Changemaker Lite is continuously evolving. Here are some identified goals for development:</p>
  <ul>
    <li>Enhanced service integrations and documentation.</li>
    <li>Improved automation workflows with n8n examples.</li>
    <li>Better asset management across services.</li>
    <li>Comprehensive training materials and guides.</li>
  </ul>
  <p>Stay tuned for updates and new features!</p>
</div>

{% endblock %}

{% block tabs %}
  {{ super() }}
{% endblock %}