preview.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!DOCTYPE html>
  2. <html lang="{{ page.lang | default: site.lang | default: "en" }}">
  3. {% include head.html %}
  4. <body class="preview-page">
  5. <div class="preview-bar bg-white fixed-top py-2 border-bottom-primary">
  6. <div class="container-fluid h-100">
  7. <div class="row align-items-center justify-content-between h-100">
  8. <div class="col-auto col-lg">
  9. <i class="fab fa-github text-github small"></i>
  10. {% if page.migrated %}
  11. <a class="small" href="https://github.com/StartBootstrap/startbootstrap-{{ page.slug }}">View on GitHub</a>
  12. {% elsif page.no-prefix %}
  13. <a class="small" href="https://github.com/StartBootstrap/{{ page.slug }}">View on GitHub</a>
  14. {% else %}
  15. <a class="small" href="https://github.com/BlackrockDigital/startbootstrap-{{ page.slug }}">View on GitHub</a>
  16. {% endif %}
  17. </div>
  18. <div class="col col-auto d-none d-xl-block">
  19. <ul class="nav responsive-toggler justify-content-center" role="tablist">
  20. <li class="nav-item">
  21. <a class="nav-link active" id="desktopToggle" data-toggle="tab" href="#" role="tab" aria-selected="true">
  22. <i class="fal fa-desktop"></i>
  23. </a>
  24. </li>
  25. <li class="nav-item">
  26. <a class="nav-link" id="mobileToggle" data-toggle="tab" href="#" role="tab" aria-selected="false">
  27. <i class="fal fa-mobile"></i>
  28. </a>
  29. </li>
  30. </ul>
  31. </div>
  32. <div class="col text-right">
  33. {% if page.builder %}
  34. <a href="https://builder.startbootstrap.com/builder/{{ page.slug }}" class="btn btn-info btn-sm mr-2" onclick="ga('send','event','Builder','click','{{ page.title }} Builder')">
  35. <i class="fal fa-edit fa-fw"></i> <span>Customize<span class="d-none d-md-inline"> &amp; Download (Free)</span></span>
  36. </a>
  37. {% endif %}
  38. {% if page.migrated %}
  39. <a href="https://github.com/StartBootstrap/startbootstrap-{{ page.slug }}/archive/gh-pages.zip" class="btn btn-primary btn-sm mr-2" onclick="ga('send','event','Download','click','{{ page.title }}')">Free Download</a>
  40. {% elsif page.no-prefix %}
  41. <a href="https://github.com/StartBootstrap/{{ page.slug }}/archive/master.zip" class="btn btn-primary btn-sm mr-2" onclick="ga('send','event','Download','click','{{ page.title }}')">Free Download</a>
  42. {% else %}
  43. <a href="https://github.com/BlackrockDigital/startbootstrap-{{ page.slug }}/archive/gh-pages.zip" class="btn btn-primary btn-sm mr-2" onclick="ga('send','event','Download','click','{{ page.title }}')">Free Download</a>
  44. {% endif %}
  45. {% if page.custom-preview-link %}
  46. <a href="{{ page.custom-preview-link }}/" class="btn btn-link btn-sm d-none d-md-inline-block"><i class="fal fa-times mr-1"></i> Remove Frame</a>
  47. {% elsif page.migrated %}
  48. <a href="https://startbootstrap.github.io/startbootstrap-{{ page.slug }}/" class="btn btn-link btn-sm d-none d-md-inline-block"><i class="fal fa-times mr-1"></i> Remove Frame</a>
  49. {% else %}
  50. <a href="https://blackrockdigital.github.io/startbootstrap-{{ page.slug }}/" class="btn btn-link btn-sm d-none d-md-inline-block"><i class="fal fa-times mr-1"></i> Remove Frame</a>
  51. {% endif %}
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. {% if page.custom-preview-link %}
  57. <iframe class="iframe-preview" width="100%" src="{{ page.custom-preview-link }}/"></iframe>
  58. {% elsif page.migrated %}
  59. <iframe class="iframe-preview" width="100%" src="http://startbootstrap.github.io/startbootstrap-{{ page.slug }}/"></iframe>
  60. {% else %}
  61. <iframe class="iframe-preview" width="100%" src="http://blackrockdigital.github.io/startbootstrap-{{ page.slug }}/"></iframe>
  62. {% endif %}
  63. {% include scripts.html %}
  64. <script>
  65. $("#desktopToggle").on('click', function(e) {
  66. e.preventDefault();
  67. $(".iframe-preview").removeClass("iframe-preview-mobile");
  68. });
  69. $("#mobileToggle").on('click', function(e) {
  70. e.preventDefault();
  71. $(".iframe-preview").addClass("iframe-preview-mobile");
  72. });
  73. </script>
  74. </body>
  75. </html>