Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Understanding Ectodermal Dysplasia</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> | |
| .symptom-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Header Section --> | |
| <header class="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-12 px-4 md:px-8"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 fade-in"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Understanding Ectodermal Dysplasia</h1> | |
| <p class="text-xl mb-6">A group of genetic conditions affecting the development of ectodermal tissues</p> | |
| <a href="#learn-more" class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-gray-100 transition duration-300 inline-block"> | |
| Learn More <i class="fas fa-arrow-down ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center fade-in"> | |
| <img src="https://www.nfed.org/wp-content/uploads/2021/03/ED-infographic-1.png" alt="Ectodermal Dysplasia Infographic" class="rounded-lg shadow-xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Section --> | |
| <main class="container mx-auto px-4 py-12" id="learn-more"> | |
| <!-- What is ED Section --> | |
| <section class="mb-16 fade-in"> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-dna text-purple-500 mr-4"></i> What is Ectodermal Dysplasia? | |
| </h2> | |
| <div class="prose max-w-none text-gray-700"> | |
| <p class="mb-4 text-lg"> | |
| Ectodermal dysplasia (ED) refers to a diverse group of genetic disorders that affect the ectoderm, the outermost layer of cells in a developing embryo. The ectoderm gives rise to several tissues and structures including: | |
| </p> | |
| <ul class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Skin</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Hair</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Nails</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Teeth</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Sweat glands</li> | |
| <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mucous membranes</li> | |
| </ul> | |
| <p class="mb-4 text-lg"> | |
| There are more than 180 different types of ectodermal dysplasia, each with its own pattern of symptoms and inheritance pattern. The conditions are present from birth and affect both males and females of all ethnic backgrounds. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Symptoms Section --> | |
| <section class="mb-16 fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> Common Symptoms | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Symptom Card 1 --> | |
| <div class="symptom-card bg-white rounded-lg shadow-md p-6 transition duration-300 cursor-pointer"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-tooth text-blue-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Dental Abnormalities</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Missing teeth (hypodontia), malformed teeth, or pointed teeth are common. Some individuals may have only a few teeth or none at all. | |
| </p> | |
| </div> | |
| <!-- Symptom Card 2 --> | |
| <div class="symptom-card bg-white rounded-lg shadow-md p-6 transition duration-300 cursor-pointer"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-cut text-purple-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Hair Abnormalities</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Sparse, thin, slow-growing, or absent hair. Hair may be light-colored, coarse, or wiry. Eyebrows and eyelashes may also be affected. | |
| </p> | |
| </div> | |
| <!-- Symptom Card 3 --> | |
| <div class="symptom-card bg-white rounded-lg shadow-md p-6 transition duration-300 cursor-pointer"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-red-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-tint text-red-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Sweating Problems</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Reduced or absent sweat glands (hypohidrosis) leading to difficulty regulating body temperature, which can result in heat intolerance. | |
| </p> | |
| </div> | |
| <!-- Symptom Card 4 --> | |
| <div class="symptom-card bg-white rounded-lg shadow-md p-6 transition duration-300 cursor-pointer"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-hand-paper text-green-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Nail Abnormalities</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Thickened, brittle, ridged, or slow-growing nails. Some individuals may have missing nails or nails that are spoon-shaped. | |
| </p> | |
| </div> | |
| <!-- Symptom Card 5 --> | |
| <div class="symptom-card bg-white rounded-lg shadow-md p-6 transition duration-300 cursor-pointer"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-yellow-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-skin text-yellow-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Skin Issues</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Thin, dry, or easily irritated skin. Some forms cause skin to be thick on palms and soles. Pigmentation changes may occur. | |
| </p> | |
| </div> | |
| <!-- Symptom Card 6 --> | |
| <div class="symptom-card bg-white rounded-lg shadow-md p-6 transition duration-300 cursor-pointer"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 p-3 rounded-full mr-4"> | |
| <i class="fas fa-eye text-indigo-500 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Facial Characteristics</h3> | |
| </div> | |
| <p class="text-gray-600"> | |
| Distinctive facial features including a prominent forehead, flattened bridge of the nose, and thick lips. Some may have cleft lip/palate. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Types Section --> | |
| <section class="mb-16 fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| <i class="fas fa-list-ul text-purple-500 mr-2"></i> Common Types of Ectodermal Dysplasia | |
| </h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Accordion Item 1 --> | |
| <div class="border-b border-gray-200"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition duration-200"> | |
| <span class="text-xl font-semibold text-blue-600">Hypohidrotic Ectodermal Dysplasia (HED)</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6"> | |
| <p class="mb-4 text-gray-700"> | |
| The most common type, affecting about 1 in 17,000 people worldwide. Key features include: | |
| </p> | |
| <ul class="list-disc pl-6 mb-4 text-gray-700"> | |
| <li class="mb-2">Reduced ability to sweat (hypohidrosis)</li> | |
| <li class="mb-2">Sparse hair (hypotrichosis)</li> | |
| <li class="mb-2">Missing teeth (hypodontia)</li> | |
| <li class="mb-2">Characteristic facial features</li> | |
| </ul> | |
| <p class="text-gray-700"> | |
| HED can be inherited in X-linked recessive (most common), autosomal recessive, or autosomal dominant patterns. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accordion Item 2 --> | |
| <div class="border-b border-gray-200"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition duration-200"> | |
| <span class="text-xl font-semibold text-blue-600">Ectrodactyly-Ectodermal Dysplasia-Clefting (EEC) Syndrome</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6"> | |
| <p class="mb-4 text-gray-700"> | |
| A rare condition characterized by three major features: | |
| </p> | |
| <ul class="list-disc pl-6 mb-4 text-gray-700"> | |
| <li class="mb-2">Ectrodactyly (split hand/foot malformation)</li> | |
| <li class="mb-2">Ectodermal dysplasia</li> | |
| <li class="mb-2">Cleft lip and/or palate</li> | |
| </ul> | |
| <p class="text-gray-700"> | |
| Other features may include urinary tract abnormalities, hearing loss, and vision problems. It's typically inherited in an autosomal dominant pattern. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Accordion Item 3 --> | |
| <div class="border-b border-gray-200"> | |
| <button class="accordion-btn w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition duration-200"> | |
| <span class="text-xl font-semibold text-blue-600">Anhidrotic Ectodermal Dysplasia with Immune Deficiency (EDA-ID)</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="accordion-content px-6"> | |
| <div class="pb-6"> | |
| <p class="mb-4 text-gray-700"> | |
| A rare form that combines features of ectodermal dysplasia with immune system problems: | |
| </p> | |
| <ul class="list-disc pl-6 mb-4 text-gray-700"> | |
| <li class="mb-2">Recurrent infections due to immune deficiency</li> | |
| <li class="mb-2">Absent or reduced sweat glands</li> | |
| <li class="mb-2">Sparse hair and missing teeth</li> | |
| <li class="mb-2">Increased susceptibility to bacterial infections</li> | |
| </ul> | |
| <p class="text-gray-700"> | |
| This type is caused by mutations in the IKBKG gene and is inherited in an X-linked recessive pattern. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Diagnosis & Treatment Section --> | |
| <section class="mb-16 fade-in"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <!-- Diagnosis Card --> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-stethoscope text-blue-500 mr-4"></i> Diagnosis | |
| </h2> | |
| <div class="prose max-w-none text-gray-700"> | |
| <p class="mb-4"> | |
| Diagnosis of ectodermal dysplasia typically involves: | |
| </p> | |
| <ul class="list-disc pl-6 mb-4"> | |
| <li class="mb-2">Detailed medical history and physical examination</li> | |
| <li class="mb-2">Dental evaluation (panoramic X-rays to assess tooth development)</li> | |
| <li class="mb-2">Skin biopsy to evaluate sweat glands</li> | |
| <li class="mb-2">Genetic testing to identify specific mutations</li> | |
| <li class="mb-2">Family history assessment</li> | |
| </ul> | |
| <p> | |
| Many cases are diagnosed in childhood based on characteristic features, but milder forms may not be recognized until adulthood. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Treatment Card --> | |
| <div class="bg-white rounded-xl shadow-md p-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-heartbeat text-red-500 mr-4"></i> Treatment & Management | |
| </h2> | |
| <div class="prose max-w-none text-gray-700"> | |
| <p class="mb-4"> | |
| While there's no cure for ectodermal dysplasia, treatments focus on managing symptoms: | |
| </p> | |
| <ul class="list-disc pl-6 mb-4"> | |
| <li class="mb-2"><strong>Dental care:</strong> Dentures, implants, or other prosthetics for missing teeth</li> | |
| <li class="mb-2"><strong>Temperature regulation:</strong> Cooling vests, air conditioning, hydration</li> | |
| <li class="mb-2"><strong>Skin care:</strong> Moisturizers, gentle cleansers, sun protection</li> | |
| <li class="mb-2"><strong>Hair care:</strong> Wigs or hairpieces if desired</li> | |
| <li class="mb-2"><strong>Vision/hearing:</strong> Corrective measures as needed</li> | |
| <li class="mb-2"><strong>Genetic counseling:</strong> For family planning</li> | |
| </ul> | |
| <p> | |
| A multidisciplinary team approach (dentists, dermatologists, geneticists, etc.) provides the best care. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Living with ED Section --> | |
| <section class="mb-16 fade-in"> | |
| <div class="bg-gradient-to-r from-blue-100 to-purple-100 rounded-xl shadow-md p-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-6 text-center"> | |
| <i class="fas fa-hands-helping text-blue-500 mr-2"></i> Living with Ectodermal Dysplasia | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white bg-opacity-80 rounded-lg p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-child text-yellow-500 mr-3"></i> For Children | |
| </h3> | |
| <ul class="list-disc pl-6 text-gray-700"> | |
| <li class="mb-2">Monitor for overheating during physical activity</li> | |
| <li class="mb-2">Early dental intervention is crucial</li> | |
| <li class="mb-2">Psychological support for self-esteem issues</li> | |
| <li class="mb-2">School accommodations if needed</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white bg-opacity-80 rounded-lg p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-users text-purple-500 mr-3"></i> For Families | |
| </h3> | |
| <ul class="list-disc pl-6 text-gray-700"> | |
| <li class="mb-2">Connect with support organizations</li> | |
| <li class="mb-2">Educate family members about the condition</li> | |
| <li class="mb-2">Consider genetic counseling</li> | |
| <li class="mb-2">Advocate for your child's needs</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white bg-opacity-80 rounded-lg p-6"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-graduation-cap text-green-500 mr-3"></i> Awareness & Research | |
| </h3> | |
| <ul class="list-disc pl-6 text-gray-700"> | |
| <li class="mb-2">Several organizations support ED research</li> | |
| <li class="mb-2">Clinical trials are exploring new treatments</li> | |
| <li class="mb-2">Gene therapy research shows promise</li> | |
| <li class="mb-2">Increasing awareness improves diagnosis</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section class="fade-in"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center"> | |
| <i class="fas fa-book text-blue-500 mr-2"></i> Additional Resources | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <a href="https://www.nfed.org" target="_blank" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300 flex items-center"> | |
| <div class="bg-blue-100 p-4 rounded-full mr-4"> | |
| <i class="fas fa-globe-americas text-blue-500 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">National Foundation for Ectodermal Dysplasias</h3> | |
| <p class="text-gray-600">Comprehensive information and support</p> | |
| </div> | |
| </a> | |
| <a href="https://rarediseases.info.nih.gov/diseases/6317/ectodermal-dysplasia" target="_blank" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300 flex items-center"> | |
| <div class="bg-green-100 p-4 rounded-full mr-4"> | |
| <i class="fas fa-book-medical text-green-500 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">NIH Genetic and Rare Diseases Information Center</h3> | |
| <p class="text-gray-600">Medical information about ED</p> | |
| </div> | |
| </a> | |
| <a href="https://www.ncbi.nlm.nih.gov/books/NBK1112/" target="_blank" class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition duration-300 flex items-center"> | |
| <div class="bg-purple-100 p-4 rounded-full mr-4"> | |
| <i class="fas fa-dna text-purple-500 text-2xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-2">GeneReviews: Ectodermal Dysplasia</h3> | |
| <p class="text-gray-600">Detailed genetic information</p> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- FAQ Section --> | |
| <section class="bg-gray-100 py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center text-gray-800 mb-8"> | |
| <i class="fas fa-question-circle text-purple-500 mr-2"></i> Frequently Asked Questions | |
| </h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- FAQ Item 1 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-btn w-full flex justify-between items-center text-left"> | |
| <span class="text-lg font-semibold text-blue-600">Is ectodermal dysplasia contagious?</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-700"> | |
| No, ectodermal dysplasia is not contagious. It is a genetic condition that people are born with. It cannot be "caught" from someone who has it. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-btn w-full flex justify-between items-center text-left"> | |
| <span class="text-lg font-semibold text-blue-600">Can ectodermal dysplasia be cured?</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-700"> | |
| Currently, there is no cure for ectodermal dysplasia as it is a genetic condition. However, many of the symptoms can be effectively managed with proper medical and dental care, allowing individuals with ED to live full, healthy lives. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-btn w-full flex justify-between items-center text-left"> | |
| <span class="text-lg font-semibold text-blue-600">How is ectodermal dysplasia inherited?</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-700"> | |
| The inheritance pattern depends on the specific type of ED. Some forms are inherited in an X-linked recessive pattern (primarily affecting males), while others follow autosomal dominant or autosomal recessive patterns. Genetic testing can help determine the specific type and inheritance pattern in a family. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-btn w-full flex justify-between items-center text-left"> | |
| <span class="text-lg font-semibold text-blue-600">What is the life expectancy for someone with ED?</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-700"> | |
| Most forms of ectodermal dysplasia do not affect life expectancy. With proper management of symptoms (especially temperature regulation and dental care), individuals with ED can have normal lifespans. However, rare forms that involve immune system problems may have more serious implications. | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="mb-4"> | |
| <button class="faq-btn w-full flex justify-between items-center text-left"> | |
| <span class="text-lg font-semibold text-blue-600">Where can I find support groups for ED?</span> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-700"> | |
| The National Foundation for Ectodermal Dysplasias (NFED) is a great resource that connects families and individuals affected by ED. They offer support networks, educational materials, and organize conferences. Many countries also have their own ED support organizations that can be found through online searches. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-bold mb-2">Ectodermal Dysplasia Resources</h3> | |
| <p class="text-gray-400">Providing information and support for individuals and families affected by ED</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"> | |
| <i class="fas fa-envelope text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>This information is provided for educational purposes only and should not be used as a substitute for professional medical advice.</p> | |
| <p class="mt-2">© 2023 Ectodermal Dysplasia Information Center. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Accordion functionality | |
| document.querySelectorAll('.accordion-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| if (content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| icon.classList.remove('fa-minus'); | |
| icon.classList.add('fa-plus'); | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.classList.remove('fa-plus'); | |
| icon.classList.add('fa-minus'); | |
| } | |
| }); | |
| }); | |
| // FAQ functionality | |
| document.querySelectorAll('.faq-btn').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| if (content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| icon.classList.remove('fa-minus'); | |
| icon.classList.add('fa-plus'); | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.classList.remove('fa-plus'); | |
| icon.classList.add('fa-minus'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animation on scroll | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInOnScroll = () => { | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementTop < windowHeight - 100) { | |
| element.style.opacity = '1'; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', fadeInOnScroll); | |
| window.addEventListener('load', fadeInOnScroll); | |
| </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=wesagar/deepseek-v3" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |