quickstart.html 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <div id="quickstart" class="standardContainer">
  2. <div class="ui container">
  3. <h1 class="ui header">
  4. <img src="img/res/1F387.png">
  5. <div class="content">
  6. Welcome to Zoraxy!
  7. <div class="sub header">What services are you planning to setup today?</div>
  8. </div>
  9. </h1>
  10. <br>
  11. <div class="ui stackable equal width grid">
  12. <div class="column">
  13. <div class="serviceOption homepage" name="homepage">
  14. <div class="titleWrapper">
  15. <p>Static Homepage</p>
  16. </div>
  17. <div class="ui divider"></div>
  18. <p>Host a static personal homepage with HTML, CSS and JavaScript using your domain name.</p>
  19. <img class="themebackground ui small image" src="img/res/1F310.png">
  20. <div class="activeOption">
  21. <i class="ui white huge circle check icon"></i>
  22. </div>
  23. </div>
  24. </div>
  25. <div class="column">
  26. <div class="serviceOption subdomain" name="subdomain">
  27. <div class="titleWrapper">
  28. <p>Sub-domains Routing</p>
  29. </div>
  30. <div class="ui divider"></div>
  31. <p>Add and handle traffic from your subdomains and point them to a dedicated web services somewhere else.</p>
  32. <img class="themebackground ui small image" src="img/res/1F500.png">
  33. <div class="activeOption">
  34. <i class="ui white huge circle check icon"></i>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="column">
  39. <div class="serviceOption tls" name="tls">
  40. <div class="titleWrapper">
  41. <p>HTTPS Green Lock(s)</p>
  42. </div>
  43. <div class="ui divider"></div>
  44. <p>Turn your unsafe HTTP website into HTTPS using free certificate from public certificate authorities organizations.</p>
  45. <img class="themebackground ui small image" src="img/res/1F512.png">
  46. <div class="activeOption">
  47. <i class="ui white huge circle check icon"></i>
  48. </div>
  49. </div>
  50. </div>
  51. </div>
  52. <div class="ui divider"></div>
  53. <div style="width: 100%;" align="center">
  54. <button onclick="startQuickStartTour();" class="ui finished button quickstartControlButton">
  55. Start Walkthrough
  56. </button>
  57. </div>
  58. </div>
  59. </div>
  60. <script>
  61. var currentQuickSetupClass = "";
  62. //Bind selecting events to serviceOption
  63. $("#quickstart .serviceOption").on("click", function(data){
  64. $(".serviceOption.active").removeClass("active");
  65. $(this).addClass("active");
  66. let tourType = $(this).attr("name");
  67. currentQuickSetupClass = tourType;
  68. });
  69. function startQuickStartTour(){
  70. if (currentQuickSetupClass == ""){
  71. msgbox("No selected setup service tour", false);
  72. return;
  73. }
  74. alert(currentQuickSetupClass);
  75. }
  76. </script>