[Django série Ep.4] Mise en place des Templates

<i class="fas fa-envelope"></i> <span class="social-btn-text">Email</span> </a>  <button onclick="copyToClipboard('https://www.duhaz.fr/blog/django-serie-ep4-mise-en-place-des-templates')" class="social-btn social-btn-copy" title="Copier le lien"> <i class="fas fa-link"></i> <span class="social-btn-text">Copier</span> </button> </div>  <div id="copy-notification" class="copy-notification"> <i class="fas fa-check-circle"></i> Lien copié ! </div> </div> <style> /* Container principal */ .social-share-container { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; padding: 25px; margin: 30px 0; box-shadow: 0 4px 15px rgba(0,0,0,0.1); } .social-share-title { font-size: 1.2rem; font-weight: 600; color: #2c3e50; margin-bottom: 20px; text-align: center; } .social-share-title i { margin-right: 8px; color: #3498db; } /* Grille de boutons */ .social-share-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } /* Style des boutons */ .social-btn { display: flex; align-items: center; justify-content: center; padding: 12px 16px; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; text-decoration: none; color: white; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .social-btn:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.25); color: white; text-decoration: none; } .social-btn i { font-size: 1.2rem; margin-right: 8px; } /* Couleurs spécifiques par réseau */ .social-btn-twitter { background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%); } .social-btn-facebook { background: linear-gradient(135deg, #1877F2 0%, #0d5dbf 100%); } .social-btn-linkedin { background: linear-gradient(135deg, #0077B5 0%, #005885 100%); } .social-btn-whatsapp { background: linear-gradient(135deg, #25D366 0%, #1da851 100%); } .social-btn-reddit { background: linear-gradient(135deg, #FF4500 0%, #cc3700 100%); } .social-btn-email { background: linear-gradient(135deg, #6c757d 0%, #545b62 100%); } .social-btn-copy { background: linear-gradient(135deg, #6c5ce7 0%, #5849c9 100%); } /* Notification de copie */ .copy-notification { display: none; position: fixed; bottom: 30px; right: 30px; background: #2ecc71; color: white; padding: 15px 25px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); font-weight: 600; z-index: 9999; animation: slideIn 0.3s ease; } .copy-notification i { margin-right: 8px; } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Responsive */ @media (max-width: 768px) { .social-share-buttons { grid-template-columns: repeat(2, 1fr); } .social-btn-text { display: inline; } .copy-notification { bottom: 20px; right: 20px; font-size: 0.9rem; padding: 12px 20px; } } @media (max-width: 480px) { .social-share-container { padding: 20px 15px; margin: 20px 0; } .social-share-buttons { grid-template-columns: 1fr; gap: 10px; } .social-btn { padding: 14px; font-size: 1rem; } } </style> <script> // Fonction pour copier le lien dans le presse-papiers function copyToClipboard(url) { // Méthode moderne avec l'API Clipboard if (navigator.clipboard && window.isSecureContext) { navigator.clipboard.writeText(url).then(function() { showCopyNotification(); }).catch(function(err) { console.error('Erreur lors de la copie:', err); fallbackCopyToClipboard(url); }); } else { // Fallback pour les navigateurs plus anciens fallbackCopyToClipboard(url); } } // Méthode alternative de copie function fallbackCopyToClipboard(text) { const textArea = document.createElement("textarea"); textArea.value = text; textArea.style.position = "fixed"; textArea.style.left = "-999999px"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { document.execCommand('copy'); showCopyNotification(); } catch (err) { console.error('Erreur lors de la copie:', err); alert('Impossible de copier le lien automatiquement. Veuillez le copier manuellement.'); } document.body.removeChild(textArea); } // Afficher la notification de copie function showCopyNotification() { const notification = document.getElementById('copy-notification'); notification.style.display = 'block'; setTimeout(function() { notification.style.display = 'none'; }, 3000); } </script>  </div> </div> </div> <div class="col-lg-3 p-lg-1 p-md-0 mb-sm-1"> <div class="card" style="background-color: rgba(250,250,250,0.88);" > <div class="card" style="background-color: rgba(250,250,250,0.88);" > <div class="card-body"> <p> <b>Nombre de Lectures </b>: 2053<br> <b>Date de mise en ligne </b>: 09 sept. 2019 à 14:30 </p> <h4> Les Catégories </h4> <p> <a href="/blog/tag/django" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">Django</a> <a href="/blog/tag/youtube" class="btn btn-dark mb-2" tabindex="-1" role="button" aria-disabled="true">Youtube</a> </p> </div> </div> <div class="card-body"> <h5 class="card-title"> Une Pub </h5> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0171697375250839" data-ad-slot="9918621322" data-ad-format="auto" data-full-width-responsive="true"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> </main> <footer class="footer mt-auto py-1 text-white" style="background-color: #220A8C;"> <div class="container"> Blog.Duhaz.fr - Nov. 2024 <a class="link-light" href="https://www.defiscoquins.fr">Découvrez mon Jeu Coquin</a>, <a class="link-light" href="https://tools.duhaz.fr">Ma boite à outil</a>, <a class="link-light" href="https://feeds.duhaz.fr">Mon Syndicateur de Flux</a>, <a class="link-light" href="https://dev.duhaz.fr/MrDuhaz/Blog-Duhaz/src/main/README.md">Changelog</a>, <a class="link-light" href="https://github.com/laurentdu51?tab=repositories">Dev Duhaz</a>, <a class="link-light" href="https://ia.duhaz.fr">ia.duhaz.fr</a> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script> </body> </html>