<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Created et coded by @Arbou | Discord : arbou -->
<!-- Created et coded by @Arbou | Discord : arbou -->
<!-- Created et coded by @Arbou | Discord : arbou -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="theme-color" content="#ffffff">
<meta name="author" content="Arbou">
<!-- Méta pour SEO -->
<meta name="description" content="Description de la page pour les réseaux sociaux">
<meta property="og:title" content="Titre de la page">
<meta property="og:description" content="Description de la page pour les réseaux sociaux">
<meta property="og:image" content="URL de l'image à afficher">
<link rel="canonical" href="URL-canonical-de-la-page">
<meta name="keywords" content="Mots-clés, pour, le, référencement">
<!-- Titre -->
<title>{% block title %}SVS{% endblock %}</title>
<!-- Balise de favicon avec plusieurs formats -->
<link rel="icon" href="{{asset('/logo.ico')}}" type="image/x-icon">
<link rel="icon" href="{{asset('/logo.png')}}" type="image/png">
<!-- Link Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
<!-- Link loader css -->
<link rel="stylesheet" href="{{asset('css/loader.css')}}">
<!-- Link Fontawesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
<!-- Link Main CSS -->
<link rel="stylesheet" href="{{asset('css/main4.css')}}">
<!-- Load library TYPED from the CDN -->
<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<!-- Media query for this web site coded by @arbou -->
<link rel="stylesheet" href="{{asset('css/mediaquery.css')}}">
</head>
<body>
<style>
.share {
opacity:0.5!important;
}
</style>
<!-- Loader -->
{% include "AppTemplates/layout/loader.html.twig" %}
<!-- Header -->
{% include "AppTemplates/layout/header.html.twig" %}
<!-- Main -->
<main>
<!-- Link Swiper's JS & CSS Here to get performance-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<!-- block body Here -->
{% block body %}{% endblock %}
</main>
<!-- navigation button -->
{% include "AppTemplates/layout/share/index.html.twig" %}
{% include "AppTemplates/layout/topTop.html.twig" %}
<!-- Footer -->
{% include "AppTemplates/layout/footer.html.twig" %}
{% include "AppTemplates/layout/end/index.html.twig" %}
<!-- run Script LOGO -->
{% block logo %}
<script src="{{asset('js/logo.js')}}"></script>
{% endblock %}
<!-- run Script Loader -->
<script src="{{asset('js/loader.js')}}"></script>
{% if uri != 'contact' and uri != 'galerie' %}
<!-- Load library AOS from the CDN -->
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css">
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<div class="videoViewed">
<span class="fermerVideo"><i class="far fa-window-close"></i></span>
<video controls id="videoPlayer" class="plyr">
{% if uri == 'v1.svs-dz.com' %}
{% endif %}
{% if uri == 'gardiennage' %}
<source src="{{asset('/mp4/5.mp4')}}" type="video/mp4">
{% endif %}
{% if uri == 'evenementiel' %}
<source src="{{asset('/mp4/4.mp4')}}" type="video/mp4">
{% endif %}
{% if uri == 'transport de fond' %}
<source src="{{asset('/mp4/2.mp4')}}" type="video/mp4">
{% endif %}
{% if uri == 'produits sensible' %}
<source src="{{asset('/mp4/7.mp4')}}" type="video/mp4">
{% endif %}
</video>
</div>
{% if uri == 'gardiennage' %}
<div class="videoViewed2">
<span class="fermerVideo2"><i class="far fa-window-close"></i></span>
<video controls id="videoPlayer2" class="plyr2">
<source src="{{asset('/mp4/1.mp4')}}" type="video/mp4">
</video>
</div>
{% endif %}
{% if uri == 'evenementiel' %}
<div class="videoViewed2">
<span class="fermerVideo2"><i class="far fa-window-close"></i></span>
<video controls id="videoPlayer2" class="plyr2">
<source src="{{asset('/mp4/6.mp4')}}" type="video/mp4">
</video>
</div>
{% endif %}
<script>
// run la video
const player = new Plyr('.plyr');
// la vidéo
var video = document.querySelector('.videoViewed')
// le button regarder la video
var playBtn = document.querySelector('.play-btn');
// quand tu click sur le button;
playBtn.addEventListener('click', function() {
console.log('ok bibina');
video.setAttribute('style', 'display:flex');
})
const videoPlayer = document.getElementById('videoPlayer');
fermerVideo = document.querySelector('.fermerVideo');
fermerVideo.addEventListener('click', function() {
console.log('nn');
video.removeAttribute('style');
videoPlayer.pause();
})
</script>
<script>
// run la video
const player2 = new Plyr('.plyr2');
// la vidéo
var video2 = document.querySelector('.videoViewed2')
// le button regarder la video
var playBtn2 = document.querySelector('.play-btn2');
// quand tu click sur le button;
playBtn2.addEventListener('click', function() {
console.log('ok bibina');
video2.setAttribute('style', 'display:flex');
})
const videoPlayer2 = document.getElementById('videoPlayer2');
fermerVideo2 = document.querySelector('.fermerVideo2');
fermerVideo2.addEventListener('click', function() {
console.log('nn');
video2.removeAttribute('style');
videoPlayer2.pause();
})
</script>
{% endif %}
<!-- Load library Lozad from the CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<!-- Init -->
<script>
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // Syntaxe similaire à celle des marges CSS
threshold: 0.1, // Ratio de convergence de l'élément
enableAutoReload: true // Rechargera la nouvelle image en cas de modification des attributs valides
});
observer.observe();
</script>
<!-- Load library AOS from the CDN -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Init -->
<script>
AOS.init({
// Global settings:
});
</script>
</body>
</html>