winnie/WinnieAPI-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
WinnieAPI-v2/public/index.html
T

430 lines
20 KiB
HTML
Raw Permalink Normal View History

first commit
2026-05-01 20:02:13 +02:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>⚡ WinnieAPI-v2 — Developer Utilities</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="bg-glow"></div>
<div class="particles" id="particles"></div>
<div class="copy-toast" id="copyToast">Copied to clipboard! ✓</div>
<!-- Header -->
<header>
<div class="header-inner">
<div class="logo" onclick="showPage('home')">⚡ WinnieAPI-v2</div>
<div class="search-bar">
<i class="fas fa-search"></i>
<input type="text" id="searchInput" placeholder="Search tools... (Ctrl+K)" oninput="filterTools(this.value)" />
</div>
<div class="header-actions">
<button onclick="showPage('home')" title="Home"><i class="fas fa-home"></i></button>
</div>
</div>
</header>
<main>
<!-- ═══════════════ HOME ═══════════════ -->
<div class="page active" id="page-home">
<div class="hero">
<h1>Your <span class="gradient">Developer Toolbox</span></h1>
<p>Fast, free, privacy-friendly utilities — right in your browser. No sign-up, no tracking, no nonsense.</p>
<div class="stats">
<div class="stat"><div class="stat-num" id="toolCount">0</div><div class="stat-label">Tools</div></div>
<div class="stat"><div class="stat-num">0</div><div class="stat-label">Ads</div></div>
<div class="stat"><div class="stat-num">∞</div><div class="stat-label">Usage</div></div>
</div>
</div>
<div class="categories">
<button class="cat-btn active" onclick="filterCategory('all', this)">All Tools</button>
<button class="cat-btn" onclick="filterCategory('format', this)">Formatters</button>
<button class="cat-btn" onclick="filterCategory('encode', this)">Encode / Decode</button>
<button class="cat-btn" onclick="filterCategory('generate', this)">Generators</button>
<button class="cat-btn" onclick="filterCategory('text', this)">Text</button>
<button class="cat-btn" onclick="filterCategory('web', this)">Web</button>
<button class="cat-btn" onclick="filterCategory('dev', this)">Dev Tools</button>
</div>
<div class="tools-grid" id="toolsGrid">
<!-- JSON -->
<div class="tool-card" data-cat="format" data-name="JSON Formatter" onclick="showPage('json')">
<div class="tc-top">
<div class="icon ic-purple"><i class="fas fa-code"></i></div>
<h3>JSON Formatter</h3>
<span class="tag tag-purple">Format</span>
</div>
<p>Beautify, minify, and validate JSON with configurable indentation.</p>
</div>
<!-- URL -->
<div class="tool-card" data-cat="web" data-name="URL Shortener" onclick="showPage('url')">
<div class="tc-top">
<div class="icon ic-green"><i class="fas fa-link"></i></div>
<h3>URL Shortener</h3>
<span class="tag tag-green">Web</span>
</div>
<p>Create short, shareable links instantly with click tracking.</p>
</div>
<!-- YouTube -->
<div class="tool-card" data-cat="web" data-name="YouTube Tool" onclick="showPage('youtube')">
<div class="tc-top">
<div class="icon ic-red"><i class="fab fa-youtube"></i></div>
<h3>YouTube Tool</h3>
<span class="tag tag-red">Video</span>
</div>
<p>Extract thumbnails, metadata, and embed codes from YouTube videos.</p>
</div>
<!-- Base64 -->
<div class="tool-card" data-cat="encode" data-name="Base64 Encoder Decoder" onclick="showPage('base64')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-exchange-alt"></i></div>
<h3>Base64 Encoder</h3>
<span class="tag tag-cyan">Encode</span>
</div>
<p>Encode and decode Base64 strings instantly.</p>
</div>
<!-- Hash -->
<div class="tool-card" data-cat="dev" data-name="Hash Generator MD5 SHA" onclick="showPage('hash')">
<div class="tc-top">
<div class="icon ic-orange"><i class="fas fa-fingerprint"></i></div>
<h3>Hash Generator</h3>
<span class="tag tag-orange">Crypto</span>
</div>
<p>Generate MD5, SHA-1, SHA-256, and SHA-512 hashes from text.</p>
</div>
<!-- Color -->
<div class="tool-card" data-cat="dev" data-name="Color Converter HEX RGB HSL" onclick="showPage('color')">
<div class="tc-top">
<div class="icon ic-pink"><i class="fas fa-palette"></i></div>
<h3>Color Converter</h3>
<span class="tag tag-pink">Design</span>
</div>
<p>Convert colors between HEX, RGB, and HSL with live preview.</p>
</div>
<!-- Password -->
<div class="tool-card" data-cat="generate" data-name="Password Generator" onclick="showPage('password')">
<div class="tc-top">
<div class="icon ic-red"><i class="fas fa-key"></i></div>
<h3>Password Generator</h3>
<span class="tag tag-red">Security</span>
</div>
<p>Generate strong, cryptographically secure passwords with custom rules.</p>
</div>
<!-- UUID -->
<div class="tool-card" data-cat="generate" data-name="UUID Generator" onclick="showPage('uuid')">
<div class="tc-top">
<div class="icon ic-purple"><i class="fas fa-hashtag"></i></div>
<h3>UUID Generator</h3>
<span class="tag tag-purple">Generate</span>
</div>
<p>Generate random v4 UUIDs. Batch generate up to 100 at once.</p>
</div>
<!-- Lorem -->
<div class="tool-card" data-cat="generate" data-name="Lorem Ipsum Generator" onclick="showPage('lorem')">
<div class="tc-top">
<div class="icon ic-yellow"><i class="fas fa-paragraph"></i></div>
<h3>Lorem Ipsum</h3>
<span class="tag tag-yellow">Text</span>
</div>
<p>Generate placeholder text with configurable paragraph count.</p>
</div>
<!-- JWT -->
<div class="tool-card" data-cat="dev" data-name="JWT Decoder Token" onclick="showPage('jwt')">
<div class="tc-top">
<div class="icon ic-orange"><i class="fas fa-shield-alt"></i></div>
<h3>JWT Decoder</h3>
<span class="tag tag-orange">Auth</span>
</div>
<p>Decode JWT tokens and inspect header, payload, and expiry status.</p>
</div>
<!-- Timestamp -->
<div class="tool-card" data-cat="dev" data-name="Unix Timestamp Converter Date" onclick="showPage('timestamp')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-clock"></i></div>
<h3>Timestamp Converter</h3>
<span class="tag tag-cyan">Time</span>
</div>
<p>Convert between Unix timestamps, ISO dates, and human-readable formats.</p>
</div>
<!-- Regex -->
<div class="tool-card" data-cat="dev" data-name="Regex Tester Regular Expression" onclick="showPage('regex')">
<div class="tc-top">
<div class="icon ic-pink"><i class="fas fa-asterisk"></i></div>
<h3>Regex Tester</h3>
<span class="tag tag-pink">Dev</span>
</div>
<p>Test regular expressions with live matching and capture groups.</p>
</div>
<!-- Markdown -->
<div class="tool-card" data-cat="format" data-name="Markdown Preview Renderer" onclick="showPage('markdown')">
<div class="tc-top">
<div class="icon ic-purple"><i class="fab fa-markdown"></i></div>
<h3>Markdown Preview</h3>
<span class="tag tag-purple">Format</span>
</div>
<p>Live preview Markdown as you type with full formatting support.</p>
</div>
<!-- Diff -->
<div class="tool-card" data-cat="text" data-name="Text Diff Checker Compare" onclick="showPage('diff')">
<div class="tc-top">
<div class="icon ic-green"><i class="fas fa-columns"></i></div>
<h3>Diff Checker</h3>
<span class="tag tag-green">Compare</span>
</div>
<p>Compare two texts side-by-side and find differences line by line.</p>
</div>
<!-- Word Counter -->
<div class="tool-card" data-cat="text" data-name="Word Character Counter Statistics" onclick="showPage('counter')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-calculator"></i></div>
<h3>Word Counter</h3>
<span class="tag tag-cyan">Text</span>
</div>
<p>Count words, characters, sentences, and get reading time estimates.</p>
</div>
<!-- CSS Minifier -->
<div class="tool-card" data-cat="format" data-name="CSS Minifier Compressor" onclick="showPage('cssmin')">
<div class="tc-top">
<div class="icon ic-orange"><i class="fab fa-css3-alt"></i></div>
<h3>CSS Minifier</h3>
<span class="tag tag-orange">Format</span>
</div>
<p>Minify CSS by removing comments, whitespace, and unnecessary characters.</p>
</div>
<!-- HTML Entity -->
<div class="tool-card" data-cat="encode" data-name="HTML Entity Encoder Decoder" onclick="showPage('htmlent')">
<div class="tc-top">
<div class="icon ic-green"><i class="fab fa-html5"></i></div>
<h3>HTML Entities</h3>
<span class="tag tag-green">Encode</span>
</div>
<p>Encode and decode HTML entities for safe embedding.</p>
</div>
<!-- Case Converter -->
<div class="tool-card" data-cat="text" data-name="Case Converter camelCase snake_case" onclick="showPage('caseconv')">
<div class="tc-top">
<div class="icon ic-pink"><i class="fas fa-font"></i></div>
<h3>Case Converter</h3>
<span class="tag tag-pink">Text</span>
</div>
<p>Convert text between camelCase, snake_case, UPPER, Title Case, and more.</p>
</div>
<!-- Number Base -->
<div class="tool-card" data-cat="dev" data-name="Number Base Converter Binary Hex" onclick="showPage('numbase')">
<div class="tc-top">
<div class="icon ic-yellow"><i class="fas fa-sort-numeric-up"></i></div>
<h3>Number Base</h3>
<span class="tag tag-yellow">Math</span>
</div>
<p>Convert numbers between decimal, binary, octal, and hexadecimal.</p>
</div>
<!-- IP Lookup -->
<div class="tool-card" data-cat="web" data-name="IP Address Lookup Geolocation" onclick="showPage('ip')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-globe"></i></div>
<h3>IP Lookup</h3>
<span class="tag tag-cyan">Network</span>
</div>
<p>Get geolocation, ISP, and timezone info for any IP address.</p>
</div>
<!-- QR Code -->
<div class="tool-card" data-cat="generate" data-name="QR Code Generator" onclick="showPage('qrcode')">
<div class="tc-top">
<div class="icon ic-purple"><i class="fas fa-qrcode"></i></div>
<h3>QR Code Generator</h3>
<span class="tag tag-purple">Generate</span>
</div>
<p>Generate QR codes from text, URLs, or any data. Download as PNG.</p>
</div>
<!-- QR Code Reader -->
<div class="tool-card" data-cat="dev" data-name="QR Code Reader Scanner Camera" onclick="showPage('qrreader')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-camera"></i></div>
<h3>QR Code Reader</h3>
<span class="tag tag-cyan">Scanner</span>
</div>
<p>Scan QR codes from your camera or an uploaded image file.</p>
</div>
<!-- String Escape -->
<div class="tool-card" data-cat="encode" data-name="String Escape Unescape" onclick="showPage('escape')">
<div class="tc-top">
<div class="icon ic-orange"><i class="fas fa-quote-right"></i></div>
<h3>String Escape</h3>
<span class="tag tag-orange">Encode</span>
</div>
<p>Escape and unescape strings (backslash sequences) for programming.</p>
</div>
<!-- Cron Parser -->
<div class="tool-card" data-cat="dev" data-name="Cron Expression Parser Scheduler" onclick="showPage('cron')">
<div class="tc-top">
<div class="icon ic-orange"><i class="fas fa-stopwatch"></i></div>
<h3>Cron Parser</h3>
<span class="tag tag-orange">Scheduler</span>
</div>
<p>Parse cron expressions into human-readable descriptions with next run times.</p>
</div>
<!-- Placeholder Image -->
<div class="tool-card" data-cat="generate" data-name="Placeholder Image Generator" onclick="showPage('placeholder')">
<div class="tc-top">
<div class="icon ic-pink"><i class="fas fa-image"></i></div>
<h3>Placeholder Image</h3>
<span class="tag tag-pink">Design</span>
</div>
<p>Generate custom placeholder images with text, colors, and dimensions.</p>
</div>
<!-- JSON CSV Converter -->
<div class="tool-card" data-cat="format" data-name="JSON CSV Converter Table Data" onclick="showPage('jsoncsv')">
<div class="tc-top">
<div class="icon ic-green"><i class="fas fa-table"></i></div>
<h3>JSON ↔ CSV</h3>
<span class="tag tag-green">Convert</span>
</div>
<p>Convert between JSON arrays and CSV format with download support.</p>
</div>
<!-- Text Encoder -->
<div class="tool-card" data-cat="encode" data-name="Text Encoder ROT13 Binary Morse L33t" onclick="showPage('textenc')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-language"></i></div>
<h3>Text Encoder</h3>
<span class="tag tag-cyan">Encode</span>
</div>
<p>Encode text in ROT13, Binary, Morse Code, L33t speak, and more.</p>
</div>
<!-- HTTP Status Codes -->
<div class="tool-card" data-cat="web" data-name="HTTP Status Code Reference API" onclick="showPage('httpstatus')">
<div class="tc-top">
<div class="icon ic-green"><i class="fas fa-server"></i></div>
<h3>HTTP Status Codes</h3>
<span class="tag tag-green">Reference</span>
</div>
<p>Quick reference for all HTTP status codes with descriptions and categories.</p>
</div>
<!-- SQL Formatter -->
<div class="tool-card" data-cat="format" data-name="SQL Formatter Beautifier Query" onclick="showPage('sqlformat')">
<div class="tc-top">
<div class="icon ic-purple"><i class="fas fa-database"></i></div>
<h3>SQL Formatter</h3>
<span class="tag tag-purple">Format</span>
</div>
<p>Beautify and minify SQL queries with keyword formatting.</p>
</div>
<!-- Byte Size Converter -->
<div class="tool-card" data-cat="dev" data-name="Byte Size Converter KB MB GB TB" onclick="showPage('byteconv')">
<div class="tc-top">
<div class="icon ic-yellow"><i class="fas fa-weight-hanging"></i></div>
<h3>Byte Converter</h3>
<span class="tag tag-yellow">Math</span>
</div>
<p>Convert between bytes, KB, MB, GB, TB with binary and SI modes.</p>
</div>
<!-- HMAC Generator -->
<div class="tool-card" data-cat="dev" data-name="HMAC Generator Signature SHA" onclick="showPage('hmac')">
<div class="tc-top">
<div class="icon ic-red"><i class="fas fa-lock"></i></div>
<h3>HMAC Generator</h3>
<span class="tag tag-red">Security</span>
</div>
<p>Generate HMAC signatures from a message and secret key.</p>
</div>
<!-- Slug Generator -->
<div class="tool-card" data-cat="text" data-name="Slug Generator URL Friendly" onclick="showPage('slugify')">
<div class="tc-top">
<div class="icon ic-green"><i class="fas fa-link"></i></div>
<h3>Slug Generator</h3>
<span class="tag tag-green">Text</span>
</div>
<p>Convert any text into a clean, URL-friendly slug.</p>
</div>
<!-- Chmod Calculator -->
<div class="tool-card" data-cat="dev" data-name="Chmod Calculator Unix Permissions" onclick="showPage('chmod')">
<div class="tc-top">
<div class="icon ic-orange"><i class="fas fa-user-shield"></i></div>
<h3>Chmod Calculator</h3>
<span class="tag tag-orange">Linux</span>
</div>
<p>Convert between numeric (755) and symbolic (rwxr-xr-x) Unix permissions.</p>
</div>
<!-- ASCII Art Generator -->
<div class="tool-card" data-cat="generate" data-name="ASCII Art Generator Text Banner" onclick="showPage('ascii')">
<div class="tc-top">
<div class="icon ic-pink"><i class="fas fa-text-height"></i></div>
<h3>ASCII Art</h3>
<span class="tag tag-pink">Generate</span>
</div>
<p>Convert text into ASCII art banners using block characters.</p>
</div>
<!-- ENV ↔ JSON -->
<div class="tool-card" data-cat="format" data-name="ENV JSON Converter Dotenv Config" onclick="showPage('envjson')">
<div class="tc-top">
<div class="icon ic-cyan"><i class="fas fa-file-code"></i></div>
<h3>ENV ↔ JSON</h3>
<span class="tag tag-cyan">Convert</span>
</div>
<p>Convert between .env files and JSON objects instantly.</p>
</div>
</div>
</div>
<!-- Tool pages are loaded dynamically here -->
<div id="tool-pages"></div>
</main>
<footer>
Built with ❤️ by <a href="https://winniepat.de" target="_blank">WinniePatGG</a> · <span id="footerToolCount">0</span> tools and counting · 100% free & open source · No data collected
</footer>
<!-- QR Code Library -->
<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
<!-- QR Code Reader Library -->
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js"></script>
<!-- Core app JS -->
<script src="js/app.js"></script>
<!-- Load tool HTML partials and JS dynamically -->
<script>
(async function loadTools() {
const tools = [
'json', 'url', 'youtube', 'base64', 'hash', 'color',
'password', 'uuid', 'lorem', 'jwt', 'timestamp', 'regex',
'markdown', 'diff', 'counter', 'cssmin', 'htmlent',
'caseconv', 'numbase', 'ip', 'qrcode', 'escape',
'cron', 'placeholder', 'jsoncsv', 'textenc', 'httpstatus',
'qrreader', 'sqlformat', 'byteconv', 'hmac', 'slugify',
'chmod', 'ascii', 'envjson'
];
const container = document.getElementById('tool-pages');
// Update tool counts dynamically
const countEl = document.getElementById('toolCount');
const footerEl = document.getElementById('footerToolCount');
if (countEl) countEl.textContent = tools.length;
if (footerEl) footerEl.textContent = tools.length;
// Load all tool HTML partials in parallel
const htmlPromises = tools.map(t =>
fetch(`tools/${t}.html`).then(r => r.text())
);
const htmlParts = await Promise.all(htmlPromises);
container.innerHTML = htmlParts.join('\n');
// Load all tool JS files sequentially to ensure DOM is ready
for (const t of tools) {
await new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = `js/tools/${t}.js`;
script.onload = resolve;
script.onerror = reject;
document.body.appendChild(script);
});
}
})();
</script>
</body>
</html>
Reference in New Issue Copy Permalink