/* ======================= */
/* FONTES E RESET BASICO */
/* ======================= */
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
width: 100%;
}
/* ======================= */
/* GRID PRINCIPAL */
/* ======================= */
.odds-guru-page {
display: grid;
grid-template-columns: 1fr 3fr 1.5fr;
gap: 20px;
padding: 20px;
}
select {
all: revert;
background-color: #2b2d35;
color: #fff;
border: 1px solid #444;
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
font-family: 'Inter', sans-serif;
cursor: pointer;
transition: all 0.2s ease;
}
select:hover, select:focus {
background-color: #3a3c46 !important;
border-color: #ffb400 !important;
outline: none !important;
}
/* seta do select personalizada */
select::-ms-expand {
display: none;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* For Firefox */
input[type="number"] {
-moz-appearance: textfield;
appearance: textfield;
}
/* ======================= */
/* LATERAL ESQUERDA - FILTROS */
/* ======================= */
.sidebar-left {
background-color: #2b2d35;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
color: #fff !important;
position: sticky;
height: fit-content;
top: 20px;
align-self: start;
}
.sidebar-left h3 {
all: revert;
margin-bottom: 15px;
color: #ffb400;
font-weight: 600;
}
.filter-group {
all: revert;
margin-bottom: 20px;
}
.filter-group h4 {
all: revert;
font-size: 14px;
font-weight: 500;
margin-bottom: 8px;
}
.filter-group label {
display: block;
font-size: 13px;
color: #ccc !important;
margin-bottom: 6px;
}
.filter-group span {
font-size: small;
text-align: justify;
width: 100%;
display: block;
}
.range-container {
display: flex;
align-items: center;
justify-content: space-between;
}
input[type="range"] {
width: 100% !important;
margin: 0 10px !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.dropdown {
position: relative;
}
.dropdown-toggle {
all: revert;
width: 100% !important;
background: #2c2c31 !important;
color: #fff !important;
border: 1px solid #3d3d44 !important;
padding: 8px 12px !important;
border-radius: 8px !important;
text-align: left !important;
cursor: pointer !important;
font-size: 14px !important;
}
.dropdown-toggle:hover {
background: #3b3b42;
}
.dropdown-menu {
display: none;
flex-direction: column;
position: absolute;
background: #2c2c31;
border: 1px solid #3d3d44;
border-radius: 8px;
top: 40px;
left: 0;
width: 100%;
max-height: 250px; /* altura com scroll */
overflow-y: auto;
z-index: 100;
padding: 10px;
}
.dropdown-menu label {
font-size: 14px;
margin-bottom: 6px;
}
.dropdown.open .dropdown-menu {
display: flex;
}
/* ======================= */
/* CONTEÚDO CENTRAL */
/* ======================= */
.main-content {
border-radius: 10px;
padding: 0 25px 25px 25px;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.main-content h2 {
color: #111;
font-weight: 700;
margin-bottom: 5px;
}
.main-content .subtitle {
color: #666;
font-size: 14px;
margin-bottom: 20px;
}
.bet-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.bet-card {
position: relative;
background: #1e1f25;
color: #fff;
padding: 16px;
border-radius: 12px;
transition: transform 0.2s ease;
}
.bet-card:hover {
border: 1px solid #0092f6;
}
.market_item {
border-bottom: 1px dotted #fff;
}
/* Tooltip */
.bet-card .tooltip {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(20, 20, 25, 0.9);
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 13px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
z-index: 999;
transition-delay: 0.3s;
}
/* Setinha do balão */
.bet-card .tooltip::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 6px;
border-style: solid;
border-color: transparent transparent rgba(20, 20, 25, 0.9) transparent;
}
/* Mostra o tooltip ao passar o mouse */
.bet-card__match:hover .tooltip {
opacity: 1;
}
/* ======================= */
/* LATERAL DIREITA - CALCULADORA */
/* ======================= */
.surebets-calculator {
background: #1e1f26;
color: #f5f5f5;
padding: 1.2rem;
border-radius: 10px;
display: flex;
flex-direction: column;
font-family: "Inter", sans-serif;
}
.calc-title {
text-align: center;
font-size: 1rem;
font-weight: 700;
color: #1e90ff;
margin-bottom: 1rem;
}
.th-columns{
display: flex;
flex-direction: row;
color: #ccc;
justify-content: space-between;
padding: 0 25px 0 25px;
height: 40px;
}
.th-columns h5{
text-align: center !important;
font-size: medium !important;
color: #ccc !important;
line-height: 3 !important;
}
.match-info {
text-align: center;
margin-bottom: 1.2rem;
}
.match-name {
font-weight: 500;
font-size: 0.95rem;
margin-bottom: 0.2rem;
}
.match-date {
font-size: 0.8rem;
color: #999;
}
.match-countdown {
display: block;
font-size: 1.5rem;
font-weight: bold;
color: #00ffcc;
font-family: monospace;
}
.expired {
color: #ff5555;
font-size: 1.0rem;
}
.calc-invest {
display: flex;
align-items: center;
justify-content: space-between;
background: #1b1b1b;
padding: 0.8rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.calc-field label {
font-size: 0.75rem;
color: #ffb400;
margin-bottom: 0.2rem;
text-align: center;
font-weight: bolder;
}
.calc-field input {
background: #222;
color: #fff;
border: 1px solid #333;
border-radius: 6px;
width: 70px;
padding: 0.4rem;
text-align: center;
}
.calc-equal {
color: #ccc;
font-size: 1.2rem;
}
.calc-return-box {
background: #1c8f67;
color: #fff;
padding: 0.5rem 0.8rem;
border-radius: 6px;
font-weight: 600;
}
.calc-return-box label {
font-size: 0.7rem;
color: #e2ffe7;
}
.calc-section-title {
font-size: 0.9rem !important;
color: #aaa !important;
font-weight: 600 !important;
margin: 1rem 0 0.4rem !important;
border-top: 1px solid #222 !important;
padding-top: 0.8rem !important;
font-style: italic !important;
text-align: center !important;
}
.result-line {
display: flex;
align-items: center;
justify-content: space-between;
background: #1a1a1a;
border-radius: 8px;
padding: 0.6rem 0.8rem;
}
.side-label {
width: 40px;
font-weight: 600;
}
.odd-input, .stake-input {
background: #222 !important;
font-size: 17px !important;
color: #ffde00 !important;
font-weight: 600 !important;
border: 1px solid #333 !important;
border-radius: 6px !important;
width: 70px !important;
text-align: center !important;
padding: 0.4rem !important;
}
.x-label, .equal-label {
color: #888;
font-weight: 600;
}
.return-value {
width: 70px;
text-align: right;
color: #1e90ff;
font-weight: 600;
}
.calc-summary {
background: #1a1a1a;
border-radius: 8px;
padding: 0.8rem;
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.calc-summary div {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
}
.calc-summary .profit {
color: #00c853;
font-weight: 700;
}
/* ======================= */
/* BET CARD */
/* ======================= */
.bet-card {
background-color: #1e1f26;
color: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 6px 15px rgba(0,0,0,0.2);
font-family: 'Inter', sans-serif;
}
.bet-card__header {
display: flex;
justify-content: space-between;
padding: 12px 18px;
background-color: #2b2d35;
font-size: 14px;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.bet-card__auto-update span {
font-weight: 500;
}
.bet-card__update {
all: revert;
background: #ffb400 !important;
border: none !important;
border-radius: 5px !important;
color: #000 !important;
font-weight: 600 !important;
cursor: pointer !important;
padding: 6px 10px !important;
}
.bet-card__league {
padding: 12px 18px;
background-color: #30323c;
font-size: 13px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 6px;
}
.bet-card__match {
all: revert;
padding: 14px 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.bet-card__match a, a:hover, a:visited {
color: #fff !important;
text-decoration: none !important;
}
.market-odds a, a:hover, a:visited {
color: #fff !important;
text-decoration: none !important;
}
.bet-card__teams span {
display: block;
font-size: 15px;
font-weight: 500;
}
.bet-card__odds {
display: flex;
gap: 12px;
}
.bet-card__odds .odd {
background: #2b2d35;
border-radius: 8px;
padding: 10px 14px;
text-align: center;
min-width: 60px;
transition: all 0.2s ease;
}
.bet-card__odds .odd:hover {
background: #3a3c46;
}
.bet-card__odds strong {
display: block;
font-size: 17px;
color: #ffde00;
font-weight: 600;
}
.copy_market {
font-size: 15px;
cursor: pointer;
transition: background 0.3s, color 0.3s;
color: #fff;
text-align: center;
display: inline-block;
white-space: nowrap;
cursor: pointer;
}
.odd_value {
display: none;
}
hr{
all: revert;
margin: 0 !!important;
}
.bet-card__market {
align-items: justify;
}
.bet-card__market a, a:hover, a:visited{
color: #fff;
text-decoration: none;
}
/* feedback visual */
.copy_market.copiado {
background: #14b8a6;
color: #fff;
border-radius: 6px;
}
/* Rodapé */
.bet-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 18px;
background-color: #2b2d35;
flex-wrap: wrap;
gap: 8px;
}
.bet-card__footer .gain {
background: #1c8f67;
color: #fff;
font-weight: bold;
border-radius: 0 6px 6px 0;
padding: 6px 12px;
}
.bet-card__footer .info {
font-size: 13px;
color: #fff;
font-weight: bold;
background: #0092f6;
border-radius: 0 6px 6px 0;
padding: 6px 12px;
}
.bet-card__footer .info:hover{
color:#ffde00;
background: #004ecc;
}
.bet-card__footer .info::before {
background: #f90;
content: '🔢';
padding: 7px 5px;
margin-left: -15px;
border-radius: 10%;
}
.bet-card__footer .new {
background: #ffde00;
font-size: 13px;
color: #000;
border-radius: 6px;
padding: 6px 12px;
animation: blink 3.5s ease-in-out 5;
}
.bet-card__footer .deadline {
background: rgb(180, 26, 6);
font-size: 13px;
color: #fff;
border-radius: 6px;
padding: 6px 12px;
animation: blink 5.5s ease-in-out 5;
}
@keyframes blink {
0%, 100% { opacity: 1; }
20%, 60%, 100% { opacity: 1; }
10%, 50%, 90% { opacity: 0; }
}
/* ======================= */
/* RESPONSIVIDADE */
/* ======================= */
@media (max-width: 1024px) {
.odds-guru-page {
grid-template-columns: 220px 1fr;
padding: 5px;
}
.sidebar-right {
display: none;
}
.filter-group span {
display: grid;
}
}
@media (max-width: 768px) {
.odds-guru-page {
grid-template-columns: 1fr;
}
.sidebar-left {
order: 1;
position: relative;
}
.main-content {
order: 2;
padding: 1px;
}
.sidebar-right {
order: 3;
display: block;
margin-top: 15px;
position: relative;
}
.filter-section {
width: 100%;
margin-bottom: 20px;
}
}
@media (max-width: 480px) {
.bet-card {
border-radius: 0;
margin: 10px 0;
}
.bet-card__match {
padding: 10px 12px;
}
.bet-card__odds strong {
font-size: 18px;
}
.bet-card__footer .drop {
font-size: 13px;
}
}
Futebol
🇧🇾 Bielorrússia / Liga Principal
26/10/2025, 21:00
Neman Grodno
vs
FK Arsenal Dzyarzhynsk
🌐 Betano -
Acima 14.5 - chutes de gol
1.53
💬 Pully vence com handicap −1 (handicap asiático) - gols
Futebol
🇧🇷 Brasileirão / Série B
26/10/2025, 21:00
Novorizontino
vs
Curitiba
💬 casa / empate / fora
Betano 1.53
SuperBet 5.50
SportingBet 8.90
CALCULADORA
QUANTO VOCÊ QUER APORTAR
RESULTADO FINAL
Apostas: 100
Arbitragem:
Voltar:
Retorno Certo:
// listar casas de apostas
document.querySelectorAll('.dropdown-toggle').forEach(btn => {
btn.addEventListener('click', () => {
const dropdown = btn.parentElement;
dropdown.classList.toggle('open');
});
});
// selecionar aposta em destaque
document.querySelectorAll('.info').forEach(card => {
card.addEventListener('click', () => {
const mercados = [];
card.closest('.bet-card').querySelectorAll('.bet-card__market .market_item').forEach(item => {
const casaHTML = item.querySelector('span').innerHTML;
const mercadoTexto = item.querySelector('.copy_market').textContent.trim();
const mercadoOdd = item.querySelector('.odd_value').textContent.trim();
mercados.push({ casa: casaHTML, mercado: mercadoTexto, odd: mercadoOdd });
});
const marketsDiv = document.querySelector('#market-odds');
if (marketsDiv) {
marketsDiv.innerHTML = mercados.map((m, index) => {
const i = index + 1;
return `
${m.casa} ${m.mercado} Retorna
×
=
110,78
`;
}).join('');
}
const sport = card.closest('.bet-card').querySelector('.sport')?.textContent || '';
const country = card.closest('.bet-card').querySelector('.bet-card__country')?.textContent || '';
const date = card.closest('.bet-card').querySelector('.bet-card__date')?.textContent || '';
const gain = card.closest('.bet-card').querySelector('.gain')?.textContent || '';
const match = card.closest('.bet-card').querySelector('.match-title')?.textContent.trim() || 'Aposta';
document.querySelector('.match-name').textContent = match;
document.querySelector('.match-date').textContent = 'Data do Evento: '+ date;
document.querySelector('.match-sport').textContent = sport;
document.querySelector('.match-league').textContent = country;
calc();
countdown('2025-10-26T21:00:00');
});
});
function countdown(deadline){
const alvo = new Date(deadline);
const diffMs = alvo - new Date();;
// const durationInSeconds = 1 * 10; // deadline manual
const durationInSeconds = Math.max(0, Math.floor(diffMs / 1000));
let remaining = durationInSeconds;
const countdownElement = document.getElementById("countdown");
function formatTime(seconds) {
const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
const s = String(seconds % 60).padStart(2, '0');
return `${h}:${m}:${s}`;
}
function updateCountdown() {
countdownElement.textContent = formatTime(remaining);
if (remaining > 0) {
remaining--;
} else {
clearInterval(timer);
countdownElement.textContent = "⏰ O Evento Começou!";
countdownElement.classList.add("expired");
}
}
// Atualiza a cada segundo
updateCountdown(); // mostra o tempo inicial imediatamente
const timer = setInterval(updateCountdown, 1000);
}
function getInputValue(id) {
return parseFloat(document.getElementById(id)?.value) || 0;
}
// calculadora
document.querySelectorAll('.odd-input, #stake').forEach(el => {
el.addEventListener('input', calc);
});
function calc() {
const stakeInput = document.getElementById('stake');
const stake = stakeInput ? parseFloat(stakeInput.value) || 0 : 0;
const odds = [];
for (let i = 1; i <= 3; i++) {
const input = document.getElementById(`odd-${i}`);
if (input) odds.push(parseFloat(input.value) || 0);
}
if (odds.length sum + (o > 0 ? 1 / o : 0), 0);
const arbitragem = (invTotal * 100).toFixed(2);
const stakes = odds.map(o => (o > 0 ? stake / (o * invTotal) : 0));
const retornos = stakes.map((s, i) => (s * odds[i]).toFixed(2));
stakes.forEach((valor, i) => {
const stakeField = document.getElementById(`stake-${i + 1}`);
if (stakeField) stakeField.value = valor.toFixed(2);
const retornoField = document.getElementById(`return-${i + 1}`);
if (retornoField) retornoField.textContent = retornos[i];
});
const retornoCerto = Math.min(...retornos.map(r => parseFloat(r)));
const arbitragemValue = (100 - (invTotal * 100)).toFixed(2);
const profitValue = (retornoCerto - stake).toFixed(2);
const setText = (id, value) => {
const el = document.getElementById(id);
if (el) el.textContent = value;
};
setText('total-return', retornoCerto);
setText('return-total', retornoCerto);
setText('sum-stake', stake.toFixed(2));
setText('arbitrage', `${arbitragemValue}%`);
setText('profit-value', profitValue);
}
// mobile direciona p/ aposta em destaque
(function() {
const MOBILE_QUERY = '(max-width: 768px)';
const SCROLL_OFFSET = 10;
function getScrollParent(el) {
while (el) {
const style = getComputedStyle(el);
const overflowY = style.overflowY + style.overflow;
if (/(auto|scroll)/.test(overflowY)) return el;
el = el.parentElement;
}
return window;
}
function scrollToElement(el) {
const parent = getScrollParent(el);
if (parent === window) {
const rect = el.getBoundingClientRect();
const top = rect.top + window.pageYOffset - SCROLL_OFFSET;
window.scrollTo({ top, behavior: 'smooth' });
} else {
const rect = el.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
const offsetTop = rect.top - parentRect.top + parent.scrollTop - SCROLL_OFFSET;
parent.scrollTo({ top: offsetTop, behavior: 'smooth' });
}
}
function updateFeaturedFromCard(card) {
const destaque = document.querySelector('#featured-bet');
if (!destaque) return;
const matchEl = card.querySelector('.match-title');
const matchText = matchEl ? matchEl.textContent.trim().replace(/\s+/g, ' ') : 'Aposta selecionada';
const casa = card.querySelector('.odd-home')?.textContent.trim() || '-';
const empate = card.querySelector('.odd-draw')?.textContent.trim() || '-';
const fora = card.querySelector('.odd-away')?.textContent.trim() || '-';
const featuredMatch = destaque.querySelector('.featured-match');
if (featuredMatch) featuredMatch.textContent = matchText;
const odds = destaque.querySelectorAll('.featured-odds strong');
if (odds.length >= 3) {
odds[0].textContent = casa;
odds[1].textContent = empate;
odds[2].textContent = fora;
}
}
document.addEventListener('click', function(e) {
const odd = e.target.closest('.odd-home, .odd-draw, .odd-away');
if (!odd) return;
const card = odd.closest('.bet-card');
if (!card) return;
updateFeaturedFromCard(card);
if (window.matchMedia(MOBILE_QUERY).matches) {
const destaque = document.querySelector('#featured-bet');
if (destaque) {
setTimeout(() => scrollToElement(destaque), 80);
}
}
});
})();
document.addEventListener("DOMContentLoaded", () => {
const range = document.getElementById('profit');
range.addEventListener('input', function() {
const valor = this.value;
this.title = valor + '%';
document.getElementById('range_profit').textContent = valor +'% - 100% ';
});
const boxes = document.querySelectorAll(".copy_market");
boxes.forEach(box => {
box.addEventListener("click", () => {
const text = box.innerText.trim();
navigator.clipboard.writeText(text).then(() => {
window.alert('Copiado para área de transferência!');
});
});
});
});
async function testarRequisicao() {
const url = '/wp-json/oddsguru/v1/list-odds/';
const dados = {
nome: 'Teste',
valor: 123
};
try {
const resposta = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(dados)
});
if (!resposta.ok) {
throw new Error(`Erro HTTP: ${resposta.status}`);
}
const resultado = await resposta.json();
console.log('✅ Resposta da API:', resultado);
// Exibir na tela
const output = document.createElement('pre');
output.textContent = JSON.stringify(resultado, null, 2);
document.body.appendChild(output);
} catch (erro) {
console.error('❌ Erro na requisição:', erro);
}
}
