 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hex Code Tools</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 0; text-align: center; }
    #output, #color-container { display: block; margin: 20px auto; padding: 10px; width: 90%; height: 60vh; overflow-y: scroll; border: 1px solid #ccc; background-color: #f9f9f9; text-align: left; white-space: pre-wrap; font-family: monospace; }
    .color-square { width: 100%; height: 50px; margin: 2px 0; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; text-transform: uppercase; }
    .controls { margin: 20px; }
    button { margin: 5px; }
    h1, h2 { margin: 20px 0; }
  </style>
</head>
<body>
  <h1>Hex Code Generator</h1>
  <div class="controls">
    <label for="batchSize">Batch Size:</label>
    <input type="number" id="batchSize" value="1000" min="1" max="16777216" /> <br>
    <label for="batchDelay">Batch Delay (ms):</label>
    <input type="number" id="batchDelay" value="0" min="0" />
    <button onclick="startGenerating()">Start Generating Codes</button>
    <button onclick="stopGenerating()">Stop</button>
    <button onclick="clearOutput()">Clear</button>
    <button id="toggleSave" onclick="toggleSaveToFile()">Save to File: Off</button>
    <button onclick="copyToClipboard()">Copy to Clipboard</button>
    <div style="margin-top: 10px;">
      <label for="startHexCode">Start From Hex Code:</label>
      <input type="text" id="startHexCode" placeholder="#000000" maxlength="7" />
      <button onclick="setStartingHex()">Set Start Hex</button>
    </div>
    <div style="margin-top: 10px;">
      <label for="stopHexCode">Stop At Hex Code:</label>
      <input type="text" id="stopHexCode" placeholder="#FFFFFF" maxlength="7" />
      <button onclick="setStopHex()">Set Stop Hex</button>
    </div>
  </div>
  <div class="counter">
    <strong>Codes Generated:</strong> <span id="counter">0</span> <br>
    <strong>Time Running:</strong> <span id="timeRunning">0:00</span> <br>
    <strong>Estimated Finish Time:</strong> <span id="finishTime">Not available</span> <br>
    <strong>FPS:</strong> <span id="fps">0</span>
  </div>
  <div id="output">
    <p></p>
  </div>
  <a id="downloadLink" style="display: none; margin-top: 10px;" download="hex_codes.txt">Download Hex Codes</a>

  <h2>Color Squares Generator</h2>
  <div class="controls">
    <label for="colorBatchSize">Batch Size:</label>
    <input type="number" id="colorBatchSize" value="10" min="1" max="16777216" />
    <button onclick="startGeneratingSquares()">Start Generating Squares</button>
    <button onclick="stopGeneratingSquares()">Stop</button>
    <button onclick="clearSquares()">Clear Squares</button>
  </div>
  <div id="color-container"></div>

  <script>
    let r = 0, g = 0, b = 0;
    let isGenerating = false;
    let generatedCount = 0;
    let saveToFile = false;
    let hexCodes = [];
    let startTime = null;
    let timeInterval;
    let estimatedFinishTime = null;
    let fpsCounter = 0;
    let lastGeneratedCount = 0;
    let batchDelay = 0;
    let stopHex = null; // Variable to hold the stop hex code

    function hexToRgb(hex) {
      return { r: parseInt(hex.slice(1, 3), 16), g: parseInt(hex.slice(3, 5), 16), b: parseInt(hex.slice(5, 7), 16) };
    }

    function setStartingHex() {
      const input = document.getElementById('startHexCode').value;
      const hexPattern = /^#[0-9a-fA-F]{6}$/;
      if (!hexPattern.test(input)) {
        alert("Invalid hex code! Please enter a valid code (e.g., #123ABC).");
        return;
      }
      const rgb = hexToRgb(input);
      r = rgb.r;
      g = rgb.g;
      b = rgb.b;
      alert(`Starting hex code set to ${input}`);
    }

    // Function to set the stop hex code
    function setStopHex() {
      const input = document.getElementById('stopHexCode').value;
      const hexPattern = /^#[0-9a-fA-F]{6}$/;
      if (!hexPattern.test(input)) {
        alert("Invalid hex code! Please enter a valid code (e.g., #123ABC).");
        return;
      }
      stopHex = input;
      alert(`Stop hex code set to ${stopHex}`);
    }

    function updateTime() {
      const timeRunningElement = document.getElementById('timeRunning');
      const finishTimeElement = document.getElementById('finishTime');
      if (startTime) {
        const now = new Date();
        const elapsed = now - startTime;
        const elapsedMinutes = Math.floor(elapsed / 1000 / 60);
        const elapsedSeconds = Math.floor((elapsed / 1000) % 60);
        timeRunningElement.textContent = `${elapsedMinutes}:${elapsedSeconds < 10 ? '0' + elapsedSeconds : elapsedSeconds}`;
        if (generatedCount > 0) {
          const elapsedPerCode = elapsed / generatedCount;
          const remainingCodes = (16777216 - generatedCount);
          const remainingTime = remainingCodes * elapsedPerCode;
          const finishTime = new Date(now.getTime() + remainingTime);
          const day = finishTime.toLocaleDateString('en-GB');
          const hours = finishTime.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true });
          finishTimeElement.textContent = `${day} ${hours}`;
        }
      }
    }

    function updateFPS() {
      const fpsElement = document.getElementById('fps');
      const now = Date.now();
      const deltaTime = now - fpsCounter;
      if (deltaTime > 1000) {
        fpsElement.textContent = (generatedCount - lastGeneratedCount);
        lastGeneratedCount = generatedCount;
        fpsCounter = now;
      }
    }

    function generateNextBatch() {
      const output = document.getElementById('output');
      const counter = document.getElementById('counter');
      const batchSize = parseInt(document.getElementById('batchSize').value) || 1000;
      batchDelay = parseInt(document.getElementById('batchDelay').value) || 0;
      for (let batch = 0; batch < batchSize; batch++) {
        if (!isGenerating) return;
        const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
        output.textContent += hex + '; ';
        output.scrollTop = output.scrollHeight;
        if (saveToFile) {
          hexCodes.push(hex);
        }
        generatedCount++;
        counter.textContent = generatedCount;

        // Check if we reached the stop hex code
        if (stopHex && hex === stopHex) {
          stopGenerating();
          alert(`Stopped at hex code: ${stopHex}`);
          return;
        }

        b++;
        if (b > 255) { b = 0; g++; }
        if (g > 255) { g = 0; r++; }
        if (r > 255) { stopGenerating(); if (saveToFile) saveFile(); alert("All hex codes generated!"); return; }
      }
      updateTime();
      updateFPS();
      setTimeout(generateNextBatch, batchDelay);
    }

    function startGenerating() {
      if (isGenerating) return;
      isGenerating = true;
      hexCodes = [];
      generatedCount = 0;
      startTime = new Date();
      timeInterval = setInterval(updateTime, 1000);
      fpsCounter = Date.now();
      generateNextBatch();
    }

    function stopGenerating() {
      isGenerating = false;
      clearInterval(timeInterval);
    }

    function clearOutput() {
      const output = document.getElementById('output');
      const counter = document.getElementById('counter');
      output.textContent = '';
      counter.textContent = '0';
      r = g = b = 0;
      generatedCount = 0;
      hexCodes = [];
      isGenerating = false;
      clearInterval(timeInterval);
      startTime = null;
      document.getElementById('timeRunning').textContent = '0:00';
      document.getElementById('finishTime').textContent = 'Not available';
      document.getElementById('fps').textContent = '0';
    }

    function toggleSaveToFile() {
      saveToFile = !saveToFile;
      const toggleButton = document.getElementById('toggleSave');
      toggleButton.textContent = `Save to File: ${saveToFile ? 'On' : 'Off'}`;
    }

    function saveFile() {
      const blob = new Blob([hexCodes.join('\n')], { type: 'text/plain' });
      const downloadLink = document.getElementById('downloadLink');
      downloadLink.href = URL.createObjectURL(blob);
      downloadLink.style.display = 'inline';
      downloadLink.textContent = 'Download Hex Codes';
    }

    function copyToClipboard() {
      const output = document.getElementById('output');
      const textToCopy = output.textContent.trim();
      if (!textToCopy) {
        alert("No hex codes to copy!");
        return;
      }
      navigator.clipboard.writeText(textToCopy)
        .then(() => alert("Hex codes copied to clipboard!"))
        .catch(err => alert("Failed to copy to clipboard: " + err));
    }

    let r2 = 0, g2 = 0, b2 = 0;
    let isGeneratingSquares = false;

    function generateColorSquares() {
      const container = document.getElementById('color-container');
      const batchSize = parseInt(document.getElementById('colorBatchSize').value) || 10;
      for (let i = 0; i < batchSize; i++) {
        if (!isGeneratingSquares) return;
        const hex = `#${r2.toString(16).padStart(2, '0')}${g2.toString(16).padStart(2, '0')}${b2.toString(16).padStart(2, '0')}`;
        const square = document.createElement('div');
        square.className = 'color-square';
        square.style.backgroundColor = hex;
        square.textContent = hex;
        container.appendChild(square);
        b2++;
        if (b2 > 255) { b2 = 0; g2++; }
        if (g2 > 255) { g2 = 0; r2++; }
        if (r2 > 255) { stopGeneratingSquares(); alert("All colors generated!"); return; }
      }
      setTimeout(generateColorSquares, 0);
    }

    function startGeneratingSquares() {
      if (isGeneratingSquares) return;
      isGeneratingSquares = true;
      generateColorSquares();
    }

    function stopGeneratingSquares() {
      isGeneratingSquares = false;
    }

    function clearSquares() {
      const container = document.getElementById('color-container');
      container.innerHTML = '';
      r2 = g2 = b2 = 0;
      isGeneratingSquares = false;
    }
  </script>
