src/DcSiteBundle/Resources/views/Modules/callback/widget.html.twig line 1

Open in your IDE?
  1. <style>
  2.     .timer-group {
  3.         height: 180px;
  4.         margin: 0 auto;
  5.         position: relative;
  6.         width: 180px;
  7.     }
  8.     .timer {
  9.         border-radius: 50%;
  10.         height: 100px;
  11.         overflow: hidden;
  12.         position: absolute;
  13.         width: 100px;
  14.     }
  15.     .timer:after {
  16.         background: #fff;
  17.         border-radius: 100%;
  18.         content: "";
  19.         display: block;
  20.         height: 80px;
  21.         left: 10px;
  22.         position: absolute;
  23.         width: 80px;
  24.         top: 10px;
  25.     }
  26.     .timer .hand {
  27.         float: left;
  28.         height: 100%;
  29.         overflow: hidden;
  30.         position: relative;
  31.         width: 50%;
  32.     }
  33.     .timer .hand span {
  34.         border: 1px solid #E40C25;
  35.         border-bottom-color: transparent;
  36.         border-left-color: transparent;
  37.         border-radius: 50%;
  38.         display: block;
  39.         height: 0;
  40.         position: absolute;
  41.         right: 0;
  42.         top: 0;
  43.         width: 0;
  44.     }
  45.     .timer .hand:first-child {
  46.         transform: rotate(180deg);
  47.     }
  48.     .timer .hand span {
  49.         animation-duration: 4s;
  50.         animation-iteration-count: infinite;
  51.         animation-timing-function: linear;
  52.     }
  53.     .timer .hand:first-child span {
  54.         animation-name: spin1;
  55.     }
  56.     .timer .hand:last-child span {
  57.         animation-name: spin2;
  58.     }
  59.     .timer.minute {
  60.         height: 169px;
  61.         left: 10px;
  62.         width: 169px;
  63.         top: 10px;
  64.         box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.15);
  65.     }
  66.     .timer.minute .hand span {
  67.         animation-duration: 60s;
  68.         border-right-color: #E40C25;
  69.         border-width: 85px;
  70.     }
  71.     .timer.minute:after {
  72.         height: 160px;
  73.         left: 5px;
  74.         width: 160px;
  75.         top: 5px;
  76.     }
  77.     #time {
  78.         position: absolute;
  79.         width: 100%;
  80.         left: 52%;
  81.         transform: translate(-50%, -50%);
  82.         top: 52%;
  83.         display: block;
  84.         font-style: normal;
  85.         font-weight: 350;
  86.         font-size: 40px;
  87.         line-height: normal;
  88.         text-align: center;
  89.         color: #AFAFAF;
  90.         max-width: 160px;
  91.     }
  92.     @keyframes spin1 {
  93.         0% {
  94.             transform: rotate(225deg);
  95.         }
  96.         50% {
  97.             transform: rotate(225deg);
  98.         }
  99.         100% {
  100.             transform: rotate(405deg);
  101.         }
  102.     }
  103.     @keyframes spin2 {
  104.         0% {
  105.             transform: rotate(225deg);
  106.         }
  107.         50% {
  108.             transform: rotate(405deg);
  109.         }
  110.         100% {
  111.             transform: rotate(405deg);
  112.         }
  113.     }
  114. </style>
  115. <noindex>
  116.     <div class="call-form modal" id="callback-order" role="dialog" aria-labelledby="myModalLabel">
  117.         <div class="modal-dialog">
  118.             <div class="modal-content">
  119.                 <div class="modal-header">
  120.                     <div class="modal-title">
  121.                         <span v-if="isWorkingTime" v-html="callBackMinute"></span>
  122.                         <span v-else v-html="callBackWorkingHours"></span>
  123.                     </div>
  124.                     <button href="#" class="call-form-close close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="close" @click="closeCall()">
  125.                         <span aria-hidden="true">&times;</span>
  126.                     </button>
  127.                 </div>
  128.                 <div class="modal-body">
  129.                     <div class="container">
  130.                         <div class="row">
  131.                             <div class="col-md-12">
  132.                                 <div class="call-form-wrap"  id="callback-body" v-if="isInit">
  133.                                     <div class="call-first-steep" v-if="step == 1">
  134.                                         <div class="call-form-subtitle" id="callback-first-step">
  135.                                             <span>{{ 'callback_widget.choose_dep'|trans({}, 'dc_base') }}</span>
  136.                                         </div>
  137.                                         <div class="choose-dep">
  138.                                             <div class="radio" v-for="(department, key, index) in departments">
  139.                                                 <input type="radio" name="department" :value="department.id" :key="department.id" v-model="firstStep.departmentId" :id="'department-'+department.id"/>
  140.                                                 {% verbatim %}<label :for="'department-'+department.id">{{ department.name }}</label>{% endverbatim %}
  141.                                             </div>
  142.                                         </div>
  143.                                         <div class="call-wrap-form">
  144.                                             <input id="call-phone-input" :disabled="firstStep.departmentId == null" type="tel" v-mask="['+38###-###-##-##']" class="callback-phone" v-model="firstStep.userPhone" placeholder="+38">
  145.                                             <div class="checkbox style-b" v-if="privacyUrl">
  146.                                                 <label class="checkboxes__item-privacy">
  147.                                                     <input type="checkbox" v-model="checkPrivacy"/>
  148.                                                     <div id="check_privacy" class="checkbox__checkmark form-control"></div>
  149.                                                     <div class="checkbox__body">{{ 'callback_widget.privacy'|trans({}, 'dc_base') }} <a :href="privacyUrl" target="_blank">{{ 'callback_widget.privacy_link'|trans({}, 'dc_base') }}</a></div>
  150.                                                 </label>
  151.                                             </div>
  152.                                             <button class="btn btn-primary" @click.prevent="createRequest">{{ 'callback_widget.call'|trans({}, 'dc_base') }}</button>
  153.                                         </div>
  154.                                     </div>
  155.                                     <div class="call-second-steep" id="callback-second-step" v-if="step == 2 && isWorkingTime">
  156.                                         <div class="timer-group">
  157.                                             <div class="timer minute">
  158.                                                 <div class="hand"><span></span></div>
  159.                                                 <div class="hand"><span></span></div>
  160.                                             </div>
  161.                                             <span id="time"> {% verbatim %} {{ timer }} {% endverbatim %} </span>
  162.                                         </div>
  163.                                     </div>
  164.                                     <div class="call-last-steep" id="callback-third-step" v-if="step == 3 && callingSuccess == false">
  165.                                         <div class="call-form-subtitle">
  166.                                             <span>{{ 'callback_widget.soory_text'|trans({}, 'dc_base')|raw }}</span>
  167.                                         </div>
  168.                                         <div class="call-form-subtitle mb-0">
  169.                                             <span>{{ 'callback_widget.specialist_call'|trans({}, 'dc_base') }}</span>
  170.                                         </div>
  171.                                     </div>
  172.                                     <div class="call-last-steep" id="callback-third-step" v-if="step == 3 && callingSuccess == true">
  173.                                         <div class="call-form-subtitle text-center">
  174.                                             <span><br>{{ 'callback_widget.we_call'|trans({}, 'dc_base') }}</span>
  175.                                         </div>
  176.                                     </div>
  177.                                 </div>
  178.                             </div>
  179.                         </div>
  180.                     </div>
  181.                 </div>
  182.             </div>
  183.         </div>
  184.     </div>
  185. </noindex>