Download index.html from alterzick/cementing: direct link, hf CLI and curl.
- Browser
- Download file 59.2 kB
-
https://huggingface.co/spaces/alterzick/cementing/resolve/main/index.html
- Command line
-
hf download hf://spaces/alterzick/cementing/index.html
-
curl -L -o index.html https://huggingface.co/spaces/alterzick/cementing/resolve/main/index.html
59.2 kB
| <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> |