Reac front end for psicometric app

notificaciones.php 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  1. <head>
  2. <meta charset="utf-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <title>Notificaciones - Dashboard</title>
  6. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  7. <link rel="stylesheet" href="css/all.css">
  8. <link rel="stylesheet" href="css/font-awesome.min.css">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
  10. <script src="js/jquery.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  12. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
  13. <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
  14. <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
  15. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  16. </head>
  17. <script type="text/javascript">
  18. $(document).ready(function () {
  19. $(".list-unstyled").find('li').removeClass("active");
  20. $("#notificaciones").addClass("active");
  21. });
  22. </script>
  23. <?php include('sidebar.php') ?>
  24. <div id="content">
  25. <?php include('header.php') ?>
  26. <div class="content-section">
  27. <div class="main">
  28. <h1 class="breadcrumb-header">Notificaciones</h1>
  29. <div class="panel">
  30. <div class="notification_body">
  31. <div class="row">
  32. <div class="col-md-3">
  33. <div class="rounded-pic">
  34. <img src="images/man.png" alt="">
  35. </div>
  36. </div>
  37. <div class="col-md-6">
  38. <h1>Fernando Vásquez <span>Editor</span></h1>
  39. <p>He publicado una nueva plaza.</p>
  40. </div>
  41. <div class="col-md-3 panel_time_notification">
  42. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  43. </div>
  44. </div>
  45. </div>
  46. <div class="notification_body">
  47. <div class="row">
  48. <div class="col-md-3">
  49. <div class="rounded-pic">
  50. <img src="images/man.png" alt="">
  51. </div>
  52. </div>
  53. <div class="col-md-6">
  54. <h1>Fernando Vásquez <span>Editor</span></h1>
  55. <p>He publicado una nueva plaza.</p>
  56. </div>
  57. <div class="col-md-3 panel_time_notification">
  58. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  59. </div>
  60. </div>
  61. </div>
  62. <div class="notification_body">
  63. <div class="row">
  64. <div class="col-md-3">
  65. <div class="rounded-pic">
  66. <img src="images/man.png" alt="">
  67. </div>
  68. </div>
  69. <div class="col-md-6">
  70. <h1>Fernando Vásquez <span>Editor</span></h1>
  71. <p>He publicado una nueva plaza.</p>
  72. </div>
  73. <div class="col-md-3 panel_time_notification">
  74. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  75. </div>
  76. </div>
  77. </div>
  78. <div class="notification_body">
  79. <div class="row">
  80. <div class="col-md-3">
  81. <div class="rounded-pic">
  82. <img src="images/man.png" alt="">
  83. </div>
  84. </div>
  85. <div class="col-md-6">
  86. <h1>Fernando Vásquez <span>Editor</span></h1>
  87. <p>He publicado una nueva plaza.</p>
  88. </div>
  89. <div class="col-md-3 panel_time_notification">
  90. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  91. </div>
  92. </div>
  93. </div>
  94. <div class="notification_body">
  95. <div class="row">
  96. <div class="col-md-3">
  97. <div class="rounded-pic">
  98. <img src="images/man.png" alt="">
  99. </div>
  100. </div>
  101. <div class="col-md-6">
  102. <h1>Fernando Vásquez <span>Editor</span></h1>
  103. <p>He publicado una nueva plaza.</p>
  104. </div>
  105. <div class="col-md-3 panel_time_notification">
  106. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="notification_body">
  111. <div class="row">
  112. <div class="col-md-3">
  113. <div class="rounded-pic">
  114. <img src="images/man.png" alt="">
  115. </div>
  116. </div>
  117. <div class="col-md-6">
  118. <h1>Fernando Vásquez <span>Editor</span></h1>
  119. <p>He publicado una nueva plaza.</p>
  120. </div>
  121. <div class="col-md-3 panel_time_notification">
  122. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  123. </div>
  124. </div>
  125. </div>
  126. <div class="notification_body">
  127. <div class="row">
  128. <div class="col-md-3">
  129. <div class="rounded-pic">
  130. <img src="images/man.png" alt="">
  131. </div>
  132. </div>
  133. <div class="col-md-6">
  134. <h1>Fernando Vásquez <span>Editor</span></h1>
  135. <p>He publicado una nueva plaza.</p>
  136. </div>
  137. <div class="col-md-3 panel_time_notification">
  138. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  139. </div>
  140. </div>
  141. </div>
  142. <div class="notification_body">
  143. <div class="row">
  144. <div class="col-md-3">
  145. <div class="rounded-pic">
  146. <img src="images/man.png" alt="">
  147. </div>
  148. </div>
  149. <div class="col-md-6">
  150. <h1>Fernando Vásquez <span>Editor</span></h1>
  151. <p>He publicado una nueva plaza.</p>
  152. </div>
  153. <div class="col-md-3 panel_time_notification">
  154. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  155. </div>
  156. </div>
  157. </div>
  158. <div class="notification_body">
  159. <div class="row">
  160. <div class="col-md-3">
  161. <div class="rounded-pic">
  162. <img src="images/man.png" alt="">
  163. </div>
  164. </div>
  165. <div class="col-md-6">
  166. <h1>Fernando Vásquez <span>Editor</span></h1>
  167. <p>He publicado una nueva plaza.</p>
  168. </div>
  169. <div class="col-md-3 panel_time_notification">
  170. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  171. </div>
  172. </div>
  173. </div>
  174. <div class="notification_body">
  175. <div class="row">
  176. <div class="col-md-3">
  177. <div class="rounded-pic">
  178. <img src="images/man.png" alt="">
  179. </div>
  180. </div>
  181. <div class="col-md-6">
  182. <h1>Fernando Vásquez <span>Editor</span></h1>
  183. <p>He publicado una nueva plaza.</p>
  184. </div>
  185. <div class="col-md-3 panel_time_notification">
  186. <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
  187. </div>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. <?php include('footer.php') ?>
  193. </div>
  194. </div>
  195. <script>
  196. ;(function($) {
  197. // Browser supports HTML5 multiple file?
  198. var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',
  199. isIE = /msie/i.test( navigator.userAgent );
  200. $.fn.customFile = function() {
  201. return this.each(function() {
  202. var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input
  203. $wrap = $('<div class="file-upload-wrapper">'),
  204. $input = $('<input type="text" class="file-upload-input" disabled placeholder="Ningún archivo seleccionado" />'),
  205. // Button that will be used in non-IE browsers
  206. $button = $('<button type="button" class="file-upload-button">Subir foto</button>'),
  207. // Hack for IE
  208. $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Subir foto</label>');
  209. // Hide by shifting to the left so we
  210. // can still trigger events
  211. $file.css({
  212. position: 'absolute',
  213. left: '-9999px'
  214. });
  215. $wrap.insertAfter( $file )
  216. .append( $file, $input, ( isIE ? $label : $button ) );
  217. // Prevent focus
  218. $file.attr('tabIndex', -1);
  219. $button.attr('tabIndex', -1);
  220. $button.click(function () {
  221. $file.focus().click(); // Open dialog
  222. });
  223. $file.change(function() {
  224. var files = [], fileArr, filename;
  225. // If multiple is supported then extract
  226. // all filenames from the file array
  227. if ( multipleSupport ) {
  228. fileArr = $file[0].files;
  229. for ( var i = 0, len = fileArr.length; i < len; i++ ) {
  230. files.push( fileArr[i].name );
  231. }
  232. filename = files.join(', ');
  233. // If not supported then just take the value
  234. // and remove the path to just show the filename
  235. } else {
  236. filename = $file.val().split('\\').pop();
  237. }
  238. $input.val( filename ) // Set the value
  239. .attr('title', filename) // Show filename in title tootlip
  240. .focus(); // Regain focus
  241. });
  242. $input.on({
  243. blur: function() { $file.trigger('blur'); },
  244. keydown: function( e ) {
  245. if ( e.which === 13 ) { // Enter
  246. if ( !isIE ) { $file.trigger('click'); }
  247. } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del
  248. // On some browsers the value is read-only
  249. // with this trick we remove the old input and add
  250. // a clean clone with all the original events attached
  251. $file.replaceWith( $file = $file.clone( true ) );
  252. $file.trigger('change');
  253. $input.val('');
  254. } else if ( e.which === 9 ){ // TAB
  255. return;
  256. } else { // All other keys
  257. return false;
  258. }
  259. }
  260. });
  261. });
  262. };
  263. // Old browser fallback
  264. if ( !multipleSupport ) {
  265. $( document ).on('change', 'input.customfile', function() {
  266. var $this = $(this),
  267. // Create a unique ID so we
  268. // can attach the label to the input
  269. uniqId = 'customfile_'+ (new Date()).getTime(),
  270. $wrap = $this.parent(),
  271. // Filter empty input
  272. $inputs = $wrap.siblings().find('.file-upload-input')
  273. .filter(function(){ return !this.value }),
  274. $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>');
  275. // 1ms timeout so it runs after all other events
  276. // that modify the value have triggered
  277. setTimeout(function() {
  278. // Add a new input
  279. if ( $this.val() ) {
  280. // Check for empty fields to prevent
  281. // creating new inputs when changing files
  282. if ( !$inputs.length ) {
  283. $wrap.after( $file );
  284. $file.customFile();
  285. }
  286. // Remove and reorganize inputs
  287. } else {
  288. $inputs.parent().remove();
  289. // Move the input so it's always last on the list
  290. $wrap.appendTo( $wrap.parent() );
  291. $wrap.find('input').focus();
  292. }
  293. }, 1);
  294. });
  295. }
  296. }(jQuery));
  297. $('input[type=file]').customFile();
  298. </script>
  299. <script>
  300. new Chart(document.getElementById("bar-chart-horizontal"), {
  301. type: 'horizontalBar',
  302. data: {
  303. labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
  304. datasets: [
  305. {
  306. label: "Population (millions)",
  307. backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
  308. data: [2478,5267,734,784,433]
  309. }
  310. ]
  311. },
  312. options: {
  313. legend: { display: false },
  314. title: {
  315. display: true,
  316. text: 'Predicted world population (millions) in 2050'
  317. }
  318. }
  319. });
  320. </script>