<!doctype html>
<html lang="en">

<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="theme-color" content="#000000">
    <title>PallEvator</title>
    <meta name="description" content="Mobilekit HTML Mobile UI Kit">
    <meta name="keywords" content="bootstrap 5, mobile template, cordova, phonegap, mobile, html" />
    <link rel="icon" type="image/png" href="assets/img/favicon.png" sizes="32x32">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/icon/192x192.png">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="manifest" href="__manifest.json">

</head>

<body>

    <!-- loader -->
    <div id="loader">
        <div class="spinner-border text-primary" role="status"></div>
    </div>
    <!-- * loader -->

    <!-- App Header -->
    <div class="appHeader bg-primary text-light">

        <div class="pageTitle">Auto</div>
        <div class="right"></div>
    </div>
    <!-- * App Header -->

    <!-- App Capsule -->
    <div id="appCapsule">

        <div class="modal fade dialogbox" id="DialogBasic" data-bs-backdrop="static" tabindex="-2" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Settings</h5>
                    </div>
                    <div class="modal-body">
                       
                    </div>
                    <div class="modal-footer">
                        <div class="btn-inline">
                            <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal">LUK</a>
                            <a href="#" class="btn btn-text-primary" data-bs-dismiss="modal">OK</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade dialogbox" id="myModal" data-bs-backdrop="static" tabindex="-2" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">System</h5>
                    </div>
                    <div class="modal-body">
                       
                    </div>
                    <div class="modal-footer">
                        <div class="btn-inline">
                            <a href="#" class="btn btn-text-secondary" data-bs-dismiss="modal">LUK</a>
                            <a href="#" class="btn btn-text-primary" data-bs-dismiss="modal">OK</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
       
        <div class="offcanvas-header">
        <h3 class="offcanvas-title">Automatisk kørsel</h5>
    </div>
        <div class="section full mt-2 mb-2">
            <div class="container mt-4">
                <div class="row g-3">
                    <!-- Øverste række: Stable og Destable -->
                    <div class="col-6">
                        <a href="#" class="btn btn-success d-flex flex-column align-items-center py-4">
                            <ion-icon name="arrow-up-outline" size="large"></ion-icon>
                            <span>Stable</span>
                        </a>
                    </div>
                    <div class="col-6">
                        <a href="#" class="btn btn-danger d-flex flex-column align-items-center py-4">
                            <ion-icon name="arrow-down-outline" size="large"></ion-icon>
                            <span>Destable</span>
                        </a>
                    </div>
                    <!-- Nederste række: Tømme -->
                    <div class="col-6">
                        <a href="#" class="btn btn-warning d-flex flex-column align-items-center py-4">
                            <ion-icon name="trash-outline" size="large"></ion-icon>
                            <span>Tømme</span>
                        </a>
                    </div>
                </div>
            </div>
            
        </div>
       
        <div class="section full mt-2">
            <div class="section-title">Sådan fungerer knapperne</div>
            <div class="wide-block pt-2 pb-1">
                <p class="mt-3">
                    Hvis du trykker på <strong>Stable</strong>, vil systemet stable pallen op fra gulvet, indtil der er 15 paller i alt. <br>
                    Ved at trykke på <strong>Destable</strong> vil systemet fjerne en palle ad gangen, indtil den er fjernet fra stakken. <br>
                    Knappen <strong>Tømme</strong> giver sig selv – den fjerner alle paller i én handling.
                </p>
            </div>
            
              
            </div>
        </div>


    </div>

        <!-- <div class="section full mt-2 mb-2">
            <div class="offcanvas-header">
            <h2 class="offcanvas-title">Test kørsel</h5></div>
                <div class="wide-block pb-1 pt-1">

                    <form>
    
                        <ul class="listview image-listview no-line no-space flush">
                            <li>
                                <div class="item">
                                    <div class="icon-box bg-primary">
                                        <ion-icon name="settings-sharp"></ion-icon>
                                    </div>
                                    <div class="in">
                                        <div class="form-group basic">
                                            <div class="input-wrapper">
                                                <label class="form-label" for="aktuator1">Aktuator længde</label>
                                                <input type="name" class="form-control" id="aktuator1"
                                                    placeholder="Længde på aktuator">
                                                <i class="clear-input">
                                                    <ion-icon name="close-circle"></ion-icon>
                                                </i>
                                            </div>
                                            <div class="input-info">Indtast Længde på aktuator</div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item">
                                    <div class="icon-box bg-primary">
                                        <ion-icon name="play"></ion-icon>
                                    </div>
                                    <div class="in">
                                        <div>
                                            Test
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="TestCheckbox"  />
                                            <label class="form-check-label" for="TestCheckbox"></label>
                                        </div>
                                        
                                    </div>
                                </div>
                            </li>
                        </ul>
    
                    </form>
                    <div class="wide-block pt-2 pb-2">


                        <div class="progress">
                            <div id="cacheProgressBar" class="progress-bar bg-danger" role="progressbar" style="width: 0%;" aria-valuenow="0"
                                aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                        <p id="progressText">0% complete</p>
                        
        
                    </div>
    
                </div>
        </div>
        <div class="section full mt-2">
            <div class="section-title">Har du brug for hjælp?</div>
            <div class="wide-block pt-2 pb-1">
                <p>
                 Du kan altid kontakte os på tlf, eller mail hvis du har problemer med din NeXt styring.

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


    </div> -->
    <!-- * App Capsule -->

    <!-- App Bottom Menu -->
    <div class="appBottomMenu">
        <a href="page-about.html" class="item">
            <div class="col">
                <ion-icon name="home-outline"></ion-icon>
            </div>
        </a>
        <a href="page-chat.html" class="item">
            <div class="col">
                <ion-icon name="chatbubble-ellipses-outline"></ion-icon>
                <span class="badge badge-danger">0</span>
            </div>
        </a>
        <a href="login.html" class="item">
            <div class="col">
                <ion-icon name="settings-outline"></ion-icon>
            </div>
        </a>
       
    </div>