wizard.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. ---
  2. title: Wizard
  3. layout: single
  4. menu: extra.wizard
  5. ---
  6. <div class="card card-md">
  7. <div class="card-body text-center py-4 p-sm-5">
  8. {% include "ui/illustration.html" image="boy-girl.svg" height="120" class="mb-n2" %}
  9. <h1 class="mt-5">Welcome to Tabler!</h1>
  10. <p class="text-secondary">Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again.</p>
  11. </div>
  12. {% include "ui/hr.html" text="your data" position="center" class="hr-text-spaceless" %}
  13. <div class="card-body">
  14. <div class="mb-3">
  15. <label class="form-label">Create your Tabler URL</label>
  16. {% include "ui/form/input-group.html" prepend="https=//tabler.io/" input-class="ps-1" flat=true %}
  17. <div class="form-hint">Choose a URL that describes you or your business in a concise way. Make it short and easy to remember so you can share links with ease.</div>
  18. </div>
  19. <div>
  20. <label class="form-label">Timezone</label>
  21. <select class="form-select mb-0">
  22. {% for timezone in timezones %}
  23. <option value="{{ timezone.abbr }}"{% if timezone.abbr == 'CEDT' %} selected{% endif %}>{{ timezone.text }}</option>
  24. {% endfor %}
  25. </select>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="row align-items-center mt-3">
  30. <div class="col-4">
  31. {% include "ui/progress.html" value=25 %}
  32. </div>
  33. <div class="col">
  34. <div class="btn-list justify-content-end">
  35. {% include "ui/button.html" text="Set up later" color="link link-secondary" %}
  36. {% include "ui/button.html" text="Continue" color="primary" %}
  37. </div>
  38. </div>
  39. </div>