diff --git a/css/video-page.css b/css/video-page.css index b820773..4bc2a9b 100644 --- a/css/video-page.css +++ b/css/video-page.css @@ -1088,3 +1088,101 @@ padding: 10px; } } + +/* Modal de partage */ +.share-link-container { + margin-bottom: 20px; +} + +.share-link-box { + display: flex; + border: 1px solid #ddd; + border-radius: 4px; + overflow: hidden; + margin-top: 8px; +} + +.share-link-box input { + flex: 1; + padding: 10px 12px; + border: none; + font-size: 14px; + color: #333; + background-color: #f9f9f9; +} + +.share-link-box input:focus { + outline: none; + background-color: #fff; +} + +.copy-btn { + background-color: #f5f5f5; + border: none; + border-left: 1px solid #ddd; + color: #555; + padding: 0 15px; + cursor: pointer; + transition: background-color 0.2s; +} + +.copy-btn:hover { + background-color: #e5e5e5; +} + +.copy-btn.copied { + background-color: #4CAF50; + color: white; +} + +.share-platforms-title { + margin-top: 20px; + margin-bottom: 10px; + font-weight: 500; +} + +.share-platforms { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 10px; + margin-bottom: 20px; +} + +.share-platform-btn { + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + color: #333; + padding: 15px 10px; + border-radius: 8px; + background-color: #f5f5f5; + transition: transform 0.2s, background-color 0.2s; +} + +.share-platform-btn:hover { + background-color: #e0e0e0; + transform: translateY(-2px); +} + +.share-platform-btn i { + font-size: 1.5rem; + margin-bottom: 8px; + color: var(--primary-red); +} + +.share-platform-btn span { + font-size: 0.875rem; +} + +.share-embed { + margin-top: 20px; + padding-top: 20px; + border-top: 1px solid #eee; +} + +@media (max-width: 576px) { + .share-platforms { + grid-template-columns: repeat(2, 1fr); + } +} diff --git a/video.php b/video.php index 5091cd1..660ced3 100644 --- a/video.php +++ b/video.php @@ -238,7 +238,7 @@ if (empty($videoData) || isset($videoData['error'])) { - + Partager @@ -483,34 +483,153 @@ if (empty($videoData) || isset($videoData['error'])) { + + + + + Partager la vidéo + + + + + Lien de la vidéo : + + " readonly> + + + + + + + Partager sur : + + " class="share-platform-btn" title="Partager par e-mail"> + + E-mail + + + " target="_blank" class="share-platform-btn" title="Partager sur Facebook"> + + Facebook + + + " target="_blank" class="share-platform-btn" title="Partager sur X/Twitter"> + + X + + + " target="_blank" class="share-platform-btn" title="Partager sur WhatsApp"> + + WhatsApp + + + " target="_blank" class="share-platform-btn" title="Partager sur LinkedIn"> + + LinkedIn + + + &text=" target="_blank" class="share-platform-btn" title="Partager sur Telegram"> + + Telegram + + + + + Intégrer la vidéo : + + " frameborder="0" allowfullscreen>' readonly> + + + + + + + + +
Lien de la vidéo :
Partager sur :
Intégrer la vidéo :