<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Multi-Step Wizard</title>
        <style>
            .preloader {
                width: 100%;
                height: 20px;
                background-color: #f3f3f3;
                border: 1px solid #ccc;
            }
            .status {
                margin-top: 10px;
                font-family: Arial, sans-serif;
                direction: ltr;
            }
            .progressBar {
                width: 0;
                height: 100%;
                background-color: #4caf50;
                text-align: left;
                direction: ltr;
            }

        </style>
    </head>
    <body>
        <h1>Restoring old backup</h1>


        <h2>Restore files</h2>
        <!-- Preloader -->
        <div class="preloader">
            <div id="progressBarUnZip" class="progressBar"></div>
        </div>
        <div id="statusUnZip" class="pull-left status">Ready to start...</div>
        <button onclick="restoreFiles()">restore files</button>

        <h2>Restore DB</h2>
        <!-- Preloader -->
        <div class="preloader">
            <div id="progressBarDB" class="progressBar"></div>
        </div>
        <div id="statusDB" class="pull-left status">Ready to start...</div>
        <button onclick="restoreDB()">restore database</button>
    </div>

</body>
</html>
