Desafio do Cultivo
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: ‘Inter’, sans-serif;
background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
color: #F9FAFB;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.game-container {
max-width: 600px;
width: 100%;
}
.card {
background: #374151;
border: 1px solid #4B5563;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(34, 197, 94, 0.2);
overflow: hidden;
transition: all 0.5s ease;
}
.card-header {
padding: 32px 32px 16px 32px;
text-align: center;
}
.progress-container {
margin-bottom: 24px;
}
.progress-label {
font-size: 14px;
font-weight: 500;
color: #34D399;
margin-bottom: 8px;
}
.progress-bar {
width: 100%;
height: 8px;
background: #4B5563;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: #10B981;
border-radius: 4px;
transition: width 0.5s ease;
}
.step-icon {
width: 64px;
height: 64px;
background: #4B5563;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px auto;
}
.step-icon svg {
width: 32px;
height: 32px;
stroke: #34D399;
}
.step-title {
font-size: 28px;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.2;
}
.card-content {
padding: 16px 32px 32px 32px;
}
.options-container {
max-width: 400px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.option-button {
width: 100%;
background: #4B5563;
border: none;
border-radius: 8px;
padding: 16px;
color: white;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-align: left;
}
.option-button:hover:not(:disabled) {
background: #6B7280;
transform: translateY(-2px);
}
.option-button:disabled {
cursor: not-allowed;
}
.option-button.correct {
background: #10B981;
}
.option-button.incorrect {
background: #EF4444;
}
.feedback {
margin-top: 24px;
padding: 16px;
border-radius: 8px;
text-align: center;
max-width: 400px;
margin-left: auto;
margin-right: auto;
opacity: 0;
animation: fadeIn 0.5s ease forwards;
}
.feedback.positive {
background: rgba(16, 185, 129, 0.2);
color: #34D399;
}
.feedback.negative {
background: rgba(239, 68, 68, 0.2);
color: #F87171;
}
.result-container {
text-align: center;
}
.result-icon {
width: 80px;
height: 80px;
background: #4B5563;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 24px auto;
border: 4px solid;
}
.result-icon.gold {
border-color: #FBBF24;
}
.result-icon.green {
border-color: #34D399;
}
.result-icon.orange {
border-color: #FB923C;
}
.result-icon svg {
width: 40px;
height: 40px;
}
.result-icon svg.gold {
stroke: #FBBF24;
}
.result-icon svg.green {
stroke: #34D399;
}
.result-icon svg.orange {
stroke: #FB923C;
}
.result-title {
font-size: 36px;
font-weight: 800;
margin-bottom: 16px;
}
.result-score {
font-size: 48px;
font-weight: 700;
margin-bottom: 16px;
}
.result-score span {
font-size: 20px;
color: #9CA3AF;
}
.result-message {
color: #D1D5DB;
margin-bottom: 32px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
}
.cta-section {
background: #1F2937;
padding: 32px;
border-radius: 12px;
margin-bottom: 24px;
}
.cta-title {
font-size: 20px;
font-weight: 700;
color: #34D399;
margin-bottom: 16px;
}
.cta-text {
color: #D1D5DB;
margin-bottom: 24px;
line-height: 1.5;
}
.bonus-badge {
background: rgba(251, 191, 36, 0.2);
border: 1px solid #D97706;
border-radius: 8px;
padding: 16px;
margin-bottom: 24px;
display: none;
align-items: center;
justify-content: center;
gap: 8px;
animation: fadeIn 0.5s ease forwards;
}
.bonus-badge.show {
display: flex;
}
.bonus-badge svg {
width: 20px;
height: 20px;
stroke: #FBBF24;
}
.bonus-text {
color: #FDE68A;
font-weight: 600;
}
.cta-button {
width: 100%;
background: #10B981;
border: none;
border-radius: 8px;
padding: 24px;
color: white;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
}
.cta-button:hover {
background: #059669;
transform: translateY(-2px);
}
.action-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.action-button {
background: transparent;
border: 1px solid #6B7280;
border-radius: 8px;
padding: 12px 24px;
color: #D1D5DB;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 8px;
}
.action-button:hover {
background: #4B5563;
color: white;
}
.action-button svg {
width: 16px;
height: 16px;
stroke: currentColor;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.hide {
display: none;
}
@media (max-width: 640px) {
body {
padding: 16px;
}
.card-header {
padding: 24px 24px 12px 24px;
}
.card-content {
padding: 12px 24px 24px 24px;
}
.step-title {
font-size: 24px;
}
.result-title {
font-size: 28px;
}
.result-score {
font-size: 36px;
}
.cta-section {
padding: 24px;
}
}
Quer colher de verdade, sem depender da sorte?
Aprenda o passo a passo com o guia Meu Primeiro Cultivo + bônus Guia Indoor por apenas R$9,90.
Parabéns! Você ganhou 10% de desconto exclusivo!
QUERO APRENDER A CULTIVAR
Jogar Novamente
Compartilhar
const gameSteps = [
{
id: 1,
title: ‘Qual semente você vai plantar?’,
icon: ‘M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4’,
options: [
{ text: ‘Feminizada’, scoreEffect: 20, feedback: ‘Ótima escolha! Garante plantas fêmeas, que produzem flores.’ },
{ text: ‘Regular’, scoreEffect: 10, feedback: ‘Um clássico! Pode gerar machos ou fêmeas, um desafio a mais.’ },
{ text: ‘Automática’, scoreEffect: 15, feedback: ‘Rápida e prática! Floresce com o tempo, não depende da luz.’ },
],
},
{
id: 2,
title: ‘Como você vai germinar?’,
icon: ‘M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z’,
options: [
{ text: ‘Papel toalha úmido’, scoreEffect: 20, feedback: ‘Método super eficaz e popular! As raízes aparecem rapidinho.’ },
{ text: ‘Copo com água’, scoreEffect: 5, feedback: ‘Funciona, mas cuidado para não “afogar” a semente!’ },
{ text: ‘Direto na terra’, scoreEffect: 10, feedback: ‘O caminho natural! Requer um pouco mais de paciência e umidade controlada.’ },
],
},
{
id: 3,
title: ‘Qual será a “casa” da sua planta?’,
icon: ‘M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4’,
options: [
{ text: ‘Terra comum de jardim’, scoreEffect: 5, feedback: ‘Pode faltar aeração e nutrientes essenciais.’ },
{ text: ‘Substrato Leve e Areado’, scoreEffect: 20, feedback: ‘Perfeito! Suas raízes terão espaço e nutrientes para crescerem fortes.’ },
{ text: ‘Fibra de coco’, scoreEffect: 15, feedback: ‘Excelente para aeração, mas você precisará adicionar nutrientes líquidos.’ },
],
},
{
id: 4,
title: ‘Hora de regar! Qual a medida?’,
icon: ‘M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z’,
options: [
{ text: ‘Pouca água, com medo de errar’, scoreEffect: 10, feedback: ‘Cuidado, a sede pode estressar sua planta!’ },
{ text: ‘Muita água, para garantir’, scoreEffect: -10, feedback: ‘Oh não! Raízes afogadas não conseguem respirar e podem apodrecer.’ },
{ text: ‘Equilíbrio: úmido, não encharcado’, scoreEffect: 25, feedback: ‘Na mosca! A umidade ideal para um crescimento feliz.’ },
],
},
{
id: 5,
title: ‘E a luz? Qual a fonte de energia?’,
icon: ‘M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z’,
options: [
{ text: ‘Sol da janela’, scoreEffect: 10, feedback: ‘É um começo, mas pode não ser o suficiente para uma floração robusta.’ },
{ text: ‘Lâmpada comum de casa’, scoreEffect: -5, feedback: ‘A luz não tem o espectro correto e pode mais queimar do que ajudar.’ },
{ text: ‘Painel de LED para cultivo’, scoreEffect: 25, feedback: ‘Isso sim! A tecnologia a favor de uma colheita farta e de qualidade.’ },
],
},
{
id: 6,
title: ‘Chegou a hora da colheita!’,
icon: ‘M7 4V2a1 1 0 011-1h8a1 1 0 011 1v2m-9 0h10m-9 0a2 2 0 00-2 2v14a2 2 0 002 2h8a2 2 0 002-2V6a2 2 0 00-2-2M9 12h6m-6 4h6m2-5V7a2 2 0 00-2-2H9a2 2 0 00-2 2v4.01’,
options: [
{ text: ‘Colher Agora!’, scoreEffect: 0, feedback: ‘A ansiedade é grande, mas a paciência recompensa!’ },
]
}
];
let currentStepIndex = 0;
let score = 0;
let selectedOption = null;
function updateProgress() {
const percentage = ((currentStepIndex + 1) / gameSteps.length) * 100;
document.getElementById(‘progressFill’).style.width = percentage + ‘%’;
document.getElementById(‘progressLabel’).textContent = `ETAPA ${currentStepIndex + 1} DE ${gameSteps.length}`;
}
function renderStep() {
const step = gameSteps[currentStepIndex];
document.getElementById(‘stepTitle’).textContent = step.title;
document.getElementById(‘stepIcon’).innerHTML = “;
const optionsContainer = document.getElementById(‘optionsContainer’);
optionsContainer.innerHTML = ”;
step.options.forEach((option, index) => {
const button = document.createElement(‘button’);
button.className = ‘option-button’;
button.textContent = option.text;
button.onclick = () => selectOption(option, button);
optionsContainer.appendChild(button);
});
document.getElementById(‘feedback’).className = ‘feedback hide’;
selectedOption = null;
updateProgress();
}
function selectOption(option, buttonElement) {
if (selectedOption) return;
selectedOption = option;
score += option.scoreEffect;
// Disable all buttons and highlight selected
const buttons = document.querySelectorAll(‘.option-button’);
buttons.forEach(btn => btn.disabled = true);
buttonElement.className += option.scoreEffect > 0 ? ‘ correct’ : ‘ incorrect’;
// Show feedback
const feedbackEl = document.getElementById(‘feedback’);
feedbackEl.textContent = option.feedback;
feedbackEl.className = `feedback ${option.scoreEffect > 0 ? ‘positive’ : ‘negative’}`;
// Move to next step after delay
setTimeout(() => {
if (currentStepIndex = 90) {
return {
title: ‘Mestre do Cultivo!’,
message: ‘Sua colheita foi espetacular! Você tem o toque de mestre. Cada decisão foi precisa e o resultado é uma planta de dar orgulho.’,
iconClass: ‘gold’,
iconPath: ‘M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z’,
bonus: true,
};
} else if (score >= 60) {
return {
title: ‘Bela Colheita!’,
message: ‘Você mandou bem! Sua planta cresceu saudável e feliz. Com um pouco mais de técnica, sua próxima colheita será ainda mais incrível.’,
iconClass: ‘green’,
iconPath: ‘M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z’,
bonus: false,
};
} else {
return {
title: ‘Quase lá!’,
message: ‘Sua planta sobreviveu, mas parece um pouco triste. O cultivo tem seus segredos, e alguns erros custaram caro na sua colheita.’,
iconClass: ‘orange’,
iconPath: ‘M13 17h8m0 0V9m0 8l-8-8-4 4-6-6’,
bonus: false,
};
}
}
function showResult() {
const result = getResult(score);
document.getElementById(‘gameCard’).className = ‘card hide’;
document.getElementById(‘resultCard’).className = ‘card’;
document.getElementById(‘resultTitle’).textContent = result.title;
document.getElementById(‘resultScore’).innerHTML = `${score}
/105 PTS`;
document.getElementById(‘resultMessage’).textContent = result.message;
const resultIcon = document.getElementById(‘resultIcon’);
resultIcon.className = `result-icon ${result.iconClass}`;
resultIcon.innerHTML = “;
if (result.bonus) {
document.getElementById(‘bonusBadge’).className = ‘bonus-badge show’;
}
}
function resetGame() {
currentStepIndex = 0;
score = 0;
selectedOption = null;
document.getElementById(‘gameCard’).className = ‘card’;
document.getElementById(‘resultCard’).className = ‘card hide’;
document.getElementById(‘bonusBadge’).className = ‘bonus-badge’;
renderStep();
}
// Event listeners
document.getElementById(‘resetButton’).onclick = resetGame;
// Initialize game
renderStep();
// IMPORTANTE: Substitua o link abaixo pelo seu link real do produto
// Procure por “https://seu-link-aqui.com” e substitua
PlanteColha 