"Checklist médico para Impressão"
Bootstrap 4.0.0 Snippet by rodrigozem

<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 mt-2"> <div class="logo"><h2>Checklist Médico</h2></div> </div> </div> <div class="row"> <div class="col-12 mt-1"> <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 } }); })

Related: See More


Questions / Comments: