{% extends "base.html" %}

{% block active_page %}{% set active_page = "about" %}{% end %}

{% block title %}Word Search — About{% end %}

{% block content %}
<h2 class="mb-4">ℹ️ About</h2>

<div class="content-section">
    <h3>🧩 What is Word Search?</h3>
    <p>
        Word Search is a browser-based puzzle game where you find hidden words in a
        grid of letters. Words can be placed horizontally, vertically, or
        diagonally — forwards or backwards. The backend generates puzzles,
        validates your selections, and tracks your progress in real time.
    </p>
</div>

<div class="content-section">
    <h3>🛠️ Built With</h3>
    <ul>
        <li><a href="https://www.python.org/" target="_blank" rel="noopener"><strong>Python</strong></a> — core language</li>
        <li><a href="https://www.tornadoweb.org/" target="_blank" rel="noopener"><strong>Tornado</strong></a> — async web framework</li>
        <li><a href="https://www.sqlalchemy.org/" target="_blank" rel="noopener"><strong>SQLAlchemy</strong></a> — ORM and database toolkit</li>
        <li><a href="https://www.sqlite.org/" target="_blank" rel="noopener"><strong>SQLite</strong></a> — embedded database</li>
        <li><a href="https://click.palletsprojects.com/" target="_blank" rel="noopener"><strong>Click</strong></a> — command-line interface</li>
        <li><a href="https://docs.pytest.org/" target="_blank" rel="noopener"><strong>pytest</strong></a> — testing framework</li>
        <li><a href="https://black.readthedocs.io/" target="_blank" rel="noopener"><strong>Black</strong></a> — code formatter</li>
        <li><a href="https://flake8.pycqa.org/" target="_blank" rel="noopener"><strong>Flake8</strong></a> — linter</li>
        <li><a href="https://pre-commit.com/" target="_blank" rel="noopener"><strong>pre-commit</strong></a> — git hook framework</li>
        <li><a href="https://www.sphinx-doc.org/" target="_blank" rel="noopener"><strong>Sphinx</strong></a> — documentation generator</li>
        <li><a href="https://getbootstrap.com/" target="_blank" rel="noopener"><strong>Bootstrap 5</strong></a> — responsive UI</li>
        <li><a href="https://icons.getbootstrap.com/" target="_blank" rel="noopener"><strong>Bootstrap Icons</strong></a> — interface icons</li>
    </ul>
</div>

<div class="content-section">
    <h3>✍️ Authors</h3>
    <ul>
        <li><strong>Mathew Guest</strong> — creator and developer</li>
        <li><strong>🤖 Claude</strong> (Anthropic) — AI co-author</li>
    </ul>
</div>

<div class="content-section">
    <h3>📂 Source Code</h3>
    <p>
        The source code for this project is available on GitHub:<br>
        <a href="https://github.com/mathewguest/wordsearch" target="_blank" rel="noopener">
            <i class="bi bi-github"></i> github.com/mathewguest/wordsearch
        </a>
    </p>
</div>

<div class="content-section">
    <h3>🎬 Demo Video</h3>
    <p>
        Watch a video showing off Claude Code building this project:<br>
        <a href="https://youtu.be/3Cr4GnvK7co" target="_blank" rel="noopener">
            <i class="bi bi-youtube"></i> Watch on YouTube
        </a>
    </p>
</div>
{% end %}