ec.it(2) by @Codewith.it - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

minImposta il valore numerico o temporale minimo per un elemento input
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
animationDefinisce i parametri dell'animazione di un elemento o selettore
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
methodDetermina il metodo di invio dei dati di un form al server
controlsL'attributo controls si usa per visualizzare gli strumenti per la riproduzione dei file audio e video

Users

Log in to search for users

Explore

Find inspiration

Eleganza Gioielli (Ufficiale)

inserimento immagini in un testo

Esercitazione 2

Loading Animation

Keep Your Emails on Target with Ma

Profilo di Salvatore Crapanzano

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>
  <head>
    <title>test LPI
    </title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- CSS only -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <!-- JS, Popper.js, and jQuery -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
    </script>
	<STYLE>
	.int, .int td, .int th {
  border-bottom:4px double rgb(179,179,179);
}
/* .tools {
  position:sticky;
  top:0;
  left:0;
  z-index:99;
  background:white;
  box-shadow:0 5px 8px #00000055;
}
*/
#photo {
  border:1px solid rgb(179,179,179);
  height:100%;
  width:100%;
  cursor:pointer;
  padding:0;
  max-width:7cm;
  max-height:10cm;
  min-height:4cm;
}
.h4 {text-align:right}
.table input{
  height:35px !important}
#loadphoto{
  display:none;
}
th {
  background:rgb(247,247,247);
}
.show {display:none;}
@media print {
  .container-lg{
    margin:0 !important;
    padding:0 !important;
    background:white !important;
  }
  .table th {
    background-color: #f7f7f7!important;
  }
  .content {
    box-shadow:none !important;
  }
  .hide, button, hr, #dcConsole{
    display:none !important;
  }
  input, textarea {
    border:none !important;
  }   
  select {
    border:none !important;
     appearance:none;
     -moz-appearance:none;
     -webkit-appearance:none;
  }
  .sezione {
    page-break-inside:avoid;
  }
  textarea{resize:none;}
  .show {display:block;}
}
@page {
  margin:0;
  margin-top:0;
  size:A4;
}
#photo:hover{
  filter: contrast(0.5);
}

.td-40 {width:40%!important}
.td-100 {width:100%!important}
.td-20 {width:20%!important}
.td-25 {width:25%!important}
.td-50 {width:50%!important}
.td-60 {width:60%!important}
.td-80 {width:80%!important}
.td-75 {width:75%!important}

.competenze th {
    width: 20%;
}
.removible {
  color:red;
  cursor:pointer;
}

body.theme1 {}
body.theme1 th { background: rgb(214,255,217) !important; vertical-align:middle; text-align:right;} 
body.theme1 tr { height:20px !important;} 
body.theme1 .h4{text-align:left;}
body.theme1 table, body.theme1 #photo {border:2px solid rgb(161,255,168);}
body.theme1 table th {border:2px solid rgb(161,255,168);}
body.theme1 th,body.theme1 td  {  padding:1px 5px!important}


body.theme2 {}
body.theme2 th { background:rgb(205,227,255) !important;}


body.theme3 th,body.theme3 td  {  padding:1px !important; vertical-align:middle; height:3px;}
body.theme3 th,body.theme3 td body.theme3 tr  {  height:2px !important;}
body.theme3 .h4{text-align:left;}
body.theme3 .content br{display:none}
body.theme3 table th {border:none !important; border-right:2px solid rgb(113,111,111) !important; text-align:right !important; padding-right:10px!important;}
body.theme3 table, body.theme3 table tr , body.theme3 table tr td{border:none !important;}
  body.theme3 th { background: white !important; vertical-align:top;}
