Free extraordinary web tools

Monday, May 6, 2024

AI Story Writing Tool

Thinking...

Thursday, March 21, 2024

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Text to ASCII Art Converter</title>
    <style>
        body {
  background-color: #f2f2f2;
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  text-align: center;
}

textarea {
  display: block;
  margin: 0 auto;
  width: 80%;
  min-height: 200px;
  resize: none;
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
}

#output {
  display: block;
  margin: 20px auto;
  white-space: pre;
  font-size: 1.2em;
}

    </style>
  </head>
  <body>
    <h1>Text to ASCII Art Converter</h1>
    <textarea id="input" placeholder="Enter your text here..."></textarea>
    <button id="convert-btn" onclick="convert()">Convert</button>
    <div id="output"></div>
    <script>
        function convert() {
  const input = document.getElementById("input").value;
  const output = document.getElementById("output");
  let result = "";
  
  for (let i = 0; i < input.length; i++) {
    const charCode = input.charCodeAt(i);
    
    if (charCode === 10) { // new line
      result += "<br>";
    } else if (charCode >= 32 && charCode <= 126) { // printable ASCII
      result += String.fromCharCode(9216 + charCode); // convert to block element
    } else { // non-printable ASCII
      result += input[i];
    }
  }
  
  output.innerHTML = result;
}

    </script>
  </body>

</html>

<!DOCTYPE html>

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

body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
  padding: 20px;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: 0 auto;
  max-width: 800px;
}

.box {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  margin: 20px;
  width: calc(50% - 40px);
  min-width: 300px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.cpu-meter, .memory-meter {
  position: relative;
  height: 40px;
  background-color: #ddd;
  border-radius: 20px;
}

.cpu-bar, .memory-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 20px;
}

.cpu-bar {
  background-color: #fc605b;
}

.memory-bar {
  background-color: #43b581;
}

.percent {
  font-size: 36px;
  font-weight: bold;
  margin-top: 10px;
  color: #666;
}

  </style>
</head>
<body>
  <div class="container">
    <div class="box">
      <div class="title">CPU Usage</div>
      <div class="cpu-meter">
        <div class="cpu-bar" id="cpu-bar"></div>
      </div>
      <div class="percent" id="cpu-percent">0%</div>
    </div>
    <div class="box">
      <div class="title">Memory Usage</div>
      <div class="memory-meter">
        <div class="memory-bar" id="memory-bar"></div>
      </div>
      <div class="percent" id="memory-percent">0%</div>
    </div>
  </div>
  <script>
      // CPU usage
const cpuBar = document.getElementById('cpu-bar');
const cpuPercent = document.getElementById('cpu-percent');

function updateCPUUsage() {
  const randomNum = Math.floor(Math.random() * 101);
  cpuBar.style.width = randomNum + '%';
  cpuPercent.textContent = randomNum + '%';
}

setInterval(updateCPUUsage, 2000);

// Memory usage
const memoryBar = document.getElementById('memory-bar');
const memoryPercent = document.getElementById('memory-percent');

function updateMemoryUsage() {
  const randomNum = Math.floor(Math.random() * 101);
  memoryBar.style.width = randomNum + '%';
  memoryPercent.textContent = randomNum + '%';
}

setInterval(updateMemoryUsage, 3000);

  </script>
</body>
</html>

<!DOCTYPE html>

<html>
  <head>
    <meta charset="UTF-8">
    <title>System Information Tool</title>
    <style>
      /* add your custom styles here */
    </style>
  </head>
  <body>
    <h1>System Information Tool</h1>
    
    <div id="system-info"></div>
    
    <script>
        // get the div where the system info will be displayed
const systemInfoDiv = document.getElementById('system-info');

// create an array with the system info you want to display
const systemInfo = [
  { name: 'Operating System', value: navigator.platform },
  { name: 'Browser', value: navigator.userAgent },
  { name: 'Screen Resolution', value: screen.width + 'x' + screen.height },
  { name: 'Cookies Enabled', value: navigator.cookieEnabled },
  { name: 'Language', value: navigator.language }
];

// create a table to display the system info
const table = document.createElement('table');
table.classList.add('system-info-table');

// create a row for each system info item
systemInfo.forEach((item) => {
  const row = document.createElement('tr');
  row.innerHTML = `<td>${item.name}</td><td>${item.value}</td>`;
  table.appendChild(row);
});

// add the table to the system info div
systemInfoDiv.appendChild(table);

    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stopwatch</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

    h1 {
      margin-top: 50px;
    }

    #time {
      font-size: 3em;
      margin-top: 30px;
    }

    button {
      font-size: 1.2em;
      margin: 10px;
      padding: 10px 20px;
      border-radius: 5px;
      border: none;
      background-color: #1abc9c;
      color: #fff;
      cursor: pointer;
    }

    button:hover {
      background-color: #16a085;
    }
  </style>
