Zoraxy/web/components/quickstart.html

<div id="quickstart" class="standardContainer">
    <div class="ui container">
        <h1 class="ui header">
            <img src="img/res/1F387.png">
            <div class="content">
              Welcome to Zoraxy!
              <div class="sub header">What services are you planning to setup today?</div>
            </div>
        </h1>
        <br>
        <div class="ui stackable equal width grid">
            <div class="column">
                <div class="serviceOption homepage" name="homepage">
                    <div class="titleWrapper">
                        <p>Basic Homepage</p>
                    </div>
                    <div class="ui divider"></div>
                    <p>Host a static homepage with Zoraxy and point your domain name to your web server.</p>
                    <img class="themebackground ui small image" src="img/res/1F310.png">
                    <div class="activeOption">
                        <i class="ui white huge circle check icon"></i>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="serviceOption subdomain" name="subdomain">
                    <div class="titleWrapper">
                        <p>Sub-domains Routing</p>
                    </div>
                    <div class="ui divider"></div>
                    <p>Add and handle traffic from your subdomains and point them to a dedicated web services somewhere else.</p>
                    <img class="themebackground ui small image" src="img/res/1F500.png">
                    <div class="activeOption">
                        <i class="ui white huge circle check icon"></i>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="serviceOption tls" name="tls">
                    <div class="titleWrapper">
                        <p>HTTPS Green Lock(s)</p>
                    </div>
                    <div class="ui divider"></div>
                    <p>Turn your unsafe HTTP website into HTTPS using free certificate from public certificate authorities organizations.</p>
                    <img class="themebackground ui small image" src="img/res/1F512.png">
                    <div class="activeOption">
                        <i class="ui white huge circle check icon"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="ui divider"></div>
        <div style="width: 100%;" align="center">
            <button onclick="startQuickStartTour();" class="ui finished button quickstartControlButton">
                Start Walkthrough
            </button>
        </div>
    </div>
    
</div>
<script>
    var currentQuickSetupClass = "";
    var currentQuickSetupTourStep = 0;
    //For tour logic, see quicksetup.js


    //Bind selecting events to serviceOption
    $("#quickstart .serviceOption").on("click", function(data){
        $(".serviceOption.active").removeClass("active");
        $(this).addClass("active");
        let tourType = $(this).attr("name");
        currentQuickSetupClass = tourType;
    });

    function startQuickStartTour(){
        if (currentQuickSetupClass == ""){
            msgbox("No selected setup service tour", false);
            return;
        }   
        //Show the tour modal
        $("#tourModal").show();
        //Load the tour steps
        if (tourSteps[currentQuickSetupClass] == undefined || tourSteps[currentQuickSetupClass].length == 0){
            //This tour is not defined or empty
            let notFound = tourStepFactory({
                title: "😭 Tour not found",
                desc: "Seems you are requesting a tour that has not been developed yet. Check back on later!"
            });
            notFound();

            //Enable the finish button
            $("#tourModal .nextStepAvaible").hide();
            $("#tourModal .nextStepFinish").show();
            return;
        }else{
            tourSteps[currentQuickSetupClass][0]();
        }
        
        updateTourStepCount();
        
        //Disable the previous button
        if (tourSteps[currentQuickSetupClass].length == 1){
            //There are only 1 step in this tour
            $("#tourModal .nextStepAvaible").hide();
            $("#tourModal .nextStepFinish").show();
        }else{
            $("#tourModal .nextStepAvaible").show();
            $("#tourModal .nextStepFinish").hide();
        }
        $("#tourModal .tourStepButtonPrevious").addClass("disabled");
    }

    function updateTourStepCount(){
        let tourlistLength = tourSteps[currentQuickSetupClass]==undefined?1:tourSteps[currentQuickSetupClass].length;
        $("#tourModal .tourStepCounter").text((currentQuickSetupTourStep + 1) + " / " + tourlistLength);
    }

    function nextStep(){
        //Add one to the tour steps
        currentQuickSetupTourStep++;
        if (currentQuickSetupTourStep == tourSteps[currentQuickSetupClass].length - 1){
            //Already the last step
            $("#tourModal .nextStepAvaible").hide();
            $("#tourModal .nextStepFinish").show();
        }
        updateTourStepCount();
        tourSteps[currentQuickSetupClass][currentQuickSetupTourStep]();
        if (currentQuickSetupTourStep > 0){
            $("#tourModal .tourStepButtonPrevious").removeClass("disabled");
        }
    }

    //End tour
    function endTourFocus(){
        $(".tourFocusObject").removeClass("tourFocusObject");
        $(".serviceOption.active").removeClass("active");
        currentQuickSetupClass = "";
        currentQuickSetupTourStep = 0;
        $("#tourModal").hide();
        $("#tourModal .nextStepAvaible").show();
        $("#tourModal .nextStepFinish").hide();
        $("#tourModalOverlay").hide();
    }

</script>
<script src="script/quicksetup.js"></script>