@media print {
  body.theme3 th {width:270px!important}
}

	</STYLE>
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-2 px-1 bg-dark position-fixed" id="sticky-sidebar">
          <div class="nav flex-column flex-nowrap vh-100 overflow-auto text-white ">
            <span class="h5  text-right  list-group-item list-group-item-action bg-dark text-light">Tema</span>
            <a href="#"  class="list-group-item list-group-item-action bg-secondary text-light" id="theme-default" onclick="theme('')" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Default</a>
            <a href="#"  class="list-group-item list-group-item-action bg-secondary text-light" id="theme-classic" onclick="theme('theme3')" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Classic</a>
            <a href="#"  class="list-group-item list-group-item-action bg-secondary text-light" id="theme-green" onclick="theme('theme1')" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Green</a>
            <a href="#"  class="list-group-item list-group-item-action bg-secondary text-light" id="theme-blue" onclick="theme('theme2')" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Blue</a>       
            <span class="h5 text-right list-group-item list-group-item-action bg-dark text-light">Opzioni</span>
            <a href="#"  class="  list-group-item list-group-item-action bg-secondary text-light"  onclick="photoswitch()" id="photooption" >Foto (destra)</a>
            <a href="#"  class=" list-group-item list-group-item-action bg-secondary text-light" onclick="fontswitch()" id="textoption">Testo (Arial)</a>
          </div>
        </div>
        <div class="col-10 offset-2">
          <p class="hide">
            Compila gli appositi campi e stampa il tuo curriculum
          </p>
          <div class="content bg-white rounded shadow page-content-wrapper">
            <div class="cvheader">
            </div>
            <div class="cvbody p-4">
              <div class="sezione">
                <div class="row">
                  <p class="col-lg h4">
                    Dati personali
                  </p>
                </div>
                <div class="row">
              <div class="col-3 photodiv1">
                <div class="row">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d3/Microsoft_Account.svg/1024px-Microsoft_Account.svg.png" id="photo" onclick="photo()">
                </div>
                <div class="row">
                  <button type="file" class="col hide btn btn-info m-1" onclick="prop('8cm','8cm')">1:1
                  </button> 
                  <button type="file" class="col hide btn btn-info m-1" onclick="prop('66%','100%')">2:3
                  </button>
                  <button type="file" class="col hide btn btn-info m-1" onclick="prop('6cm','8cm')">3:4
                  </button> 
                  <button type="file" class="col hide btn btn-info m-1" onclick="prop('7cm','5cm')">4:3
                  </button>
                  <button type="file" class="col hide btn btn-info m-1" onclick="prop('100%','100%')">100%
                  </button>                 
                  <button type="file" class="col hide btn btn-info m-1" onclick="prop('auto','auto')">auto
                  </button>
                  <input type="file" class="hide form-control" id="loadphoto">
                </div>
              </div>
              <div class="col-9 pt-2">
                <table class="table table-bordered table-sm">
                  <tr>
                    <th class="td-25">Nome
                    </th>
                    <td >
                      <input type="text" id="name" onchange="changetitle();" class="form-control">
                    </td>
                    </tr>
                  <tr>
                    <th  class="">Cognome
                    </th>
                    <td >
                      <input type="text" id="surname" onchange="changetitle();" class="form-control">
                    </td>
                  </tr> 
                  <tr>
                    <th >Data di nascita
                    </th>
                    <td  >
                      <input type="text" id="birth" class="form-control">
                    </td>
                  </tr>       
                  <tr>
                    <th >Cittadinanza
                    </th>
                    <td >
                      <input type="text" id="nation" class="form-control">
                    </td>
                  </tr> 
                  <tr>
                    <th  >Indirizzo
                    </th>
                    <td  >
                      <input type="text" id="address" class="form-control">
                    </td>
                  </tr>       
                  <tr>
                    <th >Email
                    </th>
                    <td  >
                      <input type="email" id="email" class="form-control">
                    </td> 
                    </tr>
                  <tr>
                    <th >Telefono
                    </th>
                    <td >
                      <input type="text" id="phone" class="form-control">
                    </td>
                  </tr>
                  <tr>
                    <th   >Portfolio
                    </th>
                    <td  >
                      <input type="text" id="portfolio" class="form-control">
                    </td>
                  </tr>
                  <tr>
                    <th  >Sito web
                    </th>
                    <td   >
                      <input type="text" id="website" class="form-control">
                    </td>
                  </tr>
                  <tr>
                    <th >Facebook
                    </th>
                    <td >
                      <input type="text" id="facebook" class="form-control">
                    </td>
                    </tr>
                  <tr>
                    <th  >Linkedin
                    </th>
                    <td >
                      <input type="text" id="linkedin" class="form-control">
                    </td>
                  </tr> 
                </table>
              </div>  
              <div class="photodiv2 col-3">
                
              </div>
            </div>
            <br>
            <hr>
          </div>
<!-- LAVORO-->
          <div class="sezione">
            <p class="h4">
              Esperienze lavorative
            </p>
            <table class="table table-bordered table-sm">    
            <thead>
              <tr>
                <th colspan="1">Settore professionale
                </th>
                <td colspan="3">
                  <input type="text" id="profession" class="form-control">
                </td>
              </tr> 
              </thead>
              <tbody class="work">
                <tr>
                  <th  colspan="1">Azienda
                  </th>
                  <td colspan="3">
                    <input type="text" class="form-control company">
                  </td>
                </tr> 
                <tr>
                  <th  colspan="1">Luogo
                  </th>
                  <td colspan="3">
                    <input type="text" class="form-control place">
                  </td>
                </tr> 
                <tr>
                  <th class="td-20">Inizio
                  </th>
                  <td  class="td-20">
                    <input type="text" class="form-control start">
                  </td> 
                  <th   class="td-20">Fine
                  </th>
                  <td  class="td-20">
                    <input type="text" class="form-control end">
                  </td>
                </tr>  
                
                <tr class="int">
                  <th  colspan="1">Attività
                  </th>
                  <td colspan="3" class="text-right">
                    <textarea class="form-control activity"></textarea>
                    <span class="removible hide" onclick="$(this).closest('.exp').remove();" >Elimina esperienza</span>
                  </td>
                </tr>
              </tbody>
            </table>
            <button class="btn btn-secondary float-right" onclick="add('.work')">
              +
            </button>
          </div>
          <br> 
          <br>
          <hr>
