@@ -0,0 +1,194 | |||||
|
1 | .footer-igp { | |||
|
2 | border-top: 1px solid #DDD; | |||
|
3 | padding-top: 15px; | |||
|
4 | margin-bottom: 15px; | |||
|
5 | line-height: 1.5; | |||
|
6 | font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |||
|
7 | } | |||
|
8 | ||||
|
9 | .footer-image { | |||
|
10 | width: 8.666667%; | |||
|
11 | margin: 2px 8px 0 8px; | |||
|
12 | text-align: center; | |||
|
13 | } | |||
|
14 | ||||
|
15 | .footer-image img { | |||
|
16 | max-width: 32px; | |||
|
17 | } | |||
|
18 | ||||
|
19 | .footer-igp-row .content { | |||
|
20 | padding-left: 0.65581em; | |||
|
21 | width: 100%; | |||
|
22 | border-left: 1px solid #DDD; | |||
|
23 | } | |||
|
24 | ||||
|
25 | .footer-igp-row { | |||
|
26 | margin: 10px; | |||
|
27 | margin-bottom: 0px; | |||
|
28 | margin-right: 0px; | |||
|
29 | padding: 10px; | |||
|
30 | padding-bottom: 0px; | |||
|
31 | padding-right: 0px; | |||
|
32 | display: flex; | |||
|
33 | justify-content: space-between; | |||
|
34 | } | |||
|
35 | ||||
|
36 | .footer-igp-row:first-child { | |||
|
37 | margin-top: 0px; | |||
|
38 | padding-top: 0px; | |||
|
39 | } | |||
|
40 | ||||
|
41 | .footer-igp-row:last-child { | |||
|
42 | margin-bottom: 10px; | |||
|
43 | padding-bottom: 10px; | |||
|
44 | } | |||
|
45 | ||||
|
46 | .footer-igp-row .content .title { | |||
|
47 | text-transform: uppercase; | |||
|
48 | color: #3aa2e8; | |||
|
49 | font-weight: bold; | |||
|
50 | } | |||
|
51 | ||||
|
52 | .footer-igp-row .content .text { | |||
|
53 | font-size: 12px; | |||
|
54 | color: #7f7f7f; | |||
|
55 | } | |||
|
56 | ||||
|
57 | .footer-igp-row .content .link { | |||
|
58 | cursor: pointer; | |||
|
59 | font-size: 12px; | |||
|
60 | color: #3aa2e8; | |||
|
61 | } | |||
|
62 | ||||
|
63 | .footer-igp-row .content .link a { | |||
|
64 | color: #3aa2e8; | |||
|
65 | } | |||
|
66 | ||||
|
67 | .footer-igp .map { | |||
|
68 | border-left: 1px solid #DDD; | |||
|
69 | } | |||
|
70 | ||||
|
71 | .footer-igp .map img { | |||
|
72 | max-height: 249px; | |||
|
73 | width: 100%; | |||
|
74 | } | |||
|
75 | ||||
|
76 | .siguenos { | |||
|
77 | position: relative; | |||
|
78 | overflow: hidden; | |||
|
79 | height: 37px; | |||
|
80 | display: inline-block; | |||
|
81 | padding-left: 20px; | |||
|
82 | color: #444444; | |||
|
83 | text-decoration: none; | |||
|
84 | text-align: center; | |||
|
85 | line-height: 40px; | |||
|
86 | font-size: 14px; | |||
|
87 | font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |||
|
88 | } | |||
|
89 | ||||
|
90 | @media (max-width: 992px) { | |||
|
91 | .footer-image { | |||
|
92 | width: 13.666667%; | |||
|
93 | } | |||
|
94 | } | |||
|
95 | ||||
|
96 | @media (max-width: 768px) { | |||
|
97 | .footer-image { | |||
|
98 | width: 8.666667%; | |||
|
99 | } | |||
|
100 | ||||
|
101 | .footer-igp .map img { | |||
|
102 | width: 100%; | |||
|
103 | } | |||
|
104 | ||||
|
105 | .footer-igp-row .content { | |||
|
106 | width: 70% | |||
|
107 | } | |||
|
108 | } | |||
|
109 | ||||
|
110 | @media (max-width: 480px) { | |||
|
111 | .footer-igp { | |||
|
112 | padding-top: 0px !important; | |||
|
113 | } | |||
|
114 | ||||
|
115 | .footer-igp-row { | |||
|
116 | justify-content: flex-start; | |||
|
117 | } | |||
|
118 | ||||
|
119 | } | |||
|
120 | ||||
|
121 | .icon2 { | |||
|
122 | position: relative; | |||
|
123 | overflow: hidden; | |||
|
124 | width: 34px; | |||
|
125 | height: 34px; | |||
|
126 | display: inline-block; | |||
|
127 | margin: 15px 0 10px 7px; | |||
|
128 | border-radius: 50%; | |||
|
129 | color: #fff; | |||
|
130 | text-decoration: none; | |||
|
131 | text-align: center; | |||
|
132 | line-height: 40px; | |||
|
133 | font-size: 17px; | |||
|
134 | font-family: sans-serif; | |||
|
135 | } | |||
|
136 | ||||
|
137 | .icon2:nth-child(1) { | |||
|
138 | background: cornflowerblue; | |||
|
139 | } | |||
|
140 | ||||
|
141 | .icon2:nth-child(2) { | |||
|
142 | background: salmon; | |||
|
143 | } | |||
|
144 | ||||
|
145 | .icon2:nth-child(3) { | |||
|
146 | background: gray; | |||
|
147 | } | |||
|
148 | ||||
|
149 | .icon2.insta { | |||
|
150 | background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); | |||
|
151 | } | |||
|
152 | ||||
|
153 | .icon2:after { | |||
|
154 | color: white; | |||
|
155 | animation: shinex 3s ease-in-out infinite; | |||
|
156 | animation-fill-mode: forwards; | |||
|
157 | content: ""; | |||
|
158 | position: absolute; | |||
|
159 | top: -110%; | |||
|
160 | left: -210%; | |||
|
161 | width: 200%; | |||
|
162 | height: 200%; | |||
|
163 | opacity: 0; | |||
|
164 | transform: rotate(30deg); | |||
|
165 | background: rgba(255, 255, 255, 0.13); | |||
|
166 | background: linear-gradient(to right, | |||
|
167 | rgba(255, 255, 255, 0.13) 0%, | |||
|
168 | rgba(255, 255, 255, 0.13) 77%, | |||
|
169 | rgba(255, 255, 255, 0.5) 92%, | |||
|
170 | rgba(255, 255, 255, 0.0) 100%); | |||
|
171 | } | |||
|
172 | ||||
|
173 | .icon2:active:after { | |||
|
174 | opacity: 0; | |||
|
175 | color: white; | |||
|
176 | } | |||
|
177 | ||||
|
178 | @keyframes shinex { | |||
|
179 | 10% { | |||
|
180 | opacity: 1; | |||
|
181 | top: -30%; | |||
|
182 | left: -30%; | |||
|
183 | transition-property: left, top, opacity; | |||
|
184 | transition-duration: 0.3s, 0.3s, 0.9s; | |||
|
185 | transition-timing-function: ease; | |||
|
186 | } | |||
|
187 | ||||
|
188 | 100% { | |||
|
189 | opacity: 0; | |||
|
190 | top: -30%; | |||
|
191 | left: -30%; | |||
|
192 | transition-property: left, top, opacity; | |||
|
193 | } | |||
|
194 | } |
@@ -0,0 +1,14 | |||||
|
1 | .page-head { | |||
|
2 | background: #fff; | |||
|
3 | padding-top: 10px; | |||
|
4 | padding-bottom: 10px; | |||
|
5 | border-top: 8px solid #38b5e6; | |||
|
6 | border-bottom: 1px solid #e1e1e1; | |||
|
7 | } | |||
|
8 | ||||
|
9 | .a-contactus { | |||
|
10 | color: #0088cc; | |||
|
11 | text-decoration: none; | |||
|
12 | font-family: Helvetica; | |||
|
13 | font-size: 0.8rem; | |||
|
14 | } No newline at end of file |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
1 | NO CONTENT: new file 100644, binary diff hidden |
|
NO CONTENT: new file 100644, binary diff hidden |
@@ -0,0 +1,68 | |||||
|
1 | {% load static %} {% load bootstrap4 %} | |||
|
2 | <div class="row footer-igp"> | |||
|
3 | <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12"> | |||
|
4 | <span class="siguenos">Siguenos en: </span> | |||
|
5 | <div class="div-links" style="text-align: left"> | |||
|
6 | <a target="_blank" href="http://www.facebook.com/igp.peru" style="background-color:#3b5998;" | |||
|
7 | class="icon2"><i class="fab fa-facebook-f" aria-hidden="true" style="margin-top: 9px;"></i></a> | |||
|
8 | <a target="_blank" href="http://twitter.com/#!/igp_peru" style="background-color: #2DAAE2;" class="icon2"><i | |||
|
9 | class="fab fa-twitter" aria-hidden="true" style="margin-top: 9px;"></i></a> | |||
|
10 | <a target="_blank" href="https://www.youtube.com/igp_videos" | |||
|
11 | style="background-color: #E30613;margin-right: 0px;" class="icon2"><i class="fab fa-youtube-square" | |||
|
12 | aria-hidden="true" style="margin-top: 9px;"></i></a> | |||
|
13 | <a title="Instagram IGP" href="https://www.instagram.com/igp.peru/" target="_blank" class="icon2 insta"><i | |||
|
14 | class="fab fa-instagram" aria-hidden="true" style="margin-top: 9px;"></i></a> | |||
|
15 | <a title="LinkedIn IGP" href="https://www.linkedin.com/company/igpperu/" target="_blank" | |||
|
16 | style="background-color: #2797CF;" class="icon2"><i class="fab fa-linkedin-in" aria-hidden="true" | |||
|
17 | style="margin-top: 9px;"></i></a> | |||
|
18 | <a title="Flickr IGP" href="https://www.flickr.com/people/156092703@N08/" target="_blank" | |||
|
19 | style="background-color: #fd1a7d;" class="icon2"><i class="fab fa-flickr" aria-hidden="true" | |||
|
20 | style="margin-top: 9px;"></i></a> | |||
|
21 | ||||
|
22 | <div class="footer-igp-row" style="border-top: 1px solid #DDD;padding-left: 0;"> | |||
|
23 | <div class="content" style="border-left: 0px; "> | |||
|
24 | <div class="text"> | |||
|
25 | 2019<br> | |||
|
26 | Instituto GeofΓsico del PerΓΊ<br> | |||
|
27 | Ciencia para protegernos, ciencia para avanzar. | |||
|
28 | </div> | |||
|
29 | </div> | |||
|
30 | </div> | |||
|
31 | </div> | |||
|
32 | </div> | |||
|
33 | <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 d-none d-md-block"> | |||
|
34 | <div class="footer-igp-row"> | |||
|
35 | <div class="footer-image"><img src="{% static 'images/ico_footer_horario.png' %}" alt=""></div> | |||
|
36 | <div class="content"> | |||
|
37 | <div class="title">AtenciΓ³n al ciudadano</div> | |||
|
38 | <div class="text">De lunes a viernes</div> | |||
|
39 | <div class="text">Desde las 8:30 Hrs. hasta las 17:15 Hrs</div> | |||
|
40 | <div class="link"><a href=""></a></div> | |||
|
41 | </div> | |||
|
42 | <div class="footer-image"><img src="{% static 'images/ico_footer_direccion.png' %}" alt=""></div> | |||
|
43 | <div class="content"> | |||
|
44 | <div class="title">SEDE PRINCIPAL</div> | |||
|
45 | <div class="text">Calle Badajoz NΒ° 169 Urb. Mayorazgo IV Etapa</div> | |||
|
46 | <div class="text">Ate, Lima 15012 - PerΓΊ.</div> | |||
|
47 | <div class="text">(51) 13172300</div> | |||
|
48 | <div class="link"><a href="https://portal.igp.gob.pe/nuestras-sedes" target="_blank">Ver otras Sedes</a> | |||
|
49 | </div> | |||
|
50 | </div> | |||
|
51 | </div> | |||
|
52 | <div class="footer-igp-row"> | |||
|
53 | <div class="footer-image"><img src="{% static 'images/ico_footer_tramites.png' %}" alt=""></div> | |||
|
54 | <div class="content"> | |||
|
55 | <a href="http://intranet.igp.gob.pe/std/consultaexp/" target="_blank"> | |||
|
56 | <div class="title">TRΓMITES EN LΓNEA</div> | |||
|
57 | <div class="text">Consulte aquΓ el estado de su expediente a travΓ©s de nuestro Sistema de TrΓ‘mite | |||
|
58 | Documentario STD</div> | |||
|
59 | </a> | |||
|
60 | </div> | |||
|
61 | <div class="footer-image"><img src="{% static 'images/ico_footer_consultas.png' %}" alt=""></div> | |||
|
62 | <div class="content"> | |||
|
63 | <div class="title">BUZΓN DE SUGERENCIAS</div> | |||
|
64 | <div class="text">comunicaciones@igp.gob.pe</div> | |||
|
65 | </div> | |||
|
66 | </div> | |||
|
67 | </div> | |||
|
68 | </div> No newline at end of file |
@@ -0,0 +1,31 | |||||
|
1 | {% load static %} {% load bootstrap4 %} | |||
|
2 | <div class="row page-head justify-content-between"> | |||
|
3 | <div class="col-8 p-2"> | |||
|
4 | <img class="img-fluid" src="{% static 'images/minam.png' %}"> | |||
|
5 | <span class="d-none d-lg-inline"> | |||
|
6 | <a href="https://busquedas.elperuano.pe/normaslegales/establecen-como-politica-de-comunicaciones-del-poder-ejecuti-resolucion-ministerial-n-113-2018-pcm-1641857-1/" | |||
|
7 | target="_blank"> | |||
|
8 | <img title="Logo PerΓΊ primero" src="{% static 'images/peru_primero.jpeg' %}" height="50px"> | |||
|
9 | </a> | |||
|
10 | </span> | |||
|
11 | </div> | |||
|
12 | <div class="col-4 text-right"> | |||
|
13 | <span class="d-none d-xl-inline"> | |||
|
14 | <a class="btn-xs a-contactus" href="https://portal.igp.gob.pe/contactenos" target="_blank"> | |||
|
15 | <i class="fas fa-phone-square" aria-hidden="true"></i> | |||
|
16 | ContΓ‘ctenos | |||
|
17 | </a> | |||
|
18 | <a href="http://www.transparencia.gob.pe/enlaces/pte_transparencia_enlaces.aspx?id_entidad=188#.WkJ3xiF97CI166" | |||
|
19 | target="_blank"> | |||
|
20 | <img class="img-fluid" | |||
|
21 | src="{% static 'images/logo-portal-transparencia.png' %}" | |||
|
22 | width="100px" height="auto"> | |||
|
23 | </a> | |||
|
24 | </span> | |||
|
25 | <!--data-toggle="collapse"--> | |||
|
26 | <a href="//portal.igp.gob.pe/" target="_blank"> | |||
|
27 | <img class="img-fluid" src="{% static 'images/igp.png' %}" width="100px"> | |||
|
28 | </a> | |||
|
29 | ||||
|
30 | </div> | |||
|
31 | </div> No newline at end of file |
@@ -0,0 +1,19 | |||||
|
1 | {% extends 'base.html' %} | |||
|
2 | {% load static%} | |||
|
3 | {% block content %} | |||
|
4 | <br> | |||
|
5 | <div class="col-12"> | |||
|
6 | <p>Monthly reports of the conditions of the upper atmosphere.</p> | |||
|
7 | </div> | |||
|
8 | <div class="card-columns p-2"> | |||
|
9 | <div class="card text-justify"> | |||
|
10 | <img src="{% static 'images/sw.jpg' %}" class="card-img-top" alt="..."> | |||
|
11 | <div class="card-body"> | |||
|
12 | <h5 class="card-title">Report No. 01</h5> | |||
|
13 | <p class="card-text">{% lorem %}</p> | |||
|
14 | <a href="#" class="btn btn-primary">Go</a> | |||
|
15 | </div> | |||
|
16 | </div> | |||
|
17 | </div> | |||
|
18 | <br><br> | |||
|
19 | {% endblock content %} No newline at end of file |
@@ -0,0 +1,81 | |||||
|
1 | {% extends 'base.html' %} | |||
|
2 | {% load static%} | |||
|
3 | {% block content %} | |||
|
4 | <br> | |||
|
5 | <div class="col-12"> | |||
|
6 | <p>Useful tools and data from other partners/observatories.</p> | |||
|
7 | </div> | |||
|
8 | <div class="card-columns p-2"> | |||
|
9 | <div class="card text-justify"> | |||
|
10 | <img src="{% static 'images/skynoise.png' %}" class="card-img-top" alt="..."> | |||
|
11 | <div class="card-body"> | |||
|
12 | <h5 class="card-title">Sky noise</h5> | |||
|
13 | <p class="card-text">Sky brightness at 50 MHz, useful for antenna calibrations and measure radar's sensitivity. | |||
|
14 | </p> | |||
|
15 | <div class="input-group input-group-sm"> | |||
|
16 | <div class="input-group-prepend"> | |||
|
17 | <span class="input-group-text" id="validationTooltipSkynoiseDate"><i class="fas fa-calendar" | |||
|
18 | aria-hidden="true"></i></span> | |||
|
19 | </div> | |||
|
20 | <input type="text" class="form-control" id="skynoise-date" placeholder="dd/mm/yy" | |||
|
21 | aria-describedby="validationTooltipSkynoiseDate" value="{% now 'm/d/Y' %}" required> | |||
|
22 | <div class="invalid-tooltip"> | |||
|
23 | Please enter a valid date. | |||
|
24 | </div> | |||
|
25 | <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Sky Noise" | |||
|
26 | data-image="http://jro-app.igp.gob.pe/programs/skynoise/cgi-bin/sky_noise.pl?">Go</a> | |||
|
27 | </div> | |||
|
28 | </div> | |||
|
29 | </div> | |||
|
30 | <div class="card text-justify"> | |||
|
31 | <img src="{% static 'images/kp.png' %}" class="card-img-top" alt="..."> | |||
|
32 | <div class="card-body"> | |||
|
33 | <h5 class="card-title">Kp Index</h5> | |||
|
34 | <p class="card-text">The K-index, are used to characterize the magnitude of geomagnetic storms. Kp is an excellent | |||
|
35 | indicator of disturbances in the Earth's magnetic field (<a | |||
|
36 | href="https://www.swpc.noaa.gov/products/planetary-k-index" target="_blank">NOAA/SWPC</a>).</p> | |||
|
37 | <a class="btn btn-primary" data-toggle="modal" href="#toolModal" data-title="Kp Index" | |||
|
38 | data-image="https://services.swpc.noaa.gov/images/planetary-k-index.gif">Go</a> | |||
|
39 | </div> | |||
|
40 | </div> | |||
|
41 | </div> | |||
|
42 | <br><br> | |||
|
43 | ||||
|
44 | <!-- Modal --> | |||
|
45 | <div class="modal fade" id="toolModal" tabindex="-1" role="dialog" aria-labelledby="toolModalTitle" aria-hidden="true"> | |||
|
46 | <div class="modal-dialog modal-lg" role="document"> | |||
|
47 | <div class="modal-content"> | |||
|
48 | <div class="modal-header"> | |||
|
49 | <h5 class="modal-title" id="toolModalTitle">Modal title</h5> | |||
|
50 | <button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |||
|
51 | <span aria-hidden="true">×</span> | |||
|
52 | </button> | |||
|
53 | </div> | |||
|
54 | <div class="modal-body text-center"> | |||
|
55 | <img class="img-fluid" src=""> | |||
|
56 | </div> | |||
|
57 | </div> | |||
|
58 | </div> | |||
|
59 | </div> | |||
|
60 | ||||
|
61 | {% endblock content %} | |||
|
62 | ||||
|
63 | {% block script %} | |||
|
64 | <script> | |||
|
65 | $('#toolModal').on('show.bs.modal', function (e) { | |||
|
66 | ||||
|
67 | //get data attribute of the clicked element | |||
|
68 | var title = $(e.relatedTarget).data('title'); | |||
|
69 | var image = $(e.relatedTarget).data('image'); | |||
|
70 | ||||
|
71 | if (image.indexOf('skynoise') > 0) { | |||
|
72 | var dt = $('#skynoise-date').val().split('/') | |||
|
73 | image += 'month=' + dt[0] + '&dom=' + dt[1] + '&year=' + dt[2]; | |||
|
74 | } | |||
|
75 | ||||
|
76 | //populate values | |||
|
77 | $(e.currentTarget).find('h5').text(title); | |||
|
78 | $(e.currentTarget).find('img').attr('src', image); | |||
|
79 | }); | |||
|
80 | </script> | |||
|
81 | {% endblock script %} No newline at end of file |
@@ -1,57 +1,120 | |||||
1 | /* DESDE ACA COPIE DEL BASE.HTML*/ |
|
1 | @import url('https://fonts.googleapis.com/css?family=Lobster|Open+Sans'); | |
2 | html { |
|
2 | ||
3 | font-size: 14px; |
|
3 | .text-blue { | |
4 | } |
|
4 | color: #003A8E; | |
5 | @media (min-width: 768px) { |
|
5 | } | |
6 | html { |
|
6 | ||
7 | font-size: 16px; |
|
7 | .text-skyblue { | |
8 | } |
|
8 | color: #00addc; | |
9 | } |
|
9 | } | |
10 |
|
10 | |||
11 | .container { |
|
11 | .nopadding { | |
12 | max-width: 960px; |
|
12 | padding: 0px !important; | |
13 | } |
|
13 | } | |
14 |
|
14 | |||
15 | .home-header { |
|
15 | .nomargin { | |
16 | max-width: 700px; |
|
16 | margin: 0px !important; | |
17 | } |
|
17 | } | |
18 |
|
18 | |||
19 | .text-igp { |
|
19 | /* Change Buttons Bootstrap */ | |
20 | color: #3aa2e8; |
|
20 | .btn-primary { | |
21 | } |
|
21 | color: #fff; | |
22 |
|
22 | background-color: #00addc !important; | ||
23 | .border-top { border-top: 1px solid #e5e5e5; } |
|
23 | border-color: #00addc !important; | |
24 | .border-bottom { border-bottom: 1px solid #e5e5e5; } |
|
24 | } | |
25 |
|
25 | |||
26 | .box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); } |
|
26 | .btn-primary:hover { | |
27 |
|
27 | color: #fff; | ||
28 | .loader { |
|
28 | background-color: #23527c !important; | |
29 | border: 10px solid #f3f3f3; |
|
29 | border-color: #23527c !important; | |
30 | border-radius: 50%; |
|
|||
31 | border-top: 10px solid #3aa2e8; |
|
|||
32 | width: 40px; |
|
|||
33 | height: 40px; |
|
|||
34 | -webkit-animation: spin 2s linear infinite; /* Safari */ |
|
|||
35 | animation: spin 2s linear infinite; |
|
|||
36 | } |
|
|||
37 |
|
||||
38 | /* Safari */ |
|
|||
39 | @-webkit-keyframes spin { |
|
|||
40 | 0% { -webkit-transform: rotate(0deg); } |
|
|||
41 | 100% { -webkit-transform: rotate(360deg); } |
|
|||
42 | } |
|
|||
43 |
|
||||
44 | @keyframes spin { |
|
|||
45 | 0% { transform: rotate(0deg); } |
|
|||
46 | 100% { transform: rotate(360deg); } |
|
|||
47 | } |
|
|||
48 |
|
||||
49 | .no-data { |
|
|||
50 | text-align: center; |
|
|||
51 | background-color: #d58512; |
|
|||
52 | padding: 8px 16px; |
|
|||
53 | border-radius: 5px; |
|
|||
54 | color: #FEFEFE; |
|
|||
55 | font: 20px 'Helvetica'; |
|
|||
56 | text-transform: uppercase; |
|
|||
57 | } |
|
30 | } | |
|
31 | ||||
|
32 | .card-text { | |||
|
33 | font-size: 0.8rem; | |||
|
34 | } | |||
|
35 | ||||
|
36 | /* Menu - breadcrum*/ | |||
|
37 | ||||
|
38 | .bc-icons .breadcrumb-item+.breadcrumb-item::before { | |||
|
39 | content: none; | |||
|
40 | } | |||
|
41 | ||||
|
42 | .bc-icons .breadcrumb-item.active { | |||
|
43 | color: #00addc; | |||
|
44 | } | |||
|
45 | ||||
|
46 | /* Menu Sidebar*/ | |||
|
47 | ||||
|
48 | #wrapper { | |||
|
49 | margin-right: -15px; | |||
|
50 | margin-left: -15px; | |||
|
51 | border-right: 1px solid #dee2e6!important; | |||
|
52 | border-left: 1px solid #dee2e6!important; | |||
|
53 | } | |||
|
54 | ||||
|
55 | #sidebar-wrapper { | |||
|
56 | min-height: 60vh; | |||
|
57 | margin-left: -15rem; | |||
|
58 | -webkit-transition: margin .25s ease-out; | |||
|
59 | -moz-transition: margin .25s ease-out; | |||
|
60 | -o-transition: margin .25s ease-out; | |||
|
61 | transition: margin .25s ease-out; | |||
|
62 | } | |||
|
63 | ||||
|
64 | #sidebar-wrapper .sidebar-heading { | |||
|
65 | padding: 0.875rem 1.25rem; | |||
|
66 | font-size: 1.2rem; | |||
|
67 | } | |||
|
68 | ||||
|
69 | #sidebar-wrapper .list-group { | |||
|
70 | width: 15rem; | |||
|
71 | } | |||
|
72 | ||||
|
73 | #page-content-wrapper { | |||
|
74 | min-width: 100vw; | |||
|
75 | } | |||
|
76 | ||||
|
77 | #wrapper.toggled #sidebar-wrapper { | |||
|
78 | margin-left: 0; | |||
|
79 | } | |||
|
80 | ||||
|
81 | @media (min-width: 768px) { | |||
|
82 | #sidebar-wrapper { | |||
|
83 | margin-left: 0; | |||
|
84 | } | |||
|
85 | ||||
|
86 | #page-content-wrapper { | |||
|
87 | min-width: 0; | |||
|
88 | width: 100%; | |||
|
89 | } | |||
|
90 | ||||
|
91 | #wrapper.toggled #sidebar-wrapper { | |||
|
92 | margin-left: -15rem; | |||
|
93 | } | |||
|
94 | } | |||
|
95 | ||||
|
96 | /* cards */ | |||
|
97 | ||||
|
98 | @media (min-width: 480px) { | |||
|
99 | .card-columns { | |||
|
100 | column-count: 2; | |||
|
101 | } | |||
|
102 | } | |||
|
103 | ||||
|
104 | @media (min-width: 768px) { | |||
|
105 | .card-columns { | |||
|
106 | column-count: 3; | |||
|
107 | } | |||
|
108 | } | |||
|
109 | ||||
|
110 | @media (min-width: 1180px) { | |||
|
111 | .card-columns { | |||
|
112 | column-count: 4; | |||
|
113 | } | |||
|
114 | } | |||
|
115 | ||||
|
116 | @media (min-width: 1380px) { | |||
|
117 | .card-columns { | |||
|
118 | column-count: 5; | |||
|
119 | } | |||
|
120 | } No newline at end of file |
@@ -1,55 +1,64 | |||||
1 | {% load static %} {% load bootstrap4 %} |
|
1 | {% load static %} {% load bootstrap4 %} | |
2 | <!doctype html> |
|
2 | <!doctype html> | |
3 | <html lang="en"> |
|
3 | <html lang="en"> | |
|
4 | ||||
4 | <head> |
|
5 | <head> | |
5 | <meta charset="utf-8"> |
|
6 | <meta charset="utf-8"> | |
6 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
7 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
7 | <!-- Bootstrap CSS --> |
|
8 | <!-- Bootstrap CSS --> | |
8 | {# % bootstrap_css % #} |
|
9 | {# % bootstrap_css % #} | |
|
10 | <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" | |||
|
11 | integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous"> | |||
9 | <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> |
|
12 | <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet"> | |
10 |
<link href="{% static 'css/style.css' %}" rel="stylesheet"> |
|
13 | <link href="{% static 'css/style.css' %}" rel="stylesheet"> | |
|
14 | <link href="{% static 'css/header.css' %}" rel="stylesheet"> | |||
|
15 | <link href="{% static 'css/footer.css' %}" rel="stylesheet"> | |||
|
16 | {%block extra-header%}{%endblock%} | |||
11 | <title>Realtime plots at JRO</title> |
|
17 | <title>Realtime plots at JRO</title> | |
12 | </head> |
|
18 | </head> | |
|
19 | ||||
13 | <body> |
|
20 | <body> | |
14 | <!-- menu --> |
|
21 | ||
15 | <nav class="navbar navbar-expand-md navbar-light sticky-top box-shadow" style="background-color: #e3f2fd;"> |
|
22 | <div class="container-fluid"> | |
16 | <a class="navbar-brand" href="http://jro.igp.gob.pe"> |
|
23 | <!-- header --> | |
17 | <img src="{% static 'images/logo-igp.png' %}" height="40" alt=""> |
|
24 | {% include "header_igp.html" %} | |
18 | </a> |
|
25 | ||
19 | <button class="navbar-toggler text-dark" type="button" data-toggle="collapse" data-target="#navbars" aria-controls="navbars" aria-expanded="false" aria-label="Toggle navigation"> |
|
26 | <!-- main --> | |
20 | <span class="navbar-toggler-icon"></span> |
|
27 | <div class="d-flex" id="wrapper"> | |
21 | </button> |
|
28 | <!-- Sidebar --> | |
22 | <div class="collapse navbar-collapse" id="navbars"> |
|
29 | <div class="bg-light border-right" id="sidebar-wrapper"> | |
23 | <ul class="navbar-nav ml-auto"> |
|
30 | <div class="sidebar-heading text-blue font-weight-bold">Realtime at JRO </div> | |
24 | <li class="nav-item active"> |
|
31 | <div class="list-group list-group-flush"> | |
25 | <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a> |
|
32 | <a href="{% url 'url_main' %}" class="list-group-item list-group-item-action bg-light">Realtime</a> | |
26 | </li> |
|
33 | <a href="{% url 'url_reports' %}" class="list-group-item list-group-item-action bg-light">Reports</a> | |
27 | <li class="nav-item"> |
|
34 | <a href="{% url 'url_tools' %}" class="list-group-item list-group-item-action bg-light">Tools</a> | |
28 | <a class="nav-link" href="#">About</a> |
|
35 | <a href="http://jro.igp.gob.pe" class="list-group-item list-group-item-action bg-light">JRO</a> | |
29 | </li> |
|
|||
30 | <li class="nav-item"> |
|
|||
31 | <a class="nav-link" href="#">Control Panel</a> |
|
|||
32 | </li> |
|
|||
33 | </ul> |
|
|||
34 | </div> |
|
|||
35 | </nav> |
|
|||
36 | <!-- menu end --> |
|
|||
37 | <!-- Here we put the content depending which url the view.py program command us --> |
|
|||
38 | <div class="container" style="min-height: 480px;"> |
|
|||
39 | {% block content %}{% endblock content %} |
|
|||
40 | </div> |
|
|||
41 | <div class="container"> |
|
|||
42 | <footer class="border-top pt-2"> |
|
|||
43 | <div class="row"> |
|
|||
44 | <div class="col-12 col-md"> |
|
|||
45 | <small class="d-block mb-3 text-muted">© 2018</small> |
|
|||
46 | </div> |
|
36 | </div> | |
47 | </div> |
|
37 | </div> | |
48 | </footer> |
|
38 | <main role="main" id="page-content-wrapper"> | |
|
39 | <nav class="navbar navbar-light bg-light border-bottom justify-content-start"> | |||
|
40 | <button class="btn btn-light" id="menu-toggle"><span class="navbar-toggler-icon"></span></button> | |||
|
41 | <div class="bc-icons"> | |||
|
42 | <nav aria-label="breadcrumb"> | |||
|
43 | <ol class="breadcrumb bg-transparent mb-0 p-0"> | |||
|
44 | {% for item in menu_list %} | |||
|
45 | <li class="breadcrumb-item">{{item}} | |||
|
46 | {% if forloop.last is False %}<i class="fas fa-caret-right mx-2" aria-hidden="true"></i>{% endif %}</li> | |||
|
47 | {% endfor %} | |||
|
48 | </ol> | |||
|
49 | </nav> | |||
|
50 | </div> | |||
|
51 | </nav> | |||
|
52 | {% block content %}{% endblock content %} | |||
|
53 | </main> | |||
|
54 | </div> | |||
|
55 | <!-- footer --> | |||
|
56 | {% include "footer_igp.html" %} | |||
49 | </div> |
|
57 | </div> | |
|
58 | ||||
50 | <!-- This part put block modal which is used to change parameters of my plot --> |
|
59 | <!-- This part put block modal which is used to change parameters of my plot --> | |
51 | {% block modal %}{% endblock modal %} |
|
60 | {% block modal %}{% endblock modal %} | |
52 |
{% block debug %}<div class=" |
|
61 | {% block debug %}<div class="row">{{debug}}</div>{% endblock debug %} | |
53 | <!-- Optional JavaScript --> |
|
62 | <!-- Optional JavaScript --> | |
54 | <!-- jQuery first, then Popper.js, then Bootstrap JS --> |
|
63 | <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
55 | {# % bootstrap_javascript jquery='slim' % #} |
|
64 | {# % bootstrap_javascript jquery='slim' % #} | |
@@ -59,6 +68,12 | |||||
59 | <script src="{% static 'js/plotly-latest.min.js' %}"></script> |
|
68 | <script src="{% static 'js/plotly-latest.min.js' %}"></script> | |
60 | <script src="{% static 'js/moment.min.js' %}"></script> |
|
69 | <script src="{% static 'js/moment.min.js' %}"></script> | |
61 | <!-- Here we put the script from the type of plot that we recibe --> |
|
70 | <!-- Here we put the script from the type of plot that we recibe --> | |
|
71 | <script> | |||
|
72 | $("#menu-toggle").click(function (e) { | |||
|
73 | e.preventDefault(); | |||
|
74 | $("#wrapper").toggleClass("toggled"); | |||
|
75 | }); | |||
|
76 | </script> | |||
62 | {% block script %}{% endblock script %} |
|
77 | {% block script %}{% endblock script %} | |
63 | </body> |
|
78 | </body> | |
64 |
|
79 |
@@ -1,7 +1,10 | |||||
1 | <!-- CARDs --> |
|
1 | <!-- CARDs --> | |
2 | <div class="mb-3 text-center"> |
|
2 | <br> | |
|
3 | <div class="col-12"><p>Real time observations include data from a net of instruments of the Jicamarca Radio Observatory.</p> | |||
|
4 | </div> | |||
|
5 | <div class="row text-center justify-content-around pt-4"> | |||
3 | {% for exp in experiments %} |
|
6 | {% for exp in experiments %} | |
4 |
<div class="col- |
|
7 | <div class="col-xs"> | |
5 | <div id="card_{{exp.code}}" class="card mb-4 box-shadow text-{{exp.style}} border-{{exp.style}}"> |
|
8 | <div id="card_{{exp.code}}" class="card mb-4 box-shadow text-{{exp.style}} border-{{exp.style}}"> | |
6 | <div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div> |
|
9 | <div id="card_header_{{exp.code}}" class="card-header bg-{{exp.style}} text-white">{{exp.name}}</div> | |
7 | <div id="card_body_{{exp.code}}"class="card-body"> |
|
10 | <div id="card_body_{{exp.code}}"class="card-body"> |
@@ -3,9 +3,6 | |||||
3 | {% block extra-header %} |
|
3 | {% block extra-header %} | |
4 | {% endblock %} |
|
4 | {% endblock %} | |
5 | {% block content %} |
|
5 | {% block content %} | |
6 | <div class="text-center p-2 text-igp"> |
|
|||
7 | <h1>Realtime Experiments at JRO</h1> |
|
|||
8 | </div> |
|
|||
9 | {% include 'cartas.html' %} |
|
6 | {% include 'cartas.html' %} | |
10 | {% endblock content %} |
|
7 | {% endblock content %} | |
11 | {% block script %} |
|
8 | {% block script %} |
@@ -3,7 +3,7 | |||||
3 | <div class="p-4 text-igp"> |
|
3 | <div class="p-4 text-igp"> | |
4 | <h3>{{title}} <small> {{subtitle}}</small></h3> |
|
4 | <h3>{{title}} <small> {{subtitle}}</small></h3> | |
5 | </div> |
|
5 | </div> | |
6 |
<div class=" |
|
6 | <div class="justify-content-center"> | |
7 | <div id="loader" class="loader mt-5"></div> |
|
7 | <div id="loader" class="loader mt-5"></div> | |
8 | </div> |
|
8 | </div> | |
9 | <div id="plot" {%if plot == 'spc' %}class="row"{%endif%}></div> |
|
9 | <div id="plot" {%if plot == 'spc' %}class="row"{%endif%}></div> |
@@ -1,9 +1,10 | |||||
1 | from django.conf.urls import url |
|
1 | from django.conf.urls import url | |
2 | from .views import main, plot |
|
2 | from .views import main, plot, tools, reports | |
3 |
|
3 | |||
4 |
|
4 | |||
5 | urlpatterns = [ |
|
5 | urlpatterns = [ | |
6 | url(r'^$', main, name='url_main'), |
|
6 | url(r'^$', main, name='url_main'), | |
7 |
|
7 | url(r'^tools/$', tools, name='url_tools'), | ||
|
8 | url(r'^reports/$', reports, name='url_reports'), | |||
8 | url(r'^(?P<code>[0-9]+)/(?P<plot>[0-9a-z]+)/$', plot, name='url-plot'), |
|
9 | url(r'^(?P<code>[0-9]+)/(?P<plot>[0-9a-z]+)/$', plot, name='url-plot'), | |
9 | ] |
|
10 | ] |
@@ -109,9 +109,25 def main(request): | |||||
109 |
|
109 | |||
110 | kwargs['date'] = date |
|
110 | kwargs['date'] = date | |
111 | kwargs['experiments'] = experiments |
|
111 | kwargs['experiments'] = experiments | |
|
112 | kwargs['menu_list'] = ['Realtime'] | |||
112 |
|
113 | |||
113 | return render(request, 'home.html', kwargs) |
|
114 | return render(request, 'home.html', kwargs) | |
114 |
|
115 | |||
|
116 | def tools(request): | |||
|
117 | ''' | |||
|
118 | ''' | |||
|
119 | kwargs = { | |||
|
120 | 'menu_list': ['Tools'] | |||
|
121 | } | |||
|
122 | return render(request, 'tools.html', kwargs) | |||
|
123 | ||||
|
124 | def reports(request): | |||
|
125 | ''' | |||
|
126 | ''' | |||
|
127 | kwargs = { | |||
|
128 | 'menu_list': ['Reports'] | |||
|
129 | } | |||
|
130 | return render(request, 'reports.html', kwargs) | |||
115 |
|
131 | |||
116 | def plot(request, code=None, plot=None): |
|
132 | def plot(request, code=None, plot=None): | |
117 | ''' |
|
133 | ''' | |
@@ -132,23 +148,23 def plot(request, code=None, plot=None): | |||||
132 | 'date': date, |
|
148 | 'date': date, | |
133 | 'id': meta.pk, |
|
149 | 'id': meta.pk, | |
134 | 'realtime': realtime, |
|
150 | 'realtime': realtime, | |
135 |
' |
|
151 | 'menu_list': ['Realtime', exp.name] | |
136 | } |
|
152 | } | |
137 | # Logic to show my views |
|
153 | # Logic to show my views | |
138 | if plot == 'rti': |
|
154 | if plot == 'rti': | |
139 | kwargs['setup_form'] = RTISetupForm() |
|
155 | kwargs['setup_form'] = RTISetupForm() | |
140 | kwargs['fn_plot'] = 'PcolorBuffer' |
|
156 | kwargs['fn_plot'] = 'PcolorBuffer' | |
141 |
kwargs[' |
|
157 | kwargs['menu_list'].append('RTI plot') | |
142 | return render(request, 'plot.html', kwargs) |
|
158 | return render(request, 'plot.html', kwargs) | |
143 | elif plot == 'spc': |
|
159 | elif plot == 'spc': | |
144 | kwargs['setup_form'] = SPCSetupForm() |
|
160 | kwargs['setup_form'] = SPCSetupForm() | |
145 | kwargs['fn_plot'] = 'Pcolor' |
|
161 | kwargs['fn_plot'] = 'Pcolor' | |
146 |
kwargs[' |
|
162 | kwargs['menu_list'].append('Spectra plot') | |
147 | return render(request, 'plot.html', kwargs) |
|
163 | return render(request, 'plot.html', kwargs) | |
148 | elif plot == 'noise': |
|
164 | elif plot == 'noise': | |
149 | kwargs['setup_form'] = ScatterSetupForm() |
|
165 | kwargs['setup_form'] = ScatterSetupForm() | |
150 | kwargs['fn_plot'] = 'Scatter' |
|
166 | kwargs['fn_plot'] = 'Scatter' | |
151 |
kwargs[' |
|
167 | kwargs['menu_list'].append('Noise plot') | |
152 | return render(request, 'plot.html', kwargs) |
|
168 | return render(request, 'plot.html', kwargs) | |
153 | else: |
|
169 | else: | |
154 | return render(request, 'home.html', {}) |
|
170 | return render(request, 'home.html', {}) |
General Comments 0
You need to be logged in to leave comments.
Login now