Mon compte

Profil Utilisateur – G-Live Synergy

<style>
    :root {
        --bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
        --card-bg: rgba(255, 255, 255, 0.03);
        --card-border: rgba(255, 255, 255, 0.08);
        --text-main: #f8fafc;
        --text-muted: #94a3b8;
        --accent-color: #6366f1;
        --accent-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    }

    body {
        font-family: 'Inter', sans-serif;
        background: var(--bg-gradient);
        color: var(--text-main);
        min-height: 100vh;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .profile-container {
        width: 100%;
        max-width: 550px;
        background: var(--card-bg);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid var(--card-border);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        display: none; /* Affiché uniquement après le chargement AJAX */
    }

    .profile-cover {
        height: 160px;
        background: var(--accent-gradient);
        position: relative;
    }

    .avatar-wrapper {
        position: absolute;
        bottom: -50px;
        left: 32px;
    }

    .profile-avatar {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        border: 4px solid #1e1b4b;
        object-fit: cover;
        background: #0f172a;
    }

    .profile-body {
        padding: 65px 32px 32px 32px;
    }

    .profile-header h1 {
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 4px 0;
        letter-spacing: -0.5px;
    }

    .profile-username {
        color: var(--accent-color);
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 24px;
    }

    .profile-section-title {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--text-muted);
        margin-bottom: 12px;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .profile-fields {
        display: flex;
        flex-direction: column;
        gap: 16px;
        background: rgba(255, 255, 255, 0.02);
        padding: 20px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.04);
    }

    .field-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .field-label {
        font-size: 11px;
        color: var(--text-muted);
        font-weight: 600;
    }

    .field-value {
        font-size: 14px;
        color: var(--text-main);
    }

    /* Loader */
    .loader {
        border: 4px solid rgba(255, 255, 255, 0.1);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border-left-color: var(--accent-color);
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<!-- Indicateur de chargement -->
<div class="loader" id="profile-loader"></div>

<!-- Conteneur de profil -->
<div class="profile-container" id="profile-card">
    <div class="profile-cover">
        <div class="avatar-wrapper">
            <img src="" alt="Avatar" class="profile-avatar" id="user-avatar">
        </div>
    </div>

    <div class="profile-body">
        <div class="profile-header">
            <h1 id="user-display-name">Chargement...</h1>
            <div class="profile-username" id="user-mention-name">@username</div>
        </div>

        <div class="profile-section-title">
            <i class="fa-regular fa-user"></i> Informations Générales
        </div>

        <!-- Les champs personnalisés de BuddyPress (XProfile) s'injecteront ici -->
        <div class="profile-fields" id="xprofile-data">
            <!-- Injecté dynamiquement -->
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // REMPLACEZ ICI : ID de l'utilisateur BuddyPress à afficher (ex: 1 pour l'admin)
        const userId = 1; 

        // URL de l'API REST de votre site BuddyPress
        const apiUrl = `https://glivesynergy.com/wp-json/buddypress/v1/members/${userId}?context=view`;

        $.ajax({
            url: apiUrl,
            method: 'GET',
            dataType: 'json',
            success: function(user) {
                // 1. Remplissage des données de base
                $('#user-display-name').text(user.name);
                $('#user-mention-name').text('@' + user.mention_name);

                if (user.avatar && user.avatar.full) {
                    $('#user-avatar').attr('src', user.avatar.full);
                } else {
                    $('#user-avatar').attr('src', 'https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y');
                }

                // 2. Récupération et affichage des champs XProfile complets
                let fieldsHtml = '';
                if (user.xprofile && user.xprofile.groups) {
                    user.xprofile.groups.forEach(function(group) {
                        if (group.fields) {
                            group.fields.forEach(function(field) {
                                if (field.value && field.value.rendered) {
                                    fieldsHtml += `
                                        <div class="field-item">
                                            <div class="field-label">${field.name}</div>
                                            <div class="field-value">${field.value.rendered}</div>
                                        </div>
                                    `;
                                }
                            });
                        }
                    });
                }

                // Si aucun champ personnalisé n'est rempli
                if (fieldsHtml === '') {
                    fieldsHtml = '<div class="field-value" style="color: var(--text-muted);">Aucune information supplémentaire.</div>';
                }

                $('#xprofile-data').html(fieldsHtml);

                // 3. Affichage de la carte et masquage du loader
                $('#profile-loader').fadeOut(300, function() {
                    $('#profile-card').fadeIn(400);
                });
            },
            error: function(xhr, status, error) {
                console.error("Erreur de récupération du profil :", error);
                $('#user-display-name').text("Erreur de chargement");
                $('#user-mention-name').text("Impossible de récupérer le profil");
                $('#profile-loader').hide();
                $('#profile-card').show();
            }
        });
    });
</script>