Spaces:
Running
Running
| <html lang="pt-br"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <meta name="description" content="Slide Deck 16:9 Profissional v2.0 - Apresentações modernas com design Flat 2.0"> | |
| <meta name="theme-color" content="#6366f1"> | |
| <title>FlatSlide Pro 2.0 🚀 • Apresentações Modernas</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script defer src="script.js"></script> | |
| </head> | |
| <body> | |
| <!-- Skip Links for Accessibility --> | |
| <a href="#slideContainer" class="skip-link">Pular para o conteúdo principal</a> | |
| <div class="theme-wrapper"> | |
| <header class="topbar"> | |
| <div class="brand"> | |
| <div class="brand-mark" aria-hidden="true"></div> | |
| <div class="brand-text">FlatSlide Pro</div> | |
| <div class="version-badge">v2.0</div> | |
| </div> | |
| <div class="topbar-actions"> | |
| <div class="theme-selector" role="group" aria-label="Seletor de tema"> | |
| <button id="lightThemeBtn" class="theme-btn" aria-label="Modo claro" title="Modo claro"> | |
| <i data-feather="sun"></i> | |
| </button> | |
| <button id="darkThemeBtn" class="theme-btn" aria-label="Modo escuro" title="Modo escuro"> | |
| <i data-feather="moon"></i> | |
| </button> | |
| <button id="autoThemeBtn" class="theme-btn active" aria-label="Modo automático" title="Modo automático"> | |
| <i data-feather="monitor"></i> | |
| </button> | |
| </div> | |
| <button id="fullscreenBtn" class="icon-btn" aria-label="Tela cheia" title="Tela cheia (F11)"> | |
| <i data-feather="maximize"></i> | |
| </button> | |
| <button id="settingsBtn" class="icon-btn" aria-label="Configurações" title="Configurações"> | |
| <i data-feather="settings"></i> | |
| </button> | |
| </div> | |
| </header> | |
| <main class="stage" role="application" aria-label="Apresentação em slides"> | |
| <div id="slideContainer" class="slide-container" aria-live="polite"> | |
| <!-- Slide 1: Capa Enhanced --> | |
| <section class="slide is-active" data-slide="1" role="group" aria-roledescription="slide" aria-label="Slide 1 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner center"> | |
| <div class="hero-content"> | |
| <div class="chip pulse">Novo • 2025</div> | |
| <h1 class="title-xl gradient-text">FlatSlide Pro 2.0</h1> | |
| <p class="subtitle-enhanced">Apresentações profissionais com design moderno, animações suaves e experiência premium</p> | |
| <div class="features-preview"> | |
| <div class="feature-badge"> | |
| <i data-feather="zap"></i> | |
| <span>Lightning Fast</span> | |
| </div> | |
| <div class="feature-badge"> | |
| <i data-feather="shield"></i> | |
| <span>100% Seguro</span> | |
| </div> | |
| <div class="feature-badge"> | |
| <i data-feather="smartphone"></i> | |
| <span>Mobile First</span> | |
| </div> | |
| </div> | |
| <div class="cta-row"> | |
| <button class="btn btn-primary pulse" id="startSlides"> | |
| <i data-feather="play"></i> | |
| Iniciar Apresentação | |
| </button> | |
| <button class="btn btn-ghost" id="viewSamples"> | |
| <i data-feather="eye"></i> | |
| Ver Demonstração | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 2: Two-Column Enhanced com Interactive Card --> | |
| <section class="slide" data-slide="2" role="group" aria-roledescription="slide" aria-label="Slide 2 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner two-col"> | |
| <div class="col"> | |
| <div class="kicker">Visão Geral</div> | |
| <h2 class="title">Design System 2.0</h2> | |
| <p class="lead"> | |
| Evolução do Flat Design com profundidade sutil, hierarquia clara e experiência de usuário superior. | |
| Cada elemento foi pensado para máxima eficiência e impacto visual. | |
| </p> | |
| <ul class="checklist-enhanced"> | |
| <li><i data-feather="check-circle"></i>Design system consistente</li> | |
| <li><i data-feather="check-circle"></i>Componentes reutilizáveis</li> | |
| <li><i data-feather="check-circle"></i>Acessibilidade integrada</li> | |
| <li><i data-feather="check-circle"></i>Otimizado para performance</li> | |
| </ul> | |
| <div class="stat-preview"> | |
| <div class="mini-stat"> | |
| <span class="stat-number">99%</span> | |
| <span class="stat-label">Performance Score</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="interactive-card"> | |
| <div class="card-header"> | |
| <div class="avatar enhanced"></div> | |
| <div class="status-dot online"></div> | |
| </div> | |
| <div class="card-content"> | |
| <div class="metric"> | |
| <span class="metric-value">2.4s</span> | |
| <span class="metric-label">Load Time</span> | |
| </div> | |
| <div class="progress-rings"> | |
| <div class="ring ring-1"><span>85%</span></div> | |
| <div class="ring ring-2"><span>92%</span></div> | |
| <div class="ring ring-3"><span>78%</span></div> | |
| </div> | |
| </div> | |
| <div class="chart-bars"> | |
| <div class="bar-enhanced b1"></div> | |
| <div class="bar-enhanced b2"></div> | |
| <div class="bar-enhanced b3"></div> | |
| <div class="bar-enhanced b4"></div> | |
| <div class="bar-enhanced b5"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 3: Photo Grid Enhanced --> | |
| <section class="slide" data-slide="3" role="group" aria-roledescription="slide" aria-label="Slide 3 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner"> | |
| <div class="kicker">Galeria Premium</div> | |
| <h2 class="title">Showcase Visual</h2> | |
| <div class="photo-grid-enhanced"> | |
| <figure class="photo-enhanced p1"> | |
| <div class="photo-overlay"> | |
| <div class="overlay-content"> | |
| <i data-feather="star"></i> | |
| <span>Produto</span> | |
| </div> | |
| </div> | |
| <figcaption>Design do Produto</figcaption> | |
| </figure> | |
| <figure class="photo-enhanced p2"> | |
| <div class="photo-overlay"> | |
| <div class="overlay-content"> | |
| <i data-feather="activity"></i> | |
| <span>Processo</span> | |
| </div> | |
| </div> | |
| <figcaption>Metodologia</figcaption> | |
| </figure> | |
| <figure class="photo-enhanced p3"> | |
| <div class="photo-overlay"> | |
| <div class="overlay-content"> | |
| <i data-feather="users"></i> | |
| <span>Equipe</span> | |
| </div> | |
| </div> | |
| <figcaption>Time</figcaption> | |
| </figure> | |
| <figure class="photo-enhanced p4"> | |
| <div class="photo-overlay"> | |
| <div class="overlay-content"> | |
| <i data-feather="trophy"></i> | |
| <span>Resultado</span> | |
| </div> | |
| </div> | |
| <figcaption>Conquista</figcaption> | |
| </figure> | |
| </div> | |
| <div class="gallery-stats"> | |
| <div class="stat-item"> | |
| <span class="stat-number">150+</span> | |
| <span class="stat-label">Projetos</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">98%</span> | |
| <span class="stat-label">Sucesso</span> | |
| </div> | |
| <div class="stat-item"> | |
| <span class="stat-number">4.9★</span> | |
| <span class="stat-label">Avaliação</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 4: Timeline Enhanced --> | |
| <section class="slide" data-slide="4" role="group" aria-roledescription="slide" aria-label="Slide 4 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner"> | |
| <div class="kicker">Roadmap</div> | |
| <h2 class="title">Timeline do Projeto</h2> | |
| <div class="timeline-enhanced"> | |
| <div class="timeline-item active"> | |
| <div class="timeline-marker"> | |
| <i data-feather="search"></i> | |
| </div> | |
| <div class="timeline-content"> | |
| <div class="timeline-header"> | |
| <div class="time">Semana 1</div> | |
| <div class="status completed">Concluído</div> | |
| </div> | |
| <div class="desc">Descoberta, research e alinhamento estratégico</div> | |
| <div class="progress-bar-small"> | |
| <div class="progress-fill" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item active"> | |
| <div class="timeline-marker"> | |
| <i data-feather="lightbulb"></i> | |
| </div> | |
| <div class="timeline-content"> | |
| <div class="timeline-header"> | |
| <div class="time">Semana 2</div> | |
| <div class="status completed">Concluído</div> | |
| </div> | |
| <div class="desc">Ideação, brainstorming e prototipagem inicial</div> | |
| <div class="progress-bar-small"> | |
| <div class="progress-fill" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item current"> | |
| <div class="timeline-marker"> | |
| <i data-feather="cpu"></i> | |
| </div> | |
| <div class="timeline-content"> | |
| <div class="timeline-header"> | |
| <div class="time">Semana 3</div> | |
| <div class="status in-progress">Em Andamento</div> | |
| </div> | |
| <div class="desc">Desenvolvimento, testes e otimizações</div> | |
| <div class="progress-bar-small"> | |
| <div class="progress-fill" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-item"> | |
| <div class="timeline-marker"> | |
| <i data-feather="rocket"></i> | |
| </div> | |
| <div class="timeline-content"> | |
| <div class="timeline-header"> | |
| <div class="time">Semana 4</div> | |
| <div class="status pending">Planejado</div> | |
| </div> | |
| <div class="desc">Deploy, treinamento e evolução contínua</div> | |
| <div class="progress-bar-small"> | |
| <div class="progress-fill" style="width: 20%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 5: Enhanced Pros/Cons --> | |
| <section class="slide" data-slide="5" role="group" aria-roledescription="slide" aria-label="Slide 5 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner"> | |
| <div class="kicker">Análise Comparativa</div> | |
| <h2 class="title">Prós vs Contras Detalhado</h2> | |
| <div class="split-enhanced"> | |
| <div class="card-enhanced pros"> | |
| <div class="card-header-enhanced"> | |
| <div class="icon-circle positive"> | |
| <i data-feather="trending-up"></i> | |
| </div> | |
| <div class="header-text"> | |
| <h3>Vantagens</h3> | |
| <p>Benefícios comprovados</p> | |
| </div> | |
| <div class="score-badge">+12</div> | |
| </div> | |
| <ul class="list-enhanced"> | |
| <li> | |
| <i data-feather="check-circle"></i> | |
| <div> | |
| <strong>Alinhamento de equipe</strong> | |
| <span>Comunicação 3x mais eficiente</span> | |
| </div> | |
| </li> | |
| <li> | |
| <i data-feather="check-circle"></i> | |
| <div> | |
| <strong>Entregas previsíveis</strong> | |
| <span>95% de pontualidade</span> | |
| </div> | |
| </li> | |
| <li> | |
| <i data-feather="check-circle"></i> | |
| <div> | |
| <strong>Decisões rápidas</strong> | |
| <span>Redução de 40% no tempo</span> | |
| </div> | |
| </li> | |
| <li> | |
| <i data-feather="check-circle"></i> | |
| <div> | |
| <strong>ROI superior</strong> | |
| <span>Retorno de 250%</span> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="card-enhanced cons"> | |
| <div class="card-header-enhanced"> | |
| <div class="icon-circle warning"> | |
| <i data-feather="alert-triangle"></i> | |
| </div> | |
| <div class="header-text"> | |
| <h3>Desafios</h3> | |
| <p>Areas de atenção</p> | |
| </div> | |
| <div class="score-badge negative">-3</div> | |
| </div> | |
| <ul class="list-enhanced"> | |
| <li> | |
| <i data-feather="alert-circle"></i> | |
| <div> | |
| <strong>Curva de aprendizado</strong> | |
| <span>2-3 semanas de adaptação</span> | |
| </div> | |
| </li> | |
| <li> | |
| <i data-feather="alert-circle"></i> | |
| <div> | |
| <strong>Esforço inicial</strong> | |
| <span>Setup demanda investimento</span> | |
| </div> | |
| </li> | |
| <li> | |
| <i data-feather="alert-circle"></i> | |
| <div> | |
| <strong>Dependência tecnológica</strong> | |
| <span>Requer infraestrutura adequada</span> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 6: Enhanced Statistics --> | |
| <section class="slide" data-slide="6" role="group" aria-roledescription="slide" aria-label="Slide 6 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner"> | |
| <div class="kicker">Métricas de Performance</div> | |
| <h2 class="title">Resultados Comprovados</h2> | |
| <div class="stats-enhanced"> | |
| <div class="stat-card primary"> | |
| <div class="stat-icon"> | |
| <i data-feather="heart"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="value counter" data-target="94">0%</div> | |
| <div class="label">Satisfação do Cliente</div> | |
| <div class="trend positive"> | |
| <i data-feather="trending-up"></i> | |
| <span>+12% vs último trimestre</span> | |
| </div> | |
| </div> | |
| <div class="stat-chart"> | |
| <div class="sparkline"> | |
| <svg viewBox="0 0 100 20" class="sparkline-chart"> | |
| <polyline points="0,15 20,12 40,14 60,8 80,6 100,4" fill="none" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card secondary"> | |
| <div class="stat-icon"> | |
| <i data-feather="zap"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="value counter" data-target="4.2">0x</div> | |
| <div class="label">Performance Boost</div> | |
| <div class="trend positive"> | |
| <i data-feather="trending-up"></i> | |
| <span>3x mais rápido</span> | |
| </div> | |
| </div> | |
| <div class="stat-chart"> | |
| <div class="sparkline"> | |
| <svg viewBox="0 0 100 20" class="sparkline-chart"> | |
| <polyline points="0,18 20,15 40,10 60,8 80,5 100,2" fill="none" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="stat-card accent"> | |
| <div class="stat-icon"> | |
| <i data-feather="clock"></i> | |
| </div> | |
| <div class="stat-content"> | |
| <div class="value counter" data-target="-42">0%</div> | |
| <div class="label">Redução de Tempo</div> | |
| <div class="trend positive"> | |
| <i data-feather="trending-up"></i> | |
| <span>Economia média</span> | |
| </div> | |
| </div> | |
| <div class="stat-chart"> | |
| <div class="sparkline"> | |
| <svg viewBox="0 0 100 20" class="sparkline-chart"> | |
| <polyline points="0,10 20,8 40,12 60,6 80,4 100,2" fill="none" stroke="currentColor" stroke-width="2"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="metrics-footer"> | |
| <div class="metric-comparison"> | |
| <div class="comparison-item"> | |
| <span class="metric-label">Antes</span> | |
| <div class="comparison-bar"> | |
| <div class="comparison-fill before" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="comparison-item"> | |
| <span class="metric-label">Depois</span> | |
| <div class="comparison-bar"> | |
| <div class="comparison-fill after" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 7: Enhanced Code Block --> | |
| <section class="slide" data-slide="7" role="group" aria-roledescription="slide" aria-label="Slide 7 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner"> | |
| <div class="kicker">Desenvolvimento</div> | |
| <h2 class="title">Código de Exemplo Avançado</h2> | |
| <div class="code-container"> | |
| <div class="code-header"> | |
| <div class="code-tabs"> | |
| <button class="code-tab active" data-lang="javascript"> | |
| <i data-feather="code"></i> | |
| JavaScript | |
| </button> | |
| <button class="code-tab" data-lang="typescript"> | |
| <i data-feather="file-text"></i> | |
| TypeScript | |
| </button> | |
| <button class="code-tab" data-lang="python"> | |
| <i data-feather="box"></i> | |
| Python | |
| </button> | |
| </div> | |
| <div class="code-actions"> | |
| <button class="code-action" id="copyCode" aria-label="Copiar código"> | |
| <i data-feather="copy"></i> | |
| <span>Copiar</span> | |
| </button> | |
| <button class="code-action" id="runCode" aria-label="Executar código"> | |
| <i data-feather="play"></i> | |
| <span>Executar</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="code-block-enhanced"> | |
| <pre class="code-content active" data-lang="javascript"><code>// FlatSlide Pro 2.0 - Inicialização | |
| class SlideDeckPro { | |
| constructor(container, options = {}) { | |
| this.container = container; | |
| this.slides = Array.from(container.querySelectorAll('.slide')); | |
| this.currentIndex = 0; | |
| this.options = { | |
| autoPlay: false, | |
| interval: 5000, | |
| keyboard: true, | |
| touch: true, | |
| ...options | |
| }; | |
| this.init(); | |
| } | |
| init() { | |
| this.bindEvents(); | |
| this.updateUI(); | |
| this.setupAnimations(); | |
| } | |
| next() { | |
| if (this.currentIndex < this.slides.length - 1) { | |
| this.currentIndex++; | |
| this.updateUI(); | |
| this.animateSlide(); | |
| } | |
| } | |
| animateSlide() { | |
| const activeSlide = this.slides[this.currentIndex]; | |
| activeSlide.classList.add('animating'); | |
| setTimeout(() => { | |
| activeSlide.classList.remove('animating'); | |
| }, 600); | |
| } | |
| } | |
| // Inicialização automática | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const deck = new SlideDeckPro('#slideContainer', { | |
| autoPlay: true, | |
| keyboard: true | |
| }); | |
| });</code></pre> | |
| <pre class="code-content" data-lang="typescript"><code>// FlatSlide Pro 2.0 - TypeScript Version | |
| interface SlideOptions { | |
| autoPlay: boolean; | |
| interval: number; | |
| keyboard: boolean; | |
| touch: boolean; | |
| } | |
| interface SlideDeckPro { | |
| container: HTMLElement; | |
| slides: HTMLElement[]; | |
| currentIndex: number; | |
| options: SlideOptions; | |
| } | |
| class SlideDeckPro implements SlideDeckPro { | |
| constructor(container: string, options: Partial<SlideOptions> = {}) { | |
| this.container = document.querySelector(container) as HTMLElement; | |
| this.slides = Array.from(this.container.querySelectorAll('.slide')); | |
| this.currentIndex = 0; | |
| this.options = { | |
| autoPlay: false, | |
| interval: 5000, | |
| keyboard: true, | |
| touch: true, | |
| ...options | |
| }; | |
| this.init(); | |
| } | |
| next(): void { | |
| if (this.currentIndex < this.slides.length - 1) { | |
| this.currentIndex++; | |
| this.updateUI(); | |
| this.animateSlide(); | |
| } | |
| } | |
| }</code></pre> | |
| <pre class="code-content" data-lang="python"><code># FlatSlide Pro 2.0 - Python Backend Example | |
| from fastapi import FastAPI, Request | |
| from fastapi.responses import HTMLResponse | |
| import json | |
| app = FastAPI(title="FlatSlide Pro API") | |
| class SlideDeckManager: | |
| def __init__(self): | |
| self.slides = [] | |
| self.current_index = 0 | |
| def add_slide(self, slide_data: dict): | |
| """Adiciona um novo slide ao deck""" | |
| self.slides.append(slide_data) | |
| def next_slide(self) -> dict: | |
| """Avança para o próximo slide""" | |
| if self.current_index < len(self.slides) - 1: | |
| self.current_index += 1 | |
| return self.get_current_slide() | |
| def get_current_slide(self) -> dict: | |
| """Retorna o slide atual""" | |
| if 0 <= self.current_index < len(self.slides): | |
| return self.slides[self.current_index] | |
| return {} | |
| deck_manager = SlideDeckManager() | |
| @app.get("/", response_class=HTMLResponse) | |
| async def home(): | |
| return HTMLResponse(content=""" | |
| <html> | |
| <head><title>FlatSlide Pro 2.0</title></head> | |
| <body> | |
| <div id="slide-container"></div> | |
| <script> | |
| // Integração com backend Python | |
| class SlideDeckClient { | |
| constructor(apiBase = 'http://localhost:8000') { | |
| this.apiBase = apiBase; | |
| this.loadSlides(); | |
| } | |
| async loadSlides() { | |
| const response = await fetch(`${this.apiBase}/slides`); | |
| const slides = await response.json(); | |
| this.renderSlides(slides); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """)</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 8: Enhanced CTA --> | |
| <section class="slide" data-slide="8" role="group" aria-roledescription="slide" aria-label="Slide 8 de 8"> | |
| <div class="bg-grid"></div> | |
| <div class="slide-inner center"> | |
| <div class="cta-content"> | |
| <div class="chip success">Pronto para o Futuro</div> | |
| <h1 class="title-xl gradient-text">Vamos Criar algo Extraordinário?</h1> | |
| <p class="subtitle-enhanced"> | |
| Junte-se a mais de 10.000 profissionais que já transformaram suas apresentações | |
| </p> | |
| <div class="social-proof"> | |
| <div class="proof-item"> | |
| <div class="proof-avatar">JD</div> | |
| <div class="proof-content"> | |
| <div class="proof-name">João Silva</div> | |
| <div class="proof-role">CEO, TechCorp</div> | |
| <div class="proof-text">"Transformei completamente nossas apresentações!"</div> | |
| </div> | |
| </div> | |
| <div class="proof-item"> | |
| <div class="proof-avatar">MR</div> | |
| <div class="proof-content"> | |
| <div class="proof-name">Maria Rodriguez</div> | |
| <div class="proof-role">Marketing Director</div> | |
| <div class="proof-text">"ROI de 300% em nossos pitches de vendas"</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="cta-row-enhanced"> | |
| <a class="btn btn-primary large pulse" href="#" id="contactBtn"> | |
| <i data-feather="rocket"></i> | |
| <span> | |
| <strong>Começar Agora</strong> | |
| <small>Grátis por 30 dias</small> | |
| </span> | |
| </a> | |
| <button class="btn btn-ghost large" id="demoBtn"> | |
| <i data-feather="play-circle"></i> | |
| <span> | |
| <strong>Ver Demo</strong> | |
| <small>5 minutos</small> | |
| </span> | |
| </button> | |
| <button class="btn btn-outline large" id="replayBtn"> | |
| <i data-feather="rotate-ccw"></i> | |
| Reiniciar Tour | |
| </button> | |
| </div> | |
| <div class="trust-indicators"> | |
| <div class="trust-item"> | |
| <i data-feather="shield-check"></i> | |
| <span>100% Seguro</span> | |
| </div> | |
| <div class="trust-item"> | |
| <i data-feather="headphones"></i> | |
| <span>Suporte 24/7</span> | |
| </div> | |
| <div class="trust-item"> | |
| <i data-feather="award"></i> | |
| <span>ISO 27001</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <div class="controls-enhanced"> | |
| <button class="nav-enhanced prev" id="prevBtn" aria-label="Slide anterior (←)"> | |
| <i data-feather="chevron-left"></i> | |
| </button> | |
| <div class="progress-info"> | |
| <span class="slide-counter"> | |
| <span id="currentSlide">1</span> / <span id="totalSlides">8</span> | |
| </span> | |
| <div class="progress-dots" id="dots" role="tablist" aria-label="Indicadores de slide"></div> | |
| </div> | |
| <button class="nav-enhanced next" id="nextBtn" aria-label="Próximo slide (→)"> | |
| <i data-feather="chevron-right"></i> | |
| </button> | |
| </div> | |
| <div class="progressbar-enhanced" aria-hidden="true"> | |
| <div class="progress-track"> | |
| <div class="progress-bar-enhanced" id="progressBar"></div> | |
| </div> | |
| </div> | |
| <!-- Keyboard Shortcuts Helper --> | |
| <div class="shortcuts-helper" id="shortcutsHelper"> | |
| <div class="helper-header"> | |
| <h3>Atalhos de Teclado</h3> | |
| <button class="helper-close" id="closeHelper"> | |
| <i data-feather="x"></i> | |
| </button> | |
| </div> | |
| <div class="helper-content"> | |
| <div class="shortcut-grid"> | |
| <div class="shortcut-item"> | |
| <kbd>← →</kbd> | |
| <span>Navegar slides</span> | |
| </div> | |
| <div class="shortcut-item"> | |
| <kbd>F11</kbd> | |
| <span>Tela cheia</span> | |
| </div> | |
| <div class="shortcut-item"> | |
| <kbd>Home / End</kbd> | |
| <span>Primeiro / Último</span> | |
| </div> | |
| <div class="shortcut-item"> | |
| <kbd>Space</kbd> | |
| <span>Próximo slide</span> | |
| </div> | |
| <div class="shortcut-item"> | |
| <kbd>Esc</kbd> | |
| <span>Sair fullscreen</span> | |
| </div> | |
| <div class="shortcut-item"> | |
| <kbd>?</kbd> | |
| <span>Este help</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="footer-enhanced"> | |
| <div class="footer-content"> | |
| <div class="footer-brand"> | |
| <div class="brand-mark-small" aria-hidden="true"></div> | |
| <span>FlatSlide Pro 2.0</span> | |
| </div> | |
| <div class="footer-links"> | |
| <a href="#" class="footer-link">Documentação</a> | |
| <a href="#" class="footer-link">Suporte</a> | |
| <a href="#" class="footer-link">API</a> | |
| <a href="#" class="footer-link">Privacidade</a> | |
| </div> | |
| <div class="footer-meta"> | |
| <span>© 2025 FlatSlide Pro. Feito com ❤️ para designers.</span> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> | |