Skip to content

portfolio de produtos

Jump to bottom
Estevam edited this page Jun 2, 2025 · 1 revision 
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PetCare AI - Gerador de Portfolio PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: #f0f8f0;
            padding: 20px;
        }

        .control-panel {
            background: white;
            padding: 25px;
            border-radius: 15px;
            margin-bottom: 20px;
            text-align: center;
            box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        }

        .control-panel h1 {
            color: #2e7d32;
            margin-bottom: 10px;
            font-size: 24px;
        }

        .generate-btn {
            background: linear-gradient(45deg, #2e7d32, #4caf50);
            color: white;
            border: none;
            padding: 18px 40px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
        }

        .generate-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(76, 175, 80, 0.4);
        }

        /* PDF Content Styles */
        .pdf-content {
            width: 210mm;
            margin: 0 auto;
            background: white;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        .pdf-page {
            width: 210mm;
            min-height: 297mm;
            padding: 0;
            page-break-after: always;
            position: relative;
            overflow: hidden;
        }

        .pdf-page:last-child {
            page-break-after: avoid;
        }

        /* Cover Page */
        .cover-page {
            background: linear-gradient(135deg, #1b5e20 0%, #2e7d32 25%, #388e3c 50%, #4caf50 75%, #66bb6a 100%);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
        }

        .cover-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(255,255,255,0.1)" opacity="0.6"><animate attributeName="opacity" values="0.3;0.8;0.3" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="80" r="1.5" fill="rgba(255,255,255,0.1)" opacity="0.4"><animate attributeName="opacity" values="0.2;0.6;0.2" dur="4s" repeatCount="indefinite"/></circle><circle cx="60" cy="30" r="0.8" fill="rgba(255,255,255,0.1)" opacity="0.5"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="2s" repeatCount="indefinite"/></circle></svg>') repeat;
            opacity: 0.4;
        }

        .cover-content {
            z-index: 2;
            position: relative;
            animation: fadeInUp 1s ease-out;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .cover-logo {
            font-size: 90px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .cover-title {
            font-size: 52px;
            font-weight: bold;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .cover-subtitle {
            font-size: 36px;
            background: rgba(255,255,255,0.2);
            padding: 18px 45px;
            border-radius: 50px;
            margin: 25px 0;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .cover-tagline {
            font-size: 20px;
            margin-top: 35px;
            opacity: 0.95;
            max-width: 600px;
            line-height: 1.4;
        }

        .cover-stats {
            margin-top: 40px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            font-size: 16px;
        }

        .stat-item {
            background: rgba(255,255,255,0.1);
            padding: 15px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }

        .stat-number {
            font-size: 32px;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }

        /* Solutions Overview Page */
        .solutions-page {
            background: linear-gradient(to bottom, #e8f5e8 0%, #ffffff 100%);
            padding: 40px;
        }

        .page-title {
            font-size: 42px;
            color: #2e7d32;
            text-align: center;
            margin-bottom: 40px;
            font-weight: bold;
            position: relative;
        }

        .page-title::after {
            content: '';
            display: block;
            width: 120px;
            height: 5px;
            background: linear-gradient(45deg, #4caf50, #66bb6a);
            margin: 15px auto;
            border-radius: 3px;
        }

        .solutions-overview {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 40px;
            margin-bottom: 50px;
        }

        .overview-text {
            font-size: 16px;
            line-height: 1.8;
            color: #333;
        }

        .overview-text h3 {
            color: #2e7d32;
            font-size: 22px;
            margin-bottom: 15px;
        }

        .overview-text p {
            margin-bottom: 15px;
        }

        .overview-text ul {
            margin-left: 20px;
            margin-top: 10px;
        }

        .overview-text li {
            margin-bottom: 8px;
        }

        .overview-stats {
            background: linear-gradient(135deg, #4caf50, #66bb6a);
            color: white;
            padding: 35px 25px;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
        }

        .overview-stats h3 {
            margin-bottom: 25px;
            font-size: 20px;
        }

        .stat-item-overview {
            margin: 20px 0;
            padding: 10px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            backdrop-filter: blur(5px);
        }

        .stat-number-overview {
            font-size: 36px;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.9;
        }

        .ecosystem-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            margin-top: 40px;
        }

        .ecosystem-card {
            background: white;
            border: 2px solid #e8f5e8;
            border-radius: 15px;
            padding: 25px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .ecosystem-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(45deg, #4caf50, #66bb6a);
        }

        .ecosystem-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(76, 175, 80, 0.15);
        }

        .ecosystem-icon {
            font-size: 42px;
            margin-bottom: 15px;
            display: block;
        }

        .ecosystem-title {
            font-size: 18px;
            color: #2e7d32;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .ecosystem-description {
            font-size: 13px;
            line-height: 1.6;
            color: #555;
            margin-bottom: 15px;
        }

        .ecosystem-tech {
            font-size: 11px;
            color: #666;
            background: #f1f8e9;
            padding: 8px 12px;
            border-radius: 15px;
            display: inline-block;
            margin-right: 8px;
            margin-bottom: 5px;
        }

        /* Tech Architecture Page */
        .architecture-page {
            background: linear-gradient(to bottom, #ffffff 0%, #f1f8e9 100%);
            padding: 40px;
        }

        .architecture-diagram {
            background: white;
            border: 3px solid #4caf50;
            border-radius: 20px;
            padding: 35px;
            margin: 35px 0;
            text-align: center;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }

        .diagram-title {
            font-size: 22px;
            color: #2e7d32;
            margin-bottom: 25px;
            font-weight: bold;
        }

        .diagram-layer {
            background: linear-gradient(135deg, #e8f5e8, #c8e6c8);
            border: 2px solid #4caf50;
            border-radius: 15px;
            padding: 20px;
            margin: 20px 0;
            position: relative;
        }

        .layer-title {
            font-weight: bold;
            color: #2e7d32;
            margin-bottom: 15px;
            font-size: 16px;
        }

        .layer-components {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 10px;
        }

        .component {
            background: white;
            border: 1px solid #4caf50;
            border-radius: 10px;
            padding: 12px 16px;
            margin: 5px;
            font-size: 12px;
            color: #2e7d32;
            font-weight: 500;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        /* Stack Page */
        .stack-page {
            background: linear-gradient(to bottom, #f1f8e9 0%, #ffffff 100%);
            padding: 40px;
        }

        .stack-categories {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 35px;
            margin-top: 35px;
        }

        .stack-category {
            background: white;
            border-radius: 18px;
            padding: 30px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.1);
            border: 1px solid #e8f5e8;
        }

        .category-title {
            font-size: 22px;
            color: #2e7d32;
            font-weight: bold;
            margin-bottom: 25px;
            text-align: center;
        }

        .tech-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .tech-item {
            background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
            border: 1px solid #c8e6c8;
            border-radius: 12px;
            padding: 18px;
            text-align: center;
            transition: all 0.2s ease;
        }

        .tech-item:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 10px rgba(76, 175, 80, 0.2);
        }

        .tech-icon {
            font-size: 26px;
            margin-bottom: 10px;
            display: block;
        }

        .tech-name {
            font-size: 12px;
            color: #2e7d32;
            font-weight: bold;
        }

        .tech-version {
            font-size: 10px;
            color: #666;
            margin-top: 3px;
        }

        /* AI Features Page */
        .ai-page {
            background: linear-gradient(135deg, #e8f5e8 0%, #ffffff 50%, #f1f8e9 100%);
            padding: 40px;
        }

        .ai-features {
            display: grid;
            grid-template-columns: 1fr;
            gap: 30px;
            margin-top: 30px;
        }

        .ai-feature {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
            border-left: 5px solid #4caf50;
        }

        .ai-feature-title {
            font-size: 24px;
            color: #2e7d32;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .ai-feature-icon {
            font-size: 32px;
        }

        .ai-feature-description {
            color: #555;
            line-height: 1.7;
            margin-bottom: 20px;
        }

        .ai-capabilities {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }

        .capability {
            background: #f8fff8;
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #e0f2e0;
            font-size: 13px;
        }

        .capability strong {
            color: #2e7d32;
        }

        /* Contact Page */
        .contact-page {
            background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
            color: white;
            padding: 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .contact-content {
            max-width: 700px;
            margin: 0 auto;
        }

        .contact-title {
            font-size: 48px;
            margin-bottom: 25px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .contact-subtitle {
            font-size: 22px;
            margin-bottom: 45px;
            opacity: 0.95;
            line-height: 1.4;
        }

        .contact-info {
            background: rgba(255,255,255,0.15);
            border-radius: 20px;
            padding: 35px;
            margin: 35px 0;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .contact-item {
            font-size: 18px;
            margin: 20px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .contact-icon {
            font-size: 24px;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-top: 40px;
            padding: 30px;
            background: rgba(255,255,255,0.1);
            border-radius: 15px;
            backdrop-filter: blur(5px);
        }

        .service-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 15px;
        }

        .hidden {
            display: none;
        }

        /* Print styles */
        @media print {
            body { margin: 0; padding: 0; }
            .control-panel { display: none; }
            .pdf-content { box-shadow: none; }
        }
    </style>
</head>
<body>
    <div class="control-panel">
        <h1>🐾 PetCare AI - Portfolio Completo</h1>
        <p>Gerador de PDF profissional com todos os produtos e tecnologias</p>
        <button class="generate-btn" onclick="generatePDF()">📄 Gerar Portfolio PDF</button>
    </div>

    <div class="pdf-content" id="pdf-content">
        <!-- Página 1: Capa -->
        <div class="pdf-page cover-page">
            <div class="cover-content">
                <div class="cover-logo">🐾</div>
                <h1 class="cover-title">PetCare AI</h1>
                <div class="cover-subtitle">ECOSSISTEMA COMPLETO</div>
                <p class="cover-tagline">Revolucionando o cuidado pet através de tecnologia avançada, inteligência artificial e soluções integradas para tutores, veterinários e empresas</p>
                
                <div class="cover-stats">
                    <div class="stat-item">
                        <span class="stat-number">8</span>
                        <span class="stat-label">Aplicações Desenvolvidas</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">5</span>
                        <span class="stat-label">Plataformas Suportadas</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-number">12+</span>
                        <span class="stat-label">Tecnologias Integradas</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Página 2: Ecossistema de Produtos -->
        <div class="pdf-page solutions-page">
            <h2 class="page-title">Ecossistema PetCare AI</h2>
            
            <div class="solutions-overview">
                <div class="overview-text">
                    <h3>Plataforma Integrada Completa</h3>
                    <p>O PetCare AI é um ecossistema tecnológico abrangente que oferece soluções para todos os aspectos do cuidado animal, desde aplicações móveis até sistemas de análise avançada com inteligência artificial.</p>
                    
                    <p><strong>Principais Diferenciais:</strong></p>
                    <ul>
                        <li>Inteligência Artificial avançada com Google Gemini 2.0</li>
                        <li>Análise preditiva e machine learning</li>
                        <li>Interface multiplataforma unificada</li>
                        <li>Dados em tempo real e analytics</li>
                        <li>Integração completa entre aplicações</li>
                    </ul>
                </div>
                
                <div class="overview-stats">
                    <h3>Impacto e Alcance</h3>
                    <div class="stat-item-overview">
                        <span class="stat-number-overview">100%</span>
                        <span class="stat-label">Multiplataforma</span>
                    </div>
                    <div class="stat-item-overview">
                        <span class="stat-number-overview">3</span>
                        <span class="stat-label">Tipos de IA Integrada</span>
                    </div>
                    <div class="stat-item-overview">
                        <span class="stat-number-overview">5</span>
                        <span class="stat-label">Frameworks Utilizados</span>
                    </div>
                    <div class="stat-item-overview">
                        <span class="stat-number-overview">24/7</span>
                        <span class="stat-label">Disponibilidade</span>
                    </div>
                </div>
            </div>

            <div class="ecosystem-grid">
                <div class="ecosystem-card">
                    <span class="ecosystem-icon">📱</span>
                    <h3 class="ecosystem-title">PetCare AI Mobile</h3>
                    <p class="ecosystem-description">Aplicativo React Native completo com IA para cardápios personalizados, monitoramento de saúde, controle de gastos e localização de serviços veterinários.</p>
                    <div>
                        <span class="ecosystem-tech">React Native 0.72</span>
                        <span class="ecosystem-tech">Google Gemini AI</span>
                        <span class="ecosystem-tech">AsyncStorage</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">🌐</span>
                    <h3 class="ecosystem-title">PetCare AI Web</h3>
                    <p class="ecosystem-description">Aplicação web moderna em Vue.js 3 com TypeScript, oferecendo gerenciamento completo de pets e integração com todas as funcionalidades.</p>
                    <div>
                        <span class="ecosystem-tech">Vue.js 3</span>
                        <span class="ecosystem-tech">TypeScript</span>
                        <span class="ecosystem-tech">Pinia</span>
                        <span class="ecosystem-tech">Tailwind CSS</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">💻</span>
                    <h3 class="ecosystem-title">PetCare AI Desktop</h3>
                    <p class="ecosystem-description">Aplicação desktop multiplataforma com Electron, oferecendo experiência nativa e funcionalidades offline para Windows, macOS e Linux.</p>
                    <div>
                        <span class="ecosystem-tech">Electron 25.8</span>
                        <span class="ecosystem-tech">React 18.2</span>
                        <span class="ecosystem-tech">Chart.js</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">🔗</span>
                    <h3 class="ecosystem-title">PetCare AI API</h3>
                    <p class="ecosystem-description">API RESTful robusta desenvolvida em NestJS com TypeScript, fornecendo endpoints seguros e documentação Swagger completa.</p>
                    <div>
                        <span class="ecosystem-tech">NestJS</span>
                        <span class="ecosystem-tech">Prisma ORM</span>
                        <span class="ecosystem-tech">SQLite</span>
                        <span class="ecosystem-tech">JWT Auth</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">📊</span>
                    <h3 class="ecosystem-title">PetCare Analytics</h3>
                    <p class="ecosystem-description">Sistema avançado de análise de dados em Streamlit com visualizações interativas, mapas de calor e modelos preditivos para insights profundos.</p>
                    <div>
                        <span class="ecosystem-tech">Streamlit</span>
                        <span class="ecosystem-tech">Python</span>
                        <span class="ecosystem-tech">Plotly</span>
                        <span class="ecosystem-tech">Scikit-learn</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">🤖</span>
                    <h3 class="ecosystem-title">PetCare AI ML</h3>
                    <p class="ecosystem-description">Sistema de análise de saúde animal com IA, utilizando TensorFlow.js e Google Gemini 2.0 para diagnósticos por imagem e sintomas.</p>
                    <div>
                        <span class="ecosystem-tech">TensorFlow.js</span>
                        <span class="ecosystem-tech">Gemini 2.0</span>
                        <span class="ecosystem-tech">React + TS</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">📋</span>
                    <h3 class="ecosystem-title">PetCare Tasks</h3>
                    <p class="ecosystem-description">Sistema de gerenciamento de projetos e tarefas em Next.js 14, implementando metodologias ágeis e colaboração em equipe.</p>
                    <div>
                        <span class="ecosystem-tech">Next.js 14</span>
                        <span class="ecosystem-tech">PostgreSQL</span>
                        <span class="ecosystem-tech">NextAuth</span>
                    </div>
                </div>

                <div class="ecosystem-card">
                    <span class="ecosystem-icon">🏥</span>
                    <h3 class="ecosystem-title">Sistema Consultório</h3>
                    <p class="ecosystem-description">Aplicação Angular para gestão de consultórios veterinários, com agendamentos, histórico médico e integração com outras plataformas.</p>
                    <div>
                        <span class="ecosystem-tech">Angular 19</span>
                        <span class="ecosystem-tech">TypeScript</span>
                        <span class="ecosystem-tech">Angular CLI</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Página 3: Arquitetura Técnica -->
        <div class="pdf-page architecture-page">
            <h2 class="page-title">Arquitetura e Integração</h2>
            
            <div class="architecture-diagram">
                <h3 class="diagram-title">Modelo de Arquitetura Distribuída</h3>
                
                <div class="diagram-layer">
                    <div class="layer-title">🖥️ Camada de Apresentação</div>
                    <div class="layer-components">
                        <div class="component">📱 React Native App</div>
                        <div class="component">🌐 Vue.js Web App</div>
                        <div class="component">💻 Electron Desktop</div>
                        <div class="component">🏥 Angular Consultório</div>
                    </div>
                </div>

                <div class="diagram-layer">
                    <div class="layer-title">🔗 Camada de API e Serviços</div>
                    <div class="layer-components">
                        <div class="component">🚀 NestJS API</div>
                        <div class="component">🔐 JWT Authentication</div>
                        <div class="component">📊 Analytics Engine</div>
                        <div class="component">🤖 AI/ML Services</div>
                    </div>
                </div>

                <div class="diagram-layer">
                    <div class="layer-title">🧠 Camada de Inteligência Artificial</div>
                    <div class="layer-components">
                        <div class="component">🎯 Google Gemini 2.0</div>
                        <div class="component">📸 TensorFlow.js</div>
                        <div class="component">📈 Scikit-learn</div>
                        <div class="component">🔍 NLTK Processing</div>
                    </div>
                </div>

                <div class="diagram-layer">
                    <div class="layer-title">🗄️ Camada de Dados</div>
                    <div class="layer-components">
                        <div class="component">🐘 PostgreSQL</div>
                        <div class="component">📄 SQLite</div>
                        <div class="component">💾 Local Storage</div>
                        <div class="component">☁️ Cloud Storage</div>
                    </div>
                </div>

                <div class="diagram-layer">
                    <div class="layer-title">🌍 Infraestrutura e Deploy</div>
                    <div class="layer-components">
                        <div class="component">⚡ Vercel</div>
                        <div class="component">🐳 Docker</div>
                        <div class="component">📱 App Stores</div>
                        <div class="component">🔄 CI/CD Pipeline</div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 25px;">
                <div style="background: white; padding: 25px; border-radius: 15px; border-left: 4px solid #4caf50;">
                    <h4 style="color: #2e7d32; margin-bottom: 15px;">🔄 Fluxo de Dados</h4>
                    <p style="font-size: 13px; line-height: 1.6; color: #555;">
                        Os dados fluem seamlessly entre todas as aplicações através da API central, garantindo sincronização e consistência em tempo real.
                    </p>
                </div>
                <div style="background: white; padding: 25px; border-radius: 15px; border-left: 4px solid #2e7d32;">
                    <h4 style="color: #2e7d32; margin-bottom: 15px;">🛡️ Segurança</h4>
                    <p style="font-size: 13px; line-height: 1.6; color: #555;">
                        Implementação de JWT, HTTPS, validação de dados e controle de acesso em todas as camadas da aplicação.
                    </p>
                </div>
            </div>
        </div>

        <!-- Página 4: Inteligência Artificial -->
        <div class="pdf-page ai-page">
            <h2 class="page-title">Inteligência Artificial Integrada</h2>
            
            <div class="ai-features">
                <div class="ai-feature">
                    <h3 class="ai-feature-title">
                        <span class="ai-feature-icon">🍽️</span>
                        Cardápios Personalizados com IA
                    </h3>
                    <p class="ai-feature-description">
                        Sistema avançado que utiliza Google Gemini AI para gerar cardápios completamente personalizados baseados no perfil específico de cada pet, considerando idade, peso, raça, condições de saúde e preferências do tutor.
                    </p>
                    <div class="ai-capabilities">
                        <div class="capability">
                            <strong>Análise Nutricional:</strong> Cálculo preciso de macronutrientes e micronutrientes necessários
                        </div>
                        <div class="capability">
                            <strong>Restrições Alimentares:</strong> Consideração automática de alergias e condições médicas
                        </div>
                        <div class="capability">
                            <strong>Orçamento Inteligente:</strong> Adequação às preferências econômicas do tutor
                        </div>
                        <div class="capability">
                            <strong>Variedade Semanal:</strong> Cardápios diversificados para evitar monotonia alimentar
                        </div>
                    </div>
                </div>

                <div class="ai-feature">
                    <h3 class="ai-feature-title">
                        <span class="ai-feature-icon">🩺</span>
                        Análise de Saúde por Imagem
                    </h3>
                    <p class="ai-feature-description">
                        Tecnologia revolucionária que combina Google Gemini 2.0 com TensorFlow.js para análise visual de saúde animal, detectando possíveis problemas através de fotografias e correlacionando com sintomas relatados.
                    </p>
                    <div class="ai-capabilities">
                        <div class="capability">
                            <strong>Reconhecimento Visual:</strong> Identificação de anomalias em olhos, pele e postura
                        </div>
                        <div class="capability">
                            <strong>Análise Multimodal:</strong> Combinação de imagem com descrição de sintomas
                        </div>
                        <div class="capability">
                            <strong>Níveis de Risco:</strong> Classificação automática em baixo, médio e alto risco
                        </div>
                        <div class="capability">
                            <strong>Recomendações:</strong> Orientações específicas sobre quando procurar veterinário
                        </div>
                    </div>
                </div>

                <div class="ai-feature">
                    <h3 class="ai-feature-title">
                        <span class="ai-feature-icon">📊</span>
                        Analytics Preditivos
                    </h3>
                    <p class="ai-feature-description">
                        Sistema de análise avançada que utiliza machine learning para identificar padrões, prever tendências de saúde e fornecer insights acionáveis sobre o bem-estar dos pets ao longo do tempo.
                    </p>
                    <div class="ai-capabilities">
                        <div class="capability">
                            <strong>Análise de Padrões:</strong> Identificação de correlações entre comportamento e saúde
                        </div>
                        <div class="capability">
                            <strong>Previsões de Saúde:</strong> Antecipação de possíveis problemas baseada em histórico
                        </div>
                        <div class="capability">
                            <strong>Clustering Inteligente:</strong> Agrupamento de pets similares para benchmarking
                        </div>
                        <div class="capability">
                            <strong>Processamento NLP:</strong> Análise de texto para insights comportamentais
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 35px; background: linear-gradient(135deg, #4caf50, #66bb6a); color: white; padding: 30px; border-radius: 20px; text-align: center;">
                <h3 style="margin-bottom: 20px; font-size: 24px;">🎯 Precisão e Confiabilidade</h3>
                <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 25px;">
                    <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px; backdrop-filter: blur(5px);">
                        <div style="font-size: 32px; font-weight: bold; margin-bottom: 8px;">85%</div>
                        <div style="font-size: 14px;">Precisão na Análise de Imagens</div>
                    </div>
                    <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px; backdrop-filter: blur(5px);">
                        <div style="font-size: 32px; font-weight: bold; margin-bottom: 8px;">92%</div>
                        <div style="font-size: 14px;">Assertividade em Cardápios</div>
                    </div>
                    <div style="background: rgba(255,255,255,0.1); padding: 20px; border-radius: 15px; backdrop-filter: blur(5px);">
                        <div style="font-size: 32px; font-weight: bold; margin-bottom: 8px;">3s</div>
                        <div style="font-size: 14px;">Tempo Médio de Análise</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Página 5: Stack Tecnológico -->
        <div class="pdf-page stack-page">
            <h2 class="page-title">Stack Tecnológico Avançado</h2>
            
            <div class="stack-categories">
                <div class="stack-category">
                    <h3 class="category-title">🖥️ Frontend & Mobile</h3>
                    <div class="tech-items">
                        <div class="tech-item">
                            <span class="tech-icon">⚛️</span>
                            <div class="tech-name">React Native</div>
                            <div class="tech-version">v0.72</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🟢</span>
                            <div class="tech-name">Vue.js</div>
                            <div class="tech-version">v3.0</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">⚛️</span>
                            <div class="tech-name">React</div>
                            <div class="tech-version">v18.2</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🔺</span>
                            <div class="tech-name">Angular</div>
                            <div class="tech-version">v19</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">⚡</span>
                            <div class="tech-name">Electron</div>
                            <div class="tech-version">v25.8</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🎨</span>
                            <div class="tech-name">Tailwind CSS</div>
                            <div class="tech-version">v3.3</div>
                        </div>
                    </div>
                </div>

                <div class="stack-category">
                    <h3 class="category-title">🚀 Backend & APIs</h3>
                    <div class="tech-items">
                        <div class="tech-item">
                            <span class="tech-icon">🚀</span>
                            <div class="tech-name">NestJS</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">⚫</span>
                            <div class="tech-name">Next.js</div>
                            <div class="tech-version">v14</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🟢</span>
                            <div class="tech-name">Node.js</div>
                            <div class="tech-version">v18+</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">📊</span>
                            <div class="tech-name">Streamlit</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🔗</span>
                            <div class="tech-name">GraphQL</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🔐</span>
                            <div class="tech-name">JWT Auth</div>
                            <div class="tech-version">Secure</div>
                        </div>
                    </div>
                </div>

                <div class="stack-category">
                    <h3 class="category-title">🤖 IA & Machine Learning</h3>
                    <div class="tech-items">
                        <div class="tech-item">
                            <span class="tech-icon">🎯</span>
                            <div class="tech-name">Google Gemini</div>
                            <div class="tech-version">v2.0</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🧠</span>
                            <div class="tech-name">TensorFlow.js</div>
                            <div class="tech-version">v4.15</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🐍</span>
                            <div class="tech-name">Scikit-learn</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">📊</span>
                            <div class="tech-name">Pandas</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">📈</span>
                            <div class="tech-name">Plotly</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🔍</span>
                            <div class="tech-name">NLTK</div>
                            <div class="tech-version">Latest</div>
                        </div>
                    </div>
                </div>

                <div class="stack-category">
                    <h3 class="category-title">🗄️ Banco de Dados</h3>
                    <div class="tech-items">
                        <div class="tech-item">
                            <span class="tech-icon">🐘</span>
                            <div class="tech-name">PostgreSQL</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">📄</span>
                            <div class="tech-name">SQLite</div>
                            <div class="tech-version">Latest</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🔷</span>
                            <div class="tech-name">Prisma ORM</div>
                            <div class="tech-version">v5.7</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🔄</span>
                            <div class="tech-name">Redis</div>
                            <div class="tech-version">Cache</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">💾</span>
                            <div class="tech-name">Local Storage</div>
                            <div class="tech-version">Browser</div>
                        </div>
                        <div class="tech-item">
                            <span class="tech-icon">🟪</span>
                            <div class="tech-name">Pinia Store</div>
                            <div class="tech-version">Vue</div>
                        </div>
                    </div>
                </div>
            </div>

            <div style="margin-top: 40px; background: white; padding: 30px; border-radius: 20px; border: 2px solid #4caf50;">
                <h3 style="color: #2e7d32; text-align: center; margin-bottom: 25px; font-size: 22px;">🛠️ Ferramentas de Desenvolvimento</h3>
                <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;">
                    <div style="text-align: center; padding: 15px; background: #f8fff8; border-radius: 10px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📝</div>
                        <div style="font-size: 12px; color: #2e7d32; font-weight: bold;">TypeScript</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: #f8fff8; border-radius: 10px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">🐳</div>
                        <div style="font-size: 12px; color: #2e7d32; font-weight: bold;">Docker</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: #f8fff8; border-radius: 10px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">📚</div>
                        <div style="font-size: 12px; color: #2e7d32; font-weight: bold;">Swagger</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: #f8fff8; border-radius: 10px;">
                        <div style="font-size: 24px; margin-bottom: 8px;">⚡</div>
                        <div style="font-size: 12px; color: #2e7d32; font-weight: bold;">Vercel</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Página 6: Contato e Serviços -->
        <div class="pdf-page contact-page">
            <div class="contact-content">
                <div class="contact-title">🐾 PetCare AI</div>
                <p class="contact-subtitle">Transforme o cuidado animal da sua empresa com nossas soluções tecnológicas avançadas</p>
                
                <div class="contact-info">
                    <div class="contact-item">
                        <span class="contact-icon">📧</span>
                        <span>contato@petcareai.com.br</span>
                    </div>
                    <div class="contact-item">
                        <span class="contact-icon">📱</span>
                        <span>+55 (48) 99999-9999</span>
                    </div>
                    <div class="contact-item">
                        <span class="contact-icon">🌐</span>
                        <span>www.petcareai.com.br</span>
                    </div>
                    <div class="contact-item">
                        <span class="contact-icon">📍</span>
                        <span>Florianópolis, SC - Brasil</span>
                    </div>
                </div>

                <div style="margin-top: 40px; background: rgba(255,255,255,0.1); padding: 35px; border-radius: 20px; backdrop-filter: blur(5px);">
                    <h3 style="margin-bottom: 25px; font-size: 26px;">🚀 Nossos Serviços</h3>
                    <div class="services-grid">
                        <div class="service-item">
                            <span>✅</span>
                            <span>Desenvolvimento de Apps Mobile</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>Aplicações Web Responsivas</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>Sistemas Desktop Multiplataforma</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>APIs RESTful Robustas</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>Soluções de Inteligência Artificial</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>Analytics e Machine Learning</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>Consultoria Técnica Especializada</span>
                        </div>
                        <div class="service-item">
                            <span>✅</span>
                            <span>Suporte Técnico 24/7</span>
                        </div>
                    </div>
                </div>

                <div style="margin-top: 40px; font-size: 18px; line-height: 1.6;">
                    <p><strong>💡 Pronto para revolucionar seu negócio pet?</strong></p>
                    <p>Entre em contato conosco e descubra como nossas soluções podem transformar a experiência dos seus clientes e otimizar seus processos.</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        function generatePDF() {
            const element = document.getElementById('pdf-content');
            const button = document.querySelector('.generate-btn');
            
            // Mostrar loading
            button.innerHTML = '🔄 Gerando Portfolio PDF...';
            button.disabled = true;
            
            const options = {
                margin: 0,
                filename: 'PetCare-AI-Portfolio-Completo.pdf',
                image: { type: 'jpeg', quality: 0.98 },
                html2canvas: { 
                    scale: 2,
                    useCORS: true,
                    letterRendering: true,
                    allowTaint: false,
                    height: window.innerHeight,
                    width: window.innerWidth,
                    scrollX: 0,
                    scrollY: 0
                },
                jsPDF: { 
                    unit: 'mm', 
                    format: 'a4', 
                    orientation: 'portrait',
                    compress: true
                },
                pagebreak: { 
                    mode: 'avoid-all', 
                    before: '.pdf-page',
                    after: '.pdf-page'
                }
            };

            html2pdf().set(options).from(element).save().then(() => {
                // Resetar botão
                button.innerHTML = '✅ Portfolio PDF Gerado com Sucesso!';
                button.style.background = 'linear-gradient(45deg, #2e7d32, #4caf50)';
                setTimeout(() => {
                    button.innerHTML = '📄 Gerar Portfolio PDF';
                    button.disabled = false;
                    button.style.background = 'linear-gradient(45deg, #2e7d32, #4caf50)';
                }, 4000);
            }).catch(error => {
                console.error('Erro ao gerar PDF:', error);
                button.innerHTML = '❌ Erro ao Gerar PDF - Tentar Novamente';
                button.style.background = 'linear-gradient(45deg, #d32f2f, #f44336)';
                setTimeout(() => {
                    button.innerHTML = '📄 Gerar Portfolio PDF';
                    button.disabled = false;
                    button.style.background = 'linear-gradient(45deg, #2e7d32, #4caf50)';
                }, 4000);
            });
        }

        // Carregar animações quando a página carrega
        window.addEventListener('load', function() {
            console.log('PetCare AI Portfolio Generator carregado com sucesso!');
            
            // Adicionar efeito de hover nas tech-items
            document.querySelectorAll('.tech-item').forEach(item => {
                item.addEventListener('mouseenter', function() {
                    this.style.transform = 'scale(1.05) rotate(1deg)';
                });
                item.addEventListener('mouseleave', function() {
                    this.style.transform = 'scale(1) rotate(0deg)';
                });
            });

            // Adicionar efeito nas ecosystem-cards
            document.querySelectorAll('.ecosystem-card').forEach(card => {
                card.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-8px) scale(1.02)';
                });
                card.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0) scale(1)';
                });
            });
        });

        // Adicionar efeito de partículas na capa
        function createParticles() {
            const coverPage = document.querySelector('.cover-page');
            if (coverPage) {
                for (let i = 0; i < 15; i++) {
                    const particle = document.createElement('div');
                    particle.innerHTML = '🐾';
                    particle.style.position = 'absolute';
                    particle.style.fontSize = Math.random() * 20 + 10 + 'px';
                    particle.style.left = Math.random() * 100 + '%';
                    particle.style.top = Math.random() * 100 + '%';
                    particle.style.opacity = Math.random() * 0.3 + 0.1;
                    particle.style.animation = `float ${Math.random() * 3 + 2}s ease-in-out infinite`;
                    particle.style.zIndex = '1';
                    coverPage.appendChild(particle);
                }
            }
        }

        // Executar após carregamento
        setTimeout(createParticles, 500);
    </script>
</body>
</html>

Clone this wiki locally