<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BioScaffold: Virtual Dissection Lab</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f0f4f8; /* Light blue-gray background */
}
.specimen-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.specimen-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.tool-button {
transition: background-color 0.2s ease;
}
.tool-button:hover {
background-color: #3b82f6; /* Darker blue on hover */
color: white;
}
.section-title {
border-bottom: 2px solid #3b82f6; /* Blue underline for titles */
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
/* For better visual separation of the lab interface parts */
.lab-interface-pane {
border: 1px solid #e5e7eb; /* light gray border */
border-radius: 0.5rem; /* rounded corners */
padding: 1rem;
background-color: white;
min-height: 300px; /* Minimum height for visual */
}
</style>
</head>
<body class="text-gray-800">
<header class="bg-white shadow-md sticky top-0 z-50">
<nav class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-blue-600">
<i class="fas fa-atom mr-2"></i>BioScaffold
</a>
<div class="space-x-4">
<a href="#specimens" class="text-gray-600 hover:text-blue-600">Specimens</a>
<a href="#lab" class="text-gray-600 hover:text-blue-600">Lab Interface</a>
<a href="#quizzes" class="text-gray-600 hover:text-blue-600">Quizzes</a>
<a href="#ethical" class="text-gray-600 hover:text-blue-600">Ethics</a>
<button id="loginButton" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg">Login</button>
</div>
</nav>
</header>
<section class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-16 px-6 text-center">
<div class="container mx-auto">
<h1 class="text-4xl md:text-5xl font-bold mb-4">Welcome to BioScaffold</h1>
<p class="text-lg md:text-xl mb-8">An interactive virtual dissection lab for students and educators. Explore anatomy like never before!</p>
<a href="#specimens" class="bg-white text-blue-600 font-semibold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300">Get Started</a>
</div>
</section>
<section id="specimens" class="py-12 px-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-2 section-title inline-block">Choose Your Specimen</h2>
<p class="text-center text-gray-600 mb-10">Select a specimen to begin your virtual dissection journey. Each model is anatomically detailed.</p>
<div class="grid md:grid-cols-3 gap-8">
<div class="specimen-card bg-white rounded-xl shadow-lg overflow-hidden p-6 flex flex-col items-center text-center">
<img src="https://placehold.co/200x150/a3e635/4d7c0f?text=Frog" alt="Frog Specimen" class="w-full h-48 object-cover rounded-lg mb-4" onerror="this.src='https://placehold.co/200x150/cccccc/333333?text=Image+Not+Found'">
<h3 class="text-xl font-semibold mb-2">Frog Dissection</h3>
<p class="text-gray-600 mb-1 text-sm"><strong>Scientific Name:</strong> <em>Rana temporaria (Example)</em></p>
<p class="text-gray-600 mb-3 text-sm">Explore amphibian anatomy, from its unique skin to complex organ systems.</p>
<button class="mt-auto bg-green-500 hover:bg-green-600 text-white font-semibold py-2 px-6 rounded-lg w-full" aria-label="Start Frog Dissection">Start Dissection</button>
</div>
<div class="specimen-card bg-white rounded-xl shadow-lg overflow-hidden p-6 flex flex-col items-center text-center">
<img src="https://placehold.co/200x150/f9a8d4/831843?text=Fetal+Pig" alt="Fetal Pig Specimen" class="w-full h-48 object-cover rounded-lg mb-4" onerror="this.src='https://placehold.co/200x150/cccccc/333333?text=Image+Not+Found'">
<h3 class="text-xl font-semibold mb-2">Fetal Pig Dissection</h3>
<p class="text-gray-600 mb-1 text-sm"><strong>Scientific Name:</strong> <em>Sus scrofa domesticus</em></p>
<p class="text-gray-600 mb-3 text-sm">Study mammalian anatomy, closely mirroring human systems. Ideal for advanced study.</p>
<button class="mt-auto bg-pink-500 hover:bg-pink-600 text-white font-semibold py-2 px-6 rounded-lg w-full" aria-label="Start Fetal Pig Dissection">Start Dissection</button>
</div>
<div class="specimen-card bg-white rounded-xl shadow-lg overflow-hidden p-6 flex flex-col items-center text-center">
<img src="https://placehold.co/200x150/fcd34d/b45309?text=Flower" alt="Flower Specimen" class="w-full h-48 object-cover rounded-lg mb-4" onerror="this.src='https://placehold.co/200x150/cccccc/333333?text=Image+Not+Found'">
<h3 class="text-xl font-semibold mb-2">Flower Dissection</h3>
<p class="text-gray-600 mb-1 text-sm"><strong>Scientific Name:</strong> <em>Lilium (Example)</em></p>
<p class="text-gray-600 mb-3 text-sm">Discover the reproductive structures of angiosperms and the intricacies of plant morphology.</p>
<button class="mt-auto bg-yellow-500 hover:bg-yellow-600 text-white font-semibold py-2 px-6 rounded-lg w-full" aria-label="Start Flower Dissection">Start Dissection</button>
</div>
</div>
</div>
</section>
<section id="lab" class="py-12 px-6 bg-gray-100">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-2 section-title inline-block">Virtual Lab Interface</h2>
<p class="text-center text-gray-600 mb-10">This is where the interactive dissection would take place. (Conceptual Layout)</p>
<div class="grid lg:grid-cols-12 gap-6">
<aside class="lg:col-span-2 lab-interface-pane">
<h3 class="text-lg font-semibold mb-4 text-blue-600">Dissection Tools</h3>
<div class="space-y-3">
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Scalpel Tool">
<i class="fas fa-cut w-5 h-5"></i> <span>Scalpel</span>
</button>
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Forceps Tool">
<i class="fas fa-grip-lines w-5 h-5"></i> <span>Forceps</span>
</button>
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Pins Tool">
<i class="fas fa-thumbtack w-5 h-5"></i> <span>Pins</span>
</button>
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Probe Tool">
<i class="fas fa-search-plus w-5 h-5"></i> <span>Probe</span>
</button>
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Magnifying Glass Tool">
<i class="fas fa-search w-5 h-5"></i> <span>Magnify</span>
</button>
<hr class="my-3">
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Toggle Labels">
<i class="fas fa-tags w-5 h-5"></i> <span>Toggle Labels</span>
</button>
<button class="tool-button w-full flex items-center space-x-2 p-2 rounded-md border border-gray-300 hover:bg-blue-500 hover:text-white" aria-label="Reset View">
<i class="fas fa-undo w-5 h-5"></i> <span>Reset View</span>
</button>
</div>
</aside>
<main class="lg:col-span-7 lab-interface-pane flex flex-col items-center justify-center bg-gray-700 text-white relative">
<div class="absolute top-2 left-2 bg-gray-800 bg-opacity-70 p-2 rounded-md text-sm">
<p>Frog - External View (Example)</p>
</div>
<i class="fas fa-cube fa-5x mb-4 text-gray-400" aria-hidden="true"></i>
<p class="text-xl">3D Model Viewport</p>
<p class="text-sm text-gray-300">(Interactive 3D model would be rendered here)</p>
<div class="absolute bottom-4 flex space-x-3">
<button class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full" aria-label="Rotate Model"><i class="fas fa-sync-alt"></i></button>
<button class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full" aria-label="Zoom In Model"><i class="fas fa-search-plus"></i></button>
<button class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full" aria-label="Zoom Out Model"><i class="fas fa-search-minus"></i></button>
<button class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full" aria-label="Pan Model"><i class="fas fa-arrows-alt"></i></button>
</div>
</main>
<aside class="lg:col-span-3 lab-interface-pane">
<h3 class="text-lg font-semibold mb-4 text-blue-600">Information Panel</h3>
<div id="infoPanelContent">
<p class="text-gray-500 italic">Click on a labeled part in the 3D model to see its details here.</p>
<div class="mt-4 hidden" id="organInfoExample">
<h4 class="font-semibold text-md">Heart (Cor) <button aria-label="Play pronunciation of Heart"><i class="fas fa-volume-up text-sm text-blue-500 ml-1"></i></button></h4>
<p class="text-sm text-gray-700 mt-1"><strong>Description:</strong> A muscular organ responsible for pumping blood through the circulatory system.</p>
<p class="text-sm text-gray-700 mt-1"><strong>Function:</strong> Circulates oxygenated blood to the body and deoxygenated blood to the lungs.</p>
<img src="https://placehold.co/200x100/e0e7ff/4338ca?text=Heart+Diagram" alt="Heart Diagram" class="mt-2 rounded" onerror="this.src='https://placehold.co/200x100/cccccc/333333?text=Diagram+Not+Found'">
</div>
</div>
</aside>
</div>
</div>
</section>
<section id="quizzes" class="py-12 px-6">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-2 section-title inline-block">Test Your Knowledge</h2>
<p class="text-center text-gray-600 mb-10">Interactive quizzes to reinforce your learning. (Quiz module to be developed)</p>
<div class="bg-white p-8 rounded-xl shadow-lg text-center">
<i class="fas fa-question-circle fa-3x text-blue-500 mb-4"></i>
<h3 class="text-xl font-semibold mb-3">Quizzes Coming Soon!</h3>
<p class="text-gray-600">Challenge yourself with identification quizzes, multiple-choice questions, and more.</p>
<button class="mt-6 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-6 rounded-lg" disabled>Access Quizzes (Unavailable)</button>
</div>
</div>
</section>
<section id="ethical" class="py-12 px-6 bg-blue-50">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-2 section-title inline-block">Ethical & Educational Benefits</h2>
<p class="text-center text-gray-700 mb-10">Learn why virtual dissection is a valuable and responsible alternative.</p>
<div class="bg-white p-8 rounded-xl shadow-lg">
<div class="grid md:grid-cols-2 gap-6">
<div>
<h4 class="font-semibold text-lg text-blue-700 mb-2"><i class="fas fa-paw mr-2"></i>Animal Welfare</h4>
<p class="text-gray-700">Reduces the need for animal specimens, promoting ethical treatment and conservation.</p>
</div>
<div>
<h4 class="font-semibold text-lg text-blue-700 mb-2"><i class="fas fa-recycle mr-2"></i>Reduced Waste</h4>
<p class="text-gray-700">Eliminates biological waste and the use of chemical preservatives.</p>
</div>
<div>
<h4 class="font-semibold text-lg text-blue-700 mb-2"><i class="fas fa-redo mr-2"></i>Repeatability & Accessibility</h4>
<p class="text-gray-700">Dissect anytime, anywhere, and repeat steps as needed for mastery. Accessible to all students.</p>
</div>
<div>
<h4 class="font-semibold text-lg text-blue-700 mb-2"><i class="fas fa-shield-alt mr-2"></i>Safety</h4>
<p class="text-gray-700">No risk from sharp tools or exposure to chemicals, providing a safe learning environment.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-gray-800 text-gray-300 py-8 px-6 text-center">
<div class="container mx-auto">
<p>© <span id="currentYear"></span> BioScaffold Virtual Dissection Lab. All Rights Reserved.</p>
<p class="text-sm mt-1">An innovative learning tool for the future of biology education.</p>
<div class="mt-3">
<a href="#" class="text-gray-400 hover:text-white mx-2"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-400 hover:text-white mx-2"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-white mx-2"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</footer>
<script>
// Set current year in footer
document.getElementById('currentYear').textContent = new Date().getFullYear();
// Basic interactivity for demonstration (conceptual)
// In a real app, this would be handled by a framework like React/Vue/Angular and involve complex 3D logic.
// Example: Show organ info when a conceptual part is "clicked"
// This is a very simplified stand-in.
const labViewport = document.querySelector('main.lg\\:col-span-7'); // The 3D viewport area
const organInfoExample = document.getElementById('organInfoExample');
const infoPanelDefaultText = document.querySelector('#infoPanelContent p.italic');
if (labViewport && organInfoExample && infoPanelDefaultText) {
labViewport.addEventListener('click', (event) => {
// Simulate clicking on an organ in the 3D view
// In a real app, you'd get this from the 3D scene's raycaster
if (event.target === labViewport || labViewport.contains(event.target)) { // Check if click is within viewport
infoPanelDefaultText.classList.add('hidden');
organInfoExample.classList.remove('hidden');
// You could update organInfoExample's content based on what was "clicked"
}
});
}
// Specimen selection (conceptual navigation)
const specimenButtons = document.querySelectorAll('.specimen-card button');
specimenButtons.forEach(button => {
button.addEventListener('click', () => {
const specimenName = button.closest('.specimen-card').querySelector('h3').textContent;
alert(`Navigating to ${specimenName}... (Full lab interface would load here)`);
// In a real app, this would trigger loading the specific 3D model and lab environment
window.location.hash = "lab"; // Scroll to lab section for demo
});
});
// Tool button interaction (visual feedback only)
const toolButtons = document.querySelectorAll('.tool-button');
toolButtons.forEach(button => {
button.addEventListener('click', () => {
// Remove 'active' state from other tools
toolButtons.forEach(btn => btn.classList.remove('bg-blue-600', 'text-white'));
// Add 'active' state to clicked tool
button.classList.add('bg-blue-600', 'text-white');
console.log(button.getAttribute('aria-label') + " selected");
// Actual tool functionality would be implemented here
});
});
</script>
</body>
</html>
Welcome to BioScaffold
An interactive virtual dissection lab for students and educators. Explore anatomy like never before!
Get StartedChoose Your Specimen
Select a specimen to begin your virtual dissection journey. Each model is anatomically detailed.
Frog Dissection
Scientific Name: Rana temporaria (Example)
Explore amphibian anatomy, from its unique skin to complex organ systems.
Fetal Pig Dissection
Scientific Name: Sus scrofa domesticus
Study mammalian anatomy, closely mirroring human systems. Ideal for advanced study.
Flower Dissection
Scientific Name: Lilium (Example)
Discover the reproductive structures of angiosperms and the intricacies of plant morphology.
Virtual Lab Interface
This is where the interactive dissection would take place. (Conceptual Layout)
Frog - External View (Example)
3D Model Viewport
(Interactive 3D model would be rendered here)
Test Your Knowledge
Interactive quizzes to reinforce your learning. (Quiz module to be developed)
Quizzes Coming Soon!
Challenge yourself with identification quizzes, multiple-choice questions, and more.
Ethical & Educational Benefits
Learn why virtual dissection is a valuable and responsible alternative.
Animal Welfare
Reduces the need for animal specimens, promoting ethical treatment and conservation.
Reduced Waste
Eliminates biological waste and the use of chemical preservatives.
Repeatability & Accessibility
Dissect anytime, anywhere, and repeat steps as needed for mastery. Accessible to all students.
Safety
No risk from sharp tools or exposure to chemicals, providing a safe learning environment.
No comments:
Post a Comment