<!DOCTYPE html>
<html lang="en">
    
<head>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Detectar si el dispositivo es móvil o tablet
            const isMobile = () => {
                const userAgent = navigator.userAgent || navigator.vendor || window.opera;
                return /android|ipad|iphone|ipod|mobile|tablet|kindle|silk|opera mini/i.test(userAgent.toLowerCase());
            };

            if (isMobile()) {
                // Mostrar un mensaje bloqueando el acceso
                document.body.innerHTML = `
                    <div style="display: flex; align-items: center; justify-content: center; height: 100vh; font-family: Arial, sans-serif; text-align: center; color: white;">
                        <div>
                            <h1>📃🪶</h1> <br>
                            <p>The mobile version of this site is being developed right now, <br>we are sorry for the inconvenience.</p>
                        </div>
                    </div>
                `;
            }
        });
    </script>

<script>
// Ocultar la barra de desplazamiento vertical haciendo que sea invisible pero funcional
document.addEventListener('DOMContentLoaded', function() {
    // Crear un estilo CSS dinámicamente para personalizar la barra de desplazamiento
    var style = document.createElement('style');
    style.textContent = `
        /* Estilos para ocultar la barra de desplazamiento vertical */
        ::-webkit-scrollbar {
            width: 0; /* Ancho cero para la barra de desplazamiento en WebKit (Chrome, Safari) */
        }
        body {
            scrollbar-width: none; /* Ocultar la barra de desplazamiento en Firefox */
        }
    `;
    // Agregar el estilo al head del documento
    document.head.appendChild(style);

    //  Limpiar la consola...
    console.clear();

});
    </script>
    <meta charset="UTF-8">
    <title>.\ Rootkit.SYS &nbsp;|&nbsp; Portfolio</title>
    <meta name="description" content="Rootkit.SYS | Portfolio 2024 ~ 2025">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap" rel="stylesheet">

    
    <!--      |  SE  ENCEUNTRA  DESACTIVADO  PORQUE  CAUSA  PROBLEMAS  AL  ESTAR  DECLARADO  MÁS  ABAJO!!        -->
    <script src="js/index.js"></script>
    <script src="js/common.js"></script>
    <script src="js/language-selector.js" defer></script>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/RootSYS.css">
    <link rel="apple-touch-icon" sizes="180x180" href="img/Rootkit.SYS.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/Rootkit.SYS.png">
    <link rel="icon" type="image/png" sizes="16x16" href="img/Rootkit.SYS.png">
    <link rel="manifest" href="img/site.webmanifest">
    <link rel="shortcut icon" href="img/Rootkit.SYS.ico">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-config" content="/img/browserconfig.xml">
    <meta name="theme-color" content="#0C0C0C">
    <meta property="og:url" content="https://http://rootsys.duckdns.org/p/"/>
    <meta property="og:title" content="Rootkit.SYS | Portfolio 2024 ~ 2025"/>
    <meta property="og:description" content="Rootkit.SYS  Portfolio 2024~2025"/>
    <!-- <meta property="og:image" content="http://rootsys.duckdns.org/p/img/Rootkit.SYS.png"/> -->
    <link rel="canonical" href="index.html">
    <link rel="alternate" hreflang="x-default" href="index.html">

</head>
<body>
 

  
  </div>
    <div class="bg_noise"> </div>
    <div id="circle" class="circle"></div>

    <div id="cursor-shadows">
        <div class="cursor-shadow"></div>
        <div class="cursor-shadow"></div>
        
      </div>
      
      <svg id="cursor" viewBox="0 0 512 512" width="0" title="circle">
      </svg>


      <!--HERE CUSTOM SCRIPT FOR CUSTOM VOID SHADOW MOUSE EFFECT-->
<script>
addEventListener("mousemove", handleMouseMove);

let cursorShadows = document.querySelector("#cursor-shadows");


