templates/counters/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Counters</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Advanced UI</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Counters</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row row-cards">
  21.                                 <div class="col-md-12 col-xl-4">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">
  25.                                                 Time Counting From 0
  26.                                             </h3>
  27.                                         </div>
  28.                                         <div class="card-body">
  29.                                             <div class="example bg-primary-transparent border-primary text-primary">
  30.                                                 <div class="d-sm-flex">
  31.                                                     <span class="mb-sm-0 mb-3"><i class="fs-30 fe fe-clock"></i></span>
  32.                                                     <div class="ms-sm-5 mb-sm-0 mb-3">
  33.                                                         <span id="timer-countup" class="h3"></span>
  34.                                                         <h5 class="mb-0 mt-1">Only 6 min left</h5>
  35.                                                     </div>
  36.                                                     <div class="ms-auto text-sm-end">
  37.                                                         <h5 class="mb-1">Max Bid:</h5>
  38.                                                         <span class="h3 mb-0">$1000</span>
  39.                                                     </div>
  40.                                                 </div>
  41.                                             </div>
  42.                                         </div>
  43.                                     </div>
  44.                                 </div><!-- COL-END -->
  45.                                 <div class="col-md-12 col-xl-4">
  46.                                     <div class="card">
  47.                                         <div class="card-header border-bottom">
  48.                                             <h3 class="card-title">
  49.                                                 Time Counting From 60 to 20
  50.                                             </h3>
  51.                                         </div>
  52.                                         <div class="card-body">
  53.                                             <div class="example bg-secondary-transparent border-secondary text-secondary">
  54.                                                 <div class="d-sm-flex">
  55.                                                     <span class="mb-sm-0 mb-3"><i class="fs-30 fe fe-clock"></i></span>
  56.                                                     <div class="ms-sm-5 mb-sm-0 mb-3">
  57.                                                         <span id="timer-countinbetween" class="h3"></span>
  58.                                                         <h5 class="mb-0 mt-1">Only 6 min left</h5>
  59.                                                     </div>
  60.                                                     <span class="h1 ms-auto mb-0 mb-sm-0 mb-3">$1000</span>
  61.                                                 </div>
  62.                                             </div>
  63.                                         </div>
  64.                                     </div>
  65.                                 </div><!-- COL-END -->
  66.                                 <div class="col-md-12 col-xl-4">
  67.                                     <div class="card">
  68.                                         <div class="card-header border-bottom">
  69.                                             <h3 class="card-title">
  70.                                                 Time minutes counter
  71.                                             </h3>
  72.                                         </div>
  73.                                         <div class="card-body">
  74.                                             <div class="example bg-warning-transparent border-warning text-warning">
  75.                                                 <div class="d-sm-flex">
  76.                                                     <span class="mb-sm-0 mb-3"><i class="fs-30 fe fe-clock"></i></span>
  77.                                                     <div class="ms-sm-5 mb-sm-0 mb-3">
  78.                                                         <span id="timer-countercallback" class="h3"></span>
  79.                                                         <h5 class="mb-0 mt-1">Only 6 min left</h5>
  80.                                                     </div>
  81.                                                     <span class="h1 text-center ms-auto mb-0 mb-sm-0 mb-3 ">$1000</span>
  82.                                                 </div>
  83.                                             </div>
  84.                                         </div>
  85.                                     </div>
  86.                                 </div><!-- COL-END -->
  87.                                 <div class="col-md-12">
  88.                                     <div class="card">
  89.                                         <div class="card-header border-bottom">
  90.                                             <h3 class="card-title">
  91.                                                 Time Counting days Limit
  92.                                             </h3>
  93.                                         </div>
  94.                                         <div class="card-body text-center">
  95.                                             <div class="row">
  96.                                                 <div class="col-md-6 mx-auto">
  97.                                                     <div class=" example bg-info br-7 d-f-ai-c-jc-c">
  98.                                                         <i class="fe fe-calendar fs-30 text-white pe-3"></i>
  99.                                                         <span id="timer-outputpattern" class="h3 text-white mb-0"></span>
  100.                                                     </div>
  101.                                                 </div>
  102.                                             </div>
  103.                                         </div>
  104.                                     </div>
  105.                                 </div><!-- COL-END -->
  106.                             </div>
  107.                             <!-- ROW-1 CLOSED -->
  109.                             <!-- ROW-2 OPEN -->
  110.                             <div class="row">
  111.                                 <div class="col-sm-12 col-md-12 col-xl-4">
  112.                                     <div class="card custom-card">
  113.                                         <div class="card-header border-bottom">
  114.                                             <h3 class="card-title">Time Counting From 0</h3>
  115.                                         </div>
  116.                                         <div class="card-body text-center">
  117.                                             <img src="{{absolute_url(asset('build/images/media/illustrate.png'))}}" alt="counter-image" class="wd-300 ht-300 ">
  118.                                             <div class="pb-0 mt-4  bg-primary text-white p-3 br-5">
  119.                                                 <span id="timer-countup1" class="text-26 mb-0"></span>
  120.                                             </div>
  121.                                         </div>
  122.                                     </div>
  123.                                 </div><!-- COL-END -->
  124.                                 <div class="col-sm-12 col-md-12 col-xl-4">
  125.                                     <div class="card custom-card">
  126.                                         <div class="card-header border-bottom">
  127.                                             <h3 class="card-title">Time Counting From 60 to 20</h3>
  128.                                         </div>
  129.                                         <div class="card-body text-center">
  130.                                             <img src="{{absolute_url(asset('build/images/media/illustrate1.png'))}}" alt="counter-image" class="wd-300 ht-300 ">
  131.                                             <div class="mt-4 bg-warning text-white p-3 br-5">
  132.                                                 <span id="timer-countinbetween1" class="text-26 mb-0"></span>
  133.                                             </div>
  134.                                         </div>
  135.                                     </div>
  136.                                 </div><!-- COL-END -->
  137.                                 <div class="col-sm-12 col-md-12 col-xl-4">
  138.                                     <div class="card custom-card">
  139.                                         <div class="card-header border-bottom">
  140.                                             <h3 class="card-title">Time 1 minute counter</h3>
  141.                                         </div>
  142.                                         <div class="card-body text-center">
  143.                                             <img src="{{absolute_url(asset('build/images/media/illustrate2.png'))}}" alt="counter-image" class="wd-300 ht-300 ">
  144.                                             <div class="mt-4 bg-secondary text-white p-3 br-5">
  145.                                                 <span id="timer-countercallback1" class="text-26 mb-0"></span>
  146.                                             </div>
  147.                                         </div>
  148.                                     </div>
  149.                                 </div><!-- COL-END -->
  150.                                 <div class="col-md-12">
  151.                                     <div class="card">
  152.                                         <div class="card-header border-bottom">
  153.                                             <h3 class="card-title">
  154.                                                 Day Counter
  155.                                             </h3>
  156.                                         </div>
  157.                                         <div class="card-body text-center">
  158.                                             <div class="row">
  159.                                                 <div class="col-md-8 mx-auto">
  160.                                                     <div class="count-down row">
  161.                                                         <div class="col-xl-3 col-md-6 countdown  mb-6 mb-xl-0">
  162.                                                             <span class="days text-primary ">35</span>
  163.                                                             <span class="text-dark">Days</span>
  164.                                                         </div>
  165.                                                         <div class="col-xl-3 col-md-6 countdown mb-6 mb-xl-0">
  166.                                                             <span class="hours text-primary me-3">17</span>
  167.                                                             <span class="text-dark">Hrs</span>
  168.                                                         </div>
  170.                                                         <div class="col-xl-3 col-md-6 countdown  mb-6 mb-xl-0">
  171.                                                             <span class="minutes text-primary">50</span>
  172.                                                             <span class="text-dark">Mins</span>
  173.                                                         </div>
  174.                                                         <div class="col-xl-3 col-md-6 countdown ">
  175.                                                             <span class="seconds text-primary">39</span>
  176.                                                             <span class="text-dark">Secs</span>
  177.                                                         </div>
  178.                                                     </div>
  179.                                                 </div>
  180.                                             </div>
  181.                                         </div>
  182.                                     </div>
  183.                                 </div><!-- COL-END -->
  184.                             </div>
  185.                             <!-- ROW-2 CLOSED -->
  188. {% endblock %}
  190. {% block javascripts %}
  191.    {{parent()}} 
  192.         <!-- TIME COUNTER JS-->
  193.         <script src="{{absolute_url(asset('build/plugins/counters/jquery.missofis-countdown.js'))}}"></script>
  194.         <script src="{{absolute_url(asset('build/plugins/counters/counter.js'))}}"></script>
  196.         <!-- COUNT-DOWN JS-->
  197.         <script src="{{absolute_url(asset('build/plugins/counters/count-down.js'))}}"></script>
  198.         <script src="{{absolute_url(asset('build/plugins/countdown/moment.min.js'))}}"></script>
  199.         <script src="{{absolute_url(asset('build/plugins/countdown/moment-timezone.min.js'))}}"></script>
  200.         <script src="{{absolute_url(asset('build/plugins/countdown/moment-timezone-with-data.min.js'))}}"></script>
  201.         <script src="{{absolute_url(asset('build/plugins/countdown/countdowntime.js'))}}"></script>
  203.         <!-- COUNTERS JS-->
  204.         <script src="{{absolute_url(asset('build/plugins/counters/counterup.min.js'))}}"></script>
  205.         <script src="{{absolute_url(asset('build/plugins/counters/waypoints.min.js'))}}"></script>
  206.         <script src="{{absolute_url(asset('build/plugins/counters/counters-1.js'))}}"></script>
  207. {% endblock %}