<!
-- 🧱 HTML SECTION -->
<div class="container">
<h1>⚽ Sports Prediction Hub</h1>
<!-- 🔮 Upcoming Predictions -->
<div class="section">
<h2>Upcoming Predictions</h2>
<div id="upcoming-container"></div>
</div>
<!-- 🏆 Previous Wins -->
<div class="section">
<h2>Previous Wins</h2>
<div id="previous-container"></div>
</div>
<!-- 🧠 Create Your Own Predictions -->
<div class="section">
<h2>Generate Your Own Predictions</h2>
<form id="custom-form">
<input type="text" id="teamA" placeholder="Team A" required />
<input type="text" id="teamB" placeholder="Team B" required />
<textarea id="userPrediction" rows="3" placeholder="Your prediction (e.g.,
Team A will win 2-1)" required></textarea>
<button type="submit" class="btn">Add Prediction</button>
</form>
<div id="custom-container"></div>
</div>
<!-- 💎 VIP Access -->
<div class="section vip">
<h2>💎 VIP Section</h2>
<p>Unlock premium predictions for just <strong>GHS 50/month</strong>.</p>
<button class="btn" onclick="alert('VIP feature coming soon!')">Subscribe
Now</button>
</div>
</div>
/* 🌈 CSS SECTION */
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to right, #1e3c72, #2a5298);
color: #fff;
}
.container {
max-width: 900px;
margin: auto;
padding: 30px 20px;
}
h1, h2 {
text-align: center;
margin-bottom: 20px;
}
.section {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.match {
display: flex;
justify-content: space-between;
padding: 10px;
margin: 8px 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 8px;
}
.prediction {
font-weight: bold;
color: #00ffcc;
}
.btn {
padding: 10px 16px;
background-color: #00c4ff;
color: #000;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
.btn:hover {
background-color: #00a3d4;
}
input, textarea {
width: 100%;
padding: 10px;
border-radius: 6px;
border: none;
margin-bottom: 10px;
}
.vip {
text-align: center;
font-size: 18px;
color: gold;
}
.vip button {
margin-top: 10px;
}
.no-data {
text-align: center;
font-style: italic;
color: #ccc;
}
// ⚙️ JAVASCRIPT SECTION
const upcomingMatches = [
{ teamA: "Chelsea", teamB: "Arsenal", prediction: "Arsenal wins" },
{ teamA: "Napoli", teamB: "AC Milan", prediction: "Napoli wins" },
{ teamA: "Leipzig", teamB: "Bayern Munich", prediction: "Bayern Munich wins" }
];
const previousWins = [
{ teamA: "Man City", teamB: "Real Madrid", prediction: "Man City won 3-1" },
{ teamA: "PSG", teamB: "Lyon", prediction: "PSG won 2-0" },
{ teamA: "Inter", teamB: "Juventus", prediction: "Draw (1-1)" }
];
function renderMatches(matches, containerId) {
const container = [Link](containerId);
[Link] = "";
if ([Link] === 0) {
[Link] = `<p class="no-data">No data available.</p>`;
return;
}
[Link](({ teamA, teamB, prediction }) => {
const div = [Link]("div");
[Link] = "match";
[Link] = `<span>${teamA} vs ${teamB}</span><span class="prediction">$
{prediction}</span>`;
[Link](div);
});
}
// Custom prediction handler
[Link]("custom-form").addEventListener("submit", function (e) {
[Link]();
const teamA = [Link]("teamA").[Link]();
const teamB = [Link]("teamB").[Link]();
const prediction = [Link]("userPrediction").[Link]();
if (!teamA || !teamB || !prediction) return;
const container = [Link]("custom-container");
const div = [Link]("div");
[Link] = "match";
[Link] = `<span>${teamA} vs ${teamB}</span><span class="prediction">$
{prediction}</span>`;
[Link](div);
// Clear form
[Link]("custom-form").reset();
});
// Initial render
renderMatches(upcomingMatches, "upcoming-container");
renderMatches(previousWins, "previous-container");