function handleMouseMove(e) {
  cursor.style.top = `${e.clientY}px`;
  cursor.style.left = `${e.clientX}px`;

  cursorShadows.animate([{ top: `${e.clientY}px`, left: `${e.clientX}px` }], {
    duration: 300,
    fill: "forwards"
  });
}


    </script>




<!--HERE CUSTOM SCRIPT FOR CUSTOM POINTER MOUSE-->
<script>
console.clear();

    // Select the circle element
    const circleElement = document.querySelector('.circle');
    
    // Create objects to track mouse position and custom cursor position
    const mouse = { x: 0, y: 0 }; // Track current mouse position
    const previousMouse = { x: 0, y: 0 } // Store the previous mouse position
    const circle = { x: 0, y: 0 }; // Track the circle position
    
    // Initialize variables to track scaling and rotation
    let currentScale = 0; // Track current scale value
    let currentAngle = 0; // Track current angle value
    
    // Update mouse position on the 'mousemove' event
    window.addEventListener('mousemove', (e) => {
      mouse.x = e.x;
      mouse.y = e.y;
    });
    
    // Smoothing factor for cursor movement speed (0 = smoother, 1 = instant)
    const speed = 0.17;
    
    // Start animation
    const tick = () => {
      // MOVE
      // Calculate circle movement based on mouse position and smoothing
      circle.x += (mouse.x - circle.x) * speed;
      circle.y += (mouse.y - circle.y) * speed;
      // Create a transformation string for cursor translation
      const translateTransform = `translate(${circle.x}px, ${circle.y}px)`;
    
      // SQUEEZE
      // 1. Calculate the change in mouse position (deltaMouse)
      const deltaMouseX = mouse.x - previousMouse.x;
      const deltaMouseY = mouse.y - previousMouse.y;
      // Update previous mouse position for the next frame
      previousMouse.x = mouse.x;
      previousMouse.y = mouse.y;
      // 2. Calculate mouse velocity using Pythagorean theorem and adjust speed
      const mouseVelocity = Math.min(Math.sqrt(deltaMouseX**2 + deltaMouseY**2) * 4, 150); 
      // 3. Convert mouse velocity to a value in the range [0, 0.5]
      const scaleValue = (mouseVelocity / 111) * 0.5;
      // 4. Smoothly update the current scale
      currentScale += (scaleValue - currentScale) * speed;
      // 5. Create a transformation string for scaling
      const scaleTransform = `scale(${1 + currentScale}, ${1 - currentScale})`;
    
      // ROTATE
      // 1. Calculate the angle between the mouse and the circle using the atan2 function
      const angle = Math.atan2(circle.y - mouse.y, circle.x - mouse.x) * 180 / Math.PI;
      // 2. Check for a threshold to reduce shakiness at low mouse velocity
      if (mouseVelocity > 1) {
        currentAngle = angle;
      }
      // 3. Create a transformation string for rotation
      const rotateTransform = `rotate(${currentAngle}deg)`;
    
      // Apply all transformations to the circle element in a specific order: translate -> rotate -> scale
      circleElement.style.transform = `${translateTransform} ${rotateTransform} ${scaleTransform}`;
    
      
      // Request the next frame to continue the animation
      window.requestAnimationFrame(tick);
    }  
    
    // Start the animation loop
    tick();
    </script>
     




    <div class="bg" id="main">
        
    <header id="site-header">
      <div class="header__logo">
        <a class="header__logo-link" href="index.html">
          <h1 class="header__logo" style="color:#ffe4bbbd;">Rootkit.SYS</pre>
            <br></br> <h1 class="header__logo__text">Portfolio</h1>
        </a>
      </div>
      <div class="header__menu" style="margin-left: 200px;">
        <a class="header__menu-link" href="#main" data-translate="main">#1__Main</a>
        <a class="header__menu-link" href="#latestProjects" data-translate="projects">#2__Projects</a>
        <a class="header__menu-link" href="#knowledge" data-translate="knowledge">#3__Knowledge</a>
        <a class="header__menu-link" href="#about_me" data-translate="about_me">#4__About_me</a>
        <div style="flex-grow: 1;"></div>
        <div class="header__mobile-buttons">
          <button class="header-footer__button header-footer__button--letter" onclick="showModal()">
            <div class="header-footer__arrow ">
              <img class="arrow" src="img/arrow-right-up.svg" alt="arrow"/>
            </div>
            Send &nbsp;E-mail
          </button>
        </div>
      </div>
      <div class="header__button-wrapper">
        <button class="header__button header__button--mobile" onclick="showMobileMenu()">MENU</button>
        <button class="header__button header__button--close" onclick="showMobileMenu()">CLOSE</button>
        <button class="header__button header__button--desktop" data-translate="contactMeBTN" onclick="showModal()">&nbsp; CONTACT &nbsp; ME </button> 
      </div>
    
      <div class="language-selector">
        <span id="current-language" class="current-language" onclick="toggleLanguageMenu()" data-translate="language">LANGUAGE</span>
        <div id="language-menu" class="language-menu">
            <div class="language-option" data-translate="eng" onclick="changeLanguage('en'), toggleLanguageMenu()">English</div>
            <div class="language-option" data-translate="esp" onclick="changeLanguage('es'), toggleLanguageMenu()">Español</div>
            <div class="language-option" data-translate="cat" onclick="changeLanguage('ca'), toggleLanguageMenu()">Català</div>
        </div>
    </div>
    
    
    
    
    
      
    
    </header>    <div class="main-first">
        </a>
        <div class="main-first__hero-text" data-translate="welcome">A hidden<br>&nbsp;place inside<br>&nbsp;&nbsp;every mind...</div>
        <div class="main-first__text main-first--invisible" data-translate="description">
            ALWAYS IN SEARCH OF WHAT IS <br>
            &nbsp;&nbsp;<span class="highlighted-phrase"  style="margin-bottom: 10px;">« HIDDEN TO THE PUBLIC EYE »</span>&nbsp;&nbsp;——<br">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;THAT WHICH <span class="highlighted-phrase"></spanclass>« ESCAPES THE USER »</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; IS MY OBJECTIVE TO ACHIEVE. ❤
        </div>               
    </div>
    
