Creatore Badge Aziendale by @Codewith.it - Codewith.it

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

References

forSpecifica a quale id è associato l'elemento in cui è dichiarato.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<caption>Definisce didascalie all'interno di una tabella
<p>Serve a definire paragrafi di testo
<li>Inserisce voci all'interno di una lista
<table>Tag primario per la creazione di tabelle

Users

Log in to search for users

Explore

Find inspiration

esercitazione 6

Endurance Performance Analyzer

Prova lezione 1

Tabella primo appello

Pascal Landriscina

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 lang="it">
<head>
<meta charset="UTF-8">
<title>Creatore Badge Aziendale</title>

<style>

body{
    font-family: Arial, sans-serif;
    background:#f2f2f2;
    text-align:center;
}

.form{
    margin-top:20px;
}

input{
    padding:8px;
    margin:5px;
    width:220px;
}

button{
    padding:10px 20px;
    margin:10px;
    background:#007bff;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}

button:hover{
    background:#0056b3;
}

/* BADGE */

.badge{
    width:420px;
    height:220px;

    background: linear-gradient(to top, #b8e6b8, #ffffff);

    border-radius:12px;
    border:2px solid #333;
    margin:30px auto;
    display:flex;
    align-items:center;
    padding:15px;
    box-shadow:0 6px 15px rgba(0,0,0,0.25);
}


/* FOTO FORMATO FOTOTESSERA */

.photo{
    width:100px;
    height:130px;
    border-radius:6px;
    object-fit:cover;
    background:white;
    border:2px solid #444;
}

.info{
    flex:1;
    text-align:left;
    padding-left:20px;
}

/* HEADER */

.header{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.logo{
    width:90px;
}

.azienda{
    font-weight:light;
    font-size:18px;
}

/* TEXT */

.nome{
    font-size:22px;
    font-weight:bold;
}

.mansione{
    font-size:16px;
    color:#444;
    margin-top:6px;
}

</style>
</head>

<body>

<h2>Creatore Badge Aziendale</h2>

<div class="form">

<input type="text" id="nomeInput" placeholder="Nome"><br>
<input type="text" id="cognomeInput" placeholder="Cognome"><br>
<input type="text" id="mansioneInput" placeholder="Mansione"><br><br>

<input type="text" id="aziendaInput" placeholder="Nome Azienda"><br><br>

<input type="file" id="fotoInput" accept="image/*"><br><br>

<button onclick="aggiornaBadge()">Aggiorna Badge</button>
<button onclick="window.print()">Stampa</button>

</div>


<div class="badge">

<img id="fotoBadge" class="photo">

<div class="info">

<div class="header">
<div id="aziendaBadge" class="azienda">Nome Azienda</div>
<img src="logo.jpg" class="logo">
</div>

<div id="nomeBadge" class="nome">
Nome Cognome
</div>

<div id="mansioneBadge" class="mansione">
Mansione
</div>

</div>

</div>


<script>

function aggiornaBadge(){

let nome = document.getElementById("nomeInput").value;
let cognome = document.getElementById("cognomeInput").value;
let mansione = document.getElementById("mansioneInput").value;
let azienda = document.getElementById("aziendaInput").value;

document.getElementById("nomeBadge").innerText = nome + " " + cognome;
document.getElementById("mansioneBadge").innerText = mansione;
document.getElementById("aziendaBadge").innerText = azienda;

let file = document.getElementById("fotoInput").files[0];

if(file){
let reader = new FileReader();
reader.onload = function(e){
document.getElementById("fotoBadge").src = e.target.result;
}
reader.readAsDataURL(file);
}

}

</script>

</body>
</html>