<%- include('partials/header', { title: 'Work POC' }) %>

<!-- Page Header -->

<div class="row mb-3">
    <div class="col-12">
        <h1>Work Proof of Concept</h1>
    </div>
</div>

<!-- Download Ruleset -->

<div class="row mb-3">
    <div class="col-12">
        <div class="alert alert-info" role="alert">
            <div><a href="/work-poc/ruleset" class="btn btn-link">Download Work POC ruleset</a></div>
        </div>
    </div>
</div>

<!-- Main Content -->

<div class="row">
    <div class="col-12">
        <div class="accordion" id="accordionExample">

            <!-- Item 1: CSS -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                        CSS
                    </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>Change page the theme from dark to light.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/work-poc</i></li>
                                        <li>Set <b>Find</b> to <i>data-bs-theme="dark"</i>.</li>
                                        <li>Set <b>Replace</b> to <i>data-bs-theme="light"</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>Update image CSS.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/work-poc</i></li>
                                        <li>Set <b>Find</b> to <i>alt="Work POC Demo"</i>.</li>
                                        <li>Set <b>Replace</b> to <i>alt="Work POC Demo" class="img-fluid rounded d-block mx-auto shadow"</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 2: Image Swap -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Image Swap
                    </button>
                </h2>
                <div id="collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>Add a <b>Response - Modify Body</b> rule.</li>
                                <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/work-poc</i></li>
                                <li>Set <b>Find</b> to <i>checkout-1.jpg</i>.</li>
                                <li>Set <b>Replace</b> to <i>checkout-2.jpg</i>.</li>
                                <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 3: Navigation & JavaScript -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        Navigation &amp; JavaScript
                    </button>
                </h2>
                <div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>Add a link to the image.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/work-poc</i></li>
                                        <li>Set <b>Find</b> to <i>id="demo-img"</i>.</li>
                                        <li>Set <b>Replace</b> to <i>id="demo-img" onclick="location.href='/about'"</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                                <li>Add a link back to the Work POC page.
                                    <ul>
                                        <li>Add a <b>Response - Modify Body</b> rule.</li>
                                        <li>Set the dropdown to <i>Contains</i> and the <b>URL</b> to <i>localhost:3000/about</i></li>
                                        <li>Set <b>Find</b> to <i>&lt;h1&gt;About&lt;/h1&gt;</i>.</li>
                                        <li>Set <b>Replace</b> to <i>&lt;h1&gt;About&lt;/h1&gt;&lt;a href="/work-poc"&gt;Work POC&lt;/a&gt;</i>.</li>
                                        <li>Click the <b>Enable</b> checkbox to enable the rule.</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Item 4: Export and Share with Colleagues -->

            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                        data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                        Export and Share with Colleagues
                    </button>
                </h2>
                <div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        <div class="alert alert-info" role="alert">
                            <b>Steps:</b>
                            <ol>
                                <li>
                                    <b>Export Rules:</b>
                                    <ul>
                                        <li>Click on the <b>File</b> menu and then the <b>Export Rules</b> menu item.</li>
                                        <li>Save the json file for future use.</li>
                                    </ul>
                                </li>
                                <li>
                                    <b>Import Rules:</b>
                                    <ul>
                                        <li>Click on the <b>File</b> menu and then the <b>Import Rules</b> menu item.</li>
                                        <li>Select and open the previously saved json file.</li>
                                        <li>If the Intercept Settings window is already open, close it and reopen it to view the imported rules.</li>
                                    </ul>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!-- Demo Image -->

<div class="row">
    <div class="col-12">
        <div class="mt-3">
            <img id="demo-img" src="/images/checkout-1.jpg" alt="Work POC Demo" />
        </div>
    </div>
</div>

<!-- Bottom Nav -->

<div class="row my-3">
    <div class="col-12 d-flex flex-column flex-sm-row justify-content-between gap-2">
        <a href="/debug" class="btn btn-link px-0">&lt; Debugging</a>
        <a href="/pentest" class="btn btn-link px-0 ms-sm-auto">Pentest &gt;</a>
    </div>
</div>

<!-- Scripts -->

<script>
    //$(async () => { });
</script>

<%- include('partials/footer') %>