</div>




<div class="main-culture main-container" id="latestProjects">
    <div class="main-culture__line"></div><br><br><br><br>
    <div class="main-culture__title"> <span style="position: absolute;bottom: -11px;left: 5px;color: #A3987E;">╶</span>  <span class="main__title-slash">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;</span> <span data-translate="latest_projects">Latest&nbsp; projects</div>
    <div class="main-culture__items">




            <div class="main-culture__item">
                <div class="main-culture__type" data-translate="Project1_Title">{ Project: <span>‘Hidden communication through the kernel.’</span> }</div>
                <div class="main-culture__description" data-translate="Project1_Description">Its my main project and personal brand, codenamed « C9 ». <br> <br>Its an advanced ‘rootkit’, capable of staying in the shadows of the operating system in a persistent, <br> non-intrusive and invisible to the human eye. <br> <br> It is intended as a security tool against invasions like "RATS" and attempts to leak sensitive files, processes &nbsp;&nbsp;and private documents or projects.</div>
                <div class="main-culture__image">
                    <img src="img/culture/culture%201.png" alt="image" loading="lazy" width="390" height="290"/>
                </div>



                <div class="main-culture__mobile-line"></div>
            </div>



            <div class="main-culture__item">
                <div class="main-culture__type" data-translate="Project2_Title">{ Project: <span>‘Looking much further than simple records.’</span> }</div>
                <div class="main-culture__description" data-translate="Project2_Description">This tool allows you to see & get all the <br> serials of every component, disc, etc...<br></br> Coded entirely in C++, fully native code, so no dependencies other than the system itself are<br> required to run smoothly. <br><br> Normally used in a combination with tools that are designed to bypass certain HWID-based security systems.</div>
                <div class="main-culture__image">
                    <img src="img/culture/culture%202.png" alt="image" loading="lazy" width="390" height="290"/>
                </div>


                <div class="main-culture__mobile-line"></div>
            </div>


           

            <div class="main-culture__item">
                <div class="main-culture__type" data-translate="Project3_Title">{ Project: <span>‘The honeypot trap inside a honeypot trap.’</span> }</div>
                <div class="main-culture__description" data-translate="Project3_Description">Using advanced NTFS techniques, this tool<br> hides the real *.EXE inside a honeypot file.<br></br> Fully built into a glitched folder path that's<br> nearly inaccessible to most file managers.<br><br> Stored within a non-visible virtual disk, <br> mounted directly in the system RAM for stealth.</div>
                <div class="main-culture__image">
                    <img src="img/culture/culture%203.png" alt="image" loading="lazy" width="390" height="290"/>
                </div>



                <div class="main-culture__mobile-line"></div>
            </div>
        <div class="main-culture__last">
        </div>
    </div>
