/*!
Theme Name: Hostinger AI theme
Author: Hostinger
Author URI: https://hostinger.com
Details URI: https://hostinger.com
Description: Hostinger AI theme built with SEO and mobile responsiveness in mind, this theme ensures optimal performance and a better online presence.
Version: 1.0.58
Tested up to: 6.5
Requires at least: 5.6
Requires PHP: 8.0
License: GPLv3
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: hostinger-ai-theme
Tags: ai-theme
*/
<!doctype html>
<html lang="fr">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Flottant Triangulaire</title>
  <script src="/_sdk/element_sdk.js"></script>
  <style>
    body {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .floating-menu {
      position: relative;
      width: 280px;
      height: 280px;
    }

    .triangle-container {
      position: relative;
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
    }

    .triangle {
      width: 0;
      height: 0;
      border-left: 140px solid transparent;
      border-right: 140px solid transparent;
      border-top: 242px solid #ffffff;
      position: absolute;
      bottom: 0;
      left: 0;
    }

    .menu-items {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -60%);
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      width: 80%;
    }

    .menu-item {
      background: transparent;
      border: none;
      color: #d4af37;
      font-size: 18px;
      font-weight: 600;
      padding: 12px 24px;
      cursor: pointer;
      transition: all 0.3s ease;
      border-radius: 8px;
      width: 100%;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .menu-item::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
      transition: left 0.5s ease;
    }

    .menu-item:hover::before {
      left: 100%;
    }

    .menu-item:hover {
      background: rgba(212, 175, 55, 0.1);
      transform: translateX(5px);
      color: #b8860b;
    }

    .menu-item:active {
      transform: translateX(5px) scale(0.98);
    }

    .menu-toggle {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 40px;
      background: #d4af37;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      z-index: 10;
    }

    .menu-toggle:hover {
      background: #b8860b;
      transform: translateX(-50%) scale(1.1);
    }

    .menu-toggle span {
      display: block;
      width: 20px;
      height: 2px;
      background: white;
      position: relative;
      transition: all 0.3s ease;
    }

    .menu-toggle span::before,
    .menu-toggle span::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 2px;
      background: white;
      transition: all 0.3s ease;
    }

    .menu-toggle span::before {
      top: -6px;
    }

    .menu-toggle span::after {
      top: 6px;
    }

    .menu-toggle.active span {
      background: transparent;
    }

    .menu-toggle.active span::before {
      top: 0;
      transform: rotate(45deg);
    }

    .menu-toggle.active span::after {
      top: 0;
      transform: rotate(-45deg);
    }

    .triangle-container.collapsed {
      transform: scale(0);
      opacity: 0;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    .triangle-container.expanded {
      transform: scale(1);
      opacity: 1;
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }
  </style>
  <style>@view-transition { navigation: auto; }</style>
  <script src="/_sdk/data_sdk.js" type="text/javascript"></script>
  <script src="https://cdn.tailwindcss.com" type="text/javascript"></script>
 </head>
 <body>
  <div class="floating-menu"><button class="menu-toggle" id="menuToggle" aria-label="Toggle menu"> <span></span> </button>
   <div class="triangle-container expanded" id="triangleContainer">
    <div class="triangle"></div>
    <div class="menu-items"><button class="menu-item" id="menuItem1">Accueil</button> <button class="menu-item" id="menuItem2">Services</button> <button class="menu-item" id="menuItem3">Contact</button>
    </div>
   </div>
  </div>
  <script>
    const defaultConfig = {
      background_color: "#ffffff",
      primary_color: "#d4af37",
      secondary_color: "#b8860b",
      text_color: "#d4af37",
      button_color: "#d4af37",
      menu_item_1: "Accueil",
      menu_item_2: "Services",
      menu_item_3: "Contact",
      font_family: "Segoe UI",
      font_size: 18
    };

    let isExpanded = true;

    async function onConfigChange(config) {
      const backgroundColor = config.background_color || defaultConfig.background_color;
      const primaryColor = config.primary_color || defaultConfig.primary_color;
      const secondaryColor = config.secondary_color || defaultConfig.secondary_color;
      const textColor = config.text_color || defaultConfig.text_color;
      const buttonColor = config.button_color || defaultConfig.button_color;
      const customFont = config.font_family || defaultConfig.font_family;
      const baseFontSize = config.font_size || defaultConfig.font_size;
      const baseFontStack = 'Tahoma, Geneva, Verdana, sans-serif';

      document.querySelector('.triangle').style.borderTopColor = backgroundColor;
      document.querySelector('.menu-toggle').style.background = buttonColor;
      document.body.style.background = `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`;

      const menuItems = document.querySelectorAll('.menu-item');
      menuItems.forEach(item => {
        item.style.color = textColor;
        item.style.fontFamily = `${customFont}, ${baseFontStack}`;
        item.style.fontSize = `${baseFontSize}px`;
      });

      document.getElementById('menuItem1').textContent = config.menu_item_1 || defaultConfig.menu_item_1;
      document.getElementById('menuItem2').textContent = config.menu_item_2 || defaultConfig.menu_item_2;
      document.getElementById('menuItem3').textContent = config.menu_item_3 || defaultConfig.menu_item_3;

      const style = document.createElement('style');
      style.textContent = `
        .menu-item::before {
          background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
        }
        .menu-item:hover {
          background: rgba(212, 175, 55, 0.1);
          color: ${secondaryColor};
        }
        .menu-toggle:hover {
          background: ${secondaryColor};
        }
      `;
      const existingStyle = document.querySelector('style[data-dynamic]');
      if (existingStyle) {
        existingStyle.remove();
      }
      style.setAttribute('data-dynamic', 'true');
      document.head.appendChild(style);
    }

    function mapToCapabilities(config) {
      return {
        recolorables: [
          {
            get: () => config.background_color || defaultConfig.background_color,
            set: (value) => {
              config.background_color = value;
              window.elementSdk.setConfig({ background_color: value });
            }
          },
          {
            get: () => config.primary_color || defaultConfig.primary_color,
            set: (value) => {
              config.primary_color = value;
              window.elementSdk.setConfig({ primary_color: value });
            }
          },
          {
            get: () => config.secondary_color || defaultConfig.secondary_color,
            set: (value) => {
              config.secondary_color = value;
              window.elementSdk.setConfig({ secondary_color: value });
            }
          },
          {
            get: () => config.text_color || defaultConfig.text_color,
            set: (value) => {
              config.text_color = value;
              window.elementSdk.setConfig({ text_color: value });
            }
          },
          {
            get: () => config.button_color || defaultConfig.button_color,
            set: (value) => {
              config.button_color = value;
              window.elementSdk.setConfig({ button_color: value });
            }
          }
        ],
        borderables: [],
        fontEditable: {
          get: () => config.font_family || defaultConfig.font_family,
          set: (value) => {
            config.font_family = value;
            window.elementSdk.setConfig({ font_family: value });
          }
        },
        fontSizeable: {
          get: () => config.font_size || defaultConfig.font_size,
          set: (value) => {
            config.font_size = value;
            window.elementSdk.setConfig({ font_size: value });
          }
        }
      };
    }

    function mapToEditPanelValues(config) {
      return new Map([
        ["menu_item_1", config.menu_item_1 || defaultConfig.menu_item_1],
        ["menu_item_2", config.menu_item_2 || defaultConfig.menu_item_2],
        ["menu_item_3", config.menu_item_3 || defaultConfig.menu_item_3]
      ]);
    }

    if (window.elementSdk) {
      window.elementSdk.init({
        defaultConfig,
        onConfigChange,
        mapToCapabilities,
        mapToEditPanelValues
      });
    }

    document.getElementById('menuToggle').addEventListener('click', function() {
      const container = document.getElementById('triangleContainer');
      const toggle = document.getElementById('menuToggle');
      
      isExpanded = !isExpanded;
      
      if (isExpanded) {
        container.classList.remove('collapsed');
        container.classList.add('expanded');
        toggle.classList.remove('active');
      } else {
        container.classList.remove('expanded');
        container.classList.add('collapsed');
        toggle.classList.add('active');
      }
    });

    document.querySelectorAll('.menu-item').forEach(item => {
      item.addEventListener('click', function() {
        const message = document.createElement('div');
        message.textContent = `Navigation vers: ${this.textContent}`;
        message.style.cssText = `
          position: fixed;
          top: 20px;
          left: 50%;
          transform: translateX(-50%);
          background: white;
          color: #d4af37;
          padding: 12px 24px;
          border-radius: 8px;
          box-shadow: 0 4px 12px rgba(0,0,0,0.2);
          z-index: 1000;
          font-weight: 600;
        `;
        document.body.appendChild(message);
        
        setTimeout(() => {
          message.style.transition = 'opacity 0.3s ease';
          message.style.opacity = '0';
          setTimeout(() => message.remove(), 300);
        }, 2000);
      });
    });
  </script>
 <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'99cc5bb517e1eee8',t:'MTc2Mjg0OTA5OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