</body>
</html>

created 5 months ago by cmb pro

HTML Online Editor & Compiler

Write, Run & Share HTML code online using OneCompiler's HTML online Code editor for free. It's one of the robust, feature-rich online Code editor for HTML language, running on the latest version HTML5. Getting started with the OneCompiler's HTML compiler is simple and pretty fast. The editor shows sample boilerplate code when you choose language as HTML. You can also specify the stylesheet information in styles.css tab and scripts information in scripts.js tab and start coding.

About HTML

HTML(Hyper Text Markup language) is the standard markup language for Web pages, was created by Berners-Lee in the year 1991. Almost every web page over internet might be using HTML.

Syntax help

Fundamentals

Any HTML document must start with document declaration <!DOCTYPE html>
HTML documents begin with <html> and ends with </html>
Headings are defined with <h1> to <h6> where <h1> is the highest important heading and <h6> is the least important sub-heading.
Paragrahs are defined in <p>..</p> tag.

Links are defined in <a> tag.

Example:

<a href="https://onecompiler.com/html">HTML online compiler</a>

Images are defined in <img> tag, where src attribute consists of image name.
Buttons are defined in <button>..</button> tag
Lists are defined in <ul> for unordered/bullet list and <ol> for ordered/number list, and the list items are defined in <li>.

HTML Elements and Attributes

HTML element is everything present from start tag to end tag.
The text present between start and end tag is called HTML element content.
Anything can be a tagname but it's preferred to put the meaningful title to the content present as tag name.
Do not forget the end tag.
Elements with no content are called empty elements.
Elements can have attributes which provides additional information about the element.
In the below example, href is an attribute and a is the tag name.
Example:
```
<a href="https://onecompiler.com/html">HTML online compiler</a>
```

CSS

CSS(cascading style sheets) describes how HTML elements will look on the web page like color, font-style, font-size, background color etc.

Example:

Below is a sample style sheet which displays heading in green and in Candara font with padding space of 25px.

body{
  padding: 25px;
}
.title {
	color: #228B22;
	font-family: Candara;
}

HTML Tables

HTML Tables are defined in <table> tag.
Table row should be defined in <tr> tag
Table header should be defined in <th> tag
Table data should be defined in <td> tag
Table caption should be defined in <caption> tag

HTML-Javascript

Javascript is used in HTML pages to make them more interactive.
<script> is the tag used to write scripts in HTML
You can either reference a external script or write script code in this tag.

Example

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