File size: 6,796 Bytes
d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 51dd040 d73c5f1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CaliAnatomy 3D Explorer | Home (Italiano)</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.min.js"></script>
</head>
<body class="bg-gray-50">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="mb-16">
<div class="text-center mb-12">
<h1 class="text-4xl md:text-5xl font-bold text-red-600 mb-4">CaliAnatomy 3D Explorer</h1>
<p class="text-xl text-gray-700 max-w-3xl mx-auto">Modelli 3D interattivi per studiare l'anatomia e la biomeccanica del calisthenics</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i data-feather="activity" class="w-16 h-16 text-red-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Sistema Muscolare</h3>
<p class="text-gray-600 mb-4">Esplora tutti i gruppi muscolari coinvolti nei movimenti di calisthenics</p>
<a href="muscles.html" class="inline-flex items-center text-red-600 font-medium">
Esplora <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i data-feather="bone" class="w-16 h-16 text-red-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Sistema Scheletrico</h3>
<p class="text-gray-600 mb-4">Comprendi le strutture ossee e la meccanica articolare</p>
<a href="skeleton.html" class="inline-flex items-center text-red-600 font-medium">
Esplora <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition-transform hover:scale-105">
<div class="h-48 bg-red-100 flex items-center justify-center">
<i data-feather="target" class="w-16 h-16 text-red-600"></i>
</div>
<div class="p-6">
<h3 class="text-xl font-bold text-gray-800 mb-2">Libreria di Esercizi</h3>
<p class="text-gray-600 mb-4">Scopri quali muscoli lavorano in ogni esercizio di calisthenics</p>
<a href="exercises.html" class="inline-flex items-center text-red-600 font-medium">
Esplora <i data-feather="arrow-right" class="ml-2 w-4 h-4"></i>
</a>
</div>
</div>
</div>
</section>
<section class="py-12 bg-white rounded-xl shadow-lg px-6">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold text-gray-800 mb-6">Domina la Biomeccanica del Calisthenics</h2>
<p class="text-lg text-gray-600 mb-8">
I nostri modelli 3D interattivi ti aiutano a visualizzare l'attivazione muscolare, gli angoli articolari
e i pattern di movimento in tutte le abilità fondamentali del calisthenics, dai pull-up alle planche.
</p>
<div id="home-3d-container" class="h-96 w-full bg-gray-100 rounded-lg mb-8">
<!-- 3D model will be loaded here -->
</div>
<a href="biomechanics.html" class="inline-block bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-lg transition-colors">
Esplora la Biomeccanica
</a>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
// Simple 3D model for homepage
document.addEventListener('DOMContentLoaded', function() {
const container = document.getElementById('home-3d-container');
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
// Add lights
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// Create a simple human figure
const bodyGeometry = new THREE.SphereGeometry(1, 32, 32);
const bodyMaterial = new THREE.MeshPhongMaterial({ color: 0xff6b6b });
const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
scene.add(body);
// Position camera
camera.position.z = 5;
// Animation loop
function animate() {
requestAnimationFrame(animate);
body.rotation.y += 0.01;
renderer.render(scene, camera);
}
// Handle window resize
window.addEventListener('resize', function() {
camera.aspect = container.clientWidth / container.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(container.clientWidth, container.clientHeight);
});
animate();
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |