-
Notifications
You must be signed in to change notification settings - Fork 0
/
testenovo.html
185 lines (174 loc) · 11 KB
/
testenovo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
---
layout: home
title: Sobre
---
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scoring Services - Real time IPSC</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.hero {
background-color: #f8f9fa;
padding: 60px 0;
}
.project-img {
width: 100%;
border-radius: 10px;
margin-top: 20px;
}
footer {
background-color: #343a40;
color: white;
padding: 20px 0;
text-align: center;
}
.btn-custom {
background-color: #007bff;
color: white;
}
.accordion-button {
background-color: #007bff;
color: white;
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero text-center">
<div class="container">
<h1>Scoring Services - Integração</h1>
<p class="lead">Integração avançada com o aplicativo PractiScore para Leaderboards em Tempo Real e Transmissão Online de Competições IPSC.</p>
<a href="#pontos-chave" class="btn btn-primary btn-lg">Saiba Mais</a>
</div>
</section>
<!-- Pontos-Chave Section -->
<section class="container my-5" id="pontos-chave">
<h2 class="text-center mb-4">Pontos-Chave</h2>
<div class="row">
<div class="col-md-4">
<div class="card p-3 mb-4">
<h4>Aqui é IPSC</h4>
<p>Foco total em competições de IPSC, atendendo às necessidades específicas do esporte, com integração direta ao PractiScore. Isso garante que todas as nuances e regras das competições sejam respeitadas e aplicadas, seja para visualização dos resultados, seja para transmissão ao vivo.</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-3 mb-4">
<h4>Integração com PractiScore</h4>
<p>A integração com o PractiScore (versões 1.7.x e 2.0.x) significa que os resultados são sincronizados de forma contínua e precisa com o aplicativo. Essa integração garante que qualquer dispositivo utilizado na competição esteja conectado ao sistema, coletando e exibindo os dados em tempo real, reduzindo erros manuais e otimizando a gestão das competições.</p>
</div>
</div>
<div class="col-md-4">
<div class="card p-3 mb-4">
<h4>Leaderboards em Tempo Real</h4>
<p>Acompanhamento em tempo real dos placares permite que os organizadores, atletas e espectadores vejam as mudanças nas posições assim que os resultados são inseridos no sistema. Isso mantém todos atualizados sobre o progresso da competição, cria engajamento e oferece transparência total.</p>
</div>
</div>
</div>
</section>
<!-- Funcionalidades Expansíveis -->
<section class="container my-5" id="funcionalidades">
<h2 class="text-center mb-4">Principais Funcionalidades</h2>
<div class="accordion" id="accordionFuncionalidades">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Modo Quiosque para TV
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionFuncionalidades">
<div class="accordion-body">
<strong>Exibição contínua dos resultados em telas dedicadas:</strong> Com o Modo Quiosque, você pode transformar qualquer TV ou monitor em uma central de informações ao vivo. Isso é especialmente útil para exibir os resultados de várias etapas (stages) durante a competição. Imagine uma área comum do evento onde os espectadores podem acompanhar em tempo real os resultados sem a necessidade de dispositivos móveis. O Modo Quiosque mantém os dados fluindo continuamente, com atualização em tempo real. A exibição é organizada por atleta, divisão ou stage, tornando a informação acessível para todos.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Modo de Exibição com Overlay para OBS Studio
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionFuncionalidades">
<div class="accordion-body">
<strong>Transmissão profissional de eventos ao vivo:</strong> Com o modo overlay integrado ao OBS Studio, você pode facilmente sobrepor os resultados em transmissões ao vivo. O OBS Studio é amplamente utilizado para transmissões em plataformas como YouTube e Twitch, e essa integração facilita a exibição dos dados enquanto o evento ocorre. Os dados, como pontuação, tempos e posições dos atletas, aparecem em tempo real, permitindo que os espectadores online acompanhem a competição sem perder nenhum detalhe. Ideal para aumentar o alcance do evento e criar transmissões imersivas e profissionais.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Resultados por Stage e Divisão
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionFuncionalidades">
<div class="accordion-body">
<strong>Resultados segmentados para maior clareza:</strong> A segmentação dos resultados por stage (etapas) e por divisão permite uma análise detalhada do desempenho dos atletas. Isso é útil para comparar a evolução de diferentes competidores, entender as dinâmicas específicas de cada divisão e fazer ajustes estratégicos em tempo real. Atletas, treinadores e até espectadores podem se beneficiar dessa segmentação, obtendo insights mais profundos sobre a performance geral e em cada fase da competição.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Coleta de Resultados Sincronizada
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionFuncionalidades">
<div class="accordion-body">
<strong>Sincronização de múltiplos dispositivos:</strong> Essa funcionalidade garante que os dados de todos os tablets e dispositivos conectados ao sistema sejam sincronizados em tempo real. Isso é especialmente crucial quando há múltiplos squads (grupos) competindo simultaneamente em diferentes stages. Os resultados coletados são instantaneamente integrados ao sistema principal, eliminando qualquer atraso ou erro na contagem de pontos. Isso garante uma experiência fluida e precisa tanto para organizadores quanto para espectadores.
</div>
</div>
</div>
</div>
</section>
<!-- Galeria de Screenshots -->
<section class="container my-5" id="screenshots">
<h2 class="text-center mb-4">Capturas de Tela</h2>
<div class="row">
<div class="col-md-6">
<img src="docs/assets/tablet01.png" alt="Lista de Tablets" class="project-img">
<p class="text-center mt-2">Lista de Tablets - Monitoramento em tempo real da latência de dispositivos usados na competição</p>
</div>
<div class="col-md-6">
<img src="docs/assets/stage_last03.png" alt="Último Atirador do Stage" class="project-img">
<p class="text-center mt-2">Último Atirador do Stage - Exibição rápida e clara do último atirador que completou a etapa</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="docs/assets/stage01.png" alt="Stage Detalhado" class="project-img">
<p class="text-center mt-2">Stage Detalhado - Visualize a performance de cada atleta em detalhes por stage</p>
</div>
<div class="col-md-6">
<img src="docs/assets/stage02.png" alt="Resumo do Stage" class="project-img">
<p class="text-center mt-2">Resumo do Stage - Exibição consolidada dos resultados do stage</p>
</div>
</div>
</section>
<!-- Exemplo OBS Studio -->
<section class="container my-5 text-center" id="exemplo-obs">
<h2>Exemplo de Integração com OBS Studio</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/ZTPz0UQ9-So" allowfullscreen></iframe>
</div>
</section>
<!-- Contatos Section -->
<section class="container my-5" id="contatos">
<h2 class="text-center mb-4">Entre em Contato</h2>
<div class="d-flex justify-content-center">
<ul class="list-group list-group-flush w-50">
<li class="list-group-item"><a href="https://www.instagram.com/alanbesen.ipsc/" target="_blank">Instagram</a></li>
<li class="list-group-item"><a href="mailto:alanc.besen@gmail.com">Email</a></li>
</ul>
</div>
</section>
<!-- Footer -->
<footer>
<p>© 2024 Scoring Services. Todos os direitos reservados.</p>
</footer>
<!-- Bootstrap JS and Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>