Huidig Seizoen: Hoofdstuk 5 Seizoen 3 Einddatum seizoen: 15 juni 2025
87 dagen over
Huidig niveau
Huidige XP Vooruitgang op weg naar het volgende niveau
Elk level vereist 80.000 XP
Doelniveau
Nog resterende dagen in het seizoen
Dagelijkse opdrachten
Wekelijkse zoektochten
Mijlpalen
Bonus Doelen
Tegenstanders uitschakelen
1.000 XP
Kisten of munitiekisten doorzoeken
1.000 XP
Hulpbronnen verzamelen
1.000 XP
+ Dagelijkse zoektocht toevoegen
Geschatte dagelijkse XP van Quests
Week Selectie
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Deel schade uit aan tegenstanders
20.000 XP
Land op verschillende genoemde locaties
20.000 XP
Specifieke items verzamelen
20.000 XP
Bezoek specifieke locaties
20.000 XP
Overleef stormcirkels
20.000 XP
Geschatte wekelijkse XP van Quests
Mijlpaal Categorie
Combat
Exploration
Survival
Vehicles
Mijlpaal 1/20: Schakel 25 tegenstanders uit
8.000 XP
Mijlpaal 2/20: 100 tegenstanders uitschakelen
8.000 XP
Mijlpaal 3/20: 250 tegenstanders uitschakelen
8.000 XP
Geschatte resterende mijlpaal XP
Overwinning Kroon
5.000 XP
Evenement Uitdagingen (5/10)
30.000 XP
Geschatte resterende bonus XP
Gemiddelde extra onderscheidingen
Kisten, munitiekisten, voorraaddruppels, enz.
Feest Boost (5%) ℹ️
XP-boost als je met vrienden speelt
Supergeladen XP ℹ️
Tijdelijke boost door het missen van dagelijkse quests
Strijdpas Boost (25%) ℹ️
Boost door het bezit van de Battle Pass
Dubbel XP weekend ℹ️
Speciaal evenement met 2x XP
Bereken mijn XP-pad Je XP reis
Huidig niveau:
55
Doelniveau:
100
Totaal XP nodig:
3.600.000 XP
Dagelijks XP-doel:
41.379 XP
Geschatte matches per dag:
5-7 Wedstrijden
Geschatte dagelijkse tijd:
1,5 uur
Days Remaining
Level Progress
Voortgangsgegevens exporteren
:root {
–primary: #5d3fd3;
–secondary: #ff9800;
–dark: #121212;
–light: #f5f5f5;
–success: #4caf50;
–warning: #ff5722;
–fortnite-blue: #1b9ad8;
–fortnite-purple: #9d4dbb;
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Segoe UI’, ‘Roboto’, sans-serif;
}body {
background-color: #0d1117;
color: white;
line-height: 1.6;
}.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: linear-gradient(135deg, var(–fortnite-blue), var(–fortnite-purple));
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}h1 {
font-size: 2.5rem;
margin-bottom: 10px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}h2 {
font-size: 1.8rem;
margin: 15px 0;
color: var(–secondary);
}h3 {
font-size: 1.4rem;
margin: 10px 0;
color: var(–fortnite-blue);
}.sub-title {
color: rgba(255, 255, 255, 0.8);
font-size: 1.1rem;
}.season-info {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(29, 29, 39, 0.8);
padding: 15px;
border-radius: 10px;
margin-bottom: 20px;
}.season-info .days-left {
background-color: var(–fortnite-purple);
color: white;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
}.card {
background-color: rgba(29, 29, 39, 0.8);
border-radius: 15px;
padding: 20px;
margin-bottom: 25px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
}.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}.card-header h3 {
margin: 0;
}.card-header .icon {
font-size: 1.5rem;
color: var(–secondary);
}.form-group {
margin-bottom: 15px;
}label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}input[type=”number”],
input[type=”text”],
select {
width: 100%;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
background-color: rgba(40, 40, 50, 0.8);
color: white;
font-size: 1rem;
transition: all 0.3s ease;
}input[type=”number”]:focus,
input[type=”text”]:focus,
select:focus {
outline: none;
border-color: var(–fortnite-blue);
box-shadow: 0 0 0 2px rgba(27, 154, 216, 0.3);
}.input-group {
display: flex;
gap: 15px;
}.input-group .form-group {
flex: 1;
}button {
background: linear-gradient(135deg, var(–fortnite-blue), var(–fortnite-purple));
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}button:active {
transform: translateY(1px);
}.btn-calculate {
width: 100%;
margin-top: 10px;
padding: 15px;
font-size: 1.1rem;
text-transform: uppercase;
}.results {
background: linear-gradient(135deg, rgba(29, 29, 39, 0.9), rgba(40, 40, 60, 0.9));
border-radius: 15px;
padding: 25px;
margin-top: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}.result-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}.result-label {
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}.result-value {
font-size: 1.2rem;
font-weight: 700;
color: var(–secondary);
}.progress-container {
margin-top: 25px;
}.progress-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}.progress-bar {
height: 25px;
background-color: rgba(40, 40, 50, 0.8);
border-radius: 12px;
overflow: hidden;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
}.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(–fortnite-blue), var(–fortnite-purple));
border-radius: 12px;
transition: width 0.8s ease;
position: relative;
}.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}.quest-section {
margin-top: 20px;
}.quest-item {
display: flex;
align-items: center;
padding: 10px;
margin-bottom: 10px;
background-color: rgba(40, 40, 50, 0.5);
border-radius: 8px;
border-left: 3px solid var(–fortnite-blue);
}.quest-checkbox {
margin-right: 15px;
width: 20px;
height: 20px;
cursor: pointer;
}.quest-name {
flex: 1;
}.quest-xp {
font-weight: 700;
color: var(–secondary);
margin-left: 15px;
}.tabs {
display: flex;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
margin-bottom: 20px;
}.tab {
padding: 10px 20px;
cursor: pointer;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.6);
font-weight: 600;
transition: all 0.3s ease;
}.tab.active {
color: var(–secondary);
border-bottom: 3px solid var(–secondary);
}.tab-content {
display: none;
}.tab-content.active {
display: block;
}.xp-boost-toggle {
display: flex;
align-items: center;
margin-bottom: 15px;
}.toggle {
position: relative;
display: inline-block;
width: 56px;
height: 30px;
margin-right: 15px;
}.toggle input {
opacity: 0;
width: 0;
height: 0;
}.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(40, 40, 50, 0.8);
transition: .4s;
border-radius: 30px;
}.toggle-slider:before {
position: absolute;
content: “”;
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}input:checked + .toggle-slider {
background-color: var(–fortnite-blue);
}input:checked + .toggle-slider:before {
transform: translateX(26px);
}.tooltip {
position: relative;
display: inline-block;
margin-left: 5px;
color: rgba(255, 255, 255, 0.6);
}.tooltip .tooltip-text {
visibility: hidden;
width: 200px;
background-color: rgba(0, 0, 0, 0.8);
color: white;
text-align: center;
border-radius: 6px;
padding: 10px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
transform: translateX(-50%);
opacity: 0;
transition: opacity 0.3s;
font-size: 0.9rem;
}.tooltip:hover .tooltip-text {
visibility: visible;
opacity: 1;
}.graph-container {
height: 250px;
margin-top: 30px;
margin-bottom: 20px;
position: relative;
}.graph-svg {
width: 100%;
height: 100%;
background-color: rgba(29, 29, 39, 0.5);
border-radius: 10px;
padding: 20px;
}.graph-line {
fill: none;
stroke: var(–fortnite-blue);
stroke-width: 3;
}.graph-area {
fill: url(#gradient);
opacity: 0.3;
}.graph-dot {
fill: var(–secondary);
r: 5;
}.graph-axis {
stroke: rgba(255, 255, 255, 0.2);
stroke-width: 1;
}.graph-label {
fill: rgba(255, 255, 255, 0.7);
font-size: 12px;
}.export-section {
text-align: center;
margin-top: 30px;
}.btn-export {
background: transparent;
border: 1px solid var(–fortnite-blue);
color: var(–fortnite-blue);
}@media (max-width: 768px) {
.container {
padding: 15px;
}
h1 {
font-size: 2rem;
}
.input-group {
flex-direction: column;
gap: 10px;
}
.card {
padding: 15px;
}
}// Tab switching
document.querySelectorAll(‘.tab’).forEach(tab => {
tab.addEventListener(‘click’, () => {
const tabId = tab.getAttribute(‘data-tab’);
// Remove active class from all tabs and tab contents
document.querySelectorAll(‘.tab’).forEach(t => t.classList.remove(‘active’));
document.querySelectorAll(‘.tab-content’).forEach(c => c.classList.remove(‘active’));
// Add active class to clicked tab and corresponding content
tab.classList.add(‘active’);
document.getElementById(`${tabId}-tab`).classList.add(‘active’);
});
});// Calculate button
document.getElementById(‘calculate-btn’).addEventListener(‘click’, () => {
// In a real calculator, we’d do actual calculations here
// For now, we’ll just display the results section
document.getElementById(‘results-section’).style.display = ‘block’;
// Scroll to results
document.getElementById(‘results-section’).scrollIntoView({
behavior: ‘smooth’
});
});// Add Daily Quest button
document.getElementById(‘add-daily-quest’).addEventListener(‘click’, () => {
const questSection = document.querySelector(‘#daily-tab .quest-section’);
const newQuest = document.createElement(‘div’);
newQuest.className = ‘quest-item’;
newQuest.innerHTML = `
New daily quest
1.000 XP
`;
questSection.insertBefore(newQuest, document.getElementById(‘add-daily-quest’));
});// Export button
document.getElementById(‘export-btn’).addEventListener(‘click’, () => {
alert(‘Data exported successfully! (This would download a file in a real implementation)’);
});