# Loading Screen Builder

{% hint style="warning" %}
Cette section s'adresse aux **propriétaires** d'instances QuantumLogs.
{% endhint %}

Le Loading Screen Builder vous permet de créer un écran de chargement personnalisé pour votre serveur Garry's Mod, directement depuis l'interface QuantumLogs.

## Accéder au Builder

1. Allez dans **Administration > Extensions**
2. Activez l'extension **GMod Loading Screen**
3. Cliquez sur l'icône **engrenage** pour ouvrir le builder

## Interface du Builder

Le builder est divisé en deux parties :

* **Panneau gauche** : gestion des composants, paramètres globaux et templates
* **Panneau droit** : prévisualisation en temps réel

### Onglet Composants

Depuis cet onglet, vous pouvez :

* **Ajouter un composant** via la palette (grille de boutons par catégorie)
* **Réorganiser** les composants par glisser-déposer
* **Modifier** un composant en cliquant sur l'icône crayon
* **Dupliquer** ou **supprimer** un composant
* **Masquer/afficher** un composant sans le supprimer

### Onglet Style

Configurez les paramètres globaux du loading screen :

* Couleur de fond
* Police par défaut
* Couleurs primaire, secondaire et d'accent
* CSS et JavaScript personnalisé

### Onglet Templates

Appliquez un template prédéfini pour démarrer rapidement :

* **Minimal** : logo, titre et barre de progression
* **Gaming** : fond image, effets glow, tips rotatifs
* **Cinématique** : fond vidéo, design immersif
* **Communauté** : règles, staff en ligne, liens sociaux

{% hint style="warning" %}
Appliquer un template **remplace** votre configuration actuelle. Pensez à sauvegarder avant si besoin.
{% endhint %}

## Composants disponibles

### Arrière-plan

| Composant              | Description                                              |
| ---------------------- | -------------------------------------------------------- |
| **Fond image**         | Image en arrière-plan avec overlay configurable          |
| **Fond vidéo**         | Vidéo en arrière-plan (boucle, muet)                     |
| **Carrousel d'images** | Diaporama d'images avec transition (fondu ou glissement) |

### Contenu

| Composant                | Description                                              |
| ------------------------ | -------------------------------------------------------- |
| **Logo**                 | Logo du serveur (URL d'image)                            |
| **Titre**                | Titre principal et sous-titre                            |
| **Barre de progression** | Barre animée avec 4 styles (classique, rayé, glow, néon) |
| **Info téléchargement**  | Nom du fichier et compteur de fichiers                   |
| **Info serveur**         | Nom du serveur, map, joueurs, gamemode                   |
| **Staff en ligne**       | Liste des membres staff connectés                        |
| **Règles**               | Liste des règles (numérotée ou non)                      |
| **Astuces**              | Tips rotatifs avec intervalle configurable               |
| **Réseaux sociaux**      | Liens Discord, Twitter, YouTube, Twitch, Steam           |

### Média

| Composant           | Description                                      |
| ------------------- | ------------------------------------------------ |
| **Lecteur musique** | Lecteur audio avec playlist, contrôles et volume |

### Avancé

| Composant             | Description                         |
| --------------------- | ----------------------------------- |
| **HTML personnalisé** | Code HTML, CSS et JavaScript custom |

## Carrousel d'images

Le carrousel d'images est un composant d'arrière-plan qui affiche plusieurs images en diaporama avec une transition configurable.

### Configuration

| Option               | Description                               | Par défaut |
| -------------------- | ----------------------------------------- | ---------- |
| **Images**           | Liste d'URLs des images à afficher        | (vide)     |
| **Intervalle**       | Temps entre chaque image (secondes)       | 5          |
| **Transition**       | Type de transition : Fondu ou Glissement  | Fondu      |
| **Durée transition** | Vitesse de la transition (secondes)       | 0.8        |
| **Taille**           | Cover (remplit), Contain (contient), Auto | Cover      |
| **Position**         | Centre, Haut, Bas, Gauche, Droite         | Centre     |
| **Overlay**          | Afficher un filtre de couleur par-dessus  | Oui        |
| **Couleur overlay**  | Couleur du filtre                         | Noir       |
| **Opacité overlay**  | Transparence du filtre (0-100%)           | 30%        |

{% hint style="info" %}
Utilisez des images de haute résolution (1920x1080 minimum) pour un rendu optimal. Les images sont chargées depuis les URLs que vous fournissez - assurez-vous qu'elles sont accessibles publiquement.
{% endhint %}

## Système de positionnement

Chaque composant est placé dans une **zone** sur une grille 3x3 :

```
┌──────────┬──────────┬──────────┐
│ Haut-G   │ Haut-C   │ Haut-D   │
├──────────┼──────────┼──────────┤
│ Milieu-G │ Centre   │ Milieu-D │
├──────────┼──────────┼──────────┤
│ Bas-G    │ Bas-C    │ Bas-D    │
└──────────┴──────────┴──────────┘
```

En plus de la zone, vous pouvez ajuster :

* **Largeur / Hauteur** en pixels
* **Décalage X / Y** pour un positionnement fin
* **Z-Index** pour l'ordre de superposition (les composants avec un z-index plus élevé sont au-dessus)

## Prévisualisation

La prévisualisation est interactive :

* **Cliquez** sur un composant dans la preview pour le sélectionner
* **Double-cliquez** pour l'éditer directement
* Le bouton **Rafraîchir** recharge la preview après vos modifications
* **Plein écran** ouvre la preview dans un nouvel onglet

## Installation sur votre serveur

Une fois votre loading screen configuré, l'URL de votre loading screen est :

```
https://votre-instance.quantumlogs.cloud/loading-screen
```

Configurez cette URL dans votre serveur Garry's Mod :

```
sv_loadingurl "https://votre-instance.quantumlogs.cloud/loading-screen"
```

## Dépannage

### La preview ne s'affiche pas

* Vérifiez que l'extension **GMod Loading Screen** est bien activée
* Videz le cache de votre navigateur et rechargez la page
* Essayez en navigation privée

### Les images ne se chargent pas

* Vérifiez que les URLs des images sont **accessibles publiquement** (pas derrière un login)
* Utilisez le protocole `https://`
* Vérifiez que le serveur hébergeant les images autorise le chargement depuis d'autres domaines (CORS)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docsnew.quantumlogs.cloud/guide-proprietaire-owner/builder.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.