<html>
  <head>
    <base href="/" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ethetic - Executor</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: rgb(8, 8, 8); /* Background color */
        height: 100vh;
        width: 100vw;
        font-family: Arial, sans-serif;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
      }

      .square {
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: transparent;
        border: 0.7px solid rgb(50, 50, 50);
        opacity: 1;
        transition: opacity 0.3s ease;
      }

      .center-text {
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 36px;
        font-weight: bold;
        color: white;
      }

      .center-text span {
        color: rgb(57, 120, 245); /* Blue color */
      }

      .powered-text {
        position: absolute;
        top: 49%;
        left: 50%;
        transform: translateX(-50%);
        font-size: 18px;
        color: white;
        font-weight: bold;
      }

      .powered-text span {
        color: rgb(57, 120, 245); /* Blue color */
      }

      .container {
        position: relative;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 80%;
        max-width: 1200px;
      }

      #editor {
        width: 100%;
        height: 65vh;
        margin-bottom: 20px;
        border-radius: 5px; /* Slightly rounded corners */
        overflow: hidden;
        border: 0.9px solid rgb(105, 151, 243); /* Default Blue */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
        background-color: rgb(8, 8, 8) !important; /* Force background color */
      }

      .button-container {
        display: flex;
        justify-content: flex-end; /* Align buttons to the right */
        gap: 10px; /* Adds space between the buttons */
        margin-right: 750px; /* Set margin-right to 750px */
      }

      .execute-btn, .clear-btn, .open-btn, .save-btn {
        display: inline-block;
        background: rgb(19, 19, 19);
        color: white;
        border: 0.6px solid white;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 10px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        transition: background-color 0.3s ease, border-color 0.3s ease;
      }

      .execute-btn:hover, .clear-btn:hover, .open-btn:hover, .save-btn:hover {
        background-color: rgb(30, 30, 30);
        border-color: rgb(57, 120, 245);
      }

      .best-executor-box {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        border-radius: 15px;
        border: 0.4px solid rgb(57, 120, 245);
        box-shadow: 0 0 10px rgb(57, 120, 245);
        text-align: center;
        color: white;
        font-size: 18px;
        font-weight: bold;
        background-color: transparent;
      }

      /* Left box positioning */
      .left-box {
        position: absolute;
        top: 46%; /* Center vertically */
        left: 2%; /* Move further to the left */
        transform: translateY(-50%);
        width: 300px;
        height: 600px;
        background-color: rgb(19, 19, 19);
        border-radius: 10px;
        border: 0.7px solid rgb(105, 151, 243); /* Default Blue */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        padding: 20px;
      }

      .controls-text {
        font-family: 'Helvetica', sans-serif; /* Generic sans-serif font */
        font-weight: bold; /* Make the text bold */
        font-size: 18px; /* Adjust font size */
        color: white;
        margin-bottom: 10px; /* Add some space below the text */
      }

      .blue-line {
        border-bottom: 0.7px solid rgb(57, 120, 245); /* Blue line */
        margin-bottom: 20px; /* Space under the line */
      }

      /* Slider Styles */
      .slider-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .slider {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 10px;
        background: rgb(50, 50, 50);
        outline: none;
        border-radius: 5px;
        transition: background 0.3s ease;
      }

      .slider:hover {
        background: rgb(57, 120, 245);
      }

      .slider-label {
        color: white;
        font-size: 16px;
        font-weight: bold;
      }

      /* Dropdown Styles */
      .dropdown-container {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .dropdown-label {
        color: white;
        font-size: 16px;
        font-weight: bold;
      }

      .dropdown {
        padding: 10px;
        border-radius: 5px;
        background-color: rgb(19, 19, 19);
        color: white;
        border: 0.6px solid rgb(50, 50, 50);
        font-size: 16px;
        cursor: pointer;
      }

      .dropdown option {
        background-color: rgb(19, 19, 19);
        color: white;
        border: 0.6px solid rgb(50, 50, 50);
      }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/loader.min.js"></script>
  </head>
  <body>
    <!-- Square animation container -->
    <div id="squares-container"></div>

    <!-- Left Box -->
    <div class="left-box">
      <div class="controls-text">Controls</div>
      <div class="blue-line"></div>

      <!-- Slider for text editor font size -->
      <div class="slider-container">
        <label class="slider-label">Text Editor Size</label>
        <input type="range" id="fontSizeSlider" class="slider" min="10" max="40" value="14">
      </div>

      <!-- Dropdown for Themes -->
      <div class="dropdown-container">
        <label class="dropdown-label">Themes</label>
        <select id="themeDropdown" class="dropdown">
          <option value="green">Green</option>
          <option value="blue" selected>Blue</option>
          <option value="red">Red</option>
          <option value="pink">Pink</option>
          <!-- New theme colors added -->
          <option value="yellow">Yellow</option>
          <option value="purple">Purple</option>
          <option value="orange">Orange</option>
          <option value="cyan">Cyan</option>
          <option value="black">Black</option>
        </select>
      </div>
    </div>

    <!-- Best Executor Box -->
    <div class="best-executor-box">
      Ethetic | Best Web Executor
    </div>

    <!-- Centered Main Text -->
    <div class="center-text">
      Join <span>Ethetic</span> Today
    </div>

    <!-- Powered By Text -->
    <div class="powered-text">
      Powered By <span>Cxapi</span>
    </div>

    <div class="container">
      <div id="editor"></div>
      <div class="button-container">
        <button class="execute-btn" onclick="executeScript()">Execute</button>
        <button class="clear-btn" onclick="clearEditor()">Clear</button>
        <button class="open-btn" onclick="openFile()">Open</button>
        <button class="save-btn" onclick="saveFile()">Save</button>
      </div>
    </div>

    <script>
      // Define a function to create squares
      function createSquares() {
        const container = document.getElementById('squares-container');
        const rows = 15;
        const columns = 15;
        const maxSize = 12;
        const spacing = 45;
        const fadeFactor = 0.07;

        const screenWidth = window.innerWidth;
        const screenHeight = window.innerHeight;

        for (let i = 0; i < rows; i++) {
          for (let j = 0; j < columns; j++) {
            const square = document.createElement('div');
            square.classList.add('square');
            const topPosition = i * spacing;
            const leftPosition = j * spacing;
            square.style.top = `${topPosition}px`;
            square.style.left = `${leftPosition}px`;
            const opacity = Math.max(1 - (i + j) * fadeFactor, 0);
            square.style.opacity = opacity;
            container.appendChild(square);
          }
        }

        for (let i = 0; i < rows; i++) {
          for (let j = 0; j < columns; j++) {
            const square = document.createElement('div');
            square.classList.add('square');
            const topPosition = screenHeight - (i + 1) * spacing;
            const leftPosition = screenWidth - (j + 1) * spacing;
            square.style.top = `${topPosition}px`;
            square.style.left = `${leftPosition}px`;
            const opacity = Math.max(1 - (i + j) * fadeFactor, 0);
            square.style.opacity = opacity;
            container.appendChild(square);
          }
        }
      }

      // Monaco editor setup
      require.config({
        paths: {
          vs: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs'
        }
      });

      window.MonacoEnvironment = {
        getWorkerUrl: function () {
          return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
            self.MonacoEnvironment = {
              baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/'
            };
            importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.36.1/min/vs/base/worker/workerMain.js');
          `)}`;
        }
      };

      require(['vs/editor/editor.main'], function () {
        const editor = monaco.editor.create(document.getElementById('editor'), {
          value: 'print("ethetic.cc")',
          language: 'lua',
          theme: 'vs-dark',
          automaticLayout: true,
          minimap: {
            enabled: false
          },
          fontSize: 14,
          lineNumbers: 'on',  // Show line numbers
          renderWhitespace: 'boundary',  // Display whitespace characters
          autoClosingBrackets: 'always',  // Auto close brackets
          autoIndent: true,  // Enable auto-indentation
          wordWrap: 'on',  // Enable word wrapping
          codeLens: true,  // Enable code lens
          folding: true,  // Enable code folding
          contextmenu: true,  // Show context menu (right-click)
          quickSuggestions: true,  // Show quick suggestions while typing
          parameterHints: true,  // Show parameter hints for functions
          suggestOnTriggerCharacters: true,  // Show suggestions based on typing trigger characters
          snippetSuggestions: 'inline',  // Inline suggestions for code snippets
          scrollBeyondLastLine: false,  // Disable scrolling beyond last line
          highlightActiveIndentGuide: true,  // Highlight the active indentation guide
        });

        // Manually update Monaco editor background color after initialization
        editor.getDomNode().style.backgroundColor = "rgb(8, 8, 8)"; // Override the background color

        // Adjust font size when the slider is changed
        document.getElementById('fontSizeSlider').addEventListener('input', function (event) {
          const fontSize = event.target.value;
          editor.updateOptions({ fontSize: parseInt(fontSize, 10) });
        });

        // Change border color based on selected theme
        document.getElementById('themeDropdown').addEventListener('change', function (event) {
          const themeColor = event.target.value;

          // Define new colors
          const themeColors = {
            green: 'rgb(0, 255, 0)',
            blue: 'rgb(57, 120, 245)',
            red: 'rgb(255, 0, 0)',
            pink: 'rgb(255, 105, 180)',
            yellow: 'rgb(255, 255, 0)',
            purple: 'rgb(128, 0, 128)',
            orange: 'rgb(255, 165, 0)',
            cyan: 'rgb(0, 255, 255)',
            black: 'rgb(0, 0, 0)',
          };

          const color = themeColors[themeColor] || themeColors.blue;

          // Update the border colors of text editor and left box
          document.getElementById('editor').style.borderColor = color;
          document.querySelector('.left-box').style.borderColor = color;
          document.querySelector('.best-executor-box').style.borderColor = color;
          document.querySelector('.blue-line').style.borderBottomColor = color;

          // Update hover effect colors for buttons
          const buttons = document.querySelectorAll('.execute-btn, .clear-btn, .open-btn, .save-btn');
          buttons.forEach(button => {
            button.addEventListener('mouseenter', () => {
              button.style.borderColor = color;
            });
            button.addEventListener('mouseleave', () => {
              button.style.borderColor = 'white';
            });
          });
        });

        window.executeScript = function () {
          const editorContent = editor.getValue();
          console.log("Editor content:", editorContent);

          try {
            fetch('http://localhost:5000/message', {
              method: 'POST',
              headers: { 'Content-Type': 'application/json' },
              body: JSON.stringify({ content: editorContent })
            })
              .then(response => response.json())
              .then(data => {
                console.log("Server responded:", data);
              })
              .catch(error => {
                console.error('Error executing script:', error);
              });
          } catch (error) {
            console.error('Error:', error);
          }
        };

        window.clearEditor = function () {
          editor.setValue('');
        };

        window.openFile = function () {
          const input = document.createElement('input');
          input.type = 'file';
          input.accept = '.txt,.lua';
          input.onchange = function (event) {
            const file = event.target.files[0];
            if (file) {
              const reader = new FileReader();
              reader.onload = function () {
                editor.setValue(reader.result); // Set content in Monaco editor
              };
              reader.readAsText(file);
            }
          };
          input.click();
        };

        // Save the file with editor content
        window.saveFile = function () {
          const editorContent = editor.getValue(); // Get content from Monaco editor
          const blob = new Blob([editorContent], { type: 'text/plain' }); // Create a Blob with the content
          const link = document.createElement('a'); // Create a link element

          // Create a download link for the Blob
          link.href = URL.createObjectURL(blob);
          link.download = 'editor-content.txt'; // Name of the file to save as
          link.click(); // Trigger the download
        };

        createSquares(); // Create the animated squares
      });
    </script>
  </body>
</html>
