<style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px; background: #f5f5f5; }
        .container { max-width: 1200px; margin: 0 auto; }
        h1 { color: #333; text-align: center; }
        .demo { background: white; border: 2px solid #ddd; border-radius: 8px; padding: 20px; margin: 20px 0; }
        .demo h2 { margin-top: 0; color: #0066cc; border-bottom: 2px solid #0066cc; padding-bottom: 10px; }
        .code { background: #2d2d2d; color: #f8f8f2; padding: 15px; border-radius: 5px; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 13px; margin: 10px 0; }
        .output { background: #e8f4f8; border-left: 4px solid #0066cc; padding: 15px; margin: 10px 0; }
        .success { color: green; font-weight: bold; }
        .info { background: #fff3cd; border-left: 4px solid #ffc107; padding: 10px; margin: 10px 0; }
    </style>

    <div class="container">
        <h1>🚀 HashJS v1.3.5 - Complete JavaScript Support</h1>
        
        <div class="info">
            <strong>✨ Generic Control Structure Detection</strong><br>
            HashJS now supports ALL JavaScript control structures without hardcoding specific keywords!
        </div>

        <!-- Demo 1: If/Else -->
        <div class="demo">
            <h2>1. If/Else Statements</h2>
            <div class="code">&lt;div id="demo1"&gt;
    #{ let counter = 0; }#
    &lt;ul&gt;
    #for(let item of items) {#
        #if(counter == 1) {#
            &lt;li&gt;👉 #counter#. #item# (Match!)&lt;/li&gt;
        #} else {#
            &lt;li&gt;#counter#. #item#&lt;/li&gt;
        #}#
    #{ counter++; }#
    #}#
    &lt;/ul&gt;
&lt;/div&gt;</div>
            <div class="output" id="demo1">
                #{ let counter = 0; }#
                <ul>
                #for(let item of items) {#
                    #if(counter == 1) {#
                        <li>👉 #counter#. #item# (Match!)</li>
                    #} else {#
                        <li>#counter#. #item#</li>
                    #}#
                #{ counter++; }#
                #}#
                </ul>
            </div>
        </div>

        <!-- Demo 2: While Loop -->
        <div class="demo">
            <h2>2. While Loops</h2>
            <div class="code">&lt;div id="demo2"&gt;
    #{ let i = 0; }#
    &lt;ul&gt;
    #while(i &lt; count) {#
        &lt;li&gt;Loop iteration #i#&lt;/li&gt;
    #{ i++; }#
    #}#
    &lt;/ul&gt;
&lt;/div&gt;</div>
            <div class="output" id="demo2">
                #{ let i = 0; }#
                <ul>
                #while(i < count) {#
                    <li>Loop iteration #i#</li>
                #{ i++; }#
                #}#
                </ul>
            </div>
        </div>

        <!-- Demo 3: Switch/Case -->
        <div class="demo">
            <h2>3. Switch/Case Statements</h2>
            <div class="code">&lt;div id="demo3"&gt;
    #switch(status) {##case 'active':#✅ Active#break##case 'pending':#⏳ Pending#break##case 'error':#❌ Error#break##default:#❓ Unknown#}#
&lt;/div&gt;</div>
            <div class="output" id="demo3">
                Status: #switch(status) {##case 'active':#✅ Active#break##case 'pending':#⏳ Pending#break##case 'error':#❌ Error#break##default:#❓ Unknown#}#
            </div>
        </div>

        <!-- Demo 4: Do/While -->
        <div class="demo">
            <h2>4. Do/While Loops</h2>
            <div class="code">&lt;div id="demo4"&gt;
    #{ let x = 0; }#
    &lt;ul&gt;
    #do {#
        &lt;li&gt;Countdown: #3 - x#&lt;/li&gt;
    #{ x++; }#
    #} while(x &lt; 3)#
    &lt;/ul&gt;
&lt;/div&gt;</div>
            <div class="output" id="demo4">
                #{ let x = 0; }#
                <ul>
                #do {#
                    <li>Countdown: #3 - x#</li>
                #{ x++; }#
                #} while(x < 3)#
                </ul>
            </div>
        </div>

        <!-- Demo 5: Multiple Conditions -->
        <div class="demo">
            <h2>5. Complex Conditions (else if)</h2>
            <div class="code">&lt;div id="demo5"&gt;
    #for(let num of numbers) {#
        #if(num &lt; 0) {#
            &lt;span style="color: red;"&gt;#num# (negative)&lt;/span&gt;
        #} else if(num === 0) {#
            &lt;span style="color: gray;"&gt;#num# (zero)&lt;/span&gt;
        #} else {#
            &lt;span style="color: green;"&gt;#num# (positive)&lt;/span&gt;
        #}#
        &lt;br&gt;
    #}#
&lt;/div&gt;</div>
            <div class="output" id="demo5">
                #for(let num of numbers) {#
                    #if(num < 0) {#
                        <span style="color: red;">#num# (negative)</span>
                    #} else if(num === 0) {#
                        <span style="color: gray;">#num# (zero)</span>
                    #} else {#
                        <span style="color: green;">#num# (positive)</span>
                    #}#
                    <br>
                #}#
            </div>
        </div>

        <div class="success" style="text-align: center; font-size: 18px; margin: 30px 0;">
            ✅ All JavaScript control structures working!
        </div>
    </div>

    <script src="/hashJS.js"></script>
    <script>
        // Demo 1: If/Else
        new hashJS("demo1", {
            items: ['Apple', 'Banana', 'Cherry', 'Date']
        });

        // Demo 2: While Loop
        new hashJS("demo2", {
            count: 3
        });

        // Demo 3: Switch/Case
        new hashJS("demo3", {
            status: 'active'
        });

        // Demo 4: Do/While
        new hashJS("demo4", {});

        // Demo 5: Else If
        new hashJS("demo5", {
            numbers: [-5, 0, 3, -2, 7, 0, 1]
        });

        console.log('✅ All demos loaded successfully!');
    </script>