1 | {% extends 'base.template.html' %} |
---|
2 | {% load staticfiles %} |
---|
3 | {% block title %}Participar en Consulta{% endblock %} |
---|
4 | {% block content %} |
---|
5 | <form action="" role="form" class="form form-horizontal validate-form" method="post" autocomplete="off" id="encuesta_form"> |
---|
6 | {% csrf_token %} |
---|
7 | <div class="carousel-slider center"> |
---|
8 | {% for key, value in preguntas.items %} |
---|
9 | <div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}"> |
---|
10 | {{ value.label | safe }} |
---|
11 | <div class="input-field"> |
---|
12 | {{ value.field | safe }} |
---|
13 | </div> |
---|
14 | </div> |
---|
15 | {% endfor %} |
---|
16 | </div> |
---|
17 | </form> |
---|
18 | |
---|
19 | <div class="carousel carousel-slider center" data-indicators="true" style="height: 400px;"> |
---|
20 | <div class="carousel-item red white-text" href="#one!"> |
---|
21 | <h2>First Panel</h2> |
---|
22 | <p class="white-text">This is your first panel</p> |
---|
23 | </div> |
---|
24 | <div class="carousel-item amber white-text" href="#two!"> |
---|
25 | <h2>Second Panel</h2> |
---|
26 | <p class="white-text">This is your second panel</p> |
---|
27 | </div> |
---|
28 | <div class="carousel-item green white-text" href="#three!"> |
---|
29 | <h2>Third Panel</h2> |
---|
30 | <p class="white-text">This is your third panel</p> |
---|
31 | </div> |
---|
32 | <div class="carousel-item blue white-text" href="#four!"> |
---|
33 | <h2>Fourth Panel</h2> |
---|
34 | <p class="white-text">This is your fourth panel</p> |
---|
35 | </div> |
---|
36 | </div> |
---|
37 | |
---|
38 | |
---|
39 | <div class="modal fade" id="consultaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> |
---|
40 | <div class="modal-content"> |
---|
41 | <div class="modal-header"> |
---|
42 | <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> |
---|
43 | <h4 class="modal-title" id="myModalLabel"> Consulta </h4> |
---|
44 | </div> |
---|
45 | <div class="modal-body"> |
---|
46 | <form action="" role="form" class="form form-horizontal validate-form" method="post" autocomplete="off" id="encuesta_form"> |
---|
47 | {% csrf_token %} |
---|
48 | <div class="row text-center"> |
---|
49 | <h1>Consulta</h1><hr> |
---|
50 | <div class="row center-block" style="width: 90%"> |
---|
51 | <div class="progress non-null" role="progressbar" id="status" > |
---|
52 | <div class="progress-bar progress-bar-red progress-bar active" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> |
---|
53 | <div class="bar" style="width:100%"><span style="color:black;">Progreso</span></div> |
---|
54 | </div> |
---|
55 | </div> |
---|
56 | </div> |
---|
57 | <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false"> |
---|
58 | <!-- Indicators --> |
---|
59 | <ol class="carousel-indicators"> |
---|
60 | {% for key, value in preguntas.items %} |
---|
61 | <li data-target="#myCarousel" class="{% if forloop.counter0 == 0 %}active{%endif%}"></li> |
---|
62 | {% endfor %} |
---|
63 | <li data-target="#myCarousel"></li> |
---|
64 | </ol> |
---|
65 | |
---|
66 | <!-- Wrapper for slides --> |
---|
67 | <div class="carousel-inner" role="listbox"> |
---|
68 | {% for key, value in preguntas.items %} |
---|
69 | <div class="col-md-6 col-sm-6 col-xs-6 col-xs-offset-3 col-md-offset-3 col-sm-offset-3 item {% if forloop.counter == 1 %}active{% endif %}"> |
---|
70 | <div class="row"> |
---|
71 | <label class="control-label"> |
---|
72 | {{ value.label | safe }} |
---|
73 | </label> |
---|
74 | </div> |
---|
75 | <div class="row"> |
---|
76 | {{ value.field | safe }} |
---|
77 | </div> |
---|
78 | </div> |
---|
79 | {% endfor %} |
---|
80 | <div class="col-md-6 col-sm-6 col-xs-6 col-xs-offset-3 col-md-offset-3 col-sm-offset-3 item"> |
---|
81 | <div class="row"> |
---|
82 | <button type="submit" onclick="send_poll(event);" class="btn btn-red"> |
---|
83 | Registrar Participación |
---|
84 | </button> |
---|
85 | </div> |
---|
86 | </div> |
---|
87 | </div> |
---|
88 | |
---|
89 | |
---|
90 | <!-- Left and right controls --> |
---|
91 | <a class="left carousel-control" href="#myCarousel" role="button" onclick="go_back();"> |
---|
92 | <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> |
---|
93 | <span class="sr-only">Anterior</span> |
---|
94 | </a> |
---|
95 | <a class="right carousel-control" href="#myCarousel" role="button" onclick="control_progress();"> |
---|
96 | <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> |
---|
97 | <span class="sr-only">Siguiente</span> |
---|
98 | </a> |
---|
99 | </div> |
---|
100 | </div> |
---|
101 | </form> |
---|
102 | <div class="modal-footer"> |
---|
103 | <a type="button" class="btn btn-warning pull-left" href="{% url 'participacion_index' %}">Regresar</a> |
---|
104 | </div> |
---|
105 | </div> |
---|
106 | </div><!-- /.modal-content --> |
---|
107 | </div><!-- /.modal --> |
---|
108 | {% endblock %} |
---|
109 | |
---|
110 | {% block extraJs %} |
---|
111 | <script> |
---|
112 | $(document).ready(function(){ |
---|
113 | $('.carousel.carousel-slider').carousel({fullWidth: true}); |
---|
114 | }); |
---|
115 | </script> |
---|
116 | {% endblock %} |
---|