</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="main-knowledge main-container" id="knowledge">
    <div class="main-knowledge__title"><span class="main__title-slash"><span style="position: relative;bottom: -11px;color: #A3987E;">╶</span>// &nbsp;</span><span data-translate="knowledgeSection"> Knowledge<a



        


            class="main-knowledge__link"></a></div>
            <div class="main-knowledge__items">
                <a class="main-knowledge__item" target="_blank">
                    <div class="main-knowledge__name">&nbsp;&nbsp;◈ &nbsp;&nbsp;C++</div>
                    <div class="main-knowledge__description" data-translate="C++_Description">
                        Developing native Windows & console apps.
                        <span class="tech-type">(Back-End & Front-End)</span>
                    </div>
                </a>
                <a class="main-knowledge__item" target="_blank">
                    <div class="main-knowledge__name">&nbsp;&nbsp;◈ &nbsp;&nbsp;C#</div>
                    <div class="main-knowledge__description" data-translate="C#_Description">
                        Developing reliable Windows native & console apps.
                        <span class="tech-type">(Back-End & Front-End)</span>
                    </div>
                </a>
                <a class="main-knowledge__item" target="_blank">
                    <div class="main-knowledge__name">&nbsp;&nbsp;◈ &nbsp;&nbsp;WPF&nbsp;&nbsp;C#</div>
                    <div class="main-knowledge__description" data-translate="WPF_C#_Description">
                        Building modern desktop interfaces with WPF C#.
                        <span class="tech-type">(Back-End & Front-End)</span>
                    </div>
                </a>
                <a class="main-knowledge__item" target="_blank">
                    <div class="main-knowledge__name">&nbsp;&nbsp;◈ &nbsp;&nbsp;HTML</div>
                    <div class="main-knowledge__description" data-translate="HTML_Description">
                        Structuring content for modern<br> user-friendly websites.
                        <span class="tech-type">(Front-End)</span>
                    </div>
                </a>
                <a class="main-knowledge__item" target="_blank">
                    <div class="main-knowledge__name">&nbsp;&nbsp;◈ &nbsp;&nbsp;CSS</div>
                    <div class="main-knowledge__description" data-translate="CSS_Description">
                        Creating appealing responsive designs for modern sites.
                        <span class="tech-type">(Front-End)</span>
                    </div>
                </a>
                <a class="main-knowledge__item" target="_blank">
                    <div class="main-knowledge__name">&nbsp;&nbsp;◈ &nbsp;&nbsp;Powershell&nbsp; + &nbsp;Batch</div>
                    <div class="main-knowledge__description" data-translate="PS_BATCH_Description">
                        Developing experimental methods to test security measures and implement protective strategies.
                        <span class="tech-type">(Back-End)</span>
                    </div>
                </a>
            </div>
            
