Spaces:

MavrickMixx
/

yeux

Running

App Files Files Community

yeux / index.html

MavrickMixx

Add 2 files

1037099 verified about 1 month ago

raw

history blame contribute delete

49.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>VisionCheck Pro \| Comprehensive Online Eye Tests</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>
	.test-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	}
	.snellen-chart {
	font-family: 'Arial', sans-serif;
	font-weight: bold;
	text-align: center;
	}
	.ishihara-plate {
	border-radius: 50%;
	background: radial-gradient(circle, #f0f0f0, #e0e0e0);
	}
	.amsler-grid {
	background-size: 20px 20px;
	background-image: linear-gradient(to right, #000 1px, transparent 1px),
	linear-gradient(to bottom, #000 1px, transparent 1px);
	}
	.astigmatism-wheel {
	background: conic-gradient(from 0deg, #000 0%, #000 10%, transparent 10%, transparent 20%, #000 20%, #000 30%, transparent 30%, transparent 40%, #000 40%, #000 50%, transparent 50%, transparent 60%, #000 60%, #000 70%, transparent 70%, transparent 80%, #000 80%, #000 90%, transparent 90%, transparent 100%);
	}
	.contrast-test {
	background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	}
	.stereo-image {
	background: linear-gradient(90deg, rgba(255,0,0,0.5) 0%, rgba(0,255,255,0.5) 100%);
	}
	.duochrome {
	background: linear-gradient(90deg, #ff0000 0%, #ff0000 50%, #00ff00 50%, #00ff00 100%);
	}
	.peripheral-test {
	background: radial-gradient(circle, transparent 20%, #f0f0f0 20%);
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Header with Warning Banner -->
	<header class="bg-white shadow-sm">
	<div class="bg-yellow-100 border-l-4 border-yellow-500 p-4">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-yellow-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-yellow-700">
	<strong>Important:</strong> These tests are for screening purposes only and do not replace a professional eye examination. If you have concerns about your vision, please consult an eye care professional.
	</p>
	</div>
	</div>
	</div>
	<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
	<div class="flex items-center">
	<i class="fas fa-eye text-blue-600 text-3xl mr-3"></i>
	<h1 class="text-3xl font-bold text-gray-900">
	VisionCheck <span class="text-blue-600">Pro</span>
	</h1>
	</div>
	<nav class="hidden md:flex space-x-8">
	<a href="#" class="text-gray-900 font-medium">Home</a>
	<a href="#tests" class="text-gray-500 hover:text-gray-900 font-medium">Tests</a>
	<a href="#about" class="text-gray-500 hover:text-gray-900 font-medium">About</a>
	<a href="#faq" class="text-gray-500 hover:text-gray-900 font-medium">FAQ</a>
	</nav>
	<button class="md:hidden text-gray-500">
	<i class="fas fa-bars text-2xl"></i>
	</button>
	</div>
	</header>

	<!-- Hero Section -->
	<section class="bg-gradient-to-r from-blue-500 to-blue-700 text-white py-20">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="md:flex items-center">
	<div class="md:w-1/2 mb-10 md:mb-0">
	<h2 class="text-4xl font-bold mb-6">Comprehensive Online Vision Testing</h2>
	<p class="text-xl mb-8">Perform a series of professional-grade eye tests from the comfort of your home. Our platform helps identify potential vision issues that may require professional attention.</p>
	<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
	<a href="#tests" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-center shadow-md transition duration-300">Start Testing</a>
	<a href="#how-it-works" class="bg-transparent border-2 border-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium text-center transition duration-300">How It Works</a>
	</div>
	</div>
	<div class="md:w-1/2 flex justify-center">
	<div class="relative w-64 h-64 md:w-80 md:h-80">
	<div class="absolute inset-0 bg-blue-400 rounded-full opacity-20 animate-pulse"></div>
	<div class="absolute inset-4 bg-blue-300 rounded-full opacity-30 animate-pulse delay-100"></div>
	<div class="absolute inset-8 bg-blue-200 rounded-full opacity-40 animate-pulse delay-200"></div>
	<div class="absolute inset-12 bg-white rounded-full flex items-center justify-center shadow-xl">
	<i class="fas fa-eye text-blue-600 text-5xl"></i>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- How It Works -->
	<section id="how-it-works" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<h2 class="text-3xl font-bold text-center text-gray-900 mb-12">How Our Vision Tests Work</h2>
	<div class="grid md:grid-cols-3 gap-8">
	<div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100">
	<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
	<span class="text-blue-600 text-2xl font-bold">1</span>
	</div>
	<h3 class="text-xl font-semibold text-center mb-3">Prepare Your Environment</h3>
	<p class="text-gray-600 text-center">Ensure proper lighting, set your screen brightness to medium, and sit at the recommended distance from your monitor.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100">
	<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
	<span class="text-blue-600 text-2xl font-bold">2</span>
	</div>
	<h3 class="text-xl font-semibold text-center mb-3">Take the Tests</h3>
	<p class="text-gray-600 text-center">Follow the instructions for each test carefully. Our platform guides you through each step with clear directions.</p>
	</div>
	<div class="bg-gray-50 p-6 rounded-lg shadow-sm border border-gray-100">
	<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mb-4 mx-auto">
	<span class="text-blue-600 text-2xl font-bold">3</span>
	</div>
	<h3 class="text-xl font-semibold text-center mb-3">Get Your Results</h3>
	<p class="text-gray-600 text-center">Receive detailed analysis of your vision metrics with recommendations on whether professional consultation may be needed.</p>
	</div>
	</div>
	</div>
	</section>

	<!-- Test Library -->
	<section id="tests" class="py-16 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<h2 class="text-3xl font-bold text-center text-gray-900 mb-4">Comprehensive Vision Tests</h2>
	<p class="text-xl text-gray-600 text-center mb-12">Select a test below to begin evaluating your vision</p>

	<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Visual Acuity Test -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden test-card transition duration-300">
	<div class="h-48 bg-blue-100 flex items-center justify-center">
	<div class="snellen-chart text-6xl text-gray-800">
	<div class="mb-2">E</div>
	<div class="text-4xl">F P</div>
	</div>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Visual Acuity Test</h3>
	<p class="text-gray-600 mb-4">Measures the sharpness of your vision and ability to distinguish fine details at distance.</p>
	<button onclick="startTest('acuity')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
	Start Test
	</button>
	</div>
	</div>

	<!-- Color Vision Test -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden test-card transition duration-300">
	<div class="h-48 flex items-center justify-center">
	<div class="ishihara-plate w-40 h-40 flex items-center justify-center">
	<span class="text-4xl font-bold text-red-600">12</span>
	</div>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Color Vision Test</h3>
	<p class="text-gray-600 mb-4">Screens for color vision deficiencies (color blindness), primarily red-green types.</p>
	<button onclick="startTest('color')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
	Start Test
	</button>
	</div>
	</div>

	<!-- Astigmatism Test -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden test-card transition duration-300">
	<div class="h-48 bg-gray-100 flex items-center justify-center">
	<div class="astigmatism-wheel w-32 h-32 rounded-full"></div>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Astigmatism Test</h3>
	<p class="text-gray-600 mb-4">Screens for astigmatism caused by irregular curvature of the cornea or lens.</p>
	<button onclick="startTest('astigmatism')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
	Start Test
	</button>
	</div>
	</div>

	<!-- Contrast Sensitivity Test -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden test-card transition duration-300">
	<div class="h-48 bg-gray-200 flex items-center justify-center">
	<div class="contrast-test w-full h-20 flex items-center justify-center">
	<span class="text-3xl font-bold text-white bg-black bg-opacity-50 px-4 py-2 rounded">C</span>
	</div>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Contrast Sensitivity</h3>
	<p class="text-gray-600 mb-4">Evaluates your ability to distinguish objects from their background when contrast is low.</p>
	<button onclick="startTest('contrast')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
	Start Test
	</button>
	</div>
	</div>

	<!-- Peripheral Vision Test -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden test-card transition duration-300">
	<div class="h-48 flex items-center justify-center">
	<div class="peripheral-test w-40 h-40 relative">
	<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-black rounded-full"></div>
	<div class="absolute top-1/4 left-3/4 w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
	</div>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Peripheral Vision</h3>
	<p class="text-gray-600 mb-4">Assesses your side vision extent, important for spatial awareness and motion detection.</p>
	<button onclick="startTest('peripheral')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
	Start Test
	</button>
	</div>
	</div>

	<!-- Amsler Grid Test -->
	<div class="bg-white rounded-xl shadow-md overflow-hidden test-card transition duration-300">
	<div class="h-48 bg-white flex items-center justify-center border-b">
	<div class="amsler-grid w-40 h-40 relative">
	<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-black rounded-full"></div>
	</div>
	</div>
	<div class="p-6">
	<h3 class="text-xl font-bold mb-2">Amsler Grid</h3>
	<p class="text-gray-600 mb-4">Screens for central vision abnormalities like those caused by macular degeneration.</p>
	<button onclick="startTest('amsler')" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg font-medium transition duration-300">
	Start Test
	</button>
	</div>
	</div>
	</div>

	<div class="mt-12 text-center">
	<button class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-6 rounded-lg transition duration-300">
	View All Tests (12+)
	</button>
	</div>
	</div>
	</section>

	<!-- Test Modal (Hidden by default) -->
	<div id="testModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
	<!-- Modal Header -->
	<div class="border-b p-4 flex justify-between items-center">
	<h3 id="testModalTitle" class="text-xl font-bold">Test Title</h3>
	<button onclick="closeTest()" class="text-gray-500 hover:text-gray-700">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<!-- Modal Content -->
	<div id="testModalContent" class="p-6">
	<!-- Content will be loaded dynamically -->
	</div>

	<!-- Modal Footer -->
	<div class="border-t p-4 flex justify-end">
	<button onclick="closeTest()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded-lg mr-2">
	Cancel
	</button>
	<button id="startTestBtn" onclick="beginTest()" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg">
	Begin Test
	</button>
	</div>
	</div>
	</div>

	<!-- About Section -->
	<section id="about" class="py-16 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:grid lg:grid-cols-12 lg:gap-8">
	<div class="lg:col-span-5">
	<h2 class="text-3xl font-bold text-gray-900 mb-6">About VisionCheck Pro</h2>
	<p class="text-lg text-gray-600 mb-6">
	VisionCheck Pro is an advanced online platform designed to provide comprehensive vision screening tests from the comfort of your home.
	</p>
	<p class="text-gray-600 mb-6">
	Our mission is to make vision health more accessible while promoting awareness about the importance of regular eye examinations.
	</p>
	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	<strong>Please note:</strong> These tests are for screening purposes only and do not replace a professional eye examination. If you have concerns about your vision, please consult an eye care professional.
	</p>
	</div>
	</div>
	</div>
	</div>
	<div class="mt-12 lg:mt-0 lg:col-span-7">
	<div class="bg-gray-50 rounded-xl p-6">
	<h3 class="text-xl font-semibold mb-4">Our Scientific Approach</h3>
	<p class="text-gray-600 mb-4">
	Each test on our platform is based on established optometric principles and designed to provide meaningful insights about your vision health.
	</p>
	<div class="space-y-4">
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
	</svg>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-gray-700">Standardized testing protocols adapted for online use</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
	</svg>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-gray-700">Clear instructions to ensure accurate results</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
	</svg>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-gray-700">Detailed results with explanations and recommendations</p>
	</div>
	</div>
	<div class="flex items-start">
	<div class="flex-shrink-0 mt-1">
	<div class="bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
	</svg>
	</div>
	</div>
	<div class="ml-3">
	<p class="text-gray-700">Ongoing development to expand our test library</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- FAQ Section -->
	<section id="faq" class="py-16 bg-gray-50">
	<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
	<h2 class="text-3xl font-bold text-center text-gray-900 mb-12">Frequently Asked Questions</h2>

	<div class="space-y-4">
	<div class="bg-white shadow rounded-lg overflow-hidden">
	<button onclick="toggleFAQ(1)" class="w-full flex justify-between items-center p-6 text-left">
	<span class="text-lg font-medium text-gray-900">How accurate are these online vision tests?</span>
	<svg id="faqIcon1" class="h-6 w-6 text-gray-500 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
	</svg>
	</button>
	<div id="faqContent1" class="hidden px-6 pb-6">
	<p class="text-gray-600">
	Our online vision tests are designed to provide meaningful screening results, but they have limitations compared to professional eye exams. Factors like screen calibration, lighting conditions, and testing distance can affect accuracy. These tests are excellent for initial screening but should not replace regular comprehensive eye examinations by a qualified professional.
	</p>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<button onclick="toggleFAQ(2)" class="w-full flex justify-between items-center p-6 text-left">
	<span class="text-lg font-medium text-gray-900">How often should I take these vision tests?</span>
	<svg id="faqIcon2" class="h-6 w-6 text-gray-500 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
	</svg>
	</button>
	<div id="faqContent2" class="hidden px-6 pb-6">
	<p class="text-gray-600">
	For general screening, taking these tests every 6-12 months can help monitor your vision health. If you notice changes in your vision or have specific concerns, you may take them more frequently. However, even with normal test results, adults should have a comprehensive eye exam every 1-2 years, and annually after age 60 or as recommended by your eye doctor.
	</p>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<button onclick="toggleFAQ(3)" class="w-full flex justify-between items-center p-6 text-left">
	<span class="text-lg font-medium text-gray-900">Can these tests diagnose eye diseases?</span>
	<svg id="faqIcon3" class="h-6 w-6 text-gray-500 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
	</svg>
	</button>
	<div id="faqContent3" class="hidden px-6 pb-6">
	<p class="text-gray-600">
	No, these tests cannot diagnose eye diseases. They can screen for potential vision problems that might indicate underlying conditions. Many eye diseases require specialized equipment and clinical examination for diagnosis. If our tests suggest potential issues or if you have symptoms, we strongly recommend consulting an eye care professional for proper diagnosis and treatment.
	</p>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<button onclick="toggleFAQ(4)" class="w-full flex justify-between items-center p-6 text-left">
	<span class="text-lg font-medium text-gray-900">What's the best way to prepare for these tests?</span>
	<svg id="faqIcon4" class="h-6 w-6 text-gray-500 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
	</svg>
	</button>
	<div id="faqContent4" class="hidden px-6 pb-6">
	<p class="text-gray-600">
	For best results: 1) Ensure your screen brightness is at medium level, 2) Test in a well-lit room (avoid glare on screen), 3) Follow the recommended testing distance for each test, 4) Wear your usual corrective lenses if you use them, 5) Take breaks between tests if doing multiple assessments, and 6) Make sure you're well-rested as fatigue can affect results.
	</p>
	</div>
	</div>

	<div class="bg-white shadow rounded-lg overflow-hidden">
	<button onclick="toggleFAQ(5)" class="w-full flex justify-between items-center p-6 text-left">
	<span class="text-lg font-medium text-gray-900">Can children use these vision tests?</span>
	<svg id="faqIcon5" class="h-6 w-6 text-gray-500 transform rotate-0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
	</svg>
	</button>
	<div id="faqContent5" class="hidden px-6 pb-6">
	<p class="text-gray-600">
	Some of our tests can be used with children who are old enough to follow instructions and provide feedback (typically age 6+). However, children should have regular eye exams by a pediatric optometrist or ophthalmologist, as many childhood vision problems require specialized testing. Our platform is not a substitute for professional pediatric vision care.
	</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Call to Action -->
	<section class="py-16 bg-blue-600 text-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
	<h2 class="text-3xl font-bold mb-6">Ready to Check Your Vision?</h2>
	<p class="text-xl mb-8 max-w-3xl mx-auto">
	Take the first step in monitoring your eye health with our comprehensive vision tests.
	</p>
	<a href="#tests" class="bg-white hover:bg-gray-100 text-blue-600 font-bold py-3 px-8 rounded-lg shadow-lg transition duration-300 inline-block">
	Start Testing Now
	</a>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white pt-12 pb-8">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-lg font-semibold mb-4">VisionCheck Pro</h3>
	<p class="text-gray-400 text-sm">
	Advanced online vision screening tests to help monitor your eye health between professional exams.
	</p>
	</div>
	<div>
	<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Home</a></li>
	<li><a href="#tests" class="text-gray-400 hover:text-white text-sm">Tests</a></li>
	<li><a href="#about" class="text-gray-400 hover:text-white text-sm">About</a></li>
	<li><a href="#faq" class="text-gray-400 hover:text-white text-sm">FAQ</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-semibold mb-4">Legal</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Terms of Service</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Privacy Policy</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Medical Disclaimer</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-lg font-semibold mb-4">Contact</h3>
	<p class="text-gray-400 text-sm mb-2">
	<i class="fas fa-envelope mr-2"></i> support@visioncheckpro.com
	</p>
	<div class="flex space-x-4 mt-4">
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-instagram"></i>
	</a>
	</div>
	</div>
	</div>
	<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400 text-sm mb-4 md:mb-0">
	© 2023 VisionCheck Pro. All rights reserved.
	</p>
	<div class="text-gray-400 text-sm">
	<span class="mr-4">Made with <i class="fas fa-heart text-red-400"></i> for better vision health</span>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Current test being taken
	let currentTest = null;

	// Function to open test modal
	function startTest(testType) {
	currentTest = testType;
	document.getElementById('testModal').classList.remove('hidden');
	document.body.classList.add('overflow-hidden');

	// Set modal title based on test type
	let title = '';
	let content = '';

	switch(testType) {
	case 'acuity':
	title = 'Visual Acuity Test';
	content = `
	<div class="mb-6">
	<h4 class="font-semibold text-lg mb-2">Instructions:</h4>
	<p class="text-gray-600 mb-4">This test measures how clearly you can see details at a distance. You'll need to:</p>
	<ol class="list-decimal pl-5 space-y-2 text-gray-600">
	<li>Position yourself 10 feet (3 meters) from your screen</li>
	<li>Cover one eye with your hand (don't press on the eye)</li>
	<li>Read the letters on each line from top to bottom</li>
	<li>Identify the smallest line where you can correctly read most letters</li>
	</ol>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	<strong>Note:</strong> If you normally wear distance glasses or contacts, wear them for this test.
	</p>
	</div>
	</div>
	</div>
	`;
	break;

	case 'color':
	title = 'Color Vision Test';
	content = `
	<div class="mb-6">
	<h4 class="font-semibold text-lg mb-2">Instructions:</h4>
	<p class="text-gray-600 mb-4">This test screens for color vision deficiencies (color blindness). You'll need to:</p>
	<ol class="list-decimal pl-5 space-y-2 text-gray-600">
	<li>Ensure your screen brightness is at medium level</li>
	<li>Look at each plate for about 5 seconds</li>
	<li>Identify the number or path you see in each circle</li>
	<li>If you don't see anything, select "Nothing"</li>
	</ol>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	<strong>Note:</strong> Color perception can be affected by screen settings. For best results, view these tests on a properly calibrated display.
	</p>
	</div>
	</div>
	</div>
	`;
	break;

	case 'astigmatism':
	title = 'Astigmatism Test';
	content = `
	<div class="mb-6">
	<h4 class="font-semibold text-lg mb-2">Instructions:</h4>
	<p class="text-gray-600 mb-4">This test helps identify potential astigmatism. You'll need to:</p>
	<ol class="list-decimal pl-5 space-y-2 text-gray-600">
	<li>Position yourself about 3 feet (1 meter) from your screen</li>
	<li>Cover one eye with your hand</li>
	<li>Look at the center of the wheel or lines</li>
	<li>Note if any lines appear darker, sharper, or clearer than others</li>
	<li>Repeat with the other eye</li>
	</ol>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	<strong>Note:</strong> If you wear glasses or contacts, perform this test both with and without them to compare results.
	</p>
	</div>
	</div>
	</div>
	`;
	break;

	case 'contrast':
	title = 'Contrast Sensitivity Test';
	content = `
	<div class="mb-6">
	<h4 class="font-semibold text-lg mb-2">Instructions:</h4>
	<p class="text-gray-600 mb-4">This test evaluates your ability to distinguish objects from their background when contrast is low. You'll need to:</p>
	<ol class="list-decimal pl-5 space-y-2 text-gray-600">
	<li>Position yourself about 2 feet (60 cm) from your screen</li>
	<li>Cover one eye with your hand</li>
	<li>Identify the letters or shapes as they become progressively fainter</li>
	<li>Note the point where you can no longer reliably identify them</li>
	<li>Repeat with the other eye</li>
	</ol>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	<strong>Note:</strong> This test is particularly sensitive to screen brightness and ambient lighting. Perform in a normally lit room.
	</p>
	</div>
	</div>
	</div>
	`;
	break;

	case 'peripheral':
	title = 'Peripheral Vision Test';
	content = `
	<div class="mb-6">
	<h4 class="font-semibold text-lg mb-2">Instructions:</h4>
	<p class="text-gray-600 mb-4">This test evaluates your side vision. You'll need to:</p>
	<ol class="list-decimal pl-5 space-y-2 text-gray-600">
	<li>Position yourself about 1 foot (30 cm) from your screen</li>
	<li>Focus on the central dot without moving your eyes</li>
	<li>Click the button or press a key when you detect movement in your side vision</li>
	<li>We'll test different areas of your peripheral vision</li>
	<li>Repeat with the other eye</li>
	</ol>
	</div>
	<div class="bg-blue-50 p-4 rounded-lg border border-blue-100 mb-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-blue-700">
	<strong>Note:</strong> This is a limited screening test. Professional perimetry provides more accurate assessment of peripheral vision.
	</p>
	</div>
	</div>
	</div>
	`;
	break;

	case 'amsler':
	title = 'Amsler Grid Test';
	content = `
	<div class="mb-6">
	<h4 class="font-semibold text-lg mb-2">Instructions:</h4>
	<p class="text-gray-600 mb-4">This test helps detect central vision problems. You'll need to:</p>
	<ol class="list-decimal pl-5 space-y-2 text-gray-600">
	<li>Wear your reading glasses if you use them</li>
	<li>Hold the grid about 12-14 inches (30-35 cm) from your eyes</li>
	<li>Cover one eye and focus on the center dot</li>
	<li>While looking at the dot, note if any lines appear wavy, blurred, or missing</li>
	<li>Repeat with the other eye</li>
	</ol>
	</div>
	<div class="bg-red-50 p-4 rounded-lg border border-red-100 mb-6">
	<div class="flex">
	<div class="flex-shrink-0">
	<svg class="h-5 w-5 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
	<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
	</svg>
	</div>
	<div class="ml-3">
	<p class="text-sm text-red-700">
	<strong>Important:</strong> If you notice any distortions, blurry areas, or missing sections in the grid, consult an eye care professional immediately as this may indicate macular problems.
	</p>
	</div>
	</div>
	</div>
	`;
	break;

	default:
	title = 'Vision Test';
	content = '<p>Test instructions will appear here.</p>';
	}

	document.getElementById('testModalTitle').textContent = title;
	document.getElementById('testModalContent').innerHTML = content;
	}

	// Function to close test modal
	function closeTest() {
	document.getElementById('testModal').classList.add('hidden');
	document.body.classList.remove('overflow-hidden');
	currentTest = null;
	}

	// Function to begin the test (would be expanded for actual test implementation)
	function beginTest() {
	alert(`Starting ${currentTest} test. In a full implementation, this would launch the actual test interface.`);
	closeTest();
	}

	// Toggle FAQ items
	function toggleFAQ(num) {
	const content = document.getElementById(`faqContent${num}`);
	const icon = document.getElementById(`faqIcon${num}`);

	if (content.classList.contains('hidden')) {
	content.classList.remove('hidden');
	icon.classList.remove('rotate-0');
	icon.classList.add('rotate-180');
	} else {
	content.classList.add('hidden');
	icon.classList.remove('rotate-180');
	icon.classList.add('rotate-0');
	}
	}
	</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=MavrickMixx/yeux" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>