</head>
<body>
  <h1>Stopwatch</h1>
  <div id="time">00:00:00</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>

  <script>
    var hours = 0;
    var minutes = 0;
    var seconds = 0;
    var milliseconds = 0;
    var timer;

    function updateTimer() {
      milliseconds += 10;

      if (milliseconds == 1000) {
        milliseconds = 0;
        seconds++;
      }

      if (seconds == 60) {
        seconds = 0;
        minutes++;
      }

      if (minutes == 60) {
        minutes = 0;
        hours++;
      }

      document.getElementById("time").innerHTML = pad(hours) + ":" + pad(minutes) + ":" + pad(seconds);
    }

    function pad(num) {
      if (num < 10) {
        return "0" + num.toString();
      } else {
        return num.toString();
      }
    }

    document.getElementById("start").addEventListener("click", function() {
      timer = setInterval(updateTimer, 10);
    });

    document.getElementById("stop").addEventListener("click", function() {
      clearInterval(timer);
    });

    document.getElementById("reset").addEventListener("click", function() {
      clearInterval(timer);
      hours = 0;
      minutes = 0;
      seconds = 0;
      milliseconds = 0;
      document.getElementById("time").innerHTML = "00:00:00";
    });
  </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sort Text Lines</title>
    <style>
        /* Styles for the text area */
        #input-text, #output-text {
            width: 100%;
            height: 150px;
            padding: 10px;
            margin-bottom: 10px;
            box-sizing: border-box;
        }
        /* Styles for the buttons */
        #sort-button, #clear-button {
            display: block;
            margin: 10px auto;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            box-shadow: 0 4px #3e8e41;
        }
        #sort-button:hover, #clear-button:hover {
            background-color: #3e8e41;
        }
    </style>
</head>
<body>
    <div>
        <textarea id="input-text" placeholder="Enter your text here"></textarea>
        <button id="sort-button">Sort Lines</button>
        <button id="clear-button">Clear</button>
        <textarea id="output-text" placeholder="Sorted text will appear here" readonly></textarea>
    </div>
    <script>
        // Get the elements
        const inputText = document.getElementById('input-text');
        const outputText = document.getElementById('output-text');
        const sortButton = document.getElementById('sort-button');
        const clearButton = document.getElementById('clear-button');

        // Sort the text lines
        function sortLines() {
            // Get the lines and sort them
            const lines = inputText.value.split('\n').sort();

            // Join the sorted lines and display them
            outputText.value = lines.join('\n');
        }

        // Clear the text areas
        function clearText() {
            inputText.value = '';
            outputText.value = '';
        }

        // Add event listeners to the buttons
        sortButton.addEventListener('click', sortLines);
        clearButton.addEventListener('click', clearText);
    </script>
</body>
</html>

<!DOCTYPE html>

<html>
<head>
	<title>SEO Audit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
		}

		header {
			background-color: #333;
			color: #fff;
			padding: 20px;
			text-align: center;
		}

		main {
			margin: 20px;
		}

		h1 {
			font-size: 28px;
			margin-top: 0;
		}

		p {
			font-size: 16px;
			line-height: 1.5;
			margin-bottom: 20px;
		}

		table {
			border-collapse: collapse;
			width: 100%;
			margin-bottom: 20px;
		}

		th, td {
			padding: 8px;
			text-align: left;
			border-bottom: 1px solid #ddd;
		}

		th {
			background-color: #f2f2f2;
		}

		@media screen and (max-width: 600px) {
			h1 {
				font-size: 24px;
			}

			p {
				font-size: 14px;
			}
		}
	</style>
</head>
<body>
	<header>
		<h1>SEO Audit</h1>
	</header>
	<main>
		<p>This is a sample SEO audit page. Please enter the URL of the website you want to audit:</p>
		<input type="text" id="url-input">
		<button onclick="runAudit()">Run Audit</button>
		<div id="audit-results"></div>
	</main>
	<script>
		function runAudit() {
			// Get the URL input value
			var url = document.getElementById("url-input").value;

			// Perform the audit
			var auditResults = performAudit(url);

			// Display the results
			displayResults(auditResults);
		}

		function performAudit(url) {
			// Perform the audit logic here and return the results
			var results = {
				title: "Sample Audit Results",
				metaDescription: "This is a sample SEO audit page.",
				h1Tags: [
					"Sample Heading 1",
					"Sample Heading 2"
				],
				pageSpeedScore: 85,
				keywordDensity: 2.5
			};

			return results;
		}

		function displayResults(results) {
			// Display the results in a table
			var html = "<h1>" + results.title + "</h1>";
			html += "<p>" + results.metaDescription + "</p>";
			html += "<table>";
			html += "<tr><th>Heading 1 Tags</th><td>" + results.h1Tags.join(", ") + "</td></tr>";
			html += "<tr><th>Page Speed Score</th><td>" + results.pageSpeedScore + "</td></tr>";
			html += "<tr><th>Keyword Density</th><td>" + results.keywordDensity + "</td></tr>";
			html += "</table>";

			// Add the HTML to the results div
			document.getElementById("audit-results").innerHTML = html;
		}
	</script>
</body>
</html>