</div>


<br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="main-process main-container" id="about_me">
    <div class="main-process__title"><span class="main__title-slash"><span style="position: relative;bottom: -11px;color: #A3987E;">╶</span>// &nbsp;</span><span data-translate="AboutMeSection"> About Me</div> 




    <div class="main-process__item">
        <div class="main-process__item-left">
            <div class="main-process__stage" data-translate="AboutMe_Description_1_Title">(&nbsp; ENTRY : &nbsp;&nbsp;0⨯001 &nbsp;)</div>
            <div class="main-process__description" data-translate="AboutMe_Description_1">
                My name is Albert, <br>
                  better known as Rootkit.SYS <br>
                    across various corners of the internet. <br><br>
                I consider myself skilled in cybersecurity and forensic<br>
                   data analysis, with a passion for developing unique<br>
                      and revolutionary, highly complex projects.
            </div>
            

    
            <div class="main-process__subtitle" data-translate="AboutMe_Description_1_Title2">Professional Values</div>
            <div class="main-process__list">
                <div class="main-process__list-item" data-translate="AboutMe_Description_1_Title2_Value1">Precision and attention to detail;</div>
                <div class="main-process__list-item" data-translate="AboutMe_Description_1_Title2_Value2">Commitment to ethical practices;</div>
                <div class="main-process__list-item" data-translate="AboutMe_Description_1_Title2_Value3">Continuous learning and innovation;</div>
            </div>
            <div class="main-process__subtitle" data-translate="AboutMe_Description_1_Title3">Key Skills</div>
            <div class="main-process__tags">
                <div class="main-process__tag" data-translate="AboutMe_Description_1_Title3_Value1"><span class="main-process__number">01</span>_C++</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_1_Title3_Value2"><span class="main-process__number">02</span>_C#</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_1_Title3_Value3"><span class="main-process__number">03</span>_Reverse Engineering</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_1_Title3_Value4"><span class="main-process__number">04</span>_Cybersecurity Tools</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_1_Title3_Value5"><span class="main-process__number">05</span>_Problem Solving</div>
            </div>
            <a href="#latestProjects" class="main-process__link main__title-link" data-translate="AboutMe_Description_1_Btn">view projects_   </a>
        </div>
        <div class="main-process__image-wrapper main-process__image-container">
            <img src="img/development-process-1.png" alt="Albert's professional photo" class="main-process__image">
        </div>
    </div>
    
    <div class="main-process__item">
        <div class="main-process__item-left">
            <div class="main-process__stage" data-translate="AboutMe_Description_2_Title">(&nbsp; ENTRY : &nbsp;&nbsp;0⨯002 &nbsp;)</div>
            <div class="main-process__description" data-translate="AboutMe_Description_2">
                My goal is to create unique projects that defy traditional rules, combining creativity and technical precision to deliver distinctive and impactful solutions.
            </div>
            <div class="main-process__subtitle" data-translate="AboutMe_Description_2_Title2">Personal Philosophy</div>
            <div class="main-process__list">
                <div class="main-process__list-item" data-translate="AboutMe_Description_2_Title2_Value1">🔍 Developing tools for invisible digital protection;</div>
                <div class="main-process__list-item" data-translate="AboutMe_Description_2_Title2_Value2">⚙️ Engineering stealth methods for advanced defense;</div>
                <div class="main-process__list-item" data-translate="AboutMe_Description_2_Title2_Value3">💡 Embedding security in unique hidden methods;</div>

            </div>
            <div class="main-process__subtitle" data-translate="AboutMe_Description_2_Title3">Goals</div>
            <div class="main-process__tags">
                <div class="main-process__tag" data-translate="AboutMe_Description_2_Title3_Value1"><span class="main-process__number">01</span>_Learn every language</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_2_Title3_Value2"><span class="main-process__number">02</span>_Master cybersecurity</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_2_Title3_Value3"><span class="main-process__number">03</span>_Develop unique tools</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_2_Title3_Value4"><span class="main-process__number">04</span>_Inspire others</div>
                <div class="main-process__tag" data-translate="AboutMe_Description_2_Title3_Value5"><span class="main-process__number">05</span>_Achieve personal growth</div>
            </div>
            <a  onclick="showModal()" class="main-process__link main__title-link" data-translate="AboutMe_Description_2_Btn">contact me_   </a>
        </div>
        <div class="main-process__image-wrapper">
            <img src="img/development-process-2.png" alt="Albert's casual photo" class="main-process__image">
        </div>
    </div>
