templates/switcher/index.html.twig line 1

Open in your IDE?
  1. {% extends 'switcher-base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Switcher</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Pages</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">Switcher</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                              <!--ROW-->
  20.                              <div class="container">
  21.                                 <div class="row row-sm">
  22.                                     <div class="col-xl-5 m-auto">
  23.                                         <div class="card sidebar-right1"><div class="switcher-wrapper">
  24.                                             <div class="card-body p-0">
  25.                                                 <div class="form_holder sidebar-right1 p-5">
  26.                                                     <div class="row">
  27.                                                         <div class="predefined_styles">
  28.                                                             <div class="swichermainleft mb-5">
  29.                                                                 <h6>Navigation Style</h6>
  30.                                                                 <div class="skin-body">
  31.                                                                     <div class="switch_section ps-2">
  32.                                                                         <div class="switch-toggle d-flex">
  33.                                                                             <span class="me-auto">Vertical Menu</span>
  34.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch15"
  35.                                                                                     id="myonoffswitch34" class="onoffswitch2-checkbox" checked>
  36.                                                                                 <label for="myonoffswitch34" class="onoffswitch2-label"></label>
  37.                                                                             </p>
  38.                                                                         </div>
  39.                                                                         <div class="switch-toggle d-flex mt-2">
  40.                                                                             <span class="me-auto">Horizontal Click Menu</span>
  41.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch15"
  42.                                                                                     id="myonoffswitch35" class="onoffswitch2-checkbox">
  43.                                                                                 <label for="myonoffswitch35" class="onoffswitch2-label"></label>
  44.                                                                             </p>
  45.                                                                         </div>
  46.                                                                         <div class="switch-toggle d-flex mt-2">
  47.                                                                             <span class="me-auto">Horizontal Hover Menu</span>
  48.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch15"
  49.                                                                                     id="myonoffswitch111" class="onoffswitch2-checkbox">
  50.                                                                                 <label for="myonoffswitch111" class="onoffswitch2-label"></label>
  51.                                                                             </p>
  52.                                                                         </div>
  53.                                                                     </div>
  54.                                                                 </div>
  55.                                                             </div>
  56.                                                             <div class="swichermainleft mb-5">
  57.                                                                 <h5>LTR and RTL VERSIONS</h5>
  58.                                                                 <div class="skin-body">
  59.                                                                     <div class="switch_section ps-2">
  60.                                                                         <div class="switch-toggle d-flex">
  61.                                                                             <span class="me-auto">LTR Version</span>
  62.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch7"
  63.                                                                                     id="myonoffswitch23" class="onoffswitch2-checkbox" checked>
  64.                                                                                 <label for="myonoffswitch23" class="onoffswitch2-label"></label>
  65.                                                                             </p>
  66.                                                                         </div>
  67.                                                                         <div class="switch-toggle d-flex mt-2">
  68.                                                                             <span class="me-auto">RTL Version</span>
  69.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch7"
  70.                                                                                     id="myonoffswitch24" class="onoffswitch2-checkbox">
  71.                                                                                 <label for="myonoffswitch24" class="onoffswitch2-label"></label>
  72.                                                                             </p>
  73.                                                                         </div>
  74.                                                                     </div>
  75.                                                                 </div>
  76.                                                             </div>
  77.                                                             <div class="swichermainleft mb-5">
  78.                                                                 <h5>Light Theme Style</h5>
  79.                                                                 <div class="skin-body">
  80.                                                                     <div class="switch_section ps-2">
  81.                                                                         <div class="switch-toggle d-flex">
  82.                                                                             <span class="me-auto">Light Theme</span>
  83.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch1"
  84.                                                                                     id="myonoffswitch1" class="onoffswitch2-checkbox" checked>
  85.                                                                                 <label for="myonoffswitch1" class="onoffswitch2-label"></label>
  86.                                                                             </p>
  87.                                                                         </div>
  88.                                                                         <div class="switch-toggle d-flex">
  89.                                                                             <span class="me-auto">Light Primary</span>
  90.                                                                             <div class="">
  91.                                                                                 <input class="wpx-30 h-30 input-color-picker color-primary-light"
  92.                                                                                     value="#8FBD56" id="colorID" (change)="changePrimaryColor()" type="color"
  93.                                                                                     data-id="bg-color" data-id1="bg-hover" data-id2="bg-border"
  94.                                                                                     data-id7="transparentcolor" name="lightPrimary">
  95.                                                                             </div>
  96.                                                                         </div>
  97.                                                                     </div>
  98.                                                                 </div>
  99.                                                             </div>
  100.                                                             <div class="swichermainleft mb-5">
  101.                                                                 <h5>Dark Theme Style</h5>
  102.                                                                 <div class="skin-body">
  103.                                                                     <div class="switch_section ps-2">
  104.                                                                         <div class="switch-toggle d-flex mt-2">
  105.                                                                             <span class="me-auto">Dark Theme</span>
  106.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch1"
  107.                                                                                     id="myonoffswitch2" class="onoffswitch2-checkbox">
  108.                                                                                 <label for="myonoffswitch2" class="onoffswitch2-label"></label>
  109.                                                                             </p>
  110.                                                                         </div>
  111.                                                                         <div class="switch-toggle d-flex mt-2">
  112.                                                                             <span class="me-auto">Dark Primary</span>
  113.                                                                             <div class="">
  114.                                                                                 <input class="wpx-30 h-30 input-dark-color-picker color-primary-dark"
  115.                                                                                     value="#8FBD56" id="darkPrimaryColorID" (input)="darkPrimaryColor()"
  116.                                                                                     type="color" data-id="bg-color" data-id1="bg-hover" data-id2="bg-border"
  117.                                                                                     data-id3="primary" data-id8="transparentcolor" name="darkPrimary">
  118.                                                                             </div>
  119.                                                                         </div>
  120.                                                                         <div class="switch-toggle d-flex mt-2">
  121.                                                                             <span class="me-auto">Dark Custom Background</span>
  122.                                                                             <div class="">
  123.                                                                                 <input class="wpx-30 h-30 input-transparent-color-picker color-bg-transparent"
  124.                                                                                     value="#8FBD56" id="transparentBgColorID" 
  125.                                                                                     type="color" data-id5="body" data-id6="boxed-theme" name="transparentBackground">
  126.                                                                             </div>
  127.                                                                         </div>
  128.                                                                         <div class="switch-toggle">
  129.                                                                             <span class="">Background Image</span>
  130.                                                                             <div class="mt-1 d-flex">
  131.                                                                                 <a class="bg-img1 me-2 bg-img" href="javascript:void(0);" (click)="bgImage(this)"><img
  132.                                                                                         class="br-5" src="{{absolute_url(asset('build/images/media/bg-img1.jpg'))}}" alt="Bg-Image" id="bgimage1"></a>
  133.                                                                                 <a class="bg-img2 me-2 bg-img" href="javascript:void(0);" (click)="bgImage(this)"><img
  134.                                                                                         class="br-5" src="{{absolute_url(asset('build/images/media/bg-img2.jpg'))}}" alt="Bg-Image" id="bgimage2"></a>
  135.                                                                                 <a class="bg-img3 me-2 bg-img" href="javascript:void(0);" (click)="bgImage(this)"><img
  136.                                                                                         class="br-5" src="{{absolute_url(asset('build/images/media/bg-img3.jpg'))}}" alt="Bg-Image" id="bgimage3"></a>
  137.                                                                                 <a class="bg-img4 me-2 bg-img" href="javascript:void(0);" (click)="bgImage(this)"><img
  138.                                                                                         class="br-5" src="{{absolute_url(asset('build/images/media/bg-img4.jpg'))}}" alt="Bg-Image" id="bgimage4"></a>
  139.                                                                             </div>
  140.                                                                         </div>
  141.                                                                     </div>
  142.                                                                 </div>
  143.                                                             </div>
  144.                                                             <div class="swichermainleft mb-5 menu-styles">
  145.                                                                 <h5>Menu Styles</h5>
  146.                                                                 <div class="skin-body">
  147.                                                                     <div class="switch_section ps-2">
  148.                                                                         <div class="switch-toggle lightMenu d-flex">
  149.                                                                             <span class="me-auto">Light Menu</span>
  150.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch2"
  151.                                                                                     id="myonoffswitch3" class="onoffswitch2-checkbox">
  152.                                                                                 <label for="myonoffswitch3" class="onoffswitch2-label"></label>
  153.                                                                             </p>
  154.                                                                         </div>
  155.                                                                         <div class="switch-toggle colorMenu d-flex mt-2">
  156.                                                                             <span class="me-auto">Color Menu</span>
  157.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch2"
  158.                                                                                     id="myonoffswitch4" class="onoffswitch2-checkbox">
  159.                                                                                 <label for="myonoffswitch4" class="onoffswitch2-label"></label>
  160.                                                                             </p>
  161.                                                                         </div>
  162.                                                                         <div class="switch-toggle darkMenu d-flex mt-2">
  163.                                                                             <span class="me-auto">Dark Menu</span>
  164.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch2"
  165.                                                                                     id="myonoffswitch5" class="onoffswitch2-checkbox">
  166.                                                                                 <label for="myonoffswitch5" class="onoffswitch2-label"></label>
  167.                                                                             </p>
  168.                                                                         </div>
  169.                                                                         <div class="switch-toggle gradientMenu d-flex mt-2">
  170.                                                                             <span class="me-auto">Gradient Menu</span>
  171.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch2"
  172.                                                                                     id="myonoffswitch19" class="onoffswitch2-checkbox">
  173.                                                                                 <label for="myonoffswitch19" class="onoffswitch2-label"></label>
  174.                                                                             </p>
  175.                                                                         </div>
  176.                                                                     </div>
  177.                                                                 </div>
  178.                                                             </div>
  179.                                                             <div class="swichermainleft mb-5 header-styles">
  180.                                                                 <h5>Header Styles</h5>
  181.                                                                 <div class="skin-body">
  182.                                                                     <div class="switch_section ps-2">
  183.                                                                         <div class="switch-toggle lightHeader d-flex">
  184.                                                                             <span class="me-auto">Light Header</span>
  185.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch3"
  186.                                                                                     id="myonoffswitch6" class="onoffswitch2-checkbox">
  187.                                                                                 <label for="myonoffswitch6" class="onoffswitch2-label"></label>
  188.                                                                             </p>
  189.                                                                         </div>
  190.                                                                         <div class="switch-toggle  colorHeader d-flex mt-2">
  191.                                                                             <span class="me-auto">Color Header</span>
  192.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch3"
  193.                                                                                     id="myonoffswitch7" class="onoffswitch2-checkbox">
  194.                                                                                 <label for="myonoffswitch7" class="onoffswitch2-label"></label>
  195.                                                                             </p>
  196.                                                                         </div>
  197.                                                                         <div class="switch-toggle darkHeader d-flex mt-2">
  198.                                                                             <span class="me-auto">Dark Header</span>
  199.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch3"
  200.                                                                                     id="myonoffswitch8" class="onoffswitch2-checkbox">
  201.                                                                                 <label for="myonoffswitch8" class="onoffswitch2-label"></label>
  202.                                                                             </p>
  203.                                                                         </div>
  205.                                                                         <div class="switch-toggle darkHeader d-flex mt-2">
  206.                                                                             <span class="me-auto">Gradient Header</span>
  207.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch3"
  208.                                                                                     id="myonoffswitch20" class="onoffswitch2-checkbox">
  209.                                                                                 <label for="myonoffswitch20" class="onoffswitch2-label"></label>
  210.                                                                             </p>
  211.                                                                         </div>
  212.                                                                     </div>
  213.                                                                 </div>
  214.                                                             </div>
  215.                                                             <div class="swichermainleft mb-5">
  216.                                                                 <h5>Layout Width Styles</h5>
  217.                                                                 <div class="skin-body">
  218.                                                                     <div class="switch_section ps-2">
  219.                                                                         <div class="switch-toggle d-flex">
  220.                                                                             <span class="me-auto">Full Width</span>
  221.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch4"
  222.                                                                                     id="myonoffswitch9" class="onoffswitch2-checkbox" checked>
  223.                                                                                 <label for="myonoffswitch9" class="onoffswitch2-label"></label>
  224.                                                                             </p>
  225.                                                                         </div>
  226.                                                                         <div class="switch-toggle d-flex mt-2">
  227.                                                                             <span class="me-auto">Boxed</span>
  228.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch4"
  229.                                                                                     id="myonoffswitch10" class="onoffswitch2-checkbox">
  230.                                                                                 <label for="myonoffswitch10" class="onoffswitch2-label"></label>
  231.                                                                             </p>
  232.                                                                         </div>
  233.                                                                     </div>
  234.                                                                 </div>
  235.                                                             </div>
  236.                                                             <div class="swichermainleft mb-5">
  237.                                                                 <h5>Layout Positions</h5>
  238.                                                                 <div class="skin-body">
  239.                                                                     <div class="switch_section ps-2">
  240.                                                                         <div class="switch-toggle d-flex">
  241.                                                                             <span class="me-auto">Fixed</span>
  242.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch5"
  243.                                                                                     id="myonoffswitch11" class="onoffswitch2-checkbox" checked>
  244.                                                                                 <label for="myonoffswitch11" class="onoffswitch2-label"></label>
  245.                                                                             </p>
  246.                                                                         </div>
  247.                                                                         <div class="switch-toggle d-flex mt-2">
  248.                                                                             <span class="me-auto">Scrollable</span>
  249.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch5"
  250.                                                                                     id="myonoffswitch12" class="onoffswitch2-checkbox">
  251.                                                                                 <label for="myonoffswitch12" class="onoffswitch2-label"></label>
  252.                                                                             </p>
  253.                                                                         </div>
  254.                                                                     </div>
  255.                                                                 </div>
  256.                                                             </div>
  257.                                                             <div class="swichermainleft mb-5 leftmenu-styles">
  258.                                                                 <h5>Sidemenu layout Styles</h5>
  259.                                                                 <div class="skin-body">
  260.                                                                     <div class="switch_section ps-2">
  261.                                                                         <div class="switch-toggle d-flex">
  262.                                                                             <span class="me-auto">Default Menu</span>
  263.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch6"
  264.                                                                                     id="myonoffswitch13" class="onoffswitch2-checkbox default-menu" checked>
  265.                                                                                 <label for="myonoffswitch13" class="onoffswitch2-label"></label>
  266.                                                                             </p>
  267.                                                                         </div>
  268.                                                                         <div class="switch-toggle d-flex mt-2">
  269.                                                                             <span class="me-auto">Icon with Text</span>
  270.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch6"
  271.                                                                                     id="myonoffswitch14" class="onoffswitch2-checkbox">
  272.                                                                                 <label for="myonoffswitch14" class="onoffswitch2-label"></label>
  273.                                                                             </p>
  274.                                                                         </div>
  275.                                                                         <div class="switch-toggle d-flex mt-2">
  276.                                                                             <span class="me-auto">Icon Overlay</span>
  277.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch6"
  278.                                                                                     id="myonoffswitch15" class="onoffswitch2-checkbox">
  279.                                                                                 <label for="myonoffswitch15" class="onoffswitch2-label"></label>
  280.                                                                             </p>
  281.                                                                         </div>
  282.                                                                         <div class="switch-toggle d-flex mt-2">
  283.                                                                             <span class="me-auto">Closed Sidemenu</span>
  284.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch6"
  285.                                                                                     id="myonoffswitch16" class="onoffswitch2-checkbox">
  286.                                                                                 <label for="myonoffswitch16" class="onoffswitch2-label"></label>
  287.                                                                             </p>
  288.                                                                         </div>
  289.                                                                         <div class="switch-toggle d-flex mt-2">
  290.                                                                             <span class="me-auto">Hover Submenu</span>
  291.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch6"
  292.                                                                                     id="myonoffswitch17" class="onoffswitch2-checkbox">
  293.                                                                                 <label for="myonoffswitch17" class="onoffswitch2-label"></label>
  294.                                                                             </p>
  295.                                                                         </div>
  296.                                                                         <div class="switch-toggle d-flex mt-2">
  297.                                                                             <span class="me-auto">Hover Submenu Style 1</span>
  298.                                                                             <p class="onoffswitch2"><input type="radio" name="onoffswitch6"
  299.                                                                                     id="myonoffswitch18" class="onoffswitch2-checkbox">
  300.                                                                                 <label for="myonoffswitch18" class="onoffswitch2-label"></label>
  301.                                                                             </p>
  302.                                                                         </div>
  303.                                                                     </div>
  304.                                                                 </div>
  305.                                                             </div>
  306.                                                             <div class="swichermainleft mb-5">
  307.                                                                 <div class="skin-body">
  308.                                                                     <div class="switch_section my-4">
  309.                                                                         <button id="resetAll" class="btn btn-danger btn-block switcherclick" type="button">Reset All
  310.                                                                         </button>
  311.                                                                     </div>
  312.                                                                 </div>
  313.                                                             </div>
  314.                                                         </div>
  315.                                                     </div>
  316.                                                 </div>
  317.                                             </div>
  318.                                         </div>
  319.                                         </div>
  320.                                     </div>
  321.                                 </div>
  322.                             </div>
  323.                             <!--END ROW-->
  324. {% endblock %}
  325. {% block javascripts %}
  326.     {{parent()}} 
  327.         <!-- CUSTOM JS -->
  328.         {{ encore_entry_script_tags('js/custom1') }}
  330.         <!-- SWITCHER JS -->
  331.         {{ encore_entry_script_tags('switcher/switcher') }}
  332. {% endblock %}