templates/erreur404.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Page non trouvée - Erreur 404</title>
  7.     <style>
  8.         * {
  9.             margin: 0;
  10.             padding: 0;
  11.             box-sizing: border-box;
  12.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  13.         }
  14.         
  15.         body {
  16.             background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
  17.             color: #fff;
  18.             min-height: 100vh;
  19.             display: flex;
  20.             flex-direction: column;
  21.             align-items: center;
  22.             justify-content: center;
  23.             text-align: center;
  24.             padding: 20px;
  25.             overflow-x: hidden;
  26.         }
  27.         
  28.         .container {
  29.             max-width: 800px;
  30.             width: 100%;
  31.             padding: 40px;
  32.             background: rgba(255, 255, 255, 0.1);
  33.             backdrop-filter: blur(10px);
  34.             border-radius: 20px;
  35.             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  36.             border: 1px solid rgba(255, 255, 255, 0.1);
  37.             position: relative;
  38.             overflow: hidden;
  39.         }
  40.         
  41.         .error-code {
  42.             font-size: 150px;
  43.             font-weight: 900;
  44.             line-height: 1;
  45.             margin-bottom: 20px;
  46.             text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
  47.             animation: pulse 2s infinite;
  48.         }
  49.         
  50.         h1 {
  51.             font-size: 2.5rem;
  52.             margin-bottom: 20px;
  53.             font-weight: 700;
  54.         }
  55.         
  56.         p {
  57.             font-size: 1.2rem;
  58.             margin-bottom: 30px;
  59.             line-height: 1.6;
  60.             max-width: 600px;
  61.             margin-left: auto;
  62.             margin-right: auto;
  63.         }
  64.         
  65.         .buttons {
  66.             display: flex;
  67.             justify-content: center;
  68.             gap: 20px;
  69.             flex-wrap: wrap;
  70.             margin-top: 30px;
  71.         }
  72.         
  73.         .btn {
  74.             padding: 15px 30px;
  75.             border-radius: 50px;
  76.             text-decoration: none;
  77.             font-weight: 600;
  78.             font-size: 1rem;
  79.             transition: all 0.3s ease;
  80.             display: inline-flex;
  81.             align-items: center;
  82.             justify-content: center;
  83.             cursor: pointer;
  84.             border: none;
  85.         }
  86.         
  87.         .btn-primary {
  88.             background: #fff;
  89.             color: #6a11cb;
  90.             box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  91.         }
  92.         
  93.         .btn-secondary {
  94.             background: transparent;
  95.             color: #fff;
  96.             border: 2px solid rgba(255, 255, 255, 0.5);
  97.         }
  98.         
  99.         .btn:hover {
  100.             transform: translateY(-5px);
  101.             box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  102.         }
  103.         
  104.         .btn-primary:hover {
  105.             background: #f0f0f0;
  106.         }
  107.         
  108.         .btn-secondary:hover {
  109.             background: rgba(255, 255, 255, 0.1);
  110.             border-color: #fff;
  111.         }
  112.         
  113.         .search-box {
  114.             max-width: 500px;
  115.             margin: 30px auto;
  116.             display: flex;
  117.             background: rgba(255, 255, 255, 0.2);
  118.             border-radius: 50px;
  119.             overflow: hidden;
  120.             padding: 5px;
  121.         }
  122.         
  123.         .search-box input {
  124.             flex: 1;
  125.             padding: 15px 20px;
  126.             border: none;
  127.             background: transparent;
  128.             color: #fff;
  129.             font-size: 1rem;
  130.             outline: none;
  131.         }
  132.         
  133.         .search-box input::placeholder {
  134.             color: rgba(255, 255, 255, 0.7);
  135.         }
  136.         
  137.         .search-box button {
  138.             padding: 15px 25px;
  139.             background: #fff;
  140.             color: #6a11cb;
  141.             border: none;
  142.             border-radius: 50px;
  143.             font-weight: 600;
  144.             cursor: pointer;
  145.             transition: all 0.3s ease;
  146.         }
  147.         
  148.         .search-box button:hover {
  149.             background: #f0f0f0;
  150.         }
  151.         
  152.         .animation-container {
  153.             position: absolute;
  154.             top: 0;
  155.             left: 0;
  156.             width: 100%;
  157.             height: 100%;
  158.             z-index: -1;
  159.             overflow: hidden;
  160.         }
  161.         
  162.         .circle {
  163.             position: absolute;
  164.             border-radius: 50%;
  165.             background: rgba(255, 255, 255, 0.1);
  166.             animation: float 15s infinite linear;
  167.         }
  168.         
  169.         .circle:nth-child(1) {
  170.             width: 100px;
  171.             height: 100px;
  172.             top: 10%;
  173.             left: 10%;
  174.             animation-delay: 0s;
  175.         }
  176.         
  177.         .circle:nth-child(2) {
  178.             width: 150px;
  179.             height: 150px;
  180.             top: 60%;
  181.             left: 80%;
  182.             animation-delay: 2s;
  183.         }
  184.         
  185.         .circle:nth-child(3) {
  186.             width: 70px;
  187.             height: 70px;
  188.             top: 80%;
  189.             left: 20%;
  190.             animation-delay: 4s;
  191.         }
  192.         
  193.         .circle:nth-child(4) {
  194.             width: 120px;
  195.             height: 120px;
  196.             top: 30%;
  197.             left: 70%;
  198.             animation-delay: 6s;
  199.         }
  200.         
  201.         .circle:nth-child(5) {
  202.             width: 90px;
  203.             height: 90px;
  204.             top: 50%;
  205.             left: 10%;
  206.             animation-delay: 8s;
  207.         }
  208.         
  209.         @keyframes float {
  210.             0% {
  211.                 transform: translateY(0) rotate(0deg);
  212.                 opacity: 1;
  213.             }
  214.             100% {
  215.                 transform: translateY(-1000px) rotate(720deg);
  216.                 opacity: 0;
  217.             }
  218.         }
  219.         
  220.         @keyframes pulse {
  221.             0% {
  222.                 transform: scale(1);
  223.             }
  224.             50% {
  225.                 transform: scale(1.05);
  226.             }
  227.             100% {
  228.                 transform: scale(1);
  229.             }
  230.         }
  231.         
  232.         .icon {
  233.             font-size: 1.5rem;
  234.             margin-right: 10px;
  235.         }
  236.         
  237.         @media (max-width: 768px) {
  238.             .error-code {
  239.                 font-size: 120px;
  240.             }
  241.             
  242.             h1 {
  243.                 font-size: 2rem;
  244.             }
  245.             
  246.             p {
  247.                 font-size: 1rem;
  248.             }
  249.             
  250.             .buttons {
  251.                 flex-direction: column;
  252.                 align-items: center;
  253.             }
  254.             
  255.             .btn {
  256.                 width: 100%;
  257.                 max-width: 300px;
  258.             }
  259.         }
  260.         
  261.         @media (max-width: 480px) {
  262.             .error-code {
  263.                 font-size: 100px;
  264.             }
  265.             
  266.             h1 {
  267.                 font-size: 1.8rem;
  268.             }
  269.             
  270.             .container {
  271.                 padding: 30px 20px;
  272.             }
  273.         }
  274.     </style>
  275. </head>
  276. <body>
  277.     <div class="animation-container">
  278.         <div class="circle"></div>
  279.         <div class="circle"></div>
  280.         <div class="circle"></div>
  281.         <div class="circle"></div>
  282.         <div class="circle"></div>
  283.     </div>
  284.     
  285.     <div class="container">
  286.         <div class="error-code">404</div>
  287.         <h1>Oups ! Page non trouvée</h1>
  288.         <p>Désolé, la page que vous recherchez n'existe pas ou a été déplacée. 
  289.         Contactez notre support.</p>
  290.         <div class="buttons">
  291.             <a href="mailto:support@cimef-technologies.com" class="btn btn-secondary">
  292.                 <span class="icon">✉️</span> Contacter le support
  293.             </a> 
  294.         </div>
  295.         <!--
  296.         <div class="search-box">
  297.             <input type="text" placeholder="Que cherchez-vous ?">
  298.             <button>Rechercher</button>
  299.         </div>
  300.         
  301.         <div class="buttons">
  302.             <a href="/" class="btn btn-primary">
  303.                 <span class="icon">🏠</span> Retour à l'accueil
  304.             </a>
  305.             <a href="#" class="btn btn-secondary" onclick="history.back()">
  306.                 <span class="icon">↩️</span> Page précédente
  307.             </a>
  308.             <a href="mailto:support@example.com" class="btn btn-secondary">
  309.                 <span class="icon">✉️</span> Contacter le support
  310.             </a>
  311.         </div>
  312.         -->
  313.     </div>
  315.     <script>
  316.         // Animation des cercles flottants
  317.         document.addEventListener('DOMContentLoaded', function() {
  318.             const circles = document.querySelectorAll('.circle');
  319.             
  320.             circles.forEach(circle => {
  321.                 // Position aléatoire
  322.                 circle.style.left = Math.random() * 100 + '%';
  323.                 circle.style.top = Math.random() * 100 + '%';
  324.                 
  325.                 // Taille aléatoire
  326.                 const size = Math.random() * 100 + 50;
  327.                 circle.style.width = size + 'px';
  328.                 circle.style.height = size + 'px';
  329.                 
  330.                 // Animation avec délai aléatoire
  331.                 circle.style.animationDelay = Math.random() * 10 + 's';
  332.             });
  333.             
  334.             // Animation du code d'erreur
  335.             const errorCode = document.querySelector('.error-code');
  336.             setInterval(() => {
  337.                 errorCode.style.animation = 'none';
  338.                 setTimeout(() => {
  339.                     errorCode.style.animation = 'pulse 2s infinite';
  340.                 }, 10);
  341.             }, 4000);
  342.             
  343.             // Fonction de recherche
  344.             const searchButton = document.querySelector('.search-box button');
  345.             const searchInput = document.querySelector('.search-box input');
  346.             
  347.             searchButton.addEventListener('click', function() {
  348.                 if (searchInput.value.trim() !== '') {
  349.                     alert('Recherche de: ' + searchInput.value);
  350.                     // Dans une vraie application, vous redirigeriez vers une page de résultats
  351.                 }
  352.             });
  353.             
  354.             searchInput.addEventListener('keypress', function(e) {
  355.                 if (e.key === 'Enter') {
  356.                     searchButton.click();
  357.                 }
  358.             });
  359.         });
  360.     </script>
  361. </body>
  362. </html>