/home/awneajlw/.trash/calculator.php
<?php
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
require_once 'config/database.php';
require_once 'includes/auth.php';
// Check if user is logged in
if (!isLoggedIn()) {
header('Location: welcome.php');
exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calculator - OPTI SLIP</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style>
body {
background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
min-height: 100vh;
margin: 0;
padding: 0;
}
.calculator-container {
max-width: 100%;
margin: 0;
padding: 20px;
}
.calculator-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.back-btn {
background: #10b981;
color: white;
border: none;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-weight: 600;
transition: all 0.3s ease;
}
.back-btn:hover {
background: #059669;
transform: translateY(-2px);
}
.calculator-title {
color: white;
font-size: 28px;
font-weight: bold;
margin: 0;
}
.opti-slip-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 30px;
}
.opti-logo-container {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.opti-logo {
width: 50px;
height: 50px;
background: white;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.opti-logo.qr {
background: #f3f4f6;
}
.opti-logo.doc {
background: #e5e7eb;
}
.glasses-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #10b981;
font-size: 20px;
z-index: 2;
}
.qr-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: repeating-linear-gradient(
0deg,
#d1d5db 0px,
#d1d5db 2px,
transparent 2px,
transparent 4px
),
repeating-linear-gradient(
90deg,
#d1d5db 0px,
#d1d5db 2px,
transparent 2px,
transparent 4px
);
}
.doc-lines {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 20px;
border-top: 2px solid #9ca3af;
border-bottom: 2px solid #9ca3af;
}
.opti-title {
color: white;
font-size: 24px;
font-weight: bold;
margin: 0;
}
.calculator-form-container {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 2px solid #e5e7eb;
}
.calculator-section {
width: 100%;
}
.calculator-form-title {
color: #1f2937;
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
text-align: center;
}
.calculator-form {
display: flex;
flex-direction: column;
gap: 25px;
}
.prescription-inputs {
display: flex;
flex-direction: column;
gap: 25px;
}
.eye-section, .near-add-section, .required-for-section, .dominant-eye-section {
background: #f9fafb;
padding: 20px;
border-radius: 12px;
border: 2px solid #e5e7eb;
}
.eye-title {
color: #1f2937;
font-size: 18px;
font-weight: bold;
margin-bottom: 15px;
text-align: center;
}
.input-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-group label {
color: #374151;
font-weight: 600;
font-size: 14px;
}
.prescription-select {
padding: 12px 15px;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 16px;
background: white;
color: #1f2937;
transition: all 0.3s ease;
}
.prescription-select:focus {
outline: none;
border-color: #10b981;
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
.radio-group {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.radio-option {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
color: #374151;
font-weight: 500;
}
.radio-option input[type="radio"] {
display: none;
}
.radio-custom {
width: 20px;
height: 20px;
border: 2px solid #d1d5db;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
}
.radio-option input[type="radio"]:checked + .radio-custom {
border-color: #10b981;
background: #10b981;
}
.radio-option input[type="radio"]:checked + .radio-custom::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
}
.calculate-btn {
background: #10b981;
color: white;
border: none;
padding: 15px 30px;
border-radius: 12px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin: 20px auto;
display: block;
}
.calculate-btn:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}
.calculation-result {
background: #f0fdf4;
border: 2px solid #10b981;
border-radius: 12px;
padding: 25px;
margin-top: 20px;
text-align: center;
}
.calculation-result h3 {
color: #1f2937;
font-size: 20px;
margin-bottom: 15px;
}
.result-display {
background: white;
border: 2px solid #10b981;
border-radius: 8px;
padding: 20px;
margin: 15px 0;
font-size: 24px;
font-weight: bold;
color: #10b981;
}
.recalculate-btn {
background: #6b7280;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.recalculate-btn:hover {
background: #4b5563;
transform: translateY(-2px);
}
.help-section {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border: 2px solid #e5e7eb;
}
.help-title {
color: #1f2937;
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
}
.help-content {
color: #6b7280;
line-height: 1.6;
}
.help-list {
margin: 15px 0;
padding-left: 20px;
}
.help-list li {
margin-bottom: 10px;
}
@media (max-width: 768px) {
.calculator-container {
padding: 15px;
}
.calculator-header {
flex-direction: column;
align-items: flex-start;
gap: 15px;
}
.calculator-title {
font-size: 24px;
}
.input-row {
grid-template-columns: 1fr;
gap: 10px;
}
.radio-group {
flex-direction: column;
gap: 15px;
}
.eye-section, .near-add-section, .required-for-section, .dominant-eye-section {
padding: 15px;
}
}
@media (max-width: 480px) {
.calculator-container {
padding: 10px;
}
.calculator-form-container,
.help-section {
padding: 20px;
border-radius: 15px;
}
.calculator-title {
font-size: 20px;
}
.opti-title {
font-size: 20px;
}
.opti-logo {
width: 40px;
height: 40px;
}
.glasses-icon {
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="calculator-container">
<!-- Calculator Header -->
<div class="calculator-header">
<button class="back-btn" onclick="goBack()">
<i class="fas fa-arrow-left"></i>
Back
</button>
<h1 class="calculator-title">Calculator</h1>
</div>
<!-- Opti Slip Header -->
<div class="opti-slip-header">
<div class="opti-logo-container">
<div class="opti-logo qr">
<div class="qr-pattern"></div>
<i class="fas fa-glasses glasses-icon"></i>
</div>
<div class="opti-logo doc">
<div class="doc-lines"></div>
<i class="fas fa-glasses glasses-icon"></i>
</div>
</div>
<h2 class="opti-title">OPTI SLIP</h2>
</div>
<!-- Calculator Form -->
<div class="calculator-form-container">
<div class="calculator-section">
<h3 class="calculator-form-title">Calculate My Strength</h3>
<form class="calculator-form" id="calculatorForm">
<div class="prescription-inputs">
<!-- Right Eye -->
<div class="eye-section">
<h4 class="eye-title">Right Eye</h4>
<div class="input-row">
<div class="input-group">
<label>Sphere</label>
<select id="rightSphere" class="prescription-select">
<option value="0.00">0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
<option value="+0.25">+0.25</option>
<option value="+0.50">+0.50</option>
<option value="+0.75">+0.75</option>
<option value="+1.00">+1.00</option>
<option value="+1.25">+1.25</option>
<option value="+1.50">+1.50</option>
<option value="+1.75">+1.75</option>
<option value="+2.00">+2.00</option>
<option value="+2.25">+2.25</option>
<option value="+2.50">+2.50</option>
<option value="+2.75">+2.75</option>
<option value="+3.00">+3.00</option>
<option value="+3.25">+3.25</option>
<option value="+3.50">+3.50</option>
<option value="+3.75">+3.75</option>
<option value="+4.00">+4.00</option>
<option value="+4.25">+4.25</option>
<option value="+4.50">+4.50</option>
<option value="+4.75">+4.75</option>
<option value="+5.00">+5.00</option>
</select>
</div>
<div class="input-group">
<label>Cylinder</label>
<select id="rightCylinder" class="prescription-select">
<option value="0.00">0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
</select>
</div>
</div>
</div>
<!-- Left Eye -->
<div class="eye-section">
<h4 class="eye-title">Left Eye</h4>
<div class="input-row">
<div class="input-group">
<label>Sphere</label>
<select id="leftSphere" class="prescription-select">
<option value="0.00">0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
<option value="+0.25">+0.25</option>
<option value="+0.50">+0.50</option>
<option value="+0.75">+0.75</option>
<option value="+1.00">+1.00</option>
<option value="+1.25">+1.25</option>
<option value="+1.50">+1.50</option>
<option value="+1.75">+1.75</option>
<option value="+2.00">+2.00</option>
<option value="+2.25">+2.25</option>
<option value="+2.50">+2.50</option>
<option value="+2.75">+2.75</option>
<option value="+3.00">+3.00</option>
<option value="+3.25">+3.25</option>
<option value="+3.50">+3.50</option>
<option value="+3.75">+3.75</option>
<option value="+4.00">+4.00</option>
<option value="+4.25">+4.25</option>
<option value="+4.50">+4.50</option>
<option value="+4.75">+4.75</option>
<option value="+5.00">+5.00</option>
</select>
</div>
<div class="input-group">
<label>Cylinder</label>
<select id="leftCylinder" class="prescription-select">
<option value="0.00">0.00</option>
<option value="-0.25">-0.25</option>
<option value="-0.50">-0.50</option>
<option value="-0.75">-0.75</option>
<option value="-1.00">-1.00</option>
<option value="-1.25">-1.25</option>
<option value="-1.50">-1.50</option>
<option value="-1.75">-1.75</option>
<option value="-2.00">-2.00</option>
<option value="-2.25">-2.25</option>
<option value="-2.50">-2.50</option>
<option value="-2.75">-2.75</option>
<option value="-3.00">-3.00</option>
<option value="-3.25">-3.25</option>
<option value="-3.50">-3.50</option>
<option value="-3.75">-3.75</option>
<option value="-4.00">-4.00</option>
<option value="-4.25">-4.25</option>
<option value="-4.50">-4.50</option>
<option value="-4.75">-4.75</option>
<option value="-5.00">-5.00</option>
</select>
</div>
</div>
</div>
<!-- Near Add -->
<div class="near-add-section">
<h4 class="eye-title">Near Add</h4>
<div class="input-row">
<div class="input-group">
<label>Near Add</label>
<select id="nearAdd" class="prescription-select">
<option value="0.00">0.00</option>
<option value="+0.25">+0.25</option>
<option value="+0.50">+0.50</option>
<option value="+0.75">+0.75</option>
<option value="+1.00">+1.00</option>
<option value="+1.25">+1.25</option>
<option value="+1.50">+1.50</option>
<option value="+1.75">+1.75</option>
<option value="+2.00">+2.00</option>
<option value="+2.25">+2.25</option>
<option value="+2.50">+2.50</option>
<option value="+2.75">+2.75</option>
<option value="+3.00">+3.00</option>
<option value="+3.25">+3.25</option>
<option value="+3.50">+3.50</option>
<option value="+3.75">+3.75</option>
<option value="+4.00">+4.00</option>
</select>
</div>
</div>
</div>
<!-- Required For -->
<div class="required-for-section">
<h4 class="eye-title">Required For</h4>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="requiredFor" value="reading" checked>
<span class="radio-custom"></span>
Reading (Near)
</label>
<label class="radio-option">
<input type="radio" name="requiredFor" value="computer">
<span class="radio-custom"></span>
Computer (Intermediate)
</label>
</div>
</div>
<!-- Dominant Eye -->
<div class="dominant-eye-section">
<h4 class="eye-title">Dominant Eye</h4>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="dominantEye" value="right" checked>
<span class="radio-custom"></span>
Right
</label>
<label class="radio-option">
<input type="radio" name="dominantEye" value="left">
<span class="radio-custom"></span>
Left
</label>
</div>
</div>
</div>
<button type="button" class="calculate-btn" onclick="calculateStrength()">
Calculate!
</button>
</form>
<!-- Calculation Result -->
<div id="calculationResult" class="calculation-result" style="display: none;">
<h3>Your calculated strength is:</h3>
<div id="resultDisplay" class="result-display"></div>
<button type="button" class="recalculate-btn" onclick="recalculate()">Recalculate!</button>
</div>
</div>
</div>
<!-- Help Section -->
<div class="help-section">
<h3 class="help-title">Help & Advice</h3>
<div class="help-content">
<p>• Enter the values for <strong>sphere</strong>, <strong>cylinder</strong> and <strong>near add</strong> from the drop down menus, as they appear on your prescription for each eye. The axis value on your prescription can be ignored and is not required for this calculation.</p>
<p>• Make a decision as to what the reading glasses are <strong>required for</strong>, either for <strong>reading</strong> (near or close work such as reading a book, sewing or using a phone or tablet) or for using a desktop or laptop <strong>computer</strong> (intermediate).</p>
<p>• Also select which is your <strong>dominant eye</strong>. This would be the eye that you would use to aim. If you are unsure you can point at a distance object with both eyes open and then close one eye at a time. The eye which is pointing directly at the object should be your dominant eye, the other will be off to the side.</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function goBack() {
window.history.back();
}
function calculateStrength() {
// Get form values
const rightSphere = parseFloat(document.getElementById('rightSphere').value);
const rightCylinder = parseFloat(document.getElementById('rightCylinder').value);
const leftSphere = parseFloat(document.getElementById('leftSphere').value);
const leftCylinder = parseFloat(document.getElementById('leftCylinder').value);
const nearAdd = parseFloat(document.getElementById('nearAdd').value);
const requiredFor = document.querySelector('input[name="requiredFor"]:checked').value;
const dominantEye = document.querySelector('input[name="dominantEye"]:checked').value;
// Validate that near add is provided and greater than 0
if (!nearAdd || nearAdd <= 0) {
alert('Please select a Near Add value greater than 0.00');
return;
}
// Calculate reading strength based on Tiger Specs algorithm
let calculatedStrength;
if (requiredFor === 'reading') {
// For reading glasses, use the near add value
calculatedStrength = nearAdd;
} else {
// For computer work, use intermediate calculation
// This is typically 60% of the near add value
calculatedStrength = nearAdd * 0.6;
}
// Adjust for dominant eye if needed
const dominantSphere = dominantEye === 'right' ? rightSphere : leftSphere;
const dominantCylinder = dominantEye === 'right' ? rightCylinder : leftCylinder;
// Add sphere correction (simplified calculation)
if (dominantSphere > 0) {
calculatedStrength += dominantSphere * 0.5;
} else if (dominantSphere < 0) {
calculatedStrength -= Math.abs(dominantSphere) * 0.3;
}
// Round to nearest 0.25
calculatedStrength = Math.round(calculatedStrength * 4) / 4;
// Ensure minimum value
if (calculatedStrength < 0.5) {
calculatedStrength = 0.5;
}
// Ensure maximum value
if (calculatedStrength > 5.0) {
calculatedStrength = 5.0;
}
// Format result
const formattedStrength = calculatedStrength > 0 ? `+${calculatedStrength}` : calculatedStrength.toString();
// Display result
document.getElementById('resultDisplay').textContent = formattedStrength;
document.getElementById('calculationResult').style.display = 'block';
// Scroll to result
document.getElementById('calculationResult').scrollIntoView({ behavior: 'smooth' });
}
function recalculate() {
document.getElementById('calculationResult').style.display = 'none';
document.getElementById('calculatorForm').scrollIntoView({ behavior: 'smooth' });
}
// Auto-focus first input
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('rightSphere').focus();
});
</script>
</body>
</html>
