<?php
include "classes/html.class.php";
$html = new html("RESOURCES MANUAL");
$db = new db();
?>

<div>
    <br>
    <h1 style="font-size: 2vw;text-align: center;">Step 1:Click ADD on the Homepage</h1>

    <div id="list1" style="align-items: center;">
        <div class='form' style="padding-bottom: 0%;">
            <h2 style="font-size: 2vw;">HOMEPAGE</h2>
            <hr><br>
            <img src="images/home.png" alt=" add home"
                style="width: 80%; padding: 1vw; border: #099200 5px solid;border-radius: 2vw;">

            <p style="font-size: 1vw;">
                <br>
                <hr>
            <h3 style="font-size: 1.5vw;">Overview</h3>
            <p style="font-size: 1vw;">The Home Page is the central navigation hub of the LOWVELD NUTS application.<br> From here, users can access all core functions involved in nut processing and operations management.
            </p>
            <br><br>
            <hr>
            <h3 style="font-size: 1.5vw;">Button Description</h3>
            <ul style="list-style-type:none;line-height: 1.5vw;font-size: 1vw;">
                <li><b>RECEIVE</b> - Recording all the batch data received into the system</li>
                <li><b>DEHUSK</b> - Opens the dehusking section to track which batches have to dehusked</li>
                <li><b>BINS</b> - Manage and monitor the drying bins and store nuts into the silos</li>
                <li><b>SILO</b> - Opens the silo management section with the current data in all silos</li>
                <li><b>MANUAL</b> - Opens documentation, system instructions and guide for the system</li>
                <li><b>*ADD</b> - Opens a submenu where users can add new silos, varieties, clients, etc.</li>
                <li><b>REPORTS</b> - Access system generated reports and analytics on clients, nuts received etc. </li>
                <li><b>DASHBOARDS</b> - Dashboard overview of current system data</li>
            </ul>
            </p>
            <br>
        </div>
    </div>

    <h1 style="font-size: 2vw;text-align: center;">Step 2:Choose which section you want to add</h1>

    <div id="list2" style="align-items: center;">
        <div class='form' style="padding-bottom: 0%;">
            <h2 style="font-size: 2vw;">ADD HOME</h2>
            <hr><br>
            <img src="images/add_home.png" alt=" add home"
                style="width: 80%; padding: 1vw; border: #099200 5px solid;border-radius: 2vw;">

            <p style="font-size: 1vw;">
                <br>
                <hr>
            <h3 style="font-size: 1.5vw;">Overview</h3>
            <p style="font-size: 1vw;">From here, users can add to essential sections like Variety, Clients, Bins, and
                Silo.</p>
            <br><br>
            <hr>
            <h3 style="font-size: 1.5vw;">Button Description</h3>
            <ul style="list-style-type:none;line-height: 1.5vw;font-size: 1vw;">
                <li><b>VARIETY</b> - Add a different type of nut variety</li>
                <li><b>CLIENTS</b> - Add client related data, such as Company name, phone number, and business details.
                </li>
                <li><b>BINS</b> - Add the new drying bin information </li>
                <li><b>SILO</b> - Add a new store silo</li>
            </ul>
            </p>
            <br>
        </div>
    </div>
    <br>
    <h1 style="font-size: 2vw;text-align: center;">Step 3:Example of adding a silo</h1>
    <div id="list3" style="align-items: center;">
        <div class='form' style="padding-bottom: 0%;">
            <h2 style="font-size: 2vw;">EXAMPLE</h2>
            <hr><br>
            <img src="images/add_silo.png" alt="add silo"
                style="width: 80%; padding: 1vw; border: #099200 5px solid;border-radius: 2vw;">

            <p style="font-size: 1vw;">
                <br>
                <hr>
            <h3 style="font-size: 1.5vw;">Overview</h3>
            <p style="font-size: 1vw;">The Silo module allows users to add new silo records into the system. <br>Each
                silo entry includes a Name
                and a Tons value indicating its storage capacity.</p>
            <br><br>
            <hr>
            <h3 style="font-size: 1.5vw;">Page Description</h3>
            <ul style="list-style-type:none;line-height: 1.5vw;font-size: 1vw;">
                <li><b>HEADINGS/LABELS</b> - Add a different type of nut variety</li>
                <li><b>INPUTS</b> - Add client related data, such as Company name, phone number, and business details.
                </li>
                <li><b>BUTTON</b> - Add the new drying bin information </li>
            </ul>
            <hr>
            <h3 style="font-size: 1.5vw;">Tips & Considerations</h3>
            <ul style="list-style-type:none;line-height: 1.5vw;font-size: 1vw;">
                <li><b>Use consistent & unique naming</b> - (e.g. “Silo 1 - East Wing” or “North Silo 3”) to make silos
                    easy to identify.</li>
                <li><b>All required fields are filled</b> - Ensure all values are correctly filled before tapping ADD.
                </li>
                <li><b>Special Characters</b> - Avoid using special characters in the Name field unless supported.</li>
                <li><b>Confirmation</b> - A confirmation or success message should appear on submitting </li>
            </ul>
            </p>
            <br>
            <br>
        </div>
    </div>
    <br>
    <div id="list4" style="align-items: center;">
        <div class='form' style="padding-bottom: 0%;">
            <h2 style="font-size: 2vw;">Tips, Considerations & Side Notes</h2>
            <hr><br>
            <ul style="list-style-type:none;line-height: 1.5vw;font-size: 1vw;">
                <li><b>Use consistent & unique naming</b> - (e.g. “Silo 1 - East Wing” or “North Silo 3”) to make silos
                    easy to identify.</li>
                <li><b>Ensure all required fields are filled</b> - Ensure all values are correctly filled before
                    submitting.
                </li>
                <li><b>Special Characters</b> - Avoid using special characters in the Name field unless supported.</li>
                <li><b>Confirmation</b> - A confirmation or success message should appear on submitting </li>
            </ul>
            <img src="images/add_noti.png" alt="add silo"
            style="width: 80%; padding: 1vw; border: #099200 5px solid;border-radius: 2vw;">
            </p>
            <br>
            <br>
        </div>
    </div>
    <br>
</div>
<br><br>
<br><br>