</div>
             
            <footer class="footer">
              <div class="footer__copyright" style="
              padding-top: 24px; color: #ffe4bbbd;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;© Rootkit.SYS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2024</div>

              
<script  src="./js/styleUI.js"></script>
<link rel="stylesheet" href="./css/styleUI.css">
<a class="scroll" href="#main">
    <div class="container">
      <div class="rectangle"></div>
      <div class="rectangle"></div>
      <div class="rectangle"></div>
      <div class="rectangle"></div>
      <div class="rectangle"></div>
      <div class="rectangle"></div>
      <div class="rectangle"></div>
      <div class="rectangle"></div>
    </div>
    <span class="text" data-translate="Back_To_Top">Back to top</span>
  </a>
                
              
            </footer>        </div>
    </div>
</div>


<br>


<div class="main-nav">
    <div class="main-nav__items">
        <a class="main-nav__item main-nav__item--active" href="#main" data-translate="main_Footer">> #1__MAIN</a>
        <a class="main-nav__item" href="#latestProjects" data-translate="projects_Footer">> #2__PROJECTS</a>
        <a class="main-nav__item" href="#knowledge" data-translate="knowledge_Footer">&nbsp;> #3__KNOWLEDGE</a>
        <a class="main-nav__item" href="#about_me" data-translate="about_me_Footer">> #4__ABOUT_ME</a>
    </div>
</div>








</div>


<link rel="stylesheet" href="css/style.css">

<div class="main-modal">
    <button class="main-modal__header" onclick="closeModal()">
        <img class="main-modal__header-img" src="img/send-a-letter.svg"
             alt="send a letter" onclick="closeModal()">
        <img class="main-modal__header-img--small" src="img/send-a-letter-small.svg"
             alt="send a letter" onclick="closeModal()">
    </button>
    <div class="main-modal__form-sent">
        <!-- Aquí se reemplaza la imagen por la esfera -->
        <div class="sphere-container">
            <div class="sphere">
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                <i></i>
                
            </div>
        </div>
        <!-- Fin del reemplazo -->

        <div class="main-modal__form-sent-title" data-translate="Email_Sended_MSG1">Thank &nbsp;you&nbsp; for<br> &nbsp;&nbsp;&nbsp;&nbsp;contacting&nbsp; us! &nbsp;📃🪶</div>
        <div class="main-modal__form-sent-text" data-translate="Email_Sended_MSG2">&nbsp;&nbsp;Your request has been sent...<br>&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;Please wait for a response...</div>
        <button class="main-modal__button"  data-translate="Email_Close_Btn" type="button" onclick="closeModal()">CLOSE</button>
    </div>

    
    <form class="main-modal__form" id="sendForm" spellcheck="false" action="RootSecurity.php" method="POST">
        <div class="main-modal__title" data-translate="Send_Email">Send &nbsp;E-mail</div>
        <label class="main-modal__block" spellcheck="false" data-name="email">
            <div class="main-modal__label" data-translate="Email">E-mail</div>
            <input class="main-modal__input" spellcheck="false" autocomplete="off" type="email" name="email" required />
            <div class="main-modal__error" autocomplete="off" data-translate="Email_Error1">&nbsp;* This is a required field</div>
            <div class="main-modal__error2" data-translate="Email_Error2">&nbsp;* This is not a valid email</div>
        </label>
        <label class="main-modal__block">
            <div class="main-modal__label" data-translate="Email_Budget">Budget</div>
            <input class="main-modal__input" autocomplete="off" name="budget" required />
        </label>
        <label class="main-modal__block">
            <div class="main-modal__label" data-translate="Email_Experience">Experience required</div>
            <input class="main-modal__input" autocomplete="off" name="requiredExpertise" required />
        </label>
        <label class="main-modal__block">
            <div class="main-modal__label" data-translate="Email_Others">Other details and questions</div>
            <textarea class="main-modal__textarea" autocomplete="off" name="otherDetails" required></textarea>
        </label>
    
        <!-- Campo oculto para el idioma -->
        <input type="hidden" id="language" name="language" value="">
    
        <button class="main-modal__button" data-translate="Email_Send_Btn" type="submit" id="sendButton">SEND</button>
    </form>
    
    
    
