438 lines
14 KiB
PHP
Executable File
438 lines
14 KiB
PHP
Executable File
<?php include 'header.php'; ?>
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="ScreenOrientation" content="autoRotate:disabled">
|
|
<meta name="viewport"
|
|
content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, orientation=portrait">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<title>AR Image Tracking - Baú Suave</title>
|
|
<script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/mind-ar@1.2.5/dist/mindar-image-aframe.prod.js"></script>
|
|
<!-- Include necessary JS files for cookie checking -->
|
|
<script src="js/cookie.js"></script> <!-- Assuming this provides the 'cookies' object -->
|
|
<script src="main.js"></script> <!-- Assuming this provides checkCadastroCookie -->
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.floating-message {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
padding: 20px;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
color: white;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
z-index: 1001;
|
|
}
|
|
|
|
.loader-container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.loading-text {
|
|
color: white;
|
|
margin-top: 10px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
#refreshButton {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
padding: 10px 15px;
|
|
cursor: pointer;
|
|
background-color: #fff;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
@keyframes fadeOut {
|
|
from {
|
|
opacity: 1;
|
|
}
|
|
|
|
to {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.fade-out {
|
|
animation: fadeOut 0.5s ease-out forwards;
|
|
}
|
|
|
|
/*
|
|
/* Ajustar z-index dos outros elementos para ficarem sobre o a-scene */
|
|
.overlay {
|
|
z-index: 2;
|
|
}
|
|
|
|
.floating-message {
|
|
z-index: 3;
|
|
}
|
|
|
|
.loader-container {
|
|
z-index: 4;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
<a-scene id="myScene"
|
|
mindar-image="imageTargetSrc: ./targets.mind; autoStart: true; uiLoading: no; uiError: no; uiScanning: no;"
|
|
vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false" renderer="colorManagement: true">
|
|
|
|
<a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
|
|
|
|
<a-entity mindar-image-target="targetIndex: 0">
|
|
<!-- <a-plane color="#FFFF00" position="0 0 0" rotation="0 0 0" width="1" height="0.2">
|
|
<a-text value="Target 0" align="center" color="black" position="0 0 0" scale="0.5 0.5 0.5"></a-text>
|
|
</a-plane> -->
|
|
</a-entity>
|
|
<a-entity mindar-image-target="targetIndex: 1"></a-entity>
|
|
<a-entity mindar-image-target="targetIndex: 2"></a-entity>
|
|
<a-entity mindar-image-target="targetIndex: 3"></a-entity>
|
|
|
|
</a-scene>
|
|
<div class="loader-container" id="loader">
|
|
<div style="text-align: center;">
|
|
<div class="loading-text">Carregando AR...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <script> var THREE = AFRAME.THREE; </script>
|
|
<button id="refreshButton" onclick="location.reload();">
|
|
Refresh
|
|
</button> -->
|
|
|
|
<div id="floating-message-0" class="floating-message">
|
|
<p class="message-text">Encontrou o E7-80T!</p>
|
|
</div>
|
|
<div id="floating-message-1" class="floating-message">
|
|
<p class="message-text">Encontrou o XC6-1056VN!</p>
|
|
</div>
|
|
<div id="floating-message-2" class="floating-message">
|
|
<p class="message-text">Encontrou o XCB25-L5-C!</p>
|
|
</div>
|
|
<div id="floating-message-3" class="floating-message">
|
|
<p class="message-text">Encontrou o XCS4531K!</p>
|
|
</div>
|
|
|
|
<div class="overlay">
|
|
<div class="footer" id="footer-container">
|
|
<!-- O SVG será injetado aqui -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="finalScreen" id="finalScreen" style="display: none;">
|
|
<h2>Parabéns!</h2>
|
|
<p>Você completou o desafio e desbloqueou sua recompensa.</p>
|
|
<p>Passe no balcão do stand da XCMG e garanta seu prêmio!</p>
|
|
|
|
<span>CÓDIGO DO PRÊMIO</span>
|
|
<h1 id="codigoPremio"></h1>
|
|
|
|
</div>
|
|
<script>
|
|
if (CookieManager.getCookie('allFound)')) {
|
|
console.log("Todos os targets já encontrados. Redirecionando para o código.");
|
|
showWindowCode()
|
|
} else {
|
|
console.log("Nem todos os targets foram encontrados ainda.");
|
|
}
|
|
async function loadFooterSVG() {
|
|
try {
|
|
const response = await fetch('img/footer.svg');
|
|
const svgText = await response.text();
|
|
const footerContainer = document.getElementById('footer-container');
|
|
footerContainer.innerHTML = svgText;
|
|
|
|
// Adiciona classes para estilização
|
|
const svgElement = footerContainer.querySelector('svg');
|
|
if (svgElement) {
|
|
svgElement.classList.add('footer-svg');
|
|
|
|
// Adiciona classe 'maquina' aos filhos diretos do g#maquinas
|
|
const maquinasGroup = svgElement.querySelector('g#maquinas');
|
|
if (maquinasGroup) {
|
|
Array.from(maquinasGroup.children).forEach(element => {
|
|
if (element.tagName.toLowerCase() === 'g') {
|
|
element.classList.add('maquina');
|
|
}
|
|
});
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Erro ao carregar o footer SVG:', error);
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
var showWindowCode = function () {
|
|
const windowCode = document.getElementById('finalScreen');
|
|
var index = CookieManager.getCookie('index')
|
|
console.log(index)
|
|
document.getElementById('codigoPremio').innerText = index;
|
|
windowCode.style.visibility = "visible";
|
|
|
|
|
|
};
|
|
loadFooterSVG();
|
|
// --- Cookie Check Logic ---
|
|
// Ensure cookie functions/objects are available before using them
|
|
// Use CookieManager instead of cookies
|
|
if (typeof checkCadastroCookie !== 'function' || typeof CookieManager === 'undefined') {
|
|
console.error(
|
|
"Funções de cookie não encontradas. Verifique se js/cookie.js e main.js estão incluídos corretamente."
|
|
);
|
|
// Display error or redirect if critical
|
|
const loader = document.getElementById('loader');
|
|
if (loader) {
|
|
loader.innerHTML =
|
|
'<div class="loading-text">Erro: Falha ao carregar dependências. Recarregue a página.</div>';
|
|
}
|
|
return; // Stop execution if dependencies are missing
|
|
} else {
|
|
// Verifica se todos os cookies necessários existem
|
|
const requiredCookies = ["PHPSESSID", "cadastro", "index", "indexTimestamp"];
|
|
|
|
for (const cookieName of requiredCookies) {
|
|
if (!CookieManager.getCookie(cookieName)) {
|
|
console.log(`Cookie ${cookieName} não encontrado, redirecionando para index.php`);
|
|
window.location.href = "index.php";
|
|
return;
|
|
}
|
|
}
|
|
|
|
console.log("Verificação de cookies passou com sucesso.");
|
|
}
|
|
// --- End Cookie Check Logic ---
|
|
|
|
|
|
// --- AR Logic ---
|
|
const sceneEl = document.querySelector('#myScene');
|
|
const loader = document.getElementById('loader');
|
|
const messages = {
|
|
0: document.getElementById('floating-message-0'),
|
|
1: document.getElementById('floating-message-1'),
|
|
2: document.getElementById('floating-message-2'),
|
|
3: document.getElementById('floating-message-3')
|
|
};
|
|
let targetVisible = false;
|
|
let currentTarget = null;
|
|
|
|
// Array para armazenar targets encontrados
|
|
let foundTargets = {
|
|
0: false, // E7-80T
|
|
1: false, // XC6-1056VN
|
|
2: false, // XCB25-L5-C
|
|
3: false // XCS4531K
|
|
};
|
|
|
|
let maquinasTargets = {
|
|
0: 'E7-80T',
|
|
1: 'XC6-1056VN',
|
|
2: 'XCB25-L5-C',
|
|
3: 'XCS4531K'
|
|
};
|
|
|
|
// Função para verificar progresso
|
|
function checkProgress() {
|
|
console.log("Progresso atual:", Object.values(foundTargets).filter(v => v).length, "de 4");
|
|
console.log("Status dos targets:", foundTargets);
|
|
|
|
// Verifica se todos os targets foram encontrados
|
|
const allFound = Object.values(foundTargets).every(found => found === true);
|
|
if (allFound) {
|
|
CookieManager.setCookie('allFound', 'true', 7); // Cookie válido por 7 dias
|
|
console.log("Todos os targets encontrados! Cookie 'allFound' criado.");
|
|
setTimeout(() => {
|
|
// Redireciona após 5 segundos
|
|
showWindowCode()
|
|
}, 5000);
|
|
}
|
|
}
|
|
|
|
var allFound = CookieManager.getCookie('allFound');
|
|
if (allFound) {
|
|
console.log("Todos os targets já encontrados. Redirecionando para o código.");
|
|
showWindowCode()
|
|
} else {
|
|
console.log("Nem todos os targets foram encontrados ainda.");
|
|
}
|
|
|
|
|
|
|
|
sceneEl.addEventListener('renderstart', () => {
|
|
loader.style.display = 'none';
|
|
console.log("Render started, loader hidden.");
|
|
});
|
|
|
|
sceneEl.addEventListener("targetFound", event => {
|
|
const targetIndex = event.target.getAttribute('mindar-image-target').targetIndex;
|
|
console.log("Target Found:", targetIndex);
|
|
targetVisible = true;
|
|
currentTarget = targetIndex;
|
|
const targetName = maquinasTargets[targetIndex];
|
|
console.log("Target Name:", targetName);
|
|
var targetMaquina = document.getElementById(targetName);
|
|
targetMaquina.classList.add("found");
|
|
|
|
// Registra o target como encontrado
|
|
foundTargets[targetIndex] = true;
|
|
checkProgress();
|
|
|
|
// Esconde todas as mensagens primeiro
|
|
Object.values(messages).forEach(msg => {
|
|
if (msg) msg.style.display = "none";
|
|
});
|
|
|
|
// Mostra a mensagem específica
|
|
if (messages[currentTarget]) {
|
|
messages[currentTarget].style.display = "block";
|
|
console.log("Showing message for target", currentTarget);
|
|
}
|
|
});
|
|
|
|
sceneEl.addEventListener("targetLost", event => {
|
|
console.log("Target Lost!");
|
|
targetVisible = false;
|
|
if (currentTarget !== null && messages[currentTarget]) {
|
|
messages[currentTarget].style.display = "none";
|
|
}
|
|
currentTarget = null;
|
|
});
|
|
});
|
|
|
|
setTimeout(() => {
|
|
const video = document.querySelector('video');
|
|
if (video) {
|
|
video.style.position = 'fixed';
|
|
video.style.top = '0';
|
|
video.style.left = '0';
|
|
video.style.width = '100%';
|
|
video.style.height = '100%';
|
|
console.log("c")
|
|
}
|
|
}, 5000);
|
|
</script>
|
|
<style>
|
|
.overlay {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
div#finalScreen {
|
|
display: block !important;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 8000;
|
|
color: white;
|
|
background-color: #111;
|
|
}
|
|
|
|
.footer-svg {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.footer {
|
|
width: 100%;
|
|
}
|
|
|
|
.a-enter-vr {
|
|
display: none;
|
|
}
|
|
|
|
.maquina {
|
|
cursor: pointer;
|
|
transition: transform 0.2s ease;
|
|
filter: brightness(10) drop-shadow(6px 5px 5px white);
|
|
opacity: 0.25;
|
|
}
|
|
|
|
.maquina:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.found {
|
|
|
|
filter: brightness(1) drop-shadow(0 0 0 black);
|
|
opacity: 1;
|
|
}
|
|
|
|
a-scene {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
z-index: 1;
|
|
}
|
|
h2 {
|
|
font-size: 4em;
|
|
font-weight: 700;
|
|
color: #FAB73C;
|
|
}
|
|
|
|
|
|
|
|
.finalScreen p {
|
|
font-size: 1.5em;
|
|
margin-bottom: 1em
|
|
}
|
|
|
|
div#finalScreen {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
text-align: center;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.finalScreen span {
|
|
font-size: 1.5em;
|
|
line-height: 3em;
|
|
}
|
|
|
|
h1#codigoPremio {
|
|
color: #FAB73C;
|
|
font-size: 5em;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
</body>
|
|
|
|
</html>
|