# Template GOTW

{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/itmbe-gotw>
{% endhint %}

## Sections

1. [Habillage](#habillage)
2. [Animation](#animations)
3. [Dotations](#dotations)
4. [Résumé](#resume)

***

## Habillage

La template consiste, pour tous les écrans, en un container centré responsive. Par défaut, la campagne est aux couleurs d'Intermarché mais, sont personnalisables :

1. Le **fond de la page**
   * peut être une couleur unie (<mark style="color:$success;">Hexa, RGB ou CMYK</mark> à fournir) ;
   * et/ou une image (<mark style="color:$success;">jpeg, png ou gif</mark>, idéalement en <mark style="color:orange;">1920x1080px</mark> - attention au poids de l'image pour éviter un long temps de chargement côté clients, <mark style="color:$danger;">maximum 1.5Mo</mark>).
2. Le **logo**
   * <mark style="color:$success;">jpeg, png, gif ou svg</mark>, ne devrait pas dépasser <mark style="color:orange;">500px de large</mark> et <mark style="color:$danger;">maximum 0.35Mo</mark>.
3. Les **couleurs** du thème
   * Couleur 1 : background bouton initial ;
   * Couleur 2 : background survol bouton + background footer ;
   * Couleur 3 : couleur du texte (hors boutons et footer qui sont blancs).
4. Le(s) **picto(s)** de la (des) dotation(s)
   * <mark style="color:$success;">jpeg, png, gif ou svg</mark>, ratio 1:1 *(carré)*, ne devrait pas dépasser <mark style="color:orange;">300px de côté</mark> et <mark style="color:$danger;">maximum 0.25Mo</mark> chacun.
5. Les visuels de l'**animation** (voir [point dédié](#animation)).

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2F1Bi5Zew7lhwsqAZzydNa%2Fstructure.png?alt=media&#x26;token=352b22bb-3884-474d-ab46-bf67bc0f1a8c" alt=""><figcaption><p>Habillage par défaut (couleurs 1: rouge #E30613, 2: noir #000000 et 3: noir #000000)</p></figcaption></figure>

<figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FxsTtj0hJ7RlWGe9qZice%2Fexemple.png?alt=media&#x26;token=62e8f38e-c7e5-4063-804e-2ac18bc82cf3" alt=""><figcaption><p>Exemple Chiquita (avec logo png, fond png, pictos par défaut et couleurs 1: bleu #005CA8, 2: fushia #E6007E et 3: noir #000000)</p></figcaption></figure>

***

## Animation

Il est possible de choisir entre 3 animations <mark style="color:purple;">(1)</mark> pour la campagne, sans que cette décision n'influence la distribution des lots. Les spécificités de chacune sont comme suit :

{% tabs %}
{% tab title="Carte à gratter" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/game-demo/game/scratch-card>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation                   | Type                | Taille    | Spécificités                                              |
| ----------------------------- | ------------------- | --------- | --------------------------------------------------------- |
| Overlay (visuel à gratter)    | Image (jpeg ou png) | 550x380px | *<mark style="color:$danger;">Pas</mark> de transparence* |
| Win (affiché si jeu gagnant)  | Image (jpeg ou png) | 550x380px | /                                                         |
| Lose (affiché si jeu perdant) | Image (jpeg ou png) | 550x380px | /                                                         |
| Cursor (grattoir)             | Image (jpeg ou png) | 128x128px | Carré (ratio 1:1)                                         |

<div><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FRxsietgo3R3UBiM6DkPS%2Foverlay.png?alt=media&#x26;token=24f29efd-8de0-451d-83db-2583072c2b8e" alt="" width="275"><figcaption><p>Overlay</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FrjPe11Oc73M0smCfTm9s%2Fwin.png?alt=media&#x26;token=22078ac1-2909-4433-aa25-2b94c469f6c9" alt="" width="275"><figcaption><p>Win</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FJHg4VXmbtxLKKO8HwT5L%2Flose.png?alt=media&#x26;token=5d17c5d1-61a9-48c9-b65c-18e5df43f8ff" alt="" width="275"><figcaption><p>Lose</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FQI26D9KtMBO2d2hd0wGH%2Fcursor.png?alt=media&#x26;token=ad7e4a62-3cd2-4a92-91ca-ef162f8dc9b5" alt="" width="96"><figcaption><p>Cursor</p></figcaption></figure></div>
{% endtab %}

{% tab title="Puzzle" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/game-demo/game/swapper>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation                   | Type                | Taille    | Spécificités                                              |
| ----------------------------- | ------------------- | --------- | --------------------------------------------------------- |
| Overlay (visuel à assembler)  | Image (jpeg ou png) | 550x380px | *<mark style="color:$danger;">Pas</mark> de transparence* |
| Win (affiché si jeu gagnant)  | Image (jpeg ou png) | 550x380px | /                                                         |
| Lose (affiché si jeu perdant) | Image (jpeg ou png) | 550x380px | /                                                         |

<div><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FRxsietgo3R3UBiM6DkPS%2Foverlay.png?alt=media&#x26;token=24f29efd-8de0-451d-83db-2583072c2b8e" alt="" width="275"><figcaption><p>Overlay</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FrjPe11Oc73M0smCfTm9s%2Fwin.png?alt=media&#x26;token=22078ac1-2909-4433-aa25-2b94c469f6c9" alt="" width="275"><figcaption><p>Win</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FJHg4VXmbtxLKKO8HwT5L%2Flose.png?alt=media&#x26;token=5d17c5d1-61a9-48c9-b65c-18e5df43f8ff" alt="" width="275"><figcaption><p>Lose</p></figcaption></figure></div>
{% endtab %}

{% tab title="Roue de la Fortune" %}
{% hint style="info" %}
Démo technique : <https://campaigns.lucky-cycle.com/game-demo/game/wheel>
{% endhint %}

Options de configuration <mark style="color:yellow;">(si souhaité, sinon utilisation des éléments</mark> <mark style="color:yellow;"></mark>*<mark style="color:yellow;">"par défaut"</mark>*<mark style="color:yellow;">)</mark> :

| Utilisation               | Type                | Taille    | Spécificités                                                                                                                                                                                                                                                                                                  |
| ------------------------- | ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Wheel (visuel de la roue) | Image (jpeg ou png) | 550x550px | *Le visuel doit être <mark style="color:$danger;">carré</mark> (ratio 1:1) avec la <mark style="color:$danger;">roue centrée.</mark> Les quartiers doivent tous être <mark style="color:$danger;">de taille égale</mark>, et <mark style="color:$danger;">débuter "à midi" (ligne verticale centrée)</mark>*. |
| Pin (curseur)             | Image (jpeg ou png) | 120x120px | /                                                                                                                                                                                                                                                                                                             |

<div><figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2FA2op9zaHmXCM2paXP4y0%2Fwheel.png?alt=media&#x26;token=d7f87228-d201-4d49-9d1b-12995fe536bc" alt="" width="275"><figcaption><p>Wheel</p></figcaption></figure> <figure><img src="https://1348461095-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FVBHaiCriYcHHW6Ut47cr%2Fuploads%2Fi08XVHsGeuVeRBe1O35T%2Fpin.png?alt=media&#x26;token=d50dcf6e-1898-435b-aa54-483a61792eaa" alt="" width="90"><figcaption><p>Pin</p></figcaption></figure></div>
{% endtab %}
{% endtabs %}

***

## Dotations

Il est possible de distribuer jusqu'à 3 dotations "bon de réduction" différentes <mark style="color:purple;">(1-3)</mark> par campagne, et, sont à préciser pour chacune :

* la valeur (€) ;
* la quantité à mettre en jeu ;
* les libellés (FR+NL) à afficher au client ;
* *Optionnel :* nom du visuel à utiliser comme picto <mark style="color:purple;">(visuel à fournir, voir</mark> [*<mark style="color:purple;">Habillage</mark>*](#habillage)*<mark style="color:purple;">, point 4</mark>*<mark style="color:purple;">)</mark>.

***Exemple de tableau basé sur les données de l'exemple plus haut :***

<table data-full-width="false"><thead><tr><th data-type="number">Valeur</th><th data-type="number">Quantité</th><th>Libellé FR</th><th>Libellé NL</th><th>Visuel Picto</th></tr></thead><tbody><tr><td>1.5</td><td>100</td><td>1,50€ de réduction</td><td>€1,50 korting</td><td><em>mon_picto_perso_1.png</em></td></tr><tr><td>3</td><td>50</td><td>3€ de réduction</td><td>€3 korting</td><td>/ <mark style="color:yellow;">(défaut)</mark></td></tr></tbody></table>

***

## Résumé

<mark style="color:$danger;">Obligatoire</mark> :

* [x] Animation : choix parmi la liste ;
* [x] Dotations : listing avec valeur, quantité et libellés.

<mark style="color:blue;">Optionnel</mark> :

* [ ] Fond de la page : couleur et/ou image ;
* [ ] Logo : image ;
* [ ] Couleurs du thème ;
* [ ] Animation : visuels personnalisés ;
* [ ] Picto(s) de la (des) dotation(s) *+ préciser à quel lot rattacher*.


---

# Agent Instructions: 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://doc.lucky-cycle.com/campaigns/index/template-gotw.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.