templates/Karaoke/cliente/index.html.twig line 1

Open in your IDE?
  1. {#
  2.     <img src="{{ asset('assets/img/Dic_logoPNG.png') }}" class="img-fluid" width="2%" alt="logoDic" style="margin-top: -5px;"/>
  3. #}
  5. <!DOCTYPE html>
  6. <html lang="en">
  7.     <head>
  8.         <meta charset="UTF-8"/>
  9.         <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  10.         <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  11.         <title>Cancionero</title>
  12.         <style>
  13.         #particles-js{
  14.             position: fixed;
  15.             width: 100%;
  16.             height: 100vh;
  17.             z-index: -1;
  18.                         left: 10px
  19.         }
  20.     </style>
  21.         <!-- Bootstrap-->
  22.         <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous"/>
  23.         <!-- DataTable -->
  24.         <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css"/>
  25.         <!-- Font Awesome -->
  26.         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
  27.     </head>
  28.     <body>
  29.         <div class="container my-4">
  30.         <div id="particles-js"></div>
  31.             <div class="row justify-content-center">
  32.                 <div class="col-8">
  33.                     
  34.                     <img src="{{ asset('assets/img/heroCancionero.png') }}" class="img-fluid"/>
  35.                     <div class="d-flex align-items-center text-primary" id="loadingTable" style="color: #ff5000 !important;">
  36.                         <strong>Cargando...</strong>
  37.                         <div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
  38.                     </div>
  39.                     <table id="datatable_users" class="table table-striped" style="display: none;">
  40.                         <thead>
  41.                             <tr>
  42.                                 <th class="centered">Código</th>
  43.                                 <th class="centered">Nombre Canción</th>
  44.                                 <th class="centered">Género</th>
  45.                                 <th class="centered">Autor</th>
  46.                             </tr>
  47.                         </thead>
  48.                         <tbody id="tableBody_users"></tbody>
  49.                     </table>
  50.                 </div>
  51.             </div>
  52.         </div>
  53.         <!-- Bootstrap-->
  54.         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  55.         <!-- jQuery -->
  56.         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  57.         <!-- DataTable -->
  58.         <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
  59.         <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
  60.         {# Particles #}
  61.         <script type="text/javascript" src="{{ asset('assets/js/particles.min.js') }}"></script>
  62.         <!-- Custom JS -->
  63.         <script src="{{ asset('assets/js/karaoke/cliente/cancionero.js') }}"></script>
  64.         <script>
  65.         particlesJS(
  66.             {
  67.                 "particles": {
  68.                     "number": {
  69.                         "value": 85,
  70.                         "density": {
  71.                             "enable": true,
  72.                             "value_area": 800
  73.                         }
  74.                     },
  75.                     "color": {
  76.                         "value": "#ff5000"
  77.                     },
  78.                     "shape": {
  79.                         "type": "circle",
  80.                         "stroke": {
  81.                             "width": 0,
  82.                             "color": "#ff5000"
  83.                         },
  84.                         "polygon": {
  85.                             "nb_sides": 5
  86.                         },
  87.                         "image": {
  88.                             "src": "img/github.svg",
  89.                             "width": 100,
  90.                             "height": 100
  91.                         }
  92.                     },
  93.                     "opacity": {
  94.                         "value": 0.5,
  95.                         "random": false,
  96.                         "anim": {
  97.                             "enable": false,
  98.                             "speed": 1,
  99.                             "opacity_min": 0.1,
  100.                             "sync": false
  101.                         }
  102.                     },
  103.                     "size": {
  104.                         "value": 3,
  105.                         "random": true,
  106.                         "anim": {
  107.                             "enable": false,
  108.                             "speed": 40,
  109.                             "size_min": 0.1,
  110.                             "sync": false
  111.                         }
  112.                     },
  113.                     "line_linked": {
  114.                         "enable": true,
  115.                         "distance": 150,
  116.                         "color": "#ff5000",
  117.                         "opacity": 0.4,
  118.                         "width": 1
  119.                     },
  120.                     "move": {
  121.                         "enable": true,
  122.                         "speed": 11.22388442605866,
  123.                         "direction": "none",
  124.                         "random": false,
  125.                         "straight": false,
  126.                         "out_mode": "out",
  127.                         "bounce": false,
  128.                         "attract": {
  129.                             "enable": false,
  130.                             "rotateX": 600,
  131.                             "rotateY": 1200
  132.                         }
  133.                     }
  134.                 },
  135.                 "interactivity": {
  136.                     "detect_on": "canvas",
  137.                     "events": {
  138.                         "onhover": {
  139.                             "enable": false,
  140.                             "mode": "repulse"
  141.                         },
  142.                         "onclick": {
  143.                             "enable": true,
  144.                             "mode": "push"
  145.                         },
  146.                         "resize": true
  147.                     },
  148.                     "modes": {
  149.                         "grab": {
  150.                             "distance": 400,
  151.                             "line_linked": {
  152.                                 "opacity": 1
  153.                             }
  154.                         },
  155.                         "bubble": {
  156.                             "distance": 400,
  157.                             "size": 40,
  158.                             "duration": 2,
  159.                             "opacity": 8,
  160.                             "speed": 3
  161.                         },
  162.                         "repulse": {
  163.                             "distance": 200,
  164.                             "duration": 0.4
  165.                         },
  166.                         "push": {
  167.                             "particles_nb": 4
  168.                         },
  169.                         "remove": {
  170.                             "particles_nb": 2
  171.                         }
  172.                     }
  173.                 },
  174.                 "retina_detect": true
  175.             }
  176.         )
  177.     </script>
  178.     </body>
  179. </html>