templates/order/order.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.     <link  rel="stylesheet" href="{{ asset('build/js/bower_components/ng-tags-input/ng-tags-input.css') }}" />
  6.     <link  rel="stylesheet" href="{{ asset('build/js/bower_components/ng-tags-input/ng-tags-input.bootstrap.css') }}" />
  7.     {# <link  rel="stylesheet" href="{{ asset('build/js/bower_components/sweetalert/dist/sweetalert.css') }}" /> #}
  9.     <style type="text/css">
  10.         body {
  11.             background-color: #f0f0f0;
  12.         }
  14.         .navbar-area {
  15.             background: var(--mainColor) !important;
  16.             position: unset;
  17.         }
  19.         .page-title-area {
  20.             height: auto;
  21.             padding-top: 50px;
  22.         }
  24.         .with-infos-bar .page-title-area {
  25.             padding-top: 110px;
  26.         }
  28.         .select__offer {
  29.             background: var(--whiteColor);
  30.             border: 1px solid #dededf;
  31.             border-radius: 10px;
  32.             box-shadow: 0 2px 27px 3px rgba(0, 0, 0, 0.06);
  33.         }
  35.         .select__offer h2 {
  36.             border-bottom: 1px solid #eee;
  37.             color: #3e396a;
  38.             font-size: 36px;
  39.             font-weight: 600;
  40.             padding-bottom: 20px;
  41.         }
  43.         .select__offer .package-container {
  44.             position: relative;
  45.         }
  47.         .select__offer .package-container i {
  48.             position: absolute;
  49.             top: 0;
  50.             bottom: 0;
  51.             margin: auto;
  52.             height: 20px;
  53.             left: 15px;
  54.         }
  56.         .select__offer .img-profile-container,
  57.         .select__offer .summary,
  58.         .select__offer .btn-change-action {
  59.             align-items: stretch;
  60.             justify-content: center;
  61.             display: flex;
  62.             flex-direction: column;
  63.         }
  65.         .select__offer .img-profile-container .img-profile-preview {
  66.             background: #dedede;
  67.             border-radius: 100px;
  68.             flex-shrink: 0;
  69.             height: 80px;
  70.             width: 80px;
  71.         }
  73.         .select__offer .summary {
  74.             flex: auto;
  75.         }
  77.         .select__offer .summary .username {
  78.             font-size: 20px;
  79.             line-height: 20px;
  80.             font-weight: 700;
  81.         }
  83.         .select__offer .medias__list {
  84.             display: grid;
  85.             gap: 10px 10px;
  86.             grid-template-columns: auto auto auto auto;
  87.             grid-template-rows: auto;
  88.             justify-items: stretch;
  89.         }
  91.         .select__offer .medias__list .medias__list-item {
  92.             background-color: #dedede;
  93.             border: 1px solid #e0e0e0;
  94.             border-radius: 8px;
  95.             cursor: pointer;
  96.             padding-top: 100%;
  97.             position: relative;
  98.             user-select: none;
  99.             width: 100%;
  100.             background-size: cover;
  101.             background-repeat: no-repeat;
  102.             position: relative;
  103.             overflow: hidden;
  104.         }
  106.         .select__offer .medias__list .medias__list-item .medias__list-item-selected {
  107.             position: absolute;
  108.             left: 0;
  109.             top: 0;
  110.             right: 0;
  111.             bottom: 0;
  112.             background-color: #000000a6;
  113.             display: flex;
  114.             align-items: center;
  115.             justify-content: center;
  116.             color: #FFF;
  117.             font-weight: bold;
  118.             font-size: 24px;
  119.         }
  121.         /* 
  122.             Have any Dribbble invite?
  123.             Why don't you send me one,
  124.             I'll appreciate it and will thank you.
  126.             https://dribbble.com/ionelcucu
  128.             https://github.com/ionelcucu
  129.             https://www.behance.net/ionelcucu
  130.             http://www.cucuionel.com
  132.         */
  135.         button {
  136.             position: relative;
  137.             outline: none;
  138.             cursor: pointer;
  139.             transition: background 0.2s ease-in-out;
  140.         }
  141.         button:not([disabled]):hover {
  142.             background: #2ecc71;
  143.         }
  144.         button[disabled] {
  145.             background: #3c7d57;
  146.             color: #ffffff3b;
  147.             cursor: default;
  148.         }
  149.         button:after {
  150.             content: '';
  151.             display: block;
  152.             position: absolute;
  153.             opacity: 0;
  154.             width: 30px;
  155.             height: 30px;
  156.             top: 0;
  157.             bottom: 0;
  158.             margin: auto;
  159.             border: 5px solid rgba(255, 255, 255, 0.3);
  160.             border-right-color: #fff;
  161.             border-radius: 50%;
  163.             -webkit-transition-property: -webkit-transform;
  164.             -webkit-transition-duration: 0.5s;
  166.             -moz-transition-property: -moz-transform;
  167.             -moz-transition-duration: 0.5s;
  169.             -webkit-animation-name: rotate;
  170.             -webkit-animation-duration: 0.5s;
  171.             -webkit-animation-iteration-count: infinite;
  172.             -webkit-animation-timing-function: linear;
  174.             -moz-animation-name: rotate;
  175.             -moz-animation-duration: 0.5s;
  176.             -moz-animation-iteration-count: infinite;
  177.             -moz-animation-timing-function: linear;
  179.             transition: all 0.2s linear;
  180.             -webkit-transform: scale(2);
  181.             transform: scale(2);
  182.         }
  184.         button.loading:after {
  185.             opacity: 1;
  186.             left: 15px;
  187.         }
  189.         @-webkit-keyframes rotate {
  190.             from {
  191.                 -webkit-transform: rotate(0deg);
  192.             }
  193.             to {
  194.                 -webkit-transform: rotate(360deg);
  195.             }
  196.         }
  198.         @-moz-keyframes rotate {
  199.             from {
  200.                 -moz-transform: rotate(0deg);
  201.             }
  202.             to {
  203.                 -moz-transform: rotate(360deg);
  204.             }
  205.         }
  207.         * {
  208.             -webkit-box-sizing: border-box;
  209.             -moz-box-sizing: border-box;
  210.             box-sizing: border-box;
  211.         }
  213.         body {
  214.             background: #ededed;
  215.             font-family: Arial, sans-serif;
  216.         }
  218.         a {
  219.             color: #7f8c8d;
  220.         }
  222.         .form-container {
  223.             padding: 50px 40px;
  224.             background: #fff;
  225.             width: 400px;
  226.             text-align: center;
  227.             -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  228.             -moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  229.             box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  230.             margin: 0 auto;
  231.             -webkit-transition: all 1s linear;
  232.             -moz-transition: all 1s linear;
  233.             transition: all 1s linear;
  234.             position: absolute;
  235.             top: 50%;
  236.             left: 50%;
  237.             transform: translate(-50%, -50%);
  238.         }
  240.         .form-container:after {
  241.             content: "";
  242.             display: block;
  243.             position: absolute;
  244.             top: 0;
  245.             left: 0;
  246.             width: 100px;
  247.             height: 10px;
  248.             background: #e74c3c;
  249.             -webkit-box-shadow: 100px 0 0 #e67e22, 200px 0 0 #f1c40f, 300px 0 0 #1abc9c;
  250.             -moz-box-shadow: 100px 0 0 #e67e22, 200px 0 0 #f1c40f, 300px 0 0 #1abc9c;
  251.             box-shadow: 100px 0 0 #e67e22, 200px 0 0 #f1c40f, 300px 0 0 #1abc9c;
  252.         }
  254.         .done .login-form {
  255.             display: none;
  256.         }
  258.         .form-container .thank-msg {
  259.             display: none;
  260.         }
  262.         .done .thank-msg {
  263.             display: block;
  264.         }
  266.         .form-container h3 {
  267.             font-size: 32px;
  268.             text-align: center;
  269.             color: #666;
  270.             margin: 0 0 30px;
  271.         }
  273.         .form-container .login-form > div {
  274.             margin-bottom: 20px;
  275.         }
  277.         .form-container .login-form > div > input {
  278.             border: 2px solid #dedede;
  279.             padding: 20px;
  280.             font-size: 20px;
  281.             min-width: 300px;
  282.             color: #666;
  283.             -webkit-border-radius: 3px;
  284.             -moz-border-radius: 3px;
  285.             border-radius: 3px;
  286.             outline: none;
  287.             -webkit-transition: border-color 0.2s linear;
  288.             -moz-transition: border-color 0.2s linear;
  289.             transition: border-color 0.2s linear;
  290.         }
  292.         .form-container .login-form > div > input:focus {
  293.             border-color: #A5A5A5;
  294.         }
  296.         .page-container {
  297.             min-height: 500px;
  298.         }
  300.         .credits {
  301.             text-align: center;
  302.             color: #999;
  303.             padding: 10px;
  304.         }
  306.         tags-input .tags {
  307.             padding: 5px 10px;
  308.             background-color: #e3f1ff;
  309.             border: 1px solid #b5cdff;
  310.             border-radius: 0;
  311.             box-shadow: none;
  312.         }
  314.         tags-input .tags .tag-list {
  315.             display: flex;
  316.             flex-direction: column;
  317.         }
  319.         tags-input .tags .tag-item {
  320.             height: auto;
  321.             padding: 4px;
  322.             position: relative;
  323.         }
  325.         tags-input .tags .tag-item .remove-button {
  326.             height: max-content;
  327.             border: none;
  328.             color: #585858;
  329.             cursor: pointer;
  330.             font: 700 16px Arial, sans-serif;
  331.             margin: 0 0 0 5px;
  332.             padding: 0;
  333.             vertical-align: middle;
  334.             position: absolute;
  335.             right: 10px;
  336.             top: 0;
  337.             bottom: 0;
  338.             margin: auto;
  339.         }
  341.         tags-input .tags .input {
  342.             background-color: #e3f1ff;
  343.             border: none;
  344.             border-radius: 0;
  345.         }
  346.         
  347.     </style>
  348.     <div class="loader-container" id="loading-indicator-container" style="display: none">
  349.         <div class="lw-container">
  350.             <p class="text">please wait as we direct you to the payment page</p>
  351.             <div class="c-progress-bar">
  352.                 <svg height="8" width="400">
  353.                 <path id="path" d="M4 4 L394 4"></path>
  354.                 <path id="loader-line" d="M4 4 L394 4"></path>
  355.                 </svg>
  356.             </div>
  357.             <!-- <p class="counter" id="counter-txt">6</p> -->
  358.             <div class="btn-container">
  359.                 <button class="btn" style="display: none" id="inc-btn">INCREASE</button>
  360.                 <button class="btn" style="display: none" id="dec-btn">DECREASE</button>
  361.                 <button class="btn" style="display: none" id="complete-btn">COMPLETE</button>
  362.                 <button class="btn" style="display: none" id="reset-btn">RESET</button>
  363.                 <button class="btn" style="display: none" id="load-btn">LOAD</button>
  364.             </div>
  365.         </div>
  366.     </div>
  367.     <!-- Start Page Title Area -->
  368.     <div class="page-title-area mt-5" ng-app="orderApp">
  369.         
  370.         <div class="d-table">
  371.             <div class="d-table-cell">
  372.                 <div class="container">
  373.                     {% include 'order/partials/'~(current_sub_service.ProcessType | lower)~'.html.twig' %}
  374.                 </div>
  375.             </div>
  376.         </div>
  377.     </div>
  378.     <!-- End Page Title Area -->
  379. {% endblock %}
  381. {% block javascripts %}
  382.     {{ parent() }}
  383.     <script type="text/javascript">
  384.         var current_offer = {{ current_offer | json_encode() | raw }};
  385.         var current_sub_service = {{ current_sub_service | json_encode() | raw }};
  387.         // Instagram api urls
  388.         var load_ig_media_url = "{{ path('load_instagram_posts')|escape('js') }}";
  389.         var load_ig_profile_url = "{{ path('load_instagram_profile')|escape('js') }}";
  390.         var load_ig_reel_url = "{{ path('load_instagram_reel')|escape('js') }}";
  392.         // TikTok api urls
  393.         var load_tiktok_profile_url = "{{ path('load_tiktok_profile')|escape('js') }}";
  394.         var load_tiktok_media_url = "{{ path('load_tiktok_posts')|escape('js') }}";
  396.         // Order api urls 
  397.         var add_order_api_url = "{{ path('add_order')|escape('js') }}";
  399.     </script>
  400.     {{ encore_entry_script_tags('order') }}
  401. {% endblock %}