<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ToolHub - Free Online Utilities</title>
<!-- Font Awesome for Icons (Free CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Theme Toggle Button -->
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
<i class="fas fa-moon"></i>
</button>
<div class="container">
<!-- Header Section -->
<header>
<h1><i class="fas fa-toolbox"></i> Tool<span>Hub</span></h1>
<p class="subtitle">Simple, fast, and free online utilities for everyday tasks.</p>
</header>
<!-- Search Bar -->
<div class="search-wrapper">
<i class="fas fa-search search-icon"></i>
<input type="text" id="searchInput" placeholder="Search for a tool (e.g., password, word count)..." autocomplete="off">
<button id="clearSearch" class="clear-btn" style="display: none;"><i class="fas fa-times"></i></button>
</div>
<!-- Tools Grid -->
<div class="tools-grid" id="toolsGrid">
<!-- Cards will be injected here via JavaScript -->
</div>
<!-- Active Tool Panel (Hidden by default) -->
<div class="tool-panel" id="toolPanel">
<div class="panel-header">
<h2 id="panelTitle">Tool Name</h2>
<button id="closePanel" class="close-panel"><i class="fas fa-arrow-left"></i> Back to Tools</button>
</div>
<div id="panelContent" class="panel-content">
<!-- Dynamic tool interface will load here -->
</div>
</div>
</div>
<footer>
<p>© 2026 ToolHub. Hosted on Hostinger. Built with HTML, CSS, JavaScript.</p>
</footer>
<script src="script.js"></script>
</body>
</html>