<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Football Manager Lite</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #0f0f0f;
color: #eee;
}
header {
background: #181818;
padding: 10px;
text-align: center;
border-bottom: 2px solid #333;
}
nav {
display: flex;
background: #222;
}
nav button {
flex: 1;
padding: 10px;
background: #222;
color: #eee;
border: none;
cursor: pointer;
}
nav button.active {
background: #444;
font-weight: bold;
}
.panel {
display: none;
padding: 15px;
}
.panel.active {
display: block;
}
.box {
background: #1b1b1b;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #333;
}
button.small {
padding: 4px 8px;
margin-left: 5px;
}
</style>
</head>
<body>
<header>
<h1>Football Manager Lite</h1>
<div id="identity"></div>
</header>
<nav>
<button onclick="openTab('club')" class="active">Club</button>
<button onclick="openTab('squad')">Squad</button>
<button onclick="openTab('transfers')">Transfers</button>
<button onclick="openTab('fixtures')">Fixtures</button>
<button onclick="openTab('tables')">Tables</button>
<button onclick="openTab('news')">News</button>
</nav>
<div id="club" class="panel active"></div>
<div id="squad" class="panel"></div>
<div id="transfers" class="panel"></div>
<div id="fixtures" class="panel"></div>
<div id="tables" class="panel"></div>
<div id="news" class="panel"></div>
<script>
// ======================
// BASIC UTILITIES
// ======================
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function pick(arr) {
return arr[rand(0, arr.length - 1)];
}
// ======================
// GAME STATE
// ======================
const game = {
season: 2025,
money: 30000000,
news: [],
leagues: [],
fixtures: [],
transferMarket: [],
playerClub: null
};
// ======================
// DATA POOLS
// ======================
const firstNames = ["Lorenzo","Maxime","Alessandro","Alejandro","Massimo","David","Davide","Pietro","Riccardo","Richard","Ricardo","Damiano","Damien","Fernando","Ferran"];
const lastNames = ["Santos","Gonzalez","Ramos","Negri","Fernandez","Torres","Ferreira","Silva","Costa","Romano","Bianchi"];
const nationalities = ["Italy","Spain","France","Portugal","Argentina","Brazil","Belgium","Netherlands","Germany","England"];
const positions = ["GK","DEF","DEF","MID","MID","ATT"];
// ======================
// CREATE PLAYER
// ======================
function createPlayer(tier) {
let ovrBase = tier === 1 ? rand(70,85) :
tier === 2 ? rand(64,78) :
tier === 3 ? rand(58,72) :
rand(52,66);
let pot = Math.min(95, ovrBase + rand(2,15));
let age = rand(17,34);
let value = Math.round(
(ovrBase * 700000) *
(age < 22 ? 1.6 : age > 30 ? 0.6 : 1) +
(pot - ovrBase) * 400000
);
return {
name: pick(firstNames) + " " + pick(lastNames),
nationality: pick(nationalities),
age,
pos: pick(positions),
ovr: ovrBase,
pot,
contract: rand(1,5),
value
};
}
// ======================
// CREATE TEAM
// ======================
function createTeam(name, tier) {
let squad = [];
for (let i = 0; i < rand(22,26); i++) {
squad.push(createPlayer(tier));
}
return {
name,
tier,
squad,
points: 0,
gf: 0,
ga: 0
};
}
// ======================
// CREATE LEAGUES
// ======================
function createLeagues() {
const tiers = ["Tier 1","Tier 2","Tier 3","Tier 4"];
const names = [
"Roma FC","Milano FC","Torino FC","Napoli Azzurra","Bergamo Calcio",
"Bologna FC","Verona FC","Parma FC","Pisa FC","Bari FC",
"Palermo FC","Catania FC","Lecce FC","Modena FC","Como FC",
"Padova FC","Trieste FC","Siena FC","Perugia FC","Arezzo FC"
];
let index = 0;
for (let t = 0; t < 4; t++) {
let league = { name: tiers[t], tier: t+1, teams: [] };
for (let i = 0; i < 8; i++) {
league.teams.push(createTeam(names[index % names.length], t+1));
index++;
}
game.leagues.push(league);
}
}
// ======================
// PICK PLAYER CLUB
// ======================
function chooseClub() {
game.playerClub = pick(game.leagues[1].teams); // Tier 2 club
}
// ======================
// FIXTURES
// ======================
function generateFixtures() {
game.fixtures = [];
game.leagues.forEach(l => {
let t = l.teams;
for (let i = 0; i < t.length; i++) {
for (let j = i+1; j < t.length; j++) {
game.fixtures.push({
competition: l.name,
home: t[i],
away: t[j],
played: false,
score: ""
});
}
}
});
}
// ======================
// MATCH SIMULATION
// ======================
function avgOVR(team) {
return team.squad.slice(0,11).reduce((s,p)=>s+p.ovr,0)/11;
}
function playMatch(f) {
let h = avgOVR(f.home);
let a = avgOVR(f.away);
let hg = Math.min(4, Math.max(0, rand(0,2) + Math.round((h-a)/25)));
let ag = Math.min(4, Math.max(0, rand(0,2) + Math.round((a-h)/25)));
f.played = true;
f.score = hg + "-" + ag;
f.home.gf += hg; f.home.ga += ag;
f.away.gf += ag; f.away.ga += hg;
if (hg > ag) f.home.points += 3;
else if (ag > hg) f.away.points += 3;
else { f.home.points++; f.away.points++; }
game.news.unshift(`⚽ ${f.home.name} ${f.score} ${f.away.name}`);
}
// ======================
// TRANSFERS
// ======================
function generateTransferMarket() {
game.transferMarket = [];
for (let i=0;i<25;i++) game.transferMarket.push(createPlayer(rand(1,4)));
}
function buyPlayer(i) {
let p = game.transferMarket[i];
if (game.money < p.value) return alert("Not enough money");
game.money -= p.value;
game.playerClub.squad.push(p);
game.transferMarket.splice(i,1);
renderAll();
}
// ======================
// UI
// ======================
function openTab(id) {
document.querySelectorAll('.panel').forEach(p=>p.classList.remove('active'));
document.querySelectorAll('nav button').forEach(b=>b.classList.remove('active'));
document.getElementById(id).classList.add('active');
event.target.classList.add('active');
}
function renderClub() {
document.getElementById("club").innerHTML = `
<div class="box">
<b>Club:</b> ${game.playerClub.name}<br>
<b>Tier:</b> ${game.playerClub.tier}<br>
<b>Budget:</b> €${game.money.toLocaleString()}
</div>
`;
document.getElementById("identity").innerHTML =
"You manage <b>" + game.playerClub.name + "</b> — Season " + game.season;
}
function renderSquad() {
let html = `<div class="box"><h3>Squad</h3>`;
game.playerClub.squad.forEach(p=>{
html += `${p.name} (${p.pos}) ${p.ovr}/${p.pot} Age ${p.age} €${(p.value/1e6).toFixed(1)}M<br>`;
});
html += `</div>`;
document.getElementById("squad").innerHTML = html;
}
function renderTransfers() {
let html = `<div class="box"><h3>Transfer Market</h3>`;
game.transferMarket.forEach((p,i)=>{
html += `${p.name} (${p.pos}) ${p.ovr}/${p.pot} €${(p.value/1e6).toFixed(1)}M
<button class="small" onclick="buyPlayer(${i})">Buy</button><br>`;
});
html += `</div>`;
document.getElementById("transfers").innerHTML = html;
}
function renderFixtures() {
let html = `<div class="box"><h3>Fixtures</h3>`;
game.fixtures.filter(f=>!f.played).slice(0,6).forEach(f=>{
playMatch(f);
html += `${f.competition}: ${f.home.name} ${f.score} ${f.away.name}<br>`;
});
html += `</div>`;
document.getElementById("fixtures").innerHTML = html;
}
function renderTables() {
let html = "";
game.leagues.forEach(l=>{
html += `<div class="box"><h3>${l.name}</h3>`;
l.teams.sort((a,b)=>b.points-a.points).forEach((t,i)=>{
html += `${i+1}. ${t.name} ${t.points} pts<br>`;
});
html += `</div>`;
});
document.getElementById("tables").innerHTML = html;
}
function renderNews() {
document.getElementById("news").innerHTML =
`<div class="box">${game.news.slice(0,20).join("<br>")}</div>`;
}
function renderAll() {
renderClub();
renderSquad();
renderTransfers();
renderFixtures();
renderTables();
renderNews();
}
// ======================
// INIT
// ======================
createLeagues();
chooseClub();
generateFixtures();
generateTransferMarket();
renderAll();
</script>
</body>
</html>