/home/awneajlw/www/codestechvista.com/calculator.php
<?php
/**
* Calculator Page - Optical Prescription Calculator
* This page provides optical calculation tools for distance and near cross numbers
* Features: Distance calculations, near cross numbers, prescription converter
*/
// Start session if not already started
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
// Include required files
require_once 'includes/auth.php'; // Authentication functions
// PHP Prescription Calculator Class
class PrescriptionCalculator {
// Transposition calculation
public static function transposeRx($sphere, $cylinder, $axis) {
$newSphere = $sphere + $cylinder;
$newCylinder = -$cylinder;
if ($axis <= 90) {
$newAxis = $axis + 90;
} else {
$newAxis = $axis - 90;
}
// Ensure axis is within 1-180 range
if ($newAxis > 180) $newAxis -= 180;
if ($newAxis <= 0) $newAxis += 180;
return [
'sphere' => $newSphere,
'cylinder' => $newCylinder,
'axis' => $newAxis
];
}
// Calculate cross numbers - OpticTool accurate method
public static function calculateCrossNumbers($sphere, $cylinder, $axis) {
// Principal meridian powers
$meridian1_power = $sphere; // Power in the cylinder axis
$meridian2_power = $sphere + $cylinder; // Power 90° from cylinder axis
// Meridian axes
$meridian1_axis = $axis;
$meridian2_axis = $axis + 90;
// Ensure axis is within 1-180 range
if ($meridian2_axis > 180) {
$meridian2_axis -= 180;
}
if ($meridian2_axis <= 0) {
$meridian2_axis += 180;
}
return [
'power1' => $meridian1_power,
'power2' => $meridian2_power,
'axis1' => $meridian1_axis,
'axis2' => $meridian2_axis,
// Additional OpticTool style info
'strongest_meridian' => abs($meridian2_power) > abs($meridian1_power) ? $meridian2_power : $meridian1_power,
'weakest_meridian' => abs($meridian2_power) < abs($meridian1_power) ? $meridian2_power : $meridian1_power
];
}
// Format optical number
public static function formatOpticalNumber($number) {
if ($number == 0) return '0.00';
return ($number > 0 ? '+' : '') . number_format($number, 2);
}
// Format axis
public static function formatAxis($axis) {
return str_pad($axis, 3, '0', STR_PAD_LEFT) . '°';
}
// Calculate near prescription
public static function calculateNear($distanceSphere, $addPower) {
return $distanceSphere + $addPower;
}
}
// Handle PHP calculation if form is submitted
$calculation_results = null;
$error_message = null;
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['calculate_php'])) {
try {
// Get form data
$dist_sph_r = floatval($_POST['dist_sph_r'] ?? 0);
$dist_cyl_r = floatval($_POST['dist_cyl_r'] ?? 0);
$dist_axis_r = intval($_POST['dist_axis_r'] ?? 0);
$dist_sph_l = floatval($_POST['dist_sph_l'] ?? 0);
$dist_cyl_l = floatval($_POST['dist_cyl_l'] ?? 0);
$dist_axis_l = intval($_POST['dist_axis_l'] ?? 0);
$add_power = floatval($_POST['add_power'] ?? 0);
// Simple validation - just check if form was submitted
// Allow all calculations even with 0 values for testing
// Calculate results
$results = [];
// Right Eye Calculations
if ($dist_sph_r != 0 || $dist_cyl_r != 0) {
$results['right_eye'] = [
'distance' => [
'sphere' => $dist_sph_r,
'cylinder' => $dist_cyl_r,
'axis' => $dist_axis_r
],
'cross_numbers' => PrescriptionCalculator::calculateCrossNumbers($dist_sph_r, $dist_cyl_r, $dist_axis_r)
];
// Add transposition if cylinder exists
if ($dist_cyl_r != 0) {
$results['right_eye']['transposed'] = PrescriptionCalculator::transposeRx($dist_sph_r, $dist_cyl_r, $dist_axis_r);
}
// Add near prescription if ADD exists
if ($add_power > 0) {
$near_sph_r = PrescriptionCalculator::calculateNear($dist_sph_r, $add_power);
$results['right_eye']['near'] = [
'sphere' => $near_sph_r,
'cylinder' => $dist_cyl_r,
'axis' => $dist_axis_r
];
if ($dist_cyl_r != 0) {
$results['right_eye']['near_transposed'] = PrescriptionCalculator::transposeRx($near_sph_r, $dist_cyl_r, $dist_axis_r);
}
}
}
// Left Eye Calculations
if ($dist_sph_l != 0 || $dist_cyl_l != 0) {
$results['left_eye'] = [
'distance' => [
'sphere' => $dist_sph_l,
'cylinder' => $dist_cyl_l,
'axis' => $dist_axis_l
],
'cross_numbers' => PrescriptionCalculator::calculateCrossNumbers($dist_sph_l, $dist_cyl_l, $dist_axis_l)
];
// Add transposition if cylinder exists
if ($dist_cyl_l != 0) {
$results['left_eye']['transposed'] = PrescriptionCalculator::transposeRx($dist_sph_l, $dist_cyl_l, $dist_axis_l);
}
// Add near prescription if ADD exists
if ($add_power > 0) {
$near_sph_l = PrescriptionCalculator::calculateNear($dist_sph_l, $add_power);
$results['left_eye']['near'] = [
'sphere' => $near_sph_l,
'cylinder' => $dist_cyl_l,
'axis' => $dist_axis_l
];
if ($dist_cyl_l != 0) {
$results['left_eye']['near_transposed'] = PrescriptionCalculator::transposeRx($near_sph_l, $dist_cyl_l, $dist_axis_l);
}
}
}
$calculation_results = $results;
} catch (Exception $e) {
$error_message = $e->getMessage();
}
}
/**
* Authentication Check
* Redirect to welcome page if user is not 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>Optical 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">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
.header-section {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
background: white;
padding: 20px 30px;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.back-btn {
background: none;
border: none;
color: #169D53;
font-size: 24px;
cursor: pointer;
padding: 10px;
transition: all 0.3s ease;
border-radius: 10px;
}
.back-btn:hover {
background: #169D53;
color: white;
transform: translateX(-3px);
}
.logo-section {
text-align: center;
}
.logo-image {
width: 120px;
height: 120px;
object-fit: contain;
filter: brightness(0) saturate(100%);
}
.page-title {
color: #169D53;
font-size: 28px;
font-weight: 700;
margin: 0;
}
.hero-section {
text-align: center;
background: linear-gradient(135deg, #169D53, #22c55e);
color: white;
padding: 60px 30px;
border-radius: 25px;
margin-bottom: 40px;
box-shadow: 0 10px 30px rgba(22, 157, 83, 0.3);
}
.hero-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 15px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.hero-subtitle {
font-size: 18px;
margin-bottom: 30px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.calculator-section {
background: white;
border-radius: 20px;
padding: 40px;
margin-bottom: 30px;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.calculator-header {
text-align: center;
margin-bottom: 40px;
}
.calculator-title {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}
.calculator-description {
color: #666;
font-size: 16px;
}
/* Professional cross numbers styling */
.cross-numbers {
background: #f8f9fa;
padding: 8px;
border-radius: 5px;
border-left: 3px solid #007bff;
margin-top: 8px;
}
.cross-numbers small {
font-weight: 500;
color: #495057;
display: block;
line-height: 1.4;
}
/* Professional card styling */
.card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
border: 1px solid #e3e6f0;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* Results container styling */
.results-container {
margin-top: 30px;
}
.prescription-row {
margin-bottom: 8px;
padding: 5px 0;
}
.prescription-label {
font-weight: 600;
color: #495057;
margin-right: 10px;
}
.prescription-value {
font-family: 'Courier New', monospace;
font-weight: 700;
font-size: 1.1em;
color: #2c3e50;
}
/* Transposition styling */
.prescription-line.transposed {
background: #f8f9ff;
border-left: 3px solid #007bff;
padding-left: 8px;
margin-top: 5px;
}
.prescription-line.transposed .prescription-type {
color: #0056b3;
font-weight: 700;
}
.prescription-line.transposed .prescription-details {
color: #0056b3;
font-weight: 600;
}
/* PHP Results Styling */
.php-results {
border: 2px solid #28a745;
border-radius: 10px;
margin-bottom: 30px;
}
.php-results .results-title {
background: #28a745;
color: white;
margin: 0;
padding: 15px;
border-radius: 8px 8px 0 0;
}
.php-calculation-results {
padding: 20px;
}
.cross-numbers-section {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-top: 15px;
border-left: 4px solid #28a745;
}
.cross-numbers-section h5 {
color: #28a745;
font-size: 16px;
margin-bottom: 10px;
}
.cross-numbers-section p {
margin: 5px 0;
font-family: 'Courier New', monospace;
font-weight: 600;
color: #333;
}
.calc-btn.success {
background: linear-gradient(45deg, #28a745, #20c997);
color: white;
border: none;
}
.calc-btn.success:hover {
background: linear-gradient(45deg, #20c997, #28a745);
transform: translateY(-2px);
}
/* OpticTool Simple Results Styling */
.eye-results-section {
background: #f8f9fa;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
border-left: 4px solid #007bff;
}
.eye-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 15px;
text-align: center;
}
.prescription-line {
display: flex;
align-items: center;
margin-bottom: 10px;
padding: 8px 0;
}
.prescription-type {
font-weight: 600;
color: #333;
min-width: 80px;
margin-right: 15px;
}
.prescription-details {
font-family: 'Courier New', monospace;
font-size: 16px;
font-weight: 500;
color: #2c3e50;
background: white;
padding: 5px 10px;
border-radius: 4px;
border: 1px solid #e3e6f0;
}
.calculation-form {
max-width: 900px;
margin: 0 auto;
}
.prescription-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.eye-section {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
}
.eye-header {
background: #169D53;
color: white;
text-align: center;
padding: 12px 20px;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
margin-bottom: 25px;
}
.form-group {
margin-bottom: 20px;
}
.form-label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.form-select {
width: 100%;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 14px;
background: white;
color: #333;
font-weight: 500;
transition: all 0.3s ease;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.form-select:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
.form-input {
width: 100%;
padding: 12px 15px;
border: 2px solid #e9ecef;
border-radius: 10px;
font-size: 14px;
background: white;
color: #333;
font-weight: 500;
transition: all 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: #169D53;
box-shadow: 0 0 0 3px rgba(22, 157, 83, 0.1);
}
.addition-section {
background: white;
border-radius: 20px;
padding: 25px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
border: 1px solid #f0f0f0;
margin-bottom: 30px;
}
.addition-header {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 20px;
text-align: center;
}
.calculation-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin: 40px 0;
}
.calc-btn {
border: none;
padding: 15px 40px;
border-radius: 25px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
min-width: 150px;
}
.calc-btn.primary {
background: #169D53;
color: white;
}
.calc-btn.primary:hover {
background: #138f48;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(22, 157, 83, 0.3);
}
.calc-btn.secondary {
background: #6c757d;
color: white;
}
.calc-btn.secondary:hover {
background: #5a6268;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(108, 117, 125, 0.3);
}
.calc-btn:active {
transform: translateY(0);
}
.results-section {
background: #e8f4fd;
border-radius: 15px;
padding: 30px;
margin-top: 30px;
border: 1px solid #ddd;
}
.results-title {
font-size: 20px;
font-weight: 700;
color: #333;
margin-bottom: 25px;
text-align: center;
}
.results-container {
display: flex;
flex-direction: column;
gap: 25px;
}
.eye-results {
background: transparent;
padding: 0;
}
.eye-results-title {
font-size: 18px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
text-align: left;
}
.prescription-row {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 16px;
}
.prescription-label {
font-weight: 600;
color: #333;
min-width: 60px;
margin-right: 20px;
}
.prescription-value {
font-weight: 500;
color: #333;
flex: 1;
}
.features-section {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin: 40px 0;
}
.feature-card {
background: white;
border-radius: 20px;
padding: 30px;
text-align: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, #169D53, #22c55e);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
color: white;
font-size: 36px;
}
.feature-title {
font-size: 20px;
font-weight: 700;
color: #333;
margin-bottom: 15px;
}
.feature-description {
color: #666;
line-height: 1.6;
}
.tips-section {
background: linear-gradient(135deg, #169D53, #22c55e);
color: white;
border-radius: 20px;
padding: 40px;
margin: 40px 0;
text-align: center;
}
.tips-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.tips-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 30px;
}
.tip-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 20px;
backdrop-filter: blur(10px);
}
.tip-icon {
font-size: 24px;
margin-bottom: 10px;
}
.tip-text {
font-size: 14px;
line-height: 1.5;
}
/* Mobile Responsive - OpticTool inspired */
@media (max-width: 768px) {
body {
padding: 10px;
}
.header-section {
flex-direction: column;
gap: 15px;
text-align: center;
padding: 20px;
}
.back-btn {
position: absolute;
left: 20px;
top: 20px;
}
.logo-image {
width: 80px;
height: 80px;
}
.page-title {
font-size: 24px;
}
/* Professional responsive cards */
.card-body {
padding: 1rem;
}
.prescription-value {
font-size: 1em;
}
.cross-numbers {
padding: 6px;
font-size: 0.9em;
}
.card {
margin-bottom: 15px;
}
.hero-section {
padding: 40px 20px;
}
.hero-title {
font-size: 28px;
}
.hero-subtitle {
font-size: 16px;
}
.calculator-section {
padding: 25px 20px;
}
.prescription-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.calculation-buttons {
flex-direction: column;
align-items: center;
}
.calc-btn {
width: 100%;
max-width: 300px;
}
.features-section {
grid-template-columns: 1fr;
gap: 20px;
}
.feature-card {
padding: 25px 20px;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 28px;
}
.tips-section {
padding: 30px 20px;
}
.tips-list {
grid-template-columns: 1fr;
gap: 15px;
}
}
@media (max-width: 480px) {
.calculator-section {
padding: 20px 15px;
}
.form-input {
padding: 15px 18px;
font-size: 14px;
}
.form-label {
font-size: 12px;
padding: 0 8px;
}
.calc-btn {
padding: 12px 25px;
font-size: 14px;
}
.hero-title {
font-size: 24px;
}
.calculator-title {
font-size: 20px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header-section">
<button class="back-btn" onclick="window.location.href='home.php'">
<i class="fas fa-arrow-left"></i>
</button>
<div class="logo-section">
<img src="assets/images/Optislipimage.png" alt="Opti Slip Logo" class="logo-image" onerror="this.style.display='none'; this.parentElement.innerHTML='<div style=\'color: #169D53; font-size: 20px; font-weight: bold;\'>OPTI SLIP</div>'">
</div>
<h1 class="page-title">Optical Calculator</h1>
</div>
<div class="hero-section">
<h1 class="hero-title">Calculate Distance & Near Cross Numbers in Seconds! 👓</h1>
<p class="hero-subtitle">Accurate, and professional optical calculations. Designed for opticians. Trusted by professionals.</p>
</div>
<div class="calculator-section">
<div class="calculator-header">
<h2 class="calculator-title">
<i class="fas fa-glasses mr-2"></i>
Professional Optical Calculator
</h2>
<p class="text-center mb-4" style="color: #666;">
Calculate Distance & Near Cross Numbers in Seconds!<br>
<small>Accurate, Professional & Trusted by Opticians</small>
</p>
<p class="calculator-description">Enter prescription values to calculate distance and near cross numbers</p>
</div>
<form class="calculation-form" id="calculatorForm" method="POST">
<div class="prescription-layout">
<div class="eye-section">
<div class="eye-header">Right Eye</div>
<div class="form-group">
<label class="form-label">Sph</label>
<select class="form-select" id="dist_sph_r" name="dist_sph_r">
<option value="">Select</option>
<option value="+24.00">+24.00</option>
<option value="+23.75">+23.75</option>
<option value="+23.50">+23.50</option>
<option value="+23.25">+23.25</option>
<option value="+23.00">+23.00</option>
<option value="+22.75">+22.75</option>
<option value="+22.50">+22.50</option>
<option value="+22.25">+22.25</option>
<option value="+22.00">+22.00</option>
<option value="+21.75">+21.75</option>
<option value="+21.50">+21.50</option>
<option value="+21.25">+21.25</option>
<option value="+21.00">+21.00</option>
<option value="+20.75">+20.75</option>
<option value="+20.50">+20.50</option>
<option value="+20.25">+20.25</option>
<option value="+20.00">+20.00</option>
<option value="+19.75">+19.75</option>
<option value="+19.50">+19.50</option>
<option value="+19.25">+19.25</option>
<option value="+19.00">+19.00</option>
<option value="+18.75">+18.75</option>
<option value="+18.50">+18.50</option>
<option value="+18.25">+18.25</option>
<option value="+18.00">+18.00</option>
<option value="+17.75">+17.75</option>
<option value="+17.50">+17.50</option>
<option value="+17.25">+17.25</option>
<option value="+17.00">+17.00</option>
<option value="+16.75">+16.75</option>
<option value="+16.50">+16.50</option>
<option value="+16.25">+16.25</option>
<option value="+16.00">+16.00</option>
<option value="+15.75">+15.75</option>
<option value="+15.50">+15.50</option>
<option value="+15.25">+15.25</option>
<option value="+15.00">+15.00</option>
<option value="+14.75">+14.75</option>
<option value="+14.50">+14.50</option>
<option value="+14.25">+14.25</option>
<option value="+14.00">+14.00</option>
<option value="+13.75">+13.75</option>
<option value="+13.50">+13.50</option>
<option value="+13.25">+13.25</option>
<option value="+13.00">+13.00</option>
<option value="+12.75">+12.75</option>
<option value="+12.50">+12.50</option>
<option value="+12.25">+12.25</option>
<option value="+12.00">+12.00</option>
<option value="+11.75">+11.75</option>
<option value="+11.50">+11.50</option>
<option value="+11.25">+11.25</option>
<option value="+11.00">+11.00</option>
<option value="+10.75">+10.75</option>
<option value="+10.50">+10.50</option>
<option value="+10.25">+10.25</option>
<option value="+10.00">+10.00</option>
<option value="+9.75">+9.75</option>
<option value="+9.50">+9.50</option>
<option value="+9.25">+9.25</option>
<option value="+9.00">+9.00</option>
<option value="+8.75">+8.75</option>
<option value="+8.50">+8.50</option>
<option value="+8.25">+8.25</option>
<option value="+8.00">+8.00</option>
<option value="+7.75">+7.75</option>
<option value="+7.50">+7.50</option>
<option value="+7.25">+7.25</option>
<option value="+7.00">+7.00</option>
<option value="+6.75">+6.75</option>
<option value="+6.50">+6.50</option>
<option value="+6.25">+6.25</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>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="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
<option value="-6.25">-6.25</option>
<option value="-6.50">-6.50</option>
<option value="-6.75">-6.75</option>
<option value="-7.00">-7.00</option>
<option value="-7.25">-7.25</option>
<option value="-7.50">-7.50</option>
<option value="-7.75">-7.75</option>
<option value="-8.00">-8.00</option>
<option value="-8.25">-8.25</option>
<option value="-8.50">-8.50</option>
<option value="-8.75">-8.75</option>
<option value="-9.00">-9.00</option>
<option value="-9.25">-9.25</option>
<option value="-9.50">-9.50</option>
<option value="-9.75">-9.75</option>
<option value="-10.00">-10.00</option>
<option value="-10.25">-10.25</option>
<option value="-10.50">-10.50</option>
<option value="-10.75">-10.75</option>
<option value="-11.00">-11.00</option>
<option value="-11.25">-11.25</option>
<option value="-11.50">-11.50</option>
<option value="-11.75">-11.75</option>
<option value="-12.00">-12.00</option>
<option value="-12.25">-12.25</option>
<option value="-12.50">-12.50</option>
<option value="-12.75">-12.75</option>
<option value="-13.00">-13.00</option>
<option value="-13.25">-13.25</option>
<option value="-13.50">-13.50</option>
<option value="-13.75">-13.75</option>
<option value="-14.00">-14.00</option>
<option value="-14.25">-14.25</option>
<option value="-14.50">-14.50</option>
<option value="-14.75">-14.75</option>
<option value="-15.00">-15.00</option>
<option value="-15.25">-15.25</option>
<option value="-15.50">-15.50</option>
<option value="-15.75">-15.75</option>
<option value="-16.00">-16.00</option>
<option value="-16.25">-16.25</option>
<option value="-16.50">-16.50</option>
<option value="-16.75">-16.75</option>
<option value="-17.00">-17.00</option>
<option value="-17.25">-17.25</option>
<option value="-17.50">-17.50</option>
<option value="-17.75">-17.75</option>
<option value="-18.00">-18.00</option>
<option value="-18.25">-18.25</option>
<option value="-18.50">-18.50</option>
<option value="-18.75">-18.75</option>
<option value="-19.00">-19.00</option>
<option value="-19.25">-19.25</option>
<option value="-19.50">-19.50</option>
<option value="-19.75">-19.75</option>
<option value="-20.00">-20.00</option>
<option value="-20.25">-20.25</option>
<option value="-20.50">-20.50</option>
<option value="-20.75">-20.75</option>
<option value="-21.00">-21.00</option>
<option value="-21.25">-21.25</option>
<option value="-21.50">-21.50</option>
<option value="-21.75">-21.75</option>
<option value="-22.00">-22.00</option>
<option value="-22.25">-22.25</option>
<option value="-22.50">-22.50</option>
<option value="-22.75">-22.75</option>
<option value="-23.00">-23.00</option>
<option value="-23.25">-23.25</option>
<option value="-23.50">-23.50</option>
<option value="-23.75">-23.75</option>
<option value="-24.00">-24.00</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Cyl</label>
<select class="form-select" id="dist_cyl_r" name="dist_cyl_r">
<option value="">Select</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>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="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Axis</label>
<input type="number" class="form-input" id="dist_axis_r" name="dist_axis_r" min="1" max="180" placeholder="1 to 180">
</div>
</div>
<div class="eye-section">
<div class="eye-header">Left Eye</div>
<div class="form-group">
<label class="form-label">Sph</label>
<select class="form-select" id="dist_sph_l" name="dist_sph_l">
<option value="">Select</option>
<option value="+24.00">+24.00</option>
<option value="+23.75">+23.75</option>
<option value="+23.50">+23.50</option>
<option value="+23.25">+23.25</option>
<option value="+23.00">+23.00</option>
<option value="+22.75">+22.75</option>
<option value="+22.50">+22.50</option>
<option value="+22.25">+22.25</option>
<option value="+22.00">+22.00</option>
<option value="+21.75">+21.75</option>
<option value="+21.50">+21.50</option>
<option value="+21.25">+21.25</option>
<option value="+21.00">+21.00</option>
<option value="+20.75">+20.75</option>
<option value="+20.50">+20.50</option>
<option value="+20.25">+20.25</option>
<option value="+20.00">+20.00</option>
<option value="+19.75">+19.75</option>
<option value="+19.50">+19.50</option>
<option value="+19.25">+19.25</option>
<option value="+19.00">+19.00</option>
<option value="+18.75">+18.75</option>
<option value="+18.50">+18.50</option>
<option value="+18.25">+18.25</option>
<option value="+18.00">+18.00</option>
<option value="+17.75">+17.75</option>
<option value="+17.50">+17.50</option>
<option value="+17.25">+17.25</option>
<option value="+17.00">+17.00</option>
<option value="+16.75">+16.75</option>
<option value="+16.50">+16.50</option>
<option value="+16.25">+16.25</option>
<option value="+16.00">+16.00</option>
<option value="+15.75">+15.75</option>
<option value="+15.50">+15.50</option>
<option value="+15.25">+15.25</option>
<option value="+15.00">+15.00</option>
<option value="+14.75">+14.75</option>
<option value="+14.50">+14.50</option>
<option value="+14.25">+14.25</option>
<option value="+14.00">+14.00</option>
<option value="+13.75">+13.75</option>
<option value="+13.50">+13.50</option>
<option value="+13.25">+13.25</option>
<option value="+13.00">+13.00</option>
<option value="+12.75">+12.75</option>
<option value="+12.50">+12.50</option>
<option value="+12.25">+12.25</option>
<option value="+12.00">+12.00</option>
<option value="+11.75">+11.75</option>
<option value="+11.50">+11.50</option>
<option value="+11.25">+11.25</option>
<option value="+11.00">+11.00</option>
<option value="+10.75">+10.75</option>
<option value="+10.50">+10.50</option>
<option value="+10.25">+10.25</option>
<option value="+10.00">+10.00</option>
<option value="+9.75">+9.75</option>
<option value="+9.50">+9.50</option>
<option value="+9.25">+9.25</option>
<option value="+9.00">+9.00</option>
<option value="+8.75">+8.75</option>
<option value="+8.50">+8.50</option>
<option value="+8.25">+8.25</option>
<option value="+8.00">+8.00</option>
<option value="+7.75">+7.75</option>
<option value="+7.50">+7.50</option>
<option value="+7.25">+7.25</option>
<option value="+7.00">+7.00</option>
<option value="+6.75">+6.75</option>
<option value="+6.50">+6.50</option>
<option value="+6.25">+6.25</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>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="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
<option value="-6.25">-6.25</option>
<option value="-6.50">-6.50</option>
<option value="-6.75">-6.75</option>
<option value="-7.00">-7.00</option>
<option value="-7.25">-7.25</option>
<option value="-7.50">-7.50</option>
<option value="-7.75">-7.75</option>
<option value="-8.00">-8.00</option>
<option value="-8.25">-8.25</option>
<option value="-8.50">-8.50</option>
<option value="-8.75">-8.75</option>
<option value="-9.00">-9.00</option>
<option value="-9.25">-9.25</option>
<option value="-9.50">-9.50</option>
<option value="-9.75">-9.75</option>
<option value="-10.00">-10.00</option>
<option value="-10.25">-10.25</option>
<option value="-10.50">-10.50</option>
<option value="-10.75">-10.75</option>
<option value="-11.00">-11.00</option>
<option value="-11.25">-11.25</option>
<option value="-11.50">-11.50</option>
<option value="-11.75">-11.75</option>
<option value="-12.00">-12.00</option>
<option value="-12.25">-12.25</option>
<option value="-12.50">-12.50</option>
<option value="-12.75">-12.75</option>
<option value="-13.00">-13.00</option>
<option value="-13.25">-13.25</option>
<option value="-13.50">-13.50</option>
<option value="-13.75">-13.75</option>
<option value="-14.00">-14.00</option>
<option value="-14.25">-14.25</option>
<option value="-14.50">-14.50</option>
<option value="-14.75">-14.75</option>
<option value="-15.00">-15.00</option>
<option value="-15.25">-15.25</option>
<option value="-15.50">-15.50</option>
<option value="-15.75">-15.75</option>
<option value="-16.00">-16.00</option>
<option value="-16.25">-16.25</option>
<option value="-16.50">-16.50</option>
<option value="-16.75">-16.75</option>
<option value="-17.00">-17.00</option>
<option value="-17.25">-17.25</option>
<option value="-17.50">-17.50</option>
<option value="-17.75">-17.75</option>
<option value="-18.00">-18.00</option>
<option value="-18.25">-18.25</option>
<option value="-18.50">-18.50</option>
<option value="-18.75">-18.75</option>
<option value="-19.00">-19.00</option>
<option value="-19.25">-19.25</option>
<option value="-19.50">-19.50</option>
<option value="-19.75">-19.75</option>
<option value="-20.00">-20.00</option>
<option value="-20.25">-20.25</option>
<option value="-20.50">-20.50</option>
<option value="-20.75">-20.75</option>
<option value="-21.00">-21.00</option>
<option value="-21.25">-21.25</option>
<option value="-21.50">-21.50</option>
<option value="-21.75">-21.75</option>
<option value="-22.00">-22.00</option>
<option value="-22.25">-22.25</option>
<option value="-22.50">-22.50</option>
<option value="-22.75">-22.75</option>
<option value="-23.00">-23.00</option>
<option value="-23.25">-23.25</option>
<option value="-23.50">-23.50</option>
<option value="-23.75">-23.75</option>
<option value="-24.00">-24.00</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Cyl</label>
<select class="form-select" id="dist_cyl_l" name="dist_cyl_l">
<option value="">Select</option>
<option value="+6.00">+6.00</option>
<option value="+5.75">+5.75</option>
<option value="+5.50">+5.50</option>
<option value="+5.25">+5.25</option>
<option value="+5.00">+5.00</option>
<option value="+4.75">+4.75</option>
<option value="+4.50">+4.50</option>
<option value="+4.25">+4.25</option>
<option value="+4.00">+4.00</option>
<option value="+3.75">+3.75</option>
<option value="+3.50">+3.50</option>
<option value="+3.25">+3.25</option>
<option value="+3.00">+3.00</option>
<option value="+2.75">+2.75</option>
<option value="+2.50">+2.50</option>
<option value="+2.25">+2.25</option>
<option value="+2.00">+2.00</option>
<option value="+1.75">+1.75</option>
<option value="+1.50">+1.50</option>
<option value="+1.25">+1.25</option>
<option value="+1.00">+1.00</option>
<option value="+0.75">+0.75</option>
<option value="+0.50">+0.50</option>
<option value="+0.25">+0.25</option>
<option value="0.00" selected>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="-5.25">-5.25</option>
<option value="-5.50">-5.50</option>
<option value="-5.75">-5.75</option>
<option value="-6.00">-6.00</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Axis</label>
<input type="number" class="form-input" id="dist_axis_l" name="dist_axis_l" min="1" max="180" placeholder="1 to 180">
</div>
</div>
</div>
<div class="addition-section">
<div class="addition-header">Addition</div>
<div class="form-group">
<select class="form-select" id="add_power" name="add_power" style="border-color: #169D53;">
<option value="">Select</option>
<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>
</select>
</div>
</div>
<div class="calculation-buttons">
<button type="submit" name="calculate_php" class="calc-btn primary">
<i class="fas fa-calculator"></i>
Calculate
</button>
<button type="button" class="calc-btn secondary" onclick="clearForm()">
<i class="fas fa-redo"></i>
Reset
</button>
</div>
</form>
<!-- OpticTool Style Results Section -->
<?php if ($calculation_results && count($calculation_results) > 0): ?>
<div class="optictool-results" style="background-color: #e8f2ff; padding: 20px; border-radius: 10px; margin-top: 20px;">
<?php if (isset($calculation_results['right_eye'])): ?>
<div class="eye-result-block" style="margin-bottom: 25px;">
<h4 style="color: #333; font-size: 18px; font-weight: bold; margin-bottom: 15px; text-align: center;">Right Eye Results</h4>
<div style="margin-bottom: 10px;">
<span style="color: #333; font-weight: bold; display: inline-block; width: 60px;">Dist :</span>
<div style="display: inline-block; margin-left: 20px;">
<div>Sph: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['right_eye']['distance']['sphere']); ?>, Cyl: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['right_eye']['distance']['cylinder']); ?>, Axis: <?php echo $calculation_results['right_eye']['distance']['axis']; ?></div>
<?php if (isset($calculation_results['right_eye']['transposed'])): ?>
<div>Sph: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['right_eye']['transposed']['sphere']); ?>, Cyl: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['right_eye']['transposed']['cylinder']); ?>, Axis: <?php echo $calculation_results['right_eye']['transposed']['axis']; ?></div>
<?php endif; ?>
</div>
</div>
<?php if (isset($calculation_results['right_eye']['near_transposed'])): ?>
<div>
<span style="color: #333; font-weight: bold; display: inline-block; width: 60px;">Near :</span>
<span style="margin-left: 20px;">Sph: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['right_eye']['near_transposed']['sphere']); ?>, Cyl: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['right_eye']['near_transposed']['cylinder']); ?>, Axis: <?php echo $calculation_results['right_eye']['near_transposed']['axis']; ?></span>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if (isset($calculation_results['left_eye'])): ?>
<div class="eye-result-block">
<h4 style="color: #333; font-size: 18px; font-weight: bold; margin-bottom: 15px; text-align: center;">Left Eye Results</h4>
<div style="margin-bottom: 10px;">
<span style="color: #333; font-weight: bold; display: inline-block; width: 60px;">Dist :</span>
<div style="display: inline-block; margin-left: 20px;">
<div>Sph: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['left_eye']['distance']['sphere']); ?>, Cyl: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['left_eye']['distance']['cylinder']); ?>, Axis: <?php echo $calculation_results['left_eye']['distance']['axis']; ?></div>
<?php if (isset($calculation_results['left_eye']['transposed'])): ?>
<div>Sph: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['left_eye']['transposed']['sphere']); ?>, Cyl: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['left_eye']['transposed']['cylinder']); ?>, Axis: <?php echo $calculation_results['left_eye']['transposed']['axis']; ?></div>
<?php endif; ?>
</div>
</div>
<?php if (isset($calculation_results['left_eye']['near_transposed'])): ?>
<div>
<span style="color: #333; font-weight: bold; display: inline-block; width: 60px;">Near :</span>
<span style="margin-left: 20px;">Sph: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['left_eye']['near_transposed']['sphere']); ?>, Cyl: <?php echo PrescriptionCalculator::formatOpticalNumber($calculation_results['left_eye']['near_transposed']['cylinder']); ?>, Axis: <?php echo $calculation_results['left_eye']['near_transposed']['axis']; ?></span>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
<!-- Error Message -->
<?php if ($error_message): ?>
<div class="alert alert-danger">
<strong>Error:</strong> <?php echo htmlspecialchars($error_message); ?>
</div>
<?php endif; ?>
</div>
<div class="features-section">
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-clock"></i>
</div>
<h3 class="feature-title">Saves Time</h3>
<p class="feature-description">No more manual calculations or flipping through textbooks! Just enter the numbers, and our calculator gives you instant results.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-bullseye"></i>
</div>
<h3 class="feature-title">Eliminates Guesswork</h3>
<p class="feature-description">Uses proven optical formulas. Ensures correct cross-number conversions. Removes doubts in near and distance adjustments.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3 class="feature-title">Easy to Use</h3>
<p class="feature-description">Simple and intuitive interface. No complicated steps—just input and get results. Works on any device.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3 class="feature-title">Reduces Errors</h3>
<p class="feature-description">Automatically checks for errors. Provides consistent, reliable results. Helps avoid prescription mix-ups.</p>
</div>
</div>
<div class="tips-section">
<h2 class="tips-title">Why guess and get it wrong? Do it right the first time</h2>
<p>Try our Prescription Calculator today and enjoy faster, error-free optical calculations!</p>
<div class="tips-list">
<div class="tip-item">
<div class="tip-icon">✅</div>
<div class="tip-text">No errors in calculations</div>
</div>
<div class="tip-item">
<div class="tip-icon">⚡</div>
<div class="tip-text">Faster prescription checks</div>
</div>
<div class="tip-item">
<div class="tip-icon">⏰</div>
<div class="tip-text">More time for other work</div>
</div>
<div class="tip-item">
<div class="tip-icon">🎯</div>
<div class="tip-text">Accurate cross-number conversions</div>
</div>
</div>
</div>
</div>
<script>
// Professional transposition calculation
function transposeRx(sph, cyl, axis) {
const newSph = sph + cyl;
const newCyl = -cyl;
let newAxis = axis <= 90 ? axis + 90 : axis - 90;
if (newAxis > 180) newAxis -= 180;
if (newAxis <= 0) newAxis += 180;
return { sphere: newSph, cylinder: newCyl, axis: newAxis };
}
// Professional optical cross numbers calculation
function calculateCrossNumbers(sph, cyl, axis) {
if (sph === 0 && cyl === 0) return { power1: 0, power2: 0, axis1: 0, axis2: 90 };
// Calculate the two principal meridians
const power1 = sph; // Power in the axis meridian
const power2 = sph + cyl; // Power 90 degrees from axis
// Axis positions
const axis1 = axis;
const axis2 = (axis + 90) % 180;
if (axis2 === 0) axis2 = 180;
return {
power1: power1,
power2: power2,
axis1: axis1,
axis2: axis2
};
}
// Format optical numbers professionally
function formatOpticalNumber(num) {
if (num === 0) return '0.00';
const formatted = Math.abs(num).toFixed(2);
return num > 0 ? `+${formatted}` : `-${formatted}`;
}
// Format axis numbers
function formatAxis(axis) {
return axis.toString().padStart(3, '0') + '°';
}
function calculatePrescription() {
try {
const distSphR = parseFloat(document.getElementById('dist_sph_r')?.value) || 0;
const distCylR = parseFloat(document.getElementById('dist_cyl_r')?.value) || 0;
const distAxisR = parseInt(document.getElementById('dist_axis_r')?.value) || 0;
const distSphL = parseFloat(document.getElementById('dist_sph_l')?.value) || 0;
const distCylL = parseFloat(document.getElementById('dist_cyl_l')?.value) || 0;
const distAxisL = parseInt(document.getElementById('dist_axis_l')?.value) || 0;
const add = parseFloat(document.getElementById('add_power')?.value) || 0;
let resultsHTML = '<div class="results-container">';
// Right Eye
if (distSphR || distCylR || distAxisR) {
resultsHTML += '<div class="eye-results-section">';
resultsHTML += '<h4 class="eye-title">Right Eye Results</h4>';
// Distance
resultsHTML += `<div class="prescription-line">Dist : Sph: ${formatOpticalNumber(distSphR)}, Cyl: ${formatOpticalNumber(distCylR)}, Axis: ${distAxisR}</div>`;
if (distCylR !== 0) {
const t = transposeRx(distSphR, distCylR, distAxisR);
resultsHTML += `<div class="prescription-line">Sph: ${formatOpticalNumber(t.sphere)}, Cyl: ${formatOpticalNumber(t.cylinder)}, Axis: ${t.axis}</div>`;
}
// Near
if (add > 0) {
const nearSphR = distSphR + add; // ✅ FIXED
resultsHTML += `<div class="prescription-line">Near : Sph: ${formatOpticalNumber(nearSphR)}, Cyl: ${formatOpticalNumber(distCylR)}, Axis: ${distAxisR}</div>`;
if (distCylR !== 0) {
const tn = transposeRx(nearSphR, distCylR, distAxisR);
resultsHTML += `<div class="prescription-line">Sph: ${formatOpticalNumber(tn.sphere)}, Cyl: ${formatOpticalNumber(tn.cylinder)}, Axis: ${tn.axis}</div>`;
}
}
resultsHTML += '</div>';
}
// Left Eye
if (distSphL || distCylL || distAxisL) {
resultsHTML += '<div class="eye-results-section">';
resultsHTML += '<h4 class="eye-title">Left Eye Results</h4>';
// Distance
resultsHTML += `<div class="prescription-line">Dist : Sph: ${formatOpticalNumber(distSphL)}, Cyl: ${formatOpticalNumber(distCylL)}, Axis: ${distAxisL}</div>`;
if (distCylL !== 0) {
const t = transposeRx(distSphL, distCylL, distAxisL);
resultsHTML += `<div class="prescription-line">Sph: ${formatOpticalNumber(t.sphere)}, Cyl: ${formatOpticalNumber(t.cylinder)}, Axis: ${t.axis}</div>`;
}
// Near
if (add > 0) {
const nearSphL = distSphL + add; // ✅ FIXED
resultsHTML += `<div class="prescription-line">Near : Sph: ${formatOpticalNumber(nearSphL)}, Cyl: ${formatOpticalNumber(distCylL)}, Axis: ${distAxisL}</div>`;
if (distCylL !== 0) {
const tn = transposeRx(nearSphL, distCylL, distAxisL);
resultsHTML += `<div class="prescription-line">Sph: ${formatOpticalNumber(tn.sphere)}, Cyl: ${formatOpticalNumber(tn.cylinder)}, Axis: ${tn.axis}</div>`;
}
}
resultsHTML += '</div>';
}
resultsHTML += '</div>';
const resultsContainer = document.getElementById('calculationResults');
const resultsSection = document.getElementById('resultsSection');
if (resultsContainer) resultsContainer.innerHTML = resultsHTML;
if (resultsSection) resultsSection.style.display = 'block';
} catch (error) {
alert('Calculation error: ' + error.message);
}
}
// Helper function to format prescription display (original)
function formatPrescriptionOld(sph, cyl, axis) {
let result = '';
if (sph !== 0) {
result += `Sph: ${formatNumber(sph)}`;
}
if (cyl !== 0) {
if (result) result += ', ';
result += `Cyl: ${formatNumber(cyl)}`;
}
if (axis !== 0 && cyl !== 0) {
result += `, Axis: ${axis}`;
}
return result || 'No prescription';
}
// Create simple results like OpticTool.com.pk (second image)
let resultsHTML = '<div class="results-container">';
// Right Eye Results - Simple Format like OpticTool
if (distSphR || distCylR || distAxisR) {
resultsHTML += '<div class="eye-results-section">';
resultsHTML += '<h4 class="eye-title">Right Eye Results</h4>';
resultsHTML += '<div class="prescription-line">';
resultsHTML += '<span class="prescription-type">Dist :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(sphR) + ', Cyl: ' + formatOpticalNumber(cylR) + ', Axis: ' + axisR + '</span>';
resultsHTML += '</div>';
// Add transposition for distance
if (cylR !== 0) {
const transposedR = transposeRx(sphR, cylR, axisR);
resultsHTML += '<div class="prescription-line transposed">';
resultsHTML += '<span class="prescription-type">Transposed :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(transposedR.sphere) + ', Cyl: ' + formatOpticalNumber(transposedR.cylinder) + ', Axis: ' + transposedR.axis + '</span>';
resultsHTML += '</div>';
}
if (add > 0) {
resultsHTML += '<div class="prescription-line">';
resultsHTML += '<span class="prescription-type">Near :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(nearSphR) + ', Cyl: ' + formatOpticalNumber(cylR) + ', Axis: ' + axisR + '</span>';
resultsHTML += '</div>';
// Add transposition for near
if (cylR !== 0) {
const transposedNearR = transposeRx(nearSphR, cylR, axisR);
resultsHTML += '<div class="prescription-line transposed">';
resultsHTML += '<span class="prescription-type">Near Transposed :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(transposedNearR.sphere) + ', Cyl: ' + formatOpticalNumber(transposedNearR.cylinder) + ', Axis: ' + transposedNearR.axis + '</span>';
resultsHTML += '</div>';
}
}
resultsHTML += '</div>';
}
// Left Eye Results - Simple Format like OpticTool
if (distSphL || distCylL || distAxisL) {
resultsHTML += '<div class="eye-results-section">';
resultsHTML += '<h4 class="eye-title">Left Eye Results</h4>';
resultsHTML += '<div class="prescription-line">';
resultsHTML += '<span class="prescription-type">Dist :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(sphL) + ', Cyl: ' + formatOpticalNumber(cylL) + ', Axis: ' + axisL + '</span>';
resultsHTML += '</div>';
// Add transposition for distance
if (cylL !== 0) {
const transposedL = transposeRx(sphL, cylL, axisL);
resultsHTML += '<div class="prescription-line transposed">';
resultsHTML += '<span class="prescription-type">Transposed :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(transposedL.sphere) + ', Cyl: ' + formatOpticalNumber(transposedL.cylinder) + ', Axis: ' + transposedL.axis + '</span>';
resultsHTML += '</div>';
}
if (add > 0) {
resultsHTML += '<div class="prescription-line">';
resultsHTML += '<span class="prescription-type">Near :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(nearSphL) + ', Cyl: ' + formatOpticalNumber(cylL) + ', Axis: ' + axisL + '</span>';
resultsHTML += '</div>';
// Add transposition for near
if (cylL !== 0) {
const transposedNearL = transposeRx(nearSphL, cylL, axisL);
resultsHTML += '<div class="prescription-line transposed">';
resultsHTML += '<span class="prescription-type">Near Transposed :</span>';
resultsHTML += '<span class="prescription-details">Sph: ' + formatOpticalNumber(transposedNearL.sphere) + ', Cyl: ' + formatOpticalNumber(transposedNearL.cylinder) + ', Axis: ' + transposedNearL.axis + '</span>';
resultsHTML += '</div>';
}
}
resultsHTML += '</div>';
}
resultsHTML += '</div>';
console.log('Generated HTML:', resultsHTML);
const resultsContainer = document.getElementById('calculationResults');
const resultsSection = document.getElementById('resultsSection');
console.log('Results container found:', resultsContainer);
console.log('Results section found:', resultsSection);
if (resultsContainer) {
resultsContainer.innerHTML = resultsHTML;
console.log('HTML injected successfully');
}
if (resultsSection) {
resultsSection.style.display = 'block';
console.log('Results section shown');
// Smooth scroll to results
resultsSection.scrollIntoView({
behavior: 'smooth'
});
} catch (error) {
console.error('Error in calculate function:', error);
alert('Calculation error: ' + error.message);
}
}
function clearForm() {
document.getElementById('calculatorForm').reset();
document.getElementById('resultsSection').style.display = 'none';
}
// Add input validation
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('.form-input');
inputs.forEach(input => {
input.addEventListener('input', function() {
// Add visual feedback for valid inputs
if (this.value && this.checkValidity()) {
this.style.borderColor = '#22c55e';
} else if (this.value) {
this.style.borderColor = '#ef4444';
} else {
this.style.borderColor = '#e9ecef';
}
});
// Allow Enter key to calculate
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
e.preventDefault();
calculatePrescription();
}
});
});
});
</script>
</body>
</html>