<!-- Création campagne InstantMARK Start -->
<div class="container-xxl py-5 px-0 wow fadeInUp" data-wow-delay="0.1s">
<div class="row g-0">
<!-- Vidéo explicative -->
<div class="col-md-6">
<div class="video">
<button type="button" class="btn-play" data-bs-toggle="modal"
data-src="https://www.youtube.com/embed/DWRcNpR6Kdc"
data-bs-target="#videoModal">
<span></span>
</button>
</div>
</div>
<!-- Formulaire -->
<div class="col-md-6 bg-dark d-flex align-items-center">
<div class="p-5 wow fadeInUp" data-wow-delay="0.2s">
<h5 class="section-title ff-secondary text-start text-primary fw-normal">
InstantMARK
</h5>
<h1 class="text-white mb-4">
Créer une campagne publicitaire
</h1>
<form>
<div class="row g-3">
<!-- Nom campagne -->
<div class="col-md-6">
<div class="form-floating">
<input type="text" class="form-control" id="campaign_name"
placeholder="Nom de la campagne">
<label for="campaign_name">
<i class="fa fa-bullhorn me-2"></i>Nom de la campagne
</label>
</div>
</div>
<!-- Budget -->
<div class="col-md-6">
<div class="form-floating">
<input type="number" class="form-control" id="budget"
placeholder="Budget">
<label for="budget">
<i class="fa fa-coins me-2"></i>Budget (€)
</label>
</div>
</div>
<!-- Date début -->
<div class="col-md-6">
<div class="form-floating">
<input type="date" class="form-control" id="start_date">
<label for="start_date">
<i class="fa fa-calendar-day me-2"></i>Date de début
</label>
</div>
</div>
<!-- Date fin -->
<div class="col-md-6">
<div class="form-floating">
<input type="date" class="form-control" id="end_date">
<label for="end_date">
<i class="fa fa-calendar-check me-2"></i>Date de fin
</label>
</div>
</div>
<!-- Objectif -->
<div class="col-md-6">
<div class="form-floating">
<select class="form-select" id="objective">
<option value="traffic">Trafic</option>
<option value="impressions">Impressions</option>
<option value="conversions">Conversions</option>
<option value="branding">Notoriété</option>
</select>
<label for="objective">
<i class="fa fa-crosshairs me-2"></i>Objectif
</label>
</div>
</div>
<!-- Type diffusion -->
<div class="col-md-6">
<div class="form-floating">
<select class="form-select" id="delivery">
<option value="sites">Sites partenaires</option>
<option value="zones">Zones publicitaires</option>
<option value="banners">Bannières</option>
</select>
<label for="delivery">
<i class="fa fa-layer-group me-2"></i>Type de diffusion
</label>
</div>
</div>
<!-- Description -->
<div class="col-12">
<div class="form-floating">
<textarea class="form-control"
placeholder="Description de la campagne"
id="description"
style="height: 110px"></textarea>
<label for="description">
<i class="fa fa-align-left me-2"></i>Description
</label>
</div>
</div>
<!-- CTA -->
<div class="col-12">
<button class="btn btn-primary w-100 py-3" type="submit">
<i class="fa fa-rocket me-2"></i>Lancer la campagne
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Création campagne InstantMARK End -->
<!-- Modal Vidéo -->
<div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content rounded-0">
<div class="modal-header">
<h5 class="modal-title">Présentation InstantMARK</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<div class="ratio ratio-16x9">
<iframe id="video" src="" allowfullscreen allow="autoplay"></iframe>
</div>
</div>
</div>
</div>
</div>