src/Noahtech/Sistemas/FuszionBundle/Resources/views/public/home/inicio.html.twig line 1

Open in your IDE?
  1. {% extends '@NoahtechSistemasFuszion/Default/base_inicio.html.twig' %}
  2. {% block title %}
  3.     Consejo Medico Jujuy | Home
  4. {% endblock %}
  5. {% block stylesheets %}
  6.     <style>
  7.         .banner {
  8.             display: flex;
  9.             justify-content: space-between;
  10.             align-items: center;
  11.             background-color: #f2f2f2;
  12.             padding: 50px;
  13.             background-image: radial-gradient(circle farthest-corner at 45px 45px , #00bfff 50%, rgba(0, 0, 0, 0) 0%, #fff 50%);
  14.         }
  16.         .banner-text {
  17.         max-width: 50%;
  18.         text-align: left;
  19.         padding: 10px;
  20.         }
  22.         .banner-text h1 {
  23.         font-size: 3rem;
  24.         color: #fff;
  25.         }
  27.         .banner-text h2 {
  28.         font-size: 1.5rem;
  29.         color: #fff;
  30.         }
  32.         .btn {
  33.             padding: 10px 20px;
  34.             background-color: #2733a4;
  35.             color: #fff;
  36.             border: none;
  37.             border-radius: 5px;
  38.             cursor: pointer;
  39.             text-align: right;
  40.         }
  42.         .banner-img {
  43.         position: relative;
  44.         width: 50%;
  45.         }
  47.         .banner-img img {
  48.         width: 100%;
  49.         }
  51.         .circle {
  52.         position: absolute;
  53.         top: 50%;
  54.         right: 0%;
  55.         transform: translateY(-50%);
  56.         width: 200px;
  57.         height: 200px;
  58.         background-color: #00bfff;
  59.         border-radius: 50%;
  60.         display: flex;
  61.         justify-content: center;
  62.         align-items: center;
  63.         text-align: center;
  64.         color: #fff;
  65.         }
  67.         .circle p {
  68.         font-size: 1.5rem;
  69.         font-weight: bold;
  70.         }
  72.         @media screen and (max-width: 1000px) {
  73.             .banner-img {
  74.                 visibility: hidden;
  75.                 display: none;
  76.             }
  77.         }
  79.         @media screen and (max-width: 1000px) {
  80.             .banner-text {
  81.                 max-width: 100%;
  82.                 text-align: center;
  83.                 background-color: #00bfff;
  84.             }
  85.         }
  87.         @media screen and (max-width: 1000px) {
  88.             .banner {
  89.                 background-image: none;
  90.             }
  91.         }
  93.         /*css precios*/
  95.         .preCaption {
  96.             text-align: left;
  97.         }
  98.         .preInput {
  99.             font-family: 'SF-Pro-Text';
  100.             font-weight: bold;
  101.             font-size: 25px;
  102.             border: none;
  103.             background: transparent;
  104.             color: #27a9e3;
  106.         }
  107.         .preSpan {
  108.             font-weight: bold;
  109.             font-size: 25px;
  110.             border: none;
  111.             color: #2733a4;
  112.             background: transparent;
  113.         }
  114.         .preP {
  115.             font-family: 'SF-Pro-Text';
  116.             font-weight: bold;
  117.             font-size: 25px;
  118.             border: none;
  119.             color: #1f1f20;
  120.             background: transparent;
  121.             text-align: left;
  122.             padding-left: 7rem;
  123.             margin-block-start: 0px;
  124.         }
  126.         .titulo {
  127.             color: #2733a4;
  128.             font-weight: 900;
  129.             font-size: 3.25rem;
  130.         }
  131.         .subtitulo {
  132.             color: #27a9e3;
  133.             font-weight: 900;
  134.         }
  136.         @media (max-width: 1240px) {
  137.             .informacion {
  138.                 display: none;
  139.             }
  140.             .titulo {
  141.                 font-size: 1.25rem;
  142.             }
  143.             .titulo1 {
  144.                 font-size: 1.25rem;
  145.             }
  146.             .subtitulo {
  147.                 font-size: 1.25rem;
  148.             }
  149.             .preSpan {
  150.                 font-size: 1.25rem;
  151.             }
  152.         }
  154.         @media (max-width: 900px) {
  155.             .informacion {
  156.                 display: none;
  157.             }
  158.             .titulo {
  159.                 font-size: 0.70rem;
  160.             }
  161.             .titulo1 {
  162.                  font-size: 0.70rem;
  163.             }
  164.             .subtitulo {
  165.                  font-size: 0.70rem;
  166.             }
  167.             .preSpan {
  168.                  font-size: 0.70rem;
  169.             }
  170.         }
  172.         @media (max-width: 500px) {
  173.             .informacion {
  174.                 display: none;
  175.             }
  176.             .titulo {
  177.                 display: none;
  178.             }
  179.             .titulo1 {
  180.                 font-size: 10px;
  181.             }
  182.             .subtitulo {
  183.                 font-size: 10px;
  184.             }
  185.             .subtitulo1 {
  186.                 margin-bottom: -16px;
  187.             }
  188.             .preSpan {
  189.                 display: none;
  190.             }
  191.         }
  193.         .titulo1 {
  194.             color: #2733a4;
  195.             font-weight: 900;
  196.         }
  198.     </style>
  199. {% endblock %}
  200. {% block header %}
  201.     {% include '@NoahtechSistemasFuszion/Default/header.html.twig' %}
  202. {% endblock %}
  203. {% block body %}
  204.     <section data-ng-controller="InicioController" data-ng-init="initInicio({{ title|json_encode() }}, {{ data|json_encode() }}, {{ precio|json_encode() }});" >
  205.     {# Sección Slider #}
  206.         <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
  207.         
  208.             <div class="carousel-inner"> 
  209.               <div class="carousel-item">
  210.                     <img src="{{asset('uploads/images/sliders/jerarquizacion.png')}}" class="d-block w-100" alt="...">
  211.                 </div>
  212.                   <div class="carousel-item">
  213.                     <img src="{{asset('uploads/images/sliders/jerarquizacion2.png')}}" class="d-block w-100" alt="...">
  214.                 </div>
  215.                   <div class="carousel-item">
  216.                     <img src="{{asset('uploads/images/sliders/prenatal.png')}}" class="d-block w-100" alt="...">
  217.                 </div>
  218.                <div class="carousel-item">
  219.                     <img src="{{asset('uploads/images/sliders/especialista.png')}}" class="d-block w-100" alt="...">
  220.                 </div>
  221.                 <div class="carousel-item">
  222.                     <img src="{{asset('uploads/images/sliders/diagnostico.png')}}" class="d-block w-100" alt="...">
  223.                 </div>
  224.                 <div class="carousel-item">
  225.                     <img src="{{asset('uploads/images/sliders/trabajos.png')}}" class="d-block w-100" alt="...">
  226.                 </div>
  227.                 <div class="carousel-item">
  228.                   <a href="{{ asset('uploads/pdf/xelion.pdf') }}" download="xelion.pdf">
  229.                     <img src="{{asset('uploads/images/sliders/xelion.png')}}" class="d-block w-100" alt="...">
  230.                   </a>
  231.                 </div>
  232.                   <div class="carousel-item">
  233.                   <a href="{{ asset('uploads/pdf/receta.pdf') }}" download="receta.pdf">
  234.                     <img src="{{asset('uploads/images/sliders/receta.png')}}" class="d-block w-100" alt="...">
  235.                   </a>
  236.                 </div>
  237.                 <div class="carousel-item">
  238.                     <img src="{{asset('uploads/images/sliders/confemel.png')}}" class="d-block w-100" alt="...">
  239.                 </div>
  240.                 <div class="carousel-item">
  241.                     <img src="{{asset('uploads/images/sliders/comunicado.png')}}" class="d-block w-100" alt="...">
  242.                 </div>
  243.                 <div class="carousel-item"> 
  244.                     <a href="{{ asset('uploads/pdf/comunicado13.pdf') }}" target="_blank" rel="noopener noreferrer">
  245.                         <img src="{{asset('uploads/images/sliders/cofemecoRechazo.png')}}" class="d-block w-100" alt="...">
  246.                     </a>
  247.                 </div>
  248.               
  249.                 <div class="carousel-item">
  250.                     <img src="{{asset('uploads/images/sliders/sliderfilmacion.jpg')}}" class="d-block w-100" alt="...">
  251.                 </div>
  252.             
  253.                 <div class="carousel-item">
  254.                     <img src="{{asset('uploads/images/sliders/slider11.png')}}" class="d-block w-100" alt="...">
  255.                 </div>
  256.                 <div class="carousel-item active">
  257.                     <img src="{{asset('uploads/images/sliders/slider01.png')}}" class="d-block w-100" alt="...">
  258.                         <div class="carousel-caption preCaption">
  259.                             <div class="row informacion1">
  260.                                 <div class="col-md-6">
  261.                                     <h1 class="titulo">Consejo de Médicos de la provincia de Jujuy</h1>
  262.                                     <br/>
  263.                                     <h3 class="subtitulo">Ley 4177/86</h3>
  264.                                     <h3 class="subtitulo subtitulo1">Arancel mínimo referencial sugerido<br>De consultas médicas en consultorio:</h3>
  265.                                     <br/>
  266.                                     <h3 class="titulo1">NO ESPECIALISTAS ${[{no_especialistas}]}</h3>
  267.                                     <h3 class="titulo1">ESPECIALISTAS ${[{especialistas}]}</h3>
  268.                                     <div>
  269.                                         <span class="preSpan">Aprobado en resolucion N° {[{resolucion}]}</span><br>
  270.                                         <span class="preSpan">De fecha {[{fecha | date: 'dd/MM/yyyy'}]}</span>
  271.                                     </div>
  272.                                     {% if precio[0].archivo %}
  273.                                         <a href="{{ asset('uploads/files/precios/pdf/' ~ precio[0].archivo) }}" target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="margin-right: 10px;">
  274.                                             Descargar
  275.                                         </a>
  276.                                     {% endif %}
  277.                                 </div>
  278.                                 <div class="col-md-6 informacion">
  279.                                     <p class="preP">
  280.                                         Se encuentra prohibido grabar, filmar o tomar fotografías de la consulta médica por cualquier dispositivo electrónico y/o digital.
  281.                                         A fin de resguardar la privacidad, confidencialidad e intimidad de los pacientes.
  282.                                         Ley 26.529 y ley 25.326
  283.                                         Evite inconvenientes
  284.                                     </p>
  285.                                 </div>
  286.                             </div>
  287.                         </div>
  288.                 </div>
  289.            
  290.                 <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
  291.                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  292.                     <span class="visually-hidden">Previous</span>
  293.                 </button>
  294.                 <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
  295.                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
  296.                     <span class="visually-hidden">Next</span>
  297.                 </button>
  298.             </div>
  299.         </div>
  301.        
  302.        
  303.         <br>
  304.         <br>
  305.         {# Sección Slider cursos #}
  306.         <div class="row" data-ng-if="cursos.length > 0">
  307.             <div class="col-md-12" style="background-color: #00aef0; height: 100px; display: flex; justify-content: space-between; align-items: center;">
  308.                 <h1 style="text-align: center; color: white; margin: 0; flex-grow: 1;">Nuestros Cursos</h1>
  309.                 <a href="{{ path('public_registrar_alumno') }}" class="btn btn-primary" style="margin-right: 10px;">Registrarme</a>
  310.             </div>
  311.             <div class="col-md-12">
  312.                 <br>
  313.                 <div id="carouselExampleCaptions" class="carousel carousel-dark slide" data-bs-ride="carousel">
  314.                     <div class="carousel-inner">
  315.                         <div class="carousel-item" data-ng-repeat="curso in cursos" data-ng-class="{active: $first}" >
  316.                             <div class="row">
  317.                                 <div class="col-md-12">
  318.                                     <div class="banner">
  319.                                         <div class="banner-text">
  320.                                             <h1>Aprende en línea con nosotros</h1>
  321.                                             <br>
  322.                                             <h2><strong>Curso:</strong> {[{curso.nombre}]}</h2>
  323.                                             <h2><strong>Descripción:</strong> {[{curso.nombre}]}</h2>
  324.                                             <h2><strong>Dirigido:</strong> {[{curso.dirigido}]}</h2>
  325.                                             <h2><strong>Fecha de inicio:</strong> {[{curso.fecha_inicio | date: 'dd-MM-yyyy'}]}</h2>
  326.                                             <h2><strong>Precio:</strong> Consultar en el Consejo Médico</h2>
  327.                                             <br>
  328.                                             <h2><strong>Modalidad:</strong> {[{curso.modalidad}]}</h2>
  329.                                             <br>
  330.                                             {# <a class="btn btn-lg" href="{{ path('login') }}">Inscríbete</a> #}
  331.                                         </div>
  332.                                         <div class="banner-img">
  333.                                             <div class="circle">
  334.                                                 <p>Actualiza tus habilidades!</p>
  335.                                             </div>
  336.                                             <a href="{[{'public/cursos/detalle/'+curso.id}]}"><img data-ng-src="{[{curso.urlFoto}]}" alt="{[{curso.nombre}]}" ></a>
  337.                                         </div>
  338.                                     </div>
  339.                                 </div>
  340.                             </div>
  341.                         </div>
  342.                     </div>
  343.                     <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
  344.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  345.                         <span class="visually-hidden">Previous</span>
  346.                     </button>
  347.                     <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
  348.                         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  349.                         <span class="visually-hidden">Next</span>
  350.                     </button>
  351.                 </div>
  352.             </div>
  353.         </div>
  354.         {# Fin seccion de cursos #}
  355.         <br>
  356.         <br>
  357.         <a href="{{ path('public_residencias',{id: 24}) }}">
  358.             <img src="{{asset('uploads/images/sliders/residencias.PNG')}}" alt="Residencias Médicas" style="width:100%; max-width:100%; height:auto;">
  359.         </a>
  360.         <br><br><br>
  361.     {# Fin Sección Slider #}
  362.     {# Sección de imagenes #}
  363.         <div class="row" style="text-align: center;">
  364.             <div class="col-xs-12 col-sm-12 col-md-4">
  365.                 <div class="card">
  366.                  {#   <a href="{{ path('public_noticias',{id: 24}) }}"> #}
  367.                 <a href="{{ path('public_cursos',{id: 24}) }}">
  368.                     <img src="{{asset('uploads/images/assets/images/3.png')}}" alt="..." width="300" height="300">
  369.                     <div class="card-body">
  370.                         <p class="card-text" style="color: #6ec1e4; font-size: 20px;"><b>Cursos y Capacitaciones</b></p>
  371.                     </div>
  372.                 </a>                    
  373.                 </div>
  374.             </div>
  375.             <div class="col-xs-12 col-sm-12 col-md-4">
  376.                 <div class="card">
  377.                 <a href="{{ path('public_cursos',{id: 24}) }}">
  378.                     {# <li><a class="dropdown-item" href="{{ path('public_cursos',{id: 24}) }}">Cursos y Capacitaciones</a></li> #}
  379.                     <img src="{{asset('uploads/images/assets/images/1.png')}}" alt="..." width="300" height="300">
  380.                     <div class="card-body">
  381.                         <p class="card-text" style="color: #6ec1e4; font-size: 20px;"><b>Plataforma Virtual</b></p>
  382.                     </div>
  383.                 </a>                    
  384.                 </div>
  385.             </div>
  386.             <div class="col-xs-12 col-sm-12 col-md-4">
  387.                 <div class="card">
  388.                     <a href="{{ path('public_noticias_para_medicos',{id: 24}) }}">
  389.                         <img src="{{asset('uploads/images/assets/images/4.png')}}" alt="..." width="300" height="300">
  390.                         <div class="card-body">
  391.                             <p class="card-text" style="color: #6ec1e4; font-size: 20px;"><b>Noticias para Médicos</b></p>
  392.                         </div>
  393.                     </a>                    
  394.                 </div>
  395.             </div>
  396.         </div>
  397.         <div class="row" style="text-align: center;">
  398.             <div class="col-xs-12 col-sm-12 col-md-4">
  399.                 <div class="card">
  400.                     <a href="{{ path('public_arte_de_curar',{id: 24}) }}">
  401.                         <img src="{{asset('uploads/images/assets/images/5.jpeg')}}" alt="..." width="300" height="300">
  402.                         <div class="card-body">
  403.                             <p class="card-text" style="color: #6ec1e4; font-size: 20px;"><b>El Arte de Curar</b></p>
  404.                         </div>
  405.                     </a>                    
  406.                 </div>
  407.             </div>
  408.             <div class="col-xs-12 col-sm-12 col-md-4">
  409.                 <div class="card">
  410.                 <a href="{{ path('public_autoridades',{id: 1}) }}">
  411.                     <img src="{{asset('uploads/images/assets/images/2.png')}}" alt="..." width="300" height="300">
  412.                     <div class="card-body">
  413.                         <p class="card-text" style="color: #6ec1e4; font-size: 20px;"><b>Autoridades del Consejo Médico</b></p>
  414.                     </div>
  415.                 </a>                    
  416.                 </div>
  417.             </div>
  418.             <div class="col-xs-12 col-sm-12 col-md-4">
  419.                 <div class="card">
  420.                 <a href="{{ path('public_confemeco',{id: 12}) }}">
  421.                     <img src="{{asset('uploads/images/assets/images/confemeco2.jpeg')}}" alt="..." width="300" height="300">
  422.                     <div class="card-body">
  423.                         <p class="card-text" style="color: #6ec1e4; font-size: 20px;"><b>Noticias y Capacitaciones CONFEMECO</b></p>
  424.                     </div>
  425.                 </a>                    
  426.                 </div>
  427.             </div>
  428.         </div>
  429.         {# Fin  seccion de imagenes #}
  430.     {# Seccion busca tu médico #}
  431.     <div class="row" style="text-align: center;">
  432.         <div class="col-xs-12 col-sm-12 col-md-4">
  433.             <img src="{{ asset('uploads/images/assets/images/7.png') }}" alt="" width="300" height="400"></img>
  434.         </div>
  435.         <div class="col-xs-12 col-sm-12 col-md-8" style="padding: 2%;">
  436.             <div style="margin-right: 60%;">
  437.                 <div style="border: 2px solid #6CE55B;"></div>
  438.             </div>            
  439.             <div style="text-align: center; padding-top: 3%;">
  440.                 <a href="{{ path('public_medicos_listado') }}" class="btn btnBuscaMedico"><b>Busca a tu Médico</b></a>
  441.             </div>
  442.             <div style="width: 100%; padding: 3%;">
  443.                 <hr style="color: #6CE55B; height: 2px;">                
  444.             </div>
  445.             <div style="text-align: center; padding-bottom: 3%;">
  446.                 <a href="{{ path('public_medicos_listado') }}" class="btn btnBuscaMedico"><b>Por especialidad</b></a>
  447.             </div>
  448.             <div style="margin-left: 60%;">
  449.             <div style="border: 2px solid #6CE55B;"></div>
  450.         </div>
  451.     </div>
  452.     {# Fin Seccion busca tu médico #}    
  453.     {# Seccion sabias que? #}
  454.     <div class="row" style="text-align: center;">
  455.         <div class="col-xs-12 col-sm-12 col-md-12" style="background-color:grey;">
  456.             <div class="card" style="background-color:grey; margin: 20px !important;">
  457.                 <div class="card-body" style="color:white;">
  458.                     <h2>Los consejos de Esculapio</h2>
  459.                     <p style="font-size: 25px;">¿Quieres ser médico, hijo mío? Aspiración es esta de un alma generosa, de un espíritu ávido de ciencia. Deseas que los hombres te tengan por un dios que alivia sus males y ahuyenta de ellos el temor. Pero ¿has pensado en lo que va a ser tu vida?. Tendrás que renunciar a la vida privada: mientras la mayoría de los ciudadanos pueden, terminada su tarea, aislarse lejos de los inoportunos, tu puerta estará siempre abierta a todos. A toda hora del día y de la noche vendrán a turbar tu descanso, tus aficiones, tu meditación; ya no tendrás horas que…</p>
  460.                     <a href="#" class="btn btn-default makebooking">Mas...</a>
  461.                 </div>
  462.             </div>
  463.         </div>
  464.     </div>
  465.     {# Fin seccion sabias que? #}
  466.     {% include '@NoahtechSistemasFuszion/Default/footer.html.twig' %}
  467.     </section>    
  468. {% endblock %}
  469. {% block javascripts %}
  470.     <script type="text/javascript" src="{{asset('app/js/controllers/inicioController.js')}}"></script>
  471.     <script type="text/javascript" src="{{asset('app/js/services/inicioService.js')}}"></script>
  472.     <script src="//openlayers.org/api/2.13.1/OpenLayers.js"></script>
  473.     <script>
  474.         map = new OpenLayers.Map("mapdivCentro");
  475.         map.addLayer(new OpenLayers.Layer.OSM());
  477.         var lonLat = new OpenLayers.LonLat(-65.31520,-24.18192)
  478.             .transform(
  479.                 new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
  480.                 map.getProjectionObject() // to Spherical Mercator Projection
  481.             );
  483.         var zoom=13;
  485.         var markers = new OpenLayers.Layer.Markers( "Markers" );
  486.         map.addLayer(markers);
  488.         markers.addMarker(new OpenLayers.Marker(lonLat));
  490.         map.setCenter (lonLat, zoom);  
  491.     </script>
  492.     <script>
  493.         map = new OpenLayers.Map("mapdivPerales");
  494.         map.addLayer(new OpenLayers.Layer.OSM());
  496.         var lonLat = new OpenLayers.LonLat(-65.32338,-24.17112)
  497.             .transform(
  498.                 new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
  499.                 map.getProjectionObject() // to Spherical Mercator Projection
  500.             );
  502.         var zoom=13;
  504.         var markers = new OpenLayers.Layer.Markers( "Markers" );
  505.         map.addLayer(markers);
  507.         markers.addMarker(new OpenLayers.Marker(lonLat));
  509.         map.setCenter (lonLat, zoom);
  510.     </script>
  511.   
  512.   {% endblock %}
  515.