rangerhq-logbook/inc/wp-notes-about.php

<?php
// wp-notes-about.php

/**
 * Function to display the "About" page for WP Notes plugin.
 */
function wp_notes_about_page() {
    ?>
    <style>
        /* Banner + intro side-by-side row at the top of the About page.
           Stacks vertically on narrower screens. */
        .wp-notes-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;
        }
        .wp-notes-about-intro__img {
            flex: 0 0 320px;
            max-width: 320px;
        }
        .wp-notes-about-intro__img img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 4px;
        }
        .wp-notes-about-intro__body {
            flex: 1 1 320px;
            min-width: 0;
        }
        .wp-notes-about-intro__body h2 {
            margin-top: 0;
        }
    </style>

    <div class="wrap" style="display: flex; gap: 20px;">
        <!-- Left Section: About Content (70%) -->
        <div style="flex: 0 0 70%;">

            <!-- Banner + intro, side by side -->
            <div class="wp-notes-about-intro">
                <div class="wp-notes-about-intro__img">
                    <img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
                         alt="WP Notes banner">
                </div>
                <div class="wp-notes-about-intro__body">
                    <h2>WP Notes <span style="color:#646970; font-weight:400;">v<?php echo esc_html(WP_NOTES_VERSION); ?></span></h2>
                    <p>WP Notes is a lightweight task &amp; logbook plugin for WordPress. Log your daily work, mark tasks as done, and keep a tidy history right inside the dashboard &mdash; perfect for freelancers showing clients what's been delivered.</p>
                    <p style="margin-bottom:0;">
                        <a href="<?php echo esc_url(admin_url('admin.php?page=wp-notes')); ?>" class="button button-primary">Go to WP Notes →</a>
                    </p>
                </div>
            </div>

            <h1>Welcome to WP Notes About Page v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
            <div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
            <p>WP Notes is your task management solution for WordPress. Keep track of your todos, collaborate with team members, and never lose important notes.</p>
            <div id="header" style="display: none; margin-top: 10px;">
            </div>
            </div>
            <style>
            /* Hides most plugin notices */
            .notice, .updated, .error {
                display: none !important;
            }
            </style>

            <!-- About and Versions Section -->
            <h1>About WP Notes v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
            <div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
                <button onclick="toggleSection('about-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
                    Toggle About Section
                </button>

                <div id="about-section" style="margin-top: 10px; display: none;">
                    <!-- Content for About and Versions -->
                    <h2>About WP Notes</h2>
                    <p>
                        Thank you for using WP Notes! This plugin helps you manage your WordPress tasks and notes efficiently. 
                        Keep track of your todo's, mark them as complete, and export your data for safekeeping. I made this
                        plugin for my website to log my daily tasks and notes as a logbook for my clients, so they can see the work
                        done by me or you and so PAY, as every task is important and the customers need to know what I've done.
                    </p>

                    <ul>
                        <li>Log all your tasks and jobs so prove work is being done.</li>
                        <li>As you can see, this plugin is very flexible and can be used for a wide range of WordPress users.</li>
                        <li>I hope you find it useful too.</li>
                    </ul>

                    <h1>What WP Notes Offers</h1>
                    <p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
                    <p>We're excited to offer our plugin to our customers.</p>
                    <p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
                    <p>We have several features for you to choose from:</p>
                    <ul>
                        <li><strong>Freelancers and site developers</strong> tracking work done on client sites.</li>
                        <li><strong>Teams</strong> wanting to document changes or keep a changelog in the dashboard.</li>
                        <li><strong>WordPress power users</strong> wanting a straightforward dashboard notes system.</li>
                        <li><strong>Small businesses</strong> needing a simple task management solution for WordPress.</li>
                        <li><strong>Students</strong> wanting to keep track of their daily tasks to prove work is being done.</li>
                        <li><strong>Teachers</strong> wanting to keep track of their students' progress with Email Notifications.</li>
                    </ul>

                    <p>
                        <li><strong>If you have any questions or feedback</strong>, feel free to reach out to us. Enjoy your note-taking experience!</li>
                    </p>

                    <p>
                        <li><strong>Join our community</strong> and unlock the full potential of WP Notes.</li>
                    </p>   
                </div>
            </div>
            
            <p>
            <!-- About and Versions Section -->
            <h1>Version History v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
            <div class="wp-notes-versions" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
                <button onclick="toggleSection('version-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
                    Toggle Version Section
                </button>

                <div id="version-section" style="margin-top: 10px; display: none;">
                    <h3>Version 2.0.3 (Current)</h3>
                    <ul>
                        <li>Added Error Logging: Introduced a comprehensive error logging system to capture plugin-related errors. The logs are now viewable within the admin bar for easy troubleshooting.</li>
                        <li>Added Welcome Section and Version history</li>
                        <li>Added Image to main menu</li>
                        <li>Edit Function is now working</li>
                        <li>Popup notification with "Saved" status added</li>
                        <li>Error controls incorporated into code for stability</li>
                        <li>Enhanced `wp-config.php` for error capturing</li>
                        <li>Ability to restore older notes</li>
                        <li>Displays "Created by," "Modified by," and "Edited by" fields</li>
                        <li>Improved task-tracking feature with a dashboard interface</li>
                        <li>Added color, font, and size customization for notes</li>
                        <li>Added edit and mark-as-done functions</li>
                        <li>AJAX-based updates for smoother note editing</li>
                        <li>Added Create WP Note into Tools in admin bar</li>
                        <li>Added Create WP Note into Wp-Notes in admin bar</li>
                        <li>Added Activity Chart for activity tracking in admin bar Still needs Work</li>
                    </ul>
                    <div class="wp-notes-header" style="margin-bottom: 30px;">
                        <img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg" 
                        style="max-width: 1200px; width: 100%; height: auto; margin-bottom: 20px;" 
                        alt="WP Notes Banner">
                    </div>
                    <p>
                    <h3>Version 2.0.4 (New) Additions</h3>
                    <ul>
                        <li>Ability to Export and Import Notes from a JSON file or a CSV file</li>
                        <li>Email notification when a note is marked as complete</li>
                        <li>Email the Notes Owner when a note is marked as complete</li>
                        <li>Email the current user's email when a note is created</li>
                        <li>Email notification when a note is edited</li>
                        <li>Enhanced `wp-config.php` for error capturing</li>
                        <li>Ability to close sections such as What's New, Version 2.0.3, and the Welcome Section</li>
                        <li>Welcome popup message to greet users</li>
                        <li>A page for ChatGPT API support, including other options like Claude-API</li>
                        <li>Add Emoji Support and icons</li>
                    </ul>

                    <h3>Version 2.0.2</h3>
                    <ul>
                        <li>Added user attribution for notes</li>
                        <li>Enhanced timestamp functionality</li>
                        <li>Added email export option</li>
                        <li>Improved dashboard widget synchronization</li>
                        <li>Added welcome section and version history</li>
                    </ul>

                    <h3>Version 2.0.1</h3>
                    <ul>
                        <li>Enhanced admin bar integration</li>
                        <li>Added timestamp to notes</li>
                        <li>Improved data preservation</li>
                    </ul>

                    <h3>Version 2.0.0</h3>
                    <ul>
                        <li>Initial release with basic note functionality</li>
                        <li>Dashboard widget integration</li>
                        <li>Note styling options</li>
                    </ul>
                    <br>
                    <!-- Buy Me a Coffee Button -->
                    <a href="https://www.buymeacoffee.com/davidkeanek" target="_blank">
                        <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=davidkeanek&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" alt="Buy me a coffee">
                    </a>
                </div>
            </div>
        </div>
        


        <!-- Right Section: Feedback Box (30%) -->
        <div style="flex: 0 0 30%; padding: 20px; border: 1px solid #ddd; background: #f9f9f9;">
            <h2>Leave Feedback</h2>
            <!-- Social Buttons -->
            <button style="background-color: black; color: white; padding: 10px 20px; border: none; margin: 5px; border-radius: 5px; cursor: pointer;">
                ✖️ Post
            </button>
            <button style="background-color: #FF0000; color: white; padding: 10px 20px; border: none; margin: 5px; border-radius: 5px; cursor: pointer;">
                🔴 YouTube 1K
            </button>
            <a href="https://github.com/davidtkeane/wp-notes" target="_blank" style="text-decoration: none;">
                <button style="background-color: #24292e; color: white; padding: 10px 20px; border: none; margin: 5px; border-radius: 5px; cursor: pointer;">
                    🐙 GitHub
                </button>
            </a>
            <!-- Feedback Options -->
            <form id="wp-notes-feedback-options" style="margin-top: 20px;">
                <label><input type="radio" name="feedback" value="improve"> I have ideas to improve this plugin</label><br>
                <label><input type="radio" name="feedback" value="help"> I need help with this plugin</label><br>
                <input type="submit" value="Submit Feedback" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer; margin-top: 10px;">
            </form>
            <br>
            <!-- Buy Me a Coffee Button -->
            <a href="https://www.buymeacoffee.com/davidkeanek" target="_blank">
            <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=davidkeanek&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" alt="Buy me a coffee">
            </a>
            <br>
        </div>
    </div>

    <!-- JavaScript to toggle About section -->
    <script>
        /**
         * Function to toggle the display of a section.
         * @param {string} sectionId - The ID of the section to toggle.
         */
        function toggleSection(sectionId) {
            var section = document.getElementById(sectionId);
            if (section) {
                if (section.style.display === "none") {
                    section.style.display = "block";
                } else {
                    section.style.display = "none";
                }
            } else {
                console.error("Element with ID " + sectionId + " not found.");
            }
        }

        // JavaScript to handle feedback form toggling
        document.getElementById('wp-notes-feedback-options').addEventListener('submit', function(e) {
            e.preventDefault();
            var feedbackType = document.querySelector('input[name="feedback"]:checked').value;
            if (feedbackType === 'improve') {
                toggleSection('feedback-form-improve');
            } else if (feedbackType === 'help') {
                toggleSection('feedback-form-help');
            }
        });
    </script>
    <?php
}
?>