{% extends "base.html" %}

{% block title %}About - AnZar{% endblock %}

{% block content %}
<div class="plain-page">
    <div class="about-head">
        <img src="/frontend/static/images/anzar-logo-cropped.svg" alt="AnZar logo" class="about-logo">
        <h1>AnZar</h1>
        <p class="version">Version 2.5 · October 2026</p>
    </div>

    <p>AnZar is a personal project, not a product. It was written for one lecturer's own
    courses and is shared with colleagues who want to try what AI-assisted grading does in
    practice. There is no company behind it, there is nothing to buy and no account is
    needed.</p>

    <p>The tool grades the quizzes and the file submissions of a Canvas course against
    criteria written by the teacher. The model proposes points and a short reason per
    criterion; the teacher accepts, adjusts or rejects them on a review page, and only the
    accepted scores go back to Canvas. It runs on local models (LM Studio, Ollama), on
    university-hosted endpoints, and on any endpoint that speaks the OpenAI API format.</p>

    <div class="note">
        <h2>Before using it in a course</h2>
        <p>A model touches student grades here, and student answers leave the machine when
        the endpoint is not local. Institutions set their own rules for automated
        assessment, and many require approval before it is used. So check the rules of
        your institution first, and make all parties aware that AI assessment is used and
        to what degree: students, co-lecturers and the exam board should know which parts
        a model grades, against which criteria, where the answers are sent and who reviews
        the scores before they become final. AnZar keeps the criteria and the grading runs
        on disk for exactly this kind of conversation. The responsibility for the grades
        remains with the teacher of the course.</p>
    </div>

    <p class="fine">Under the hood: Python with a pywebview window, the Canvas REST API
    and OpenAI-format endpoints. The frontend uses Alpine.js, MathJax and Phosphor
    icons.</p>
</div>
{% endblock %}

{% block extra_css %}
<style>
.plain-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
    color: var(--text-primary);
}
.about-head {
    text-align: center;
    margin-bottom: 2.5rem;
}
.about-logo {
    width: 88px;
    height: auto;
}
.about-head h1 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.5rem 0 0.25rem;
}
.version {
    margin: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
}
.plain-page p {
    margin: 0 0 0.9rem;
    line-height: 1.7;
}
.note {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--color-primary);
    background: var(--bg-secondary);
    border-radius: 0 8px 8px 0;
}
.note h2 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
}
.note p {
    margin: 0;
}
.fine {
    margin-top: 2rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}
</style>
{% endblock %}

{% block scripts %}{% endblock %}