34167-vm/index.php

<?php
$title = 'Home - Avatar Generator';
require_once 'partials/header.php';

// Handle comment submission
if (isset($_SESSION['user_id']) && $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['comment'])) {
    $comment_text = trim($_POST['comment']);
    if (!empty($comment_text)) {
        try {
            $stmt = db()->prepare("INSERT INTO comments (user_id, comment) VALUES (:user_id, :comment)");
            $stmt->execute(['user_id' => $_SESSION['user_id'], 'comment' => $comment_text]);
        } catch (PDOException $e) {
            // Optional: handle error, e.g., log it or show a generic error message
        }
    }
    // Redirect to the same page to prevent form resubmission
    header("Location: index.php");
    exit;
}

// Fetch comments
$comments = [];
if (isset($_SESSION['user_id'])) {
    try {
        $stmt = db()->query("
            SELECT c.comment, c.created_at, u.username 
            FROM comments c 
            JOIN users u ON c.user_id = u.id 
            ORDER BY c.created_at DESC
        ");
        $comments = $stmt->fetchAll(PDO::FETCH_ASSOC);
    } catch (PDOException $e) {
        // Optional: handle error
    }
}

?>

<?php if (isset($_SESSION['user_id'])): ?>
    <div class="creator-container">
        <h1 class="page-title">Create Your Avatar</h1>
        <p class="page-subtitle">Upload a photo, pick a style, and see the magic.</p>

        <div class="creator-card">
            <div class="creator-column preview-column">
                <div class="image-upload-wrapper">
                    <img src="https://picsum.photos/seed/placeholder-1/800/800" alt="Avatar preview area" id="image-preview" class="image-preview">
                    <div class="upload-overlay">
                        <i data-feather="upload"></i>
                        <span>Upload Photo</span>
                    </div>
                    <input type="file" id="image-upload" accept="image/*" style="display: none;">
                </div>
            </div>
            <div class="creator-column styled-column">
                <div class="styled-preview-wrapper">
                    <img src="https://picsum.photos/seed/placeholder-1/800/800" alt="Styled avatar preview" id="styled-preview" class="styled-preview">
                </div>
            </div>
        </div>

        <div class="styles-gallery">
            <h2 class="gallery-title">Select a Style</h2>
            <div class="styles-grid">
                <div class="style-card active" data-style="pop-art">
                    <img src="https://picsum.photos/seed/style-art/400/400" alt="Pop Art avatar style">
                    <div class="style-name">Pop Art</div>
                </div>
                <div class="style-card" data-style="pixel-art">
                    <img src="https://picsum.photos/seed/style-pixel/400/400" alt="Pixel Art avatar style">
                    <div class="style-name">Pixel Art</div>
                </div>
                <div class="style-card" data-style="sketch">
                    <img src="https://picsum.photos/seed/style-sketch/400/400" alt="Sketch avatar style">
                    <div class="style-name">Sketch</div>
                </div>
                 <div class="style-card" data-style="none">
                    <img src="https://picsum.photos/seed/style-none/400/400" alt="No style">
                    <div class="style-name">None</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Comments Section -->
    <div class="comments-container">
        <h2 class="comments-title">Community Feedback</h2>
        <div class="comment-form-wrapper">
            <form action="index.php" method="POST">
                <div class="form-group">
                    <textarea name="comment" class="form-control" placeholder="Share your thoughts..." required></textarea>
                </div>
                <button type="submit" class="btn btn-primary btn-gradient">Post Comment</button>
            </form>
        </div>

        <div class="comments-list">
            <?php if (empty($comments)): ?>
                <p>No comments yet. Be the first to share your thoughts!</p>
            <?php else: ?>
                <?php foreach ($comments as $comment): ?>
                    <div class="comment-card">
                        <div class="comment-header">
                            <span class="comment-author"><?php echo htmlspecialchars($comment['username']); ?></span>
                            <span class="comment-date"><?php echo date('M j, Y, g:i a', strtotime($comment['created_at'])); ?></span>
                        </div>
                        <div class="comment-body">
                            <p><?php echo htmlspecialchars($comment['comment']); ?></p>
                        </div>
                    </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>
    <!-- End Comments Section -->

<?php else: ?>
    <div class="hero-section">
        <h1>Create Stunning Avatars from Your Photos</h1>
        <p>Join us and start transforming your pictures with unique artistic styles.</p>
        <a href="register.php" class="btn btn-primary btn-gradient">Get Started Now</a>
    </div>
<?php endif; ?>

<?php require_once 'partials/footer.php'; ?>