<!-- ISTRUIONE-->
          <div class="sezione">
            <p class="h4 ">
              Istruzione
            </p>
            <table class="table table-bordered table-sm">         
              <tbody class="school">
                <tr>
                  <th  colspan="1">Titolo di studio
                  </th>
                  <td colspan="3">
                    <input type="text" class="form-control stitle">
                  </td>
                </tr>                 
                <tr>
                  <th  colspan="1">Istituto/Ente
                  </th>
                  <td colspan="3">
                    <input type="text" class="form-control schoolname">
                  </td>
                </tr> 
                <tr>
                  <th  colspan="1">Sede
                  </th>
                  <td colspan="3">
                    <input type="text" class="form-control splace">
                  </td>
                </tr> 
                <tr>
                  <th class="td-20">Inizio
                  </th>
                  <td class="td-20">
                    <input type="text" class="form-control sStart">
                  </td> 
                  <th class="td-20">Fine
                  </th>
                  <td class="td-20">
                    <input type="text" class="form-control sEnd">
                  </td>
                </tr>                
                <tr >
                  <th  colspan="1">Attività svolte
                  </th>
                  <td colspan="3" class="text-right">
                    <textarea class="form-control sactivity"></textarea>
                    <span class="removible hide" onclick="$(this).closest('.exp').remove();" >Elimina esperienza</span>
                  </td>
                </tr> 
                <tr class="int">
                  <th class="bg-light">Voto
                  </th>
                  <td colspan="1">
                    <div class="input-group">
                      <input type="text" class="form-control text-right vote">
                      <div class="input-group-prepend">
                        <div class="input-group-text"> su 
                        </div>
                      </div>
                      <input type="text" class="form-control maxvote">
                    </div>
                  </td> 
                </tr> 
              </tbody>
            </table>
            <button class="btn btn-secondary float-right" onclick="add('.school')">
              +
            </button>
          </div>
          <br> 
          <br>
          <hr>
          <!-- LINGUE -->
          <div class="sezione">
            <p class="h4 ">
              Lingue
            </p>
            <datalist id="lang-list">
              <option>A1
              </option>
              <option>A1/A2
              </option>
              <option>A2
              </option>
              <option>A2/B1
              </option>
              <option>B1
              </option>
              <option>B1/B2
              </option>
              <option>B2
              </option>
              <option>B2/C1
              </option>
              <option>C1
              </option>
              <option>C1/C2
              </option>
              <option>C2
              </option>
              <option >Madrelingua
              </option>
            </datalist>
            <table class="table table-bordered">         
              <tbody>
                <tr>
                  <td>
                  </td>
                  <th colspan="2" class="h5">Comprensione
                  </th>
                  <th colspan="2" class="h5">Parlato
                  </th>
                  <th colspan="1" class="h5 ">Scritto
                  </th>
                </tr>
                <tr>
                  <th class="h5 ">Lingua
                  </th>
                  <th >
                    Ascolto
                  </th> 
                  <th>
                    Lettura
                  </th> 
                  <th>
                    Interazione
                  </th>  
                  <th>
                    Produzione orale
                  </th>                 
                  <th>
                    - 
                  </th>
                </tr> 
                <tr  class="langs">
                  <th  colspan="1">
                    <input type="text" class="form-control lang" placeholder="Italiano">
                    <span class=" h6 removible hide" onclick="$(this).closest('.exp').remove();" >Elimina</span>
                  </th>
                  <td colspan="1">
                    <input list="lang-list" class="form-control listening" placeholder="Madrelingua">
                  </td>                
                  <td colspan="1">
                    <input list="lang-list" class="form-control reading" placeholder="Madrelingua">
                  </td>              
                  <td colspan="1">
                    <input list="lang-list" class="form-control interaction" placeholder="Madrelingua">
                  </td>              
                  <td colspan="1">
                    <input list="lang-list" class="form-control speaking" placeholder="Madrelingua">
                  </td>             
                  <td colspan="1">
                    <input list="lang-list" class="form-control writing" placeholder="Madrelingua">
                  </td>
                </tr>              
              </tbody>
            </table>
            <button class="btn btn-secondary float-right" onclick="addtr('.langs')">
              +
            </button>
          </div>
          <br>
          <br>
          <hr>
          <!-- COMPETENZE -->
          <div class="sezione">
            <p class="h4 ">
              Altre competenze
            </p>
            <table class="table table-bordered table-sm">         
              <tbody class="competenze">
                <tr>
                  <th ><p >
                    Comunicative sociali
                    </p>
                  </th>
                  <td >
                    <textarea type="text" id="social" class="form-control"></textarea>
                  </td>
                </tr>               
                <tr>
                  <th ><p>
                    Organizzative
                    </p>
                  </th>
                  <td >
                    <textarea type="text" id="organizational" class="form-control"></textarea>
                  </td>
                </tr>               
                <tr>
                  <th><p>
                    Informatiche
                    </p>
                  </th>
                  <td>
                    <textarea type="text" id="informatic" class="form-control"></textarea>
                  </td>
                </tr>               
                <tr>
                  <th ><p>
                    Artistiche
                    </p>
                  </th>
                  <td >
                    <textarea type="text" id="artistic" class="form-control"></textarea>
                  </td>
                </tr>                
                <tr>
                  <th><p>
                    Hobby
                    </p>
                  </th>
                  <td >
                    <textarea type="text" id="hobbies" class="form-control"></textarea>
                  </td>
                </tr>                  
                <tr>
                  <th >
                    <p>
                    Altre competenze
                    </p>
                  </th>
                  <td  >
                    <textarea type="text" id="otherskills" class="form-control"></textarea>
                  </td>
                </tr> 
              </tbody>
            </table>
          </div>
          <br> 
          <br>
          <hr>      
          <!-- ALTRO -->
          <div class="sezione">
            <p class="h4 ">
              Altro
            </p>
            <datalist id="patenti">
              <option>AM
              </option>
              <option>A1
              </option>
              <option>A2
              </option>
              <option>A
              </option>
              <option>A1
              </option>
              <option>A
              </option>
              <option>B
              </option>
              <option>BE
              </option>
              <option>C1
              </option>
              <option>C
              </option>
              <option>D1
              </option>
              <option>D
              </option>
              <option>KA
              </option>
              <option>KB
              </option>
              <option>CQC
              </option>
            </datalist>
            <table class="table table-bordered">         
              <tbody>
                <tr>
                  <th class="td-20">
                    Patente
                  </th>
                  <td class="td-20">
                    <input class="form-control" type="text" id="license" list="patenti">
                  </td> 
                  <th class="td-20">
                    Automunito/a
                  </th>
                  <td class="td-20">
                    <select class="form-control" id="auto">
                      <option value="yes">Sì
                      </option>
                      <option value="no">No
                      </option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <td colspan="100%">
                    Autorizzo il trattamento dei miei dati personali presenti nel curriculum vitae ai sensi del Decreto Legislativo 30 Giugno 2003 n.196 e GDPR (Regolamento UE 2016/679).
                  </td>
                </tr>               
                <tr>
                  <td colspan="100%">
                    <input type="text" class="form-control" id="notes" placeholder="Altre note...">
                  </td>
                </tr>
              </tbody>
            </table> 
            <p class="show text-right">
              <i>CV creato con mycv.it
              </i>
            </p>
          </div> 
          <br>
          <br>
        </div>
        <hr>
        <div class="cvfooter">
          <input type="file" style="display:none;" id="importxml">
        </div>
        </div>
        <br>

         </div>
      </div>
    </div>

	<SCRIPT>
	function add(item) {
  var obj = $(item).val();
  $(item).parent().append("<tbody class='exp'>"+$(item).html()+"</tbody>");
}
function addtr(item) {
  var obj = $(item).val();
  $(item).parent().append("<tr class='exp'>"+$(item).html()+"</tr>");
}
//Carica immagine da input
document.getElementById('loadphoto').onchange = function (evt) {
  var tgt = evt.target || window.event.srcElement,
      files = tgt.files;
  // FileReader support
  if (FileReader && files && files.length) {
    var fr = new FileReader();
    fr.onload = function () {
      document.getElementById('photo').src = fr.result;
    }
    fr.readAsDataURL(files[0]);
  }
  // Not supported
  else {
    // fallback -- perhaps submit the input to an iframe and temporarily store
    // them on the server until the user's session ends.
  }
}
function photo() {
  document.getElementById('loadphoto').click()
}
function prop(ww,hh){
  var img = document.getElementById('photo');
  img.style.width = ww;
  img.style.height = hh;
}
function incorso(item){
  $(item).closest('.end').hide();
}
function theme(th){
  $('body').removeClass('theme1');
  $('body').removeClass('theme2');
  $('body').removeClass('theme3');
  $('body').removeClass('theme4');
  $('body').addClass(th);
  
}



  var work = document.getElementsByClassName('place');
  var school = document.getElementsByClassName('splace');
  var languages = document.getElementsByClassName('lang');

