Show description
BASH Mastery: Interactive Command Explorer
BASH Mastery: Interactive Command Explorer
BASH Explorer
Bourne Again SHell: The Universal Interface
v5.2 Reference
Interactive Guide
The Power of the Shell
BASH (Bourne Again SHell) is the command language interpreter for the GNU operating system. It is not just a way to run programs; it is a full programming language and the primary interface for managing Linux/Unix systems. This interactive report breaks down the vast ecosystem of Bash capabilities into digestible, explorable categories.
Scope
Command Language
Variables, Loops, Functions, Arithmetic
Core Utility
System Control
Process management, File IO, Permissions
Environment
Interactive + Script
REPL for humans, automation for servers
Command Database
All
Files
Text
System
Scripting
←
Select a command from the list to view its manual, common flags, and examples.
P
Interactive Permissions
Bash permissions are often represented by octal numbers (e.g., 755). Toggle the bits below to see how `chmod` works.
Owner
Read (4)
Write (2)
Exec (1)
Group
Read (4)
Write (2)
Exec (1)
Others
Read (4)
Write (2)
Exec (1)
COMMAND PREVIEW
chmod 755 filename
-rwxr-xr-x
Command Ecosystem
Not all commands are equal. Some live inside the shell (Built-ins) for speed and environment control, while others are external programs (Binaries).
Bash Playground (Simulation)
# Try typing: 'echo hello', 'help', 'date', or 'whoami'
# This is a safe JS simulation. Filesystem commands are mocked.
user@host:~$ welcome_msg
Welcome to the BASH interactive explorer. Type a command below.
user@host:~$
Operators & Control Flow
>
Redirect Output
Sends standard output to file. Overwrites file.
ls > list.txt
>>
Append Output
Appends standard output to the end of a file.
echo "Log" >> log.txt
|
Pipe
Passes output of Left command to input of Right.
cat file | grep "ok"
&&
Logical AND
Runs second command ONLY if first succeeds.
make && make install
Generated by BASH Mastery Agent • Single File Application
BASH Mastery: Interactive Command Explorer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BASH Mastery: Interactive Command Explorer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
<!-- Chosen Palette: Warm Neutrals (Retro Terminal inspired) -->
<!-- Application Structure Plan:
1. Hero Section: Introduction to BASH architecture.
2. Global Search & Filter Dashboard: The core interaction point. Users can type to find commands or filter by category (File Ops, Text, System, etc.).
3. Interactive Command Details: Clicking a command in the dashboard opens a detailed view (simulated modal/card) with syntax, flags, and examples.
4. Concepts Visualizer: Interactive block explaining Redirection, Pipes, and Permissions using visual toggle/flow diagrams (HTML/CSS).
5. "Mock Terminal": A strictly controlled input field to demonstrate 'echo', variables, and simple logic safely in the browser.
6. Data Visualization: Charts showing the distribution of command types (Built-in vs Binary) and common workflow frequencies.
Why this structure? BASH is vast. A linear document is overwhelming. A "Search + Explore" interface mirrors how developers actually use documentation.
-->
<!-- Visualization & Content Choices:
- Command Distribution (Doughnut Chart): Shows the ratio of Built-ins vs Coreutils to explain the difference between the Shell and the System.
- Usage Frequency (Bar Chart): Highlights the "Top 10" most used commands to guide beginners.
- Command Cards (Grid + JS): Replaces SVGs. Uses styled HTML cards for each command, clickable for details.
- Permissions Calculator (Interactive Form): Users click checkboxes (r-w-x), JS calculates the octal code (e.g., 755). Better than a static table.
- Logic: JS handles the search filtering, modal content population, and the 'mock terminal' parsing.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #F5F2EB; /* Warm neutral background */
color: #2D2D2A;
}
.font-mono {
font-family: 'JetBrains Mono', monospace;
}
.chart-container {
position: relative;
width: 100%;
max-width: 600px;
margin-left: auto;
margin-right: auto;
height: 300px;
max-height: 400px;
}
.cmd-card {
transition: all 0.2s ease;
}
.cmd-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Custom scrollbar for command list */
.cmd-list-scroll::-webkit-scrollbar {
width: 8px;
}
.cmd-list-scroll::-webkit-scrollbar-track {
background: #E5E0D8;
}
.cmd-list-scroll::-webkit-scrollbar-thumb {
background: #B0A89E;
border-radius: 4px;
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 1.2em;
background-color: #2D2D2A;
animation: blink 1s step-end infinite;
vertical-align: middle;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
</style>
</head>
<body class="min-h-screen flex flex-col">
<!-- Header -->
<header class="bg-[#2D2D2A] text-[#F5F2EB] py-6 px-4 shadow-lg">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
<div>
<h1 class="text-3xl font-bold tracking-tight">BASH <span class="text-[#D4A373]">Explorer</span></h1>
<p class="text-sm text-gray-400 mt-1">Bourne Again SHell: The Universal Interface</p>
</div>
<div class="mt-4 md:mt-0 flex gap-4 text-sm font-mono">
<div class="px-3 py-1 bg-[#3D3D39] rounded">v5.2 Reference</div>
<div class="px-3 py-1 bg-[#3D3D39] rounded">Interactive Guide</div>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow max-w-7xl mx-auto w-full p-4 md:p-6 space-y-8">
<!-- Intro Section -->
<section class="bg-white rounded-xl shadow-sm border border-[#E5E0D8] p-6 md:p-8">
<h2 class="text-2xl font-bold mb-4 text-[#2D2D2A]">The Power of the Shell</h2>
<p class="text-lg leading-relaxed text-gray-700 mb-6">
BASH (Bourne Again SHell) is the command language interpreter for the GNU operating system. It is not just a way to run programs; it is a full programming language and the primary interface for managing Linux/Unix systems. This interactive report breaks down the vast ecosystem of Bash capabilities into digestible, explorable categories.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Stat Card 1 -->
<div class="bg-[#F5F2EB] p-4 rounded-lg border border-[#D4A373]">
<div class="text-[#D4A373] text-sm font-bold uppercase mb-1">Scope</div>
<div class="text-2xl font-bold text-[#2D2D2A]">Command Language</div>
<p class="text-sm text-gray-600 mt-2">Variables, Loops, Functions, Arithmetic</p>
</div>
<!-- Stat Card 2 -->
<div class="bg-[#F5F2EB] p-4 rounded-lg border border-[#D4A373]">
<div class="text-[#D4A373] text-sm font-bold uppercase mb-1">Core Utility</div>
<div class="text-2xl font-bold text-[#2D2D2A]">System Control</div>
<p class="text-sm text-gray-600 mt-2">Process management, File IO, Permissions</p>
</div>
<!-- Stat Card 3 -->
<div class="bg-[#F5F2EB] p-4 rounded-lg border border-[#D4A373]">
<div class="text-[#D4A373] text-sm font-bold uppercase mb-1">Environment</div>
<div class="text-2xl font-bold text-[#2D2D2A]">Interactive + Script</div>
<p class="text-sm text-gray-600 mt-2">REPL for humans, automation for servers</p>
</div>
</div>
</section>
<!-- Command Encyclopedia Section -->
<section id="command-explorer" class="bg-white rounded-xl shadow-sm border border-[#E5E0D8] overflow-hidden flex flex-col md:flex-row h-[800px] md:h-[600px]">
<!-- Sidebar: Search & List -->
<div class="w-full md:w-1/3 bg-[#FAFAF8] border-r border-[#E5E0D8] flex flex-col h-full">
<div class="p-4 border-b border-[#E5E0D8]">
<h3 class="font-bold text-lg mb-2">Command Database</h3>
<input type="text" id="cmd-search" placeholder="Search commands (e.g., 'grep', 'remove')..."
class="w-full px-4 py-2 rounded border border-[#D4D4D0] focus:outline-none focus:border-[#D4A373] font-mono text-sm">
<!-- Category Filters -->
<div class="flex flex-wrap gap-2 mt-3">
<button onclick="filterCmds('all')" class="text-xs px-2 py-1 bg-[#2D2D2A] text-white rounded hover:opacity-80 transition-colors">All</button>
<button onclick="filterCmds('filesystem')" class="text-xs px-2 py-1 bg-[#E5E0D8] text-[#2D2D2A] rounded hover:bg-[#D4A373] hover:text-white transition-colors">Files</button>
<button onclick="filterCmds('text')" class="text-xs px-2 py-1 bg-[#E5E0D8] text-[#2D2D2A] rounded hover:bg-[#D4A373] hover:text-white transition-colors">Text</button>
<button onclick="filterCmds('system')" class="text-xs px-2 py-1 bg-[#E5E0D8] text-[#2D2D2A] rounded hover:bg-[#D4A373] hover:text-white transition-colors">System</button>
<button onclick="filterCmds('scripting')" class="text-xs px-2 py-1 bg-[#E5E0D8] text-[#2D2D2A] rounded hover:bg-[#D4A373] hover:text-white transition-colors">Scripting</button>
</div>
</div>
<!-- Command List -->
<div id="cmd-list" class="flex-1 overflow-y-auto cmd-list-scroll p-2 space-y-1">
<!-- Populated by JS -->
</div>
</div>
<!-- Main Area: Details -->
<div class="w-full md:w-2/3 bg-white p-6 md:p-8 overflow-y-auto" id="cmd-detail-view">
<div class="h-full flex flex-col justify-center items-center text-gray-400 text-center">
<span class="text-4xl mb-2">←</span>
<p>Select a command from the list to view its manual, common flags, and examples.</p>
</div>
</div>
</section>
<!-- Visual Learning Section: Concepts & Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Permissions Interactive Calculator -->
<section class="bg-white rounded-xl shadow-sm border border-[#E5E0D8] p-6">
<h3 class="text-xl font-bold mb-4 flex items-center gap-2">
<span class="bg-[#D4A373] text-white w-6 h-6 rounded-full flex items-center justify-center text-xs font-mono">P</span>
Interactive Permissions
</h3>
<p class="text-sm text-gray-600 mb-6">
Bash permissions are often represented by octal numbers (e.g., 755). Toggle the bits below to see how `chmod` works.
</p>
<div class="flex flex-col gap-6">
<!-- Calculator UI -->
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="font-bold mb-2">Owner</div>
<div class="flex flex-col gap-2 items-center">
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-u-r" checked onchange="calcPerms()"> Read (4)</label>
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-u-w" checked onchange="calcPerms()"> Write (2)</label>
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-u-x" checked onchange="calcPerms()"> Exec (1)</label>
</div>
</div>
<div>
<div class="font-bold mb-2">Group</div>
<div class="flex flex-col gap-2 items-center">
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-g-r" checked onchange="calcPerms()"> Read (4)</label>
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-g-w" onchange="calcPerms()"> Write (2)</label>
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-g-x" checked onchange="calcPerms()"> Exec (1)</label>
</div>
</div>
<div>
<div class="font-bold mb-2">Others</div>
<div class="flex flex-col gap-2 items-center">
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-o-r" checked onchange="calcPerms()"> Read (4)</label>
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-o-w" onchange="calcPerms()"> Write (2)</label>
<label class="flex items-center gap-2 text-sm font-mono"><input type="checkbox" id="perm-o-x" checked onchange="calcPerms()"> Exec (1)</label>
</div>
</div>
</div>
<!-- Result Display -->
<div class="bg-[#2D2D2A] text-[#F5F2EB] p-4 rounded font-mono text-center">
<div class="text-xs text-gray-400 mb-1">COMMAND PREVIEW</div>
<div class="text-xl" id="chmod-output">chmod 755 filename</div>
<div class="text-xs text-[#D4A373] mt-1" id="perm-symbolic">-rwxr-xr-x</div>
</div>
</div>
</section>
<!-- Chart: Command Taxonomy -->
<section class="bg-white rounded-xl shadow-sm border border-[#E5E0D8] p-6 flex flex-col">
<h3 class="text-xl font-bold mb-4">Command Ecosystem</h3>
<p class="text-sm text-gray-600 mb-4">
Not all commands are equal. Some live inside the shell (Built-ins) for speed and environment control, while others are external programs (Binaries).
</p>
<div class="flex-grow flex items-center justify-center">
<div class="chart-container">
<canvas id="cmdTypeChart"></canvas>
</div>
</div>
</section>
</div>
<!-- Mock Terminal Section -->
<section class="bg-[#2D2D2A] rounded-xl shadow-lg p-6 text-[#F5F2EB] font-mono overflow-hidden">
<div class="flex items-center gap-2 mb-4 border-b border-gray-700 pb-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-xs text-gray-400 ml-2">Bash Playground (Simulation)</span>
</div>
<div class="h-48 overflow-y-auto mb-4 text-sm" id="terminal-history">
<div class="text-gray-500"># Try typing: 'echo hello', 'help', 'date', or 'whoami'</div>
<div class="text-gray-500"># This is a safe JS simulation. Filesystem commands are mocked.</div>
<br>
<div><span class="text-[#D4A373]">user@host:~$</span> <span class="text-white">welcome_msg</span></div>
<div>Welcome to the BASH interactive explorer. Type a command below.</div>
</div>
<div class="flex items-center gap-2">
<span class="text-[#D4A373]">user@host:~$</span>
<input type="text" id="terminal-input" autocomplete="off"
class="bg-transparent border-none outline-none text-white flex-grow font-mono" autofocus>
</div>
</section>
<!-- Redirection & Pipes Cheatsheet -->
<section class="bg-white rounded-xl shadow-sm border border-[#E5E0D8] p-6">
<h3 class="text-xl font-bold mb-6">Operators & Control Flow</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="p-4 border border-[#E5E0D8] rounded hover:border-[#D4A373] transition-colors">
<div class="font-mono text-xl font-bold text-[#D4A373] mb-2">></div>
<div class="font-bold mb-1">Redirect Output</div>
<p class="text-xs text-gray-600">Sends standard output to file. Overwrites file.</p>
<code class="block mt-2 text-xs bg-gray-100 p-1 rounded">ls > list.txt</code>
</div>
<div class="p-4 border border-[#E5E0D8] rounded hover:border-[#D4A373] transition-colors">
<div class="font-mono text-xl font-bold text-[#D4A373] mb-2">>></div>
<div class="font-bold mb-1">Append Output</div>
<p class="text-xs text-gray-600">Appends standard output to the end of a file.</p>
<code class="block mt-2 text-xs bg-gray-100 p-1 rounded">echo "Log" >> log.txt</code>
</div>
<div class="p-4 border border-[#E5E0D8] rounded hover:border-[#D4A373] transition-colors">
<div class="font-mono text-xl font-bold text-[#D4A373] mb-2">|</div>
<div class="font-bold mb-1">Pipe</div>
<p class="text-xs text-gray-600">Passes output of Left command to input of Right.</p>
<code class="block mt-2 text-xs bg-gray-100 p-1 rounded">cat file | grep "ok"</code>
</div>
<div class="p-4 border border-[#E5E0D8] rounded hover:border-[#D4A373] transition-colors">
<div class="font-mono text-xl font-bold text-[#D4A373] mb-2">&&</div>
<div class="font-bold mb-1">Logical AND</div>
<p class="text-xs text-gray-600">Runs second command ONLY if first succeeds.</p>
<code class="block mt-2 text-xs bg-gray-100 p-1 rounded">make && make install</code>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="bg-[#2D2D2A] text-gray-400 py-8 text-center mt-8">
<p class="text-sm">Generated by BASH Mastery Agent • Single File Application</p>
</footer>
<!-- JavaScript Logic -->
<script>
// --- DATA STORE ---
// A curated subset of the "All commands" request, focusing on standard GNU/Linux Bash environment.
const commands = [
// Filesystem
{
id: 'ls', name: 'ls', category: 'filesystem', type: 'Binary',
short: 'List directory contents',
desc: 'Lists information about files and directories within the file system.',
flags: [
{ flag: '-l', desc: 'Use a long listing format (permissions, owner, size)' },
{ flag: '-a', desc: 'Do not ignore entries starting with . (hidden files)' },
{ flag: '-h', desc: 'Print sizes in human readable format (e.g., 1K 234M 2G)' }
],
example: 'ls -lah /var/log'
},
{
id: 'cd', name: 'cd', category: 'filesystem', type: 'Built-in',
short: 'Change directory',
desc: 'Changes the current working directory.',
flags: [
{ flag: '..', desc: 'Move up one directory level' },
{ flag: '-', desc: 'Switch to the previous directory' },
{ flag: '~', desc: 'Switch to home directory' }
],
example: 'cd /etc/nginx'
},
{
id: 'pwd', name: 'pwd', category: 'filesystem', type: 'Built-in',
short: 'Print working directory',
desc: 'Prints the full filename of the current working directory.',
flags: [],
example: 'pwd'
},
{
id: 'mkdir', name: 'mkdir', category: 'filesystem', type: 'Binary',
short: 'Make directories',
desc: 'Create the DIRECTORY(ies), if they do not already exist.',
flags: [
{ flag: '-p', desc: 'No error if existing, make parent directories as needed' }
],
example: 'mkdir -p project/src/assets'
},
{
id: 'cp', name: 'cp', category: 'filesystem', type: 'Binary',
short: 'Copy files and directories',
desc: 'Copy SOURCE to DEST, or multiple SOURCE(s) to DIRECTORY.',
flags: [
{ flag: '-r', desc: 'Copy directories recursively' },
{ flag: '-i', desc: 'Prompt before overwrite (interactive)' }
],
example: 'cp -r images/ backup/images/'
},
{
id: 'mv', name: 'mv', category: 'filesystem', type: 'Binary',
short: 'Move/Rename files',
desc: 'Rename SOURCE to DEST, or move SOURCE(s) to DIRECTORY.',
flags: [
{ flag: '-f', desc: 'Do not prompt before overwriting' }
],
example: 'mv old_name.txt new_name.txt'
},
{
id: 'rm', name: 'rm', category: 'filesystem', type: 'Binary',
short: 'Remove files/directories',
desc: 'Remove (unlink) the FILE(s). Warning: This is permanent.',
flags: [
{ flag: '-r', desc: 'Remove directories and their contents recursively' },
{ flag: '-f', desc: 'Ignore nonexistent files and arguments, never prompt' }
],
example: 'rm -rf /tmp/garbage'
},
{
id: 'touch', name: 'touch', category: 'filesystem', type: 'Binary',
short: 'Change file timestamps',
desc: 'Update the access and modification times of each FILE to the current time. Creates empty file if not exists.',
flags: [],
example: 'touch index.html'
},
{
id: 'chmod', name: 'chmod', category: 'system', type: 'Binary',
short: 'Change mode',
desc: 'Change file mode bits (permissions).',
flags: [
{ flag: '+x', desc: 'Make executable' },
{ flag: '-R', desc: 'Change files and directories recursively' }
],
example: 'chmod 755 script.sh'
},
// Text Processing
{
id: 'cat', name: 'cat', category: 'text', type: 'Binary',
short: 'Concatenate files',
desc: 'Concatenate FILE(s) to standard output. Often used to read files.',
flags: [
{ flag: '-n', desc: 'Number all output lines' }
],
example: 'cat config.json'
},
{
id: 'grep', name: 'grep', category: 'text', type: 'Binary',
short: 'Global REgular expression Print',
desc: 'Search for patterns in files.',
flags: [
{ flag: '-i', desc: 'Ignore case' },
{ flag: '-r', desc: 'Recursive search' },
{ flag: '-v', desc: 'Invert match (show lines that DO NOT match)' }
],
example: 'grep -r "error" /var/log/syslog'
},
{
id: 'sed', name: 'sed', category: 'text', type: 'Binary',
short: 'Stream Editor',
desc: 'Perform basic text transformations on an input stream.',
flags: [
{ flag: '-i', desc: 'Edit files in place' },
{ flag: 's/old/new/g', desc: 'Substitution command pattern' }
],
example: 'sed -i "s/foo/bar/g" file.txt'
},
{
id: 'awk', name: 'awk', category: 'text', type: 'Binary',
short: 'Pattern scanning language',
desc: 'Powerful language for data extraction and reporting.',
flags: [
{ flag: '-F', desc: 'Field separator (default is whitespace)' }
],
example: "awk -F: '{print $1}' /etc/passwd"
},
{
id: 'head', name: 'head', category: 'text', type: 'Binary',
short: 'Output first part of files',
desc: 'Print the first 10 lines of each FILE to standard output.',
flags: [
{ flag: '-n K', desc: 'Print first K lines' }
],
example: 'head -n 5 data.csv'
},
{
id: 'tail', name: 'tail', category: 'text', type: 'Binary',
short: 'Output last part of files',
desc: 'Print the last 10 lines of each FILE. Useful for logs.',
flags: [
{ flag: '-f', desc: 'Output appended data as the file grows (follow)' }
],
example: 'tail -f /var/log/nginx/access.log'
},
// System
{
id: 'ps', name: 'ps', category: 'system', type: 'Binary',
short: 'Process Status',
desc: 'Report a snapshot of the current processes.',
flags: [
{ flag: 'aux', desc: 'Common combo: To see every process on the system' }
],
example: 'ps aux | grep node'
},
{
id: 'top', name: 'top', category: 'system', type: 'Binary',
short: 'Display Linux processes',
desc: 'Display Linux processes.',
flags: [],
example: 'top'
},
{
id: 'kill', name: 'kill', category: 'system', type: 'Built-in',
short: 'Terminate process',
desc: 'Send a signal to a process (default is TERM).',
flags: [
{ flag: '-9', desc: 'SIGKILL (Force kill)' }
],
example: 'kill -9 1234'
},
{
id: 'df', name: 'df', category: 'system', type: 'Binary',
short: 'Disk Free',
desc: 'Report file system disk space usage.',
flags: [
{ flag: '-h', desc: 'Human readable sizes' }
],
example: 'df -h'
},
{
id: 'du', name: 'du', category: 'system', type: 'Binary',
short: 'Disk Usage',
desc: 'Estimate file space usage.',
flags: [
{ flag: '-sh', desc: 'Summary only, Human readable' }
],
example: 'du -sh ./node_modules'
},
// Scripting & Misc
{
id: 'echo', name: 'echo', category: 'scripting', type: 'Built-in',
short: 'Display a line of text',
desc: 'Write arguments to the standard output.',
flags: [
{ flag: '-e', desc: 'Enable interpretation of backslash escapes (\\n, \\t)' }
],
example: 'echo "Hello World"'
},
{
id: 'source', name: 'source', category: 'scripting', type: 'Built-in',
short: 'Execute commands from file',
desc: 'Read and execute commands from FILENAME in the current shell environment.',
flags: [],
example: 'source ~/.bashrc'
},
{
id: 'history', name: 'history', category: 'scripting', type: 'Built-in',
short: 'Command history',
desc: 'Display the command history list with line numbers.',
flags: [],
example: 'history | grep ssh'
},
{
id: 'man', name: 'man', category: 'system', type: 'Binary',
short: 'Manual',
desc: 'An interface to the system reference manuals.',
flags: [],
example: 'man grep'
},
{
id: 'ssh', name: 'ssh', category: 'system', type: 'Binary',
short: 'Secure Shell',
desc: 'OpenSSH SSH client (remote login program).',
flags: [
{ flag: '-p', desc: 'Port to connect to' },
{ flag: '-i', desc: 'Identity file (private key)' }
],
example: 'ssh user@192.168.1.5'
}
];
// --- CORE UI LOGIC ---
const cmdListEl = document.getElementById('cmd-list');
const detailViewEl = document.getElementById('cmd-detail-view');
const searchInput = document.getElementById('cmd-search');
// Render List
function renderList(filter = 'all', query = '') {
cmdListEl.innerHTML = '';
const filtered = commands.filter(cmd => {
const matchesCat = filter === 'all' || cmd.category === filter;
const matchesSearch = cmd.name.includes(query.toLowerCase()) ||
cmd.desc.toLowerCase().includes(query.toLowerCase()) ||
cmd.short.toLowerCase().includes(query.toLowerCase());
return matchesCat && matchesSearch;
});
filtered.forEach(cmd => {
const item = document.createElement('div');
item.className = 'p-3 bg-white border border-[#E5E0D8] rounded cursor-pointer hover:bg-[#F5F2EB] hover:border-[#D4A373] transition-all flex justify-between items-center group';
item.onclick = () => showDetail(cmd);
item.innerHTML = `
<div>
<span class="font-mono font-bold text-[#2D2D2A] group-hover:text-[#D4A373]">${cmd.name}</span>
<div class="text-xs text-gray-500 truncate w-40 md:w-48">${cmd.short}</div>
</div>
<span class="text-[10px] uppercase px-2 py-0.5 rounded bg-gray-100 text-gray-500 font-mono">${cmd.category.substr(0,3)}</span>
`;
cmdListEl.appendChild(item);
});
}
// Show Detail
function showDetail(cmd) {
const flagsHtml = cmd.flags.length > 0
? cmd.flags.map(f => `<li class="mb-1"><code class="bg-gray-100 px-1 py-0.5 rounded text-[#D4A373] font-bold">${f.flag}</code> : ${f.desc}</li>`).join('')
: '<li class="text-gray-400 italic">No common flags listed.</li>';
detailViewEl.innerHTML = `
<div class="animate-fade-in">
<div class="flex justify-between items-start border-b border-[#E5E0D8] pb-4 mb-4">
<div>
<h2 class="text-3xl font-mono font-bold text-[#2D2D2A]">${cmd.name}</h2>
<p class="text-lg text-gray-600 mt-1">${cmd.short}</p>
</div>
<span class="px-3 py-1 bg-[#2D2D2A] text-white text-xs rounded font-mono uppercase">${cmd.type}</span>
</div>
<div class="space-y-6">
<div>
<h4 class="font-bold text-sm uppercase text-gray-400 mb-2">Description</h4>
<p class="text-gray-800 leading-relaxed">${cmd.desc}</p>
</div>
<div>
<h4 class="font-bold text-sm uppercase text-gray-400 mb-2">Common Flags</h4>
<ul class="list-none pl-0 text-sm text-gray-700">
${flagsHtml}
</ul>
</div>
<div>
<h4 class="font-bold text-sm uppercase text-gray-400 mb-2">Example Usage</h4>
<div class="bg-[#2D2D2A] rounded p-4 text-[#F5F2EB] font-mono text-sm relative group">
<span class="text-[#D4A373] select-none">$ </span>${cmd.example}
<button onclick="navigator.clipboard.writeText('${cmd.example}')" class="absolute top-2 right-2 text-xs bg-gray-700 hover:bg-gray-600 px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity">Copy</button>
</div>
</div>
</div>
</div>
`;
}
// Filter Handlers
window.filterCmds = (cat) => {
renderList(cat, searchInput.value);
};
searchInput.addEventListener('input', (e) => {
renderList('all', e.target.value);
});
// --- INTERACTIVE PERMISSIONS LOGIC ---
function calcPerms() {
const calculate = (u, g, o) => {
let val = 0;
if(u) val += 4;
if(g) val += 2;
if(o) val += 1;
return val;
};
const u = calculate(
document.getElementById('perm-u-r').checked,
document.getElementById('perm-u-w').checked,
document.getElementById('perm-u-x').checked
);
const g = calculate(
document.getElementById('perm-g-r').checked,
document.getElementById('perm-g-w').checked,
document.getElementById('perm-g-x').checked
);
const o = calculate(
document.getElementById('perm-o-r').checked,
document.getElementById('perm-o-w').checked,
document.getElementById('perm-o-x').checked
);
const octal = `${u}${g}${o}`;
document.getElementById('chmod-output').innerText = `chmod ${octal} filename`;
// Symbolic string
const getSym = (r, w, x) => (r?'r':'-') + (w?'w':'-') + (x?'x':'-');
const sym = getSym(document.getElementById('perm-u-r').checked, document.getElementById('perm-u-w').checked, document.getElementById('perm-u-x').checked) +
getSym(document.getElementById('perm-g-r').checked, document.getElementById('perm-g-w').checked, document.getElementById('perm-g-x').checked) +
getSym(document.getElementById('perm-o-r').checked, document.getElementById('perm-o-w').checked, document.getElementById('perm-o-x').checked);
document.getElementById('perm-symbolic').innerText = sym;
}
// --- MOCK TERMINAL LOGIC ---
const termInput = document.getElementById('terminal-input');
const termHistory = document.getElementById('terminal-history');
termInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const cmd = termInput.value.trim();
if (!cmd) return;
// Add to display
const line = document.createElement('div');
line.innerHTML = `<span class="text-[#D4A373]">user@host:~$</span> ${cmd}`;
termHistory.appendChild(line);
// Process output
const output = document.createElement('div');
output.className = 'text-gray-300 mb-2 whitespace-pre-wrap';
// Simple parser
const parts = cmd.split(' ');
const base = parts[0];
if (base === 'echo') {
output.innerText = parts.slice(1).join(' ').replace(/"/g, '');
} else if (base === 'clear') {
termHistory.innerHTML = '';
output.remove(); // Don't append empty output
} else if (base === 'help') {
output.innerText = "Available mock commands: echo, clear, help, date, whoami, pwd, ls";
} else if (base === 'date') {
output.innerText = new Date().toString();
} else if (base === 'whoami') {
output.innerText = "user";
} else if (base === 'pwd') {
output.innerText = "/home/user";
} else if (base === 'ls') {
output.innerText = "Documents Downloads Pictures script.sh notes.txt";
} else if (['rm', 'mkdir', 'touch', 'cp'].includes(base)) {
output.innerText = `(Simulation) Executed ${base}. Note: File system is read-only in this web demo.`;
} else {
output.innerText = `bash: ${base}: command not found`;
}
if(base !== 'clear') {
termHistory.appendChild(output);
}
termInput.value = '';
termHistory.scrollTop = termHistory.scrollHeight;
}
});
// --- CHART INITIALIZATION ---
document.addEventListener('DOMContentLoaded', () => {
// Initial Render
renderList();
showDetail(commands[0]); // Show first command by default
// Chart
const ctx = document.getElementById('cmdTypeChart').getContext('2d');
new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Binary (Coreutils)', 'Shell Built-ins'],
datasets: [{
data: [
commands.filter(c => c.type === 'Binary').length,
commands.filter(c => c.type === 'Built-in').length
],
backgroundColor: ['#2D2D2A', '#D4A373'],
borderWidth: 0
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: { position: 'bottom' },
tooltip: {
callbacks: {
label: function(context) {
return ` ${context.label}: ${context.raw} commands`;
}
}
}
}
}
});
});
</script>
</body>
</html>