| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Anexo Fotográfico - Termo de Vistoria</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Open+Sans:wght@400;600;700&display=swap'); |
| |
| body { |
| font-family: 'Open Sans', sans-serif; |
| position: relative; |
| line-height: 1.6; |
| } |
| |
| @page { |
| size: A4; |
| margin: 2cm; |
| |
| @bottom-center { |
| content: counter(page); |
| font-family: 'Open Sans', sans-serif; |
| font-size: 10pt; |
| color: #1e3a8a; |
| } |
| } |
| |
| .header { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3cm; |
| background: white; |
| border-bottom: 1px solid #e5e7eb; |
| z-index: 100; |
| } |
| |
| .header-content { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding: 0.5cm 2cm; |
| } |
| |
| .document-title { |
| font-family: 'Merriweather', serif; |
| font-weight: 700; |
| color: #1e3a8a; |
| font-size: 14pt; |
| } |
| |
| .logo { |
| font-weight: 700; |
| color: #1e3a8a; |
| font-size: 12pt; |
| } |
| |
| .content { |
| margin-top: 3cm; |
| margin-bottom: 2cm; |
| padding: 0 2cm; |
| } |
| |
| .contract-header { |
| background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%); |
| color: white; |
| padding: 1.5cm; |
| margin-bottom: 1cm; |
| border-radius: 0.5rem; |
| } |
| |
| .clause-title { |
| position: relative; |
| padding-left: 1.5rem; |
| border-left: 4px solid #2563eb; |
| margin-top: 1.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .clause-title span { |
| font-weight: 700; |
| color: #1e3a8a; |
| } |
| |
| .signature-line { |
| border-bottom: 1px solid #1e40af; |
| width: 70%; |
| margin: 0 auto; |
| margin-top: 3rem; |
| } |
| |
| .highlight-box { |
| background-color: #eff6ff; |
| border-left: 4px solid #2563eb; |
| padding: 1rem; |
| margin: 1rem 0; |
| border-radius: 0.25rem; |
| } |
| |
| .clause-number { |
| background-color: #2563eb; |
| color: white; |
| border-radius: 4px; |
| padding: 0.25rem 0.75rem; |
| display: inline-block; |
| margin-right: 0.5rem; |
| font-weight: bold; |
| } |
| |
| .page-break { |
| page-break-after: always; |
| } |
| |
| .footer { |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 1cm; |
| text-align: center; |
| font-size: 10pt; |
| color: #6b7280; |
| border-top: 1px solid #e5e7eb; |
| padding-top: 0.3cm; |
| background: white; |
| } |
| |
| .print-btn { |
| position: fixed; |
| bottom: 1.5cm; |
| right: 2cm; |
| z-index: 100; |
| background: #1e3a8a; |
| color: white; |
| border: none; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-weight: 600; |
| cursor: pointer; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| transition: all 0.3s ease; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .print-btn:hover { |
| background: #1e40af; |
| transform: translateY(-2px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
| } |
| |
| |
| .modal { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background-color: rgba(0, 0, 0, 0.5); |
| z-index: 200; |
| justify-content: center; |
| align-items: center; |
| } |
| |
| .modal-content { |
| background-color: white; |
| padding: 2rem; |
| border-radius: 0.5rem; |
| max-width: 500px; |
| width: 90%; |
| text-align: center; |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| |
| .modal-buttons { |
| display: flex; |
| justify-content: center; |
| gap: 1rem; |
| margin-top: 1.5rem; |
| } |
| |
| .modal-btn { |
| padding: 0.5rem 1rem; |
| border-radius: 0.25rem; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| } |
| |
| .modal-btn-primary { |
| background-color: #1e40af; |
| color: white; |
| border: none; |
| } |
| |
| .modal-btn-primary:hover { |
| background-color: #1e3a8a; |
| } |
| |
| .modal-btn-secondary { |
| background-color: #e5e7eb; |
| color: #4b5563; |
| border: none; |
| } |
| |
| .modal-btn-secondary:hover { |
| background-color: #d1d5db; |
| } |
| |
| |
| @media print { |
| .header, .footer, .print-btn { |
| display: none !important; |
| } |
| |
| body { |
| margin: 0; |
| padding: 0; |
| background: white; |
| } |
| |
| .content { |
| margin-top: 0; |
| margin-bottom: 0; |
| padding: 0; |
| } |
| |
| .contract-header { |
| page-break-after: avoid; |
| } |
| |
| .page-break { |
| page-break-before: always; |
| } |
| } |
| |
| |
| .photo-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); |
| gap: 1rem; |
| margin-top: 2rem; |
| } |
| |
| .photo-item { |
| border: 1px solid #e5e7eb; |
| border-radius: 0.5rem; |
| overflow: hidden; |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); |
| } |
| |
| .photo-item img { |
| width: 100%; |
| height: 200px; |
| object-fit: cover; |
| } |
| |
| .photo-caption { |
| padding: 0.75rem; |
| background-color: white; |
| font-size: 0.875rem; |
| color: #4b5563; |
| } |
| |
| .annex-title { |
| font-size: 1.5rem; |
| font-weight: bold; |
| color: #1e3a8a; |
| margin-bottom: 1.5rem; |
| border-bottom: 2px solid #1e3a8a; |
| padding-bottom: 0.5rem; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <header class="header"> |
| <div class="header-content"> |
| <div class="document-title">ANEXO FOTOGRÁFICO - TERMO DE VISTORIA</div> |
| <div class="logo">MVICENTE ADVOCACIA</div> |
| </div> |
| </header> |
| |
| |
| <div class="content" id="content-to-print"> |
| |
| <div class="contract-header"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="flex items-center mb-4"> |
| <i class="fas fa-camera text-3xl mr-4 text-blue-200"></i> |
| <h1 class="text-3xl font-bold">ANEXO FOTOGRÁFICO</h1> |
| </div> |
| <p class="text-blue-100 font-medium">Anexo ao Termo de Vistoria do Contrato de Locação Residencial</p> |
| </div> |
| <div class="bg-white p-3 rounded-lg shadow-sm"> |
| <div class="text-center"> |
| <div class="text-blue-800 font-bold text-sm">VIGÊNCIA</div> |
| <div class="text-blue-600 font-bold">30 MESES</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-10 highlight-box"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-home text-blue-600 mr-2"></i> |
| <h3 class="font-bold text-blue-800">IMÓVEL</h3> |
| </div> |
| <p>Apartamento à Av. Gov. Fernando Costa, 127 – ap. 65, Ponta da Praia, Santos/SP – CEP 11030-181 e 1 (uma) vaga de garagem</p> |
| </div> |
| |
| <div> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-calendar-alt text-blue-600 mr-2"></i> |
| <h3 class="font-bold text-blue-800">DATA DA VISTORIA</h3> |
| </div> |
| <p>01 de maio de 2025</p> |
| </div> |
| </div> |
| |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-building text-blue-600 mr-2"></i> |
| <h3 class="font-bold text-blue-800">LOCADORA</h3> |
| </div> |
| <p>MARCELO VICENTE SOCIEDADE INDIVIDUAL DE ADVOCACIA</p> |
| </div> |
| |
| <div> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-user text-blue-600 mr-2"></i> |
| <h3 class="font-bold text-blue-800">LOCATÁRIA</h3> |
| </div> |
| <p>MARCIA DE COLLA MOREIRA</p> |
| </div> |
| |
| <div> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-user-shield text-blue-600 mr-2"></i> |
| <h3 class="font-bold text-blue-800">FIADORA</h3> |
| </div> |
| <p>GABRIELA MOREIRA CALVO</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <h2 class="text-2xl font-bold text-blue-800 mb-6 border-b border-blue-100 pb-2">FOTOS DO IMÓVEL</h2> |
| |
| <div class="mb-6"> |
| <p class="text-gray-700">As fotos abaixo documentam o estado do imóvel na data da vistoria (01/05/2025) e compõem o Termo de Vistoria assinado pelas partes.</p> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">SALA</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Sala - Vista geral"> |
| <div class="photo-caption">Foto 1 - Sala (vista geral)</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Sala - Detalhe"> |
| <div class="photo-caption">Foto 2 - Sala (detalhe)</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">QUARTO</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Quarto - Vista geral"> |
| <div class="photo-caption">Foto 3 - Quarto (vista geral)</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Quarto - Detalhe"> |
| <div class="photo-caption">Foto 4 - Quarto (detalhe)</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">COZINHA</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Cozinha - Vista geral"> |
| <div class="photo-caption">Foto 5 - Cozinha (vista geral)</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Cozinha - Detalhe"> |
| <div class="photo-caption">Foto 6 - Cozinha (detalhe)</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">BANHEIRO</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Banheiro - Vista geral"> |
| <div class="photo-caption">Foto 7 - Banheiro (vista geral)</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Banheiro - Detalhe"> |
| <div class="photo-caption">Foto 8 - Banheiro (detalhe)</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">ÁREA DE SERVIÇO</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Área de serviço"> |
| <div class="photo-caption">Foto 9 - Área de serviço</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">GARAGEM</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Vaga de garagem"> |
| <div class="photo-caption">Foto 10 - Vaga de garagem</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">ITENS EM COMODATO</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Lâmpadas com ventilador"> |
| <div class="photo-caption">Foto 11 - Lâmpadas eletrônicas com ventiladores</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Ar condicionado"> |
| <div class="photo-caption">Foto 12 - Ar condicionado Split</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Aquecedor de água"> |
| <div class="photo-caption">Foto 13 - Aquecedor de água de torneira</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Depurador de ar"> |
| <div class="photo-caption">Foto 14 - Depurador de ar</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Chuveiro elétrico"> |
| <div class="photo-caption">Foto 15 - Chuveiro elétrico</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Estante de aço"> |
| <div class="photo-caption">Foto 16 - Estante de aço</div> |
| </div> |
| </div> |
| |
| |
| <h3 class="text-xl font-bold text-blue-800 mt-8 mb-4">CHAVES E CONTROLES</h3> |
| <div class="photo-grid"> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Chaves tetra"> |
| <div class="photo-caption">Foto 17 - Chaves tetra (2 unidades)</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Controle garagem"> |
| <div class="photo-caption">Foto 18 - Controle remoto da garagem</div> |
| </div> |
| <div class="photo-item"> |
| <img src="https://drive.google.com/uc?export=view&id=1yORL_v016jPKkrIvjrH3IeEyIriDMp" alt="Token condomínio"> |
| <div class="photo-caption">Foto 19 - Token de acesso ao condomínio</div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mt-12 text-center"> |
| <p class="mb-8">Este documento compõe o Termo de Vistoria assinado em 01 de maio de 2025.</p> |
| |
| <div class="flex justify-around"> |
| <div class="w-1/2"> |
| <div class="signature-line"></div> |
| <div class="signature-name">LOCADORA: MARCELO VICENTE SOCIEDADE INDIVIDUAL DE ADVOCACIA</div> |
| </div> |
| |
| <div class="w-1/2"> |
| <div class="signature-line"></div> |
| <div class="signature-name">LOCATÁRIA: MARCIA DE COLLA MOREIRA</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="footer"> |
| MVICENTE ADVOCACIA - Av. Gov. Fernando Costa n. 127 ap. 95, Ponta da Praia, Santos/SP - CEP 11.030-181 |
| </footer> |
| |
| |
| <button class="print-btn" id="printBtn"> |
| <i class="fas fa-file-pdf"></i> Gerar PDF |
| </button> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const printBtn = document.getElementById('printBtn'); |
| |
| |
| printBtn.addEventListener('click', function() { |
| const element = document.getElementById('content-to-print'); |
| |
| |
| const opt = { |
| margin: [10, 5, 10, 5], |
| filename: 'Anexo_Fotografico_Termo_Vistoria.pdf', |
| image: { type: 'jpeg', quality: 0.98 }, |
| html2canvas: { |
| scale: 2, |
| useCORS: true, |
| allowTaint: true, |
| logging: true, |
| letterRendering: true |
| }, |
| jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }, |
| pagebreak: { mode: ['avoid-all', 'css', 'legacy'] } |
| }; |
| |
| |
| html2pdf().set(opt).from(element).save(); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maralvic/space003" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
