{% 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 V5 </h1>
  <p class="description">A self-hosted, open-source platform for digital campaigns.</p>
  <p class="description">Changemaker V5 is a battle-tested, lightweight, self-hosted productivity suite that empowers you to build secure websites, blogs, newsletters, and forms. With 100% locally hosted AI and automation systems, it helps you manage a community of collaborators—from personal projects to full-fledged campaigns—granting you complete control, inherent security, and true freedom of speech 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.bnkhome.org/bnkops/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.bnkhome.org/bnkops/Changemaker.git
cd Changemaker</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 http://localhost:3011 to get started.</p>
  <p class="quick-note"><a href="http://localhost:3011" class="button">Access Homepage (only works with if Changemaker installed)</a> 
  <p class="important-note"><strong>Important:</strong> Make sure to visit <a href="https://localhost:9444">https://localhost:9444</a> immediately to configure Portainer before the installation process times out. See the <a href="{{ 'apps/portainer/' | url }}">Portainer documentation</a> for details.</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?</h2>
  <p>Changemaker V5 is a curated set of free & open source tools that has been pre-configured into a platform for the express intent of running a digital campaign. It empowers you to deploy secure, locally-built websites, blogs, newsletters, & forms – from personal projects to full-fledged campaigns.</p>
</div>

<div class="info-section">
  <h2>Why Changemaker?</h2>
  <p>Changemaker V5 is a project undertaken by The Bunker Operations, a community building organization, headquartered in Edmonton, Alberta, Canada, to provide our community a digital campaign alternative to mainstream American systems. It intends to be a plug-and-play web server platform so we can transition our friends, allies, and comrades off of corporate systems.</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 V5 comes packed with a suite of powerful, self-hosted tools. 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>Main dashboard for Changemaker V5. Your central command center for all services.</p>
      </div>
      <a href="{{ 'apps/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.</p>
      </div>
      <a href="{{ 'apps/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;">edit_note</span>Flatnotes</h3>
        <p>Simple, markdown-based note-taking, directly connected to your blog.</p>
      </div>
      <a href="{{ 'apps/flatnotes/' | 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 campaigns.</p>
      </div>
      <a href="{{ 'apps/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;">table_chart</span>NocoDB</h3>
        <p>Open Source Airtable Alternative. Turn any database into a smart spreadsheet.</p>
      </div>
      <a href="{{ 'apps/nocodb/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">question_answer</span>Answer</h3>
        <p>Self-hosted Q&A platform for teams to share knowledge internally.</p>
      </div>
      <a href="{{ 'apps/answer/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">draw</span>Excalidraw</h3>
        <p>Virtual whiteboard for sketching and collaborative diagramming.</p>
      </div>
      <a href="{{ 'apps/excalidraw/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">apps</span>Ferdium</h3>
        <p>All-in-one desktop app that helps you organize multiple social media services in one place.</p>
      </div>
      <a href="{{ 'apps/ferdium/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">source</span>Gitea</h3>
        <p>Lightweight, self-hosted Git service for managing repositories and collaboration.</p>
      </div>
      <a href="{{ 'apps/gitea/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">article</span>MkDocs Material</h3>
        <p>Create beautiful documentation sites with Markdown (like this one!).</p>
      </div>
      <a href="{{ 'apps/mkdocs-material/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">people</span>Monica CRM</h3>
        <p>Personal relationship management system to organize interactions with your contacts.</p>
      </div>
      <a href="{{ 'apps/monica-crm/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">integration_instructions</span>n8n</h3>
        <p>Workflow automation tool that connects various apps and services together.</p>
      </div>
      <a href="{{ 'apps/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;">smart_toy</span>Ollama</h3>
        <p>Run open-source large language models locally for AI-powered assistance.</p>
      </div>
      <a href="{{ 'apps/ollama/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">chat</span>OpenWebUI</h3>
        <p>Web interface for interacting with your Ollama AI models.</p>
      </div>
      <a href="{{ 'apps/openwebui/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">sailing</span>Portainer</h3>
        <p>Container management platform that simplifies deploying and managing Docker environments.</p>
      </div>
      <a href="{{ 'apps/portainer/' | url }}" class="button">Learn More</a>
    </div>

    <div class="app-card">
      <div>
        <h3><span class="material-icons" style="vertical-align: bottom; margin-right: 8px;">forum</span>Rocket.Chat</h3>
        <p>Self-hosted team communication platform with real-time chat and collaboration.</p>
      </div>
      <a href="{{ 'apps/rocketchat/' | url }}" class="button">Learn More</a>
    </div>
  </div>
</div>

<div class="info-section">
  <h2>Development Pathway</h2>
  <p>Changemaker is continuously evolving. Here are some identified wants for development:</p>
  <ul>
    <li>Internal integrations for asset management (e.g., shared plain file locations).</li>
    <li>Database connections for automation systems (e.g., manuals for NocoDB & n8n).</li>
    <li>Enhanced manuals and landing site for the whole system.</li>
    <li>Comprehensive training materials.</li>
  </ul>
  <p>Stay tuned for updates and new features! For more details, check the <a href="{{ 'readme/#development-pathway' | url }}">full development pathway</a>.</p>
</div>

{% endblock %}

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