</div>

    <!-- Script para registar el formulario de contacto. FINALMENTE TERMINADO JODER! 💕 -->
    <script>
    
    
    document.getElementById('sendButton').addEventListener('click', function (e) {
    e.preventDefault(); // Prevenir el envío del formulario

    const email = document.querySelector('input[name="email"]').value.trim();
    const budget = document.querySelector('input[name="budget"]').value.trim();
    const requiredExpertise = document.querySelector('input[name="requiredExpertise"]').value.trim();
    const otherDetails = document.querySelector('textarea[name="otherDetails"]').value.trim();

    // Captura el idioma desde localStorage o el atributo global
    const language = localStorage.getItem('language') || 'en'; // Predeterminado a inglés si no existe
    document.getElementById('language').value = language; // Asigna el idioma al campo oculto

    // Validación básica de email
    if (!email || !validateEmail(email)) {
        //  [  JUST FOR DEBUG  ]      alert('Please provide a valid email address.');
        return;
    }

    // Construir el cuerpo del mensaje para el envío
    const body = new URLSearchParams({
        email: email,
        budget: budget,
        requiredExpertise: requiredExpertise,
        otherDetails: otherDetails,
        language: language, // Incluir idioma en el envío
    });

    fetch('RootSecurity.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: body.toString(),
    })
        .then((response) => {
            if (response.ok) {
                //  [  JUST FOR DEBUG  ]      alert('Message sent successfully!');
            } else {
                //  [  JUST FOR DEBUG  ]      alert('Failed to send the message.');
            }
        })
        .catch((error) => {
            //  [  JUST FOR DEBUG  ]      console.error('Error:', error);
        });
});

function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}




    </script>



<script src="js/index.js"></script>
<script src="js/common.js"></script>

<script>
document.addEventListener('DOMContentLoaded', (event) => {
    const buttons = document.querySelectorAll('.language-option, .current-language, .main-process__link, .main__title-link, .header__button--desktop, .header__menu, .main-modal__header, .main-modal__header-img, .main-modal__header-img--small, .main-nav__items, .scroll, .check__box, .main-modal__input, .main-modal__textarea, .main-modal__button, .header__logo-link, .main-knowledge__item');
    const circle = document.getElementById('circle');
    
    buttons.forEach(button => {
        button.addEventListener('mouseenter', () => {
            circle.style.border = '18px solid #c4bfb970';
            circle.style.marginTop = '-13px';
            circle.style.marginLeft = '-16px';
            circle.style.marginRight = '-8px';
            circle.style.marginBottom = '-16px';
            circle.style.filter = 'invert(1)';
        });

        button.addEventListener('mouseleave', () => {
            circle.style.border = '10px solid #ffe4bbbd';
            circle.style.marginTop = '0px';
            circle.style.filter = 'invert(0)';
        });
    });
});
</script>

  
</body>
</html>
