cementing / index.html
alterzick's picture
Add 3 files
97e941d verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cementing Job Calculator</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.tab-btn.active {
background-color: #3b82f6;
color: white;
}
.input-highlight {
background-color: #f0f9ff;
border-left: 4px solid #3b82f6;
}
.result-box {
background-color: #f8fafc;
border-left: 4px solid #10b981;
}
.risk-high {
background-color: #fee2e2;
}
.risk-medium {
background-color: #fef3c7;
}
.risk-low {
background-color: #dcfce7;
}
</style>
</head>
<body class="bg-gray-50 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<header class="mb-8 text-center">
<h1 class="text-3xl font-bold text-blue-800 mb-2">Cementing Job Calculator</h1>
<p class="text-gray-600">Comprehensive tool for cementing operation planning and analysis</p>
</header>
<div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
<div class="flex flex-wrap border-b border-gray-200">
<button class="tab-btn active px-6 py-3 font-medium text-sm" data-tab="calculation">Calculation Methods</button>
<button class="tab-btn px-6 py-3 font-medium text-sm" data-tab="economic">Economic Analysis</button>
<button class="tab-btn px-6 py-3 font-medium text-sm" data-tab="probability">Probability Analysis</button>
<button class="tab-btn px-6 py-3 font-medium text-sm" data-tab="mitigation">Mitigation Strategies</button>
<button class="tab-btn px-6 py-3 font-medium text-sm" data-tab="references">References</button>
</div>
<!-- Calculation Methods Tab -->
<div id="calculation" class="tab-content active p-6">
<div class="mb-6">
<h2 class="text-xl font-semibold mb-4 text-blue-700">Cementing Method Selection</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
<div class="p-4 border rounded-lg cursor-pointer method-option hover:bg-blue-50" data-method="balance">
<h3 class="font-medium text-lg mb-2">Balance Plug Method</h3>
<p class="text-gray-600 text-sm">Calculates cement volume needed to balance hydrostatic pressure in the wellbore.</p>
</div>
<div class="p-4 border rounded-lg cursor-pointer method-option hover:bg-blue-50" data-method="bullhead">
<h3 class="font-medium text-lg mb-2">Bullhead Method</h3>
<p class="text-gray-600 text-sm">Forces cement into the formation by pumping at high pressure.</p>
</div>
<div class="p-4 border rounded-lg cursor-pointer method-option hover:bg-blue-50" data-method="two-stage">
<h3 class="font-medium text-lg mb-2">Two-Stage Cementing</h3>
<p class="text-gray-600 text-sm">Performs cementing in two separate stages with a mechanical plug between them.</p>
</div>
</div>
</div>
<div id="balance-form" class="method-form">
<h3 class="text-lg font-medium mb-4 text-blue-700">Balance Plug Method Calculation</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Hole Diameter (inches)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 8.5">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Casing OD (inches)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 7">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Plug Length (ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 500">
</div>
</div>
<div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Mud Weight (ppg)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 10.5">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Cement Weight (ppg)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 15.8">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Excess Factor (%)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 20">
</div>
</div>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg mt-4 calculate-btn">Calculate</button>
<div class="result-box p-4 rounded-lg mt-6 hidden">
<h4 class="font-medium text-lg mb-2 text-green-700">Calculation Results</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Annular Volume</p>
<p class="font-bold" id="annular-vol">0 bbl</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Cement Volume</p>
<p class="font-bold" id="cement-vol">0 bbl</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Displacement Volume</p>
<p class="font-bold" id="displacement-vol">0 bbl</p>
</div>
</div>
<div class="mt-4 p-3 bg-blue-50 rounded">
<p class="text-sm text-gray-600">Hydrostatic Balance Check</p>
<p class="font-bold" id="balance-check">Balanced</p>
</div>
</div>
</div>
<div id="bullhead-form" class="method-form hidden">
<h3 class="text-lg font-medium mb-4 text-blue-700">Bullhead Method Calculation</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Casing Capacity (bbl/ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 0.038">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Cement Height (ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 1000">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Fracture Gradient (psi/ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 0.78">
</div>
</div>
<div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Mud Weight (ppg)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 10.5">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Cement Weight (ppg)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 15.8">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Pump Rate (bbl/min)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 5">
</div>
</div>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg mt-4 calculate-btn">Calculate</button>
<div class="result-box p-4 rounded-lg mt-6 hidden">
<h4 class="font-medium text-lg mb-2 text-green-700">Calculation Results</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Cement Volume</p>
<p class="font-bold" id="bh-cement-vol">0 bbl</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Maximum Pressure</p>
<p class="font-bold" id="max-pressure">0 psi</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Pumping Time</p>
<p class="font-bold" id="pump-time">0 min</p>
</div>
</div>
<div class="mt-4 p-3 bg-blue-50 rounded">
<p class="text-sm text-gray-600">Fracture Risk</p>
<p class="font-bold" id="fracture-risk">Low</p>
</div>
</div>
</div>
<div id="two-stage-form" class="method-form hidden">
<h3 class="text-lg font-medium mb-4 text-blue-700">Two-Stage Cementing Calculation</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">First Stage Height (ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 2000">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Second Stage Height (ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 1500">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Annular Capacity (bbl/ft)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 0.045">
</div>
</div>
<div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">First Stage Slurry Yield (ft³/sack)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 1.15">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Second Stage Slurry Yield (ft³/sack)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 1.08">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Excess Factor (%)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" placeholder="e.g., 25">
</div>
</div>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg mt-4 calculate-btn">Calculate</button>
<div class="result-box p-4 rounded-lg mt-6 hidden">
<h4 class="font-medium text-lg mb-2 text-green-700">Calculation Results</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">First Stage Volume</p>
<p class="font-bold" id="first-stage-vol">0 bbl</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Second Stage Volume</p>
<p class="font-bold" id="second-stage-vol">0 bbl</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">First Stage Sacks</p>
<p class="font-bold" id="first-stage-sacks">0</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Second Stage Sacks</p>
<p class="font-bold" id="second-stage-sacks">0</p>
</div>
</div>
</div>
</div>
</div>
<!-- Economic Analysis Tab -->
<div id="economic" class="tab-content p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-700">Economic Analysis</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<h3 class="text-lg font-medium mb-4">Cost Inputs</h3>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Cement Cost ($/sack)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="cement-cost" placeholder="e.g., 25">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Additives Cost ($/sack)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="additives-cost" placeholder="e.g., 5">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Rig Time Cost ($/hour)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="rig-time-cost" placeholder="e.g., 5000">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Service Company Cost ($)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="service-cost" placeholder="e.g., 15000">
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Time Estimates</h3>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Mixing & Pumping Time (hours)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="pumping-time" placeholder="e.g., 4">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Waiting on Cement (hours)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="woc-time" placeholder="e.g., 12">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Contingency Time (hours)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg input-field" id="contingency-time" placeholder="e.g., 2">
</div>
</div>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg mt-4" id="calculate-cost">Calculate Costs</button>
<div class="result-box p-4 rounded-lg mt-6 hidden" id="economic-results">
<h4 class="font-medium text-lg mb-4 text-green-700">Economic Analysis Results</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Total Cement Cost</p>
<p class="font-bold" id="total-cement-cost">$0</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Total Additives Cost</p>
<p class="font-bold" id="total-additives-cost">$0</p>
</div>
<div class="p-3 bg-gray-50 rounded">
<p class="text-sm text-gray-600">Total Rig Time Cost</p>
<p class="font-bold" id="total-rig-cost">$0</p>
</div>
</div>
<div class="p-4 bg-blue-50 rounded">
<p class="text-sm text-gray-600">Total Estimated Cost</p>
<p class="font-bold text-xl" id="total-cost">$0</p>
</div>
<div class="mt-4">
<h5 class="font-medium mb-2">Cost Breakdown</h5>
<div class="w-full bg-gray-200 rounded-full h-4 mb-2">
<div class="bg-blue-600 h-4 rounded-full" id="cement-cost-bar" style="width: 0%"></div>
</div>
<div class="flex justify-between text-sm mb-4">
<span>Cement Materials</span>
<span id="cement-percent">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-4 mb-2">
<div class="bg-green-500 h-4 rounded-full" id="rig-cost-bar" style="width: 0%"></div>
</div>
<div class="flex justify-between text-sm mb-4">
<span>Rig Time</span>
<span id="rig-percent">0%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-4 mb-2">
<div class="bg-yellow-500 h-4 rounded-full" id="service-cost-bar" style="width: 0%"></div>
</div>
<div class="flex justify-between text-sm">
<span>Services</span>
<span id="service-percent">0%</span>
</div>
</div>
</div>
</div>
<!-- Probability Analysis Tab -->
<div id="probability" class="tab-content p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-700">Probability Analysis</h2>
<div class="mb-6">
<h3 class="text-lg font-medium mb-4">Risk Factors</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-4 border rounded-lg">
<label class="block text-gray-700 mb-2">Lost Circulation Risk (%)</label>
<input type="range" min="0" max="100" value="30" class="w-full risk-slider" id="lost-circ-risk">
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>0%</span>
<span id="lost-circ-value">30%</span>
<span>100%</span>
</div>
</div>
<div class="p-4 border rounded-lg">
<label class="block text-gray-700 mb-2">Channeling Risk (%)</label>
<input type="range" min="0" max="100" value="25" class="w-full risk-slider" id="channeling-risk">
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>0%</span>
<span id="channeling-value">25%</span>
<span>100%</span>
</div>
</div>
<div class="p-4 border rounded-lg">
<label class="block text-gray-700 mb-2">Contamination Risk (%)</label>
<input type="range" min="0" max="100" value="20" class="w-full risk-slider" id="contamination-risk">
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>0%</span>
<span id="contamination-value">20%</span>
<span>100%</span>
</div>
</div>
<div class="p-4 border rounded-lg">
<label class="block text-gray-700 mb-2">Equipment Failure Risk (%)</label>
<input type="range" min="0" max="100" value="15" class="w-full risk-slider" id="equipment-risk">
<div class="flex justify-between text-sm text-gray-600 mt-1">
<span>0%</span>
<span id="equipment-value">15%</span>
<span>100%</span>
</div>
</div>
</div>
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg mt-4" id="calculate-risk">Calculate Risk Probability</button>
<div class="result-box p-4 rounded-lg mt-6 hidden" id="risk-results">
<h4 class="font-medium text-lg mb-4 text-green-700">Risk Analysis Results</h4>
<div class="mb-4">
<h5 class="font-medium mb-2">Overall Success Probability</h5>
<div class="w-full bg-gray-200 rounded-full h-6">
<div class="bg-green-600 h-6 rounded-full flex items-center justify-center text-white text-sm font-medium" id="success-bar" style="width: 0%">0%</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<h5 class="font-medium mb-2">Risk Factors</h5>
<div class="space-y-2">
<div class="p-2 rounded risk-high">
<div class="flex justify-between">
<span>Lost Circulation</span>
<span class="font-medium" id="lost-circ-result">30%</span>
</div>
</div>
<div class="p-2 rounded risk-medium">
<div class="flex justify-between">
<span>Channeling</span>
<span class="font-medium" id="channeling-result">25%</span>
</div>
</div>
<div class="p-2 rounded risk-low">
<div class="flex justify-between">
<span>Contamination</span>
<span class="font-medium" id="contamination-result">20%</span>
</div>
</div>
<div class="p-2 rounded risk-low">
<div class="flex justify-between">
<span>Equipment Failure</span>
<span class="font-medium" id="equipment-result">15%</span>
</div>
</div>
</div>
</div>
<div>
<h5 class="font-medium mb-2">Risk Impact</h5>
<div class="bg-blue-50 p-4 rounded-lg">
<p class="text-sm mb-2" id="risk-impact-text">Based on your inputs, the cement job has a high probability of success with moderate risks that can be mitigated with proper planning.</p>
<div class="mt-2">
<span class="inline-block px-2 py-1 text-xs font-medium rounded bg-blue-100 text-blue-800">Recommendation:</span>
<span class="text-sm" id="risk-recommendation">Consider using lost circulation materials and centralizers to improve success rate.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mitigation Strategies Tab -->
<div id="mitigation" class="tab-content p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-700">Mitigation Strategies</h2>
<div class="mb-6">
<h3 class="text-lg font-medium mb-4">Common Cementing Challenges</h3>
<div class="space-y-4">
<div class="p-4 border rounded-lg">
<div class="flex items-start">
<div class="flex-shrink-0 bg-red-100 p-2 rounded-full mr-4">
<i class="fas fa-exclamation-triangle text-red-600"></i>
</div>
<div>
<h4 class="font-medium">Lost Circulation</h4>
<p class="text-sm text-gray-600 mt-1">Occurs when cement enters formation fractures instead of filling annulus.</p>
<div class="mt-2">
<span class="inline-block bg-red-100 text-red-800 text-xs px-2 py-1 rounded">Mitigation:</span>
<ul class="list-disc list-inside text-sm mt-1 ml-4">
<li>Use lost circulation materials (LCM) in cement slurry</li>
<li>Reduce pumping rates and pressures</li>
<li>Consider staged cementing operations</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-4 border rounded-lg">
<div class="flex items-start">
<div class="flex-shrink-0 bg-yellow-100 p-2 rounded-full mr-4">
<i class="fas fa-random text-yellow-600"></i>
</div>
<div>
<h4 class="font-medium">Channeling</h4>
<p class="text-sm text-gray-600 mt-1">Poor cement distribution due to incomplete mud displacement.</p>
<div class="mt-2">
<span class="inline-block bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded">Mitigation:</span>
<ul class="list-disc list-inside text-sm mt-1 ml-4">
<li>Use proper centralizers and scratchers</li>
<li>Optimize mud removal techniques</li>
<li>Use turbulent flow regime during cementing</li>
<li>Consider spacer fluids</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-4 border rounded-lg">
<div class="flex items-start">
<div class="flex-shrink-0 bg-blue-100 p-2 rounded-full mr-4">
<i class="fas fa-tint-slash text-blue-600"></i>
</div>
<div>
<h4 class="font-medium">Contamination</h4>
<p class="text-sm text-gray-600 mt-1">Mixing of cement with drilling fluid reduces cement strength.</p>
<div class="mt-2">
<span class="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">Mitigation:</span>
<ul class="list-disc list-inside text-sm mt-1 ml-4">
<li>Use adequate spacer volumes</li>
<li>Ensure proper displacement efficiency</li>
<li>Monitor returns during cementing</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-4 border rounded-lg">
<div class="flex items-start">
<div class="flex-shrink-0 bg-purple-100 p-2 rounded-full mr-4">
<i class="fas fa-tools text-purple-600"></i>
</div>
<div>
<h4 class="font-medium">Equipment Failure</h4>
<p class="text-sm text-gray-600 mt-1">Pump failures, plug malfunctions, or surface equipment issues.</p>
<div class="mt-2">
<span class="inline-block bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded">Mitigation:</span>
<ul class="list-disc list-inside text-sm mt-1 ml-4">
<li>Perform thorough equipment checks before job</li>
<li>Have backup equipment available</li>
<li>Train personnel on emergency procedures</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Custom Mitigation Plan</h3>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Select Primary Risk to Address</label>
<select class="w-full px-3 py-2 border rounded-lg" id="risk-select">
<option value="lost-circ">Lost Circulation</option>
<option value="channeling">Channeling</option>
<option value="contamination">Contamination</option>
<option value="equipment">Equipment Failure</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Mitigation Strategy</label>
<textarea class="w-full px-3 py-2 border rounded-lg" rows="3" id="mitigation-strategy" placeholder="Describe your mitigation approach..."></textarea>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Estimated Cost Impact ($)</label>
<input type="number" class="w-full px-3 py-2 border rounded-lg" id="mitigation-cost" placeholder="e.g., 5000">
</div>
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg" id="add-mitigation">Add to Plan</button>
<div class="mt-6 border rounded-lg p-4 hidden" id="mitigation-plan">
<h4 class="font-medium mb-3">Your Mitigation Plan</h4>
<div class="space-y-3" id="plan-items">
<!-- Plan items will be added here -->
</div>
<button class="bg-green-600 hover:bg-green-700 text-white px-4 py-1 rounded-lg text-sm mt-3" id="save-plan">Save Plan</button>
</div>
</div>
</div>
<!-- References Tab -->
<div id="references" class="tab-content p-6">
<h2 class="text-xl font-semibold mb-4 text-blue-700">References & Resources</h2>
<div class="mb-6">
<h3 class="text-lg font-medium mb-4">Cementing Calculation Methods</h3>
<div class="space-y-3">
<div class="p-3 border rounded-lg hover:bg-gray-50">
<a href="https://www.drillingformulas.com/balanced-plug-cementing-calculation/" class="text-blue-600 hover:underline font-medium" target="_blank">Balanced Plug Cementing Calculation</a>
<p class="text-sm text-gray-600 mt-1">Detailed explanation of balanced plug method with example calculations.</p>
</div>
<div class="p-3 border rounded-lg hover:bg-gray-50">
<a href="https://www.drillingformulas.com/bullheading-calculation/" class="text-blue-600 hover:underline font-medium" target="_blank">Bullheading Calculation</a>
<p class="text-sm text-gray-600 mt-1">Procedure and formulas for bullhead cementing operations.</p>
</div>
<div class="p-3 border rounded-lg hover:bg-gray-50">
<a href="https://www.drillingformulas.com/two-stage-cementing-calculation/" class="text-blue-600 hover:underline font-medium" target="_blank">Two-Stage Cementing Calculation</a>
<p class="text-sm text-gray-600 mt-1">Step-by-step guide for planning two-stage cement jobs.</p>
</div>
</div>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium mb-4">Industry Standards</h3>
<div class="space-y-3">
<div class="p-3 border rounded-lg hover:bg-gray-50">
<a href="https://www.api.org/" class="text-blue-600 hover:underline font-medium" target="_blank">API Standards for Well Cementing</a>
<p class="text-sm text-gray-600 mt-1">API 10A, 10B, and other relevant standards for cementing operations.</p>
</div>
<div class="p-3 border rounded-lg hover:bg-gray-50">
<a href="https://www.spe.org/" class="text-blue-600 hover:underline font-medium" target="_blank">SPE Cementing Papers</a>
<p class="text-sm text-gray-600 mt-1">Technical papers on cementing best practices and innovations.</p>
</div>
</div>
</div>
<div>
<h3 class="text-lg font-medium mb-4">Additional Resources</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="p-3 border rounded-lg hover:bg-gray-50">
<div class="flex items-center mb-2">
<i class="fas fa-file-pdf text-red-500 mr-2"></i>
<a href="https://www.slb.com/resource-library/oilfield-review/defining-series/cementing" class="text-blue-600 hover:underline font-medium" target="_blank">Cementing Fundamentals (Schlumberger)</a>
</div>
<p class="text-sm text-gray-600">Comprehensive guide to cementing principles and practices.</p>
</div>
<div class="p-3 border rounded-lg hover:bg-gray-50">
<div class="flex items-center mb-2">
<i class="fas fa-video text-blue-500 mr-2"></i>
<a href="https://www.youtube.com/watch?v=example" class="text-blue-600 hover:underline font-medium" target="_blank">Cementing Operations Video</a>
</div>
<p class="text-sm text-gray-600">Visual demonstration of cementing equipment and procedures.</p>
</div>
<div class="p-3 border rounded-lg hover:bg-gray-50">
<div class="flex items-center mb-2">
<i class="fas fa-calculator text-green-500 mr-2"></i>
<a href="https://www.drillingformulas.com/cementing-calculations/" class="text-blue-600 hover:underline font-medium" target="_blank">Cementing Calculations Collection</a>
</div>
<p class="text-sm text-gray-600">Various cementing calculations and formulas.</p>
</div>
<div class="p-3 border rounded-lg hover:bg-gray-50">
<div class="flex items-center mb-2">
<i class="fas fa-book text-purple-500 mr-2"></i>
<a href="https://www.worldcat.org/title/well-cemetioning/oclc/example" class="text-blue-600 hover:underline font-medium" target="_blank">Well Cementing Textbook</a>
</div>
<p class="text-sm text-gray-600">Comprehensive reference book on cementing technology.</p>
</div>
</div>
</div>
</div>
</div>
<footer class="text-center text-gray-500 text-sm mt-8">
<p>Cementing Job Calculator v1.0 | Data references from <a href="https://www.drillingformulas.com" class="text-blue-600 hover:underline" target="_blank">DrillingFormulas.com</a></p>
<p class="mt-1">For educational and planning purposes only</p>
</footer>
</div>
<script>
// Tab switching functionality
document.querySelectorAll('.tab-btn').forEach(button => {
button.addEventListener('click', () => {
// Remove active class from all buttons and tabs
document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
// Add active class to clicked button and corresponding tab
button.classList.add('active');
const tabId = button.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// Method selection functionality
document.querySelectorAll('.method-option').forEach(option => {
option.addEventListener('click', () => {
// Remove highlight from all options
document.querySelectorAll('.method-option').forEach(opt => {
opt.classList.remove('border-blue-500', 'bg-blue-50');
});
// Highlight selected option
option.classList.add('border-blue-500', 'bg-blue-50');
// Hide all method forms
document.querySelectorAll('.method-form').forEach(form => {
form.classList.add('hidden');
});
// Show selected method form
const method = option.getAttribute('data-method');
document.getElementById(`${method}-form`).classList.remove('hidden');
});
});
// Highlight input fields on focus
document.querySelectorAll('.input-field').forEach(input => {
input.addEventListener('focus', () => {
input.classList.add('input-highlight');
});
input.addEventListener('blur', () => {
input.classList.remove('input-highlight');
});
});
// Balance Plug Method Calculation
document.querySelector('#balance-form .calculate-btn').addEventListener('click', () => {
// Get input values
const holeDia = parseFloat(document.querySelector('#balance-form input:nth-child(1)').value) || 0;
const casingOD = parseFloat(document.querySelector('#balance-form input:nth-child(2)').value) || 0;
const plugLength = parseFloat(document.querySelector('#balance-form input:nth-child(3)').value) || 0;
const mudWeight = parseFloat(document.querySelector('#balance-form input:nth-child(4)').value) || 0;
const cementWeight = parseFloat(document.querySelector('#balance-form input:nth-child(5)').value) || 0;
const excessFactor = parseFloat(document.querySelector('#balance-form input:nth-child(6)').value) || 0;
// Calculations
const annularCapacity = (Math.PI * Math.pow(holeDia, 2) / 4 - Math.PI * Math.pow(casingOD, 2) / 4) / 1029.4;
const annularVolume = annularCapacity * plugLength;
const cementVolume = annularVolume * (1 + excessFactor/100);
const displacementVolume = annularVolume * mudWeight / cementWeight;
// Display results
document.getElementById('annular-vol').textContent = annularVolume.toFixed(2) + ' bbl';
document.getElementById('cement-vol').textContent = cementVolume.toFixed(2) + ' bbl';
document.getElementById('displacement-vol').textContent = displacementVolume.toFixed(2) + ' bbl';
// Check hydrostatic balance
const balanceCheck = Math.abs(mudWeight - cementWeight) < 2 ? 'Balanced' : 'Unbalanced';
document.getElementById('balance-check').textContent = balanceCheck;
// Show results
document.querySelector('#balance-form .result-box').classList.remove('hidden');
});
// Bullhead Method Calculation
document.querySelector('#bullhead-form .calculate-btn').addEventListener('click', () => {
// Get input values
const casingCap = parseFloat(document.querySelector('#bullhead-form input:nth-child(1)').value) || 0;
const cementHeight = parseFloat(document.querySelector('#bullhead-form input:nth-child(2)').value) || 0;
const fracGradient = parseFloat(document.querySelector('#bullhead-form input:nth-child(3)').value) || 0;
const mudWeight = parseFloat(document.querySelector('#bullhead-form input:nth-child(4)').value) || 0;
const cementWeight = parseFloat(document.querySelector('#bullhead-form input:nth-child(5)').value) || 0;
const pumpRate = parseFloat(document.querySelector('#bullhead-form input:nth-child(6)').value) || 0;
// Calculations
const cementVolume = casingCap * cementHeight;
const maxPressure = fracGradient * cementHeight - 0.052 * mudWeight * cementHeight;
const pumpTime = cementVolume / pumpRate;
// Risk assessment
let fractureRisk = 'Low';
if (maxPressure > fracGradient * cementHeight * 0.9) {
fractureRisk = 'High';
} else if (maxPressure > fracGradient * cementHeight * 0.7) {
fractureRisk = 'Medium';
}
// Display results
document.getElementById('bh-cement-vol').textContent = cementVolume.toFixed(2) + ' bbl';
document.getElementById('max-pressure').textContent = maxPressure.toFixed(0) + ' psi';
document.getElementById('pump-time').textContent = pumpTime.toFixed(1) + ' min';
document.getElementById('fracture-risk').textContent = fractureRisk;
// Show results
document.querySelector('#bullhead-form .result-box').classList.remove('hidden');
});
// Two-Stage Method Calculation
document.querySelector('#two-stage-form .calculate-btn').addEventListener('click', () => {
// Get input values
const firstStageHeight = parseFloat(document.querySelector('#two-stage-form input:nth-child(1)').value) || 0;
const secondStageHeight = parseFloat(document.querySelector('#two-stage-form input:nth-child(2)').value) || 0;
const annularCap = parseFloat(document.querySelector('#two-stage-form input:nth-child(3)').value) || 0;
const firstStageYield = parseFloat(document.querySelector('#two-stage-form input:nth-child(4)').value) || 0;
const secondStageYield = parseFloat(document.querySelector('#two-stage-form input:nth-child(5)').value) || 0;
const excessFactor = parseFloat(document.querySelector('#two-stage-form input:nth-child(6)').value) || 0;
// Calculations
const firstStageVol = annularCap * firstStageHeight * (1 + excessFactor/100);
const secondStageVol = annularCap * secondStageHeight * (1 + excessFactor/100);
const firstStageSacks = (firstStageVol * 5.6146) / firstStageYield;
const secondStageSacks = (secondStageVol * 5.6146) / secondStageYield;
// Display results
document.getElementById('first-stage-vol').textContent = firstStageVol.toFixed(2) + ' bbl';
document.getElementById('second-stage-vol').textContent = secondStageVol.toFixed(2) + ' bbl';
document.getElementById('first-stage-sacks').textContent = Math.ceil(firstStageSacks);
document.getElementById('second-stage-sacks').textContent = Math.ceil(secondStageSacks);
// Show results
document.querySelector('#two-stage-form .result-box').classList.remove('hidden');
});
// Economic Analysis Calculation
document.getElementById('calculate-cost').addEventListener('click', () => {
// Get input values
const cementCost = parseFloat(document.getElementById('cement-cost').value) || 0;
const additivesCost = parseFloat(document.getElementById('additives-cost').value) || 0;
const rigTimeCost = parseFloat(document.getElementById('rig-time-cost').value) || 0;
const serviceCost = parseFloat(document.getElementById('service-cost').value) || 0;
const pumpingTime = parseFloat(document.getElementById('pumping-time').value) || 0;
const wocTime = parseFloat(document.getElementById('woc-time').value) || 0;
const contingencyTime = parseFloat(document.getElementById('contingency-time').value) || 0;
// Get cement sacks from calculation tab (simplified for demo)
let cementSacks = 100; // Default value
if (!document.querySelector('#balance-form .result-box').classList.contains('hidden')) {
cementSacks = parseFloat(document.getElementById('cement-vol').textContent) * 5.6146 / 1.15 * 1.2;
} else if (!document.querySelector('#bullhead-form .result-box').classList.contains('hidden')) {
cementSacks = parseFloat(document.getElementById('bh-cement-vol').textContent) * 5.6146 / 1.15 * 1.2;
} else if (!document.querySelector('#two-stage-form .result-box').classList.contains('hidden')) {
cementSacks = parseFloat(document.getElementById('first-stage-sacks').textContent) +
parseFloat(document.getElementById('second-stage-sacks').textContent);
}
// Calculations
const totalCementCost = cementSacks * cementCost;
const totalAdditivesCost = cementSacks * additivesCost;
const totalRigCost = (pumpingTime + wocTime + contingencyTime) * rigTimeCost;
const totalCost = totalCementCost + totalAdditivesCost + totalRigCost + serviceCost;
// Percentages
const cementPercent = Math.round((totalCementCost + totalAdditivesCost) / totalCost * 100);
const rigPercent = Math.round(totalRigCost / totalCost * 100);
const servicePercent = Math.round(serviceCost / totalCost * 100);
// Display results
document.getElementById('total-cement-cost').textContent = '$' + totalCementCost.toFixed(0);
document.getElementById('total-additives-cost').textContent = '$' + totalAdditivesCost.toFixed(0);
document.getElementById('total-rig-cost').textContent = '$' + totalRigCost.toFixed(0);
document.getElementById('total-cost').textContent = '$' + totalCost.toFixed(0);
// Update bars
document.getElementById('cement-cost-bar').style.width = cementPercent + '%';
document.getElementById('rig-cost-bar').style.width = rigPercent + '%';
document.getElementById('service-cost-bar').style.width = servicePercent + '%';
// Update percentages
document.getElementById('cement-percent').textContent = cementPercent + '%';
document.getElementById('rig-percent').textContent = rigPercent + '%';
document.getElementById('service-percent').textContent = servicePercent + '%';
// Show results
document.getElementById('economic-results').classList.remove('hidden');
});
// Risk Analysis Calculation
document.getElementById('calculate-risk').addEventListener('click', () => {
// Get risk values
const lostCircRisk = parseInt(document.getElementById('lost-circ-risk').value);
const channelingRisk = parseInt(document.getElementById('channeling-risk').value);
const contaminationRisk = parseInt(document.getElementById('contamination-risk').value);
const equipmentRisk = parseInt(document.getElementById('equipment-risk').value);
// Calculate success probability (simplified)
const successProbability = 100 - Math.max(
lostCircRisk * 0.7,
channelingRisk * 0.5,
contaminationRisk * 0.3,
equipmentRisk * 0.4
);
// Display results
document.getElementById('success-bar').style.width = successProbability + '%';
document.getElementById('success-bar').textContent = successProbability + '%';
document.getElementById('lost-circ-result').textContent = lostCircRisk + '%';
document.getElementById('channeling-result').textContent = channelingRisk + '%';
document.getElementById('contamination-result').textContent = contaminationRisk + '%';
document.getElementById('equipment-result').textContent = equipmentRisk + '%';
// Risk impact text
let impactText = '';
let recommendation = '';
if (successProbability > 80) {
impactText = 'The cement job has a very high probability of success with minimal risks.';
recommendation = 'Proceed with standard procedures while maintaining vigilance.';
} else if (successProbability > 60) {
impactText = 'The cement job has a good probability of success with manageable risks.';
recommendation = 'Consider additional mitigation measures for the highest risk factors.';
} else if (successProbability > 40) {
impactText = 'The cement job has moderate risks that could significantly impact success.';
recommendation = 'Implement robust mitigation strategies and have contingency plans ready.';
} else {
impactText = 'The cement job has high risks that may lead to failure.';
recommendation = 'Re-evaluate the cementing plan and consider alternative approaches.';
}
document.getElementById('risk-impact-text').textContent = impactText;
document.getElementById('risk-recommendation').textContent = recommendation;
// Show results
document.getElementById('risk-results').classList.remove('hidden');
});
// Risk slider value updates
document.querySelectorAll('.risk-slider').forEach(slider => {
slider.addEventListener('input', function() {
const valueId = this.id.replace('-risk', '-value');
document.getElementById(valueId).textContent = this.value + '%';
});
});
// Mitigation plan functionality
document.getElementById('add-mitigation').addEventListener('click', () => {
const riskSelect = document.getElementById('risk-select');
const strategy = document.getElementById('mitigation-strategy').value;
const cost = document.getElementById('mitigation-cost').value || 0;
if (!strategy) {
alert('Please enter a mitigation strategy');
return;
}
const riskText = riskSelect.options[riskSelect.selectedIndex].text;
// Create plan item
const planItem = document.createElement('div');
planItem.className = 'p-3 border rounded-lg bg-gray-50';
planItem.innerHTML = `
<div class="flex justify-between items-start">
<div>
<h5 class="font-medium">${riskText}</h5>
<p class="text-sm text-gray-600 mt-1">${strategy}</p>
</div>
<div class="text-right">
<span class="text-sm font-medium">$${cost}</span>
<button class="ml-2 text-red-500 text-sm remove-plan-item">×</button>
</div>
</div>
`;
// Add to plan
document.getElementById('plan-items').appendChild(planItem);
// Show plan container if hidden
document.getElementById('mitigation-plan').classList.remove('hidden');
// Clear inputs
document.getElementById('mitigation-strategy').value = '';
document.getElementById('mitigation-cost').value = '';
// Add remove functionality
planItem.querySelector('.remove-plan-item').addEventListener('click', function() {
planItem.remove();
if (document.getElementById('plan-items').children.length === 0) {
document.getElementById('mitigation-plan').classList.add('hidden');
}
});
});
// Save plan
document.getElementById('save-plan').addEventListener('click', function() {
alert('Mitigation plan saved!');
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=alterzick/cementing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>