<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OSRS DPS Calculator</title>
<style>
/* CSS */
body {
font-family: 'Arial', sans-serif;
background-color: #1a1a1a;
color: #c5b268;
margin: 0;
padding: 20px;
background-image: url('https://i.imgur.com/7QZ4Q9u.png');
background-size: cover;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: rgba(0, 0, 0, 0.8);
padding: 20px;
border: 2px solid #c5b268;
border-radius: 10px;
}
h1 {
text-align: center;
color: #ff981f;
text-shadow: 2px 2px 2px #000;
}
.calculator-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin: 20px 0;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #ff981f;
}
input, select {
width: 100%;
padding: 8px;
background-color: #2d2d2d;
border: 1px solid #c5b268;
color: #fff;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.result {
text-align: center;
font-size: 24px;
margin-top: 20px;
padding: 15px;
background-color: #2d2d2d;
border-radius: 4px;
}
.instructions {
background-color: #2d2d2d;
padding: 15px;
margin-bottom: 20px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="container">
<h1>OSRS DPS Calculator</h1>
<div class="instructions">
<h3>How to Use:</h3>
<ol>
<li>Select your combat stats</li>
<li>Choose your weapon type</li>
<li>Enter enemy defense level</li>
<li>Select enemy type</li>
<li>Click Calculate</li>
</ol>
</div>
<div class="calculator-grid">
<div class="input-group">
<label>Attack Level</label>
<input type="number" id="attack" min="1" max="99" value="99">
</div>
<div class="input-group">
<label>Strength Level</label>
<input type="number" id="strength" min="1" max="99" value="99">
</div>
<div class="input-group">
<label>Weapon Type</label>
<select id="weapon">
<option value="4">4-tick (Fast)</option>
<option value="5">5-tick (Average)</option>
<option value="7">7-tick (Slow)</option>
</select>
</div>
<div class="input-group">
<label>Enemy Defense</label>
<input type="number" id="defense" min="1" max="999" value="100">
</div>
<div class="input-group">
<label>Enemy Type</label>
<select id="enemyType">
<option value="1.0">Standard</option>
<option value="1.2">Demon</option>
<option value="1.1">Undead</option>
<option value="1.3">Dragon</option>
</select>
</div>
</div>
<button onclick="calculateDPS()">Calculate DPS</button>
<div class="result" id="result">
Your DPS: <span id="dpsValue">0.00</span>
</div>
</div>
<script>
// JavaScript
function calculateDPS() {
// Get input values
const attack = parseInt(document.getElementById('attack').value);
const strength = parseInt(document.getElementById('strength').value);
const weaponSpeed = parseInt(document.getElementById('weapon').value);
const defense = parseInt(document.getElementById('defense').value);
const enemyMultiplier = parseFloat(document.getElementById('enemyType').value);
// Simplified DPS formula (you can expand this with actual game formulas)
const attackRoll = attack * (64 + 20);
const defenseRoll = defense * (64 + 25);
const hitChance = attackRoll / (attackRoll + defenseRoll);
const maxHit = Math.floor(0.5 + strength * (64 + 20) / 640);
const averageHit = (maxHit / 2) * hitChance * enemyMultiplier;
const dps = (averageHit / (weaponSpeed * 0.6)).toFixed(2);
// Display result
document.getElementById('dpsValue').textContent = dps;
document.getElementById('dpsValue').style.color = dps > 5 ? '#4CAF50' : '#ff4444';
}
// Add enter key support
document.querySelectorAll('input, select').forEach(element => {
element.addEventListener('keypress', (e) => {
if(e.key === 'Enter') calculateDPS();
});
});
</script>
</body>
</html>
