<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quick Tools</title>
  <style>
    /* General styling */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, sans-serif;
      background-color: #121212;
      color: #e0e0e0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    h1 {
      text-align: center;
      margin-bottom: 20px;
      color: #ff4444;
    }

    /* Container styling */
    .container {
      display: flex;
      width: 90%;
      max-width: 1000px;
      height: 80%;
      background: #1b1b1b;
      border: 2px solid #ff4444;
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    }

    /* Tabs styling */
    .tabs {
      width: 200px;
      background: #222;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-top: 10px;
      border-right: 2px solid #ff4444;
    }
    .tab {
      padding: 15px;
      cursor: pointer;
      width: 100%;
      text-align: center;
      color: #ff6666;
      border-bottom: 2px solid transparent;
    }
    .tab:hover {
      background: #333;
    }
    .tab.active {
      border-bottom: 2px solid #ff4444;
      color: #ff4444;
    }

    /* Content area styling */
    .content {
      display: none;
      padding: 20px;
      flex-grow: 1;
    }
    .content.active {
      display: block;
    }
    input, textarea, button {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      border: none;
      border-radius: 5px;
      background: #2b2b2b;
      color: #e0e0e0;
    }
    button {
      background: #ff4444;
      color: #121212;
      font-weight: bold;
      cursor: pointer;
    }
    button:hover {
      background: #ff6666;
    }

    /* Scrollable content */
    textarea {
      resize: vertical;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="tabs">
      <div class="tab active" onclick="switchTab(0)">Date & Time</div>
      <div class="tab" onclick="switchTab(1)">URL Encode/Decode</div>
      <div class="tab" onclick="switchTab(2)">Password Generator</div>
      <div class="tab" onclick="switchTab(3)">Unit Converter</div>
      <div class="tab" onclick="switchTab(4)">Text Case Converter</div>
      <div class="tab" onclick="switchTab(5)">Regex Tester</div>
      <div class="tab" onclick="switchTab(6)">JSON Formatter/Validator</div>
      <div class="tab" onclick="switchTab(7)">Markdown to HTML</div>
      <div class="tab" onclick="switchTab(8)">Base64 Encode/Decode</div>
      <div class="tab" onclick="switchTab(9)">Currency Converter</div>
      <div class="tab" onclick="switchTab(10)">Word & Character Counter</div>
      <div class="tab" onclick="switchTab(11)">Color Picker</div>
      <div class="tab" onclick="switchTab(12)">Stopwatch/Timer</div>
      <div class="tab" onclick="switchTab(13)">IP Address Lookup</div>
      <div class="tab" onclick="switchTab(14)">Number System Converter</div>
    </div>

    <div class="content active">
      <h2>Date & Time</h2>
      <label for="datetime">Pick a date & time:</label>
      <input type="datetime-local" id="datetime">
      <button onclick="calculateDate()">Calculate</button>
      <div id="date-output"></div>
    </div>

    <div class="content">
      <h2>URL Encode/Decode</h2>
      <textarea id="url-input" rows="4" placeholder="Enter text to encode or decode"></textarea>
      <button onclick="encode()">Encode</button>
      <button onclick="decode()">Decode</button>
      <textarea id="url-output" rows="4" readonly placeholder="Result"></textarea>
    </div>

    <div class="content">
      <h2>Password Generator</h2>
      <label for="password-length">Password Length:</label>
      <input type="number" id="password-length" value="12" min="4" max="32">
      <button onclick="generatePassword()">Generate Password</button>
      <textarea id="password-output" rows="2" readonly></textarea>
    </div>

    <div class="content">
      <h2>Unit Converter</h2>
      <label for="unit-value">Value:</label>
      <input type="number" id="unit-value">
      <select id="unit-from">
        <option value="meter">Meters</option>
        <option value="kilometer">Kilometers</option>
        <option value="mile">Miles</option>
        <option value="foot">Feet</option>
      </select>
      <span>to</span>
      <select id="unit-to">
        <option value="mile">Miles</option>
        <option value="kilometer">Kilometers</option>
        <option value="meter">Meters</option>
        <option value="foot">Feet</option>
      </select>
      <button onclick="convertUnits()">Convert</button>
      <div id="unit-output"></div>
    </div>

    <div class="content">
      <h2>Text Case Converter</h2>
      <textarea id="text-input" rows="4" placeholder="Enter text to convert"></textarea>
      <button onclick="convertText()">Convert to Uppercase</button>
      <button onclick="convertToLowercase()">Convert to Lowercase</button>
      <textarea id="text-output" rows="4" readonly placeholder="Converted text"></textarea>
    </div>

    <div class="content">
      <h2>Regex Tester</h2>
      <textarea id="regex-input" rows="4" placeholder="Enter text to test"></textarea>
      <textarea id="regex-pattern" rows="2" placeholder="Enter regex pattern"></textarea>
      <button onclick="testRegex()">Test Regex</button>
      <div id="regex-output"></div>
    </div>

    <div class="content">
      <h2>JSON Formatter/Validator</h2>
      <textarea id="json-input" rows="6" placeholder="Enter JSON"></textarea>
      <button onclick="formatJSON()">Format JSON</button>
      <button onclick="validateJSON()">Validate JSON</button>
      <div id="json-output"></div>
    </div>

    <div class="content">
      <h2>Markdown to HTML</h2>
      <textarea id="markdown-input" rows="6" placeholder="Enter Markdown"></textarea>
      <button onclick="convertMarkdown()">Convert to HTML</button>
      <div id="html-output"></div>
    </div>

    <div class="content">
      <h2>Base64 Encode/Decode</h2>
      <textarea id="base64-input" rows="4" placeholder="Enter text to encode or decode"></textarea>
      <button onclick="encodeBase64()">Encode</button>
      <button onclick="decodeBase64()">Decode</button>
      <textarea id="base64-output" rows="4" readonly placeholder="Result"></textarea>
    </div>

    <div class="content">
      <h2>Currency Converter</h2>
      <label for="currency-value">Amount:</label>
      <input type="number" id="currency-value" value="1">
      <select id="currency-from">
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
        <option value="GBP">GBP</option>
      </select>
      <span>to</span>
      <select id="currency-to">
        <option value="EUR">EUR</option>
        <option value="USD">USD</option>
        <option value="GBP">GBP</option>
      </select>
      <button onclick="convertCurrency()">Convert</button>
      <div id="currency-output"></div>
    </div>

    <div class="content">
      <h2>Word & Character Counter</h2>
      <textarea id="text-counter" rows="4" placeholder="Enter text"></textarea>
      <button onclick="countWords()">Count Words & Characters</button>
      <div id="counter-output"></div>
    </div>

    <div class="content">
      <h2>Color Picker</h2>
      <input type="color" id="color-picker">
      <div id="color-output"></div>
    </div>

    <div class="content">
      <h2>Stopwatch/Timer</h2>
      <button onclick="startStopwatch()">Start Stopwatch</button>
      <button onclick="stopStopwatch()">Stop Stopwatch</button>
      <div id="stopwatch-output"></div>
    </div>

    <div class="content">
      <h2>IP Address Lookup</h2>
      <input type="text" id="ip-input" placeholder="Enter IP address">
      <button onclick="lookupIP()">Lookup IP</button>
      <div id="ip-output"></div>
    </div>

    <div class="content">
      <h2>Number System Converter</h2>
      <input type="number" id="number-value" placeholder="Enter number">
      <select id="number-system">
        <option value="binary">Binary</option>
        <option value="decimal">Decimal</option>
        <option value="hexadecimal">Hexadecimal</option>
      </select>
      <button onclick="convertNumberSystem()">Convert</button>
      <div id="number-system-output"></div>
    </div>
  </div>

  <script>
    function switchTab(index) {
      document.querySelectorAll('.tab').forEach((tab, i) => {
        tab.classList.toggle('active', i === index);
      });
      document.querySelectorAll('.content').forEach((content, i) => {
        content.classList.toggle('active', i === index);
      });
    }

    // Date and time difference calculator
    function calculateDate() {
      const input = document.getElementById('datetime').value;
      if (input) {
        const targetDate = new Date(input);
        const now = new Date();
        const diff = Math.abs(targetDate - now);

        const days = Math.floor(diff / (1000 * 60 * 60 * 24));
        const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

        document.getElementById('date-output').innerText = 
          `Difference: ${days} days, ${hours} hours, and ${minutes} minutes`;
      } else {
        document.getElementById('date-output').innerText = 'Please select a date and time.';
      }
    }

    // URL Encode/Decode
    function encode() {
      const input = document.getElementById('url-input').value;
      document.getElementById('url-output').value = encodeURIComponent(input);
    }

    function decode() {
      const input = document.getElementById('url-input').value;
      document.getElementById('url-output').value = decodeURIComponent(input);
    }

    // Password Generator
    function generatePassword() {
      const length = parseInt(document.getElementById('password-length').value, 10) || 12;
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+';
      let password = '';
      for (let i = 0; i < length; i++) {
        password += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      document.getElementById('password-output').value = password;
    }

    // Unit Converter (basic example)
    function convertUnits() {
      const value = parseFloat(document.getElementById('unit-value').value);
      const fromUnit = document.getElementById('unit-from').value;
      const toUnit = document.getElementById('unit-to').value;
      let result = 0;

      if (fromUnit === 'meter' && toUnit === 'kilometer') {
        result = value / 1000;
      } else if (fromUnit === 'kilometer' && toUnit === 'meter') {
        result = value * 1000;
      }
      // Add more conversions here as necessary

      document.getElementById('unit-output').innerText = `Result: ${result} ${toUnit}`;
    }

    // Text Case Converter
    function convertText() {
      const inputText = document.getElementById('text-input').value;
      document.getElementById('text-output').value = inputText.toUpperCase();
    }

    function convertToLowercase() {
      const inputText = document.getElementById('text-input').value;
      document.getElementById('text-output').value = inputText.toLowerCase();
    }

    // Regex Tester
    function testRegex() {
      const input = document.getElementById('regex-input').value;
      const pattern = new RegExp(document.getElementById('regex-pattern').value);
      const result = pattern.test(input) ? 'Match found' : 'No match';
      document.getElementById('regex-output').innerText = result;
    }

    // JSON Formatter/Validator
    function formatJSON() {
      const input = document.getElementById('json-input').value;
      try {
        const json = JSON.parse(input);
        document.getElementById('json-output').innerText = JSON.stringify(json, null, 2);
      } catch (e) {
        document.getElementById('json-output').innerText = 'Invalid JSON';
      }
    }

    function validateJSON() {
      const input = document.getElementById('json-input').value;
      try {
        JSON.parse(input);
        document.getElementById('json-output').innerText = 'Valid JSON';
      } catch (e) {
        document.getElementById('json-output').innerText = 'Invalid JSON';
      }
    }

    // Markdown to HTML
    function convertMarkdown() {
      const markdown = document.getElementById('markdown-input').value;
      document.getElementById('html-output').innerHTML = markdown.replace(/([#]+)(.*)/g, (match, p1, p2) => {
        const level = p1.length;
        return `<h${level}>${p2.trim()}</h${level}>`;
      });
    }

    // Base64 Encode/Decode
    function encodeBase64() {
      const input = document.getElementById('base64-input').value;
      document.getElementById('base64-output').value = btoa(input);
    }

    function decodeBase64() {
      const input = document.getElementById('base64-input').value;
      document.getElementById('base64-output').value = atob(input);
    }

    // Currency Converter (simple version, no API)
    function convertCurrency() {
      const value = parseFloat(document.getElementById('currency-value').value);
      const fromCurrency = document.getElementById('currency-from').value;
      const toCurrency = document.getElementById('currency-to').value;
      let conversionRate = 1;

      // Just an example, replace with actual rates
      if (fromCurrency === 'USD' && toCurrency === 'EUR') {
        conversionRate = 0.92;
      } else if (fromCurrency === 'EUR' && toCurrency === 'USD') {
        conversionRate = 1.09;
      }

      document.getElementById('currency-output').innerText = `Converted: ${value * conversionRate} ${toCurrency}`;
    }

    // Word & Character Counter
    function countWords() {
      const text = document.getElementById('text-counter').value;
      const wordCount = text.split(/\s+/).filter(Boolean).length;
      const charCount = text.length;
      document.getElementById('counter-output').innerText = `Words: ${wordCount}, Characters: ${charCount}`;
    }

    // Color Picker
    document.getElementById('color-picker').addEventListener('input', (e) => {
      document.getElementById('color-output').innerText = `Selected Color: ${e.target.value}`;
    });

    // Stopwatch
    let stopwatchInterval;
    let stopwatchTime = 0;

    function startStopwatch() {
      stopwatchInterval = setInterval(() => {
        stopwatchTime++;
        document.getElementById('stopwatch-output').innerText = `Time: ${stopwatchTime}s`;
      }, 1000);
    }

    function stopStopwatch() {
      clearInterval(stopwatchInterval);
    }

    // IP Address Lookup
    function lookupIP() {
      const ip = document.getElementById('ip-input').value;
      // Example lookup, replace with actual IP lookup logic
      document.getElementById('ip-output').innerText = `IP: ${ip} - Example location`;
    }

    // Number System Converter
    function convertNumberSystem() {
      const value = parseInt(document.getElementById('number-value').value, 10);
      const system = document.getElementById('number-system').value;
      let result = '';

      if (system === 'binary') {
        result = value.toString(2);
      } else if (system === 'hexadecimal') {
        result = value.toString(16);
      } else {
        result = value;
      }

      document.getElementById('number-system-output').innerText = `Result: ${result}`;
    }
  </script>
</body>
</html>
