<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Guide to kubectl cond</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!-- Chosen Palette: "Cool Slate" - A minimalist palette using neutral grays (slate), a calming blue for interactive elements, and subtle greens/reds for status indicators. This creates a professional, tech-oriented feel that supports readability without distraction. -->
    <!-- Application Structure Plan: A single-page application with a fixed top navigation bar for quick access to key sections: "Why?", "Install", "Usage", "Compare", and "Examples". The structure prioritizes a task-oriented user flow over the report's linear narrative. The core is an "Interactive Usage" section where users can simulate commands and see visual outputs (including a Chart.js visualization), making the learning process active rather than passive. A side-by-side comparison section will visually demonstrate the tool's value proposition. This non-linear, interactive structure is chosen to cater to different user needs, from quick lookups to in-depth exploration, enhancing usability and knowledge retention. -->
    <!-- Visualization & Content Choices: 
        - Report Info: Value proposition of kubectl cond -> Goal: Inform -> Viz/Presentation: Icon-driven feature cards -> Interaction: Hover effects -> Justification: Quickly communicates key benefits.
        - Report Info: Installation steps -> Goal: Guide -> Viz/Presentation: Tabbed interface for OS & copyable code blocks -> Interaction: Tab switching, one-click copy -> Justification: Streamlines setup, reduces user error.
        - Report Info: Command usage -> Goal: Explore & Understand -> Viz/Presentation: Interactive terminal simulator with dropdowns, dynamic text output, and a Chart.js donut chart -> Interaction: User selects a resource, sees corresponding command/output/visualization -> Justification: Active learning through simulation is more effective than reading static examples. The donut chart provides an instant visual summary of health status.
        - Report Info: Comparison with other kubectl commands -> Goal: Compare & Justify -> Viz/Presentation: Three-column layout showing simulated outputs -> Interaction: N/A -> Justification: Directly demonstrates the "signal-to-noise" advantage.
        - Report Info: Resource-specific conditions -> Goal: Organize & Reference -> Viz/Presentation: Accordion-style layout -> Interaction: Click to expand/collapse -> Justification: Manages information density and allows users to focus on one resource at a time.
        - Library/Method: Tailwind for layout, Chart.js (Canvas) for visualization, Vanilla JS for all interactions.
    -->
    <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc; /* slate-50 */
            color: #334155; /* slate-700 */
        }
        .font-mono {
            font-family: 'Roboto Mono', monospace;
        }
        .nav-link {
            transition: color 0.2s, border-color 0.2s;
        }
        .nav-link.active {
            color: #2563eb; /* blue-600 */
            border-bottom-color: #2563eb; /* blue-600 */
        }
        .nav-link:not(.active):hover {
            color: #4f46e5; /* indigo-600 */
            border-bottom-color: #a5b4fc; /* indigo-300 */
        }
        .feature-card {
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
        }
        .terminal {
            background-color: #1e293b; /* slate-800 */
            color: #e2e8f0; /* slate-200 */
        }
        .terminal-prompt {
            color: #4ade80; /* green-400 */
        }
        .terminal-command {
            color: #f8fafc; /* slate-50 */
        }
        .copy-btn {
            transition: background-color 0.2s;
        }
        .tab.active {
            background-color: #ffffff;
            border-color: #e5e7eb;
            border-bottom-color: #ffffff;
            color: #2563eb;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        }
        .accordion-content.open {
            max-height: 1000px; /* Arbitrary large value */
            transition: max-height 1s ease-in-out;
        }
    </style>
</head>
<body class="antialiased">

    <header id="header" class="bg-white/80 backdrop-blur-md shadow-sm sticky top-0 z-50">
        <nav class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex-shrink-0">
                    <h1 class="text-xl font-bold text-slate-800">
                        <span class="text-blue-600">kubectl</span> cond
                    </h1>
                </div>
                <div class="hidden md:block">
                    <div class="ml-10 flex items-baseline space-x-4">
                        <a href="#why" class="nav-link px-3 py-2 text-sm font-medium text-slate-600 border-b-2 border-transparent">Why?</a>
                        <a href="#install" class="nav-link px-3 py-2 text-sm font-medium text-slate-600 border-b-2 border-transparent">Install</a>
                        <a href="#usage" class="nav-link px-3 py-2 text-sm font-medium text-slate-600 border-b-2 border-transparent">Interactive Usage</a>
                        <a href="#compare" class="nav-link px-3 py-2 text-sm font-medium text-slate-600 border-b-2 border-transparent">Compare</a>
                        <a href="#examples" class="nav-link px-3 py-2 text-sm font-medium text-slate-600 border-b-2 border-transparent">Examples</a>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12">

        <section id="why" class="my-12 scroll-mt-20">
            <div class="text-center mb-10">
                <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">A Focused Lens on Resource Health</h2>
                <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
                    `kubectl cond` solves the "signal-to-noise" problem in Kubernetes diagnostics. Instead of digging through verbose outputs, you get a clean, immediate summary of a resource's health conditions. This section explains why it's an essential addition to your `kubectl` toolkit.
                </p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <div class="feature-card bg-white p-6 rounded-lg shadow-md border border-slate-200">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                        <span>🎯</span>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-800">Focused</h3>
                    <p class="mt-2 text-slate-500">Isolates and displays *only* the `status.conditions` array, cutting through the clutter of other commands.</p>
                </div>
                <div class="feature-card bg-white p-6 rounded-lg shadow-md border border-slate-200">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                        <span>📖</span>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-800">Human-Readable</h3>
                    <p class="mt-2 text-slate-500">Presents conditions in a clean, tabular format that's easy to scan and understand at a glance.</p>
                </div>
                <div class="feature-card bg-white p-6 rounded-lg shadow-md border border-slate-200">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <span>🔄</span>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-800">Consistent Syntax</h3>
                    <p class="mt-2 text-slate-500">Adopts the familiar `kubectl get` command structure, making it intuitive to use with no learning curve.</p>
                </div>
                <div class="feature-card bg-white p-6 rounded-lg shadow-md border border-slate-200">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                        <span>📜</span>
                    </div>
                    <h3 class="text-lg font-semibold text-slate-800">Script-Friendly</h3>
                    <p class="mt-2 text-slate-500">Simple, predictable output is easy to parse with tools like `grep` and `awk` for automated health checks.</p>
                </div>
            </div>
        </section>

        <hr class="my-16 border-slate-200">

        <section id="install" class="my-12 scroll-mt-20">
            <div class="text-center mb-10">
                <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Get Started in Minutes</h2>
                <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
                    `kubectl cond` is installed using Krew, the official plugin manager for `kubectl`. If you don't have Krew, follow the steps for your OS to get it set up, then install the plugin with a single command.
                </p>
            </div>
            <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-lg border border-slate-200 overflow-hidden">
                <div class="p-6">
                    <h3 class="text-xl font-semibold mb-4 text-slate-800">1. Install Krew (Plugin Manager)</h3>
                    <div class="install-tabs">
                        <div class="border-b border-slate-200">
                            <nav class="-mb-px flex space-x-4" aria-label="Tabs">
                                <button class="tab active whitespace-nowrap py-3 px-4 border-b-2 font-medium text-sm" data-tab="linux">macOS / Linux</button>
                                <button class="tab whitespace-nowrap py-3 px-4 border-b-2 font-medium text-sm text-slate-500 hover:text-slate-700" data-tab="windows">Windows</button>
                            </nav>
                        </div>
                        <div class="tab-content mt-6" data-content="linux">
                            <p class="text-slate-600 mb-4">Run this command in your terminal. It will download and install Krew.</p>
                            <div class="relative terminal rounded-md p-4 font-mono text-sm">
                                <button class="copy-btn absolute top-2 right-2 bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded">Copy</button>
                                <pre><code>(
  set -x; cd "$(mktemp -d)" &&
  OS="$(uname | tr '[:upper:]' '[:lower:]')" &&
  ARCH="$(uname -m | sed -e 's/x86_64/amd64/' -e 's/\(arm\)\(64\)\?.*/\1\2/' -e 's/aarch64$/arm64/')" &&
  KREW="krew-${OS}_${ARCH}" &&
  curl -fsSLO "https://github.com/kubernetes-sigs/krew/releases/latest/download/${KREW}.tar.gz" &&
  tar zxvf "${KREW}.tar.gz" &&
  ./"${KREW}" install krew
)</code></pre>
                            </div>
                             <p class="text-slate-600 mt-4 mb-2">Then, add Krew to your `PATH`:</p>
                             <div class="relative terminal rounded-md p-4 font-mono text-sm">
                                <button class="copy-btn absolute top-2 right-2 bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded">Copy</button>
                                <pre><code>export PATH="${KREW_ROOT:-$HOME/.krew}/bin:$PATH"</code></pre>
                            </div>
                            <p class="text-slate-600 mt-2">Add the line above to your `~/.bashrc` or `~/.zshrc` and restart your shell.</p>
                        </div>
                        <div class="tab-content mt-6 hidden" data-content="windows">
                            <p class="text-slate-600 mb-4">Refer to the <a href="https://krew.sigs.k8s.io/docs/user-guide/setup/install/" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:underline">official Krew documentation</a> for detailed Windows installation instructions.</p>
                        </div>
                    </div>
                </div>
                <div class="bg-slate-50 p-6">
                    <h3 class="text-xl font-semibold mb-4 text-slate-800">2. Install `cond` Plugin</h3>
                    <p class="text-slate-600 mb-4">Once Krew is set up, install `kubectl cond` with one command.</p>
                    <div class="relative terminal rounded-md p-4 font-mono text-sm">
                        <button class="copy-btn absolute top-2 right-2 bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded">Copy</button>
                        <pre><code>kubectl krew install cond</code></pre>
                    </div>
                     <p class="text-slate-600 mt-4 mb-2">Verify the installation:</p>
                     <div class="relative terminal rounded-md p-4 font-mono text-sm">
                        <button class="copy-btn absolute top-2 right-2 bg-slate-600 hover:bg-slate-500 text-white text-xs px-2 py-1 rounded">Copy</button>
                        <pre><code>kubectl cond --help</code></pre>
                    </div>
                </div>
            </div>
        </section>

        <hr class="my-16 border-slate-200">

        <section id="usage" class="my-12 scroll-mt-20">
             <div class="text-center mb-10">
                <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Interactive Usage Explorer</h2>
                <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
                   Don't just read the commands—try them out. Select a resource type to see a simulated `kubectl cond` command and its corresponding output. The chart provides a quick visual summary of the condition statuses.
                </p>
            </div>

            <div class="max-w-5xl mx-auto bg-white rounded-lg shadow-lg border border-slate-200 overflow-hidden">
                <div class="p-6">
                    <label for="resource-selector" class="block text-sm font-medium text-slate-700">Select a resource to inspect:</label>
                    <select id="resource-selector" class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-slate-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                        <option value="pod" selected>Pod</option>
                        <option value="node">Node</option>
                        <option value="deployment">Deployment</option>
                        <option value="job">Job (Failed)</option>
                    </select>
                </div>
                <div class="grid grid-cols-1 lg:grid-cols-5 gap-4 p-6 bg-slate-50">
                    <div class="lg:col-span-3">
                         <div id="interactive-terminal" class="terminal rounded-md p-4 font-mono text-sm h-full flex flex-col">
                            <div>
                                <span class="terminal-prompt">$&nbsp;</span><span id="terminal-command" class="terminal-command"></span>
                            </div>
                            <pre id="terminal-output" class="mt-4 whitespace-pre-wrap flex-grow"></pre>
                         </div>
                    </div>
                    <div class="lg:col-span-2 flex flex-col items-center justify-center bg-white p-4 rounded-lg border">
                        <h4 class="text-lg font-semibold text-slate-800 mb-2">Condition Status</h4>
                        <div class="chart-container w-full h-64 max-h-64 relative">
                            <canvas id="condition-chart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <hr class="my-16 border-slate-200">

        <section id="compare" class="my-12 scroll-mt-20">
            <div class="text-center mb-10">
                <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Clarity in Comparison</h2>
                <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
                    See the difference for yourself. Here's how the output of `kubectl cond` stacks up against `describe` and `get -o jsonpath` for the same Pod. Notice how `cond` provides the perfect balance of detail and brevity.
                </p>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="flex flex-col">
                    <h3 class="text-xl font-semibold mb-3 text-center text-slate-800">`kubectl cond pod my-pod`</h3>
                    <div class="terminal rounded-md p-4 font-mono text-sm flex-grow">
                        <pre><code>RESOURCE     TYPE              STATUS    REASON
pod/my-pod   PodScheduled      True      PodScheduled
pod/my-pod   Initialized       True      PodCompleted
pod/my-pod   ContainersReady   True      AllContainersReady
pod/my-pod   Ready             True      PodReady
                        </code></pre>
                    </div>
                </div>
                 <div class="flex flex-col">
                    <h3 class="text-xl font-semibold mb-3 text-center text-slate-800">`kubectl describe pod my-pod`</h3>
                    <div class="terminal rounded-md p-4 font-mono text-xs opacity-80 flex-grow">
                        <pre><code>Name:             my-pod
Namespace:        default
Priority:         0
...
Labels:           app=myapp
Annotations:      ...
Status:           Running
IP:               10.1.2.3
...
Containers:
  myapp-container:
    ...
    State:          Running
    Ready:          True
    ...
Conditions:
  Type              Status
  PodScheduled      True 
  Initialized       True 
  ContainersReady   True 
  Ready             True 
Volumes:
...
Events:
  Type    Reason     Age   From     Message
  ----    ------     ----  ----     -------
  Normal  Scheduled  2m    scheduler  Successfully assigned...
  Normal  Pulling    2m    kubelet    Pulling image "nginx"...
  Normal  Pulled     1m    kubelet    Successfully pulled...
  Normal  Created    1m    kubelet    Created container...
  Normal  Started    1m    kubelet    Started container...
                        </code></pre>
                    </div>
                </div>
                 <div class="flex flex-col">
                    <h3 class="text-xl font-semibold mb-3 text-center text-slate-800">`kubectl get pod my-pod -o jsonpath='{.status.conditions}'`</h3>
                    <div class="terminal rounded-md p-4 font-mono text-xs opacity-80 flex-grow">
                        <pre><code>[{"lastProbeTime":null,"lastTransitionTime":"2024-07-12T08:00:00Z","status":"True","type":"PodScheduled"},{"lastProbeTime":null,"lastTransitionTime":"2024-07-12T08:00:05Z","status":"True","type":"Initialized"},{"lastProbeTime":null,"lastTransitionTime":"2024-07-12T08:00:10Z","status":"True","type":"ContainersReady"},{"lastProbeTime":null,"lastTransitionTime":"2024-07-12T08:00:10Z","status":"True","type":"Ready"}]
                        </code></pre>
                    </div>
                </div>
            </div>
        </section>

        <hr class="my-16 border-slate-200">

        <section id="examples" class="my-12 scroll-mt-20">
            <div class="text-center mb-10">
                <h2 class="text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl">Practical Scenarios</h2>
                <p class="mt-4 text-lg text-slate-600 max-w-3xl mx-auto">
                    A resource's conditions tell a story. This section breaks down what to look for when inspecting different Kubernetes resources, from Nodes to Jobs. Expand each item to see common scenarios and how to interpret the output.
                </p>
            </div>
            <div class="max-w-4xl mx-auto space-y-4 accordion-container">
                <!-- Accordion items will be injected here by JS -->
            </div>
        </section>

    </main>
    <script>
        document.addEventListener('DOMContentLoaded', () => {

            const tabs = document.querySelectorAll('.install-tabs .tab');
            const tabContents = document.querySelectorAll('.install-tabs .tab-content');

            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    tabs.forEach(t => {
                        t.classList.remove('active');
                        t.classList.add('text-slate-500', 'hover:text-slate-700');
                    });
                    tab.classList.add('active');
                    tab.classList.remove('text-slate-500', 'hover:text-slate-700');

                    const tabId = tab.dataset.tab;
                    tabContents.forEach(content => {
                        if (content.dataset.content === tabId) {
                            content.classList.remove('hidden');
                        } else {
                            content.classList.add('hidden');
                        }
                    });
                });
            });
            
            const copyButtons = document.querySelectorAll('.copy-btn');
            copyButtons.forEach(btn => {
                btn.addEventListener('click', () => {
                    const code = btn.nextElementSibling.textContent;
                    const textarea = document.createElement('textarea');
                    textarea.value = code;
                    document.body.appendChild(textarea);
                    textarea.select();
                    document.execCommand('copy');
                    document.body.removeChild(textarea);
                    
                    const originalText = btn.textContent;
                    btn.textContent = 'Copied!';
                    setTimeout(() => {
                        btn.textContent = originalText;
                    }, 2000);
                });
            });

            const interactiveTerminalData = {
                pod: {
                    command: 'kubectl cond pod my-app-pod-xyz -n production',
                    output: `RESOURCE                         TYPE              STATUS    REASON
pod/my-app-pod-xyz               PodScheduled      True      PodScheduled
pod/my-app-pod-xyz               Initialized       True      PodCompleted
pod/my-app-pod-xyz               ContainersReady   True      AllContainersReady
pod/my-app-pod-xyz               Ready             True      PodReady`,
                    chartData: { labels: ['True'], data: [4] }
                },
                node: {
                    command: 'kubectl cond node node-1.example.com',
                    output: `RESOURCE                 TYPE                 STATUS    REASON
node/node-1.example.com    MemoryPressure       False     KubeletHasSufficientMemory
node/node-1.example.com    DiskPressure         False     KubeletHasSufficientDisk
node/node-1.example.com    PIDPressure          False     KubeletHasNoPIDPressure
node/node-1.example.com    Ready                True      KubeletReady`,
                    chartData: { labels: ['True', 'False'], data: [1, 3] }
                },
                deployment: {
                    command: 'kubectl cond deployment web-server',
                    output: `RESOURCE                     TYPE          STATUS    REASON
deployment.apps/web-server   Available     True      MinimumReplicasAvailable
deployment.apps/web-server   Progressing   True      NewReplicaSetAvailable`,
                    chartData: { labels: ['True'], data: [2] }
                },
                job: {
                    command: 'kubectl cond job daily-backup -n backup',
                    output: `RESOURCE              TYPE       STATUS    REASON
job.batch/daily-backup    Complete   False     
job.batch/daily-backup    Failed     True      BackoffLimitExceeded`,
                    chartData: { labels: ['True', 'False'], data: [1, 1] }
                }
            };

            const resourceSelector = document.getElementById('resource-selector');
            const terminalCommand = document.getElementById('terminal-command');
            const terminalOutput = document.getElementById('terminal-output');
            const chartCanvas = document.getElementById('condition-chart').getContext('2d');
            let conditionChart;

            function updateInteractiveTerminal(resource) {
                const data = interactiveTerminalData[resource];
                terminalCommand.textContent = data.command;
                terminalOutput.textContent = data.output;

                if (conditionChart) {
                    conditionChart.destroy();
                }

                conditionChart = new Chart(chartCanvas, {
                    type: 'doughnut',
                    data: {
                        labels: data.chartData.labels,
                        datasets: [{
                            label: 'Condition Status',
                            data: data.chartData.data,
                            backgroundColor: [
                                'rgba(34, 197, 94, 0.7)',  // green-500
                                'rgba(239, 68, 68, 0.7)',    // red-500
                                'rgba(100, 116, 139, 0.7)' // slate-500
                            ],
                             borderColor: [
                                'rgba(22, 163, 74, 1)',  // green-600
                                'rgba(220, 38, 38, 1)',    // red-600
                                'rgba(71, 85, 105, 1)' // slate-600
                            ],
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                            },
                            tooltip: {
                                callbacks: {
                                    label: function(context) {
                                        let label = context.label || '';
                                        if (label) {
                                            label += ': ';
                                        }
                                        if (context.parsed !== null) {
                                            label += context.parsed;
                                        }
                                        return label + ' conditions';
                                    }
                                }
                            }
                        }
                    }
                });
            }

            resourceSelector.addEventListener('change', (e) => {
                updateInteractiveTerminal(e.target.value);
            });

            updateInteractiveTerminal('pod');


            const accordionData = [
                {
                    title: 'Nodes',
                    content: 'Check the health of your cluster\'s foundation. Look for `Ready=False` or any `*Pressure=True` conditions, which signal resource exhaustion and can prevent Pods from being scheduled.<br><br><div class="relative terminal rounded-md p-4 font-mono text-sm"><pre><code>kubectl cond nodes</code></pre></div>'
                },
                {
                    title: 'Pods',
                    content: 'Pods have several conditions tracking their lifecycle. `PodScheduled=False` points to scheduling issues. `Initialized=False` means an init container failed. `Ready=False` is the key indicator that a Pod is unhealthy and not receiving traffic.<br><br><div class="relative terminal rounded-md p-4 font-mono text-sm"><pre><code>kubectl cond pod my-pod -n my-namespace</code></pre></div>'
                },
                {
                    title: 'Deployments',
                    content: 'Deployments provide a high-level status. `Available=False` indicates your application has less capacity than desired. `Progressing=False` after an update (often with reason `ProgressDeadlineExceeded`) is a critical failure signal for a rollout.<br><br><div class="relative terminal rounded-md p-4 font-mono text-sm"><pre><code>kubectl cond deployment my-app</code></pre></div>'
                },
                {
                    title: 'Jobs',
                    content: 'Jobs are meant to terminate. Their conditions tell you the outcome. `Complete=True` signals success. `Failed=True` indicates the job gave up after too many retries and requires investigation.<br><br><div class="relative terminal rounded-md p-4 font-mono text-sm"><pre><code>kubectl cond job my-batch-job</code></pre></div>'
                }
            ];

            const accordionContainer = document.querySelector('.accordion-container');
            accordionData.forEach((item, index) => {
                const wrapper = document.createElement('div');
                wrapper.classList.add('bg-white', 'rounded-lg', 'shadow', 'border', 'border-slate-200');

                const header = document.createElement('button');
                header.classList.add('accordion-header', 'w-full', 'flex', 'justify-between', 'items-center', 'p-5', 'text-left', 'font-semibold');
                header.innerHTML = `
                    <span class="text-slate-800">${item.title}</span>
                    <span class="accordion-icon text-blue-500 transform transition-transform duration-300">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </span>
                `;

                const content = document.createElement('div');
                content.classList.add('accordion-content');
                content.innerHTML = `<div class="p-5 pt-0 text-slate-600">${item.content}</div>`;
                
                wrapper.appendChild(header);
                wrapper.appendChild(content);
                accordionContainer.appendChild(wrapper);

                header.addEventListener('click', () => {
                    const isOpen = content.classList.contains('open');
                    document.querySelectorAll('.accordion-content').forEach(c => c.classList.remove('open'));
                    document.querySelectorAll('.accordion-icon').forEach(i => i.classList.remove('rotate-180'));
                    
                    if (!isOpen) {
                        content.classList.add('open');
                        header.querySelector('.accordion-icon').classList.add('rotate-180');
                    }
                });
            });

            const navLinks = document.querySelectorAll('.nav-link');
            const sections = document.querySelectorAll('main section');

            function changeActiveLink() {
                let index = sections.length;

                while(--index && window.scrollY + 100 < sections[index].offsetTop) {}
                
                navLinks.forEach((link) => link.classList.remove('active'));
                const activeLink = document.querySelector(`.nav-link[href="#${sections[index].id}"]`);
                if (activeLink) {
                   activeLink.classList.add('active');
                }
            }

            changeActiveLink();
            window.addEventListener('scroll', changeActiveLink);
        });
    </script>
</body>
</html>


create a  post linkeein