<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="mobile-web-app-capable" content="yes">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Checklist</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Encode+Sans:200" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center mt-2">
<div class="logo">Checklist </div>
</div>
</div>
<div class="row">
<div class="col-12 mt-4">
<table class="table table-sm">
<tbody>
<tr>
<td class="w-25 text-center" style="border-right:1px #41719C solid;border-top:5px #41719C solid;">Nome</td>
<td class="w-50" style="background-color:#D6E6F4;border-top:5px #41719C solid;border-right:1px #41719C solid;">
<input type="text" name="paciente" id="paciente" class="w-100">
</td>
<td class="text-center" rowspan="5" style="border-top:0">
<div class="mb-2" style="height:165px;width:172px;margin:0 auto;" id="foto">
<img src="http://via.placeholder.com/135x180" style="width:135px;height:185px;border:#41719C 2px solid;" id="foto_preview" class="img-thumbnail" alt="Foto Paciente">
</div>
</td>
</tr>
<tr>
<td style="width:200px;border-right:1px #41719C solid;" class="text-center" >Prontuário</td>
<td style="border-right:1px #41719C solid;">
<input type="text" name="prontuario" id="prontuario" class="w-100 element-white">
</td>
</tr>
<tr>
<td style="width:200px;border-right:1px #41719C solid;" class="text-center" >Diagnóstico</td>
<td style="background-color:#D6E6F4;border-right:1px #41719C solid;">
<input type="text" name="diagnostico" id="diagnostico" class="w-100">
</td>
</tr>
<tr>
<td style="width:200px;border-right:1px #41719C solid;" class="text-center" >Médico Responsável</td>
<td style="border-right:1px #41719C solid;">
<div class="select-wrapper">
<select style="border:0;" class="w-100 element-white">
<option></option>
<option>Dr. Carlos Mayrink de Souza</option>
<option>Dr. Leonel Silva Andrade Couto</option>
<option>Dr. Manoel Dias Salgado</option>
</select>
</div>
</td>
</tr>
<tr>
<td style="width:200px;border-right:1px #41719C solid;" class="text-center" >Físico Responsável</td>
<td style="background-color:#D6E6F4;border-right:1px #41719C solid;">
<div class="select-wrapper">
<select style="border:0;" class="w-100">
<option></option>
<option>Carlos Vernet Sanches</option>
<option>Cláudia Maria Luciano</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
<label class="custom-file hidden-print" style="display:none;">
<input type="file" id="btnImagemPaciente" style="width: 160px;" class="form-control form-control-sm">
<span class="custom-file-control"></span>
</label>
</div>
</div>
<div class="mb-3 text-white text-center d-block titulo">CHECKLIST – PRIMEIRA SEÇÃO NO APARELHO</div>
<div class="row">
<div class="col-8">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Identificação do Paciente
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Localização Anatômica
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Curva e Dose de Prescrição
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Número de Frações
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Parâmetros de Campo (mesa, gantry, colimador, tempo, UM)
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="">
Preenchimento de Ficha Técnica
</label>
</div>
</div>
<div class="col-4">
<div class="form-group">
<textarea style="width: 320px;height: 172px;">Observações: </textarea>
</div>
</div>
</div>
<div class="mb-5 text-white text-center d-block titulo">FÍSICO, MÉDICO E TÉCNICO PRESENTE 1º DIA</div>
<div class="row">
<div class="col-4 text-center">
<p>_______________________________________</p>
<p>Físico</p>
</div>
<div class="col-4 text-center">
<p>_______________________________________</p>
<p>Médico</p>
</div>
<div class="col-4 text-center">
<p>_______________________________________</p>
<p>Técnico</p>
</div>
</div>
<div class="mb-5 text-white text-center d-block titulo">FÍSICO, RADIOTERAPEUTA E TÉCNICO PRESENTE 1º DIA</div>
<div class="row mb-3">
<div class="col-3 text-center">
<p>___________________________</p>
<p>1ª Semana</p>
</div>
<div class="col-3 text-center">
<p>___________________________</p>
<p>2ª Semana</p>
</div>
<div class="col-3 text-center">
<p>___________________________</p>
<p>3ª Semana</p>
</div>
<div class="col-3 text-center">
<p>___________________________</p>
<p>4ª Semana</p>
</div>
</div>
<div class="row">
<div class="col-3 text-center">
<p>___________________________</p>
<p>5ª Semana</p>
</div>
<div class="col-3 text-center">
<p>___________________________</p>
<p>6ª Semana</p>
</div>
<div class="col-3 text-center">
<p>___________________________</p>
<p>7ª Semana</p>
</div>
<div class="col-3 text-center">
<p>___________________________</p>
<p>8ª Semana</p>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<textarea style="width:100%;height: 172px;border:2px #41719C solid;">Observações: </textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#foto").click(function(){
$("#btnImagemPaciente").trigger('click');
})
})
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.getElementById('foto_preview'); // $('img')[0]
img.src = URL.createObjectURL(this.files[0]); // set src to file url
img.onload = imageIsLoaded; // optional onload event listener
}
});
})
</script>
</body>
</html>
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
.custom-file-control:lang(en)::after {
content: "Selecione";
}
.custom-file-control:lang(en)::before {
content: "≫";
}
.custom-file-control {text-align: left;}
select, input {background-color:#D6E6F4;border:0;}
table td {height: 38px;}
.element-white {background-color:#fff;border:0;}
#foto {cursor: pointer;}
.titulo {background-color:#1F4A7D;font-family:'Open Sans Condensed';font-weight:700;}
textarea
{
border: 1px solid #f7f7f7;
margin: 2% auto;
resize: none;
background-image: -moz-linear-gradient (top, transparent 24px, transparent 48px,#E7EFF8 0px);
background-image: -webkit-linear-gradient(top, transparent 24px, transparent 24px,#E7EFF8 0);
-webkit-background-size: 100% 50px;
background-size: 100% 50px;
}
select{
border: 0 !important; /*Removes border*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow:'';
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}
select::-ms-expand {
display: none;
}
.select-wrapper
{
padding-left:0px;
overflow:hidden;
}
$("#foto").click(function(){
$("#btnImagemPaciente").trigger('click');
})
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
var img = document.getElementById('foto_preview'); // $('img')[0]
img.src = URL.createObjectURL(this.files[0]); // set src to file url
img.onload = imageIsLoaded; // optional onload event listener
}
});
})