function download(filename) {
  var element = document.createElement('a');
  //EXP

  var exp = "";
  for(var i = 0; i < work.length; i++){
    exp = exp + `
		<work>
			<place>`+document.getElementsByClassName('place')[i].value+`</place>
			<company>`+document.getElementsByClassName('company')[i].value+`</company>
			<start>`+document.getElementsByClassName('start')[i].value+`</start>
			<end>`+document.getElementsByClassName('end')[i].value+`</end>
			<activity>`+document.getElementsByClassName('activity')[i].value+`</activity>
		</work>
`
  }
  //LANGS

  var lang = "";
  
  for(var l = 0; l < languages.length; l++){
    lang = lang + `
		<lang>
			<langname>`+document.getElementsByClassName('lang')[l].value+`</langname>
			<listening>`+document.getElementsByClassName('listening')[l].value+`</listening>
			<reading>`+document.getElementsByClassName('reading')[l].value+`</reading>
			<interaction>`+document.getElementsByClassName('interaction')[l].value+`</interaction>
			<speaking>`+document.getElementsByClassName('speaking')[l].value+`</speaking>
			<writing>`+document.getElementsByClassName('writing')[l].value+`</writing>
		</lang>
`
  }
  //SCHOOLS

  var sch = "";

  for( var s = 0 ;s < school.length; s++){
    sch = sch + `
		<school>
			<place>`+document.getElementsByClassName('splace')[s].value+`</place>
			<title>`+document.getElementsByClassName('stitle')[s].value+`</title>
			<schoolname>`+document.getElementsByClassName('schoolname')[s].value+`</schoolname>
			<activity>`+document.getElementsByClassName('sactivity')[s].value+`</activity>
			<start>`+document.getElementsByClassName('sStart')[s].value+`</start>
			<end>`+document.getElementsByClassName('sEnd')[s].value+`</end>
			<vote>`+document.getElementsByClassName('vote')[s].value+`</vote>
			<maxvote>`+document.getElementsByClassName('maxvote')[s].value+`</maxvote>
		</school>
`;
  }
  var text = `
<curriculum>
	<data>
		<photourl>`+$('#photo').attr('src')+`</photourl>
		<name>`+$('#name').val()+`</name>
		<surname>`+$('#surname').val()+`</surname>
		<address>`+$('#address').val()+`</address>
		<nation>`+$('#nation').val()+`</nation>
		<birth>`+$('#birth').val()+`</birth>
		<email>`+$('#email').val()+`</email>
		<phone>`+$('#phone').val()+`</phone>
		<website>`+$('#website').val()+`</website>
		<portfolio>`+$('#portfolio').val()+`</portfolio>
		<facebook>`+$('#facebook').val()+`</facebook>
		<linkedin>`+$('#linkedin').val()+`</linkedin>
	</data>
	<experience>
		<profession>`+$('#profession').val()+`</profession>
			`+exp+`
	</experience>
    <education>
    		`+sch+`
    </education>
    <languages>
   			`+lang+`
    </languages>
	<skills>
		<social>`+$('#social').val()+`</social>
		<organizational>`+$('#organizational').val()+`</organizational>
		<informatic>`+$('#informatic').val()+`</informatic>
		<artistic>`+$('#artistic').val()+`</artistic>
		<hobbies>`+$('#hobbies').val()+`</hobbies>
		<other>`+$('#otherskills').val()+`</other>
		<license>`+$('#license').val()+`</license>
		<auto>`+$('#auto').val()+`</auto>
		<notes>`+$('#notes').val()+`</notes>
	</skills>
</curriculum>
`;
  element.setAttribute('href', 'data:text/xml,' + encodeURIComponent(text));
  element.setAttribute('download', filename);
  element.style.display = 'none';
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

var pswitch = "left";

function photoswitch(){
  if(pswitch == "left"){    
    $('.photodiv1').hide();
    $('.photodiv2').show();
    $('.photodiv2').html($('.photodiv1').html());
    $('.photodiv1').html('');
	$('#photooption').text('Foto (destra)');
    pswitch = "right";
  }  else {
    $('.photodiv2').hide();
    $('.photodiv1').show();
    $('.photodiv1').html($('.photodiv2').html());
    $('.photodiv2').html('');
	$('#photooption').text('Foto (sinistra)');
    pswitch = "left";
  }
}
photoswitch();

function changetitle(){
  let name = document.getElementById('name').value;
  let surname = document.getElementById('surname').value;
  document.title = name + " " + surname + " - myCV.com";
}

var font = "sans";

function fontswitch(){
  if(font == "sans"){    
    $('.content').css('font-family','serif')
	$('#textoption').text('Testo (T.New Roman)');
    font = "serif";
  }  else {
        $('.content').css('font-family','sans-serif')
		$('#textoption').text('Testo (Arial)');
    font = "sans";
  }
}






  const myXMLfile = document.getElementById('importxml').files[0];
var xmlhttp     = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
  if (4 === this.readyState) {  /* DONE */
    if (200 === this.status) {  /* LOADING */
      fctGetXML(this);
    }
    else {
      console.warn("error %d on loading file: %s !", this.status, myXMLfile);
    }
  }
};
  
