Reac front end for psicometric app

perfil.php 9.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  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>Perfil - 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. $("#perfil").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">Perfil</h1>
  29. <div class="row">
  30. <div class="col-md-12">
  31. <div class="panel">
  32. <div class="row">
  33. <div class="col-md-4">
  34. <div class="img-container">
  35. <img src="images/man.png">
  36. </div>
  37. </div>
  38. <div class="col-md-8">
  39. <div class="custom-file-upload">
  40. <input type="file" id="file" name="myfiles[]" multiple readonly />
  41. </div>
  42. </div>
  43. </div>
  44. <div class="row">
  45. <div class="col-md-6">
  46. <div class="inputs_config">
  47. <p>Datos personales</p>
  48. <label>Nombre</label>
  49. <input type="text" name="nombre_user" placeholder="Fernando Vásquez">
  50. <label>Puesto / Profesión</label>
  51. <input type="text" name="puesto" placeholder="Gerente general">
  52. <label>Dirección</label>
  53. <input type="text" name="direccion" placeholder="Melbourn, Australia">
  54. <label>Número</label>
  55. <input type="number" name="numero" placeholder="12345678">
  56. </div>
  57. </div>
  58. <div class="col-md-6">
  59. <div class="inputs_config">
  60. <p>Redes sociales</p>
  61. <label>Facebook</label>
  62. <input type="text" name="facebook" placeholder="Link de Facebook">
  63. <label>Linkein</label>
  64. <input type="text" name="linkedin" placeholder="Link de Linkedin">
  65. <label>Instagram</label>
  66. <input type="text" name="instagram" placeholder="Link de Instagram">
  67. <label>Correo</label>
  68. <input type="email" name="instagram" placeholder="Correo electrónico">
  69. </div>
  70. </div>
  71. </div>
  72. <div class="boton_guardar_info">
  73. <div class="success_btn">
  74. <a href="#">Guardar</a>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. <?php include('footer.php') ?>
  82. </div>
  83. </div>
  84. <script>
  85. ;(function($) {
  86. // Browser supports HTML5 multiple file?
  87. var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',
  88. isIE = /msie/i.test( navigator.userAgent );
  89. $.fn.customFile = function() {
  90. return this.each(function() {
  91. var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input
  92. $wrap = $('<div class="file-upload-wrapper">'),
  93. $input = $('<input type="text" class="file-upload-input" disabled placeholder="Ningún archivo seleccionado" />'),
  94. // Button that will be used in non-IE browsers
  95. $button = $('<button type="button" class="file-upload-button">Subir foto</button>'),
  96. // Hack for IE
  97. $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Subir foto</label>');
  98. // Hide by shifting to the left so we
  99. // can still trigger events
  100. $file.css({
  101. position: 'absolute',
  102. left: '-9999px'
  103. });
  104. $wrap.insertAfter( $file )
  105. .append( $file, $input, ( isIE ? $label : $button ) );
  106. // Prevent focus
  107. $file.attr('tabIndex', -1);
  108. $button.attr('tabIndex', -1);
  109. $button.click(function () {
  110. $file.focus().click(); // Open dialog
  111. });
  112. $file.change(function() {
  113. var files = [], fileArr, filename;
  114. // If multiple is supported then extract
  115. // all filenames from the file array
  116. if ( multipleSupport ) {
  117. fileArr = $file[0].files;
  118. for ( var i = 0, len = fileArr.length; i < len; i++ ) {
  119. files.push( fileArr[i].name );
  120. }
  121. filename = files.join(', ');
  122. // If not supported then just take the value
  123. // and remove the path to just show the filename
  124. } else {
  125. filename = $file.val().split('\\').pop();
  126. }
  127. $input.val( filename ) // Set the value
  128. .attr('title', filename) // Show filename in title tootlip
  129. .focus(); // Regain focus
  130. });
  131. $input.on({
  132. blur: function() { $file.trigger('blur'); },
  133. keydown: function( e ) {
  134. if ( e.which === 13 ) { // Enter
  135. if ( !isIE ) { $file.trigger('click'); }
  136. } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del
  137. // On some browsers the value is read-only
  138. // with this trick we remove the old input and add
  139. // a clean clone with all the original events attached
  140. $file.replaceWith( $file = $file.clone( true ) );
  141. $file.trigger('change');
  142. $input.val('');
  143. } else if ( e.which === 9 ){ // TAB
  144. return;
  145. } else { // All other keys
  146. return false;
  147. }
  148. }
  149. });
  150. });
  151. };
  152. // Old browser fallback
  153. if ( !multipleSupport ) {
  154. $( document ).on('change', 'input.customfile', function() {
  155. var $this = $(this),
  156. // Create a unique ID so we
  157. // can attach the label to the input
  158. uniqId = 'customfile_'+ (new Date()).getTime(),
  159. $wrap = $this.parent(),
  160. // Filter empty input
  161. $inputs = $wrap.siblings().find('.file-upload-input')
  162. .filter(function(){ return !this.value }),
  163. $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>');
  164. // 1ms timeout so it runs after all other events
  165. // that modify the value have triggered
  166. setTimeout(function() {
  167. // Add a new input
  168. if ( $this.val() ) {
  169. // Check for empty fields to prevent
  170. // creating new inputs when changing files
  171. if ( !$inputs.length ) {
  172. $wrap.after( $file );
  173. $file.customFile();
  174. }
  175. // Remove and reorganize inputs
  176. } else {
  177. $inputs.parent().remove();
  178. // Move the input so it's always last on the list
  179. $wrap.appendTo( $wrap.parent() );
  180. $wrap.find('input').focus();
  181. }
  182. }, 1);
  183. });
  184. }
  185. }(jQuery));
  186. $('input[type=file]').customFile();
  187. </script>