152 lines
4.6 KiB
HTML
152 lines
4.6 KiB
HTML
<div class="embed-page">
|
|
<div class="layout">
|
|
<div class="aside">
|
|
<header class="page-header">
|
|
<h1>Intégration OEDB</h1>
|
|
<p>Générez un code d'intégration pour afficher les événements OEDB sur votre site web</p>
|
|
</header>
|
|
<h2>Comment utiliser</h2>
|
|
<ol>
|
|
<li>Configurez les paramètres ci-dessus selon vos besoins</li>
|
|
<li>Copiez le code généré</li>
|
|
<li>Collez-le dans votre page HTML</li>
|
|
<li>Le script chargera automatiquement les événements depuis l'API OEDB</li>
|
|
</ol>
|
|
|
|
<div class="features">
|
|
<h3>Fonctionnalités</h3>
|
|
<ul>
|
|
<li>✅ Affichage responsive des événements</li>
|
|
<li>✅ Filtrage par type et dates</li>
|
|
<li>✅ Thèmes clair et sombre</li>
|
|
<li>✅ Mise à jour automatique</li>
|
|
<li>✅ Compatible avec tous les navigateurs</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="main">
|
|
<div class="container">
|
|
|
|
<div class="embed-config">
|
|
<div class="config-form">
|
|
<h2>Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="apiUrl">URL de l'API :</label>
|
|
<input
|
|
id="apiUrl"
|
|
type="url"
|
|
[(ngModel)]="config().apiUrl"
|
|
(ngModelChange)="updateConfig()"
|
|
placeholder="https://api.openenventdatabase.org">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="what">Type d'événements :</label>
|
|
<select
|
|
id="what"
|
|
[(ngModel)]="config().what"
|
|
(ngModelChange)="updateConfig()">
|
|
<option value="culture">Culture</option>
|
|
<option value="traffic">Trafic</option>
|
|
<option value="sport">Sport</option>
|
|
<option value="education">Éducation</option>
|
|
<option value="">Tous</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="start">Date de début :</label>
|
|
<input
|
|
id="start"
|
|
type="date"
|
|
[(ngModel)]="config().start"
|
|
(ngModelChange)="updateConfig()">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="end">Date de fin :</label>
|
|
<input
|
|
id="end"
|
|
type="date"
|
|
[(ngModel)]="config().end"
|
|
(ngModelChange)="updateConfig()">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="limit">Nombre d'événements :</label>
|
|
<input
|
|
id="limit"
|
|
type="number"
|
|
[(ngModel)]="config().limit"
|
|
(ngModelChange)="updateConfig()"
|
|
min="1"
|
|
max="1000">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="width">Largeur :</label>
|
|
<input
|
|
id="width"
|
|
type="text"
|
|
[(ngModel)]="config().width"
|
|
(ngModelChange)="updateConfig()"
|
|
placeholder="100%">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="height">Hauteur :</label>
|
|
<input
|
|
id="height"
|
|
type="text"
|
|
[(ngModel)]="config().height"
|
|
(ngModelChange)="updateConfig()"
|
|
placeholder="400px">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="theme">Thème :</label>
|
|
<select
|
|
id="theme"
|
|
[(ngModel)]="config().theme"
|
|
(ngModelChange)="updateConfig()">
|
|
<option value="light">Clair</option>
|
|
<option value="dark">Sombre</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="embedType">Type d'intégration :</label>
|
|
<select
|
|
id="embedType"
|
|
[(ngModel)]="config().embedType"
|
|
(ngModelChange)="updateConfig()">
|
|
<option value="iframe">Iframe (recommandé pour intégration simple)</option>
|
|
<option value="script">Script JavaScript (plus flexible)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-output">
|
|
<div class="code-header">
|
|
<h2>Code d'intégration</h2>
|
|
<div class="code-actions">
|
|
<button class="btn btn-secondary" (click)="preview()">Aperçu</button>
|
|
<button class="btn btn-primary" (click)="copyToClipboard()">Copier</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="code-container">
|
|
<pre><code>{{generatedCode()}}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="usage-info">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|