rangerhq-buddy/inc/about.php

<?php
/**
 * Buddy About page — explains what the plugin is, who it's for, and
 * keeps a compact version history with a link out to the canonical
 * CHANGELOG.md on Gitea.
 *
 * Layout: a clean side-by-side intro row at the top (sprite + intro
 * + CTA), then plain prose cards. Discipline carried from Logbook —
 * no nested toggle boxes, no duplicate sections, single H1.
 */

if ( ! defined( 'ABSPATH' ) ) { exit; }

function buddy_render_about_page() {
    if ( ! current_user_can( 'read' ) ) {
        wp_die( esc_html__( 'You do not have permission to view this page.', 'buddy' ) );
    }
    ?>
    <style>
        .buddy-about-intro {
            display: flex;
            gap: 24px;
            align-items: center;
            flex-wrap: wrap;
            margin: 16px 0 28px;
            padding: 18px;
            background: #fff;
            border: 1px solid #ccd0d4;
            border-radius: 4px;
        }
        .buddy-about-intro__sprite {
            flex: 0 0 160px;
            display: flex;
            justify-content: center;
        }
        .buddy-about-intro__body {
            flex: 1 1 320px;
            min-width: 0;
        }
        .buddy-about-intro__body h2 { margin-top: 0; }

        .buddy-about-card {
            background: #fff;
            border: 1px solid #ccd0d4;
            border-radius: 4px;
            padding: 20px 24px;
            margin: 0 0 22px;
            max-width: 720px;
        }
        .buddy-about-card h2 { margin: 0 0 10px; font-size: 16px; }
        .buddy-about-card p:last-child { margin-bottom: 0; }
        .buddy-about-card ul { margin: 8px 0 0 18px; list-style: disc; }
        .buddy-about-card ul li { margin-bottom: 4px; }
        .buddy-about-card--versions ul { list-style: none; margin-left: 0; }
        .buddy-about-card--versions li { margin-bottom: 12px; }
        .buddy-about-card--versions .ver { font-weight: 600; color: #2271b1; }
        .buddy-about-card--versions .latest { display:inline-block; margin-left:6px; padding:1px 7px; background:#00a32a; color:#fff; border-radius:9px; font-size:11px; font-weight:600; }
        .buddy-about-changelog-link { display: inline-block; margin-top: 6px; font-size: 13px; color: #646970; }
    </style>

    <div class="wrap">
        <h1 class="wp-heading-inline"><?php esc_html_e( 'About', 'buddy' ); ?></h1>
        <span class="page-title-action">v<?php echo esc_html( BUDDY_VERSION ); ?></span>
        <hr class="wp-header-end">
    </div>

    <div class="wrap">
        <div class="buddy-about-intro">
            <div class="buddy-about-intro__sprite">
                <?php buddy_render_sprite( 'default', 'happy', 'lg' ); ?>
            </div>
            <div class="buddy-about-intro__body">
                <h2>Buddy <span style="color:#646970; font-weight:400;">v<?php echo esc_html( BUDDY_VERSION ); ?></span></h2>
                <p>A friendly little companion that lives in your WordPress dashboard. The idea: keep Buddy's stats up, eventually Buddy's mood will reflect how well you're taking care of your site itself. Gamifies WordPress maintenance with a bit of charm.</p>
                <p style="margin-bottom:0;">
                    <a href="<?php echo esc_url( admin_url( 'admin.php?page=buddy' ) ); ?>" class="button button-primary"><?php esc_html_e( 'Go to My Buddy →', 'buddy' ); ?></a>
                </p>
            </div>
        </div>

        <div class="buddy-about-card">
            <h2><?php esc_html_e( 'What Buddy does', 'buddy' ); ?></h2>
            <p><?php esc_html_e( 'Buddy is a small virtual pet stored per-user in your WordPress site. Each WP admin gets their own Buddy with its own name, species, and stats. Everything lives in your site\'s own database — nothing leaves the server.', 'buddy' ); ?></p>
            <p><?php esc_html_e( 'Right now (v0.1.0): Buddy exists. You can see them on the WordPress Dashboard widget and on the dedicated Buddy admin page. Coming next: feed / play / clean / sleep interactions, time-based stat decay, multiple species, and the killer feature — stats that react to your actual WordPress site health.', 'buddy' ); ?></p>
        </div>

        <div class="buddy-about-card">
            <h2><?php esc_html_e( 'Who Buddy is for', 'buddy' ); ?></h2>
            <ul>
                <li><strong><?php esc_html_e( 'WordPress admins', 'buddy' ); ?></strong> <?php esc_html_e( 'who want a small daily reason to keep their site tidy.', 'buddy' ); ?></li>
                <li><strong><?php esc_html_e( 'Freelancers', 'buddy' ); ?></strong> <?php esc_html_e( 'managing multiple client sites and wanting a visual gauge of each one\'s health.', 'buddy' ); ?></li>
                <li><strong><?php esc_html_e( '90s kids', 'buddy' ); ?></strong> <?php esc_html_e( 'who remember when computers had pets in them.', 'buddy' ); ?></li>
                <li><strong><?php esc_html_e( 'Anyone', 'buddy' ); ?></strong> <?php esc_html_e( 'who wants their WordPress admin to feel slightly less corporate.', 'buddy' ); ?></li>
            </ul>
        </div>

        <div class="buddy-about-card buddy-about-card--versions">
            <h2><?php esc_html_e( 'Version history', 'buddy' ); ?></h2>
            <ul>
                <li>
                    <span class="ver">v0.1.1</span> &mdash; 25 May 2026 <span class="latest">latest</span><br>
                    <?php esc_html_e( 'Cheeky face! New wink expression that occasionally appears when Buddy is in a good mood — one eye closed, asymmetric smirk, rosier cheeks. Pure SVG, no image files. Proof that the expression engine is properly extensible.', 'buddy' ); ?>
                </li>
                <li>
                    <span class="ver">v0.1.0</span> &mdash; 25 May 2026<br>
                    <?php esc_html_e( 'First release. Phase A complete: Buddy exists. Dashboard widget + dedicated admin page show the SVG character, name, mood label, four stats bars. Self-hosted update checker wired up to Gitea from commit 1. No interactions yet — that\'s next.', 'buddy' ); ?>
                </li>
            </ul>
            <a class="buddy-about-changelog-link"
               href="https://git.davidtkeane.com/ranger/a-buddy/src/branch/main/CHANGELOG.md"
               target="_blank" rel="noopener">
                <?php esc_html_e( 'View the full CHANGELOG.md →', 'buddy' ); ?>
            </a>
        </div>
    </div>
    <?php
}