function loadDoc() {
  xmlhttp.open("GET", myXMLfile, true);
  xmlhttp.send();
}

function fctGetXML(xml) {
  let xmlDoc = xml.responseXML;

  xmlDoc.querySelectorAll('exam').forEach(exam => {
    let nRow = myTable.insertRow(-1) , rCell  = 0;

    nRow.insertCell(rCell++).textContent = exam.querySelector('date').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('type').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('course').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('semester').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('students').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('form').textContent;
    nRow.insertCell(rCell++).textContent = exam.querySelector('room').textContent;
  });
}


//AUTOREZIDE AREA

jQuery.each(jQuery('textarea'), function() {
var offset = this.offsetHeight - this.clientHeight;
 
  var resizeTextarea = function(el) {
    jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};

jQuery(this).on('keyup input', function() {
resizeTextarea(this);
}).removeAttr('data-autoresize');
});


//PARSE XML FROM FILE

      var readXml=null;
      $('#importxml').change(function(event) {
        event.preventDefault();
        var selectedFile = document.getElementById('importxml').files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
          readXml=e.target.result;
          var xmlDoc =     $.parseXML(readXml);
          $xml = $(xmlDoc);

          $('#name').val($xml.find('name').text());
          $('#surname').val($xml.find('surname').text());
          $('#photo').attr("src",$xml.find('photourl').text());
          $('#nation').val($xml.find('nation').text());
          $('#address').val($xml.find('address').text());
          $('#email').val($xml.find('email').text());
          $('#phone').val($xml.find('phone').text());
          $('#birth').val($xml.find('birth').text());
          $('#portfolio').val($xml.find('portfolio').text());
          $('#website').val($xml.find('website').text());
          $('#facebook').val($xml.find('facebook').text());
          $('#linkedin').val($xml.find('linkedin').text());
          $('#profession').val($xml.find('profession').text());
          $('#organizational').val($xml.find('organizational').text());
          $('#social').val($xml.find('social').text());
          $('#informatic').val($xml.find('informatic').text());
          $('#artistic').val($xml.find('artistic').text());
          $('#hobbies').val($xml.find('hobbies').text());
          $('#otherskills').val($xml.find('other').text());
          $('#license').val($xml.find('license').text());
          $('#auto').val($xml.find('auto').text());
          $('#notes').val($xml.find('notes').text());
//importa lingua
          for(var ii=0; ii < $xml.find('lang').length; ii++ ){
            if (ii >0){addtr('.langs');}
            $('.lang').eq(ii).val($xml.find('langname').eq(ii).text());
            $('.listening').eq(ii).val($xml.find('listening').eq(ii).text());
            $('.reading').eq(ii).val($xml.find('reading').eq(ii).text());
            $('.interaction').eq(ii).val($xml.find('interaction').eq(ii).text());
            $('.speaking').eq(ii).val($xml.find('speaking').eq(ii).text());
            $('.writing').eq(ii).val($xml.find('writing').eq(ii).text());
          }     
          
  // IMPORTA LAVORO        
          for(var ww=0; ww < $xml.find('work').length; ww++ ){
                   if (ww >0){ add('.work'); }      $('.company').eq(ww).val($xml.find('company').eq(ww).text());
            $('.place').eq(ww).val($xml.find('place').eq(ww).text()); 
            $('.start').eq(ww).val($xml.find('start').eq(ww).text()); 
            $('.end').eq(ww).val($xml.find('end').eq(ww).text()); 
            $('.activity').eq(ww).val($xml.find('activity').eq(ww).text());           }   

          // IMPORTA ISTRUIONE        
          for(var ee=0; ee < $xml.find('school').length; ee++ ){
            if (ee >0){ add('.school'); }
            $('.schoolname').eq(ee).val($xml.find('schoolname').eq(ee).text());
            $('.stitle').eq(ee).val($xml.find('school > title').eq(ee).text());
            $('.splace').eq(ee).val($xml.find('school > place').eq(ee).text());
            $('.sStart').eq(ee).val($xml.find('school > start').eq(ee).text());
            $('.sEnd').eq(ee).val($xml.find('school > end').eq(ee).text());
            $('.sactivity').eq(ee).val($xml.find('school > activity').eq(ee).text());
            $('.vote').eq(ee).val($xml.find('school > vote').eq(ee).text());
            $('.maxvote').eq(ee).val($xml.find('school > maxvote').eq(ee).text());
          }

        }
        reader.readAsText(selectedFile);

      });

	</SCRIPT>
  </body>
</html>

*{ }